/* =======================================================================
   Dedicated Product page template
   All rules scoped under #dedicated-product / .dp-page to prevent cascade
   into other pages of the theme.
   ======================================================================= */

#dedicated-product.dp-page {
	/* ------------ tokens ------------ */
	--dp-bg:          #000;
	--dp-surface:     #121212;
	--dp-surface-2:   #1d1d1f;
	--dp-text:        #ffffff;
	--dp-text-soft:   #c4c7c8;
	--dp-muted:       #86868b;
	--dp-accent:      #D90500;            /* theme red, matches shop-v2 */
	--dp-accent-2:    #ff3a1f;
	--dp-border:      rgba(255,255,255,0.10);
	--dp-glass:       rgba(255,255,255,0.08);
	--dp-glass-hi:    rgba(255,255,255,0.15);

	--dp-font: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
	--dp-unit: 8px;
	--dp-gutter: 24px;
	--dp-container-max: 1200px;
	--dp-showcase-max: 1320px;          /* wider Apple-style showcase track */
	--dp-section-gap: clamp(80px, 12vw, 160px);
	--dp-margin: clamp(20px, 5vw, 64px);

	/* ------------ baseline ------------ */
	display: block;
	background: var(--dp-bg);
	color: var(--dp-text);
	font-family: var(--dp-font);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
	/* Trap all page content in one stacking context at the root's base level.
	   The masthead sits at z-index 1300 (fixed nav 2000), so nothing inside
	   this page — whatever its internal z-index — can ever paint over the nav. */
	position: relative;
	z-index: 0;
	isolation: isolate;
}

#dedicated-product.dp-page * { box-sizing: border-box; }
#dedicated-product.dp-page img,
#dedicated-product.dp-page video { display: block; max-width: 100%; }

/* Apple-style scroll-triggered reveal.
   Honors prefers-reduced-motion: targets are visible immediately. */
@media (prefers-reduced-motion: no-preference) {
	/* No permanent will-change here: forcing a GPU layer on every reveal
	   target for the page's lifetime cost compositing memory and added scroll
	   latency. The opacity/transform transition runs fine without it. */
	#dedicated-product.dp-page .dp-reveal {
		opacity: 0;
		transform: translate3d(0, 48px, 0);
		transition: opacity .9s cubic-bezier(.2, .65, .2, 1),
		            transform .9s cubic-bezier(.2, .65, .2, 1);
	}
	#dedicated-product.dp-page .dp-reveal.is-in-view {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
	#dedicated-product.dp-page .dp-reveal.is-out-above {
		opacity: 0;
		transform: translate3d(0, -32px, 0);
	}
}

/* Override foundation's global h1-h6 color/font/weight so headings inherit
   the dark-theme white and Montserrat we want inside this template. */
#dedicated-product.dp-page h1,
#dedicated-product.dp-page h2,
#dedicated-product.dp-page h3,
#dedicated-product.dp-page h4,
#dedicated-product.dp-page h5,
#dedicated-product.dp-page h6 {
	color: var(--dp-text);
	font-family: var(--dp-font);
	margin: 0;
	line-height: 1.2;
}
/* Foundation sets links red — keep our CTAs/site links untouched but
   neutralize the default link color for our scoped content. */
#dedicated-product.dp-page a { color: inherit; }
#dedicated-product.dp-page a.dp-btn--primary { color: #000; }
#dedicated-product.dp-page .dp-faq__answer a { color: var(--dp-accent); }

#dedicated-product.dp-page .dp-container {
	width: 100%;
	max-width: var(--dp-container-max);
	margin: 0 auto;
	padding: 0 var(--dp-margin);
}
#dedicated-product.dp-page .dp-container--narrow { max-width: 880px; }
#dedicated-product.dp-page .dp-container--showcase { max-width: var(--dp-showcase-max); }

/* ------------------------------------------------------------------ *
 * Shared button styles
 * ------------------------------------------------------------------ */
#dedicated-product.dp-page .dp-btn {
	display: inline-block;
	padding: 14px 32px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 17px;
	line-height: 1;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease, transform .2s ease;
	white-space: nowrap;
}
#dedicated-product.dp-page .dp-btn--primary {
	background: #fff;
	color: #000;
}
#dedicated-product.dp-page .dp-btn--primary:hover { background: #e5e5e5; }
#dedicated-product.dp-page .dp-btn--ghost {
	background: var(--dp-glass);
	color: #fff;
	border: 1px solid var(--dp-border);
	backdrop-filter: blur(8px);
}
#dedicated-product.dp-page .dp-btn--ghost:hover { background: var(--dp-glass-hi); }

/* ------------------------------------------------------------------ *
 * 1. Hero
 * ------------------------------------------------------------------ */
