/* Design Tiles – Shoppable Video Carousel
   Palette: warm ivory, soft taupe, charcoal, burgundy accent (matches pagination pill).
   Captions are set in a serif pill — editorial, calm, architectural. */

.dtvc {
	--dtvc-ivory: #faf8f4;
	--dtvc-sand: #efe9e0;
	--dtvc-taupe: #b8aa99;
	--dtvc-charcoal: #2b2724;
	--dtvc-burgundy: #6e2f33;
	--dtvc-card-bg: #ffffff;
	--dtvc-caption-bg: rgba(250, 248, 244, 0.88);
	--dtvc-sale: #b91d00; /* matches the DT Header plugin's sale red */
	--dtvc-serif: Georgia, "Times New Roman", serif;
	--dtvc-radius: 14px;
	--dtvc-slide-w: 300px;
	position: relative;
	font-family: inherit;
	color: var(--dtvc-charcoal);
}

.dtvc__heading {
	font-family: var(--dtvc-serif);
	font-weight: 400;
	letter-spacing: 0.01em;
	margin: 0 0 1.25rem;
}

/* ---- Track ---- */
.dtvc__viewport { overflow: hidden; }

.dtvc__track {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x proximity; /* 'mandatory' fights the expand animation and judders */
	scroll-behavior: smooth;
	padding: 12px 4px 8px; /* room for the elevated slide's -8px lift (viewport clips overflow) */
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.dtvc__track::-webkit-scrollbar { display: none; }
.dtvc__track:focus-visible { outline: 2px solid var(--dtvc-burgundy); outline-offset: 2px; }

.dtvc__slide {
	flex: 0 0 var(--dtvc-slide-w);
	scroll-snap-align: start;
	transition: flex-basis 0.45s cubic-bezier(0.25, 0.8, 0.3, 1), opacity 0.45s ease, transform 0.45s ease, filter 0.45s ease;
}

/* One slide is always elevated (taller, full colour); the rest sit under a grey overlay.
   Hover transfers the elevation; click opens the player. */
.dtvc.has-selection .dtvc__slide {
	opacity: 0.55;
	filter: grayscale(0.5);
}
.dtvc.has-selection .dtvc__slide.is-selected {
	opacity: 1;
	filter: none;
	flex-basis: calc(var(--dtvc-slide-w) * 1.18);
	transform: translateY(-8px);
}
.dtvc.has-selection .dtvc__slide.is-selected .dtvc__media {
	box-shadow: 0 18px 40px rgba(43, 39, 36, 0.2);
}
.dtvc.has-selection .dtvc__slide.is-selected .dtvc__mute { opacity: 1; }

/* ---- Video card ---- */
.dtvc__media {
	position: relative;
	aspect-ratio: 9 / 16;
	border-radius: var(--dtvc-radius);
	overflow: hidden;
	background: var(--dtvc-sand);
	cursor: pointer;
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.dtvc__media:hover,
.dtvc__media:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 14px 30px rgba(43, 39, 36, 0.14);
	outline: none;
}

.dtvc__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background-size: cover;
	background-position: center;
}

.dtvc__caption {
	position: absolute;
	top: 9%;
	left: 50%;
	transform: translateX(-50%);
	width: max-content;
	max-width: 86%;
	text-align: center;
	font-family: var(--dtvc-serif);
	font-size: 0.95rem;
	line-height: 1.35;
	color: var(--dtvc-burgundy);
	background: var(--dtvc-caption-bg);
	padding: 0.3em 0.75em;
	border-radius: 4px;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	pointer-events: none;
}

.dtvc__mute {
	position: absolute;
	right: 10px;
	bottom: 10px;
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: rgba(43, 39, 36, 0.55);
	color: #fff;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.25s ease;
}
.dtvc__media:hover .dtvc__mute,
.dtvc__media.is-playing .dtvc__mute { opacity: 1; }

/* ---- Product deck ---- */
.dtvc__cards {
	position: relative;
	margin-top: 10px;
	background: var(--dtvc-card-bg);
	border: 1px solid var(--dtvc-sand);
	border-radius: 10px;
	padding: 5px;
	box-shadow: 0 4px 14px rgba(43, 39, 36, 0.05);
}
.dtvc__slide.is-selected .dtvc__cards { padding: 7px; }
.dtvc__cards--cta-only { padding: 10px; }

.dtvc__deck { display: flex; flex-direction: column; gap: 6px; }


