/*
 * Showroom 360° (template-parts/home/showroom.php, assets/js/home-showroom.js).
 * Desktop (1024+): one pinned studio. The stage (canvas, poster, orbit ring, hotspots) fills the whole box;
 * the heading sits top left, the price card on the right, the product chips along the bottom.
 * Below 1024: a column — heading, toggle, stage, night image, chips, card.
 * Jour / Nuit: the studio sky cross-fades to night and every piece of chrome follows.
 */

.showroom.section--band { padding-block: 0; background: none; }
.showroom [hidden] { display: none !important; }
.showroom {
	--sr-sky: #F3F5F7;               /* the turntable frames' own ground: the stage blends into it */
	--sr-night: #080B11;
	--sr-chip-w: 140px;
	--sr-card-w: clamp(300px, 24vw, 340px);
	position: relative;
	isolation: isolate;
	color: var(--ink);
}

/* ---------- The studio box ---------- */
.showroom__pin {
	position: relative;
	height: calc(100svh - var(--header-tight));
	min-height: 660px;
	max-height: 980px;
	overflow: hidden;
}

/* Scroll story (desktop pointer; home-showroom.js sets .is-story): the studio sticks under the header while the
   section runs 1.5 screens past it, and the scrub turns the product a full 360°. Sticky, never position: fixed. */
.showroom.is-story .showroom__pin { position: sticky; top: var(--header-tight); }
.showroom.is-story::after { content: ""; display: block; height: 150vh; }

/* Sky: a mist cyclorama by day (light from above, a floor below), deep blue-black by night. */
.showroom__sky, .showroom__sky > span { position: absolute; inset: 0; }
.showroom__sky { z-index: 0; pointer-events: none; }
.showroom__sky-day {
	background:
		radial-gradient(70% 55% at 50% 0%, rgb(255 255 255 / 0.85), rgb(255 255 255 / 0) 70%),
		linear-gradient(180deg, rgb(16 24 40 / 0) 62%, rgb(16 24 40 / 0.045) 100%),
		var(--sr-sky);
}
.showroom__sky-night {
	opacity: 0;
	background:
		radial-gradient(60% 55% at var(--sr-fx, 50%) var(--sr-fy, 52%), #1A2231 0%, rgb(26 34 49 / 0) 70%),
		linear-gradient(180deg, rgb(255 255 255 / 0) 60%, rgb(255 255 255 / 0.03) 100%),
		var(--sr-night);
	transition: opacity var(--dur-3) var(--ease-in);
}
.showroom[data-light="night"] .showroom__sky-night { opacity: 1; transition: opacity var(--dur-4) var(--ease-out); }
/* The big 360° behind the product, as in the comp: outlined type, a strong backdrop that never carries text contrast.
   It sits in the stage under the ring and the product, drifting with the turn. */
.showroom__stage::before {
	content: "360°";
	position: absolute; z-index: 0; left: var(--sr-gcx, 50%); top: var(--sr-gcy, 40%);
	font-family: var(--font-display); font-weight: 700; font-size: var(--sr-ghost, clamp(14rem, 25vw, 25rem)); line-height: 0.74; letter-spacing: -0.03em;
	color: rgb(255 255 255 / 0.6);
	-webkit-text-stroke: 2.5px rgb(16 24 40 / 0.12);
	paint-order: stroke fill;
	transform: translate3d(calc(-50% + var(--sr-drift, 0px)), -50%, 0);
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--dur-4) var(--ease-out), color var(--dur-4) var(--ease-out), -webkit-text-stroke-color var(--dur-4) var(--ease-out);
}
/* Desktop: the numeral stays whole, degree sign included, left of the buy card at every width. Its right edge stops
   64 px short of the card (16 px of air plus the 48 px the turn can drift it), so it slides left of the product's
   centre when the room runs out; from 1024 to about 1200 px it also shrinks to fit. 2.28 em is the set's width. */
@media (min-width: 1024px) {
	.showroom__stage::before {
		--sr-ghost-end: calc((100% + min(100% - 2 * var(--gutter), var(--page-max))) / 2 - var(--sr-card-w) - 64px);
		font-size: clamp(14rem, min(25vw, 40.5vw - 182px), 25rem);
		left: min(calc(var(--sr-gcx, 50%) - 1.14em), calc(var(--sr-ghost-end) - 2.28em));
		transform: translate3d(var(--sr-drift, 0px), -50%, 0);
	}
}
.showroom:is([data-mode="3d"], [data-mode="turntable"]) .showroom__stage::before { opacity: 1; }
.showroom[data-light="night"] .showroom__stage::before { color: rgb(255 255 255 / 0.018); -webkit-text-stroke-color: rgb(196 212 240 / 0.13); }

