/* =============================================================================
 * KATA Single Product (PDP) — main stylesheet
 *
 * Loaded only when is_product() via functions-single-product.php (priority 20).
 * Light-theme woocommerce.css is dequeued before this loads.
 *
 * Built up across Commits 4–10 in lockstep with the template-parts.
 *
 * Token rule (locked from main.css): gold-on-dark = --c-gold,
 * gold-on-cream/white = --c-gold-secondary. NEVER cross.
 * ===========================================================================*/

/* ─── PDP-scoped tokens (additions vs main.css; same values shop.css uses) ─── */
:root {
	/* --ff-mono is now defined globally in main.css as var(--ff-body) (v5.8.7). */
	--c-warn:     #c43c25;
}

/* ─── Layout root ─────────────────────────────────────────────────────────── */

.kata-pdp {
	display: block;
	background: var(--c-black);
	color: var(--c-white);
	padding: 0;
}
.kata-pdp .pdp-section { display: block; }
/* In-page anchor jumps (§15 → #configure, sticky bar fallback, etc.) must
 * clear the global fixed nav so the section title isn't hidden under it. */
.kata-pdp .pdp-section[id] { scroll-margin-top: calc(var(--nav-h, 78px) + 1rem); }
/* Sticky-bar sentinel: zero-height marker so it never reveals the parent
 * .kata-pdp background between sections. IntersectionObserver still fires
 * on it via boundingClientRect.top < 0 (height-independent). */
#kata-pdp-sticky-sentinel { height: 0; margin: 0; pointer-events: none; }

/* Tight up the section-to-section seam: no double-stacked padding when two
 * editorial sections of the same colour family touch. The cream→dark
 * transitions (§04→§05, §08→§09) get a thin gold tick to soften the edge. */
.pdp-edit + .pdp-edit { border-top: 0; }
.pdp-edit--cream + .pdp-edit--dark,
.pdp-edit--white + .pdp-edit--dark {
	box-shadow: inset 0 1px 0 var(--c-gold-secondary, #fbb715);
}

/* -----------------------------------------------------------------------------
 * §00 · Cinema hero — Commit 4
 * -------------------------------------------------------------------------- */

/* Breadcrumbs above the hero */
.pdp__crumbs {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	/* Clear the global fixed nav (78px) so crumbs don't overlap the header. */
	padding: calc(var(--nav-h, 78px) + 1.25rem) var(--gutter) 0.5rem;
	font-family: var(--ff-mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-mute-2);
	max-width: var(--maxw);
	margin: 0 auto;
	flex-wrap: wrap;
}
.pdp__crumbs a {
	color: var(--c-mute);
	transition: color 0.2s;
	text-decoration: none;
}
.pdp__crumbs a:hover { color: var(--c-white); }
.pdp__crumbs .current { color: var(--c-white); }
.pdp__crumbs .sep { color: var(--c-line-strong); }

/* Cinema fold wrapper */
.pdp-cinema-hero { background: var(--c-black); }
.pdp-cinema__fold {
	display: flex;
	flex-direction: column;
	background: var(--c-black);
	color: var(--c-white);
	padding-top: 0.25rem;
}

/* Title bar above the cinema image */
.pdp-cinema__title-bar {
	display: flex;
	justify-content: space-between;
	align-items: end;
	gap: 2rem;
	padding: 0.75rem var(--gutter) 1rem;
	max-width: var(--maxw);
	margin: 0 auto;
	width: 100%;
	flex-wrap: wrap;
}
.pdp-cinema__title-block { min-width: 0; }
.pdp-cinema__cat {
	font-family: var(--ff-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-gold);
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}
.pdp-cinema__cat::before {
	content: '';
	width: 18px;
	height: 1px;
	background: var(--c-gold);
}
.pdp-cinema__h1 {
	font-family: var(--ff-display);
	font-size: clamp(2.5rem, 6vw, 5rem);
	line-height: 0.9;
	letter-spacing: -0.005em;
	font-weight: 400;
	margin: 0;
	color: var(--c-white);
	text-wrap: balance;
}
.pdp-cinema__title-meta {
	display: flex;
	gap: 2.5rem;
	padding-bottom: 0.6rem;
	flex-wrap: wrap;
}
.pdp-cinema__meta-item {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	font-family: var(--ff-mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-mute);
	border-left: 1px solid var(--c-line);
	padding-left: 1rem;
	min-width: 0;
}
.pdp-cinema__meta-item em {
	font-style: normal;
	color: var(--c-mute-2);
}
.pdp-cinema__meta-item strong {
	font-family: var(--ff-display);
	font-size: 1.25rem;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--c-white);
	text-transform: none;
}
/* WC's price_html wraps numbers in <bdi> — make sure it doesn't push odd line breaks. */
.pdp-cinema__meta-item strong .woocommerce-Price-amount,
.pdp-cinema__meta-item strong bdi { font-family: inherit; font-size: inherit; }
/* On-sale kit (simple or variable): struck old price muted, sale price kept
   prominent. Without this WC's <del>/<ins> rendered full-size + underlined.
   Bruno 06/2026. */
.pdp-cinema__meta-item strong del {
	color: rgba(255,255,255,0.5);
	font-size: 0.74em;
	margin-right: 0.4em;
	text-decoration: line-through;
}
.pdp-cinema__meta-item strong del .woocommerce-Price-amount { color: inherit; }
.pdp-cinema__meta-item strong ins { text-decoration: none; color: var(--c-gold); }

/* Cinema image — wider aspect (less tall) so first fold shows thumbs too. */
.pdp-cinema__cinema {
	position: relative;
	margin: 0 var(--gutter);
	aspect-ratio: 16 / 9;
	/* White image stage — transparent product renders no longer sit on dark
	   (Bruno 2026-06-15). Surrounding cinema hero stays dark. */
	background: var(--c-white);
	overflow: hidden;
	isolation: isolate;
}
/* Carousel track — replaces the single crossfade img (v5.29.0 → swipe gallery). */
.pdp-cinema__track {
	display: flex;
	width: 100%;
	height: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;          /* Firefox */
}
.pdp-cinema__track::-webkit-scrollbar { display: none; } /* WebKit */
.pdp-cinema__slide {
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	scroll-snap-align: center;
	scroll-snap-stop: always;
}
.pdp-cinema__slide-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
@media (prefers-reduced-motion: reduce) {
	.pdp-cinema__track { scroll-behavior: auto; }
}

/* Desktop/laptop: cap the cinema hero width so the full-bleed 16:9 box doesn't
   get too tall on wide screens (height = width × 9/16). Centered. Mobile
   (≤720px) keeps the full-bleed rule below and is unaffected. v5.29.0 */
@media (min-width: 721px) {
	.pdp-cinema__cinema {
		max-width: 1280px;
		margin-inline: auto;
	}
}
.pdp-cinema__placeholder {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background:
		repeating-linear-gradient(135deg, rgba(254,197,62,0.04) 0 2px, transparent 2px 18px),
		linear-gradient(140deg, #2a2418 0%, #0c0a07 100%);
}
.pdp-cinema__placeholder-label {
	font-family: var(--ff-mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.35);
	text-align: center;
	padding: 1rem;
	max-width: 80%;
}

/* Image counter pill (bottom-left) */
.pdp-cinema__counter {
	position: absolute;
	bottom: 1rem;
	left: 1rem;
	z-index: 5;
	padding: 0.35rem 0.7rem;
	font-family: var(--ff-mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	background: rgba(0,0,0,0.55);
	color: var(--c-white);
	border-radius: 2px;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

/* Action buttons (prev / next / lightbox / video) bottom-right */
.pdp-cinema__actions {
	position: absolute;
	bottom: 1.5rem;
	right: 1.5rem;
	display: flex;
	gap: 0.5rem;
	z-index: 5;
}
.pdp-cinema__action {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	background: rgba(0,0,0,0.5);
	border: 1px solid rgba(255,255,255,0.18);
	color: var(--c-white);
	border-radius: 999px;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	cursor: pointer;
	transition: background 0.2s, border-color 0.2s, color 0.2s;
	padding: 0;
}
.pdp-cinema__action:hover {
	background: var(--c-gold);
	color: var(--c-black);
	border-color: var(--c-gold);
}
.pdp-cinema__action:focus-visible {
	outline: 2px solid var(--c-gold);
	outline-offset: 2px;
}

/* Video action — auto-width pill with "Play" label + triangle (v5.29.0).
   Base .pdp-cinema__action is a 44px grid square; the video variant flips to
   a flex row so the label and icon sit side-by-side. Doubled-class selector
   raises specificity above the mobile `.pdp-cinema__action { width: 40px }`
   rule (declared later in the file) so the pill never collapses to a circle
   that clips the "Play" label on phones. */
.pdp-cinema__action.pdp-cinema__action--video {
	width: auto;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0 0.85rem;
	border-radius: 100px;
}
.pdp-cinema__action-label {
	font-family: var(--ff-mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1;
}

/* Horizontal thumb rail */
.pdp-cinema__thumbs {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 1rem var(--gutter) 0;
	max-width: var(--maxw);
	margin: 0 auto;
	width: 100%;
	overflow-x: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--c-line-strong) transparent;
}
.pdp-cinema__thumbs::-webkit-scrollbar { height: 6px; }
.pdp-cinema__thumbs::-webkit-scrollbar-thumb { background: var(--c-line-strong); border-radius: 3px; }
.pdp-cinema__thumb {
	position: relative;
	flex: 0 0 auto;
	width: 110px;
	aspect-ratio: 16 / 9;
	background: var(--c-white);
	border: 1px solid var(--c-line);
	cursor: pointer;
	overflow: hidden;
	padding: 0;
	transition: border-color 0.2s;
}
.pdp-cinema__thumb:hover { border-color: var(--c-line-strong); }
.pdp-cinema__thumb--active { border-color: var(--c-gold); }
.pdp-cinema__thumb--active::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--c-gold);
}
.pdp-cinema__thumb-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.pdp-cinema__thumb-label {
	position: absolute;
	bottom: 4px;
	left: 6px;
	font-family: var(--ff-mono);
	font-size: 9px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.85);
	text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.pdp-cinema__thumb:focus-visible {
	outline: 2px solid var(--c-gold);
	outline-offset: 2px;
}

.pdp-cinema__thumbs-meta {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 1.25rem;
	font-family: var(--ff-mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-mute);
	flex-shrink: 0;
}
.pdp-cinema__thumbs-meta a {
	color: var(--c-gold);
	text-decoration: none;
	transition: color 0.2s;
}
.pdp-cinema__thumbs-meta a:hover { color: var(--c-white); }

/* Mobile tightening */
@media (max-width: 720px) {
	.pdp-cinema__title-bar {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}
	.pdp-cinema__title-meta {
		gap: 1.25rem;
		padding-bottom: 0;
		width: 100%;
	}
	.pdp-cinema__meta-item {
		padding-left: 0.75rem;
	}
	.pdp-cinema__cinema {
		margin: 0;
		aspect-ratio: 16 / 9;
	}
	.pdp-cinema__actions {
		bottom: 0.75rem;
		right: 0.75rem;
	}
	.pdp-cinema__action {
		width: 40px;
		height: 40px;
	}
	.pdp-cinema__thumb {
		width: 84px;
	}
	.pdp-cinema__thumbs-meta {
		display: none; /* keep below-fold real estate clean on mobile */
	}
}

/* -----------------------------------------------------------------------------
 * Bands shared (used by §01–§03 + future)
 * -------------------------------------------------------------------------- */

.pdp-band {
	background: var(--c-black);
	border-top: 1px solid var(--c-line);
	padding: 3.5rem var(--gutter);
}
.pdp-band__inner {
	max-width: 1280px;
	margin: 0 auto;
}
.pdp-band__head { margin-bottom: 2rem; }

/* v5.21.x Orne audit: align with canonical .eyebrow (main.css) — wrapper
 * inherits parent color + opacity 0.6, gap 12px, dash currentColor 0.7. */
.pdp-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--ff-body);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: inherit;
	opacity: 1;
	margin-bottom: 1rem;
}
.pdp-eyebrow__num {
	color: var(--c-gold);
	font-family: var(--ff-display);
	font-size: 20px;
	font-weight: 400;
	letter-spacing: 0.02em;
	line-height: 1;
	opacity: 1;
}
/* Cream PDP sections — switch index to gold-secondary for contrast. */
.pdp-edit--cream .pdp-eyebrow__num,
.pdp-edit--white .pdp-eyebrow__num,
.pdp-eyebrow--ink .pdp-eyebrow__num { color: var(--c-gold-secondary); }

/* ─── PDP eyebrow numbering — CSS counter (v5.21.0 Orne) ─────────────────────
 * Auto-numbers visible .pdp-eyebrow__num in DOM order. Replaces the previous
 * hard-coded "— XX" strings which had drifted out of sequence (file 09 → "10",
 * file 10 → "11", file 11 → "09"). The PHP string stays in DOM as a graceful
 * fallback for CSS-off / screen-reader announce (minor double-read trade-off).
 *
 * Bonus: mobile-hiding the 3D viewer (data-pdp-section="09") makes the
 * counter renumber subsequent sections automatically — no PHP edits needed
 * per section to keep mobile sequential.
 */
/* counter-reset on body.single-product — PDP main element is `.kata-pdp`,
 * NOT `.kata-main` (that's Home + utility pages). Resetting on body covers
 * both cases and prevents per-section scope creation that would render
 * every counter as "01". */
body.single-product { counter-reset: pdp-section; }
body.single-product .pdp-eyebrow__num {
	counter-increment: pdp-section;
	font-size: 0;          /* hide the literal "— XX" string */
	letter-spacing: 0;
	white-space: nowrap;
}
body.single-product .pdp-eyebrow__num::before {
	/* v5.21.2: drop the "— " prefix to match Home/About/Guides format (which
	 * use a separate __dash span). PDP also has a __dash span — the literal
	 * prefix was duplicate visual noise. Now: just the 2-digit counter. */
	content: counter(pdp-section, decimal-leading-zero);
	font-family: var(--ff-display);
	font-size: 20px;
	font-weight: 400;
	color: var(--c-gold);
	letter-spacing: 0.02em;
	line-height: 1;
}
/* Cream/white PDP sections — gold-secondary on light bg. */
.pdp-edit--cream .pdp-eyebrow__num::before,
.pdp-edit--white .pdp-eyebrow__num::before,
.pdp-eyebrow--ink .pdp-eyebrow__num::before {
	color: var(--c-gold-secondary);
}

