/**
 * VRU Feature Showcase -- front-end styles.
 *
 * Loaded ONLY on showcase-enabled single-product pages (Spec 9). Device-agnostic
 * markup, differentiated client-side via media queries so one cached page serves
 * all devices (Spec 10). Colours/fonts come from the theme tokens (tokens.css)
 * with safe fallbacks, so the showroom matches the site and never invents colour.
 *
 * Phase 1 scope: the showroom layout (media stage + summary), and the canonical
 * description section (feature blocks, video facade, transcript). The hotspot
 * hero, carousel and sticky cart styling arrive with their JS in Phase 2.
 */

/* --- Page consistency ----------------------------------------------------
   The showcase renders through a classic template_include template, so it
   misses the theme's BLOCK single-product wrapper (.vru-woo-wrap) that
   constrains the content width and trims the top gap. Reapply both, scoped to
   showcase pages (the vru-fs-showcase body class), so the page matches a normal
   product page: a centred 1600px content column and the breadcrumb's own 21px
   controlling the gap below the nav (instead of the 4em section padding). */
body.vru-fs-showcase .vru-container { padding-top: 10px; }
body.vru-fs-showcase .vru-content-area {
	max-width: 1600px;
	margin-inline: auto;
}

/* --- Showroom: media stage + summary ------------------------------------ */
.vru-fs-showroom {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--vru-gutter, 20px);
	align-items: start;
	margin-bottom: 2em;
}

@media (min-width: 783px) {
	.vru-fs-showroom {
		/* Media left, summary right. The hero gets the larger share (it is the
		   point of the page); the summary is sized for title/price/cart. */
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
		gap: 2.5em;
	}
}

.vru-fs-media {
	position: relative;
	line-height: 0;
	text-align: center; /* centre the shrink-wrapped desktop hero (capped portrait) */
}

.vru-fs-hero-img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 600px; /* hard cap so a tall (portrait) hero never runs off screen */
	border-radius: var(--vru-btn-radius, 3px);
	background: var(--vru-color-surface, #f2f5f7);
}

/* The theme floats Woo's summary at width:51% for its non-grid product layout;
   ours is a grid item, so neutralise that (the !important beats the theme's more
   specific rule) and let the summary fill its grid column. */
body.vru-fs-showcase .vru-fs-summary {
	width: auto !important;
	float: none;
}