/* ---------- Stage ---------- */
.showroom__stage {
	position: absolute; inset: 0; z-index: 1;
	touch-action: pan-y;
	user-select: none; -webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
}
.showroom[data-mode="3d"] .showroom__stage, .showroom[data-mode="turntable"] .showroom__stage { cursor: grab; }
.showroom.is-dragging .showroom__stage { cursor: grabbing; }

/* The square the turntable frames (and the 3D camera) are framed in; JS sets its box. */
.showroom__square {
	position: absolute; z-index: 2;
	left: var(--sr-sx, 50%); top: var(--sr-sy, 8%);
	width: var(--sr-s, min(70vh, 44vw)); aspect-ratio: 1;
	translate: var(--sr-tx, -50%) 0;
	pointer-events: none;
	transition: opacity var(--dur-4) var(--ease-out);
}
.showroom__square > img, .showroom__square > canvas {
	position: absolute; inset: 0; width: 100%; height: 100%;
	-webkit-mask-image: radial-gradient(ellipse 52% 50% at 50% 50%, #000 84%, transparent 100%);
	mask-image: radial-gradient(ellipse 52% 50% at 50% 50%, #000 84%, transparent 100%);
}
.showroom__poster { object-fit: cover; transition: opacity var(--dur-4) var(--ease-out), filter var(--dur-3) var(--ease-out); }
.showroom__poster--still { object-fit: contain; padding: 12%; -webkit-mask-image: none; mask-image: none; filter: drop-shadow(var(--shadow-rest)); }
/* The turntable canvas covers the stage: the plinth, the frame's contact shadow and the product's matte are drawn in it. */
.showroom__tt { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; display: block; pointer-events: none; opacity: 0; transition: opacity var(--dur-4) var(--ease-out); }
.showroom[data-tt="on"]:not([data-mode="3d"]) .showroom__tt { opacity: 1; }
.showroom[data-tt="on"] .showroom__poster { opacity: 0; transition-delay: 60ms; }
/* The night render is never shown on its own: the turntable canvas composes it over the night plinth. */
.showroom__nightframe { display: none; }
/* Night before the turntable is ready: the poster dims (the canvas composes its own night). */
.showroom[data-light="night"]:not([data-mode="3d"]) .showroom__poster { filter: brightness(0.34) saturate(0.7) contrast(1.06); }
.showroom__glow {
	position: absolute; left: var(--sr-gx, 30%); top: var(--sr-gy, 50%);
	width: 26%; aspect-ratio: 1; translate: -50% -50%;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgb(255 236 204 / 0.95), rgb(255 196 128 / 0.45) 35%, rgb(255 170 90 / 0) 100%);
	mix-blend-mode: screen;
	opacity: 0; scale: 0.6;
	transition: opacity var(--dur-3) var(--ease-out), scale var(--dur-3) var(--ease-out);
}
.showroom[data-light="night"]:not([data-mode="3d"]):not(.has-nightframe) .showroom__glow.is-on { opacity: 1; scale: 1; }

.showroom__canvas, .showroom__snap {
	position: absolute; inset: 0; width: 100%; height: 100%;
	display: block; pointer-events: none;
}
.showroom__canvas { z-index: 3; opacity: 0; transition: opacity var(--dur-4) var(--ease-out); }
.showroom[data-mode="3d"] .showroom__canvas { opacity: 1; }
.showroom[data-mode="3d"] .showroom__square { opacity: 0; }
.showroom__snap { z-index: 4; opacity: 0; }

/* Orbit ring: drawn by JS in stage pixels. The back half sits under the product, the front half over it. */
.showroom__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; transition: opacity var(--dur-3) var(--ease-out); }
.showroom__ring--back { z-index: 1; }
.showroom__ring--front { z-index: 5; }
.showroom__ring .sr-track { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }
.showroom__ring--back .sr-track { stroke-opacity: 0.35; }
.showroom__ring .sr-minor { fill: none; stroke: var(--accent); stroke-width: 1; stroke-opacity: 0.45; }
.showroom__ring .sr-major { fill: none; stroke: var(--accent); stroke-width: 1.75; stroke-linecap: round; }
.showroom__ring text { font-family: var(--font-display); font-size: 13px; font-weight: 500; fill: var(--muted); font-variant-numeric: tabular-nums; text-anchor: middle; dominant-baseline: middle; }
.showroom[data-light="night"] .showroom__ring text { fill: var(--on-ink-muted); }
.showroom.is-swapping .showroom__ring, .showroom.is-swapping .showroom__hots { opacity: 0; transition-duration: var(--dur-1); }
.showroom[data-mode="still"] .showroom__ring, .showroom[data-mode="still"] .showroom__hint { display: none; }