.dtvc-card {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: var(--dtvc-charcoal);
	border-radius: 8px;
	padding: 6px 8px;
	transition: opacity 0.3s ease, filter 0.3s ease, background 0.3s ease, padding 0.3s ease;
}
.dtvc-card:hover .dtvc-card__name { color: var(--dtvc-burgundy); }

/* Cards are compact by default (TileCloud baseline) — only the SELECTED slide's
   card grows to the emphasised size. */
.dtvc-card.is-featured {
	background: var(--dtvc-ivory);
	border: 1px solid var(--dtvc-sand);
	box-shadow: 0 2px 8px rgba(43, 39, 36, 0.07);
	padding: 7px 8px;
}
.dtvc__slide.is-selected .dtvc-card.is-featured { padding: 10px; }
.dtvc-card__img {
	width: 32px !important;
	height: 32px !important;
	object-fit: cover;
	border-radius: 8px;
	flex: 0 0 auto;
	transition: width 0.3s ease, height 0.3s ease;
}
.dtvc-card.is-featured .dtvc-card__img { width: 36px !important; height: 36px !important; }
.dtvc__slide.is-selected .dtvc-card.is-featured .dtvc-card__img { width: 52px !important; height: 52px !important; }

.dtvc-card__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dtvc-card__name {
	font-weight: 500;
	font-size: 0.82rem;
	line-height: 1.3;
	transition: color 0.2s ease;
	/* Long product names clamp to two lines. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.dtvc-card.is-featured .dtvc-card__name { font-weight: 600; font-size: 0.76rem; -webkit-line-clamp: 1; }
.dtvc__slide.is-selected .dtvc-card.is-featured .dtvc-card__name { font-size: 0.86rem; -webkit-line-clamp: 2; }
.dtvc-card__price { font-size: 0.82rem; color: var(--dtvc-charcoal); }
.dtvc-card.is-featured .dtvc-card__price { font-size: 0.76rem; }
.dtvc__slide.is-selected .dtvc-card.is-featured .dtvc-card__price { font-size: 0.84rem; }
/* Each price amount stays intact — ranges flow inline instead of stacking. */
.dtvc-card__price .woocommerce-Price-amount,
.dtvc-card__price .amount { white-space: nowrap; }

/* Sale pricing — same treatment as the site's DT Header plugin:
   regular price struck through + muted, sale price red + bold. */
.dtvc-card__price del,
.dtvc-card__price del .amount,
.dtvc-card__price del .woocommerce-Price-amount {
	text-decoration: line-through;
	color: rgba(43, 39, 36, 0.4);
	font-weight: 400;
	font-size: 0.76rem;
	margin-right: 4px;
}
.dtvc-card__price ins,
.dtvc-card__price ins .amount,
.dtvc-card__price ins .woocommerce-Price-amount {
	text-decoration: none;
	color: var(--dtvc-sale);
	font-weight: 700;
}

/* Unit of measure — ours plus any theme-appended .uom/.uomp span. */
.dtvc-card__uom,
.dtvc-card__price .uom,
.dtvc-card__price .uomp,
.dtvc-card__price span[class*="uom"] {
	color: var(--dtvc-taupe);
	font-size: 0.78rem;
	font-weight: 500;
}
/* UOM after a sale price goes red (general sibling skips screen-reader spans). */
.dtvc-card__price ins ~ .dtvc-card__uom,
.dtvc-card__price ins ~ .uom,
.dtvc-card__price ins ~ .uomp { color: var(--dtvc-sale); font-weight: 600; }
/* UOM inside the struck-through regular price stays muted. */
.dtvc-card__price del .uom,
.dtvc-card__price del .uomp { color: rgba(43, 39, 36, 0.35); font-weight: 400; }

.dtvc-card__go {
	display: none;
	margin-left: auto;
	font-size: 0.8rem;
	white-space: nowrap;
	color: var(--dtvc-burgundy);
}
.dtvc__slide.is-selected .dtvc-card.is-featured .dtvc-card__go { display: block; }

/* "Shop the look" CTA — burgundy pill, in the card box and in the player panel. */
.dtvc__cta {
	display: block;
	text-align: center;
	margin-top: 8px;
	padding: 8px 14px;
	border-radius: 99px;
	background: var(--dtvc-burgundy);
	color: #fff;
	text-decoration: none;
	font-size: 0.78rem;
	letter-spacing: 0.02em;
	transition: opacity 0.2s ease;
}
.dtvc__slide.is-selected .dtvc__cta { padding: 9px 16px; font-size: 0.84rem; }
.dtvc__cta:hover { opacity: 0.9; color: #fff; }
.dtvc__cards--cta-only .dtvc__cta { margin-top: 0; }

/* Bottom-sheet drag handle — hidden on desktop, shown in the mobile player. */
.dtvc-sheet-handle {
	display: none;
	width: 100%;
	border: 0;
	background: none;
	padding: 6px 0 10px;
	cursor: grab;
	justify-content: center;
	touch-action: none;
}
.dtvc-sheet-handle span {
	display: block;
	width: 42px;
	height: 4px;
	border-radius: 99px;
	background: var(--dtvc-taupe);
}

/* ---- Mini mode: product-page poster strip ---- */
.dtvc--mini { --dtvc-slide-w: 96px; --dtvc-radius: 10px; }
.dtvc--mini .dtvc__heading {
	font-size: 1rem;
	margin-bottom: 0.7rem;
}
.dtvc--mini .dtvc__track { padding: 4px 2px 6px; gap: 10px; }
/* Products live in the player — the strip shows pure posters. */
.dtvc--mini .dtvc__cards { display: none; }
.dtvc--mini .dtvc__caption { display: none; }
.dtvc--mini .dtvc__media .dtvc__mute { display: none; }
.dtvc--mini .dtvc__media { border: 1px solid var(--dtvc-sand); }
.dtvc--mini .dtvc__media:hover,
.dtvc--mini .dtvc__media:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(43, 39, 36, 0.14);
}

/* ---- Nav ---- */
.dtvc__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 28px;
	margin-top: 1.5rem;
}