#dedicated-product .dp-hero {
	position: relative;
	/* The masthead sits in normal flow above the hero, so a full 100vh pushes
	   the bottom-anchored CTAs/subtitle a nav-height below the fold. Subtract
	   the live nav height (set by nav.php) so the hero bottom — and the
	   foreground content pinned to it — lands inside the first viewport. */
	min-height: calc(100vh - var(--renewal-main-nav-height, 5.3125rem));
	background: #000;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: clamp(48px, 8vw, 96px);
	overflow: hidden;
}
#dedicated-product .dp-hero__type-bg {
	position: absolute;
	top: clamp(60px, 8vw, 110px);
	left: 0; right: 0;
	z-index: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	pointer-events: none;
	user-select: none;
	opacity: 1;
	transition: opacity .45s ease;
}
/* Hold the title text hidden until the hero media has finished loading,
   so the layered design doesn't flash giant red text alone. */
#dedicated-product .dp-hero--awaits-media .dp-hero__type-bg { opacity: 0; }
#dedicated-product .dp-hero--media-ready .dp-hero__type-bg  { opacity: 1; }
#dedicated-product .dp-hero__eyebrow {
	margin: 0 0 -2vw;
	font-size: clamp(22px, 3vw, 36px);
	font-weight: 600;
	letter-spacing: -0.02em;
	color: #fff;
}
#dedicated-product .dp-hero__title {
	margin: 0;
	font-size: clamp(96px, 25vw, 360px);
	line-height: 0.8;
	font-weight: 900;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	background: linear-gradient(180deg, var(--dp-accent-2) 0%, var(--dp-accent) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	color: transparent;
	/* Promote to its own layer so the scroll parallax is a GPU composite
	   rather than a per-frame repaint of this large gradient-clipped text. */
	will-change: transform;
}
#dedicated-product .dp-hero__media {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1920px;
	margin-top: clamp(-12vw, -10vw, -4vw);
	display: flex;
	justify-content: center;
}
#dedicated-product .dp-hero__media-el {
	width: 100%;
	height: auto;
	object-fit: contain;
}
/* Editor-driven hero scale: the wrapper sets --dp-hero-scale (50–150%);
   the flex parent keeps the scaled media centered. */
#dedicated-product .dp-hero__media--scaled .dp-hero__media-el {
	width: var(--dp-hero-scale, 100%);
	max-width: 100%;
}
#dedicated-product .dp-hero__foreground {
	position: absolute;
	/* Lift the CTAs/subtitle into the middle of the first viewport on load
	   instead of hugging the bottom. Tune this single value to raise/lower. */
	bottom: clamp(200px, 38vh, 480px);
	left: 0; right: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	padding: 0 var(--dp-margin);
	text-align: center;
}
#dedicated-product .dp-hero__ctas {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	justify-content: center;
}
#dedicated-product .dp-hero__subtitle {
	margin: 0;
	color: var(--dp-text-soft);
	font-size: clamp(14px, 1.4vw, 20px);
	font-weight: 500;
	letter-spacing: 0.02em;
}
#dedicated-product .dp-hero__fade {
	position: absolute;
	bottom: 0; left: 0; right: 0;
	height: 30vh;
	/* Multi-stop eased ramp to #000 (the hero bg and the colour the next
	   section's top fade starts from) so the seam is seamless and free of the
	   banding a 2-stop linear-alpha gradient produces. */
	background: linear-gradient(
		to top,
		#000 0%,
		rgba(0, 0, 0, 0.92) 14%,
		rgba(0, 0, 0, 0.74) 34%,
		rgba(0, 0, 0, 0.45) 58%,
		rgba(0, 0, 0, 0.18) 80%,
		transparent 100%
	);
	z-index: 1;
	pointer-events: none;
}

/* Optional standard page title, styled to match the /distributors/ hero title. */
#dedicated-product .dp-hero__page-title-wrap {
	position: absolute;
	top: clamp(80px, 12vw, 160px);
	left: 0; right: 0;
	z-index: 3;
	display: flex;
	justify-content: center;
	padding: 0 var(--dp-margin);
	pointer-events: none;
}
#dedicated-product .dp-hero__page-title {
	margin: 0;
	font-family: var(--dp-font);
	font-weight: 700;
	font-size: clamp(2rem, 5vw, 3rem);
	line-height: 1.1;
	color: #fff;
	text-align: center;
	text-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
}

/* ------------------------------------------------------------------ *
 * 2. Features
 * ------------------------------------------------------------------ */
#dedicated-product .dp-features {
	position: relative;
	background: var(--dp-surface);
	padding: var(--dp-section-gap) 0;
}
#dedicated-product .dp-features__fade {
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 120px;
	background: linear-gradient(to bottom, #000, var(--dp-surface));
	pointer-events: none;
}
#dedicated-product .dp-features__header {
	position: relative;
	max-width: 760px;
	margin: 0 auto clamp(48px, 8vw, 96px);
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
#dedicated-product .dp-features__title {
	margin: 0;
	font-size: clamp(28px, 4vw, 48px);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
}
#dedicated-product .dp-features__intro {
	margin: 0;
	font-size: clamp(16px, 1.6vw, 20px);
	line-height: 1.5;
	color: var(--dp-text-soft);
}
#dedicated-product .dp-features__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--dp-gutter);
	position: relative;
	/* Dedicated breathing room so the Section Heading isn't flush with the cards. */
	margin-top: clamp(24px, 4vw, 56px);
}
/* Premium "pop-out" card: the asset breaks out above the card's top edge.
   (a) wrapper is overflow-visible & background-free, (b) the glass bg + radius
   live on the inner body, (c) the image is layered on top and tucked over the
   body via a negative margin, (d) the body reserves top padding for the title. */