/* ---------- Hotspots ---------- */
.showroom__hots { position: absolute; inset: 0; z-index: 6; margin: 0; padding: 0; list-style: none; pointer-events: none; transition: opacity var(--dur-3) var(--ease-out); }
.showroom__hot {
	position: absolute; left: 0; top: 0;
	width: 0; height: 0;
	transform: translate3d(var(--x, -999px), var(--y, -999px), 0);
	opacity: 1;
	visibility: visible;
	transition: opacity var(--dur-2) var(--ease-out), visibility 0s linear 0s;
}
/* A hotspot facing away (or not placed yet, at -999px) leaves the tab order once it has faded: focusing it would
   scroll the page to where it is parked. The spec rows still reach every hotspot. */
.showroom__hot.is-away { opacity: 0; visibility: hidden; transition: opacity var(--dur-2) var(--ease-out), visibility 0s linear var(--dur-2); }
.showroom__hot.is-away .showroom__hot-btn { pointer-events: none; }
.showroom__hot-btn {
	position: absolute; left: -22px; top: -22px;
	width: 44px; height: 44px; padding: 0;
	display: grid; place-items: center;
	background: none; border: 0; border-radius: 50%;
	cursor: pointer; pointer-events: auto;
}
.showroom__hot-btn:focus-visible { outline: none; }
.showroom__hot-btn:focus-visible .showroom__hot-dot { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--accent); }
.showroom__hot-dot {
	position: relative;
	width: 16px; height: 16px; border-radius: 50%;
	background: var(--paper);
	box-shadow: inset 0 0 0 2px var(--accent), 0 4px 10px -2px rgb(16 24 40 / 0.35);
	transition: background-color var(--dur-2) var(--ease-out), scale var(--dur-2) var(--ease-spring), box-shadow var(--dur-2) var(--ease-out);
}
.showroom__hot-dot::after {
	content: ""; position: absolute; inset: -6px; border-radius: 50%;
	border: 2px solid var(--accent); opacity: 0;
}
.showroom__hot.is-lit .showroom__hot-dot { background: var(--accent); box-shadow: inset 0 0 0 3px var(--paper), 0 0 0 1px rgb(16 130 254 / 0.25), 0 6px 14px -4px rgb(16 82 200 / 0.55); }
.showroom__hot.is-lit .showroom__hot-dot::after { animation: sr-pulse 2.4s var(--ease-out) infinite; }
.showroom__hot.is-active .showroom__hot-dot { scale: 1.2; }
@media (hover: hover) { .showroom__hot-btn:hover .showroom__hot-dot { scale: 1.2; } }
@keyframes sr-pulse {
	0% { opacity: 0.55; scale: 0.7; }
	70%, 100% { opacity: 0; scale: 1.7; }
}
.showroom__hot-label {
	position: absolute; left: var(--lx, 24px); top: var(--ly, -18px);
	display: flex; align-items: center;
	padding: 9px 16px;
	font-family: var(--font-body); font-weight: 700; font-size: 0.9375rem; line-height: 1.15; white-space: nowrap;
	color: var(--ink);
	background: var(--paper);
	border-radius: var(--r-pill);
	box-shadow: 0 10px 24px -12px rgb(16 24 40 / 0.35), 0 0 0 1px rgb(16 24 40 / 0.05);
	opacity: 0;
	clip-path: inset(0 0 0 100% round var(--r-pill));
	transition: opacity var(--dur-2) var(--ease-in), clip-path var(--dur-2) var(--ease-in);
	pointer-events: none;
}
/* The label unrolls from its leader's end: a right-hand label from its left edge, and so on. */
.showroom__hot[data-side="r"] .showroom__hot-label { clip-path: inset(0 100% 0 0 round var(--r-pill)); }
.showroom__hot[data-side="u"] .showroom__hot-label { clip-path: inset(100% 0 0 0 round var(--r-pill)); }
.showroom__hot[data-side="d"] .showroom__hot-label { clip-path: inset(0 0 100% 0 round var(--r-pill)); }
.showroom__hot.is-labelled .showroom__hot-label { opacity: 1; clip-path: inset(0 0 0 0 round var(--r-pill)); transition: opacity var(--dur-2) var(--ease-out) 120ms, clip-path var(--dur-3) var(--ease-out-expo) 120ms; }
.showroom__hot.is-active .showroom__hot-label { box-shadow: 0 10px 24px -12px rgb(16 24 40 / 0.35), 0 0 0 1.5px var(--accent); }
/* A narrow stage with no room for one line: the label wraps to two (JS sets its max-width). */
.showroom__hot.is-wrap .showroom__hot-label { width: max-content; white-space: normal; text-wrap: balance; border-radius: var(--r-sm); }
.showroom__hot.is-wrap.is-labelled .showroom__hot-label { clip-path: inset(0 0 0 0 round var(--r-sm)); }