.dtvc__arrow {
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--dtvc-charcoal);
	font-size: 1.1rem;
	cursor: pointer;
	transition: background 0.2s ease;
}
.dtvc__arrow:hover { background: var(--dtvc-sand); }
.dtvc__arrow:disabled { opacity: 0.3; cursor: default; background: transparent; }

.dtvc__dots { display: flex; gap: 8px; }
.dtvc__dot {
	width: 8px;
	height: 8px;
	border: 0;
	border-radius: 99px;
	background: var(--dtvc-sand);
	padding: 0;
	cursor: pointer;
	transition: all 0.3s ease;
}
.dtvc__dot.is-active { width: 28px; background: var(--dtvc-burgundy); }

/* ---- Lightbox ---- */
.dtvc-lightbox {
	/* Lives directly under <body> (JS portal) — define the brand variables here too;
	   per-instance overrides arrive as inline style copied from the carousel root. */
	--dtvc-ivory: #faf8f4;
	--dtvc-sand: #efe9e0;
	--dtvc-taupe: #b8aa99;
	--dtvc-charcoal: #2b2724;
	--dtvc-burgundy: #6e2f33;
	--dtvc-card-bg: #ffffff;
	--dtvc-caption-bg: rgba(250, 248, 244, 0.88);
	--dtvc-sale: #b91d00;
	--dtvc-serif: Georgia, "Times New Roman", serif;
	--dtvc-radius: 14px;
	position: fixed;
	inset: 0;
	/* The site's DT Header plugin pins its sticky header at z-index 100000-100001
	   (!important) — the player must sit decisively above it. */
	z-index: 2147483000;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
}
/* CRITICAL: author display:flex overrides the browser's default [hidden] rule,
   which made the lightbox (and its full-page backdrop) visible on page load. */