#dedicated-product .dp-feature {
	position: relative;
	display: flex;
	flex-direction: column;
	background: none;
	border: 0;
	overflow: visible;
	transition: transform .4s ease;
}
#dedicated-product .dp-feature:hover { transform: translateY(-4px); }
#dedicated-product .dp-feature__media {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 0;
}
#dedicated-product .dp-feature__media > * {
	width: auto;
	max-width: 92%;
	/* Explicit cap (a % max-height is inert against an auto-height parent), so
	   the asset height is known and the card can overlap exactly its lower half.
	   --dp-feature-scale (editor-driven, default 1) multiplies the cap. */
	max-height: calc(clamp(240px, 26vw, 360px) * var(--dp-feature-scale, 1));
	object-fit: contain;
	border-radius: 18px;
	transition: transform .6s ease;
}
#dedicated-product .dp-feature:hover .dp-feature__media > * { transform: scale(1.04); }
#dedicated-product .dp-feature__body {
	position: relative;
	z-index: 1;
	/* Tuck the card up over the asset's bottom half: lower half sits inside the
	   card, upper half spills above its top edge. Pairs with the media cap so
	   the overlap is ~50% of the asset height at every breakpoint. */
	margin-top: clamp(-180px, -13vw, -120px);
	padding: clamp(140px, 15vw, 210px) 32px 32px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%);
	backdrop-filter: blur(40px);
	border: 1px solid var(--dp-border);
	border-radius: 28px;
}
/* Imageless cards (body is the only child): drop the overlap + extra top pad. */
#dedicated-product .dp-feature__body:only-child {
	margin-top: 0;
	padding-top: 32px;
}
#dedicated-product .dp-feature__title {
	margin: 0;
	font-size: clamp(17px, 1.5vw, 21px);
	font-weight: 600;
	line-height: 1.3;
}
#dedicated-product .dp-feature__text {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--dp-text-soft);
}

/* ------------------------------------------------------------------ *
 * 3. Showcase
 * ------------------------------------------------------------------ */
/* Flat showcase canvas (#121212). The former grey→black seam gradient was
   purged: the section now sits flush with the equally-flat features/bento
   surfaces above and below it. */
#dedicated-product .dp-showcase {
	position: relative;
	background: var(--dp-surface);
	/* Outer section: minimal vertical rhythm so the panel fits more within the
	   browser frame (the inner panel carries the generous padding instead). */
	padding: clamp(24px, 4vw, 56px) 0;
}
#dedicated-product .dp-showcase__panel {
	position: relative;
	background: #000;
	border: 1px solid rgba(255,255,255,0.05);
	border-radius: 40px;
	/* Inner panel: roomier breathing space on both axes. */
	padding: clamp(56px, 8vw, 120px) clamp(32px, 5vw, 88px);
	overflow: hidden;
}
#dedicated-product .dp-showcase__title {
	/* Top breathing room so the heading isn't flush against the section edge. */
	margin: clamp(24px, 4vw, 56px) 0 clamp(32px, 5vw, 64px);
	font-size: clamp(28px, 4vw, 48px);
	font-weight: 700;
	letter-spacing: -0.01em;
}
#dedicated-product .dp-showcase__layout {
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: stretch;
}
@media (min-width: 1024px) {
	/* Overlay model: the media pane fills the panel and the card list floats
	   on top of it. The list never constricts the media, and the media never
	   constricts the card text width — both lie naturally in their own layer. */
	#dedicated-product .dp-showcase__layout {
		display: block;
		position: relative;
		min-height: 620px;
	}
}
#dedicated-product .dp-showcase__nav {
	display: none;
}
@media (min-width: 1024px) {
	/* Original placement: a vertical up/down control column, left-aligned and
	   vertically centred against the card list. Hidden until a card is opened. */
	#dedicated-product .dp-showcase__nav {
		display: flex;
		flex-direction: column;
		gap: 16px;
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		z-index: 4;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity .3s ease, visibility .3s ease;
	}
	#dedicated-product .dp-showcase__layout.is-engaged .dp-showcase__nav {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}
}
#dedicated-product .dp-showcase__nav-btn {
	width: 36px; height: 36px;
	border-radius: 50%;
	border: 0;
	background: rgba(255,255,255,0.1);
	color: #fff;
	font-size: 14px;
	cursor: pointer;
	transition: background .2s ease;
}
#dedicated-product .dp-showcase__nav-btn:hover { background: rgba(255,255,255,0.2); }