/* Leader lines: dot to label, drawn outward from the dot (one SVG under the dots, in stage pixels). */
.showroom__leads { position: absolute; inset: 0; z-index: 6; width: 100%; height: 100%; overflow: visible; pointer-events: none; transition: opacity var(--dur-3) var(--ease-out); }
.showroom__leads path {
	fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
	stroke-dasharray: 1; stroke-dashoffset: 1;
	transition: stroke-dashoffset var(--dur-2) var(--ease-in);
}
.showroom__leads path.is-on { stroke-dashoffset: 0; transition: stroke-dashoffset var(--dur-3) var(--ease-out); }
.showroom.is-swapping .showroom__leads { opacity: 0; transition-duration: var(--dur-1); }

/* ---------- Dial: the blue handle on the ring's front, the degree readout, step buttons ---------- */
.showroom__dial {
	position: absolute; left: 0; top: 0; z-index: 7;
	width: 0; height: 0;
	transform: translate3d(var(--hx, 50vw), var(--hy, 80%), 0);
	transition: opacity var(--dur-3) var(--ease-out);
}
.showroom__handle {
	position: absolute; left: -24px; top: -24px;
	width: 48px; height: 48px; border-radius: 50%;
	display: grid; place-items: center;
	color: var(--on-action); background: var(--accent);
	box-shadow: 0 0 0 6px rgb(16 130 254 / 0.16), 0 10px 22px -6px rgb(16 82 200 / 0.6);
	cursor: grab; touch-action: none;
	transition: box-shadow var(--dur-2) var(--ease-out), scale var(--dur-2) var(--ease-spring);
}
.showroom__handle .icon { width: 22px; height: 22px; rotate: var(--sr-spin, 0deg); }
@media (hover: hover) { .showroom__handle:hover { scale: 1.06; box-shadow: 0 0 0 9px rgb(16 130 254 / 0.18), 0 12px 24px -6px rgb(16 82 200 / 0.6); } }
.showroom__handle:active { cursor: grabbing; scale: 0.96; }
.showroom__handle:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink), 0 10px 22px -6px rgb(16 82 200 / 0.6); }
.showroom__deg {
	position: absolute; left: 0; top: 30px;
	translate: -50% 0;
	min-width: 4ch; text-align: center;
	font-size: var(--text-base); font-weight: 600; color: var(--ink);
	transition: color var(--dur-3) var(--ease-out);
}
.showroom[data-light="night"] .showroom__deg { color: var(--on-ink); }
.showroom__step {
	position: absolute; top: -22px;
	width: 44px; height: 44px; padding: 0;
	display: none; place-items: center;
	color: var(--ink); background: var(--paper);
	border: 1px solid var(--hairline); border-radius: 50%;
	box-shadow: 0 6px 14px -8px rgb(16 24 40 / 0.35);
	cursor: pointer;
	transition: background-color var(--dur-1) var(--ease-out), scale var(--dur-2) var(--ease-spring);
}
.showroom__step .icon { width: 20px; height: 20px; }
.showroom__step[data-sr-step="-1"] { right: 44px; }
.showroom__step[data-sr-step="1"] { left: 44px; }
@media (hover: hover) { .showroom__step:hover { background: var(--mist); } }
.showroom__step:active { scale: 0.94; }
.showroom__step:disabled { opacity: 0.4; cursor: not-allowed; }
/* Steps where turning by hand is not the main way: touch, reduced motion, no WebGL. */
.showroom.has-steps .showroom__step { display: grid; }
.showroom[data-mode="still"] .showroom__dial { display: none; }