.dtvc-lightbox[hidden] { display: none !important; }
.dtvc-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(28, 25, 23, 0.82);
	backdrop-filter: blur(6px);
}
.dtvc-lightbox__stage {
	position: relative;
	z-index: 1;
	display: flex;
	gap: 0;
	max-height: 86vh;
	border-radius: var(--dtvc-radius);
	overflow: hidden;
	background: var(--dtvc-ivory);
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
.dtvc-lightbox__video-wrap {
	position: relative;
	height: 86vh;
	max-height: 860px;
	aspect-ratio: 9 / 16;
	background: #000;
}
.dtvc-lightbox__video-wrap video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Native fullscreen: show the whole frame at the video's own aspect ratio. */
.dtvc-lightbox__video-wrap video:fullscreen { object-fit: contain; background: #000; }
.dtvc-lightbox__video-wrap video:-webkit-full-screen { object-fit: contain; background: #000; }

.dtvc-lightbox__mute,
.dtvc-lightbox__fs {
	position: absolute;
	left: 14px;
	bottom: 14px;
	right: auto;
	opacity: 1;
	z-index: 2;
}
.dtvc-lightbox__fs { left: 56px; }
.dtvc-lightbox__panel {
	width: 290px;
	padding: 22px 20px;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.dtvc-lightbox__panel h3 {
	font-family: var(--dtvc-serif);
	font-weight: 400;
	font-size: 1.05rem;
	margin: 0 0 14px;
	color: var(--dtvc-charcoal);
}
.dtvc-lightbox__panel .dtvc-card { padding: 10px 0; border-radius: 0; }
.dtvc-lightbox__panel .dtvc-card + .dtvc-card { border-top: 1px solid var(--dtvc-sand); }
/* In the player every product is equal: same size, no dimming, no View tag. */
.dtvc-lightbox__panel .dtvc-card__img { width: 52px !important; height: 52px !important; }
.dtvc-lightbox__panel .dtvc-card__name { font-weight: 600; font-size: 0.9rem; -webkit-line-clamp: 2; }
.dtvc-lightbox__panel .dtvc-card__go { display: none; }
.dtvc-lightbox__panel .dtvc__cta { margin-top: 14px; }

.dtvc-lightbox__close {
	position: absolute;
	top: 22px;
	right: 26px;
	z-index: 2;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(250, 248, 244, 0.14);
	color: #fff;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
}
.dtvc-lightbox__step {
	position: relative;
	z-index: 1;
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: 50%;
	background: rgba(250, 248, 244, 0.14);
	color: #fff;
	font-size: 1.1rem;
	cursor: pointer;
	transition: background 0.2s ease;
}
.dtvc-lightbox__step:hover { background: rgba(250, 248, 244, 0.28); }
.dtvc-lightbox__step:disabled { opacity: 0.25; cursor: default; }

/* ---- Mobile ---- */
@media (hover: none) {
	/* No hover on touch — keep the mute control discoverable. */
	.dtvc__media .dtvc__mute { opacity: 0.9; }
}

@media (max-width: 768px) {
	/* TileCloud-style sizing: short videos, neighbours peeking in on both sides. */
	.dtvc { --dtvc-slide-w: 58vw; }
	.dtvc__arrow { display: none; }
	.dtvc__track { padding-left: 6vw; scroll-padding-left: 6vw; }
	.dtvc--mini { --dtvc-slide-w: 78px; }
	.dtvc--mini .dtvc__track { padding-left: 0; scroll-padding-left: 0; }
	/* Compact product tiles + prices on small screens; selected slide slightly larger. */
	.dtvc-card.is-featured .dtvc-card__img { width: 30px !important; height: 30px !important; }
	.dtvc-card.is-featured .dtvc-card__name { font-size: 0.72rem; }
	.dtvc-card.is-featured .dtvc-card__price { font-size: 0.72rem; }
	.dtvc__slide.is-selected .dtvc-card.is-featured .dtvc-card__img { width: 40px !important; height: 40px !important; }
	.dtvc__slide.is-selected .dtvc-card.is-featured .dtvc-card__name { font-size: 0.78rem; }
	.dtvc__slide.is-selected .dtvc-card.is-featured .dtvc-card__price { font-size: 0.76rem; }
	.dtvc-card__go { display: none !important; }
	.dtvc__cta { padding: 7px 12px; font-size: 0.74rem; }
	.dtvc__slide.is-selected .dtvc__cta { padding: 8px 13px; font-size: 0.76rem; }
	.dtvc-lightbox__panel .dtvc-card__img { width: 40px !important; height: 40px !important; }
	.dtvc-lightbox__panel .dtvc-card__name { font-size: 0.8rem; }
	.dtvc-lightbox__panel .dtvc-card__price { font-size: 0.78rem; }
	.dtvc-card__uom,
	.dtvc-card__price .uom,
	.dtvc-card__price .uomp { font-size: 0.7rem; }

	/* Gentler expansion — the desktop 1.18 overflows small screens. */
	.dtvc.has-selection .dtvc__slide.is-selected {
		flex-basis: calc(var(--dtvc-slide-w) * 1.08);
		transform: translateY(-4px);
	}

	/* Fullscreen takeover player with a draggable bottom sheet for products. */
	.dtvc-lightbox { gap: 0; }
	.dtvc-lightbox__stage {
		flex-direction: column;
		width: 100vw;
		height: 100dvh;
		max-height: none;
		border-radius: 0;
	}
	/* Video gets its own area above the sheet — letterboxed so the FULL frame
	   is always visible (cover was cropping it), resizing as the sheet opens/closes. */
	.dtvc-lightbox__video-wrap {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: calc(100dvh - 160px); /* sheet at peek */
		max-height: none;
		aspect-ratio: auto;
		background: #000;
		transition: height 0.3s ease;
	}
	.dtvc-lightbox__stage.is-sheet-open .dtvc-lightbox__video-wrap {
		height: 47dvh; /* sheet open */
	}
	.dtvc-lightbox__video-wrap video { object-fit: contain; }
	.dtvc-lightbox__close {
		top: calc(14px + env(safe-area-inset-top));
		right: 14px;
		width: 48px;
		height: 48px;
		background: rgba(28, 25, 23, 0.65);
		font-size: 1.8rem;
	}
	.dtvc-lightbox__step {
		position: absolute;
		top: 42%;
		z-index: 3;
		background: rgba(28, 25, 23, 0.45);
	}
	.dtvc-lightbox__step--prev { left: 12px; }
	.dtvc-lightbox__step--next { right: 12px; }

	.dtvc-lightbox__mute,
	.dtvc-lightbox__fs {
		top: calc(14px + env(safe-area-inset-top));
		left: 14px;
		bottom: auto;
		width: 40px;
		height: 40px;
		background: rgba(28, 25, 23, 0.55);
	}
	.dtvc-lightbox__fs { left: 62px; }

	.dtvc-lightbox__panel {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 4;
		width: auto;
		max-height: 52dvh; /* sheet open by default — video keeps the top half */
		background: var(--dtvc-ivory);
		border-radius: 18px 18px 0 0;
		box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.25);
		padding-top: 4px;
		padding-bottom: calc(16px + env(safe-area-inset-bottom));
		/* Peek state: handle + heading + first product visible. */
		transform: translateY(calc(100% - 148px));
		transition: transform 0.3s ease;
	}
	.dtvc-lightbox__panel.is-open { transform: translateY(0); }

	.dtvc-sheet-handle { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
	.dtvc__track { scroll-behavior: auto; }
	.dtvc__media, .dtvc__dot, .dtvc__slide,
	.dtvc-card, .dtvc-card__img, .dtvc-lightbox__panel, .dtvc-lightbox__video-wrap { transition: none; }
}

/* =====================================================================
   Direct product videos (1.7.0): uniform tile strip + bare lightbox
   ===================================================================== */
.dtvc-direct {
	margin: 10px 0;
	/* Column-driven sizing (1.9.0): the strip spans the FULL summary width
	   (flush with the Description accordion) and exactly 4 tiles fill a row —
	   tile width is fluid, height follows from the 3:4 aspect. Videos beyond
	   four scroll as a carousel (arrows overlay the edges, dots underneath). */
	--dtvc-direct-cols: 4;
	--dtvc-direct-gap: 8px;
	--dtvc-gold: #d4af37;
	/* Dots live outside the carousel root — brand fallbacks here. */
	--dtvc-sand: #efe9e0;
	--dtvc-burgundy: #6e2f33;
}
.dtvc-direct__heading {
	/* Responsive: scales with viewport between hard min/max. */
	font-size: clamp(0.92rem, 0.8rem + 0.6vw, 1.08rem);
	margin: 0 0 8px;
}
.dtvc-direct__viewport {
	/* Arrows OVERLAY the strip edges (1.9.0) so the track runs flush with the
	   Description accordion's full width — no side gutters. */
	position: relative;
}
.dtvc-direct__track {
	display: flex;
	gap: var(--dtvc-direct-gap);
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x proximity; /* proximity, not mandatory — see 1.1.1 lesson */
	scrollbar-width: none;
	padding: 4px 3px;
	min-width: 0;
}
.dtvc-direct__track::-webkit-scrollbar { display: none; }

/* Every tile identical: a fluid column — exactly --dtvc-direct-cols fit per
   row, height follows from the 3:4 aspect. First frame as the thumbnail. */
.dtvc-direct__tile {
	position: relative;
	flex: 0 0 calc((100% - (var(--dtvc-direct-cols) - 1) * var(--dtvc-direct-gap)) / var(--dtvc-direct-cols));
	aspect-ratio: 3 / 4;
	scroll-snap-align: start;
	padding: 0;
	border: 0;
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
	background: #111;
	transition: box-shadow .18s ease, transform .18s ease, opacity .2s ease, filter .2s ease;
}
.dtvc-direct__tile video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	pointer-events: none;
}
.dtvc-direct__tile:hover,
.dtvc-direct__tile:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}
.dtvc-direct__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: rgba(0, 0, 0, .12);
}
.dtvc-direct__play svg {
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .5));
}