/* Mobile-only: hide the 3D viewer ("Interact with the kit"). The counter
 * skips display:none sections, so everything after it renumbers cleanly. */
@media (max-width: 720px) {
	body.single-product .pdp-section[data-pdp-section="09"] {
		display: none;
	}
}
.pdp-eyebrow__dash {
	/* v5.21.x Orne: unified to 38×1px to match canonical Home eyebrow. */
	display: inline-block;
	width: 38px;
	height: 1px;
	background: currentColor;
	opacity: 0.7;
}

/* -----------------------------------------------------------------------------
 * §01 · Band 1 — This kit · Commit 5
 * -------------------------------------------------------------------------- */

.pdp-band-this__copy {
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: 3rem;
	align-items: end;
}
.pdp-band-this__lede {
	margin: 0;
	max-width: 56ch;
}
.pdp-band-this__lede p {
	font-size: 1.05rem;
	line-height: 1.55;
	color: var(--c-mute);
	margin: 0 0 0.75rem;
}
.pdp-band-this__lede p:last-child { margin-bottom: 0; }
.pdp-band-this__lede strong {
	display: block;
	font-family: var(--ff-display);
	font-size: clamp(1.6rem, 2.2vw, 2.1rem);
	line-height: 1.05;
	letter-spacing: -0.005em;
	color: var(--c-white);
	font-weight: 400;
	margin-bottom: 0.85rem;
}
.pdp-band-this__sub {
	font-family: var(--ff-mono);
	font-size: 11px;
	line-height: 1.55;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--c-mute-2);
	margin: 0;
	padding-left: 1.25rem;
	border-left: 1px solid var(--c-line);
}

.pdp-band-this__stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	list-style: none;
	padding: 0;
	margin: 2.5rem 0 0;
	border-top: 1px solid var(--c-line);
	border-bottom: 1px solid var(--c-line);
}
.pdp-band-this__stats li {
	padding: 1.5rem;
	border-right: 1px solid var(--c-line);
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}
.pdp-band-this__stats li:last-child { border-right: 0; }

.pdp-stat__icon {
	color: var(--c-gold);
	display: inline-flex;
	margin-bottom: 0.25rem;
}
.pdp-stat__icon svg { display: block; }

.pdp-stat__num {
	font-family: var(--ff-display);
	font-size: clamp(1.8rem, 2.5vw, 2.2rem);
	line-height: 1;
	letter-spacing: -0.01em;
	font-weight: 400;
	color: var(--c-white);
}
.pdp-stat__num em {
	font-style: normal;
	font-size: 0.55em;
	color: var(--c-mute);
	font-family: var(--ff-mono);
	margin-left: 0.25rem;
	letter-spacing: 0.04em;
}
.pdp-stat__label {
	font-family: var(--ff-body);
	font-size: 0.9rem;
	color: var(--c-white);
	font-weight: 400;
}
.pdp-stat__hint {
	font-family: var(--ff-mono);
	font-size: 10px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--c-mute-2);
	margin-top: 0.2rem;
}

.pdp-band-this__trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.85rem 1.25rem;
	padding: 1.25rem 0 0;
	margin-top: 1.5rem;
	font-family: var(--ff-mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-mute);
}
.pdp-band-this__trust strong { color: var(--c-white); font-weight: 500; }
.pdp-band-this__trust .dot {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--c-line-strong);
}

/* Mobile tightening */
@media (max-width: 720px) {
	.pdp-band { padding: 2.5rem var(--gutter); }
	.pdp-band-this__copy {
		grid-template-columns: 1fr;
		gap: 1.25rem;
		align-items: start;
	}
	.pdp-band-this__sub {
		padding-left: 0;
		padding-top: 1rem;
		border-left: 0;
		border-top: 1px solid var(--c-line);
	}
	.pdp-band-this__stats {
		grid-template-columns: repeat(2, 1fr);
	}
	.pdp-band-this__stats li {
		border-right: 1px solid var(--c-line);
		border-bottom: 1px solid var(--c-line);
	}
	.pdp-band-this__stats li:nth-child(2n) { border-right: 0; }
	.pdp-band-this__stats li:nth-last-child(-n+2) { border-bottom: 0; }
	.pdp-band-this__stats li:last-child { border-bottom: 0; border-right: 0; }
	.pdp-band-this__trust { gap: 0.5rem 1rem; }
}

/* -----------------------------------------------------------------------------
 * §02 · Band 2 — Configure wizard · Commit 6
 * -------------------------------------------------------------------------- */

.pdp-band--configure {
	background: linear-gradient(180deg, var(--c-dark) 0%, var(--c-black) 100%);
}
.pdp-band__head--split {
	display: grid;
	grid-template-columns: auto 1fr 1.2fr;
	gap: 2rem;
	align-items: end;
}
.pdp-band__title {
	font-family: var(--ff-display);
	font-size: clamp(2rem, 3.2vw, 2.8rem);
	line-height: 0.95;
	font-weight: 400;
	margin: 0;
	color: var(--c-white);
	letter-spacing: -0.005em;
}
.pdp-band__title em {
	font-style: italic;
	color: var(--c-gold);
}
.pdp-band__lede {
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--c-mute);
	margin: 0;
	max-width: 48ch;
}

.pdp-wizard {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin-top: 2.5rem;
}
.pdp-step {
	background: var(--c-dark-2);
	border: 1px solid var(--c-line);
	padding: 1.75rem;
}
.pdp-step__head {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 1.25rem;
	align-items: start;
	padding-bottom: 1.25rem;
	margin-bottom: 1.5rem;
	border-bottom: 1px solid var(--c-line);
}
.pdp-step__num {
	font-family: var(--ff-display);
	font-size: 2.4rem;
	line-height: 1;
	color: var(--c-gold);
	font-weight: 400;
}
.pdp-step__head-text h3 {
	font-family: var(--ff-body);
	font-size: 1.15rem;
	font-weight: 500;
	color: var(--c-white);
	margin: 0 0 0.3rem;
}
.pdp-step__head-text p {
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--c-mute);
	margin: 0;
	max-width: 56ch;
}
.pdp-step__head-text strong { color: var(--c-white); font-weight: 500; }
.pdp-step__head-text a {
	color: var(--c-gold);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.pdp-step__status {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.7rem;
	font-family: var(--ff-mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	/* Was `nowrap` — the "Shipping fully assembled… · Calculated at checkout"
	 * status is too long for narrow viewports and overflowed the screen
	 * (horizontal scroll). Allow wrapping; cap at the column width. */
	white-space: normal;
	max-width: 100%;
	color: var(--c-mute);
	border: 1px solid var(--c-line);
	background: rgba(255,255,255,0.02);
}
.pdp-step__status--done {
	background: rgba(110,167,110,0.12);
	border-color: rgba(110,167,110,0.4);
	color: #6ea76e;
}
.pdp-step__status--done::before {
	content: '';
	width: 12px;
	height: 12px;
	flex-shrink: 0;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3'><path d='M5 12l5 5L20 7' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3'><path d='M5 12l5 5L20 7' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
}
/* Mandatory step (fulfilment) — gold border on the status pill until selected. */
.pdp-step__status--required:not(.pdp-step__status--done) {
	background: rgba(254,197,62,0.10);
	border-color: rgba(254,197,62,0.55);
	color: var(--c-gold);
}
/* Brief flash when the user attempts add-to-cart while fulfilment is missing. */
@keyframes kata-pdp-needs-attention {
	0%, 100% { box-shadow: 0 0 0 0 rgba(254,197,62,0); }
	30%      { box-shadow: 0 0 0 4px rgba(254,197,62,0.5); }
	60%      { box-shadow: 0 0 0 8px rgba(254,197,62,0); }
}
.pdp-step--needs-attention {
	animation: kata-pdp-needs-attention 1.4s ease-out;
}

/* --- Fulfilment step (P8 Orne) ----------------------------------------- */
.pdp-step__options--fulfilment {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}
.pdp-fulfilment {
	display: grid;
	grid-template-columns: 44px 1fr auto;
	gap: 1rem;
	align-items: start;
	padding: 1.25rem 1.25rem 1.1rem;
	background: rgba(255,255,255,0.02);
	border: 1px solid var(--c-line);
	color: var(--c-cream, #f1ede3);
	text-align: left;
	cursor: pointer;
	transition: border-color 180ms ease-out, background 180ms ease-out, transform 180ms ease-out;
	font-family: inherit;
}
.pdp-fulfilment:hover {
	border-color: var(--c-line-strong);
	background: rgba(255,255,255,0.04);
}
.pdp-fulfilment:focus-visible {
	outline: 2px solid var(--c-gold);
	outline-offset: 2px;
}
.pdp-fulfilment--active {
	border-color: var(--c-gold);
	background: rgba(254,197,62,0.06);
}
.pdp-fulfilment--active::after {
	content: '';
	position: absolute;
}
.pdp-fulfilment__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255,255,255,0.04);
	color: var(--c-gold);
	flex-shrink: 0;
}
.pdp-fulfilment--active .pdp-fulfilment__icon {
	background: rgba(254,197,62,0.16);
}
.pdp-fulfilment__body {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	min-width: 0;
}
.pdp-fulfilment__tag {
	font-family: var(--ff-mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-mute);
}
.pdp-fulfilment__name {
	font-family: var(--ff-display, var(--ff-body));
	font-size: 1.05rem;
	line-height: 1.2;
	color: var(--c-cream, #f1ede3);
	letter-spacing: 0.005em;
}
.pdp-fulfilment__meta {
	font-size: 0.78rem;
	line-height: 1.45;
	color: var(--c-mute);
}
.pdp-fulfilment__price {
	font-family: var(--ff-mono);
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	color: var(--c-gold);
	white-space: nowrap;
	align-self: start;
	padding-top: 0.2rem;
}
.pdp-fulfilment__price--calc {
	color: var(--c-mute);
	font-size: 0.7rem;
	max-width: 90px;
	white-space: normal;
	text-align: right;
	letter-spacing: 0;
	line-height: 1.3;
}
@media (max-width: 900px) {
	.pdp-step__options--fulfilment { grid-template-columns: 1fr; }
	.pdp-fulfilment { grid-template-columns: 36px 1fr auto; padding: 1rem; }
	.pdp-fulfilment__icon { width: 36px; height: 36px; }
	.pdp-fulfilment__name { font-size: 0.98rem; }
}

/* --- Order recap fulfilment line — surfaces the choice in Band 3 ------ */
/* Inherits .pdp-order__line layout; no override needed. */


.pdp-step__options { display: grid; gap: 0.65rem; }
.pdp-step__options--3      { grid-template-columns: repeat(3, 1fr); }
.pdp-step__options--swatch { grid-template-columns: repeat(5, 1fr); }
.pdp-step__options--addons { grid-template-columns: repeat(3, 1fr); }

/* Step 1 / wheelbase opt cards */
.pdp-opt {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding: 1.25rem 1rem;
	background: var(--c-dark);
	border: 1px solid var(--c-line);
	cursor: pointer;
	text-align: left;
	transition: border-color 0.2s, background 0.2s;
	color: var(--c-white);
	min-height: 130px;
	font-family: inherit;
}
.pdp-opt:hover { border-color: var(--c-line-strong); }
.pdp-opt--active {
	border-color: var(--c-gold);
	background: linear-gradient(155deg, #1f180a 0%, #0d0a04 100%);
}
.pdp-opt:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; }
.pdp-opt__badge {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	padding: 0.2rem 0.5rem;
	background: var(--c-gold);
	color: var(--c-black);
	font-family: var(--ff-mono);
	font-size: 9px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 500;
}
.pdp-opt__label {
	font-family: var(--ff-display);
	font-size: 1.8rem;
	line-height: 1;
	color: var(--c-white);
	font-weight: 400;
}
.pdp-opt--active .pdp-opt__label { color: var(--c-gold); }
.pdp-opt__hint {
	font-size: 0.9rem;
	color: var(--c-white);
}
.pdp-opt__meta {
	font-family: var(--ff-mono);
	font-size: 10px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--c-mute-2);
	margin-top: auto;
}

/* Step 2 / colour swatches */
.pdp-swatch {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0.85rem;
	background: var(--c-dark);
	border: 1px solid var(--c-line);
	cursor: pointer;
	transition: border-color 0.2s, background 0.2s;
	font-family: inherit;
	text-align: left;
}
.pdp-swatch:hover { border-color: var(--c-line-strong); }
.pdp-swatch--active {
	border-color: var(--c-gold);
	background: linear-gradient(155deg, #1f180a 0%, #0d0a04 100%);
}
.pdp-swatch:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; }
.pdp-swatch__chip {
	width: 100%;
	aspect-ratio: 1 / 1;
	display: block;
}
.pdp-swatch__chip--bordered { border: 1px solid var(--c-line-strong); }
.pdp-swatch__name {
	font-family: var(--ff-body);
	font-size: 0.9rem;
	color: var(--c-white);
	font-weight: 400;
}

/* Unavailable option state — diagonal red line, no interaction */
.pdp-opt.is-unavailable,
.pdp-swatch.is-unavailable {
	opacity: 0.38;
	cursor: not-allowed;
	pointer-events: none;
	position: relative;
}
.pdp-opt.is-unavailable::after,
.pdp-swatch.is-unavailable::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom right,
		transparent calc(50% - 1px),
		#e03030 calc(50% - 1px),
		#e03030 calc(50% + 1px),
		transparent calc(50% + 1px)
	);
	pointer-events: none;
}