#dedicated-product .dp-showcase__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	/* Sit above the intro backdrop (z-index 1) at every breakpoint. */
	position: relative;
	z-index: 3;
}
@media (min-width: 1024px) {
	/* Pills hug their own content (Apple-style): short labels stay small, long
	   ones grow, and the active card widens to fit its description. */
	#dedicated-product .dp-showcase__list {
		position: relative;
		z-index: 3;
		width: auto;
		max-width: 64%;
		align-items: flex-start;
		margin-left: 52px;
	}
	#dedicated-product .dp-showcase__item {
		width: fit-content;
		max-width: min(440px, 100%);
	}
}
/* Cards rest on #272729 and lift to a subtle lighter grey (#323234) on hover or
   tap/focus, in both collapsed and active states. Text + icon are always white. */
#dedicated-product .dp-showcase__item {
	background: #272729;
	border: 1px solid transparent;
	border-radius: 999px;            /* pill */
	padding: 7px 18px;               /* lower profile */
	cursor: pointer;
	color: #fff;
	position: relative;
	transition: background .35s cubic-bezier(.4,0,.2,1), padding .45s cubic-bezier(.4,0,.2,1), border-color .35s ease, border-radius .45s ease;
}
#dedicated-product .dp-showcase__item:hover,
#dedicated-product .dp-showcase__item:focus-visible { background: #323234; }
#dedicated-product .dp-showcase__item.is-active {
	background: #272729;
	border-color: rgba(255,255,255,0.14);
	border-radius: 22px;             /* relaxes to a rounded card when expanded */
	padding: 14px 20px;
}
#dedicated-product .dp-showcase__item.is-active:hover { background: #323234; }
#dedicated-product .dp-showcase__row-head {
	display: flex;
	align-items: center;
	gap: 10px;
}
/* Active card: hide the "+" and label so the description + variant switches
   fill the whole card. */
#dedicated-product .dp-showcase__item.is-active .dp-showcase__row-head {
	display: none;
}
/* Compact circular wrapper (Apple-style): the ring hugs the "+" with minimal
   dead space. The glyph keeps its baseline 19px size — only the circle shrank. */
#dedicated-product .dp-showcase__icon {
	width: 22px; height: 22px;
	border: 1.5px solid #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 19px;
	line-height: 1;
	color: #fff;
}
/* Label (collapsed) and description (expanded) share one identical type ramp. */
#dedicated-product .dp-showcase__label,
#dedicated-product .dp-showcase__desc {
	font-size: 15px;
	font-weight: 500;
	line-height: 1.45;
	color: #fff;
}
/* Collapsible body (description + variant switches). max-height is set inline
   by JS to the measured scrollHeight for smooth variable-density expansion;
   the is-active value below is the no-JS fallback. width collapses to 0 so a
   closed pill hugs only its label, then opens to fit its description. */
#dedicated-product .dp-showcase__body {
	max-height: 0;
	width: 0;
	opacity: 0;
	overflow: hidden;
	padding-bottom: 0;
	transition: max-height .55s cubic-bezier(.4,0,.2,1), opacity .4s ease .1s;
}
#dedicated-product .dp-showcase__item.is-active .dp-showcase__body {
	max-height: 1200px;
	width: auto;
	min-width: 200px;
	opacity: 1;
	padding-bottom: 2px;
}

#dedicated-product .dp-showcase__media {
	position: relative;
	z-index: 2;                /* above the intro backdrop (z-index 1) */
	min-height: 320px;
	border-radius: 28px;
	overflow: hidden;
	/* No fill: the right pane is a transparent window so the looping intro
	   backdrop (and the panel beneath) show through when no card is selected.
	   Selected-item media still fills the host on top. */
	background: transparent;
}
@media (min-width: 1024px) {
	/* Context-aware right pane sitting BEHIND the floating card list. Compact
	   (single hardware shot) occupies the right ~52%; immersive expands to the
	   full panel width. The list overlays it either way — the media is never
	   constricted by the cards. */
	#dedicated-product .dp-showcase__media {
		position: absolute;
		top: 0; right: 0; bottom: 0;
		width: 52%;
		min-height: 0;
		z-index: 2;
		transition: width .7s cubic-bezier(.4,0,.2,1);
		will-change: width;
	}
	#dedicated-product .dp-showcase__media.is-full {
		width: 100%;
	}
}
#dedicated-product .dp-showcase__media-host {
	position: absolute;
	inset: 0;
}
#dedicated-product .dp-showcase__media-host > * {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity .6s cubic-bezier(.4,0,.2,1);
}
#dedicated-product .dp-showcase__media-host > .is-active { opacity: 1; }
/* Same compact ring as the "+" wrapper, but the "×" glyph is scaled UP inside
   it for contrast and easier dismiss-target visibility. */
#dedicated-product .dp-showcase__close {
	position: absolute;
	top: 16px; right: 16px;
	width: 28px; height: 28px;
	border-radius: 50%;
	border: 0;
	background: rgba(255,255,255,0.1);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	z-index: 5;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: background .2s ease, opacity .3s ease, visibility .3s ease;
}
/* The close control only appears once a card is opened. */
#dedicated-product .dp-showcase__layout.is-engaged .dp-showcase__close {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
#dedicated-product .dp-showcase__close:hover { background: rgba(255,255,255,0.2); }

