.gdvc-carousel-wrap {
	position: relative;
	width: 100%;
	box-sizing: border-box;
}

.gdvc-carousel-wrap * {
	box-sizing: border-box;
}

.gdvc-track-viewport {
	overflow: hidden;
	width: 100%;
}

.gdvc-track {
	display: flex;
	gap: var(--gdvc-gap, 20px);
	will-change: transform;
}

.gdvc-slide {
	flex: 0 0 auto;
	cursor: pointer;
}

.gdvc-slide-inner {
	position: relative;
	width: var(--gdvc-img-width, 400px);
	height: var(--gdvc-img-height, 500px);
	max-width: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
}

.gdvc-overlay {
	position: absolute;
	inset: 0;
	background-color: var(--gdvc-overlay-color, #e30613);
	opacity: 0;
	transition: opacity 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 20px;
	pointer-events: none;
	z-index: 1;
}

.gdvc-slide-inner:hover .gdvc-overlay {
	opacity: var(--gdvc-overlay-opacity, 0.75);
}

.gdvc-overlay-text {
	color: var(--gdvc-overlay-text-color, #ffffff);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
}

/*
 * Most WordPress themes ship their own global "button" styles (border
 * radius, box shadow, background, padding). Those rules are often more
 * specific than a plugin's, or load after it, which is what was turning
 * this into a solid square instead of a circle. "all: unset" strips every
 * inherited or theme rule first, then every visual property needed is set
 * again explicitly right below, so the button renders the same on any
 * theme.
 */
.gdvc-carousel-wrap button.gdvc-play-btn {
	all: unset !important;
	box-sizing: border-box !important;
	position: absolute !important;
	left: 20px !important;
	bottom: 20px !important;
	top: auto !important;
	right: auto !important;
	z-index: 2 !important;
	width: var(--gdvc-play-size, 60px) !important;
	height: var(--gdvc-play-size, 60px) !important;
	min-width: var(--gdvc-play-size, 60px) !important;
	min-height: var(--gdvc-play-size, 60px) !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 50% !important;
	border: 3px solid var(--gdvc-play-color, #e30613) !important;
	background-color: var(--gdvc-play-bg, #ffffff) !important;
	background-image: none !important;
	box-shadow: none !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	transition: transform 0.2s ease !important;
}

.gdvc-carousel-wrap button.gdvc-play-btn svg {
	width: 42% !important;
	height: 42% !important;
	margin-left: 4% !important;
	display: block !important;
	pointer-events: none !important;
}

.gdvc-carousel-wrap button.gdvc-play-btn svg polygon {
	fill: var(--gdvc-play-color, #e30613) !important;
}

.gdvc-slide-inner:hover .gdvc-play-btn {
	transform: scale(1.08);
}

.gdvc-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin-top: 20px;
}

.gdvc-carousel-wrap button.gdvc-dot {
	all: unset !important;
	box-sizing: border-box !important;
	width: 12px !important;
	height: 12px !important;
	min-width: 12px !important;
	min-height: 12px !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 50% !important;
	background-color: var(--gdvc-dot-color, #cccccc) !important;
	background-image: none !important;
	box-shadow: none !important;
	border: none !important;
	cursor: pointer !important;
	transition: background-color 0.2s ease, transform 0.2s ease !important;
}

.gdvc-carousel-wrap button.gdvc-dot.is-active {
	background-color: var(--gdvc-dot-active-color, #e30613) !important;
}

/* ---------------------------------------------------------------- */
/* Video modal                                                        */
/* ---------------------------------------------------------------- */

.gdvc-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	align-items: center;
	justify-content: center;
}

.gdvc-modal.is-open {
	display: flex;
}

.gdvc-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.85);
}

.gdvc-modal-inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 900px;
	margin: 0 20px;
}

.gdvc-modal-player {
	position: relative;
	width: 100%;
	background: #000;
}

.gdvc-modal-player.is-landscape {
	aspect-ratio: 16 / 9;
}

.gdvc-modal-player.is-portrait {
	aspect-ratio: 9 / 16;
	max-height: 85vh;
	margin: 0 auto;
}

.gdvc-modal-player iframe,
.gdvc-modal-player video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ---------------------------------------------------------------- */
/* Vimeo custom control bar                                           */
/* ---------------------------------------------------------------- */

.gdvc-vimeo-wrap {
	position: absolute;
	inset: 0;
	background: #000;
}

.gdvc-vimeo-embed {
	position: absolute;
	inset: 0;
}

.gdvc-vimeo-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.gdvc-vimeo-wrap:fullscreen .gdvc-custom-controls,
.gdvc-vimeo-wrap:-webkit-full-screen .gdvc-custom-controls {
	padding-bottom: 20px;
}

.gdvc-custom-controls {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	background-color: var(--gdvc-controls-bg, rgba(0, 0, 0, 0.65));
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.gdvc-vimeo-wrap:hover .gdvc-custom-controls,
.gdvc-vimeo-wrap.is-controls-visible .gdvc-custom-controls {
	opacity: 1;
	transform: translateY(0);
}

/*
 * Touch devices have no hover state, so the rule above never fires there.
 * Without this, the control bar (including the mute button) stayed
 * invisible on phones and tablets even after the video fell back to muted
 * autoplay, leaving no visible way to tap for sound. "(hover: none)"
 * reliably detects touch-primary devices across current mobile browsers.
 */
@media (hover: none) {
	.gdvc-custom-controls {
		opacity: 1;
		transform: translateY(0);
	}
}

.gdvc-custom-controls button.gdvc-ctrl-btn {
	all: unset !important;
	box-sizing: border-box !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 28px !important;
	height: 28px !important;
	min-width: 28px !important;
	min-height: 28px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	cursor: pointer !important;
	color: var(--gdvc-controls-icon, #ffffff) !important;
	flex: 0 0 auto !important;
}

.gdvc-custom-controls button.gdvc-ctrl-btn svg {
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.gdvc-custom-controls button.gdvc-ctrl-btn svg polygon,
.gdvc-custom-controls button.gdvc-ctrl-btn svg rect {
	fill: var(--gdvc-controls-icon, #ffffff);
}

.gdvc-custom-controls button.gdvc-ctrl-btn svg path,
.gdvc-custom-controls button.gdvc-ctrl-btn svg line {
	stroke: var(--gdvc-controls-icon, #ffffff);
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.gdvc-ctrl-time {
	color: var(--gdvc-controls-icon, #ffffff);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	flex: 0 0 auto;
	opacity: 0.9;
}

.gdvc-ctrl-progress {
	flex: 1 1 auto;
	cursor: pointer;
	padding: 8px 0;
}

.gdvc-ctrl-progress-track {
	position: relative;
	width: 100%;
	height: 4px;
	border-radius: 2px;
	background-color: rgba(255, 255, 255, 0.3);
}

.gdvc-ctrl-progress-fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 0%;
	border-radius: 2px;
	background-color: var(--gdvc-controls-accent, #e30613);
}

.gdvc-ctrl-progress-fill::after {
	content: "";
	position: absolute;
	right: -5px;
	top: 50%;
	transform: translateY(-50%);
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: var(--gdvc-controls-accent, #e30613);
}

/*
 * This selector sits outside .gdvc-carousel-wrap, so its specificity is
 * lower than the play button's and it lost the fight against the theme's
 * own button styling (which showed up as a solid red block). "all: unset"
 * alone only wins on equal footing; if the theme rule carries !important,
 * unset does not override it. Every visual property here is marked
 * !important so this button renders the same regardless of what the
 * active theme does to "button" elements.
 */
button.gdvc-modal-close.gdvc-modal-close {
	all: unset !important;
	box-sizing: border-box !important;
	position: fixed !important;
	top: 24px !important;
	right: 24px !important;
	left: auto !important;
	bottom: auto !important;
	z-index: 100001 !important;
	width: 44px !important;
	height: 44px !important;
	min-width: 44px !important;
	min-height: 44px !important;
	max-width: 44px !important;
	max-height: 44px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 50% !important;
	background-color: rgba(0, 0, 0, 0.6) !important;
	background-image: none !important;
	box-shadow: none !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	transition: background-color 0.2s ease, transform 0.2s ease !important;
}

button.gdvc-modal-close.gdvc-modal-close:hover {
	background-color: rgba(0, 0, 0, 0.85) !important;
	transform: scale(1.06) !important;
}

button.gdvc-modal-close.gdvc-modal-close svg {
	width: 40% !important;
	height: 40% !important;
	display: block !important;
	pointer-events: none !important;
}

button.gdvc-modal-close.gdvc-modal-close svg line {
	stroke: #ffffff !important;
	stroke-width: 2.5 !important;
	stroke-linecap: round !important;
}

/*
 * Same hardening as the close button above: fixed to the viewport (not the
 * modal-inner box, whose height varies with orientation) and every visual
 * property forced with !important so the theme's own button styling can't
 * turn these into solid blocks either.
 */
button.gdvc-modal-nav.gdvc-modal-nav {
	all: unset !important;
	box-sizing: border-box !important;
	position: fixed !important;
	top: 50% !important;
	bottom: auto !important;
	transform: translateY(-50%) !important;
	z-index: 100001 !important;
	width: 48px !important;
	height: 48px !important;
	min-width: 48px !important;
	min-height: 48px !important;
	max-width: 48px !important;
	max-height: 48px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 50% !important;
	background-color: rgba(0, 0, 0, 0.6) !important;
	background-image: none !important;
	box-shadow: none !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	transition: background-color 0.2s ease, transform 0.2s ease !important;
}

button.gdvc-modal-nav.gdvc-modal-prev {
	left: 24px !important;
	right: auto !important;
}

button.gdvc-modal-nav.gdvc-modal-next {
	right: 24px !important;
	left: auto !important;
}

button.gdvc-modal-nav.gdvc-modal-nav:hover {
	background-color: rgba(0, 0, 0, 0.85) !important;
	transform: translateY(-50%) scale(1.06) !important;
}

button.gdvc-modal-nav.gdvc-modal-nav svg {
	width: 38% !important;
	height: 38% !important;
	display: block !important;
	pointer-events: none !important;
}

button.gdvc-modal-nav.gdvc-modal-nav svg polyline {
	fill: none !important;
	stroke: #ffffff !important;
	stroke-width: 2.5 !important;
	stroke-linecap: round !important;
	stroke-linejoin: round !important;
}

@media (max-width: 600px) {
	button.gdvc-modal-nav.gdvc-modal-prev {
		left: 8px !important;
	}
	button.gdvc-modal-nav.gdvc-modal-next {
		right: 8px !important;
	}
}

.gdvc-modal.gdvc-single-slide .gdvc-modal-nav {
	display: none !important;
}

@media (max-width: 1024px) {
	.gdvc-slide-inner {
		width: min(var(--gdvc-img-width, 400px), 46vw);
	}
}

@media (max-width: 600px) {
	/*
	 * The mobile setting is "1 item visible at a time", but capping the
	 * tile at 80% of the screen (the old value here) always left a 20%
	 * sliver of the next video peeking in, which reads as more than one
	 * video on screen. Giving the flex item itself (not just the image
	 * inside it) an explicit 100% width makes it take the full row with
	 * nothing else visible alongside it.
	 */
	.gdvc-slide {
		width: 100%;
	}
	.gdvc-slide-inner {
		width: 100%;
	}
	.gdvc-modal-inner {
		margin: 0 12px;
	}
}