/* Step 3 / addon tiles */
.pdp-step__options--addons .pdp-addon {
	position: relative;
	display: grid;
	gap: 0.4rem;
	padding: 1.25rem;
	background: var(--c-dark);
	border: 1px solid var(--c-line);
	cursor: pointer;
	text-align: left;
	transition: border-color 0.2s, background 0.2s;
	font-family: inherit;
	color: var(--c-white);
}
.pdp-step__options--addons .pdp-addon:hover { border-color: var(--c-line-strong); }
.pdp-step__options--addons .pdp-addon--active {
	border-color: var(--c-gold);
	background: linear-gradient(155deg, #1f180a 0%, #0d0a04 100%);
}
.pdp-step__options--addons .pdp-addon:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; }
.pdp-addon__check {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 1px solid var(--c-line-strong);
	display: grid;
	place-items: center;
	color: transparent;
	background: transparent;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.pdp-addon--active .pdp-addon__check {
	background: var(--c-gold);
	border-color: var(--c-gold);
	color: var(--c-black);
}
.pdp-addon__icon {
	color: var(--c-gold);
	margin-bottom: 0.3rem;
	display: flex;
	align-items: center;
}
.pdp-addon__icon img {
	width: 40px;
	height: 40px;
	object-fit: contain;
	display: block;
}
.pdp-addon__name {
	font-family: var(--ff-body);
	font-size: 1rem;
	font-weight: 500;
	color: var(--c-white);
}
.pdp-addon__desc {
	font-family: var(--ff-mono);
	font-size: 10px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--c-mute-2);
	line-height: 1.5;
}
.pdp-addon__price {
	font-family: var(--ff-display);
	font-size: 1.3rem;
	color: var(--c-gold);
	font-weight: 400;
	margin-top: 0.4rem;
}
.pdp-addon__price .woocommerce-Price-amount,
.pdp-addon__price bdi { font-family: inherit; color: inherit; }

/* Compat callout — state-driven background fill + border. Confirmed=green,
   Not-confirmed/Other=amber, Unset=red subtle. Each state declared below. */
.pdp-compat {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 1rem;
	align-items: center;
	padding: 1.25rem 1.5rem;
	margin-top: 1.5rem;
	background: rgba(110,167,110,0.18);
	border: 1px solid rgba(110,167,110,0.5);
	border-left: 3px solid #6ea76e;
	transition: background .25s ease, border-color .25s ease;
}
.pdp-compat__icon {
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	background: rgba(110,167,110,0.28);
	color: #6ea76e;
	border-radius: 50%;
	flex-shrink: 0;
}
.pdp-compat__text {
	color: var(--c-mute);
	font-size: 0.9rem;
	line-height: 1.5;
}
.pdp-compat__text strong { color: var(--c-white); font-weight: 500; }
/* Social proof line (C · v5.24.13) — appears only in MATCH state when the
   selected vehicle's builder count exceeds the threshold. Visually subdued
   (no badge, no emoji); reads as a quiet verifiable fact below the sub copy. */
.pdp-compat__social-proof {
	display: block;
	margin-top: .35rem;
	font-size: .8rem;
	letter-spacing: .01em;
	color: var(--c-gold);
	opacity: .85;
}
.pdp-compat__social-proof[hidden] { display: none; }
.pdp-compat__link {
	font-family: var(--ff-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-gold);
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}
.pdp-compat__link:hover { color: var(--c-white); }

/* Mobile collapse */
@media (max-width: 720px) {
	.pdp-band__head--split { grid-template-columns: 1fr; gap: 1rem; }
	.pdp-step { padding: 1.25rem; }
	.pdp-step__head { grid-template-columns: auto 1fr; row-gap: 0.5rem; }
	.pdp-step__status { grid-column: 1 / -1; justify-self: start; }
	.pdp-step__options--3 { grid-template-columns: 1fr; }
	.pdp-step__options--swatch { grid-template-columns: repeat(3, 1fr); }
	.pdp-step__options--addons { grid-template-columns: 1fr; }
	.pdp-compat {
		grid-template-columns: auto 1fr;
		gap: 0.75rem 1rem;
	}
	.pdp-compat__link { grid-column: 1 / -1; justify-self: start; }
}

/* -----------------------------------------------------------------------------
 * §03 · Band 3 — Your order · Commit 7
 * -------------------------------------------------------------------------- */

/* Cream/ink theme switch — recap on white panel, action on ink panel */
.pdp-band--order {
	background: var(--c-cream);
	color: var(--c-ink);
	border-top: 0;
}
/* .pdp-eyebrow--ink legacy modifier kept for explicit dark-text usage —
 * the canonical inherit-based system above already handles cream/white
 * via parent section color, so this is mostly redundant. */
.pdp-eyebrow--ink { color: var(--c-dark); }
.pdp-eyebrow__dash--ink { background: var(--c-ink-line); }

.pdp-order {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 0;
	border: 1px solid var(--c-ink-line);
	background: var(--c-white);
}
.pdp-order__recap { padding: 2rem; }
.pdp-order__action {
	padding: 2rem;
	background: var(--c-ink);
	color: var(--c-cream);
	display: flex;
	flex-direction: column;
}
.pdp-order__recap-title {
	font-family: var(--ff-display);
	font-size: 1.8rem;
	line-height: 1;
	color: var(--c-ink);
	font-weight: 400;
	margin: 0 0 1.5rem;
}

.pdp-order__lines {
	list-style: none;
	padding: 0;
	margin: 0 0 1.5rem;
}
.pdp-order__lines li {
	display: grid;
	grid-template-columns: 100px 1fr auto;
	gap: 1rem;
	align-items: center;
	padding: 0.85rem 0;
	border-bottom: 1px dashed var(--c-ink-line);
	font-size: 0.92rem;
}
.pdp-order__lines li:last-child { border-bottom: 0; padding-bottom: 0; }
/* Drop dashed bottom on the last item line before the base-kit row — the
   base row's top border already separates them. Avoids dashed + solid stack. */
.pdp-order__lines li:has(+ .pdp-order__line-base) { border-bottom: 0; }
.pdp-order__line-empty .pdp-order__line-val {
	color: var(--c-ink-mute);
	font-style: italic;
}
.pdp-order__line-base {
	padding-top: 1rem !important;
	border-top: 1px solid var(--c-ink-line);
	margin-top: 0.5rem;
}
.pdp-order__line-label {
	font-family: var(--ff-mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(0,0,0,0.5);
}
.pdp-order__line-val {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--c-ink);
	font-weight: 400;
	min-width: 0;
}
.pdp-order__line-price {
	font-family: var(--ff-mono);
	font-size: 11px;
	letter-spacing: 0.04em;
	color: rgba(0,0,0,0.6);
	white-space: nowrap;
}
.pdp-order__line-price .woocommerce-Price-amount,
.pdp-order__line-price bdi { font-family: inherit; color: inherit; font-size: inherit; }
.pdp-order__line-base .pdp-order__line-price {
	color: var(--c-ink);
	font-weight: 500;
	font-family: var(--ff-display);
	font-size: 1.05rem;
}
.pdp-order__swatch {
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 1px solid var(--c-ink-line);
	flex-shrink: 0;
}

.pdp-order__helpers {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--c-ink-line);
}
.pdp-order__helpers a,
.pdp-order__helpers button {
	/* F1 v5.24.14: <button> matches <a> here so the Talk-to-us trigger
	   sits flush with the other helper links. Reset button defaults. */
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0;
	border: 0;
	background: transparent;
	font-family: var(--ff-mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	transition: color 0.2s;
}
.pdp-order__helpers a:hover,
.pdp-order__helpers button:hover,
.pdp-order__helpers button:focus-visible { color: var(--c-gold-secondary); }

/* Action panel (right column, dark) */
.pdp-order__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	margin-bottom: 0.4rem;
}
.pdp-order__price-from {
	width: 100%;
	font-family: var(--ff-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.5);
	margin-bottom: 0.4rem;
}
.pdp-order__price-num {
	font-family: var(--ff-display);
	font-size: clamp(2.6rem, 3.8vw, 3.6rem);
	line-height: 0.95;
	color: var(--c-cream);
	font-weight: 400;
}
.pdp-order__price-num .woocommerce-Price-amount,
.pdp-order__price-num bdi { font-family: inherit; color: inherit; font-size: inherit; }
.pdp-order__price-meta {
	font-family: var(--ff-mono);
	font-size: 11px;
	letter-spacing: 0.04em;
	color: rgba(255,255,255,0.65);
	margin: 0 0 1.5rem;
	line-height: 1.55;
}
.pdp-order__price-meta strong { color: var(--c-cream); font-weight: 500; }

.pdp-order__cta {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.6rem;
	margin-bottom: 1.25rem;
}
.pdp-order__qty {
	display: inline-flex;
	border: 1px solid rgba(255,255,255,0.25);
	background: rgba(255,255,255,0.05);
	height: 52px;
}
.pdp-order__qty button {
	width: 40px;
	background: transparent;
	border: 0;
	color: var(--c-cream);
	font-size: 1.1rem;
	cursor: pointer;
	font-family: inherit;
	transition: background 0.15s;
}
.pdp-order__qty button:hover { background: rgba(255,255,255,0.08); }
.pdp-order__qty button:focus-visible {
	outline: 2px solid var(--c-gold);
	outline-offset: -2px;
}
.pdp-order__qty input {
	width: 40px;
	background: transparent;
	border: 0;
	color: var(--c-cream);
	text-align: center;
	font-family: var(--ff-mono);
	font-size: 0.95rem;
	-moz-appearance: textfield;
}
.pdp-order__qty input::-webkit-outer-spin-button,
.pdp-order__qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.btn-cta-cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	height: 52px;
	padding: 0 1.5rem;
	background: var(--c-cream);
	color: var(--c-ink);
	border: 0;
	font-family: var(--ff-body);
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background 0.2s, color 0.2s, transform 0.15s;
}
.btn-cta-cart:hover { background: var(--c-white); }
.btn-cta-cart:active { transform: translateY(1px); }
.btn-cta-cart:focus-visible {
	outline: 2px solid var(--c-gold);
	outline-offset: 2px;
}
.btn-cta-cart[disabled],
.btn-cta-cart[aria-disabled="true"] {
	background: rgba(255,255,255,0.1);
	color: rgba(255,255,255,0.45);
	cursor: not-allowed;
}
.btn-cta-cart.is-loading {
	pointer-events: none;
	opacity: 0.75;
}
.btn-cta-cart.is-loading::after {
	content: '';
	width: 14px;
	height: 14px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: kata-pdp-spin 0.7s linear infinite;
}
@keyframes kata-pdp-spin { to { transform: rotate(360deg); } }
.btn-cta-cart .woocommerce-Price-amount,
.btn-cta-cart bdi { font-family: inherit; color: inherit; font-size: inherit; }

.pdp-order__trust {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	margin-top: auto;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(255,255,255,0.18);
}
.pdp-order__trust div { display: flex; flex-direction: column; gap: 0.2rem; }
.pdp-order__trust strong {
	font-family: var(--ff-display);
	font-size: 1.4rem;
	color: var(--c-gold);
	font-weight: 400;
}
.pdp-order__trust span {
	font-family: var(--ff-mono);
	font-size: 9px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.55);
}