/* ---- Variant switches (color swatch / icon / text) ---- */
#dedicated-product .dp-showcase__variants {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 18px;
}
#dedicated-product .dp-showcase__variant {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	background: rgba(255,255,255,0.08);
	border: 1px solid transparent;
	border-radius: 999px;
	color: var(--dp-text-soft);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: background .3s ease, border-color .3s ease, color .3s ease, transform .3s ease;
}
#dedicated-product .dp-showcase__variant:hover { background: rgba(255,255,255,0.14); }
#dedicated-product .dp-showcase__variant.is-active {
	background: rgba(255,255,255,0.16);
	border-color: rgba(255,255,255,0.3);
	color: #fff;
}
#dedicated-product .dp-showcase__variant--swatch { padding: 6px; }
#dedicated-product .dp-showcase__swatch {
	width: 26px; height: 26px;
	border-radius: 50%;
	background: var(--swatch, #555);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25);
	display: block;
	transition: box-shadow .3s ease;
}
#dedicated-product .dp-showcase__variant--swatch.is-active {
	box-shadow: 0 0 0 2px var(--dp-bg), 0 0 0 4px #fff;
}
#dedicated-product .dp-showcase__variant-icon {
	width: 20px; height: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
#dedicated-product .dp-showcase__variant-icon svg { width: 100%; height: 100%; }

/* ---- Cinematic intro backdrop + staggered card slide-in ----
 * The intro media (looping muted video, or a static image) is a persistent
 * full-panel BACKDROP at the bottom of the stack. The right media pane is
 * transparent, so this shows through whenever no card is selected — i.e. it is
 * the default state and re-appears when the visitor closes a card. The cards
 * float above it. For a video, cards are click-locked for the first 1.0s (.is-
 * locked) then slide in and become interactive while the video keeps looping. */
#dedicated-product .dp-showcase__intro {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	background: var(--dp-bg);
	pointer-events: none;
}
#dedicated-product .dp-showcase__intro-video,
#dedicated-product .dp-showcase__intro-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Interaction lockout while the intro video runs its opening second. */
#dedicated-product .dp-showcase__layout.is-locked .dp-showcase__list {
	pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
	/* Off-stage to the left until the 1.0s mark flips on .is-cards-in. GPU-only
	   transform/opacity, will-change scoped to the intro so it never lingers. */
	#dedicated-product .dp-showcase__layout.is-intro .dp-showcase__item {
		opacity: 0;
		transform: translate3d(-40px, 0, 0);
		will-change: transform, opacity;
		transition: transform .6s cubic-bezier(.2,.65,.2,1),
		            opacity .6s cubic-bezier(.2,.65,.2,1);
	}
	#dedicated-product .dp-showcase__layout.is-intro.is-cards-in .dp-showcase__item {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
	#dedicated-product .dp-showcase__layout.is-intro .dp-showcase__item:nth-child(1) { transition-delay: 0ms; }
	#dedicated-product .dp-showcase__layout.is-intro .dp-showcase__item:nth-child(2) { transition-delay: 80ms; }
	#dedicated-product .dp-showcase__layout.is-intro .dp-showcase__item:nth-child(3) { transition-delay: 160ms; }
	#dedicated-product .dp-showcase__layout.is-intro .dp-showcase__item:nth-child(4) { transition-delay: 240ms; }
	#dedicated-product .dp-showcase__layout.is-intro .dp-showcase__item:nth-child(5) { transition-delay: 320ms; }
	#dedicated-product .dp-showcase__layout.is-intro .dp-showcase__item:nth-child(6) { transition-delay: 400ms; }
}

/* ------------------------------------------------------------------ *
 * 4. Bento
 * ------------------------------------------------------------------ */
#dedicated-product .dp-bento {
	position: relative;
	background: var(--dp-surface);
	padding: var(--dp-section-gap) 0;
}
#dedicated-product .dp-bento__fade {
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 120px;
	/* Starts from the showcase's flat surface above (not black) so the seam
	   stays invisible after the showcase canvas went flat #121212. */
	background: linear-gradient(to bottom, var(--dp-surface), var(--dp-surface));
	pointer-events: none;
}
#dedicated-product .dp-bento__header {
	position: relative;
	text-align: center;
	margin-bottom: clamp(40px, 6vw, 64px);
}
#dedicated-product .dp-bento__title {
	margin: 0 0 24px;
	font-size: clamp(32px, 4.5vw, 56px);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.1;
}
#dedicated-product .dp-bento__selector {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin-bottom: 32px;
}
#dedicated-product .dp-bento__selector-labelrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
#dedicated-product .dp-bento__selector-label {
	color: var(--dp-muted);
	font-size: 14px;
	font-weight: 500;
}
#dedicated-product .dp-bento__help {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 1px solid var(--dp-muted);
	color: var(--dp-muted);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	cursor: help;
	transition: color .2s ease, border-color .2s ease;
}
#dedicated-product .dp-bento__help:hover,
#dedicated-product .dp-bento__help:focus-visible {
	border-color: var(--dp-text);
	color: var(--dp-text);
	outline: none;
}
#dedicated-product .dp-bento__select {
	/* Hug the widest option rather than stretching the container; capped so it
	   stays tight on desktop and never overflows on narrow viewports. */
	width: auto;
	min-width: 0;
	max-width: min(320px, 100%);
	padding: 10px 40px 10px 20px;
	background-color: #000;
	color: #fff;
	border: 1px solid #424245;
	border-radius: 12px;
	font-size: 17px;
	font-weight: 500;
	font-family: inherit;
	appearance: none;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 14px;
}
#dedicated-product .dp-bento__subheading {
	margin: 24px 0 0;
	font-size: clamp(16px, 1.5vw, 20px);
	color: var(--dp-muted);
	font-weight: 500;
}