.showroom__hint {
	position: absolute; left: 0; top: 0; z-index: 7;
	margin: 0;
	display: inline-flex; align-items: center; gap: 8px;
	transform: translate3d(var(--hintx, -999px), var(--hinty, 0px), 0);
	translate: -100% -50%;
	font-size: var(--text-sm); font-weight: 700; color: var(--ink-2); white-space: nowrap;
	pointer-events: none;
	transition: opacity var(--dur-3) var(--ease-out), color var(--dur-3) var(--ease-out);
}
.showroom__hint .icon { width: 20px; height: 20px; color: var(--accent); animation: sr-nudge 2.2s var(--ease-in-out) infinite; }
.showroom__hint.is-gone { opacity: 0; }
.showroom[data-light="night"] .showroom__hint { color: var(--on-ink-2); }
@keyframes sr-nudge { 0%, 100% { translate: -3px 0; } 50% { translate: 3px 0; } }

.showroom__webgl { --btn-h: 44px; position: absolute; z-index: 8; right: var(--gutter); top: var(--s-4); }
.showroom__webgl .icon { width: 18px; height: 18px; color: var(--accent); }

.showroom__loading {
	position: absolute; z-index: 8; left: var(--sr-sx, 50%); top: calc(var(--sr-sy, 10%) + var(--s-4));
	translate: -50% 0;
	margin: 0; padding: 8px 14px;
	display: inline-flex; align-items: center; gap: 10px;
	font-size: var(--text-xs); font-weight: 700; color: var(--ink-2);
	background: rgb(255 255 255 / 0.86); border-radius: var(--r-pill);
	box-shadow: 0 6px 16px -10px rgb(16 24 40 / 0.4);
	opacity: 0; transition: opacity var(--dur-2) var(--ease-out);
}
.showroom__loading.is-on { opacity: 1; }
.showroom__loading-bar { width: 64px; height: 3px; border-radius: 2px; background: var(--hairline); overflow: hidden; }
.showroom__loading-bar > span { display: block; width: 100%; height: 100%; background: var(--accent); transform-origin: left; scale: var(--p, 0.04) 1; transition: scale var(--dur-2) var(--ease-out); }

/* ---------- Layout layer (heading, card, chips) ---------- */
.showroom__inner {
	position: relative; z-index: 3;
	height: 100%;
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--sr-card-w);
	grid-template-rows: minmax(0, 1fr) auto;
	column-gap: var(--s-6);
	padding-block: clamp(28px, 5.5vh, 56px) clamp(14px, 2.6vh, 28px);
	pointer-events: none;
}
.showroom__head { grid-column: 1; grid-row: 1; align-self: start; position: relative; max-width: 36rem; }
.showroom__title { margin: 0; font-size: clamp(2.25rem, 1.45rem + 2.4vw, 3.375rem); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); text-wrap: balance; transition: color var(--dur-3) var(--ease-out); }
.showroom__lead { display: grid; margin: var(--s-4) 0 0; max-width: 32ch; font-size: var(--text-md); line-height: 1.45; color: var(--ink-2); text-wrap: pretty; transition: color var(--dur-3) var(--ease-out); }
.showroom__lead > span { grid-area: 1 / 1; transition: opacity var(--dur-3) var(--ease-out), translate var(--dur-3) var(--ease-out); }
.showroom__lead-night { opacity: 0; translate: 0 6px; }
.showroom[data-light="night"][data-kind="colour"] .showroom__lead-day { opacity: 0; translate: 0 -6px; }
.showroom[data-light="night"][data-kind="colour"] .showroom__lead-night { opacity: 1; translate: 0 0; transition-delay: 120ms; }
.showroom__light { margin-top: var(--s-5); pointer-events: auto; }
.showroom .showroom__light .segmented__opt { min-height: 44px; padding: 0 1.35em; font-size: var(--text-base); }
.showroom .showroom__light .segmented__opt .icon { width: 19px; height: 19px; }

.showroom[data-light="night"] .showroom__title { color: var(--on-ink); }
.showroom[data-light="night"] .showroom__lead { color: var(--on-ink-2); }
.showroom[data-light="night"] .showroom__light { background: rgb(255 255 255 / 0.06); border-color: var(--ink-line); box-shadow: none; }
.showroom[data-light="night"] .showroom__light .segmented__opt { color: var(--on-ink-2); }
@media (hover: hover) { .showroom[data-light="night"] .showroom__light .segmented__opt:hover { color: var(--on-ink); background: rgb(255 255 255 / 0.08); } }
.showroom[data-light="night"] .showroom__light .segmented__opt[aria-pressed="true"] { background: var(--paper); color: var(--ink); }
.showroom .showroom__light .segmented__opt:focus-visible { outline-offset: 2px; }