/* Variation selected (1.8.0): matching reels jump to the FRONT of the strip
   with a gold ring + dot; every other reel sits under a grey overlay.
   Original order + full colour restored when the selection is cleared. */
.dtvc-direct__tile.is-variation-match {
	box-shadow: 0 0 0 2.5px var(--dtvc-gold, #d4af37), 0 6px 16px rgba(0, 0, 0, .16);
}
.dtvc-direct__tile.is-variation-match::after {
	content: '';
	position: absolute;
	top: 6px;
	right: 6px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--dtvc-gold, #d4af37);
	box-shadow: 0 0 0 2px rgba(255, 255, 255, .85);
}
.dtvc-direct.has-variation-match .dtvc-direct__tile:not(.is-variation-match) {
	filter: grayscale(.65);
	opacity: .45;
}
.dtvc-direct.has-variation-match .dtvc-direct__tile:not(.is-variation-match):hover,
.dtvc-direct.has-variation-match .dtvc-direct__tile:not(.is-variation-match):focus-visible {
	/* Dimmed reels stay clickable — lift the overlay on hover/focus. */
	filter: none;
	opacity: 1;
}

/* Strip arrows: overlay the edges, only when the track overflows. */
.dtvc-direct__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 32px;
	height: 32px;
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 50%;
	background: rgba(255, 255, 255, .94);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .16);
	color: var(--dtvc-charcoal, #2b2b2b);
	cursor: pointer;
	line-height: 1;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.dtvc-direct__arrow--prev { left: 6px; }
.dtvc-direct__arrow--next { right: 6px; }
.dtvc-direct__arrow:disabled { opacity: .35; cursor: default; }

/* Scroll cue (1.8.1): burgundy pill dots under the strip — mirrors the main
   carousel's pagination so the strip clearly reads as scrollable. */
.dtvc-direct__dots {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 8px;
}
.dtvc-direct__dots[hidden] { display: none; }
.dtvc-direct__dot {
	width: 7px;
	height: 5px;
	border: 0;
	border-radius: 99px;
	background: var(--dtvc-sand, #efe9e0);
	padding: 0;
	cursor: pointer;
	transition: all 0.3s ease;
}
.dtvc-direct__dot.is-active { width: 20px; background: var(--dtvc-burgundy, #6e2f33); }

/* ---- Bare lightbox: video only, native aspect ratio ---- */
.dtvc-lightbox--bare .dtvc-lightbox__stage {
	display: flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	max-width: 92vw;
	max-height: 88vh;
	background: transparent;
	padding: 0;
}
.dtvc-lightbox--bare .dtvc-lightbox__video-wrap--bare {
	/* Reset every geometry rule the main player applies (incl. its mobile
	   fullscreen-takeover absolute positioning) — the bare player is sized
	   purely by its video. */
	position: relative;
	top: auto;
	left: auto;
	right: auto;
	width: auto;
	height: auto;
	max-height: none;
	aspect-ratio: auto;
	transition: none;
	display: inline-block;
	border-radius: 14px;
	overflow: hidden;
	background: #000;
	line-height: 0;
}
/* width/height auto + max constraints = browser scales to the file's
   intrinsic dimensions: a portrait reel opens tall, a landscape clip wide. */
.dtvc-lightbox--bare .dtvc-lightbox__video-wrap--bare video {
	display: block;
	width: auto;
	height: auto;
	max-width: 92vw;
	max-height: 88vh;
	object-fit: contain;
}
.dtvc-lightbox--bare .dtvc-lightbox__step[hidden] { display: none; }

@media (max-width: 768px) {
	.dtvc-direct { --dtvc-direct-cols: 4; } /* same 4-up rhythm on mobile */
	.dtvc-direct__arrow { display: none; } /* finger-scroll on touch */
	.dtvc-lightbox--bare .dtvc-lightbox__stage {
		flex-direction: row;
		width: auto;
		height: auto;
		max-width: 96vw;
		max-height: 84dvh;
		border-radius: 14px;
	}
	.dtvc-lightbox--bare .dtvc-lightbox__video-wrap--bare video {
		max-width: 96vw;
		max-height: 82dvh;
	}
	.dtvc-lightbox--bare .dtvc-lightbox__step {
		top: 50%;
		transform: translateY(-50%);
	}
}