#dedicated-product .dp-bento__grid {
	position: relative;
	max-width: 680px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-auto-rows: minmax(140px, auto);
	gap: 14px;
}
@media (max-width: 600px) {
	#dedicated-product .dp-bento__grid { grid-template-columns: 1fr; }
}
#dedicated-product .dp-bento__card {
	background: var(--dp-surface-2);
	border-radius: 28px;
	overflow: hidden;
	position: relative;
	min-height: 140px;
	transition: transform .4s ease, filter .4s ease, box-shadow .4s ease;
}
#dedicated-product .dp-bento__card:hover {
	transform: scale(1.02);
	filter: brightness(1.1);
	box-shadow: 0 0 28px rgba(255,255,255,0.08);
	z-index: 2;
}
#dedicated-product .dp-bento__card--large { grid-row: span 2; min-height: 280px; }
#dedicated-product .dp-bento__card-bg {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
}
#dedicated-product .dp-bento__card-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,0.6), transparent 60%);
}
#dedicated-product .dp-bento__card-content {
	position: relative;
	z-index: 1;
	padding: 28px;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 16px;
}
#dedicated-product .dp-bento__card--small .dp-bento__card-content {
	justify-content: center;
	flex-direction: row;
	align-items: center;
	gap: 14px;
}
#dedicated-product .dp-bento__card-icon {
	width: 32px; height: 32px;
	color: #fff;
}
#dedicated-product .dp-bento__card--small .dp-bento__card-icon { color: var(--dp-accent); flex-shrink: 0; }
#dedicated-product .dp-bento__card-icon svg { width: 100%; height: 100%; }
#dedicated-product .dp-bento__card-title {
	margin: 0;
	font-size: clamp(18px, 1.6vw, 22px);
	font-weight: 700;
	line-height: 1.25;
	color: #fff;
}
#dedicated-product .dp-bento__card--large .dp-bento__card-title {
	font-size: clamp(20px, 1.8vw, 26px);
}

/* ------------------------------------------------------------------ *
 * 5. FAQ
 * ------------------------------------------------------------------ */
#dedicated-product .dp-faq {
	position: relative;
	background: var(--dp-bg);
	padding: var(--dp-section-gap) 0;
}
#dedicated-product .dp-faq__fade {
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 120px;
	background: linear-gradient(to bottom, var(--dp-surface), var(--dp-bg));
	pointer-events: none;
}
#dedicated-product .dp-faq__title {
	position: relative;
	margin: 0 0 clamp(32px, 5vw, 56px);
	font-size: clamp(28px, 4vw, 48px);
	font-weight: 700;
	letter-spacing: -0.01em;
	text-align: center;
}
#dedicated-product .dp-faq__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
#dedicated-product .dp-faq__item details {
	background: rgba(255,255,255,0.04);
	border: 1px solid var(--dp-border);
	border-radius: 16px;
	padding: 20px 24px;
	transition: background .2s ease;
}
#dedicated-product .dp-faq__item details[open] {
	background: rgba(255,255,255,0.07);
	border-color: var(--dp-accent);
}
#dedicated-product .dp-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	font-size: clamp(16px, 1.5vw, 19px);
	font-weight: 600;
	color: #fff;
	cursor: pointer;
	list-style: none;
}
#dedicated-product .dp-faq__question::-webkit-details-marker { display: none; }
#dedicated-product .dp-faq__q-icon {
	width: 28px; height: 28px;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,0.4);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	line-height: 1;
	flex-shrink: 0;
	transition: transform .25s ease, border-color .25s ease, color .25s ease;
}
#dedicated-product .dp-faq__item details[open] .dp-faq__q-icon {
	transform: rotate(45deg);
	border-color: var(--dp-accent);
	color: var(--dp-accent);
}
#dedicated-product .dp-faq__answer {
	margin-top: 16px;
	color: var(--dp-text-soft);
	font-size: 16px;
	line-height: 1.6;
}
#dedicated-product .dp-faq__answer p { margin: 0 0 12px; }
#dedicated-product .dp-faq__answer p:last-child { margin-bottom: 0; }
#dedicated-product .dp-faq__answer a { color: var(--dp-accent); text-decoration: underline; }