/* Mobile collapse */
@media (max-width: 720px) {
	.pdp-order { grid-template-columns: 1fr; }
	.pdp-order__recap, .pdp-order__action { padding: 1.25rem; }
	.pdp-order__lines li { grid-template-columns: 90px 1fr auto; gap: 0.75rem; }
	.pdp-order__trust { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
	.pdp-order__cta { grid-template-columns: auto 1fr; }
	.btn-cta-cart { padding: 0 1rem; font-size: 0.85rem; }
}

/* -----------------------------------------------------------------------------
 * §04–§07 · Editorial — about / features / upsell / pause · Commit 9
 * -------------------------------------------------------------------------- */

/* --- Editorial block base ------------------------------------------------- */
.pdp-edit { padding: 5rem var(--gutter, 2rem); }
.pdp-edit__inner { max-width: 1280px; margin: 0 auto; }
.pdp-edit__inner--narrow { max-width: 880px; }
.pdp-edit--cream   { background: var(--c-cream); color: var(--c-ink); }
.pdp-edit--white   { background: var(--c-white, #ffffff); color: var(--c-ink); }
.pdp-edit--dark    { background: var(--c-dark); color: var(--c-white); }

.pdp-edit__head { margin-bottom: 2.5rem; }
.pdp-edit__head--split {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 3rem;
	align-items: end;
}
.pdp-edit__title {
	font-family: var(--ff-display);
	font-size: clamp(2.2rem, 4vw, 3.4rem);
	line-height: 0.92;
	letter-spacing: -0.005em;
	font-weight: 400;
	margin: 0.4rem 0 0;
	max-width: 18ch;
}
.pdp-edit__title em            { font-style: italic; color: var(--c-gold-secondary); }
.pdp-edit--dark .pdp-edit__title em { color: var(--c-gold); }

.pdp-edit__sub {
	font-size: 1rem;
	line-height: 1.55;
	color: var(--c-ink-mute);
	margin: 0.5rem 0 0;
	max-width: 46ch;
	font-weight: 300;
}
.pdp-edit--dark .pdp-edit__sub { color: var(--c-mute); }

/* §04 prose */
.pdp-edit__prose { max-width: 64ch; }
.pdp-edit__prose p {
	font-size: 1.02rem;
	line-height: 1.72;
	color: rgba(26,24,20,0.82);
	margin: 0 0 1.25rem;
	font-weight: 300;
}
.pdp-edit__lead {
	font-size: 1.15rem !important;
	line-height: 1.6 !important;
	color: var(--c-ink) !important;
	font-weight: 400 !important;
}
.pdp-edit__body { }
.pdp-edit__body p {
	font-size: 1.02rem;
	line-height: 1.72;
	color: rgba(26,24,20,0.82);
	margin: 0 0 1.25rem;
	font-weight: 300;
}

/* §04 read-more — native <details> with mockup-faithful divider + arrow */
.pdp-edit__more {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--c-ink-line);
}
.pdp-edit__more-toggle {
	list-style: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.5rem 0;
	font-family: var(--ff-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-ink);
	font-weight: 500;
	transition: color 0.2s, gap 0.3s var(--ease-out);
}
.pdp-edit__more-toggle::-webkit-details-marker { display: none; }
.pdp-edit__more-toggle::marker { content: ''; }
.pdp-edit__more-toggle-text {
	border-bottom: 1px solid var(--c-gold-secondary);
	padding-bottom: 2px;
}
.pdp-edit__more-toggle-arrow {
	font-size: 14px;
	transition: transform 0.3s var(--ease-out);
}
.pdp-edit__more[open] .pdp-edit__more-toggle-arrow { transform: rotate(90deg); }
.pdp-edit__more-toggle:hover { color: var(--c-gold-secondary); gap: 0.85rem; }
.pdp-edit__more-toggle:focus-visible {
	outline: 2px solid var(--c-gold-secondary);
	outline-offset: 4px;
}
.pdp-edit__more .pdp-edit__body {
	margin-top: 1rem;
}

/* §05 features grid */
.pdp-feats {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	border: 1px solid var(--c-line);
}
.pdp-feat {
	padding: 1.75rem 1.5rem;
	border-right: 1px solid var(--c-line);
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	min-height: 180px;
}
.pdp-feat:last-child { border-right: 0; }
.pdp-feat__num {
	font-family: var(--ff-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	color: var(--c-gold);
}
.pdp-feat__icon          { color: var(--c-gold); line-height: 0; }
.pdp-feat__icon svg      { width: 28px; height: 28px; }
.pdp-feat h4 {
	font-family: var(--ff-body);
	font-size: 1rem;
	font-weight: 500;
	color: var(--c-white);
	margin: 0;
}
.pdp-feat p {
	font-size: 0.85rem;
	line-height: 1.55;
	color: var(--c-mute);
	margin: 0;
}

/* §06 editorial upsell cards */
.pdp-upsells {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
}
.pdp-up {
	background: var(--c-white);
	border: 1px solid var(--c-ink-line);
	display: grid;
	grid-template-columns: 200px 1fr;
	overflow: hidden;
}
.pdp-up__img {
	position: relative;
	background: var(--c-dark);
	overflow: hidden;
}
.pdp-up__img img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.pdp-up__img-placeholder { display: block; width: 100%; height: 100%; }
.pdp-up__body {
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}
.pdp-up__cat {
	font-family: var(--ff-mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-ink-mute);
}
.pdp-up__title {
	font-family: var(--ff-display);
	font-size: 1.55rem;
	line-height: 1.05;
	color: var(--c-ink);
	margin: 0;
	font-weight: 400;
}
.pdp-up__title a {
	color: inherit;
	text-decoration: none;
	transition: color .2s var(--ease-out);
}
.pdp-up__title a:hover,
.pdp-up__title a:focus-visible {
	color: var(--c-gold);
}
.pdp-up__desc {
	font-size: 0.9rem;
	line-height: 1.5;
	color: rgba(0,0,0,0.68);
	margin: 0.3rem 0 auto;
	font-weight: 300;
}
.pdp-up__cta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 1rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--c-ink-line);
}
.pdp-up__price {
	font-family: var(--ff-display);
	font-size: 1.55rem;
	color: var(--c-ink);
}
.pdp-up__link {
	padding: 0.55rem 1rem;
	background: var(--c-ink);
	color: var(--c-cream);
	font-family: var(--ff-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: 999px;
	text-decoration: none;
	white-space: nowrap;
}
.pdp-up__link:hover { background: var(--c-dark); color: var(--c-cream); }

/* §06 add-to-build button — bundle action that toggles the wizard add-on. */
.pdp-up__add {
	white-space: nowrap;
	min-height: 36px;
}
.pdp-up__add.is-added {
	background: var(--c-green, #6ea76e);
	border-color: var(--c-green, #6ea76e);
	color: var(--c-white);
}
.pdp-up__add.is-added:hover {
	background: #5e9560;
	border-color: #5e9560;
}
.pdp-up__add:focus-visible {
	outline: 2px solid var(--c-gold-secondary);
	outline-offset: 3px;
}

/* §07 full-bleed pause */
.pdp-pause {
	position: relative;
	height: clamp(300px, 38vw, 540px);
	overflow: hidden;
}
.pdp-pause__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.pdp-pause__caption {
	position: absolute;
	bottom: 1.5rem;
	left: 1.5rem;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.5rem 0.85rem;
	background: rgba(0,0,0,0.55);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	font-family: var(--ff-mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-white);
}
.pdp-pause__icon { color: var(--c-gold); }

/* --- Responsive § 04–07 --------------------------------------------------- */
@media (max-width: 1024px) {
	.pdp-edit__head--split { grid-template-columns: 1fr; gap: 1rem; }
	.pdp-feats { grid-template-columns: repeat(3, 1fr); }
	.pdp-feat:nth-child(3n) { border-right: 0; }
	.pdp-feat { border-bottom: 1px solid var(--c-line); }
	.pdp-feat:nth-last-child(-n+3):first-child,
	.pdp-feat:nth-last-child(-n+3):first-child ~ .pdp-feat { border-bottom: 0; }
}
@media (max-width: 768px) {
	.pdp-edit { padding: 3.5rem var(--gutter, 1.25rem); }
	.pdp-feats { grid-template-columns: 1fr 1fr; }
	.pdp-feat { border-right: 0 !important; border-bottom: 1px solid var(--c-line); }
	.pdp-feat:nth-child(odd) { border-right: 1px solid var(--c-line) !important; }
	.pdp-feat:nth-last-child(-n+2):nth-child(odd),
	.pdp-feat:last-child { border-bottom: 0; }
	.pdp-upsells { grid-template-columns: 1fr; }
	.pdp-up { grid-template-columns: 140px 1fr; }
}
@media (max-width: 520px) {
	.pdp-feats { grid-template-columns: 1fr; }
	.pdp-feat { border-right: 0 !important; border-bottom: 1px solid var(--c-line); }
	.pdp-feat:last-child { border-bottom: 0; }
	.pdp-up { grid-template-columns: 1fr; grid-template-rows: 200px 1fr; }
	.pdp-up__img { position: relative; height: 200px; }
	.pdp-pause { height: 240px; }
	.pdp-pause__caption { font-size: 9px; padding: 0.4rem 0.65rem; }
}

/* -----------------------------------------------------------------------------
 * §08–§11 · Editorial — customize / 3D / suitable / how-to-get · Commit 10
 * -------------------------------------------------------------------------- */

/* §08 customize banner --------------------------------------------------- */
.pdp-edit__inner--banner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: center;
}
.pdp-banner__copy {
	display: flex;
	flex-direction: column;
	max-width: 52ch;
}
.pdp-banner__copy .pdp-edit__title {
	margin-top: 0.4rem;
	max-width: 18ch;
}
.pdp-banner__lede {
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(26,24,20,0.75);
	margin: 1rem 0 1.5rem;
	font-weight: 300;
}
.pdp-banner__ctas {
	display: flex;
	gap: 1rem;
	align-items: center;
	flex-wrap: wrap;
}
.pdp-banner__link {
	font-family: var(--ff-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-ink);
	text-decoration: underline;
	text-decoration-color: var(--c-gold-secondary);
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	font-weight: 500;
	transition: color 0.2s, text-decoration-color 0.2s;
}
.pdp-banner__link:hover { color: var(--c-gold-secondary); text-decoration-color: var(--c-gold-secondary); }
/* Same link inside dark closing or dark sections — use gold */
.pdp-edit--dark .pdp-banner__link { color: var(--c-white); text-decoration-color: var(--c-gold); }
.pdp-edit--dark .pdp-banner__link:hover { color: var(--c-gold); }
.pdp-banner__img {
	position: relative;
	aspect-ratio: 5 / 4;
	overflow: hidden;
	background: var(--c-dark-2);
	/* Bruno 2026-05-09: fine grey border so the §08 customize image reads as
	   a framed editorial photo against the cream section bg, not floating. */
	border: 1px solid rgba(0,0,0,0.12);
}
.pdp-banner__img img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.pdp-banner__img-caption {
	position: absolute;
	bottom: 1rem;
	left: 1rem;
	font-family: var(--ff-mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-white);
	padding: 0.4rem 0.7rem;
	background: rgba(0,0,0,0.55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

/* §09 3D viewer ---------------------------------------------------------- */
.pdp-3d {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--c-dark-2);
	border: 1px solid var(--c-line);
	overflow: hidden;
}
.pdp-3d__iframe,
.pdp-3d__fallback {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.pdp-3d__fallback {
	object-fit: cover;
}
.pdp-3d[data-has-iframe="0"]::after {
	content: "Live 3D viewer · coming v5.7.x";
	position: absolute;
	top: 1rem; left: 1rem;
	font-family: var(--ff-mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-white);
	padding: 0.4rem 0.7rem;
	background: rgba(0,0,0,0.55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
/* Disclaimer overlay — covers the Fusion 360 viewer's ViewCube + design name
   that ship with the iframe (top-left corner). pointer-events: auto absorbs
   clicks so users can't accidentally activate the cube. Sized roughly to the
   default Fusion 360 ViewCube footprint; tunable via --pdp-3d-disclaimer-w/h. */
.pdp-3d__disclaimer {
	position: absolute;
	top: 0;
	left: 0;
	width: var(--pdp-3d-disclaimer-w, clamp(160px, 22%, 240px));
	height: var(--pdp-3d-disclaimer-h, clamp(72px, 16%, 110px));
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.6rem 0.8rem;
	background: rgba(0, 0, 0, 0.78);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-right: 1px solid rgba(255, 255, 255, 0.08);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	pointer-events: auto;
	z-index: 2;
}
.pdp-3d__disclaimer-text {
	margin: 0;
	font-family: var(--ff-mono);
	font-size: 10px;
	line-height: 1.45;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--c-white);
	text-align: center;
}
.pdp-3d__chrome {
	position: absolute;
	inset: auto 1rem 1rem;
	display: flex;
	justify-content: space-between;
	align-items: end;
	gap: 1rem;
	pointer-events: none;
}
.pdp-3d__chrome > * { pointer-events: auto; }
.pdp-3d__tabs {
	display: flex;
	gap: 0.4rem;
	flex-wrap: wrap;
}
.pdp-3d__tab {
	padding: 0.55rem 1rem;
	background: rgba(0,0,0,0.55);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(255,255,255,0.18);
	color: var(--c-white);
	font-family: var(--ff-mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: 999px;
	text-decoration: none;
	cursor: pointer;
	min-height: 36px;
	display: inline-flex;
	align-items: center;
}
.pdp-3d__tab--active {
	background: var(--c-gold);
	border-color: var(--c-gold);
	color: var(--c-black);
}
.pdp-3d__tab:focus-visible {
	outline: 2px solid var(--c-gold);
	outline-offset: 2px;
}
/* Top-left hint — sits flush below the disclaimer overlay (which itself
   pins to top:0/left:0 with a clamped height). Same width as the disclaimer
   so the two reads as a single column. Hidden on mobile entirely. */
.pdp-3d__hint--top {
	position: absolute;
	left: 0;
	top: var(--pdp-3d-disclaimer-h, clamp(72px, 16%, 110px));
	width: var(--pdp-3d-disclaimer-w, clamp(160px, 22%, 240px));
	padding: 0.55rem 0.85rem;
	background: rgba(0, 0, 0, 0.62);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-right: 1px solid rgba(255, 255, 255, 0.08);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	font-family: var(--ff-mono);
	font-size: 10px;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.78);
	text-align: center;
	z-index: 2;
	pointer-events: none;
}

/* Enlarge the active "3D viewer" pill on desktop so it reads as the primary
   surface label (vs the slimmer ghost-style "Install tour" pill next to it). */
@media (min-width: 720px) {
	.pdp-3d__tab--active {
		padding: 0.75rem 1.4rem;
		font-size: 11px;
		min-height: 44px;
		letter-spacing: 0.12em;
	}
}

/* §10 suitable for / brand tabs ------------------------------------------ */
.pdp-suit-match {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 1rem;
	align-items: center;
	padding: 0.85rem 1.25rem;
	background: rgba(110,167,110,0.10);
	border: 1px solid rgba(110,167,110,0.35);
	border-left: 3px solid var(--c-green, #6ea76e);
	margin-bottom: 1.5rem;
}
.pdp-suit-match__icon {
	width: 28px; height: 28px;
	display: grid;
	place-items: center;
	background: rgba(110,167,110,0.2);
	border-radius: 50%;
	color: var(--c-green, #6ea76e);
}
.pdp-suit-match--unset {
	background: rgba(0,0,0,0.04);
	border-color: rgba(0,0,0,0.18);
	border-left-color: var(--c-gold-secondary, #fbb715);
}
.pdp-suit-match__icon--neutral {
	background: rgba(0,0,0,0.06);
	color: var(--c-ink-mute, rgba(0,0,0,0.55));
}
/* Cookie-driven mismatch / other states (Commit B) — amber for both. */
.pdp-suit-match--mismatch,
.pdp-suit-match--other {
	background: rgba(251,183,21,0.10);
	border-color: rgba(251,183,21,0.35);
	border-left-color: var(--c-gold-secondary, #fbb715);
}
.pdp-suit-match--mismatch .pdp-suit-match__icon,
.pdp-suit-match--other    .pdp-suit-match__icon {
	background: rgba(251,183,21,0.18);
	color: var(--c-gold-secondary, #fbb715);
}
/* v5.13.5 — Bruno polish: side-by-side button-vs-link hierarchy. Primary
   reads as a tappable pill (gold outline + no underline + no arrow);
   secondary reads as a quieter underlined link with arrow. Same font
   size so the secondary doesn't look like a "tiny disabled-looking"
   sibling — the difference is shape, not scale.

   v5.13.5 hover-bug fix: previous version used `background: currentColor`
   in the same rule that set `color: var(--c-dark)`. CSS resolves
   currentColor against the COMPUTED color value of the element after
   the cascade — and the cascade here sets color to dark, so currentColor
   also became dark → background dark + text dark + border dark =
   completely black pill. Use explicit --c-gold tokens for hover bg and
   border so they stay independent of the foreground swap. */
.pdp-compat__actions {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.65rem;
	flex-shrink: 0;
}

/* Primary: outlined pill button. Static state uses --c-gold explicitly
   for border + text so hover can swap the foreground to ink without
   collapsing the border into the text colour. */
.pdp-compat__actions .pdp-compat__link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.55rem 0.95rem;
	border: 1px solid var(--c-gold);
	border-radius: 999px;
	color: var(--c-gold);
	background: transparent;
	text-decoration: none !important;
	line-height: 1;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.pdp-compat__actions .pdp-compat__link:hover {
	background: var(--c-gold);
	border-color: var(--c-gold);
	color: var(--c-dark);
}
/* §11 (cream context) — primary picks up ink instead of gold so it
   reads on the cream/light bg. Hover inverts to ink-fill + cream text. */
.pdp-edit--cream .pdp-compat__actions .pdp-compat__link {
	border-color: var(--c-ink);
	color: var(--c-ink);
}
.pdp-edit--cream .pdp-compat__actions .pdp-compat__link:hover {
	background: var(--c-ink);
	border-color: var(--c-ink);
	color: var(--c-cream, #f5f0e8);
}

/* Secondary: text link with underline + arrow. Resets the pill border
   inherited from .pdp-compat__link via the wrapper rule above so the
   shape collapses to plain text. Color inherits from the callout root
   so secondary reads as "alternative", not as a decorated button. */
.pdp-compat__actions .pdp-compat__link--secondary {
	padding: 0;
	border: 0 !important;
	border-radius: 0;
	background: transparent !important;
	color: var(--c-gold);
	text-decoration: underline !important;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	opacity: 0.85;
}
.pdp-edit--cream .pdp-compat__actions .pdp-compat__link--secondary {
	color: var(--c-ink);
}
/* Bruno 2026-05-10: secondary also matches .pdp-compat__link:hover via the
   shared class — inheriting `color: var(--c-dark)` from the primary pill's
   hover and going black. Explicit override here keeps it white in §02
   (dark context) and ink in §11 (cream). */
.pdp-compat__actions .pdp-compat__link--secondary:hover {
	background: transparent !important;
	color: var(--c-white) !important;
	opacity: 1;
}
.pdp-edit--cream .pdp-compat__actions .pdp-compat__link--secondary:hover {
	color: var(--c-ink) !important;
}
.pdp-compat__link--secondary[hidden] { display: none !important; }

/* Mobile: keep buttons side-by-side but span the full callout width
   below the icon+text pair. Bruno reported the previous column-stacked
   layout looked cluttered. Grid rule below makes .pdp-compat 2-col on
   mobile (icon | text); .pdp-compat__actions takes its own row spanning
   both columns, holding the two buttons inline with comfortable gap.
   `flex-wrap: wrap` is the safety net for ultra-narrow viewports where
   two pills + a link won't fit in one row. */
@media (max-width: 720px) {
	.pdp-compat__actions {
		grid-column: 1 / -1;
		justify-self: start;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.85rem;
		padding-top: 0.25rem;
	}
}

/* §02 not-confirmed / other variants — amber tint with a strongly visible
   filled background so the state reads at a glance. */
.pdp-compat--mismatch,
.pdp-compat--other {
	border-color: rgba(251,183,21,0.5) !important;
	border-left: 3px solid var(--c-gold) !important;
	background: rgba(251,183,21,0.18) !important;
}
.pdp-compat--mismatch .pdp-compat__icon,
.pdp-compat--other    .pdp-compat__icon {
	color: var(--c-gold);
	background: rgba(251,183,21,0.28);
}
/* §02 unset — no vehicle picked yet. Subtle red so the call to action reads
   as "needs attention" without being alarming. */
.pdp-compat--unset {
	border-color: rgba(196,60,37,0.5) !important;
	border-left: 3px solid var(--c-warn, #c43c25) !important;
	background: rgba(196,60,37,0.14) !important;
}
.pdp-compat--unset .pdp-compat__icon {
	color: var(--c-warn, #c43c25);
	background: rgba(196,60,37,0.22);
}

/* §02 vehicle detail — 4 optional fields (Make / Model / Year / Trim).
   JS toggles per-field [hidden] based on the compat callout state. The block
   itself is always rendered when the kit advertises pa_vehicle terms. */
.pdp-vehicle-detail {
	margin-top: 0.65rem;
	padding: 1rem 1.15rem 1.1rem;
	border-radius: 14px;
	border: 1px solid rgba(255,255,255,0.08);
	background: rgba(255,255,255,0.025);
}
.pdp-vehicle-detail[hidden] { display: none !important; }
.pdp-vehicle-detail__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.35rem;
}
.pdp-vehicle-detail__eyebrow {
	font-family: var(--ff-mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.65);
}
.pdp-vehicle-detail__optional {
	font-family: var(--ff-mono);
	font-size: 9.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.45);
}
.pdp-vehicle-detail__lede {
	margin: 0 0 0.85rem;
	font-size: 0.85rem;
	line-height: 1.5;
	color: rgba(255,255,255,0.7);
}
.pdp-vehicle-detail__fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.65rem;
}
.pdp-vehicle-detail__field {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}
.pdp-vehicle-detail__field[hidden] { display: none !important; }
.pdp-vehicle-detail__label {
	font-family: var(--ff-mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.55);
}
.pdp-vehicle-detail__field input {
	width: 100%;
	padding: 0.6rem 0.75rem;
	background: rgba(0,0,0,0.25);
	border: 1px solid rgba(255,255,255,0.12);
	border-radius: 8px;
	color: var(--c-white);
	font-family: var(--ff-body);
	font-size: 0.92rem;
	line-height: 1.3;
	transition: border-color 0.18s ease, background 0.18s ease;
}
.pdp-vehicle-detail__field input:focus {
	outline: none;
	border-color: var(--c-gold);
	background: rgba(0,0,0,0.4);
}
@media (max-width: 600px) {
	.pdp-vehicle-detail__fields { grid-template-columns: 1fr; }
}

/* ─── Vehicle drawer (offcanvas, right) ──────────────────────────────────── */
.pdp-veh-drawer {
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
}
.pdp-veh-drawer[hidden] { display: none; }
.pdp-veh-drawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(8,8,8,0.55);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	opacity: 0;
	transition: opacity .25s ease;
	pointer-events: none;
}
.pdp-veh-drawer.is-open .pdp-veh-drawer__backdrop {
	opacity: 1;
	pointer-events: auto;
}
.pdp-veh-drawer__panel {
	position: absolute;
	top: 0; right: 0; bottom: 0;
	width: min(440px, 92vw);
	background: var(--c-dark, #1c1c1c);
	color: var(--c-white);
	border-left: 1px solid rgba(255,255,255,0.08);
	box-shadow: -16px 0 48px rgba(0,0,0,0.4);
	transform: translateX(100%);
	transition: transform .28s cubic-bezier(.22,.8,.36,1);
	display: flex;
	flex-direction: column;
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	pointer-events: auto;
}
.pdp-veh-drawer.is-open .pdp-veh-drawer__panel { transform: translateX(0); }
.pdp-veh-drawer__head {
	display: flex; align-items: center; justify-content: space-between;
	gap: 1rem; margin-bottom: 0.5rem;
}
.pdp-veh-drawer__title {
	font-family: var(--ff-display);
	font-size: clamp(1.5rem, 2.2vw, 1.9rem);
	letter-spacing: 0.01em;
	margin: 0;
}
.pdp-veh-drawer__close {
	display: grid; place-items: center;
	width: 36px; height: 36px;
	background: transparent;
	border: 1px solid rgba(255,255,255,0.14);
	border-radius: 50%;
	color: var(--c-white);
	cursor: pointer;
	transition: background .18s ease, border-color .18s ease;
}
.pdp-veh-drawer__close:hover { background: rgba(255,255,255,0.06); border-color: var(--c-gold); }
.pdp-veh-drawer__lede {
	margin: 0 0 1.25rem;
	font-size: 0.9rem;
	line-height: 1.5;
	color: rgba(255,255,255,0.62);
}
.pdp-veh-drawer__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.65rem;
}
.pdp-veh-drawer__card {
	display: flex; flex-direction: column; align-items: center;
	gap: 0.35rem;
	padding: 0.85rem 0.7rem;
	background: rgba(255,255,255,0.025);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 10px;
	color: var(--c-white);
	font-family: var(--ff-body);
	cursor: pointer;
	transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.pdp-veh-drawer__card:hover {
	background: rgba(254,197,62,0.08);
	border-color: var(--c-gold);
	transform: translateY(-2px);
}
.pdp-veh-drawer__silhouette {
	display: flex; align-items: center; justify-content: center;
	width: 100%; max-width: 119px; height: 48px;
	color: rgba(255,255,255,0.78);
}
.pdp-veh-drawer__silhouette svg {
	display: block; width: auto; height: auto;
	max-width: 100%; max-height: 100%;
}
.pdp-veh-drawer__icon svg {
	width: 32px; height: 32px;
	color: rgba(255,255,255,0.78);
}
.pdp-veh-drawer__name {
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	text-align: center;
}
.pdp-veh-drawer__card--other {
	background: rgba(254,197,62,0.06);
	border-color: rgba(254,197,62,0.4);
}
.pdp-veh-drawer__card--other:hover {
	background: rgba(254,197,62,0.16);
	border-color: var(--c-gold);
}
@media (max-width: 480px) {
	.pdp-veh-drawer__grid { grid-template-columns: 1fr; }
}
body.pdp-veh-drawer-open { overflow: hidden; }

.pdp-suit-match strong {
	display: block;
	color: var(--c-ink);
	font-weight: 500;
	font-size: 0.92rem;
	margin-bottom: 0.1rem;
}
.pdp-suit-match span {
	font-family: var(--ff-mono);
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(0,0,0,0.55);
}
.pdp-suit-match__link {
	font-family: var(--ff-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	transition: color 0.2s, text-decoration-color 0.2s;
	white-space: nowrap;
}
.pdp-suit-match__link:hover { color: var(--c-gold-secondary); text-decoration-color: var(--c-gold-secondary); }

/* Inline prose links inside cream editorial sections (e.g. "Send us a photo →") */
.pdp-edit--cream .pdp-edit__sub a,
.pdp-edit--cream a.pdp-link {
	color: var(--c-ink);
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: var(--c-gold-secondary);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color 0.2s, text-decoration-color 0.2s;
}
.pdp-edit--cream .pdp-edit__sub a:hover,
.pdp-edit--cream a.pdp-link:hover {
	color: var(--c-gold-secondary);
}
/* Same on dark sections — use gold (not gold-secondary) per token rule */
.pdp-edit--dark .pdp-edit__sub a,
.pdp-edit--dark a.pdp-link {
	color: var(--c-white);
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: var(--c-gold);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color 0.2s;
}
.pdp-edit--dark .pdp-edit__sub a:hover,
.pdp-edit--dark a.pdp-link:hover { color: var(--c-gold); }

/* Flat alphabetical chip list — replaces former tab+panel browse (P8 Orne polish). */
.pdp-suit-chips {
	list-style: none;
	padding: 1rem 1.25rem;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	border: 1px solid var(--c-ink-line);
	background: var(--c-white);
}
.pdp-suit-chips li { display: contents; }

.pdp-suit-chip {
	padding: 0.45rem 0.75rem;
	background: rgba(0,0,0,0.04);
	border: 1px solid var(--c-ink-line);
	font-family: var(--ff-mono);
	font-size: 10px;
	letter-spacing: 0.04em;
	color: var(--c-ink);
	text-decoration: none;
	transition: background 0.2s, border-color 0.2s, color 0.2s;
	min-height: 32px;
	display: inline-flex;
	align-items: center;
}
.pdp-suit-chip:hover {
	background: var(--c-ink);
	color: var(--c-cream);
	border-color: var(--c-ink);
}
.pdp-suit-chip--match {
	border-color: var(--c-green, #6ea76e);
	background: rgba(110,167,110,0.10);
	color: var(--c-ink);
	font-weight: 500;
}
.pdp-suit-chip--match::before {
	content: "✓";
	color: var(--c-green, #6ea76e);
	margin-right: 0.4rem;
	font-weight: 700;
}

/* §11 how-to-get steps --------------------------------------------------- */
/* Default (legacy dark inner board) preserved for any back-compat paths.
 * The Custom Kit / kit-anchored PDP variant lives below as `.pdp-howto--cream`
 * (07/05 rework: cards match the cream section, no dark inner board). */
.pdp-howsteps {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border: 1px solid var(--c-ink-line);
	background: var(--c-ink);
	overflow: hidden;
}
.pdp-howsteps[data-step-count="3"] { grid-template-columns: repeat(3, 1fr); }
.pdp-howsteps[data-step-count="2"] { grid-template-columns: repeat(2, 1fr); }
.pdp-howsteps[data-step-count="1"] { grid-template-columns: 1fr; }
.pdp-howstep {
	padding: 1.75rem 1.5rem;
	border-right: 1px solid rgba(255,255,255,0.08);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	color: var(--c-cream);
	min-height: 200px;
}
.pdp-howstep:last-child { border-right: 0; }
.pdp-howstep__num {
	font-family: var(--ff-display);
	font-size: 2.2rem;
	line-height: 1;
	color: var(--c-gold);
	font-weight: 400;
}
.pdp-howstep__title {
	font-family: var(--ff-body);
	font-size: 1.05rem;
	font-weight: 500;
	color: var(--c-cream);
	margin: 0;
}
.pdp-howstep__body {
	font-size: 0.88rem;
	line-height: 1.55;
	color: rgba(241, 237, 227, 0.78);
	margin: 0;
	font-weight: 300;
}
.pdp-howstep__tag {
	margin-top: auto;
	padding-top: 0.85rem;
	font-family: var(--ff-mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(241, 237, 227, 0.5);
	border-top: 1px solid rgba(255,255,255,0.1);
}

/* §11 cream variant (07/05 rework) — cards inherit the section's cream
 * background, with ink text + a subtle outline + gold accent on numerals.
 * Activated by `.pdp-howto--cream` modifier on the parent <section>. */
.pdp-howto--cream .pdp-howsteps {
	background: transparent;
	border: 1px solid rgba(26,24,20,0.12);
	border-radius: 10px;
	gap: 0;
}
.pdp-howto--cream .pdp-howstep {
	color: var(--c-ink);
	border-right: 1px solid rgba(26,24,20,0.08);
	background: rgba(255,255,255,0.45);
}
.pdp-howto--cream .pdp-howstep:hover { background: rgba(255,255,255,0.65); transition: background .25s ease; }
.pdp-howto--cream .pdp-howstep__num {
	color: var(--c-gold-secondary);
}
.pdp-howto--cream .pdp-howstep__title {
	color: var(--c-ink);
}
.pdp-howto--cream .pdp-howstep__body {
	color: rgba(26,24,20,0.7);
}
.pdp-howto--cream .pdp-howstep__tag {
	color: rgba(26,24,20,0.55);
	border-top: 1px solid rgba(26,24,20,0.1);
}

/* --- Responsive § 08–11 -------------------------------------------------- */
@media (max-width: 1024px) {
	.pdp-edit__inner--banner { grid-template-columns: 1fr; gap: 2rem; }
	.pdp-banner__img { aspect-ratio: 16 / 10; }
	.pdp-howsteps,
	.pdp-howsteps[data-step-count="3"] { grid-template-columns: repeat(2, 1fr); }
	.pdp-howstep { border-right: 0 !important; border-bottom: 1px solid rgba(255,255,255,0.08); }
	.pdp-howstep:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.08) !important; }
	.pdp-howstep:nth-last-child(-n+2):nth-child(odd),
	.pdp-howstep:last-child { border-bottom: 0; }
	.pdp-howto--cream .pdp-howstep { border-bottom: 1px solid rgba(26,24,20,0.08); }
	.pdp-howto--cream .pdp-howstep:nth-child(odd) { border-right: 1px solid rgba(26,24,20,0.08) !important; }
}
@media (max-width: 768px) {
	.pdp-3d { aspect-ratio: 4 / 3; }
	.pdp-3d__chrome { inset: auto 0.65rem 0.65rem; flex-direction: column; align-items: stretch; }
	/* Mobile: drop both the top-left hint and the "3D viewer" active pill —
	   only the secondary "Install tour" tab remains visible. */
	.pdp-3d__hint--top { display: none; }
	.pdp-3d__tab--active { display: none; }
	.pdp-suit-match { grid-template-columns: auto 1fr; }
	.pdp-suit-match__link { grid-column: 1 / -1; justify-self: end; padding-top: 0.4rem; }
	.pdp-suit-tabs li { flex: 1 1 50%; border-bottom: 1px solid var(--c-ink-line); }
	.pdp-suit-tabs li:nth-child(2n) { border-right: 0; }
}
@media (max-width: 520px) {
	.pdp-howsteps,
	.pdp-howsteps[data-step-count="3"],
	.pdp-howsteps[data-step-count="2"] { grid-template-columns: 1fr; }
	.pdp-howstep { border-right: 0 !important; border-bottom: 1px solid rgba(255,255,255,0.08); min-height: 0; }
	.pdp-howstep:last-child { border-bottom: 0; }
	.pdp-howto--cream .pdp-howstep { border-bottom: 1px solid rgba(26,24,20,0.08); }
	.pdp-banner__lede { font-size: 0.95rem; }
}

/* -----------------------------------------------------------------------------
 * §13–§15 · Editorial — FAQ / related / closing · Commit 11
 * §12 accessories was removed per Orne 30/04 (de-duplicated; §06 upsell remains the single accessories surface).
 * -------------------------------------------------------------------------- */

/* §13 FAQ ----------------------------------------------------------------- */
.pdp-faq {
	list-style: none;
	padding: 0;
	margin: 0;
	border-top: 1px solid var(--c-ink-line);
}
.pdp-faq-item { border-bottom: 1px solid var(--c-ink-line); }
.pdp-faq-details > summary {
	list-style: none;
	cursor: pointer;
}
.pdp-faq-details > summary::-webkit-details-marker { display: none; }
.pdp-faq-q {
	width: 100%;
	padding: 1.25rem 0;
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 1.25rem;
	align-items: center;
	color: var(--c-ink);
	min-height: 44px;
}
.pdp-faq-q__num {
	font-family: var(--ff-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	color: var(--c-gold-secondary);
	font-weight: 500;
}
.pdp-faq-q__text {
	font-family: var(--ff-body);
	font-size: 1.05rem;
	font-weight: 400;
	line-height: 1.4;
}
.pdp-faq-details[open] .pdp-faq-q__text { font-weight: 500; }
.pdp-faq-q__chev {
	display: grid;
	place-items: center;
	transition: transform 0.2s;
	color: var(--c-ink-mute, rgba(0,0,0,0.55));
}
.pdp-faq-details[open] .pdp-faq-q__chev { transform: rotate(180deg); }
.pdp-faq-details > summary:focus-visible {
	outline: 2px solid var(--c-gold-secondary);
	outline-offset: -2px;
}
.pdp-faq-a {
	padding: 0 0 1.5rem 4rem;
	font-size: 0.98rem;
	line-height: 1.65;
	color: rgba(26,24,20,0.78);
	font-weight: 300;
	max-width: 64ch;
}
.pdp-faq-a p { margin: 0 0 0.85rem; }
.pdp-faq-a p:last-child { margin: 0; }

/* §14 related kits -------------------------------------------------------- */
.pdp-rel {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
}
.pdp-rel-card {
	background: var(--c-dark-2);
	border: 1px solid var(--c-line);
	transition: border-color 0.2s, transform 0.2s;
	display: flex;
	flex-direction: column;
}
.pdp-rel-card:hover { border-color: var(--c-gold); transform: translateY(-2px); }
.pdp-rel-card__img {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--c-dark);
	display: block;
}
.pdp-rel-card__img-tag,
.pdp-rel-card__img img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.pdp-rel-card__body {
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}
.pdp-rel-card__cat {
	font-family: var(--ff-mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-gold);
}
.pdp-rel-card__name {
	font-family: var(--ff-display);
	font-size: 1.4rem;
	line-height: 1;
	color: var(--c-white);
	margin: 0.2rem 0 0;
	font-weight: 400;
}
.pdp-rel-card__name a { color: inherit; text-decoration: none; }
.pdp-rel-card__name a:hover { color: var(--c-gold); }
.pdp-rel-card__sub {
	font-size: 0.85rem;
	color: var(--c-mute);
	margin-bottom: 0.4rem;
	line-height: 1.4;
}
.pdp-rel-card__price {
	font-family: var(--ff-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	color: var(--c-white);
	padding-top: 0.5rem;
	margin-top: auto;
	border-top: 1px solid var(--c-line);
}
.pdp-rel-card__price .woocommerce-Price-amount { color: inherit; font-family: inherit; }

/* §15 closing ------------------------------------------------------------- */
.pdp-edit--closing { padding: 5rem var(--gutter, 2rem) 6rem; text-align: center; }
.pdp-closing {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	align-items: center;
}
.pdp-closing__title {
	max-width: 22ch;
	margin: 0;
}
.pdp-closing__body {
	font-size: 1rem;
	line-height: 1.55;
	color: rgba(26,24,20,0.75);
	max-width: 56ch;
	font-weight: 300;
	margin: 0;
}
.pdp-closing__ctas {
	display: flex;
	gap: 1.5rem;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 1rem;
}

/* §15 closing CTA — gold glow sweep mirroring FC build-teaser pattern.
 * IO-paused by default; runs when `.is-visible` lands via kata-reveal.
 * Reduced motion: animation disabled, button still visually distinct. */
.pdp-closing__cta {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.pdp-closing__cta-label { position: relative; z-index: 1; }
.pdp-closing__cta-glow {
	position: absolute;
	inset: -50% -10%;
	background: radial-gradient(circle, rgba(254,197,62,0.45), transparent 60%);
	opacity: 0;
	pointer-events: none;
	z-index: 0;
	transform: translateX(-100%);
	animation: pdpClosingGlowSweep 4s ease-in-out infinite;
	animation-play-state: paused;
}
.pdp-edit--closing.is-visible .pdp-closing__cta-glow { animation-play-state: running; }
@keyframes pdpClosingGlowSweep {
	0%   { opacity: 0; transform: translateX(-100%); }
	40%  { opacity: 1; }
	60%  { opacity: 1; }
	100% { opacity: 0; transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
	.pdp-closing__cta-glow { animation: none; }
}

/* --- Responsive § 13–15 -------------------------------------------------- */
@media (max-width: 1024px) {
	.pdp-rel { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
	.pdp-faq-a { padding-left: 2.5rem; }
	.pdp-rel-card__name { font-size: 1.2rem; }
}
@media (max-width: 520px) {
	.pdp-rel { grid-template-columns: 1fr; }
	.pdp-faq-q { gap: 0.75rem; }
	.pdp-faq-a { padding-left: 0; }
	.pdp-edit--closing { padding: 3.5rem var(--gutter, 1.25rem) 4rem; }
}

/* -----------------------------------------------------------------------------
 * Sticky mini buy bar · Commit 11
 * -------------------------------------------------------------------------- */

.pdp-stickybar {
	position: fixed;
	top: var(--nav-h, 78px);
	left: 0;
	right: 0;
	z-index: 99; /* below the global nav (z:100), above page content */
	background: rgba(15,15,15,0.92);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--c-line);
	/* Hide fully above the header — translate by own height + nav height. */
	transform: translateY(calc(-100% - var(--nav-h, 78px)));
	/* visibility:hidden removes the inner buttons from the tab order while
	   off-screen; delayed 0.32s so it only applies after the slide-out. */
	visibility: hidden;
	transition: transform 0.32s var(--ease-out, cubic-bezier(0.22,1,0.36,1)), visibility 0s 0.32s;
	pointer-events: none;
}
.pdp-stickybar[data-state="visible"] {
	transform: translateY(0);
	visibility: visible;
	transition: transform 0.32s var(--ease-out, cubic-bezier(0.22,1,0.36,1)), visibility 0s 0s;
	pointer-events: auto;
}
.pdp-stickybar__inner {
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: 1.5rem;
	align-items: center;
	padding: 0.65rem var(--gutter, 1.5rem);
}
.pdp-stickybar__product {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	min-width: 0;
}
.pdp-stickybar__thumb {
	width: 44px;
	height: 44px;
	background: var(--c-dark);
	border: 1px solid var(--c-line);
	flex-shrink: 0;
	position: relative;
	overflow: hidden;
}
.pdp-stickybar__thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.pdp-stickybar__meta {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
}
.pdp-stickybar__title {
	font-family: var(--ff-display);
	font-size: 1.1rem;
	line-height: 1.05;
	color: var(--c-white);
	font-weight: 400;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.pdp-stickybar__config {
	font-family: var(--ff-mono);
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-mute);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.pdp-stickybar__sw {
	display: inline-block;
	width: 10px;
	height: 10px;
	border: 1px solid var(--c-line-strong);
	vertical-align: middle;
	margin-right: 0.3rem;
}
.pdp-stickybar__price {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	text-align: right;
}
.pdp-stickybar__price-num {
	font-family: var(--ff-display);
	font-size: 1.4rem;
	line-height: 1;
	color: var(--c-white);
	font-weight: 400;
	white-space: nowrap;
}
.pdp-stickybar__price-num .woocommerce-Price-amount { color: inherit; font-family: inherit; }
.pdp-stickybar__price-meta {
	font-family: var(--ff-mono);
	font-size: 9px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-mute-2, rgba(255,255,255,0.55));
	white-space: nowrap;
}
.pdp-stickybar__cta {
	padding: 0.85rem 1.6rem;
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	min-height: 48px;
	box-shadow: 0 6px 18px rgba(254, 197, 62, 0.35), 0 0 0 1px rgba(254, 197, 62, 0.6);
	animation: kata-sticky-pulse 2.6s ease-in-out infinite;
}
.pdp-stickybar__cta:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 24px rgba(254, 197, 62, 0.5), 0 0 0 1px rgba(254, 197, 62, 0.85);
}
@keyframes kata-sticky-pulse {
	0%, 100% { box-shadow: 0 6px 18px rgba(254, 197, 62, 0.35), 0 0 0 1px rgba(254, 197, 62, 0.6); }
	50%      { box-shadow: 0 8px 22px rgba(254, 197, 62, 0.55), 0 0 0 2px rgba(254, 197, 62, 0.9); }
}
/* Incomplete state: keep the pulse so the CTA stays "siempre presente",
 * but tone the gold a touch and keep cursor pointer (clickable — scrolls
 * to §02 Configure). No animation override here — pulse stays on. */
.pdp-stickybar__cta.is-incomplete,
.pdp-stickybar__cta[aria-disabled="true"] {
	opacity: 0.92;
	cursor: pointer;
}
.pdp-stickybar__cta[disabled] {
	opacity: 0.55;
	cursor: not-allowed;
	animation: none;
}
@media (prefers-reduced-motion: reduce) {
	.pdp-stickybar__cta { animation: none; }
}

@media (max-width: 768px) {
	.pdp-stickybar__inner {
		grid-template-columns: auto 1fr auto;
		gap: 0.75rem;
		padding: 0.55rem var(--gutter, 1.25rem);
	}
	.pdp-stickybar__product { gap: 0.6rem; }
	.pdp-stickybar__thumb { width: 38px; height: 38px; }
	.pdp-stickybar__title { font-size: 0.95rem; }
	.pdp-stickybar__config { display: none; }
	.pdp-stickybar__price { display: none; }
	.pdp-stickybar__cta {
		/* Tighter on mobile: smaller padding, explicit centering of the label,
		 * 44px min-height keeps WCAG tap target. */
		padding: 0.55rem 0.85rem;
		font-size: 0.7rem;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		line-height: 1.1;
		white-space: nowrap;
	}
}
@media (prefers-reduced-motion: reduce) {
	.pdp-stickybar { transition: none; }
}

/* -----------------------------------------------------------------------------
 * Lightbox overlay (fallback for browsers without Fullscreen API) · Commit 12
 * -------------------------------------------------------------------------- */

.pdp-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.92);
	z-index: 100;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 4rem 2rem;
}
.pdp-lightbox.is-open { display: flex; }
.pdp-lightbox__img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}
.pdp-lightbox__close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 44px;
	height: 44px;
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.18);
	color: var(--c-white);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	border-radius: 999px;
	display: grid;
	place-items: center;
}
.pdp-lightbox__close:hover { background: rgba(255,255,255,0.12); }

/* Swipe affordance — left/right chevrons centred over the image. Shown only
   when the lightbox holds more than one image (added in JS). Clicking scrolls
   the track one slide; finger-swipe still works independently. (v5.29.0) */
.pdp-lightbox__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 48px;
	height: 48px;
	background: rgba(0,0,0,0.45);
	border: 1px solid rgba(255,255,255,0.28);
	color: var(--c-white);
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
	border-radius: 999px;
	display: grid;
	place-items: center;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: background 0.2s, border-color 0.2s;
}
.pdp-lightbox__arrow:hover {
	background: var(--c-gold);
	border-color: var(--c-gold);
	color: var(--c-black);
}
.pdp-lightbox__arrow--prev { left: 1rem; }
.pdp-lightbox__arrow--next { right: 1rem; }
.pdp-lightbox__close:focus-visible,
.pdp-lightbox__arrow:focus-visible {
	outline: 2px solid var(--c-gold);
	outline-offset: 2px;
}
@media (max-width: 720px) {
	.pdp-lightbox__arrow { width: 42px; height: 42px; font-size: 26px; }
	.pdp-lightbox__arrow--prev { left: 0.5rem; }
	.pdp-lightbox__arrow--next { right: 0.5rem; }
}

/* Swipeable lightbox — scroll-snap track of full-size images (v5.29.0). */
.pdp-lightbox__track {
	display: flex;
	width: 100%;
	height: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.pdp-lightbox__track::-webkit-scrollbar { display: none; }
.pdp-lightbox__slide {
	flex: 0 0 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	scroll-snap-align: center;
	scroll-snap-stop: always;
}
.pdp-lightbox__slide .pdp-lightbox__img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* In-page video player overlay — 16:9 frame for YouTube/Vimeo/local (v5.29.0). */
.pdp-lightbox--video .pdp-lightbox__player {
	width: min(92vw, 1100px);
	aspect-ratio: 16 / 9;
	background: #000;
}
.pdp-lightbox--video .pdp-lightbox__player iframe,
.pdp-lightbox--video .pdp-lightbox__player video {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* Fullscreen API styling: when cinema is :fullscreen, prevent thumb strip + chrome
 * eating real estate. Uses :fullscreen + :-webkit-full-screen for older Safari. */
.pdp-cinema:fullscreen,
.pdp-cinema:-webkit-full-screen {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #000;
}
.pdp-cinema:fullscreen .pdp-cinema__media,
.pdp-cinema:-webkit-full-screen .pdp-cinema__media {
	aspect-ratio: auto;
	width: 100%;
	height: 100%;
}
.pdp-cinema:fullscreen .pdp-cinema__media img,
.pdp-cinema:-webkit-full-screen .pdp-cinema__media img {
	object-fit: contain;
}
.pdp-cinema:fullscreen .pdp-cinema__thumbs,
.pdp-cinema:-webkit-full-screen .pdp-cinema__thumbs,
.pdp-cinema:fullscreen .pdp-cinema__title-bar,
.pdp-cinema:-webkit-full-screen .pdp-cinema__title-bar { display: none; }

/* ====================================================================
   §12 Testimonials per category (F7 · v5.24.14)
   Reuses the home /.testimonials__*/ BEM for carousel infrastructure;
   here we override the cream-themed card + nav to fit the PDP dark band.
   ==================================================================== */
.pdp-testimonials__head {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: end;
	gap: 1.5rem 2rem;
	margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.pdp-testimonials__head .pdp-eyebrow,
.pdp-testimonials__head .pdp-testimonials__title {
	grid-column: 1;
}
.pdp-testimonials__rating {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: end;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
	font-size: 0.9rem;
	color: rgba(255,255,255,0.65);
	text-align: right;
}
.pdp-testimonials__stars {
	font-size: 1.25rem;
	color: var(--c-gold);
	letter-spacing: 3px;
}
.pdp-testimonials__rating strong { color: var(--c-white); font-weight: 500; }

@media (max-width: 640px) {
	.pdp-testimonials__head {
		grid-template-columns: 1fr;
	}
	.pdp-testimonials__rating {
		grid-column: 1;
		grid-row: auto;
		align-items: flex-start;
		text-align: left;
	}
}

/* Dark-section overrides for the shared .testimonial card. Scoped via
   .pdp-testimonials so the home section keeps its cream styling. */
.pdp-testimonials .testimonial {
	background: var(--c-dark-2);
	border-color: rgba(255,255,255,0.08);
}
.pdp-testimonials .testimonial:hover {
	border-color: rgba(254,197,62,0.35);
	box-shadow: 0 12px 32px -12px rgba(0,0,0,0.4);
}
.pdp-testimonials .testimonial::before {
	color: var(--c-gold);
	opacity: 0.30;
}
.pdp-testimonials .testimonial blockquote {
	color: var(--c-cream);
}
.pdp-testimonials .testimonial figcaption {
	border-top-color: rgba(255,255,255,0.08);
}
.pdp-testimonials .testimonial__name { color: var(--c-white); }
.pdp-testimonials .testimonial__meta { color: rgba(255,255,255,0.55); }
.pdp-testimonials .testimonial__stars { color: var(--c-gold); }

.pdp-testimonials .testimonials__nav {
	border-color: rgba(255,255,255,0.18);
	color: var(--c-cream);
}
.pdp-testimonials .testimonials__nav:hover {
	border-color: var(--c-gold);
	color: var(--c-gold);
	background: rgba(254,197,62,0.06);
}
.pdp-testimonials .testimonials__dot {
	background: rgba(255,255,255,0.18);
}
.pdp-testimonials .testimonials__dot:hover {
	background: rgba(255,255,255,0.35);
}
.pdp-testimonials .testimonials__dot[aria-selected="true"] {
	background: var(--c-gold);
}

/* ====================================================================
   F1 — Talk-to-us modal (v5.24.14)
   Tertiary CTA + centered modal dialog. Trigger lives in .pdp-compat__
   actions (always visible). Modal mirrors the vehicle-drawer pattern
   (open/close transition + focus trap + ESC + body lock).
   ==================================================================== */

/* ─── Modal container + backdrop ────────────────────────────────────── */
.pdp-talk-modal {
	position: fixed;
	inset: 0;
	z-index: 200; /* above nav (100), peer of vehicle-drawer */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1rem, 4vw, 2rem);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.28s var(--ease-out, ease-out), visibility 0s 0.28s;
}
.pdp-talk-modal[hidden] { display: none; }
.pdp-talk-modal.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.28s var(--ease-out, ease-out), visibility 0s;
}
.pdp-talk-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.55);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	cursor: pointer;
}

/* Body lock while modal open — prevents scroll-through behind the dialog. */
body.pdp-talk-modal-open { overflow: hidden; }

/* ─── Panel ─────────────────────────────────────────────────────────── */
.pdp-talk-modal__panel {
	position: relative;
	width: min(560px, 100%);
	max-height: calc(100vh - 4rem);
	overflow-y: auto;
	background: var(--c-dark-2);
	color: var(--c-cream);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 18px;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	box-shadow: 0 24px 60px rgba(0,0,0,0.5), 0 4px 12px rgba(0,0,0,0.3);
	transform: translateY(12px);
	transition: transform 0.32s var(--ease-out, ease-out);
}
.pdp-talk-modal.is-open .pdp-talk-modal__panel {
	transform: translateY(0);
}
.pdp-talk-modal__panel:focus-visible {
	outline: 2px solid var(--c-gold);
	outline-offset: 4px;
}

.pdp-talk-modal__head {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 1rem;
	align-items: start;
	margin-bottom: 1.5rem;
}
.pdp-talk-modal__eyebrow {
	display: inline-block;
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-gold);
	margin-bottom: 0.4rem;
}
.pdp-talk-modal__title {
	font-family: var(--ff-display, 'Bebas Neue', sans-serif);
	font-size: clamp(1.6rem, 3vw, 2rem);
	margin: 0 0 0.6rem;
	line-height: 1.1;
	letter-spacing: 0.01em;
	color: var(--c-white);
}
.pdp-talk-modal__lede {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.5;
	color: rgba(255,255,255,0.7);
}
.pdp-talk-modal__lede strong { color: var(--c-white); font-weight: 500; }

.pdp-talk-modal__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(255,255,255,0.18);
	border-radius: 999px;
	background: transparent;
	color: var(--c-cream);
	cursor: pointer;
	transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}
.pdp-talk-modal__close:hover,
.pdp-talk-modal__close:focus-visible {
	border-color: var(--c-gold);
	color: var(--c-gold);
	background: rgba(254,197,62,0.06);
}

/* ─── Body — FF form or mailto fallback ─────────────────────────────── */
.pdp-talk-modal__form-wrap .ff-default,
.pdp-talk-modal__form-wrap .frm-fluent-form {
	--ff-color: var(--c-white);
	--ff-bg: transparent;
}
.pdp-talk-modal__form-wrap .ff-default label,
.pdp-talk-modal__form-wrap .frm-fluent-form label {
	color: var(--c-cream);
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	margin-bottom: 0.4rem;
}
.pdp-talk-modal__form-wrap .ff-default input[type="text"],
.pdp-talk-modal__form-wrap .ff-default input[type="email"],
.pdp-talk-modal__form-wrap .ff-default input[type="tel"],
.pdp-talk-modal__form-wrap .ff-default textarea,
.pdp-talk-modal__form-wrap .frm-fluent-form input[type="text"],
.pdp-talk-modal__form-wrap .frm-fluent-form input[type="email"],
.pdp-talk-modal__form-wrap .frm-fluent-form input[type="tel"],
.pdp-talk-modal__form-wrap .frm-fluent-form textarea {
	background: var(--c-dark-3) !important;
	border: 1px solid rgba(255,255,255,0.10) !important;
	color: var(--c-white) !important;
	border-radius: 10px !important;
	padding: 0.75rem 0.95rem !important;
	font-size: 0.95rem !important;
}
.pdp-talk-modal__form-wrap .ff-default input:focus,
.pdp-talk-modal__form-wrap .ff-default textarea:focus,
.pdp-talk-modal__form-wrap .frm-fluent-form input:focus,
.pdp-talk-modal__form-wrap .frm-fluent-form textarea:focus {
	border-color: var(--c-gold) !important;
	background: var(--c-dark-4) !important;
	outline: none !important;
}
.pdp-talk-modal__form-wrap .ff-default textarea,
.pdp-talk-modal__form-wrap .frm-fluent-form textarea {
	min-height: 110px;
	resize: vertical;
}
.pdp-talk-modal__form-wrap .ff-btn-submit,
.pdp-talk-modal__form-wrap button[type="submit"] {
	background: var(--c-gold) !important;
	color: var(--c-dark) !important;
	border: 1px solid var(--c-gold) !important;
	border-radius: 999px !important;
	padding: 0.85rem 1.8rem !important;
	font-family: var(--ff-display, 'Bebas Neue', sans-serif) !important;
	font-size: 1rem !important;
	letter-spacing: 0.08em !important;
}
.pdp-talk-modal__form-wrap .ff-btn-submit:hover,
.pdp-talk-modal__form-wrap button[type="submit"]:hover {
	background: var(--c-white) !important;
	border-color: var(--c-white) !important;
}
.pdp-talk-modal__form-wrap .ff-message-success {
	background: rgba(254,197,62,0.10) !important;
	border: 1px solid var(--c-gold) !important;
	color: var(--c-cream) !important;
	border-radius: 10px !important;
	padding: 1rem 1.2rem !important;
}

.pdp-talk-modal__fallback {
	padding: 1.2rem 1.4rem;
	background: var(--c-dark-3);
	border: 1px solid rgba(254,197,62,0.30);
	border-radius: 12px;
}
.pdp-talk-modal__fallback p { margin: 0 0 1rem; color: var(--c-cream); }
.pdp-talk-modal__fallback a { color: var(--c-gold); }

@media (prefers-reduced-motion: reduce) {
	.pdp-talk-modal,
	.pdp-talk-modal__panel {
		transition: none !important;
	}
}

/* ====================================================================
   Accessory PDP variant (Bruno parallel · v5.24.14)
   Lean single-product layout for products in product_cat = accessories.
   Hero (gallery left + buy right) → details → related → closing → talk.
   ==================================================================== */
.kata-pdp--accessory {
	background: var(--c-dark);
	color: var(--c-cream);
}

/* ─── Hero: gallery + buy panel split ───────────────────────────────── */
.acc-pdp__hero {
	/* Top padding clears the fixed global nav (var(--nav-h)) + comfortable
	   spacing. v5.24.14 fix — earlier render was kissing the nav bar. */
	padding: calc(var(--nav-h, 80px) + clamp(2rem, 4vw, 3rem)) clamp(1rem, 3vw, 2.5rem) clamp(3rem, 6vw, 5rem);
}
.acc-pdp__hero-inner {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	max-width: 1240px;
	margin: 0 auto;
	align-items: start;
}
@media (max-width: 880px) {
	.acc-pdp__hero-inner { grid-template-columns: 1fr; }
}

/* ─── Gallery ───────────────────────────────────────────────────────── */
.acc-pdp__gallery {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.acc-pdp__gallery-main {
	margin: 0;
	background: var(--c-dark-2);
	border: 1px solid rgba(255,255,255,0.05);
	border-radius: 14px;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	display: flex;
	align-items: center;
	justify-content: center;
}
.acc-pdp__gallery-main img,
.acc-pdp__gallery-main-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 1.5rem;
	box-sizing: border-box;
	transition: opacity .25s ease;
}
.acc-pdp__gallery-empty {
	background: var(--c-dark-2);
	border: 1px solid rgba(255,255,255,0.05);
	border-radius: 14px;
	aspect-ratio: 16 / 9;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255,255,255,0.25);
}

.acc-pdp__gallery-thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
	gap: 0.6rem;
}
.acc-pdp__thumb {
	display: block;
	padding: 0;
	background: var(--c-dark-2);
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 10px;
	cursor: pointer;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	transition: border-color .2s, transform .2s;
}
.acc-pdp__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.acc-pdp__thumb:hover {
	border-color: rgba(254,197,62,0.45);
	transform: translateY(-1px);
}
.acc-pdp__thumb.is-active {
	border-color: var(--c-gold);
}

/* ─── Buy panel ─────────────────────────────────────────────────────── */
.acc-pdp__buy {
	position: sticky;
	top: clamp(80px, 10vw, 100px);
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	padding: clamp(1.5rem, 3vw, 2rem);
	background: var(--c-dark-2);
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 16px;
}
@media (max-width: 880px) {
	.acc-pdp__buy { position: static; }
}

.acc-pdp__chip {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	padding: 0.35rem 0.85rem;
	background: rgba(254,197,62,0.10);
	border: 1px solid rgba(254,197,62,0.35);
	border-radius: 999px;
	font-family: var(--ff-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-gold);
	text-decoration: none !important;
	transition: background-color .2s, border-color .2s;
}
.acc-pdp__chip:hover {
	background: rgba(254,197,62,0.18);
	border-color: var(--c-gold);
}

.acc-pdp__title {
	font-family: var(--ff-display, 'Bebas Neue', sans-serif);
	font-weight: 400;
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	line-height: 1.05;
	letter-spacing: 0.01em;
	margin: 0;
	color: var(--c-white);
}

.acc-pdp__price {
	font-family: var(--ff-display, 'Bebas Neue', sans-serif);
	font-size: clamp(1.4rem, 3vw, 1.8rem);
	color: var(--c-gold);
	line-height: 1;
}
.acc-pdp__price .woocommerce-Price-currencySymbol {
	margin-right: 2px;
	font-size: 0.85em;
	opacity: 0.85;
}
/* Sale price (Bruno 06/2026): de-emphasise the struck old price as a neutral
   muted strike (was inheriting gold → muddy) and keep the sale price gold +
   prominent so the discount reads clearly. */
.acc-pdp__price del {
	color: rgba(255,255,255,0.5);
	font-size: 0.62em;
	font-weight: 400;
	margin-right: 0.45em;
	text-decoration: line-through;
}
.acc-pdp__price del .woocommerce-Price-amount { color: inherit; }
.acc-pdp__price ins { text-decoration: none; color: var(--c-gold); }

.acc-pdp__short {
	font-size: 0.95rem;
	line-height: 1.55;
	color: rgba(255,255,255,0.78);
}
.acc-pdp__short p { margin: 0 0 0.6rem; }
.acc-pdp__short p:last-child { margin: 0; }

.acc-pdp__actions {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	margin-top: 0.25rem;
}
.acc-pdp__cart-form { margin: 0; }
.acc-pdp__qty-row {
	display: flex;
	gap: 0.5rem;
	align-items: stretch;
}
.acc-pdp__qty-row .quantity {
	flex: 0 0 auto;
	display: flex;
}
.acc-pdp__qty-row .quantity input.qty {
	width: 58px;
	height: 44px;
	padding: 0 .6rem;
	background: var(--c-dark-3);
	border: 1px solid rgba(255,255,255,0.10);
	color: var(--c-white);
	border-radius: 999px;
	font-size: 0.95rem;
	text-align: center;
	-moz-appearance: textfield;
}
.acc-pdp__qty-row .quantity input.qty::-webkit-outer-spin-button,
.acc-pdp__qty-row .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none; margin: 0;
}
.acc-pdp__qty-row .quantity input.qty:focus {
	border-color: var(--c-gold);
	outline: none;
}
.acc-pdp__cart-btn {
	flex: 1 1 auto;
	/* Override .btn--lg sizing for this dense buy-row context — feels right
	   alongside a 44px qty input, not towering over it. v5.24.14 fix. */
	min-height: 44px !important;
	height: 44px !important;
	padding: 0 1.4rem !important;
	font-size: 0.95rem !important;
	letter-spacing: 0.08em !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
}

.acc-pdp__out-of-stock {
	margin: 0;
	padding: 0.85rem 1rem;
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.10);
	border-radius: 10px;
	font-size: 0.9rem;
	color: var(--c-cream);
}

.acc-pdp__talk {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--c-cream);
	font-family: var(--ff-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 4px;
	cursor: pointer;
	opacity: 0.75;
	align-self: flex-start;
	transition: color .2s, opacity .2s;
}
.acc-pdp__talk:hover,
.acc-pdp__talk:focus-visible {
	color: var(--c-gold);
	opacity: 1;
}

.acc-pdp__meta {
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 1.1rem 0 0;
	border-top: 1px solid rgba(255,255,255,0.06);
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}
.acc-pdp__meta li {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.85rem;
	color: rgba(255,255,255,0.65);
}
.acc-pdp__meta svg { color: var(--c-gold); flex-shrink: 0; }

/* ─── Details (cream) ──────────────────────────────────────────────── */
.acc-pdp__details {
	background: var(--c-cream, #f5f0e8);
	color: var(--c-ink, #1a1a1a);
	padding: clamp(3rem, 7vw, 5rem) clamp(1rem, 3vw, 2.5rem);
}
.acc-pdp__details-inner {
	max-width: 760px;
	margin: 0 auto;
}
.acc-pdp__details-head { margin-bottom: 1.6rem; }
.acc-pdp__details-body {
	font-size: 1rem;
	line-height: 1.65;
	color: var(--c-ink);
}
.acc-pdp__details-body p { margin: 0 0 1rem; }
.acc-pdp__details-body p:last-child { margin: 0; }
.acc-pdp__details-body h2,
.acc-pdp__details-body h3 {
	font-family: var(--ff-display, 'Bebas Neue', sans-serif);
	font-weight: 400;
	letter-spacing: 0.01em;
	color: var(--c-ink);
	margin: 1.6rem 0 0.6rem;
}
.acc-pdp__details-body h2 { font-size: 1.6rem; }
.acc-pdp__details-body h3 { font-size: 1.25rem; }
.acc-pdp__details-body ul,
.acc-pdp__details-body ol { padding-left: 1.25rem; margin: 0 0 1rem; }
.acc-pdp__details-body li { margin: 0.25rem 0; }

/* ─── Related accessories (dark) ───────────────────────────────────── */
.acc-pdp__related {
	background: var(--c-dark);
	padding: clamp(3rem, 7vw, 5rem) clamp(1rem, 3vw, 2.5rem);
}
.acc-pdp__related-inner { max-width: 1240px; margin: 0 auto; }
.acc-pdp__related-head { margin-bottom: 2rem; }
.acc-pdp__related-title {
	font-family: var(--ff-display, 'Bebas Neue', sans-serif);
	font-weight: 400;
	font-size: clamp(1.4rem, 3vw, 1.8rem);
	margin: 0.5rem 0 0;
	color: var(--c-white);
}

.acc-pdp__related-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
}
@media (max-width: 880px) { .acc-pdp__related-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .acc-pdp__related-grid { grid-template-columns: 1fr; } }

.acc-pdp__related-card {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: 1rem;
	background: var(--c-dark-2);
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 12px;
	text-decoration: none !important;
	color: inherit;
	transition: border-color .2s, transform .2s;
}
.acc-pdp__related-card:hover {
	border-color: rgba(254,197,62,0.45);
	transform: translateY(-2px);
}
.acc-pdp__related-img {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	background: var(--c-dark-3);
	border-radius: 8px;
	overflow: hidden;
	color: rgba(255,255,255,0.25);
}
.acc-pdp__related-img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 0.5rem;
	box-sizing: border-box;
}
.acc-pdp__related-name {
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--c-white);
	line-height: 1.3;
}
.acc-pdp__related-price {
	font-family: var(--ff-display, 'Bebas Neue', sans-serif);
	font-size: 1.05rem;
	color: var(--c-gold);
	line-height: 1;
}
/* Sale on a related-product chip: same treatment as the main price — old price
   struck + muted, sale price gold. Previously unstyled (full-size strike +
   underlined <ins>). Bruno 06/2026. */
.acc-pdp__related-price del {
	color: rgba(255,255,255,0.45);
	font-size: 0.72em;
	font-weight: 400;
	margin-right: 0.35em;
	text-decoration: line-through;
}
.acc-pdp__related-price del .woocommerce-Price-amount { color: inherit; }
.acc-pdp__related-price ins { text-decoration: none; color: var(--c-gold); }
.acc-pdp__related-foot {
	margin-top: 2rem;
	text-align: center;
}

/* ─── Lightbox (zoom-in on main gallery image) ─────────────────────── */
.acc-pdp__lightbox {
	position: fixed;
	inset: 0;
	z-index: 220;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1rem, 3vw, 2rem);
	opacity: 0;
	visibility: hidden;
	transition: opacity .24s ease, visibility 0s .24s;
}
.acc-pdp__lightbox[hidden] { display: none; }
.acc-pdp__lightbox.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity .24s ease, visibility 0s;
}
.acc-pdp__lightbox-backdrop {
	position: absolute; inset: 0;
	background: rgba(0,0,0,0.85);
	cursor: zoom-out;
}
.acc-pdp__lightbox-img {
	position: relative;
	max-width: min(100%, 1100px);
	max-height: 88vh;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 8px;
	box-shadow: 0 24px 60px rgba(0,0,0,0.6);
	transform: scale(.97);
	transition: transform .24s ease;
}
.acc-pdp__lightbox.is-open .acc-pdp__lightbox-img { transform: scale(1); }
.acc-pdp__lightbox-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255,255,255,0.30);
	background: rgba(0,0,0,0.55);
	color: var(--c-white);
	border-radius: 999px;
	cursor: pointer;
	z-index: 2;
	transition: background-color .2s, border-color .2s;
}
.acc-pdp__lightbox-close:hover,
.acc-pdp__lightbox-close:focus-visible {
	background: var(--c-gold);
	color: var(--c-dark);
	border-color: var(--c-gold);
}
body.acc-pdp-lightbox-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.acc-pdp__lightbox,
	.acc-pdp__lightbox-img { transition: none !important; }
}