/* --- Product long description (post_content), shown before the videos ---- */
.vru-fs-longdesc {
	max-width: var(--vru-content-width, 1200px);
	margin: 1.5em auto 0;
	color: var(--vru-color-text, #4b4f58);
	font-family: var(--vru-font-body, 'Inter', sans-serif);
	line-height: 1.7;
}
.vru-fs-longdesc > :first-child { margin-top: 0; }
.vru-fs-longdesc > :last-child { margin-bottom: 0; }

/* --- Canonical description section --------------------------------------- */
.vru-fs-description {
	max-width: var(--vru-content-width, 1200px);
	margin: 2.5em auto 0;
}

.vru-fs-feature {
	padding: 1.75em 0;
	border-top: 1px solid var(--vru-color-border, #e2e8ed);
}
.vru-fs-feature:first-child {
	border-top: none;
}

.vru-fs-feature__title {
	font-family: var(--vru-font-heading, 'Poppins', sans-serif);
	font-weight: var(--vru-fw-heading, 500);
	color: var(--vru-color-heading, #3a3a3a);
	margin: 0 0 .6em;
}

.vru-fs-feature__body {
	color: var(--vru-color-text, #4b4f58);
	font-family: var(--vru-font-body, 'Inter', sans-serif);
}
.vru-fs-feature__body :first-child { margin-top: 0; }
.vru-fs-feature__body :last-child  { margin-bottom: 0; }
.vru-fs-feature__body a {
	color: var(--vru-color-link, #0170b9);
}

/* On wide screens, sit the feature media beside its copy for a denser read. */
@media (min-width: 783px) {
	.vru-fs-feature {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas:
			"title title"
			"media body"
			"media transcript";
		column-gap: 2em;
		align-items: start;
	}
	.vru-fs-feature__title      { grid-area: title; }
	.vru-fs-feature__media      { grid-area: media; }
	.vru-fs-feature__body       { grid-area: body; }
	.vru-fs-feature__transcript { grid-area: transcript; }
}

/* --- Video facade (poster + accessible play button) --------------------- */
.vru-fs-feature__media {
	margin: 0 0 1em;
	line-height: 0;
}

.vru-fs-play {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	cursor: pointer;
	background: var(--vru-color-surface, #f2f5f7);
	border-radius: var(--vru-btn-radius, 3px);
	overflow: hidden;
}
.vru-fs-play:focus-visible {
	outline: 3px solid var(--vru-color-primary, #0170b9);
	outline-offset: 2px;
}

.vru-fs-feature__poster {
	display: block;
	width: 100%;
	height: auto;
}

/* Centred play affordance: a primary-colour disc with a white triangle. */
.vru-fs-play__icon {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 64px;
	height: 64px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--vru-color-primary, #0170b9);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
	transition: transform .15s ease, background .15s ease;
}
.vru-fs-play__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 12px 0 12px 20px;
	border-color: transparent transparent transparent #fff;
}
.vru-fs-play:hover .vru-fs-play__icon,
.vru-fs-play:focus-visible .vru-fs-play__icon {
	background: var(--vru-color-link-hover, #fa462e);
	transform: translate(-50%, -50%) scale(1.06);
}

/* --- Transcript disclosure ---------------------------------------------- */
.vru-fs-feature__transcript {
	margin-top: 1em;
	font-size: .95em;
}
.vru-fs-feature__transcript > summary {
	cursor: pointer;
	color: var(--vru-color-primary, #0170b9);
	font-weight: 600;
}
.vru-fs-transcript__text {
	margin-top: .5em;
	padding: .75em 1em;
	background: var(--vru-color-surface, #f2f5f7);
	border-radius: var(--vru-btn-radius, 3px);
	color: var(--vru-color-text, #4b4f58);
	line-height: 1.6;
}

/* =========================================================================
   Media stage: desktop hotspot hero + mobile gallery
   ========================================================================= */

/* Breakpoint switch (mobile-first): gallery on mobile, hotspot hero on
   desktop. Both are in the DOM; only one shows per width (cache-safe). */
.vru-fs-hero { display: none; }
.vru-fs-gallery { display: block; }
@media (min-width: 783px) {
	/* inline-block so the figure shrink-wraps the (height-capped) hero, keeping
	   the percentage-positioned bubbles aligned to the image. */
	.vru-fs-hero { display: inline-block; max-width: 100%; vertical-align: top; }
	.vru-fs-gallery { display: none; }
}

/* --- Desktop hotspot hero --- */
.vru-fs-hero {
	position: relative; /* bubbles are positioned against this box */
	margin: 0;
	line-height: 0;
}
.vru-fs-bubble {
	position: absolute;
	transform: translate(-50%, -50%); /* center the bubble on its % point */
	min-width: 36px;
	min-height: 36px;
	max-width: 150px; /* longer labels wrap instead of stretching forever */
	margin: 0;
	padding: 5px 11px; /* a single number stays a circle; longer labels expand */
	border: 0;
	border-radius: 999px; /* circle when ~square, pill/stadium when wider */
	background: var(--vru-color-primary, #0170b9);
	color: #fff;
	font: 600 13px/1.15 var(--vru-font-heading, 'Poppins', sans-serif);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	white-space: normal; /* multi-word labels wrap and centre inside the bubble */
	cursor: pointer;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 2px 6px rgba(0, 0, 0, .4);
	z-index: 2;
	animation: vru-fs-pulse 2.4s ease-out infinite;
}
.vru-fs-bubble:hover,
.vru-fs-bubble:focus-visible {
	background: var(--vru-color-link-hover, #fa462e);
	animation: none;
}
.vru-fs-bubble:focus-visible {
	outline: 3px solid var(--vru-color-primary, #0170b9);
	outline-offset: 3px;
}
@keyframes vru-fs-pulse {
	0%   { box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 0 0 0 rgba(1,112,185,.55), 0 2px 6px rgba(0,0,0,.4); }
	70%  { box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 0 0 15px rgba(1,112,185,0), 0 2px 6px rgba(0,0,0,.4); }
	100% { box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 0 0 0 rgba(1,112,185,0), 0 2px 6px rgba(0,0,0,.4); }
}

/* One-time discoverability hint on the hero (Spec 8.4). */
.vru-fs-hero-hint {
	position: absolute;
	left: 50%;
	bottom: 12px;
	transform: translateX(-50%);
	z-index: 4;
	padding: 7px 14px;
	border-radius: 999px;
	background: rgba(13, 17, 23, .82);
	color: #fff;
	font: 500 13px/1 var(--vru-font-heading, 'Poppins', sans-serif);
	white-space: nowrap;
	pointer-events: none; /* never block a click on the hero or its markers */
	animation: vru-fs-hint-in .4s ease-out both;
}
.vru-fs-hero-hint.is-hidden {
	opacity: 0;
	transition: opacity .35s ease;
}
@keyframes vru-fs-hint-in {
	from { opacity: 0; transform: translate(-50%, 8px); }
	to   { opacity: 1; transform: translate(-50%, 0); }
}

/* --- Mobile gallery: a main stage (hero) + a strip of video thumbnails,
       like the product gallery on normal products. Tapping a thumbnail plays
       that clip in the stage (showcase.js); it never scrolls the page. --- */
.vru-fs-gallery__stage {
	position: relative;
	line-height: 0;
	border-radius: var(--vru-btn-radius, 3px);
	overflow: hidden;
	background: var(--vru-color-surface, #f2f5f7);
}
.vru-fs-gallery__hero {
	display: block;
	width: 100%;
	height: auto;
	max-height: 60vh; /* cap the mobile stage so a tall hero stays on screen */
	object-fit: contain;
}
.vru-fs-gallery__stage .vru-fs-player { border-radius: 0; } /* the stage clips it */

.vru-fs-gallery__thumbs {
	display: flex;
	gap: 8px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
	overflow-x: auto; /* horizontal scroll when there are many, like the gallery */
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.vru-fs-gallery__thumbs::-webkit-scrollbar { display: none; }
.vru-fs-gallery__thumbs li { margin: 0; }
.vru-fs-gthumb {
	position: relative;
	flex: 0 0 auto;
	width: 72px;
	height: 72px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: var(--vru-btn-radius, 3px);
	overflow: hidden;
	background: var(--vru-color-surface, #f2f5f7);
	cursor: pointer;
}
.vru-fs-gthumb.is-active { border-color: var(--vru-color-primary, #0170b9); }
.vru-fs-gthumb:focus-visible {
	outline: 2px solid var(--vru-color-primary, #0170b9);
	outline-offset: 2px;
}
.vru-fs-gthumb__img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Play badge marks the video thumbnails apart from the product-image thumbnail. */
.vru-fs-vthumb__badge {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, .18);
}
.vru-fs-vthumb__badge::after {
	content: "";
	border-style: solid;
	border-width: 6px 0 6px 10px;
	border-color: transparent transparent transparent #fff;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6));
}

/* Inline / popout / gallery player: a 16:9 box the <video>/<iframe> fills. Built
   by showcase.js only on activation, so no video loads before the user clicks. */
.vru-fs-player {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: var(--vru-btn-radius, 3px);
	overflow: hidden;
}
.vru-fs-player video,
.vru-fs-player iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}
/* --- Sticky add-to-cart (Spec 8.6) --- */
.vru-fs-sticky {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9000;
	background: #fff;
	border-top: 1px solid var(--vru-color-border, #e2e8ed);
	box-shadow: 0 -2px 12px rgba(0, 0, 0, .12);
}
.vru-fs-sticky[hidden] { display: none; }
.vru-fs-sticky__inner {
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: var(--vru-content-width, 1200px);
	margin: 0 auto;
	padding: 8px 16px;
}
.vru-fs-sticky__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	flex: 1 1 auto;
}
.vru-fs-sticky__meta img {
	width: 44px;
	height: 44px;
	object-fit: cover;
	border-radius: var(--vru-btn-radius, 3px);
	flex: 0 0 auto;
}
.vru-fs-sticky__title {
	font-weight: 600;
	color: var(--vru-color-heading, #3a3a3a);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.vru-fs-sticky__price { color: var(--vru-color-text, #4b4f58); white-space: nowrap; }
.vru-fs-sticky__btn { flex: 0 0 auto; white-space: nowrap; margin: 0; }
.vru-fs-sticky__btn:focus-visible { outline: 3px solid var(--vru-color-primary, #0170b9); outline-offset: 2px; }

/* Very small screens: drop the title so the price + button always fit. */
@media (max-width: 480px) {
	.vru-fs-sticky__title { display: none; }
}

/* Desktop: hidden unless the setting opts in (mobile is always on). */
@media (min-width: 783px) {
	.vru-fs-sticky:not(.vru-fs-sticky--desktop) { display: none; }
}

/* --- Desktop hero popout: the player springs out of the clicked marker over
       the dimmed hero (owner default; replaces scroll-to-block on desktop). --- */
.vru-fs-hero-scrim {
	position: absolute;
	inset: 0;
	z-index: 3;
	background: rgba(18, 26, 33, .34); /* dims the hero only, not the whole page */
	opacity: 0;
	transition: opacity .18s ease;
	cursor: pointer;
}
.vru-fs-hero--open .vru-fs-hero-scrim { opacity: 1; }
.vru-fs-popout {
	position: absolute;
	z-index: 6;
	background: #0d1117;
	border-radius: var(--vru-btn-radius, 3px);
	overflow: hidden;
	line-height: normal;
	opacity: 0;
	transform: scale(.6);
	transition: opacity .15s ease, transform .18s cubic-bezier(.2, .9, .3, 1.25);
}
.vru-fs-popout.is-in { opacity: 1; transform: scale(1); }
.vru-fs-popout__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 8px 8px 12px;
	background: #161b22;
	color: #fff;
	font: 500 13px/1.2 var(--vru-font-heading, 'Poppins', sans-serif);
}
.vru-fs-popout__close {
	border: 0;
	background: transparent;
	color: #cfd6dd;
	cursor: pointer;
	font-size: 20px;
	line-height: 1;
	padding: 2px 4px;
}
.vru-fs-popout__close:hover,
.vru-fs-popout__close:focus-visible { color: #fff; }
.vru-fs-popout__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.vru-fs-popout-arrow {
	position: absolute;
	z-index: 5; /* under the popout (6), over the scrim (3): peeks out toward the marker */
	width: 12px;
	height: 12px;
	background: #161b22;
	transform: rotate(45deg);
}

/* --- Reduced motion: disable every animation the plugin introduces (Spec 13). --- */
@media (prefers-reduced-motion: reduce) {
	.vru-fs-bubble { animation: none; }
	.vru-fs-hero-hint { animation: none; }
	.vru-fs-popout { transition: opacity .15s ease; }
	.vru-fs-popout,
	.vru-fs-popout.is-in { transform: none; }
}