/* ------------------------------------------------------------------ *
 * 6. Request Support CTA (replaces FAQ in the page flow — V107)
 * ------------------------------------------------------------------ */
#dedicated-product .dp-cta {
	position: relative;
	background: var(--dp-bg);
	padding: var(--dp-section-gap) 0;
}
#dedicated-product .dp-cta__fade {
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 120px;
	background: linear-gradient(to bottom, var(--dp-surface), var(--dp-bg));
	pointer-events: none;
}
#dedicated-product .dp-cta__inner {
	position: relative;
	text-align: center;
	border-top: 1px solid var(--dp-border);
	padding-top: clamp(40px, 6vw, 72px);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}
#dedicated-product .dp-cta__title {
	margin: 0;
	font-size: clamp(28px, 4vw, 44px);
	font-weight: 700;
	letter-spacing: -0.01em;
}
#dedicated-product .dp-cta__desc {
	margin: 0;
	max-width: 46rem;
	color: var(--dp-text-soft);
	font-size: clamp(16px, 1.6vw, 19px);
	line-height: 1.5;
}
/* 1:1 clone of the game hero "Shop Now" button below "Available Now" —
   .button-red-shadowed plus its hero-stack overrides (css/style.css:506 & 917).
   Effective: Montserrat-Bold 500, 1.05rem, uppercase, 0.85rem×1.6rem padding,
   8px radius, soft drop shadow, 15–22rem width, invert-on-hover. Centred in the
   band rather than floated like the original. */
#dedicated-product .dp-cta__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	margin-top: 8px;
	width: auto;
	min-width: 15rem;
	max-width: min(100%, 22rem);
	padding: 0.85rem 1.6rem;
	background-color: #D90500;
	color: #fff;
	font-family: 'Montserrat-Bold', Helvetica, Arial, sans-serif;
	font-size: 1.05rem;
	font-weight: 500;
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 8px;
	box-shadow: 0 8px 18px rgba(3, 3, 3, 0.18);
	white-space: normal;
	transition: background-color .2s ease, color .2s ease;
}
#dedicated-product .dp-cta__btn:hover {
	background-color: #fff;
	color: #D90500;
}

/* ---- Showcase: mobile / reduced-motion fallbacks ---- */
@media (max-width: 1023px) {
	#dedicated-product .dp-showcase__media,
	#dedicated-product .dp-showcase__media.is-full { width: 100%; min-height: 320px; }
}
@media (prefers-reduced-motion: reduce) {
	#dedicated-product .dp-showcase__media,
	#dedicated-product .dp-showcase__body,
	#dedicated-product .dp-showcase__icon { transition: none; }
}

/* Controls wrapper is an invisible box on desktop — its children (nav + list)
   behave exactly as before. It becomes the bottom flex row on mobile. */
#dedicated-product .dp-showcase__controls { display: contents; }

/* =======================================================================
   Showcase — mobile "closer look" modal (≤768px)
   One viewport, no scroll: section title on top, the product image filling the
   middle, and a single bottom row of "‹  + Label / description  ›" — the
   chevrons sit inline with the pill/card and pin to the screen edges. Selecting
   the pill expands it in place into the description + variant swatches. No movie
   backdrop is used on mobile. Built as a flex column so it always fits.
   ======================================================================= */