/* ───────────────────────────────────────────────────────────────────────
   Enquiry-only landing form (v5.49.0 · Orne 2026-06-15 part 2)
   Cream band that replaces the configure wizard + order summary for
   exclusive "From … (enquiry)" designs. The Fluent Form inherits the
   theme's global FF skin; this only frames the band.
   ─────────────────────────────────────────────────────────────────────── */
.pdp-enquiry {
	background: var(--c-cream);
	padding: clamp(48px, 7vw, 104px) 0;
}
.pdp-enquiry__inner {
	max-width: 780px;
	margin: 0 auto;
	padding: 0 var(--gutter);
}
.pdp-enquiry__head {
	text-align: center;
	margin: 0 auto clamp(28px, 4vw, 48px);
	max-width: 640px;
}
.pdp-enquiry .pdp-eyebrow { justify-content: center; }
.pdp-enquiry__title {
	font-family: var(--ff-display, 'Bebas Neue', sans-serif);
	font-weight: 400;
	font-size: clamp(2rem, 4.5vw, 3.4rem);
	line-height: 1.02;
	letter-spacing: 0.01em;
	color: var(--c-dark);
	margin: 0.4em 0 0;
}
.pdp-enquiry__lede {
	margin: 1rem auto 0;
	max-width: 56ch;
	color: var(--c-ink-soft, #555);
	font-size: 1.02rem;
	line-height: 1.6;
}
.pdp-enquiry__fallback {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
	color: var(--c-ink-soft, #555);
}
.pdp-enquiry__fallback a { color: var(--c-dark); text-decoration: underline; }

/* Fluent Form skin (v5.50.0) — dark-2 panel on the cream band, mirroring the
   Custom Kit form (.ck-brief__form). That skin lives in custom-kit.css, which
   isn't loaded on the PDP, so the form would otherwise render with Fluent
   Forms' default look on cream (poor contrast). Dark panel also lets the photo
   dropzone (upload.css, built for dark bg) sit in without colour overrides. */
.pdp-enquiry__form {
	max-width: 720px;
	margin: 0 auto;
	background: var(--c-dark-2);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 16px;
	padding: clamp(22px, 3vw, 38px);
}
.pdp-enquiry__form input[type="text"],
.pdp-enquiry__form input[type="email"],
.pdp-enquiry__form input[type="tel"],
.pdp-enquiry__form input[type="url"],
.pdp-enquiry__form input[type="number"],
.pdp-enquiry__form input[type="date"],
.pdp-enquiry__form select,
.pdp-enquiry__form textarea,
.pdp-enquiry__form .ff-el-form-control {
	background: rgba(255, 255, 255, 0.05) !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	color: var(--c-white) !important;
	border-radius: 8px !important;
	font-family: var(--ff-body) !important;
	font-size: 0.95rem !important;
	padding: 0.85rem 1rem !important;
	transition: border-color 0.2s ease, background 0.2s ease;
	box-shadow: none !important;
	width: 100%;
}
.pdp-enquiry__form textarea { min-height: 130px; resize: vertical; }
.pdp-enquiry__form input:focus,
.pdp-enquiry__form select:focus,
.pdp-enquiry__form textarea:focus,
.pdp-enquiry__form .ff-el-form-control:focus {
	outline: none !important;
	border-color: var(--c-gold) !important;
	background: rgba(255, 255, 255, 0.08) !important;
}
.pdp-enquiry__form input::placeholder,
.pdp-enquiry__form textarea::placeholder { color: rgba(255, 255, 255, 0.4); }
.pdp-enquiry__form label,
.pdp-enquiry__form .ff-el-input--label label,
.pdp-enquiry__form .ff_form_label {
	color: var(--c-cream) !important;
	font-family: var(--ff-body) !important;
	font-size: 0.85rem !important;
	font-weight: 500 !important;
	letter-spacing: 0.04em !important;
	margin-bottom: 0.4rem !important;
	display: block;
}
.pdp-enquiry__form .ff-el-input--label .text-danger,
.pdp-enquiry__form .ff-el-is-required > label::after { color: var(--c-gold) !important; }
.pdp-enquiry__form .ff-el-help-message,
.pdp-enquiry__form .ff-message-success,
.pdp-enquiry__form .help-block {
	color: rgba(255, 255, 255, 0.65) !important;
	font-size: 0.85rem;
	margin-top: 0.4rem;
}
.pdp-enquiry__form .text-danger,
.pdp-enquiry__form .error { color: #ff8080 !important; font-size: 0.85rem; }
.pdp-enquiry__form input[type="checkbox"],
.pdp-enquiry__form input[type="radio"] { accent-color: var(--c-gold); }
.pdp-enquiry__form button[type="submit"],
.pdp-enquiry__form .ff-btn-submit,
.pdp-enquiry__form .ff-btn.ff-btn-submit {
	background: var(--c-gold) !important;
	color: var(--c-dark) !important;
	border: none !important;
	border-radius: 100px !important;
	padding: 0.95rem 2.5rem !important;
	font-family: var(--ff-display) !important;
	font-size: 1rem !important;
	font-weight: 400 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease !important;
	box-shadow: none !important;
}
.pdp-enquiry__form button[type="submit"]:hover,
.pdp-enquiry__form .ff-btn-submit:hover,
.pdp-enquiry__form .ff-btn.ff-btn-submit:hover {
	background: var(--c-white) !important;
	color: var(--c-dark) !important;
	transform: translateY(-2px);
}