/* The real Longse night image, under the toggle (desktop) or under the stage (below 1024). */
.showroom__nightshot {
	position: absolute; left: 0; top: calc(100% + var(--s-6));
	width: clamp(180px, 19vw, 300px);
	margin: 0;
	opacity: 0; translate: 0 12px;
	pointer-events: none;
	transition: opacity var(--dur-2) var(--ease-in), translate var(--dur-2) var(--ease-in);
}
.showroom__nightshot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-sm); box-shadow: 0 18px 36px -18px rgb(0 0 0 / 0.7); }
.showroom__nightshot figcaption { margin-top: var(--s-2); font-size: var(--text-sm); color: var(--on-ink-2); }
.showroom[data-light="night"][data-kind="colour"] .showroom__nightshot { opacity: 1; translate: 0 0; transition: opacity var(--dur-3) var(--ease-out) 200ms, translate var(--dur-4) var(--ease-out-expo) 200ms; }

/* ---------- Price card ---------- */
.showroom__card {
	grid-column: 2; grid-row: 1 / -1; align-self: center;
	min-width: 0;
	display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4);
	padding: clamp(20px, 2vw, 28px);
	background: var(--paper);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-pop);
	pointer-events: auto;
}
.showroom__card-top { display: grid; gap: var(--s-2); }
.showroom__maker { margin: 0; font-size: var(--text-sm); color: var(--muted); }
.showroom__name { margin: 0; font-size: var(--text-xl); line-height: 1.12; letter-spacing: var(--tracking-display); text-wrap: balance; }
.showroom__name a { padding-block: 8px; color: inherit; text-decoration: none; /* padding: a 44 px hit band on the inline link, the heading does not move */ background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; background-origin: content-box; background-clip: content-box; transition: background-size var(--dur-2) var(--ease-out); }
@media (hover: hover) { .showroom__name a:hover { background-size: 100% 1.5px; } }
.showroom__price { margin-top: var(--s-1); font-size: clamp(2rem, 1.4rem + 1.3vw, 2.625rem); }
.showroom__price .price__tax { font-size: 0.42em; }
.showroom__cur { font-size: 0.5em; font-weight: 600; }