@media (max-width: 768px) {
	/* --- Canvas: title + image + controls share one 100vh column --- */
	#dedicated-product .dp-showcase { padding: 0; background: #000; }
	#dedicated-product.dp-page .dp-showcase .dp-container--showcase {
		max-width: none; padding: 0;
		display: flex; flex-direction: column;
		min-height: 100vh; min-height: 100svh;
	}
	/* (#5) Section title — visible at the top (force past the dp-reveal hide). */
	#dedicated-product.dp-page .dp-showcase__title,
	#dedicated-product.dp-page .dp-showcase__title.dp-reveal {
		display: block;
		flex: 0 0 auto;
		margin: 0;
		padding: 16px 20px 8px;
		font-size: clamp(20px, 5vw, 26px);
		text-align: center;
		opacity: 1;
		transform: none;
	}
	#dedicated-product.dp-page .dp-showcase__panel,
	#dedicated-product.dp-page .dp-showcase__panel.dp-reveal,
	#dedicated-product.dp-page .dp-showcase__panel.dp-reveal.is-in-view {
		background: #000; border: 0; border-radius: 0; padding: 0;
		flex: 1 1 auto; min-height: 0;
		display: flex; flex-direction: column;     /* host the layout as a column */
		position: relative; opacity: 1; transform: none;
	}
	#dedicated-product .dp-showcase__layout {
		display: flex; flex-direction: column;
		flex: 1 1 auto; min-height: 0;             /* fill the panel reliably */
		position: relative;
	}

	/* (#1/#2) The intro backdrop shows the movie's STATIC first frame — it never
	   auto-plays or loops on mobile (JS pauses it and loads only metadata). It is
	   the default behind the image and hides while a feature is selected. */
	#dedicated-product .dp-showcase__intro {
		display: block;
		z-index: 0;
		transition: opacity .35s ease;
	}
	#dedicated-product .dp-showcase__layout.is-engaged .dp-showcase__intro { opacity: 0; }
	#dedicated-product .dp-showcase__intro-video,
	#dedicated-product .dp-showcase__intro-img { object-fit: cover; }

	/* --- (#2) Image fills the space between the title and the controls row --- */
	#dedicated-product .dp-showcase__media,
	#dedicated-product .dp-showcase__media.is-compact,
	#dedicated-product .dp-showcase__media.is-full {
		order: 1;
		flex: 1 1 auto;
		min-height: 0;
		position: relative;
		width: auto; height: auto;
		border-radius: 0; background: transparent;
		z-index: 1;
	}
	#dedicated-product .dp-showcase__media-host { position: absolute; inset: 8px; }
	#dedicated-product .dp-showcase__media-host > * { object-fit: contain; }

	/* --- Close (X), top-right --- */
	#dedicated-product .dp-showcase__close,
	#dedicated-product .dp-showcase__layout.is-engaged .dp-showcase__close {
		position: absolute; top: 10px; right: 10px;
		width: 38px; height: 38px; font-size: 26px;
		background: rgba(255,255,255,0.14);
		opacity: 1; visibility: visible; pointer-events: auto; z-index: 60;
	}

	/* --- (#3) Bottom controls row: ‹  pill / card  › on ONE line --- */
	#dedicated-product .dp-showcase__controls {
		order: 2;
		flex: 0 0 auto;
		display: flex;
		align-items: center;           /* (#4) chevrons vertically centred on the card */
		justify-content: space-between;
		gap: 8px;
		padding: 10px 8px 16px;
		position: relative; z-index: 3;
	}
	#dedicated-product .dp-showcase__nav { display: contents; } /* dissolve so the buttons join the row */
	#dedicated-product .dp-showcase__nav-btn,
	#dedicated-product .dp-showcase__layout.is-engaged .dp-showcase__nav-btn {
		position: static; transform: none;
		flex: 0 0 auto; align-self: center;
		width: 42px; height: 42px; font-size: 0;
		background: rgba(255,255,255,0.16);
		opacity: 1; visibility: visible; pointer-events: auto;
		margin: 0;
	}
	#dedicated-product .dp-showcase__nav-btn[data-dir="-1"] { order: 1; }
	#dedicated-product .dp-showcase__nav-btn[data-dir="1"]  { order: 3; }
	#dedicated-product .dp-showcase__nav-btn::before { font-size: 22px; line-height: 1; }
	#dedicated-product .dp-showcase__nav-btn[data-dir="-1"]::before { content: "\2039"; } /* ‹ */
	#dedicated-product .dp-showcase__nav-btn[data-dir="1"]::before  { content: "\203A"; } /* › */

	/* List: the centred middle of the row, holding only the selected feature. */
	#dedicated-product .dp-showcase__list {
		order: 2;
		flex: 1 1 auto;
		min-width: 0;
		margin: 0; padding: 0;
		max-width: none;
		display: flex; flex-direction: column; align-items: center; justify-content: center;
	}
	#dedicated-product .dp-showcase__item,
	#dedicated-product .dp-showcase__item:hover,
	#dedicated-product .dp-showcase__item:focus-visible { display: none; }

	/* Browse: the focused "+ Label" pill (icon stays with the label). */
	#dedicated-product .dp-showcase__item.is-focus:not(.is-active) {
		display: inline-flex;
		width: auto; max-width: 100%;
		background: #272729; border: 0; border-radius: 999px;
		padding: 10px 18px;
	}
	#dedicated-product .dp-showcase__item.is-focus:not(.is-active) .dp-showcase__row-head {
		display: flex; align-items: center; justify-content: center; gap: 10px;
	}

	/* (#4) Selected: pill replaced in place by the description + variants card,
	   which grows naturally to fit its text (capped, scrolls if very long); it
	   never overlaps the chevrons because it is the flex middle of the row. */
	#dedicated-product .dp-showcase__item.is-active,
	#dedicated-product .dp-showcase__item.is-active:hover {
		display: block;
		width: 100%;
		background: rgba(26,26,26,0.8);
		-webkit-backdrop-filter: blur(14px);
		backdrop-filter: blur(14px);
		border: 0; border-radius: 18px;
		padding: 16px 18px;
	}
	#dedicated-product .dp-showcase__item.is-active .dp-showcase__row-head { display: none; }

	#dedicated-product .dp-showcase__label,
	#dedicated-product .dp-showcase__desc { font-size: 16px; }
	#dedicated-product .dp-showcase__desc { text-align: center; }

	#dedicated-product .dp-showcase__body {
		display: none; max-height: none; width: auto; min-width: 0;
		opacity: 1; overflow: visible; padding-bottom: 0;
	}
	#dedicated-product .dp-showcase__item.is-active .dp-showcase__body {
		display: block; max-height: 40vh; overflow-y: auto;
	}
	#dedicated-product .dp-showcase__variants { justify-content: center; margin-top: 12px; }
}