.showroom__specs { margin: 0; padding: var(--s-3) 0; list-style: none; display: grid; gap: 0; border-block: 1px solid var(--hairline); }
.showroom__spec {
	display: flex; align-items: center; gap: 12px;
	width: 100%; min-height: 44px; padding: 4px 10px; margin-inline: -10px; width: calc(100% + 20px);
	font-family: var(--font-body); font-size: 0.9375rem; font-weight: 600; line-height: 1.25; text-align: left; color: var(--ink-2);
	background: none; border: 0; border-radius: var(--r-xs);
	cursor: pointer;
	transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.showroom__spec-dot {
	flex: none; width: 10px; height: 10px; border-radius: 50%;
	box-shadow: inset 0 0 0 2px var(--accent);
	transition: background-color var(--dur-2) var(--ease-out), scale var(--dur-2) var(--ease-spring);
}
.showroom__spec.is-lit .showroom__spec-dot { background: var(--accent); }
.showroom__spec.is-away { color: var(--muted); }
.showroom__spec.is-away .showroom__spec-dot { background: transparent; }
@media (hover: hover) { .showroom__spec:hover { background: var(--mist); color: var(--ink); } }
.showroom__spec.is-active { background: var(--accent-soft); color: var(--ink); }
.showroom__spec.is-active .showroom__spec-dot { scale: 1.25; background: var(--accent); }
.showroom__spec:focus-visible { outline-offset: 0; }

.showroom__promises { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.showroom__promises li { display: flex; align-items: center; gap: 10px; font-size: var(--text-sm); font-weight: 600; color: var(--ink-2); }
.showroom__promises .icon { flex: none; width: 20px; height: 20px; padding: 4px; border-radius: 50%; color: var(--on-action); background: var(--accent); stroke-width: 2.6; }
.showroom__actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: var(--s-1); }
.showroom__actions .btn { min-width: 0; padding-inline: 1em; }
@media (min-width: 1024px) and (max-width: 1279px) { .showroom__actions .btn { font-size: 0.9375rem; } }
.showroom__add-label, .showroom__add-done { display: inline-flex; align-items: center; gap: 0.5em; }
.showroom__add-done { display: none; }
.showroom__add.is-added .showroom__add-label { display: none; }
.showroom__add.is-added .showroom__add-done { display: inline-flex; }
.showroom__add .icon { width: 1.2em; height: 1.2em; }

/* Swap: the card's text steps out and back in with the model. */
[data-sr-swap] > *, .showroom__specs { transition: opacity var(--dur-2) var(--ease-out), translate var(--dur-2) var(--ease-out); }
.showroom.is-swapping-card [data-sr-swap] > *, .showroom.is-swapping-card .showroom__specs { opacity: 0; translate: 0 6px; transition-duration: var(--dur-1); transition-timing-function: var(--ease-in); }

/* ---------- Product chips ---------- */
.showroom__chips {
	grid-column: 1; grid-row: 2; justify-self: center;
	display: flex; gap: 10px;
	margin-top: var(--s-4);
	pointer-events: auto;
}
.showroom__chip {
	position: relative;
	flex: none; width: var(--sr-chip-w);
	display: grid; justify-items: center; gap: 2px;
	padding: 8px 8px 10px;
	font-family: var(--font-body);
	color: var(--ink);
	background: var(--paper);
	border: 0; border-radius: var(--r-md);
	box-shadow: 0 0 0 1px var(--hairline), 0 10px 22px -16px rgb(16 24 40 / 0.4);
	cursor: pointer;
	transition: box-shadow var(--dur-2) var(--ease-out), background-color var(--dur-3) var(--ease-out), translate var(--dur-2) var(--ease-out);
}
.showroom__chip-well { display: grid; place-items: center; width: 100%; height: 58px; }
.showroom__chip-well img { width: auto; height: auto; max-width: 92%; max-height: 58px; object-fit: contain; filter: drop-shadow(0 6px 6px rgb(0 0 0 / 0.08)); transition: scale var(--dur-3) var(--ease-out); }
.showroom__chip-name { font-size: 0.8125rem; font-weight: 700; line-height: 1.2; text-align: center; }
.showroom__chip-price { font-size: 0.8125rem; font-weight: 500; color: var(--muted); }
@media (hover: hover) {
	.showroom__chip:hover { translate: 0 -2px; box-shadow: 0 0 0 1px var(--hairline-strong), 0 16px 28px -16px rgb(16 24 40 / 0.45); }
	.showroom__chip:hover .showroom__chip-well img { scale: 1.06; }
}
.showroom__chip:active { translate: 0 0; scale: 0.98; }
.showroom__chip:focus-visible { outline-offset: 3px; }
.showroom__chip[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--accent), 0 14px 26px -16px rgb(16 82 200 / 0.5); }
.showroom__chip[aria-pressed="true"] .showroom__chip-price { color: var(--action); font-weight: 600; }
.showroom__chip[aria-busy="true"]::after {
	content: ""; position: absolute; top: 8px; right: 8px; width: 14px; height: 14px; border-radius: 50%;
	border: 2px solid var(--accent); border-right-color: transparent; animation: twomag-spin 0.7s linear infinite;
}
.showroom[data-light="night"] .showroom__chip { color: var(--on-ink); background: rgb(255 255 255 / 0.06); box-shadow: 0 0 0 1px var(--ink-line); }
.showroom[data-light="night"] .showroom__chip-price { color: var(--on-ink-muted); }
.showroom[data-light="night"] .showroom__chip[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--accent); }
.showroom[data-light="night"] .showroom__chip[aria-pressed="true"] .showroom__chip-price { color: #7DB8FF; }
@media (hover: hover) { .showroom[data-light="night"] .showroom__chip:hover { background: rgb(255 255 255 / 0.1); } }

/* ---------- Desktop sizes ---------- */
@media (max-width: 1439px) { .showroom { --sr-chip-w: 128px; } }
@media (max-width: 1279px) {
	.showroom { --sr-chip-w: 98px; }
	.showroom__chip-well { height: 48px; }
	.showroom__chip-well img { max-height: 48px; }
	.showroom__chip-price { display: none; }
	.showroom__chip[aria-pressed="true"] .showroom__chip-price { display: block; }
}
@media (min-width: 1024px) and (max-height: 820px) {
	.showroom__card { gap: var(--s-3); }
	.showroom__specs { padding-block: var(--s-2); }
	.showroom__chip-well { height: 44px; }
	.showroom__chip-well img { max-height: 44px; }
}

/* ---------- Below 1024: one column ---------- */
@media (max-width: 1023px) {
	.showroom { --sr-stage-h: min(78vw, 600px); }
	.showroom__pin {
		height: auto; min-height: 0; max-height: none;
		display: grid; grid-template-columns: minmax(0, 1fr);
		padding: var(--section-y) var(--gutter);
	}
	.showroom__inner, .showroom__head { display: contents; }
	.showroom__title { order: 1; position: relative; z-index: 3; }
	.showroom__lead { order: 2; position: relative; z-index: 3; max-width: 44ch; }
	.showroom__light { order: 3; position: relative; z-index: 3; justify-self: start; margin-top: var(--s-5); }
	.showroom__stage {
		order: 4; position: relative; inset: auto;
		height: var(--sr-stage-h);
		margin: var(--s-4) calc(-1 * var(--gutter)) 0;
	}
	.showroom__nightshot {
		order: 5; position: relative; top: auto; z-index: 3;
		width: 100%;
		display: grid; grid-template-rows: 0fr;
		translate: 0 0;
		transition: grid-template-rows var(--dur-3) var(--ease-in), opacity var(--dur-2) var(--ease-in);
	}
	.showroom__nightshot > * { min-height: 0; overflow: hidden; }
	.showroom__nightshot { grid-template-columns: minmax(0, 1fr); }
	.showroom__nightshot img { max-width: 520px; }
	.showroom[data-light="night"][data-kind="colour"] .showroom__nightshot {
		grid-template-rows: 1fr;
		transition: grid-template-rows var(--dur-4) var(--ease-out-expo), opacity var(--dur-3) var(--ease-out) 120ms;
	}
	.showroom__nightshot > img { margin-top: var(--s-4); }
	.showroom__nightshot figcaption { margin-top: 0; padding-top: var(--s-2); }
	.showroom__chips {
		order: 6; position: relative; z-index: 3;
		grid-column: 1; grid-row: auto;
		justify-self: stretch;
		margin: var(--s-5) calc(-1 * var(--gutter)) 0;
		padding: 4px var(--gutter) 8px;
		overflow-x: auto; overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
		scrollbar-width: none;
	}
	.showroom__chips::-webkit-scrollbar { display: none; }
	.showroom__chip { scroll-snap-align: start; --sr-chip-w: 116px; width: 116px; }
	.showroom__chip-price { display: block; }
	.showroom__chip-well { height: 52px; }
	.showroom__chip-well img { max-height: 52px; }
	.showroom__card {
		order: 7; position: relative; z-index: 3;
		grid-column: 1; grid-row: auto; align-self: start;
		margin-top: var(--s-5);
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: var(--s-6); align-items: start;
	}
	.showroom__card-top, .showroom__specs { grid-column: 1; }
	.showroom__promises, .showroom__actions { grid-column: 2; }
	.showroom__card-top { grid-row: 1; }
	.showroom__specs { grid-row: 2 / span 2; align-self: start; }
	.showroom__promises { grid-row: 1; align-self: end; }
	.showroom__actions { grid-row: 2; }
	.showroom__webgl { top: var(--s-3); }
	.showroom__stage::before { --sr-ghost: min(46vw, 13rem); }
	.showroom__deg { top: 30px; }
	/* Top left of the stage, level with "Activer la 3D" on the right. */
	.showroom__hint { left: var(--gutter); top: calc(var(--s-3) + 9px); transform: none; translate: none; }
	/* Hotspot labels: at rest, in the band kept free above the product (home-showroom.js lays out up to three tiers),
	   each on a leader down to its dot. A long one may take two balanced, centred lines. */
	.showroom__hot-label { padding: 8px 13px; font-size: var(--text-sm); line-height: 1.15; }
	.showroom__hot.is-wrap .showroom__hot-label { justify-content: center; text-align: center; }
}
@media (max-width: 767px) {
	.showroom { --sr-stage-h: min(126vw, 580px); }  /* room for the labels' band above the product */
	.showroom__title { font-size: clamp(2.25rem, 1.6rem + 3vw, 2.75rem); }
	.showroom__lead { font-size: var(--text-base); }
	.showroom__card { grid-template-columns: minmax(0, 1fr); padding: var(--s-5) var(--s-4) var(--s-4); }
	.showroom__card-top, .showroom__specs, .showroom__promises, .showroom__actions { grid-column: 1; grid-row: auto; }
	.showroom__ring text { font-size: 11px; }
	.showroom__hot-label { padding: 7px 12px; font-size: 0.8125rem; }
}

/* ---------- Reduced motion: every state, no travel ---------- */
@media (prefers-reduced-motion: reduce) {
	.showroom *, .showroom *::before, .showroom *::after { transition-duration: 0.01ms !important; transition-delay: 0s !important; animation: none !important; }
	.showroom__stage::before { transform: translate3d(-50%, -50%, 0); }
}