/* QS Deals — Phase 2 premium layer.
   Every color is a token or a color-mix of tokens; no fifth color exists. */

/* ===========================================================================
   MOTION + ELEVATION TOKENS (Phase 0 substrate, design panel 2026-07-25).
   One vocabulary so every later interaction composes into a system instead of
   adding a ninth one-off value. Motion tokens live HERE, not in theme.json —
   WordPress kebab-cases theme.json custom keys (that is what silently killed
   --wp--custom--lineStrong), so anything referenced by hand stays in :root.
   ========================================================================= */
:root {
	/* durations — 1 = micro (state), 2 = component, 3 = transition, 4 = staged */
	--qs-dur-1: 120ms;
	--qs-dur-2: 240ms;
	--qs-dur-3: 380ms;
	--qs-dur-4: 620ms;
	/* easing — out = arrivals (default), in = exits, spring = commit moments */
	--qs-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--qs-ease-in: cubic-bezier(0.4, 0, 1, 1);
	--qs-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
	/* elevation — the dark room has no white light, so "shadow" is depth + accent glow */
	--qs-elev-rest: 0 1px 2px rgba(0, 0, 0, 0.4);
	--qs-elev-lift: 0 18px 44px var(--wp--custom--glow);
	--qs-elev-panel: 0 24px 70px rgba(0, 0, 0, 0.45);
	/* tracking roles — display tightens, data opens, labels shout quietly */
	--qs-track-display: -0.02em;
	--qs-track-body: 0;
	--qs-track-label: 0.14em;
}

/* ---- the one room ---- */
/* ONE flat background color; every section is transparent and blends to it.
   #04060f matches the hero image's own near-black studio edges, so the image
   dissolves into the page with no rectangle (David: single background). */
body {
	background: #04060f;
	-webkit-font-smoothing: antialiased;
}
::selection {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--bg);
}

/* ---- header ---- */
header.wp-block-template-part > .wp-block-group {
	border-bottom: 1px solid var(--wp--custom--line);
}
.wp-block-site-title a {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.wp-block-navigation a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	transition: color 0.2s ease;
}
.wp-block-navigation a:hover {
	color: var(--wp--preset--color--ink);
}
.wp-block-navigation .current-menu-item > a {
	color: var(--wp--preset--color--accent);
}

/* ---- kickers (small muted labels) ---- */
p.has-small-font-size.has-muted-color {
	letter-spacing: 0.18em;
	font-weight: 600;
}

/* ---- hairline separators ---- */
.wp-block-separator {
	border: none;
	height: 1px;
	opacity: 0.26;
}

/* ---- media slot frames (Phase-3 placeholders) ---- */
.wp-block-post-content .wp-block-group[style*="dashed"] {
	border-radius: 16px;
	background:
		radial-gradient(60% 80% at 50% 20%, color-mix(in oklch, var(--wp--preset--color--accent) 7%, transparent), transparent 70%),
		var(--wp--custom--surface);
}

/* ---- live media: rounded frames + hairline, matching the design system ---- */
.wp-block-post-content .wp-block-video video,
.wp-block-post-content .wp-block-image img {
	border-radius: 16px;
	border: 1px solid var(--wp--custom--line);
	display: block;
	width: 100%;
	height: auto;
}
.wp-block-post-content .wp-block-image.is-resized img {
	width: auto;
	max-width: 100%;
}

/* ---- buttons: the accent glow pill ---- */
.wp-element-button,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	background: linear-gradient(180deg, color-mix(in oklch, var(--wp--preset--color--accent) 90%, var(--wp--preset--color--ink)) 0%, var(--wp--preset--color--accent) 100%);
	color: var(--wp--preset--color--bg);
	border: none;
	border-radius: 999px;
	padding: 0.95rem 2.2rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	box-shadow: 0 10px 34px var(--wp--custom--glow);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.wp-element-button:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
	background: linear-gradient(180deg, color-mix(in oklch, var(--wp--preset--color--accent) 90%, var(--wp--preset--color--ink)) 0%, var(--wp--preset--color--accent) 100%);
	color: var(--wp--preset--color--bg);
	transform: translateY(-2px);
	box-shadow: 0 16px 46px var(--wp--custom--glow);
}
.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

/* ---- forms (Woo checkout/cart + core) ---- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea,
select {
	background: var(--wp--custom--surface);
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--custom--line-strong);
	border-radius: 10px;
	padding: 0.7rem 0.9rem;
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: none;
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 3px var(--wp--custom--glow);
}

/* ---- WooCommerce surfaces ---- */
.woocommerce ul.products li.product,
.wc-block-grid__product {
	background: var(--wp--custom--surface);
	border: 1px solid var(--wp--custom--line);
	border-radius: 16px;
	padding: 1rem;
	transition: transform 0.25s ease, border-color 0.25s ease;
}
.woocommerce ul.products li.product:hover,
.wc-block-grid__product:hover {
	transform: translateY(-3px);
	border-color: var(--wp--custom--line-strong);
}
.woocommerce ul.products li.product .price,
.wc-block-grid__product-price,
.woocommerce div.product p.price {
	font-family: var(--wp--preset--font-family--mono);
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--ink);
}
.woocommerce span.onsale {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--bg);
	border-radius: 999px;
	padding: 0.3em 0.85em;
	font-weight: 600;
	min-height: 0;
	line-height: 1.6;
}
.woocommerce table.shop_table {
	border: 1px solid var(--wp--custom--line);
	border-radius: 12px;
	border-collapse: separate;
	border-spacing: 0;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	border-color: var(--wp--custom--line);
}
.woocommerce table.shop_table td.product-price,
.woocommerce table.shop_table td.product-subtotal,
.woocommerce .cart-subtotal td,
.woocommerce .order-total td {
	font-family: var(--wp--preset--font-family--mono);
	font-variant-numeric: tabular-nums;
}
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background: var(--wp--custom--surface);
	color: var(--wp--preset--color--ink);
	border-top-color: var(--wp--preset--color--accent);
}
.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--wp--preset--color--accent);
}

/* ---- footer ---- */
footer.wp-block-template-part > .wp-block-group {
	border-top: 1px solid var(--wp--custom--line);
}

/* ============================================================
   FRAMEWORK LAYER (cryptolink-derived, skill-specced)
   Hairline-divided sections · glass cards · ambient orbs ·
   sticky blur nav · deep gradient floor. Tokens only.
   ============================================================ */

/* single flat room — no page gradient, no drifting orbs (they were tonal blobs
   fighting the "one background" rule). ONE uniform grain layer across the whole
   viewport, replacing the per-section grain that seamed at every boundary. */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background: url(../img/noise.png) repeat;
	background-size: 160px 160px;
	opacity: 0.045;
	pointer-events: none;
}

/* sticky glass header */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 40;
}
header.wp-block-template-part > .wp-block-group {
	background: color-mix(in oklch, var(--wp--preset--color--bg) 72%, transparent);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

/* hairline section dividers (cryptolink's border-b system) */
.wp-block-post-content > .wp-block-group {
	border-bottom: 1px solid color-mix(in oklch, var(--wp--preset--color--muted) 14%, transparent);
}
/* no divider under the hero — the image feathers straight into the tag section
   (a hairline there was one more seam in the stack). Same for the full-bleed
   bands (lineup/CTA): their bottom dissolve already fades to the room color,
   a hairline right after it reads as a double edge. */
.wp-block-post-content > .wp-block-group:last-child,
.wp-block-post-content > .qs-lineup,
.wp-block-post-content > .qs-cta,
.wp-block-post-content > .qs-hero { border-bottom: none; }

/* glass cards: hairline border + surface blur + top-edge sheen */
.glass-card {
	background:
		linear-gradient(180deg, color-mix(in oklch, var(--wp--preset--color--ink) 5%, transparent) 0%, transparent 34%),
		color-mix(in oklch, var(--wp--custom--surface) 82%, transparent);
	border: 1px solid color-mix(in oklch, var(--wp--preset--color--ink) 8%, transparent);
	border-radius: 16px;
	padding: 1.6rem 1.5rem;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease;
	height: 100%;
}
.glass-card:hover {
	transform: translateY(-4px);
	border-color: color-mix(in oklch, var(--wp--preset--color--accent) 34%, transparent);
}
.glass-card h3 { margin-top: 0.2rem; }
.glass-card .num {
	font-family: var(--wp--preset--font-family--mono);
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--accent);
	letter-spacing: 0.1em;
	font-size: 0.9rem;
}

/* ghost pill (secondary CTA) — dark glass so it stays a legible button over
   ANY background (the hero image sat it over a bright laptop, invisible) */
.btn-ghost .wp-block-button__link {
	background: color-mix(in oklch, var(--wp--preset--color--bg) 46%, transparent);
	backdrop-filter: blur(9px);
	-webkit-backdrop-filter: blur(9px);
	color: var(--wp--preset--color--ink);
	border: 1px solid color-mix(in oklch, var(--wp--preset--color--ink) 30%, transparent);
	box-shadow: none;
}
.btn-ghost .wp-block-button__link:hover {
	background: color-mix(in oklch, var(--wp--preset--color--bg) 62%, transparent);
	border-color: color-mix(in oklch, var(--wp--preset--color--ink) 45%, transparent);
	color: var(--wp--preset--color--ink);
	transform: translateY(-2px);
	box-shadow: none;
}

/* split-text word spans (motion.js wraps words) */
.qs-word { display: inline-block; will-change: transform, opacity; }

/* ============================================================
   PHASE 3X — the Deals Experience (WebGL signature moments)
   One fixed transparent canvas scissor-renders into the mounts;
   posters live inside mounts and stay when WebGL never boots.
   ============================================================ */
.qsx-canvas {
	position: fixed;
	inset: 0;
	z-index: 3; /* above the mounts: WebGL tags composite OVER the in-mount video bed */
	pointer-events: none;
	/* force the fixed canvas onto its own GPU compositor layer — cuts the iOS-Safari
	   momentum-scroll "jiggle" of position:fixed elements (David 2026-07-12, real device) */
	transform: translateZ(0);
	will-change: transform;
	backface-visibility: hidden;
}
.qsx-mount {
	position: relative;
	z-index: 2;
	overflow: hidden;
}
.qsx-video {
	/* the beam is sized to the card and cropped to a NARROW band around the bolt:
	   object-fit:cover throws away the source's wide dark frame (which was the
	   faint box that wouldn't blend), and the small display size means the native
	   pixels downscale hard = sharp. Feathered on all four edges so only the light
	   composites onto the flat room. */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	height: 60vh;
	width: 26vh;
	object-fit: cover;
	object-position: center;
	display: block;
	mix-blend-mode: screen;
	-webkit-mask-image:
		linear-gradient(180deg, transparent 0%, #000 15%, #000 85%, transparent 100%),
		linear-gradient(90deg, transparent 0%, #000 24%, #000 76%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-image:
		linear-gradient(180deg, transparent 0%, #000 15%, #000 85%, transparent 100%),
		linear-gradient(90deg, transparent 0%, #000 24%, #000 76%, transparent 100%);
	mask-composite: intersect;
}
@media (prefers-reduced-motion: reduce) {
	.qsx-video { display: none; }
}
/* grain is now ONE global layer on body::after — no per-section grain (it seamed
   at every section boundary against the flat room) */
.qsx-poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform: translateZ(0); /* same decode-repaint hardening as .qs-hero-img */
}
.qsx-mount.qsx-live .qsx-poster { visibility: hidden; }
/* MOBILE live-3D prototype (David 2026-07-12): a scene's OWN <canvas> fills its mount as a normal
   in-flow element — the browser composites it WITH the scroll (like the poster it replaces), so
   there's no fixed canvas and no per-frame scissor to desync from iOS momentum scroll. See the
   bootMobileQ() path in experience/index.js. */
.qsx-canvas-inline { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* beam: tall scroll band, sticky viewport-height stage.
   220vh -> 140vh (QA): two-plus screens of a lone spinning Q was dead scroll
   on both viewports — still a full sticky beat, less void */
.qsx-band { height: 140vh; }

/* --- Phase 3X-R (rev. David 2026-07-11): the Q "operates like" the cryptolink
   reference — a large CENTRED object that turns a full slow revolution as you
   scroll and settles, with the three process cards riding in front of it in the
   lower frame. The mount is the full-viewport pinned stage; the WebGL Q composites
   under it (canvas z:3) while the cards sit above (z:4). manager.js still derives
   scene progress from the band's scroll fraction, and the band height is tuned so
   progress 0→1 spans exactly the pin. --- */
/* DEFAULT (mobile / no-JS / reduced-motion): a plain stacked flow — Q, then the title +
   cards, then the deals section normally. The pinned PORTAL (sticky Q + overlay fade +
   fly-through + deals cross-fade) engages ONLY under body.portal-live (added by the
   inline script when the WebGL experience is actually running) at desktop widths, so
   degraded modes never inherit a broken pinned/overlapping layout. */
.qsx-band.qs-process-band { position: relative; height: auto; }
/* The Q is a NORMAL FLOW mount off-portal (mobile / no-JS / reduced-motion): it
   scrolls with the page and the title + cards stack cleanly BELOW it. The compound
   `.qsx-band.qs-process-band > .qsx-mount` selector (specificity 0,3,0) is deliberate —
   it must out-rank the generic `.qsx-band .qsx-mount { position:sticky; height:100vh }`
   rule further down (0,2,0), which otherwise PINNED the Q so the process cards scrolled
   up UNDERNEATH the spinning Q and it covered their text (mobile QA 2026-07-12). Desktop
   portal-live (`body.portal-live .qs-process-band > .qsx-mount`, 0,3,1) still wins → pins. */
.qsx-band.qs-process-band > .qsx-mount { position: relative; height: 42vh; width: 100%; }
.qs-process-overlay { display: block; padding: 0.5rem 0 0; }
.qs-process-title { pointer-events: auto; }
.qs-process-steps {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin-top: 1.25rem;
}
/* kill WordPress's block-gap margin-top on the 2nd/3rd grid items (it shifts them
   ~24px down, out of line with card 01 — David's catch); the grid `gap` spaces them */
.qs-process-steps > .glass-card { pointer-events: auto; margin: 0; }

@media (min-width: 781px) {
	body.portal-live .qs-process-band { height: 440vh; }   /* read -> ignite -> fly THROUGH -> glow fade -> deals reveal -> dwell */
	/* the mount is the pinned Q stage AND the frame the deals get pinned into (the
	   inline script re-parents .qs-deals here). Raised above the canvas so its DOM
	   children paint over the Q; the mount itself stays transparent so the Q (canvas
	   z:3) shows through it. */
	body.portal-live .qs-process-band > .qsx-mount { position: sticky; top: 0; height: 100vh; z-index: 5; }
	/* title + cards share ONE pinned overlay that fits in frame, pins, and fades out
	   together (David). Pulled up to the sticky line so it's shown from progress 0. */
	body.portal-live .qs-process-overlay {
		position: sticky;
		top: 0;
		z-index: 4;
		height: 100vh;
		max-width: 1120px;
		margin: -100vh auto 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between; /* title near the top, cards near the bottom */
		padding: 10vh 0 7vh;
		pointer-events: none;
		opacity: 0;                 /* the script fades it in on entry (portal-live => JS is live) */
		will-change: opacity;
	}
	body.portal-live .qs-process-steps { grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-top: 0; }
	/* deals, re-parented INTO the pinned mount, sit as an absolute overlay filling the
	   frame — so they start PINNED behind the Q (opacity 0) and fade in IN PLACE with
	   zero slide, only after the flythrough + glow fade (David: "flow through the Q
	   into the section that the deals are in"). */
	body.portal-live .qsx-mount .qs-deals {
		position: absolute;
		inset: 0;
		z-index: 2;                 /* above the mount's poster, in front once opacity > 0 */
		margin: 0;
		padding: 0 1.5rem;
		display: flex;
		flex-direction: column;
		justify-content: center;    /* the 4-card teaser centred in the frame */
		opacity: 0;
		will-change: opacity;
	}
	body.portal-live .qsx-mount .qs-deals > * {
		width: 100%;
		max-width: 1120px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* --- MOBILE pinned portal (David 2026-07-12): the Q pins + spins like desktop and the
   three trust cards ride IN FRONT, fading in on entry and out as the Q ignites blue —
   they fade IN PLACE, so they never scroll-jumble into the Q (the earlier bug). No
   fly-through on phones (qmark.js), and the deals are NOT re-parented here — they stay
   a normal section BELOW the pin (the inline script gates the re-parent to ≥781px).
   Engaged by body.portal-live, which the script now also adds on phones (motion-OK). --- */
@media (max-width: 780px) {
	/* 190vh (not the desktop 440): no fly-through on phones, so the pin only needs to
	   cover read → ignite → a short settle before releasing into the deals — a taller
	   band left the lone Q dimming for too long (airy) after the cards faded. */
	body.portal-live .qsx-band.qs-process-band { height: 190vh; }
	body.portal-live .qs-process-band > .qsx-mount {
		position: sticky; top: 0; height: 100vh; z-index: 5;   /* the pinned spinning Q */
	}
	body.portal-live .qs-process-overlay {
		position: sticky;
		top: 0;
		z-index: 4;                 /* above the Q canvas (z:3) → cards read over the Q */
		height: 100vh;
		margin: -100vh auto 0;      /* pull up onto the sticky line so it pins with the Q */
		max-width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;    /* title + the three cards as one centred stack */
		gap: 0.9rem;
		padding: 12vh 1.15rem 8vh;  /* clears the fixed nav; side room so cards breathe */
		opacity: 0;                 /* the script fades it in on entry then out on ignite */
		will-change: opacity;
		pointer-events: none;
	}
	body.portal-live .qs-process-steps { grid-template-columns: 1fr; gap: 0.7rem; margin-top: 0; }
	/* compact cards so the title + all three fit the pinned frame without clipping
	   (height:auto overrides the base .glass-card height:100%, which would stretch in
	   this flex column) */
	body.portal-live .qs-process-steps > .glass-card { height: auto; padding: 0.9rem 1.1rem; }
	body.portal-live .qs-process-steps > .glass-card h3 { font-size: 1.18rem; }
	body.portal-live .qs-process-steps > .glass-card p { font-size: 0.9rem; line-height: 1.5; }
}

.qsx-band .qsx-mount {
	position: sticky;
	top: 0;
	height: 100vh;
}

/* flow mounts */
.qsx-mount-dice {
	aspect-ratio: 1;
	max-height: 60vh;
	width: 100%;
	margin: 0 auto;
}

/* ---------------------------------------------------------------
   Don't-roll-the-dice — PINNED section (David 2026-07-12): the die
   tumbles (scroll-tied, through all six faces) WHILE the section is
   pinned, then unpins and scrolling continues. The die mount is a
   direct child of the band, so manager.js drives the tumble from the
   band's scroll fraction. Desktop keeps the approved two-column look
   (copy left, die right) both pinned; phones pin a stacked version
   (copy top, die below).
   --------------------------------------------------------------- */
.qsx-band.qs-dice-band { position: relative; height: 220vh; }
@media (min-width: 781px) {
	.qs-dice-band { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
	.qs-dice-band > .qsx-mount-dice {
		grid-column: 2;
		grid-row: 1;            /* both forced to row 1 — else the DOM-first mount takes col 2
		                          and grid auto-placement wraps the copy into row 2 (off-screen) */
		position: sticky;
		top: 0;
		height: 100vh;
		width: 100%;
		max-height: none;       /* override the flow-mount cap */
		aspect-ratio: auto;
		margin: 0;
	}
	.qs-dice-copy {
		grid-column: 1;
		grid-row: 1;
		position: sticky;
		top: 0;
		z-index: 4;             /* above the dice canvas (z:3) */
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-right: 2rem;
	}
}
@media (max-width: 780px) {
	/* MOBILE PIN (David 2026-07-12): the header AND the die pin TOGETHER — the "Don't roll the dice"
	   copy stays fixed at the top while the die tumbles through its six faces below it, then both
	   release together and scrolling continues. Their sticky boxes share the same bottom (copy
	   6vh+88vh = die 34vh+60vh = 94vh) so they unpin as one unit (no die-scrolling-into-the-copy).
	   Band sized generously so the tumble plays slowly/deliberately. */
	.qsx-band.qs-dice-band { height: 300vh; }
	.qs-dice-band > .qsx-mount-dice {
		position: sticky;
		top: 34vh;
		height: 60vh;
		width: 100%;
		max-height: none;
		aspect-ratio: auto;
		margin: 0;
	}
	.qs-dice-copy {
		position: sticky;
		top: 6vh;
		min-height: 88vh;       /* shares the die's sticky bottom so they release together */
		z-index: 4;             /* above the die canvas; its content sits at the top of the box */
		padding: 0 1.25rem;     /* was 0 — the centered heading ran edge-to-edge and nearly
		                          clipped both margins on a 390px phone */
		text-align: center;
	}
	.home .wp-block-post-content .qs-dice-copy h2.wp-block-heading {
		font-size: clamp(1.6rem, 6.2vw, 1.95rem);   /* trims the 2rem global floor so
		                                              "Don't roll the dice on your tech."
		                                              wraps to a tidy two lines inside the pad */
		line-height: 1.12;
	}
}
@media (max-width: 780px) {
	/* MOBILE PIN (David 2026-07-12): the title + cards come FIRST and scroll past, then the live Q
	   PINS ALONE below them and spins + ignites blue as you scroll (inlineScene.js reads this band's
	   scroll fraction), then releases into the deals — "flow through the Q into the deals". Reordered
	   with flexbox so the Q is the LAST thing in the band: the empty band space below it is the pin's
	   scroll room, and nothing ever overlaps it (the earlier margin-push overflowed the band into the
	   deals section — the collision bug). Band height contains everything → no overflow. Desktop keeps
	   portal-live (higher specificity), untouched. */
	.qsx-band.qs-process-band { height: 300vh; position: relative; display: flex; flex-direction: column; }
	.qs-process-overlay { order: 1; margin-top: 0; }
	.qsx-band.qs-process-band > .qsx-mount { order: 2; position: sticky; top: 14vh; height: 56vh; }
}

/* ============================================================
   PHASE 3X-R — reference-exact page architecture
   (cryptolink structure: floating glass header bar, full-viewport
   hero with the 3D moment in its lower half, structured footer)
   ============================================================ */

/* --- floating header bar: mark + wordmark left, ONE pill right --- */
.qs-header { padding: 0.9rem 1.1rem 0; }
.qs-header-bar {
	max-width: 1120px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.8rem 1.1rem;
	border-radius: 14px;
	background:
		radial-gradient(120% 190% at 50% -70%, color-mix(in oklch, var(--wp--preset--color--accent) 20%, transparent), transparent 56%),
		color-mix(in oklch, var(--wp--preset--color--bg) 72%, transparent);
	border: 1px solid color-mix(in oklch, var(--wp--preset--color--ink) 9%, transparent);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}
.qs-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}
.qs-brand-mark { display: block; color: var(--wp--preset--color--ink); }
.qs-brand-name {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	letter-spacing: 0.01em;
	font-size: 1.05rem;
}
.qs-header-cta {
	display: inline-block;
	padding: 0.6rem 1.35rem;
	border-radius: 999px;
	background: color-mix(in oklch, var(--wp--preset--color--ink) 6%, var(--wp--preset--color--bg));
	border: 1px solid var(--wp--custom--line-strong);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.95rem;
	transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.qs-header-cta:hover {
	border-color: color-mix(in oklch, var(--wp--preset--color--accent) 55%, transparent);
	box-shadow: 0 8px 26px var(--wp--custom--glow);
	transform: translateY(-1px);
}

/* --- full-viewport hero: text stack up top, beam moment fills the rest --- */
/* the header banner yields the home hero to the image (David's direction) —
   brand lives in the hero kicker + footer; other pages keep the bar */
/* Phase 3X-R: the header is no longer hard-hidden on home — parts/header.html +
   the chrome layer below turn it into a fixed glass bar that stays INVISIBLE at
   scrollY=0 (the hero still owns the first screen, per David's directive) and
   reveals after ~70% of the hero has scrolled past. */
.home header.wp-block-template-part {
	position: static; /* neutralize the sticky/z-40 wrapper so the fixed bar inside governs */
	background: none;
	border: none;
}
.home .wp-block-post-content { margin-block-start: 0; } /* no strip above the image */

.qs-hero {
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	padding-top: 0;
	position: relative;
	/* no background of its own — the one flat room shows through; only the image
	   is painted here, so nothing rectangles against the sections around it */
}
/* David's hero image IS the hero. Full-bleed to the viewport (WP caps
   constrained-layout children at 1120px → that was the black band on the right),
   edges feathered into the flat room so the rectangle fully dissolves. */
.qs-hero-img {
	position: absolute;
	top: 0;
	left: 50%;
	/* translateZ(0) promotes the image to its own compositor layer: its texture
	   fills straight from the image-decode pipeline instead of main-thread paint,
	   which is the path that intermittently dropped the decode-complete repaint
	   (the invisible-hero bug — img complete/visible/opacity:1, zero pixels).
	   Pairs with decoding="sync" fetchpriority="high" on the <img> markup. */
	transform: translateX(-50%) translateZ(0);
	max-width: none;
	width: 100vw;
	height: 100%;
	object-fit: cover;
	object-position: 62% center;
	/* NO mask-image here — ever. The bottom dissolve used to be a mask-image
	   gradient on this img; Chromium's GPU raster intermittently fails masks on
	   large composited layers and a failed mask paints as FULLY masked out: the
	   hero vanished while img.complete/opacity/visibility all read perfect
	   (David's invisible-hero bug). The dissolve is now the ::after overlay
	   below — same look against the flat room, paint-proof. */
}
/* bottom dissolve into the flat room: an overlay fading to the body color is
   visually identical to alpha-masking the image over that same color */
.qs-hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 16%;
	background: linear-gradient(180deg, rgba(4, 6, 15, 0) 0%, #04060f 100%);
	pointer-events: none;
}
.qs-hero-copy {
	position: relative;
	z-index: 1;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	/* pulled up into the blank space ABOVE the laptop (David's direction) instead
	   of vertical-centering, which pushed the sub-copy/buttons down into the desk
	   clutter around the laptop and earbuds */
	justify-content: flex-start;
	/* short top pad + a compact stack (below) so the WHOLE block — including the
	   button row — clears the laptop/earbuds cluster instead of overlapping it */
	padding-top: clamp(2rem, 5vh, 3.5rem);
	/* WP's constrained-child margin:auto shrink-wraps and centers this group —
	   force the full content column so the copy sits over the image's blank LEFT */
	width: 100%;
	max-width: 1120px;
	/* NO background scrim — a full-height gradient box over the image read as a
	   dark rectangle wherever the text wasn't (David's catch). Legibility instead
	   comes from a shadow-halo carried by the text itself (below), which hugs the
	   glyphs and leaves the image untouched. */
}
/* the sub-copy needs to stay WIDE (fewer wrapped lines = less height, which is
   the thing actually clearing the laptop) — only the headline is capped narrow */
.qs-hero-copy > * { max-width: 30rem; }
.qs-hero-copy p.has-small-font-size { margin-block: 0 0.5rem; }
/* per-glyph legibility halo — replaces the scrim box; keeps text readable over
   the bright monitor without laying anything over the image */
.qs-hero-copy p,
.qs-hero-copy h1 {
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.62), 0 2px 22px rgba(0, 0, 0, 0.7);
}
.qs-hero-copy h1.wp-block-heading {
	max-width: 28rem;
	margin-block: 0.4rem 0.6rem;
}
.qs-hero-copy p.has-medium-font-size { margin-block: 0 0.9rem; line-height: 1.5; }
.qs-hero-copy .wp-block-buttons { margin-block-start: 0.2rem; }
/* the tags' own stage: a full section where the conveyor is the only subject.
   height trimmed (88→72vh) + tags enlarged in-scene so the frame is filled, not
   a row floating in dead space. The former "Whole Idea" section now opens this
   SAME section (David: combine into one) — its own top/bottom padding, the
   conveyor below carries no padding of its own. */
.qs-beam-section { padding: 0; }
/* full content width (was capped at 760px — that's what made the heading wrap
   into a narrow, jammed column instead of using the space it has, David's
   "jumbled in the middle" catch). Bottom padding cut hard: the tags render
   vertically CENTERED in their mount, so a tall mount + generous padding both
   stacked into a big dead gap before anything appeared (the "disconnected"
   catch) — shrinking both closes it. */
.qs-beam-intro { padding: 3rem 0 0.25rem; max-width: none; }
/* The tag mount lives in its OWN band (.qs-beam-band, separate from the intro copy) so the
   SceneManager feeds the tags the band's scroll fraction AND the band pins tightly (no long
   intro eating the pin). DESKTOP keeps the approved FREE-FLOWING beam — override the general
   band rules (`.qsx-band{height:140vh}`, `.qsx-band .qsx-mount{sticky;100vh}`) back to flow. */
.qsx-band.qs-beam-band { height: auto; }
/* tighter (David 2026-07-12): the tags are ~30% bigger now (beam.js height-fill), so a
   shorter mount hugs them with far less dead space around the conveyor */
.qs-beam-band .qsx-mount-beam { position: relative; top: auto; height: 46vh; }
@media (max-width: 780px) {
	/* mobile hero (David 2026-07-12): the copy gets its OWN space ABOVE the image
	   instead of sitting over it. The hero becomes a vertical stack — a text block on
	   the flat dark room up top, then the product image full-bleed below it — so the
	   two never overlap and the copy reads on clean darkness (no scrim, no halo). */
	.qs-hero {
		min-height: 0;
		padding-top: 5.25rem;   /* clears the fixed glass nav + gives the copy breathing room */
		padding-bottom: 0;
	}
	.qs-hero-img {
		order: 2;                /* below the copy in the flex column */
		position: relative;      /* was absolute + full-bleed behind the copy */
		top: auto;
		left: auto;
		width: 100vw;
		margin-left: calc(50% - 50vw);   /* full-bleed despite the constrained column */
		height: 52vh;
		transform: translateZ(0);         /* keep the decode-repaint hardening */
		object-position: 50% 34%;
		margin-top: 1.75rem;
	}
	.qs-hero-copy {
		order: 1;                /* above the image */
		position: relative;
		min-height: 0;           /* was 100svh — the copy no longer owns a full screen */
		justify-content: flex-start;
		padding-top: 0;
		padding-bottom: 0;
	}
	.qs-hero-copy > * { max-width: 100%; }
	/* the copy sits on the flat dark room now, so drop the heavy glyph-halo and the
	   ink nudge — the muted sub-copy is legible again with nothing behind it */
	.qs-hero-copy p,
	.qs-hero-copy h1 { text-shadow: none; }
	.qs-hero-copy .wp-block-buttons { flex-wrap: wrap; gap: 0.65rem; }
	.qs-hero-copy .wp-block-button { flex: 1 1 100%; }
	.qs-hero-copy .wp-block-button__link { width: 100%; }
	/* MOBILE: the beam shows its static poster in normal flow (no live WebGL on phones —
	   David 2026-07-12, "mobile = static posters"). No pin: a static image must never freeze
	   mid-scroll, so we inherit the base flow rules (.qs-beam-band height:auto; mount
	   position:relative height:46vh) — the poster just scrolls past like any other block. */
	/* the CTA keyboard macro is a tall portrait — uncapped it ran ~1.5 screens */
	.home figure.aligncenter img { width: auto !important; max-height: 58vh; }
}

/* section headline scale (QA): every h2 below the tags rendered at the theme
   default and read template-flat next to the beam h2's display clamp — one
   scale for all home sections (inline-styled headings still win the cascade) */
.home .wp-block-post-content h2.wp-block-heading {
	font-size: clamp(2rem, 1.1rem + 2.2vw, 2.9rem);
	line-height: 1.12;
}
.glass-card h3 { font-size: 1.32rem; }

/* --- structured footer: brand + links row above the record line --- */
.qs-footer-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	margin-bottom: 1.6rem;
	padding-bottom: 1.6rem;
	border-bottom: 1px solid color-mix(in oklch, var(--wp--preset--color--muted) 14%, transparent);
}
.qs-footer-links { display: flex; gap: 1.7rem; }
.qs-footer-links a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	transition: color 0.2s ease;
}
.qs-footer-links a:hover { color: var(--wp--preset--color--ink); }

@media (max-width: 640px) {
	.qs-brand-name { font-size: 0.95rem; }
	.qs-header-cta { padding: 0.5rem 1rem; font-size: 0.88rem; }
	.qs-footer-top { justify-content: center; text-align: center; }
}
/* ============================================================
   PHASE 3X-R — Agent C: page chrome
   (home floating glass nav + reusable full-bleed band recipe)
   Append into qsdeals.css. All colors are tokens or color-mix()
   of tokens except the two literal glass-fill values the contract
   specified verbatim (rgba(4,6,15,*) — the room's own flat color).
   ============================================================ */

/* ---------------------------------------------------------------
   Home floating nav
   .qs-header / .qs-header-bar / .qs-header-cta / .qs-brand* already
   exist (non-home static header — untouched by anything below that
   isn't scoped under body.home).

   Sentinel: a zero-size, zero-footprint anchor that sits in normal
   document flow immediately after the header (i.e. at the very top
   of <body>, y≈0 on every page). Its child is absolutely positioned
   70vh down from there. Because the hero is 100dvh (`.qs-hero {
   min-height: 100dvh }`), that lands at ~70% through the hero without
   this file needing to know anything about home.html's markup.
   Inert on every page (zero size, aria-hidden) — non-home is visually
   unaffected by its mere presence in the DOM.
   --------------------------------------------------------------- */
.qs-nav-sentinel-wrap {
	position: relative;
	height: 0;
	overflow: visible;
	pointer-events: none;
}
.qs-nav-sentinel {
	position: absolute;
	top: 70vh;
	left: 0;
	width: 1px;
	height: 1px;
}

/* Home: the existing header becomes a fixed, full-bleed glass bar.
   Default state (no JS / reduced-motion / no IntersectionObserver
   support) is ALWAYS VISIBLE — per contract, a visible bar is the
   safe failure, a missing nav is not. header.html's inline script
   only adds .qs-nav-js (which enables the hidden-until-scrolled
   states below) when it has confirmed IO support and motion is
   allowed; reduced-motion / no-JS therefore never leave this rule. */
body.home .qs-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	padding: 0;
	background: rgba(4, 6, 15, 0.55);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid color-mix(in oklch, var(--wp--preset--color--muted) 14%, transparent);
	opacity: 1;
	transform: translateY(0);
}
body.home .qs-header.qs-nav-js {
	opacity: 0;
	transform: translateY(-100%);
	transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
	pointer-events: none;
}
body.home .qs-header.qs-nav-js.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
/* admin-bar compat: WP's own toolbar is fixed top:0 above everything
   (z-index 99999) — sit the nav below it instead of under it */
body.admin-bar.home .qs-header { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar.home .qs-header { top: 46px; }
}

/* the bar's inner row keeps the same 1120px content column as the
   rest of the page (matches .qs-header-bar's own prior max-width);
   on home it carries no background/border of its own — the outer
   .qs-header now supplies the full-bleed glass fill above */
body.home .qs-header-bar {
	max-width: 1120px;
	margin: 0 auto;
	padding: 0.85rem 1.5rem;
	background: none;
	border: none;
	border-radius: 0;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/* The wayfinding nav (destinations + Cart) is now the header on EVERY page —
   consistent nav + cart access removes the earlier friction where non-home
   pages showed only a "Start Saving" pill with no nav or cart. On home the
   hero still owns the first screen; the nav rides the glass bar that reveals
   on scroll (below). The "Start Saving" pill is retired site-wide. */
.qs-header-cta { display: none; }
.qs-nav-links {
	display: flex;
	align-items: center;
	gap: 1.6rem;
}
.qs-nav-links a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	font-size: 0.92rem;
	font-weight: 500;
	transition: color 0.2s ease;
}
.qs-nav-links a:hover { color: var(--wp--preset--color--ink); }

/* Safety net at every width: 5 unwrappable nav words + the wordmark do not
   reliably fit a narrow phone (measured overflow at 360-320px — "Cart"
   clipped past the viewport edge with no scrollbar, i.e. invisible AND
   unreachable, since fixed-position overflow doesn't grow document
   scrollWidth). overflow-x:auto costs nothing when content fits (no
   scrollbar paints) and guarantees the links stay reachable by swipe if
   they ever don't. Scrollbar hidden cross-browser since this is a nav
   strip, not a content list. */
.qs-nav-links {
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.qs-nav-links::-webkit-scrollbar { display: none; }

@media (max-width: 780px) {
	body.home .qs-header-bar { padding: 0.75rem 1.1rem; }
	.qs-nav-links { gap: 1rem; }
	.qs-nav-links a { font-size: 0.86rem; }
}

/* Below ~460px the wordmark + all 5 links no longer fit even after the
   780px tightening (measured: "Cart" clipped at 360px, fully off-screen
   at 320px). Drop the wordmark text and keep only the mark icon — the
   anchor's aria-label preserves the accessible name, so this is a visual
   trim only — to give the nav room to breathe without relying on the
   scroll-safety-net above for the common case. */
@media (max-width: 460px) {
	.qs-brand-name { display: none; }
	.qs-nav-links { gap: 0.85rem; }
	.qs-nav-links a { font-size: 0.82rem; }
}

/* ---------------------------------------------------------------
   Full-bleed band recipe (.qs-bleed) — reusable for the lineup
   image + CTA keyboard image sections. Self-contained breakout
   (does not rely on WP's alignfull mechanics, which is what capped
   the hero at 1120px and produced the black band on its right —
   see .qs-hero-img's own comment) so it works from inside ANY
   constrained-width ancestor.
   --------------------------------------------------------------- */
.qs-bleed {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	height: 64vh;
	overflow: hidden;
}
/* plain <img> child — object-fit:cover fills the band; the
   integrator adds decoding/fetchpriority attributes on the tag */
.qs-bleed-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* top + bottom dissolve to the flat room — overlay gradients, NEVER
   mask-image (the paint-flake incident: GPU raster intermittently
   fails masks on large composited layers and a failed mask paints
   as fully masked out) */
.qs-bleed::before,
.qs-bleed::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 26%;
	pointer-events: none;
	z-index: 1;
}
.qs-bleed::before {
	top: 0;
	background: linear-gradient(180deg, #04060f 0%, rgba(4, 6, 15, 0) 100%);
}
.qs-bleed::after {
	bottom: 0;
	background: linear-gradient(180deg, rgba(4, 6, 15, 0) 0%, #04060f 100%);
}
/* copy overlay slot — sits over the band's dark zone (the top
   dissolve); kicker + h2 go directly inside. Same 1120px column as
   the rest of the page, left-aligned to match the hero's convention
   rather than a centered banner treatment. */
.qs-bleed-copy {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: 1120px;
	padding: 2.4rem 1.75rem 0;
	pointer-events: none;
}
.qs-bleed-copy > * {
	pointer-events: auto;
	max-width: 34rem;
}
.qs-bleed-copy p,
.qs-bleed-copy h2 {
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.62), 0 2px 22px rgba(0, 0, 0, 0.7);
}

@media (max-width: 780px) {
	.qs-bleed { height: 46vh; }
	.qs-bleed-copy { padding: 1.6rem 1.2rem 0; }
	.qs-bleed-copy > * { max-width: 100%; }
}

/* ---------------------------------------------------------------
   Integrator extension: the CTA closer variant of .qs-bleed —
   taller band, copy centered both axes over the keyboard macro,
   button clickable (overrides the slot's pointer-events dance).
   --------------------------------------------------------------- */
.qs-bleed-cta { height: 78vh; }
.qs-bleed-copy-center {
	top: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 0 1.75rem;
}
.qs-bleed-copy-center > * { max-width: 38rem; }
.qs-bleed-copy-center .wp-block-buttons {
	display: flex;
	justify-content: center;
	margin-top: 0.9rem;
}
@media (max-width: 780px) {
	.qs-bleed-cta { height: 62vh; }
}

/* ============================================================
   FEATURED DEALS — "Today's featured deals" product-card section
   Append into qsdeals.css. Tokens/color-mix only — no fifth color.
   Mirrors .glass-card's surface recipe (layered gradient +
   color-mix surface + hairline border + top sheen) for the card
   shell; money uses the mono family + tabular-nums throughout.
   ============================================================ */

/* ---- header row: kicker+heading left, "View all deals" right ---- */
.qs-deals-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	margin-bottom: 2.4rem;
}
.qs-deals-viewall {
	margin: 0;
	flex-shrink: 0;
}
.qs-deals-viewall a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	font-weight: 500;
	font-size: 0.92rem;
	transition: color 0.25s ease, gap 0.25s ease;
}
.qs-deals-viewall a span {
	transition: transform 0.25s ease;
}
.qs-deals-viewall a:hover {
	color: var(--wp--preset--color--accent);
}
.qs-deals-viewall a:hover span {
	transform: translateX(3px);
}

/* ---- product grid ---- */
.qs-deals-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 1.25rem;
}

/* ---- card shell: mirrors .glass-card's layered surface ---- */
.qs-deal-card {
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: 16px;
	overflow: hidden;
	background:
		linear-gradient(180deg, color-mix(in oklch, var(--wp--preset--color--ink) 5%, transparent) 0%, transparent 34%),
		color-mix(in oklch, var(--wp--custom--surface) 82%, transparent);
	border: 1px solid color-mix(in oklch, var(--wp--preset--color--ink) 8%, transparent);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	text-decoration: none;
	color: inherit;
	transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.qs-deal-card:hover {
	transform: translateY(-3px);
	border-color: color-mix(in oklch, var(--wp--preset--color--accent) 36%, transparent);
	box-shadow: 0 18px 44px var(--wp--custom--glow);
}
.qs-deal-card:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
	.qs-deal-card {
		transition: border-color 0.25s ease, box-shadow 0.25s ease;
	}
	.qs-deal-card:hover {
		transform: none;
	}
}

/* ---- media: product floats (contain, never cut) on a dark-room ground ---- */
.qs-deal-media {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	padding: 3%;
	box-sizing: border-box;
	background:
		radial-gradient(70% 60% at 50% 46%, color-mix(in oklch, var(--wp--preset--color--accent) 10%, transparent) 0%, transparent 70%),
		radial-gradient(140% 130% at 50% 34%, color-mix(in oklch, var(--wp--preset--color--bg) 52%, #000) 52%, color-mix(in oklch, var(--wp--preset--color--bg) 90%, #000) 100%);
}
.qs-deal-media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
.qs-deal-media::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 14%;
	background: linear-gradient(180deg, transparent 0%, var(--wp--custom--surface) 100%);
	pointer-events: none;
}

/* ---- "Verified" chip: accent-tinted glass pill, top-left overlay ---- */
.qs-deal-chip {
	position: absolute;
	top: 0.7rem;
	left: 0.7rem;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.32rem 0.65rem;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--accent);
	background: color-mix(in oklch, var(--wp--preset--color--bg) 55%, transparent);
	border: 1px solid color-mix(in oklch, var(--wp--preset--color--accent) 40%, transparent);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

/* ---- body: name, meta, price row ---- */
.qs-deal-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 1rem 1.1rem 1.15rem;
}
.qs-deal-name {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: 1rem;
	color: var(--wp--preset--color--ink);
}
.qs-deal-meta {
	margin: 0.2rem 0 0.75rem;
	font-size: 0.82rem;
	color: var(--wp--preset--color--muted);
}
.qs-deal-price-row {
	margin-top: auto;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.6rem;
}
.qs-deal-price {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	min-width: 0;
}
.qs-deal-was,
.qs-deal-now {
	font-family: var(--wp--preset--font-family--mono);
	font-variant-numeric: tabular-nums;
}
.qs-deal-was {
	color: var(--wp--preset--color--muted);
	font-size: 0.8rem;
	text-decoration: line-through;
}
.qs-deal-now {
	color: var(--wp--preset--color--ink);
	font-size: 1.2rem;
	font-weight: 500;
}
.qs-deal-discount {
	flex-shrink: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-variant-numeric: tabular-nums;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--wp--preset--color--accent);
	background: color-mix(in oklch, var(--wp--preset--color--accent) 14%, transparent);
	border-radius: 999px;
	padding: 0.22rem 0.55rem;
}

@media (max-width: 780px) {
	.qs-deals-head {
		align-items: flex-start;
	}
	.qs-deals-viewall {
		flex-basis: 100%;
	}
	.qs-deals-grid {
		gap: 1rem;
	}
}

/* ===========================================================================
   Phase 4 — Storefront (WooCommerce): shop archive / category grid.
   Reuses the approved .qs-deal-card vocabulary; adds the condition-grade badge,
   the shop header, real category filter chips, and a count + sort toolbar.
   No motion here (marketing surfaces only).
   ========================================================================= */

/* ---- shop header ---- */
.qs-shop-head { margin: 0 0 1.4rem; }
.qs-shop-head .qs-eyebrow {
	margin: 0 0 0.5rem;
	font-size: 0.75rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--wp--preset--color--accent);
}
.qs-shop-head .qs-shop-title {
	margin: 0 0 0.55rem;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.04;
	font-size: clamp(2rem, 4.6vw, 3.1rem);
	color: var(--wp--preset--color--ink);
}
.qs-shop-head .qs-lead {
	margin: 0;
	max-width: 54ch;
	color: var(--wp--preset--color--muted);
	font-size: clamp(1rem, 1.5vw, 1.15rem);
}

/* ---- real category filter chips ---- */
.qs-shop-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 1.4rem;
}
.qs-shop-filters .qs-chip {
	font-size: 0.82rem;
	color: var(--wp--preset--color--muted);
	border: 1px solid var(--wp--custom--line);
	border-radius: 999px;
	padding: 0.4rem 0.9rem;
	text-decoration: none;
	transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.qs-shop-filters .qs-chip:hover {
	color: var(--wp--preset--color--ink);
	border-color: var(--wp--custom--line-strong);
}
.qs-shop-filters .qs-chip.is-active {
	color: var(--wp--preset--color--accent);
	border-color: color-mix(in oklch, var(--wp--preset--color--accent) 40%, transparent);
	background: color-mix(in oklch, var(--wp--preset--color--accent) 10%, transparent);
}

/* ---- count + sort toolbar ---- */
.qs-shop-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin: 0 0 1.6rem;
	padding-top: 0.4rem;
	border-top: 1px solid var(--wp--custom--line);
}
.qs-shop-toolbar .qs-result-count {
	font-family: var(--wp--preset--font-family--mono);
	font-variant-numeric: tabular-nums;
	font-size: 0.82rem;
	color: var(--wp--preset--color--muted);
}
.qs-shop-toolbar .woocommerce-ordering { margin: 0; }
.qs-shop-toolbar .woocommerce-ordering select,
.qs-shop-main select.orderby {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.82rem;
	color: var(--wp--preset--color--ink);
	background: color-mix(in oklch, var(--wp--preset--color--bg) 60%, transparent);
	border: 1px solid var(--wp--custom--line);
	border-radius: 10px;
	padding: 0.45rem 0.8rem;
	cursor: pointer;
}

/* ---- the product grid: WooCommerce ul.products -> our grid, li reset ---- */
.qs-shop-main ul.products,
.woocommerce ul.products {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	max-width: 100%;
	list-style: none;
}
.qs-shop-main ul.products::before,
.qs-shop-main ul.products::after { content: none; display: none; }
.woocommerce ul.products li.product.qs-deal-card,
.qs-shop-main ul.products li.product {
	width: auto !important;
	max-width: none;
	min-width: 0;
	margin: 0 !important;
	padding: 0;
	float: none;
	clear: none;
	list-style: none;
}
.qs-shop-main ul.products li.product::before { content: none; }

/* the whole <li> is the card shell (mirrors .qs-deal-card); the <a> fills it */
li.qs-deal-card { display: flex; }
.qs-deal-card .qs-deal-link {
	display: flex;
	flex-direction: column;
	width: 100%;
	color: inherit;
	text-decoration: none;
}

/* ---- condition-grade badge (the new element; the grade on every listing) ---- */
.qs-deal-grade {
	align-self: flex-start;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.68rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	border: 1px solid var(--wp--custom--line);
	border-radius: 6px;
	padding: 0.16rem 0.44rem;
	margin-bottom: 0.55rem;
}
.qs-deal-grade.is-new {
	color: var(--wp--preset--color--accent);
	border-color: color-mix(in oklch, var(--wp--preset--color--accent) 40%, transparent);
}

/* WooCommerce price markup inside our was/now spans */
.qs-deal-was .woocommerce-Price-amount,
.qs-deal-now .woocommerce-Price-amount { font-family: inherit; }
.qs-deal-was bdi { text-decoration: line-through; }

/* remove WooCommerce default sale flash + demo notices on the archive card */
.qs-deal-card .onsale,
.qs-shop-main ul.products .onsale { display: none; }

@media (max-width: 780px) {
	.qs-shop-main ul.products,
	.woocommerce ul.products { gap: 1rem; }
	.qs-shop-toolbar { align-items: flex-start; }
}

/* ===========================================================================
   Phase 4 — Storefront: single product (PDP). Custom two-column layout around
   WooCommerce's real gallery + add-to-cart. The condition grade is the hero.
   ========================================================================= */
.qs-pdp {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(1.5rem, 4vw, 3.2rem);
	align-items: start;
}
.qs-pdp::before, .qs-pdp::after { content: none; } /* kill WooCommerce clearfix */
/* override WooCommerce's .summary/.gallery float + width:48% so the grid tracks control sizing */
.qs-pdp > .qs-pdp-gallery,
.qs-pdp > .qs-pdp-info {
	float: none !important;
	width: auto !important;
	margin: 0;
}

/* ---- custom gallery: main image + clickable thumbnail row ---- */
.qs-pdp-gallery { margin: 0; }
.qs-gallery-main {
	border-radius: 18px; overflow: hidden; border: 1px solid var(--wp--custom--line);
	aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
	padding: 4%; box-sizing: border-box;
	background:
		radial-gradient(66% 58% at 50% 44%, color-mix(in oklch, var(--wp--preset--color--accent) 9%, transparent) 0%, transparent 68%),
		radial-gradient(140% 130% at 50% 30%, color-mix(in oklch, var(--wp--preset--color--bg) 48%, #000) 52%, color-mix(in oklch, var(--wp--preset--color--bg) 88%, #000) 100%);
}
.qs-gallery-main img { display: block; width: 100%; height: 100%; object-fit: contain; }
.qs-gallery-thumbs {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 0.6rem; margin: 0.8rem 0 0;
}
.qs-gallery-thumb {
	padding: 0; border: 1px solid var(--wp--custom--line); border-radius: 10px; overflow: hidden;
	background: none; cursor: pointer; aspect-ratio: 1; opacity: 0.55; transition: opacity 0.2s ease, border-color 0.2s ease;
}
.qs-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qs-gallery-thumb.is-active, .qs-gallery-thumb:hover { opacity: 1; border-color: color-mix(in oklch, var(--wp--preset--color--accent) 45%, transparent); }
.qs-gallery-thumb:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; }
/* hide WooCommerce's default stock text on the PDP — we show our own urgency line */
.qs-pdp .qs-pdp-buy .stock { display: none; }

/* ---- info column ---- */
.qs-pdp-info { display: flex; flex-direction: column; }
.qs-pdp-eyebrow {
	margin: 0 0 0.4rem; font-size: 0.78rem; letter-spacing: 0.12em;
	text-transform: uppercase; color: var(--wp--preset--color--muted);
}
.qs-pdp-eyebrow a { color: inherit; text-decoration: none; }
.qs-pdp-eyebrow a:hover { color: var(--wp--preset--color--accent); }
.qs-pdp-title {
	margin: 0 0 0.9rem; font-family: var(--wp--preset--font-family--display);
	font-weight: 600; letter-spacing: -0.02em; line-height: 1.05;
	font-size: clamp(1.7rem, 3vw, 2.3rem); color: var(--wp--preset--color--ink);
}

/* ---- condition block: the thesis made literal ---- */
.qs-cond-block {
	border: 1px solid color-mix(in oklch, var(--wp--preset--color--accent) 26%, transparent);
	border-radius: 14px; padding: 0.95rem 1.05rem; margin: 0 0 1.3rem;
	background: color-mix(in oklch, var(--wp--preset--color--accent) 7%, transparent);
}
.qs-cond-head { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; }
.qs-cond-lbl { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.qs-cond-val { font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: 1.05rem; color: var(--wp--preset--color--accent); }
.qs-cond-def { margin: 0.45rem 0 0; font-size: 0.9rem; color: var(--wp--preset--color--muted); }

/* ---- price ---- */
.qs-pdp-price { display: flex; align-items: baseline; gap: 0.8rem; flex-wrap: wrap; margin: 0 0 0.35rem; }
.qs-pdp-now { font-family: var(--wp--preset--font-family--mono); font-variant-numeric: tabular-nums; font-size: 2rem; font-weight: 500; color: var(--wp--preset--color--ink); }
.qs-pdp-now .woocommerce-Price-amount { font-family: inherit; }
.qs-pdp-was { font-family: var(--wp--preset--font-family--mono); font-variant-numeric: tabular-nums; font-size: 1rem; color: var(--wp--preset--color--muted); }
.qs-pdp-was bdi { text-decoration: line-through; }
.qs-pdp-disc {
	font-family: var(--wp--preset--font-family--mono); font-size: 0.82rem; font-weight: 600;
	color: var(--wp--preset--color--accent); background: color-mix(in oklch, var(--wp--preset--color--accent) 14%, transparent);
	border-radius: 999px; padding: 0.26rem 0.6rem;
}
.qs-pdp-save { margin: 0 0 1.3rem; font-size: 0.85rem; color: var(--wp--preset--color--muted); }
.qs-pdp-save b { color: var(--wp--preset--color--ink); font-family: var(--wp--preset--font-family--mono); font-variant-numeric: tabular-nums; }

/* ---- add-to-cart (WooCommerce form, restyled to the mock) ---- */
.qs-pdp-buy form.cart { display: flex; gap: 0.7rem; align-items: stretch; margin: 0 0 1.2rem; flex-wrap: wrap; }
.qs-pdp-buy .quantity {
	display: inline-flex; align-items: center;
	border: 1px solid var(--wp--custom--line-strong); border-radius: 12px; overflow: hidden;
}
.qs-pdp-buy .quantity .qty {
	width: 4.2rem; height: 100%; padding: 0.7rem 0.4rem 0.7rem 0.7rem;
	background: transparent; border: 0; color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--mono); font-variant-numeric: tabular-nums; font-size: 1rem; text-align: center;
}
.qs-pdp-buy button.single_add_to_cart_button {
	flex: 1; min-width: 12rem; border: 0; border-radius: 12px; cursor: pointer;
	font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: 1rem; letter-spacing: 0.01em;
	color: var(--wp--preset--color--bg);
	background: linear-gradient(180deg, color-mix(in oklch, var(--wp--preset--color--accent) 90%, var(--wp--preset--color--ink)) 0%, var(--wp--preset--color--accent) 100%);
	padding: 0.85rem 1.2rem; box-shadow: 0 10px 30px var(--wp--custom--glow);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.qs-pdp-buy button.single_add_to_cart_button:hover { transform: translateY(-1px); box-shadow: 0 14px 36px var(--wp--custom--glow); }

/* ---- trust cues + info blocks ---- */
.qs-pdp-trust {
	display: flex; flex-wrap: wrap; gap: 0.5rem 1.3rem;
	padding: 1rem 0; margin: 0 0 1.4rem;
	border-top: 1px solid var(--wp--custom--line); border-bottom: 1px solid var(--wp--custom--line);
}
.qs-pdp-trust div { font-size: 0.85rem; color: var(--wp--preset--color--muted); display: flex; align-items: center; gap: 0.4rem; }
.qs-pdp .ck { color: var(--wp--preset--color--accent); }
.qs-pdp-block { margin: 0 0 1.5rem; }
.qs-pdp-block h2 { font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: 0.95rem; margin: 0 0 0.7rem; color: var(--wp--preset--color--ink); }
.qs-pdp-desc { color: var(--wp--preset--color--muted); font-size: 0.92rem; }
.qs-pdp-checked ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.qs-pdp-checked li { font-size: 0.9rem; color: var(--wp--preset--color--muted); display: flex; align-items: center; gap: 0.55rem; }
.qs-pdp-specs table { width: 100%; border-collapse: collapse; }
.qs-pdp-specs td { padding: 0.5rem 0; border-bottom: 1px solid var(--wp--custom--line); font-size: 0.88rem; }
.qs-pdp-specs td:first-child { color: var(--wp--preset--color--muted); width: 44%; }
.qs-pdp-specs td:last-child { font-family: var(--wp--preset--font-family--mono); font-variant-numeric: tabular-nums; color: var(--wp--preset--color--ink); }

@media (max-width: 840px) {
	/* `1fr` tracks default to min-width:auto, so the widest child (the unit carousel)
	   sized the track to 646px and overflowed the page — minmax(0,1fr) lets it shrink. */
	.qs-pdp { grid-template-columns: minmax(0, 1fr); }
}

/* ===========================================================================
   Phase 4 — Storefront: cart / checkout / account / notices / forms.
   WooCommerce Cart & Checkout are blocks (wc-block-*); my-account is classic.
   theme.json already carries color/type; this layer fixes the white form
   controls + polishes the block components to the dark room. No motion.
   ========================================================================= */

/* ---- FORM CONTROLS (blocks + classic): dark inputs everywhere ---- */
.woocommerce .wc-block-components-text-input input,
.woocommerce .wc-block-components-text-input textarea,
.wc-block-checkout .wc-block-components-text-input input,
.wc-block-components-address-form input,
.wc-block-components-combobox input,
.wc-block-components-select select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-account input.input-text,
.woocommerce input.input-text,
.woocommerce textarea,
.woocommerce select,
.wc-block-components-quantity-selector__input {
	background: color-mix(in oklch, var(--wp--preset--color--bg) 55%, transparent) !important;
	color: var(--wp--preset--color--ink) !important;
	border: 1px solid var(--wp--custom--line) !important;
	border-radius: 10px !important;
	box-shadow: none !important;
}
.woocommerce .wc-block-components-text-input input::placeholder,
.woocommerce form .form-row input.input-text::placeholder,
.woocommerce textarea::placeholder { color: var(--wp--preset--color--muted) !important; opacity: 1; }
.woocommerce .wc-block-components-text-input input:focus,
.wc-block-components-address-form input:focus,
.woocommerce form .form-row input.input-text:focus,
.woocommerce input.input-text:focus,
.woocommerce textarea:focus,
.woocommerce select:focus {
	border-color: color-mix(in oklch, var(--wp--preset--color--accent) 55%, transparent) !important;
	outline: none !important;
	box-shadow: 0 0 0 3px var(--wp--custom--glow) !important;
}
/* floating labels (block checkout) */
.wc-block-components-text-input label,
.wc-block-components-combobox label { color: var(--wp--preset--color--muted) !important; }
.wc-block-components-text-input.is-active label { color: var(--wp--preset--color--accent) !important; }
/* combobox / country-state dropdown menu */
.wc-block-components-combobox-control .components-form-token-field__suggestions-list,
.wc-block-components-form .components-custom-select-control__menu {
	background: color-mix(in oklch, var(--wp--preset--color--bg) 92%, var(--wp--preset--color--ink)) !important;
	color: var(--wp--preset--color--ink) !important;
	border: 1px solid var(--wp--custom--line-strong) !important;
}
/* country / state native <select> wrapper (wc-blocks-components-select) — was white */
.wc-blocks-components-select__container {
	background: color-mix(in oklch, var(--wp--preset--color--bg) 55%, transparent) !important;
	border: 1px solid var(--wp--custom--line) !important;
	border-radius: 10px !important;
}
.wc-blocks-components-select__container:focus-within {
	border-color: color-mix(in oklch, var(--wp--preset--color--accent) 55%, transparent) !important;
	box-shadow: 0 0 0 3px var(--wp--custom--glow) !important;
}
.wc-blocks-components-select__select {
	background: transparent !important; color: var(--wp--preset--color--ink) !important; border: 0 !important;
}
.wc-blocks-components-select__label { color: var(--wp--preset--color--muted) !important; }
.wc-blocks-components-select__select option { background: color-mix(in oklch, var(--wp--preset--color--bg) 96%, var(--wp--preset--color--ink)); color: var(--wp--preset--color--ink); }
/* radio inner circle bg (block shipping/payment) */
.wc-block-components-radio-control__input { background: color-mix(in oklch, var(--wp--preset--color--bg) 55%, transparent) !important; }

/* ---- selected shipping/payment radio options (block) ---- */
.wc-block-components-radio-control__option {
	border: 1px solid var(--wp--custom--line);
	border-radius: 12px;
	margin-bottom: 0.6rem;
	padding: 0.9rem 1rem 0.9rem 2.6rem;
	background: color-mix(in oklch, var(--wp--custom--surface) 55%, transparent);
}
.wc-block-components-radio-control__option--checked {
	border-color: color-mix(in oklch, var(--wp--preset--color--accent) 45%, transparent);
	background: color-mix(in oklch, var(--wp--preset--color--accent) 8%, transparent);
}
.wc-block-components-radio-control__input { border-color: var(--wp--custom--line-strong) !important; }
.wc-block-components-radio-control__input:checked { border-color: var(--wp--preset--color--accent) !important; }
.wc-block-components-radio-control__input:checked::after { background: var(--wp--preset--color--accent) !important; }

/* ---- checkboxes ---- */
.wc-block-components-checkbox__input:checked,
.woocommerce input[type="checkbox"]:checked { accent-color: var(--wp--preset--color--accent); }
.wc-block-components-checkbox__mark { fill: var(--wp--preset--color--bg); }

/* ---- panels: card borders in the cart/checkout ---- */
.wc-block-components-panel,
.wp-block-woocommerce-checkout-order-summary-block,
.wc-block-checkout__sidebar > .wc-block-components-sidebar,
.wc-block-cart__sidebar .wc-block-components-sidebar {
	border-color: var(--wp--custom--line) !important;
}
.wc-block-components-totals-item,
.wc-block-components-totals-footer-item { color: var(--wp--preset--color--muted); }
.wc-block-components-totals-footer-item { color: var(--wp--preset--color--ink); }
.wc-block-components-totals-item__value,
.wc-block-formatted-money-amount {
	font-family: var(--wp--preset--font-family--mono); font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--ink);
}
.wc-block-components-product-price__regular { color: var(--wp--preset--color--muted); text-decoration: line-through; }
.wc-block-components-product-badge,
.wc-block-components-sale-badge {
	background: color-mix(in oklch, var(--wp--preset--color--accent) 14%, transparent) !important;
	color: var(--wp--preset--color--accent) !important;
	border: 0 !important;
}
/* cart/checkout section step titles + table headers */
.wc-block-components-checkout-step__title,
.wc-block-cart-items__header,
.wc-block-components-title {
	font-family: var(--wp--preset--font-family--display) !important;
	color: var(--wp--preset--color--ink) !important;
}
.wc-block-components-checkout-step__description,
.wc-block-cart-items__header { color: var(--wp--preset--color--muted); }
.wc-block-components-order-summary-item__quantity {
	background: color-mix(in oklch, var(--wp--preset--color--bg) 70%, transparent) !important;
	border: 1px solid var(--wp--custom--line-strong) !important;
	color: var(--wp--preset--color--ink) !important;
}

/* ---- NOTICES (block + classic) to the dark palette ---- */
.wc-block-components-notice-banner,
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews {
	background: color-mix(in oklch, var(--wp--custom--surface) 88%, transparent) !important;
	color: var(--wp--preset--color--ink) !important;
	border: 1px solid var(--wp--custom--line) !important;
	border-left-width: 3px !important;
	border-radius: 12px !important;
}
.wc-block-components-notice-banner.is-success, .woocommerce-message { border-left-color: var(--wp--preset--color--accent) !important; }
.wc-block-components-notice-banner.is-info, .woocommerce-info { border-left-color: color-mix(in oklch, var(--wp--preset--color--muted) 70%, transparent) !important; }
.wc-block-components-notice-banner.is-error, .woocommerce-error {
	border-left-color: oklch(0.62 0.19 25) !important;
	background: color-mix(in oklch, oklch(0.62 0.19 25) 8%, var(--wp--custom--surface)) !important;
}
.wc-block-components-notice-banner__content a, .woocommerce-error a, .woocommerce-message a { color: var(--wp--preset--color--accent); }

/* ---- CLASSIC surfaces: my-account, order-received, tables ---- */
.woocommerce-account .u-column1, .woocommerce-account .u-column2,
.woocommerce .col2-set .col-1, .woocommerce .col2-set .col-2 { float: none; width: 100%; }
.woocommerce form.login, .woocommerce form.register,
.woocommerce-MyAccount-content, .woocommerce-order {
	border: 1px solid var(--wp--custom--line); border-radius: 16px;
	background: color-mix(in oklch, var(--wp--custom--surface) 60%, transparent);
	padding: 1.5rem;
}
/* account nav tabs */
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.woocommerce-MyAccount-navigation li a {
	display: inline-block; padding: 0.5rem 0.9rem; border-radius: 999px;
	border: 1px solid var(--wp--custom--line); color: var(--wp--preset--color--muted); font-size: 0.88rem; text-decoration: none;
}
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover {
	color: var(--wp--preset--color--accent); border-color: color-mix(in oklch, var(--wp--preset--color--accent) 40%, transparent);
	background: color-mix(in oklch, var(--wp--preset--color--accent) 8%, transparent);
}
/* tables (orders, order details, addresses) */
.woocommerce table.shop_table, .woocommerce-orders-table, .woocommerce-table--order-details {
	border: 1px solid var(--wp--custom--line) !important; border-radius: 12px; border-collapse: separate; border-spacing: 0;
	background: color-mix(in oklch, var(--wp--custom--surface) 55%, transparent);
}
.woocommerce table.shop_table th, .woocommerce table.shop_table td {
	border-top: 1px solid var(--wp--custom--line) !important; color: var(--wp--preset--color--ink); padding: 0.85rem 1rem;
}
.woocommerce table.shop_table thead th { color: var(--wp--preset--color--muted); font-family: var(--wp--preset--font-family--display); }
.woocommerce table.shop_table .amount { font-family: var(--wp--preset--font-family--mono); font-variant-numeric: tabular-nums; }

/* classic buttons (my-account, order actions) — secondary glass; primary uses theme.json */
.woocommerce a.button, .woocommerce button.button:not(.single_add_to_cart_button),
.woocommerce input.button, .woocommerce-MyAccount-content .button {
	background: color-mix(in oklch, var(--wp--preset--color--ink) 6%, var(--wp--custom--surface));
	color: var(--wp--preset--color--ink); border: 1px solid var(--wp--custom--line-strong);
	border-radius: 999px; padding: 0.6rem 1.2rem; font-weight: 600;
}
.woocommerce a.button:hover, .woocommerce button.button:not(.single_add_to_cart_button):hover {
	border-color: color-mix(in oklch, var(--wp--preset--color--accent) 45%, transparent); color: var(--wp--preset--color--ink);
}
.woocommerce a.button.wc-forward, .woocommerce-message a.button {
	background: var(--wp--preset--color--accent); color: var(--wp--preset--color--bg); border-color: transparent;
}
/* order-received confirmation */
.woocommerce-order .woocommerce-thankyou-order-received {
	font-family: var(--wp--preset--font-family--display); font-size: 1.4rem; color: var(--wp--preset--color--ink);
}
.woocommerce ul.order_details {
	list-style: none; display: flex; flex-wrap: wrap; gap: 1.2rem; margin: 1.2rem 0; padding: 1.2rem;
	border: 1px solid var(--wp--custom--line); border-radius: 12px;
}
.woocommerce ul.order_details li { border: 0 !important; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--wp--preset--color--muted); }
.woocommerce ul.order_details li strong { display: block; font-size: 1rem; text-transform: none; letter-spacing: 0; color: var(--wp--preset--color--ink); font-family: var(--wp--preset--font-family--mono); }

/* wide account layout on desktop */
@media (min-width: 781px) {
	.woocommerce-account .woocommerce { display: grid; grid-template-columns: 220px 1fr; gap: 2rem; align-items: start; }
	.woocommerce-account .woocommerce-MyAccount-navigation { grid-column: 1; }
	.woocommerce-account .woocommerce-MyAccount-navigation ul { flex-direction: column; }
	.woocommerce-account .woocommerce-MyAccount-content { grid-column: 2; margin: 0; }
	/* but keep the login/register (logged-out) full width */
	.woocommerce-account:not(.logged-in) .woocommerce { display: block; }
}

/* ===========================================================================
   Phase 4 — Storefront enhancements: low-stock urgency, condition filter,
   PDP related row, multi-image gallery thumbs, empty cart, login CTA.
   ========================================================================= */

/* ---- low-stock badge on cards (top-right of media) ---- */
.qs-deal-stock {
	position: absolute; top: 0.7rem; right: 0.7rem; z-index: 1;
	font-family: var(--wp--preset--font-family--mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em;
	color: var(--wp--preset--color--ink);
	background: color-mix(in oklch, var(--wp--preset--color--ink) 16%, var(--wp--preset--color--bg));
	border: 1px solid color-mix(in oklch, var(--wp--preset--color--ink) 40%, transparent);
	border-radius: 999px; padding: 0.26rem 0.6rem;
	backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}

/* ---- PDP stock urgency line ---- */
.qs-pdp-stock {
	display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 0 1.1rem;
	font-size: 0.88rem; color: var(--wp--preset--color--ink); font-weight: 500;
}
.qs-pdp-stock .qs-stock-dot {
	width: 8px; height: 8px; border-radius: 50%; background: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 3px color-mix(in oklch, var(--wp--preset--color--accent) 22%, transparent);
}

/* ---- "Shop by condition" grade filter row ---- */
.qs-shop-filters.qs-shop-grades { margin-top: -0.6rem; }
.qs-filter-label {
	font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--wp--preset--color--muted); align-self: center; margin-right: 0.2rem;
}

/* ---- PDP "More deals" related row ---- */
.qs-pdp-related { margin-top: clamp(2.5rem, 6vw, 4rem); padding-top: 2.2rem; border-top: 1px solid var(--wp--custom--line); }
.qs-pdp-related .qs-deals-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.3rem; }
.qs-pdp-related h2 { font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: 1.35rem; margin: 0; letter-spacing: -0.01em; }

/* ---- WooCommerce product gallery: multi-image thumbnails row ---- */
.qs-pdp-gallery .flex-viewport { border-radius: 18px; overflow: hidden; }
.qs-pdp-gallery ol.flex-control-thumbs {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; margin: 0.7rem 0 0; padding: 0; list-style: none;
}
.qs-pdp-gallery ol.flex-control-thumbs li { width: auto; margin: 0; }
.qs-pdp-gallery ol.flex-control-thumbs img {
	width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px;
	border: 1px solid var(--wp--custom--line); opacity: 0.55; cursor: pointer; transition: opacity 0.2s ease, border-color 0.2s ease;
}
.qs-pdp-gallery ol.flex-control-thumbs img.flex-active,
.qs-pdp-gallery ol.flex-control-thumbs img:hover { opacity: 1; border-color: color-mix(in oklch, var(--wp--preset--color--accent) 45%, transparent); }

/* ---- empty cart state ---- */
.wc-block-cart__empty-cart__title,
.is-large.wc-block-cart .wp-block-heading { font-family: var(--wp--preset--font-family--display) !important; color: var(--wp--preset--color--ink); }
.wp-block-woocommerce-empty-cart-block { text-align: center; padding: 2rem 1rem; }

/* ---- login as primary accent CTA (my-account) ---- */
.woocommerce form.login button.woocommerce-button,
.woocommerce form.login button[name="login"],
.woocommerce-form-login button[name="login"] {
	background: linear-gradient(180deg, color-mix(in oklch, var(--wp--preset--color--accent) 90%, var(--wp--preset--color--ink)) 0%, var(--wp--preset--color--accent) 100%) !important;
	color: var(--wp--preset--color--bg) !important;
	border: 0 !important;
}

/* ===========================================================================
   Phase A — The Verification Dossier (PDP trust centerpiece). A certificate:
   grade + inspection ID + stamped checks + where/when graded, with a seal.
   ========================================================================= */
.qs-dossier {
	position: relative;
	margin: 0.4rem 0 1.6rem;
	border: 1px solid color-mix(in oklch, var(--wp--preset--color--accent) 26%, var(--wp--custom--line));
	border-radius: 16px;
	padding: 1.3rem 1.4rem 1.15rem;
	background:
		radial-gradient(130% 90% at 100% 0%, color-mix(in oklch, var(--wp--preset--color--accent) 10%, transparent), transparent 55%),
		color-mix(in oklch, var(--wp--custom--surface) 80%, transparent);
	overflow: hidden;
}
.qs-dossier::before { /* certificate inner hairline */
	content: ""; position: absolute; inset: 5px; border: 1px solid color-mix(in oklch, var(--wp--preset--color--muted) 12%, transparent);
	border-radius: 12px; pointer-events: none;
}
.qs-dossier-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.qs-dossier-kicker { margin: 0; font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: 0.95rem; color: var(--wp--preset--color--ink); letter-spacing: -0.01em; }
.qs-dossier-id { margin: 0.25rem 0 0; font-family: var(--wp--preset--font-family--mono); font-variant-numeric: tabular-nums; font-size: 0.78rem; letter-spacing: 0.06em; color: var(--wp--preset--color--muted); }
.qs-dossier-seal { color: var(--wp--preset--color--accent); flex-shrink: 0; line-height: 0; opacity: 0.92; }
.qs-dossier-seal .qs-seal { display: block; }
.qs-dossier-grade { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; margin: 1rem 0 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--wp--custom--line); }
.qs-dossier-grade .lbl { font-family: var(--wp--preset--font-family--mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.qs-dossier-grade .val { font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: 1.05rem; color: var(--wp--preset--color--accent); }
.qs-dossier-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.42rem; }
.qs-dossier-checks li { font-size: 0.9rem; color: var(--wp--preset--color--muted); display: flex; gap: 0.55rem; align-items: baseline; }
.qs-dossier-checks .ck { color: var(--wp--preset--color--accent); font-size: 0.82rem; flex-shrink: 0; }
.qs-dossier-meta { margin: 1rem 0 0; padding-top: 0.85rem; border-top: 1px solid var(--wp--custom--line); font-family: var(--wp--preset--font-family--mono); font-size: 0.68rem; letter-spacing: 0.03em; color: var(--wp--preset--color--muted); }

/* ---- Grade System: confidence meter + explainer ---- */
.qs-grade-meter { display: inline-flex; gap: 3px; align-items: center; }
.qs-cond-head .qs-grade-meter { margin-left: auto; }
.qs-meter-bar { width: 6px; height: 15px; border-radius: 2px; background: color-mix(in oklch, var(--wp--preset--color--muted) 22%, transparent); }
.qs-meter-bar.on { background: var(--wp--preset--color--accent); }
.qs-meter-label { font-family: var(--wp--preset--font-family--mono); font-size: 0.72rem; color: var(--wp--preset--color--muted); margin-left: 0.45rem; }

.qs-grades-explainer { margin: 0 0 1.4rem; border: 1px solid var(--wp--custom--line); border-radius: 12px; overflow: hidden; background: color-mix(in oklch, var(--wp--custom--surface) 50%, transparent); }
.qs-grades-explainer summary { cursor: pointer; padding: 0.85rem 1rem; font-size: 0.88rem; color: var(--wp--preset--color--ink); list-style: none; display: flex; align-items: center; gap: 0.55rem; }
.qs-grades-explainer summary::-webkit-details-marker { display: none; }
.qs-grades-explainer summary::before { content: "+"; color: var(--wp--preset--color--accent); font-family: var(--wp--preset--font-family--mono); font-size: 1.05rem; line-height: 1; }
.qs-grades-explainer[open] summary::before { content: "\2013"; }
.qs-grades-explainer summary:hover { color: var(--wp--preset--color--accent); }
.qs-grades-list { padding: 0 1rem 0.9rem; display: grid; gap: 0.75rem; }
.qs-grade-row { padding-top: 0.75rem; border-top: 1px solid var(--wp--custom--line); }
.qs-grade-row-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.qs-grade-name { font-weight: 600; font-size: 0.92rem; color: var(--wp--preset--color--ink); display: flex; align-items: center; gap: 0.5rem; }
.qs-grade-you { font-family: var(--wp--preset--font-family--mono); font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp--preset--color--accent); border: 1px solid color-mix(in oklch, var(--wp--preset--color--accent) 40%, transparent); border-radius: 6px; padding: 0.1rem 0.4rem; }
.qs-grade-row.is-current .qs-grade-name { color: var(--wp--preset--color--accent); }
.qs-grade-desc { margin: 0.3rem 0 0; font-size: 0.85rem; color: var(--wp--preset--color--muted); max-width: 60ch; }

/* ===========================================================================
   Phase A — Cart drawer + free-shipping nudge, and the sticky buy bar.
   ========================================================================= */
html.qs-drawer-lock { overflow: hidden; }

.qs-cart-drawer { position: fixed; inset: 0; z-index: 200; visibility: hidden; pointer-events: none; }
.qs-cart-drawer.is-open { visibility: visible; pointer-events: auto; }
.qs-drawer-scrim { position: absolute; inset: 0; background: color-mix(in oklch, var(--wp--preset--color--bg) 52%, transparent); opacity: 0; transition: opacity 0.3s ease; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.qs-cart-drawer.is-open .qs-drawer-scrim { opacity: 1; }
.qs-drawer-panel {
	position: absolute; top: 0; right: 0; height: 100%; width: min(420px, 92vw);
	display: flex; flex-direction: column;
	background: color-mix(in oklch, var(--wp--custom--surface) 94%, var(--wp--preset--color--bg));
	border-left: 1px solid var(--wp--custom--line-strong);
	transform: translateX(100%); transition: transform 0.34s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: -24px 0 70px rgba(0, 0, 0, 0.45);
}
.qs-cart-drawer.is-open .qs-drawer-panel { transform: none; }
.qs-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 1.2rem 1.3rem; border-bottom: 1px solid var(--wp--custom--line); }
.qs-drawer-title { font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: 1.1rem; color: var(--wp--preset--color--ink); }
.qs-drawer-x { background: none; border: 0; color: var(--wp--preset--color--muted); font-size: 1.7rem; line-height: 1; cursor: pointer; padding: 0 0.3rem; }
.qs-drawer-x:hover { color: var(--wp--preset--color--ink); }
.qs-drawer-nudge { padding: 0.95rem 1.3rem; border-bottom: 1px solid var(--wp--custom--line); }
.qs-drawer-nudge-msg { margin: 0 0 0.55rem; font-size: 0.85rem; color: var(--wp--preset--color--muted); }
.qs-drawer-nudge-msg b { color: var(--wp--preset--color--ink); font-weight: 600; }
.qs-drawer-nudge.is-complete .qs-drawer-nudge-msg b { color: var(--wp--preset--color--accent); }
.qs-drawer-nudge-track { height: 6px; border-radius: 999px; background: color-mix(in oklch, var(--wp--preset--color--muted) 18%, transparent); overflow: hidden; }
.qs-drawer-nudge-fill { display: block; height: 100%; width: 0; border-radius: 999px; transition: width 0.4s ease;
	background: linear-gradient(90deg, color-mix(in oklch, var(--wp--preset--color--accent) 70%, var(--wp--preset--color--ink)), var(--wp--preset--color--accent)); }
.qs-drawer-body { flex: 1; overflow-y: auto; padding: 0.5rem 1.3rem 1.3rem; }
.qs-drawer-body ul.cart_list, .qs-drawer-body ul.product_list_widget { list-style: none; margin: 0; padding: 0; }
.qs-drawer-body li.mini_cart_item { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.8rem; padding: 0.9rem 0; border-bottom: 1px solid var(--wp--custom--line); position: relative; font-size: 0.88rem; }
.qs-drawer-body li.mini_cart_item a:not(.remove) { color: var(--wp--preset--color--ink); flex: 1; }
.qs-drawer-body li.mini_cart_item img { width: 54px !important; height: 54px; object-fit: cover; border-radius: 8px; border: 1px solid var(--wp--custom--line); order: -1; margin: 0 !important; float: none !important; }
.qs-drawer-body li.mini_cart_item .quantity { width: 100%; color: var(--wp--preset--color--muted); font-family: var(--wp--preset--font-family--mono); font-size: 0.8rem; }
.qs-drawer-body a.remove { color: var(--wp--preset--color--muted) !important; border: 1px solid var(--wp--custom--line); }
.qs-drawer-body a.remove:hover { color: var(--wp--preset--color--ink) !important; background: transparent !important; }
.qs-drawer-body .woocommerce-mini-cart__total { display: flex; justify-content: space-between; align-items: baseline; padding: 1rem 0 0.9rem; font-size: 1rem; color: var(--wp--preset--color--ink); border-top: 1px solid var(--wp--custom--line-strong); margin-top: 0.4rem; }
.qs-drawer-body .woocommerce-mini-cart__total .amount { font-family: var(--wp--preset--font-family--mono); font-variant-numeric: tabular-nums; }
.qs-drawer-body .woocommerce-mini-cart__buttons { display: grid; gap: 0.6rem; margin: 0; padding: 0; }
.qs-drawer-body .woocommerce-mini-cart__buttons .button { text-align: center; margin: 0; }
.qs-drawer-body .woocommerce-mini-cart__buttons .checkout {
	background: linear-gradient(180deg, color-mix(in oklch, var(--wp--preset--color--accent) 90%, var(--wp--preset--color--ink)) 0%, var(--wp--preset--color--accent) 100%) !important;
	color: var(--wp--preset--color--bg) !important; border: 0 !important;
}
.qs-drawer-body p.woocommerce-mini-cart__empty-message, .qs-drawer-body .cart_list.empty { color: var(--wp--preset--color--muted); }

/* sticky buy bar (PDP) */
.qs-sticky-buy {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 150; transform: translateY(115%); transition: transform 0.3s ease;
	display: flex; align-items: center; gap: 1rem; padding: 0.7rem clamp(1rem, 3vw, 2rem);
	background: color-mix(in oklch, var(--wp--preset--color--bg) 80%, transparent);
	-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
	border-top: 1px solid var(--wp--custom--line-strong);
}
.qs-sticky-buy.is-visible { transform: none; }
.qs-sticky-info { display: flex; align-items: center; gap: 0.8rem; min-width: 0; }
.qs-sticky-info img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; border: 1px solid var(--wp--custom--line); }
.qs-sticky-name { margin: 0; font-weight: 600; font-size: 0.9rem; color: var(--wp--preset--color--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }
.qs-sticky-price { margin: 0; font-family: var(--wp--preset--font-family--mono); font-variant-numeric: tabular-nums; color: var(--wp--preset--color--muted); font-size: 0.85rem; }
.qs-sticky-price .amount { color: var(--wp--preset--color--ink); }
.qs-sticky-price del .amount { color: var(--wp--preset--color--muted); }
.qs-sticky-add {
	margin-left: auto; border: 0; border-radius: 999px; cursor: pointer; font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: 0.95rem;
	color: var(--wp--preset--color--bg); white-space: nowrap; padding: 0.72rem 1.6rem;
	background: linear-gradient(180deg, color-mix(in oklch, var(--wp--preset--color--accent) 90%, var(--wp--preset--color--ink)) 0%, var(--wp--preset--color--accent) 100%);
}
.qs-sticky-add:hover { transform: translateY(-1px); }
.single_add_to_cart_button.loading { opacity: 0.6; pointer-events: none; }
@media (max-width: 520px) { .qs-sticky-name { max-width: 32vw; } .qs-sticky-add { padding: 0.7rem 1.15rem; } }

@media (prefers-reduced-motion: reduce) {
	.qs-drawer-panel, .qs-drawer-scrim, .qs-sticky-buy, .qs-drawer-nudge-fill, .qs-sticky-add { transition: none; }
}

/* ===========================================================================
   Serialized units — the "Pick your unit" picker on a grouped-listing PDP.
   ========================================================================= */
.qs-pick { margin: 0.4rem 0 1.5rem; }
.qs-pick-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.qs-pick-title { font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: 1.2rem; color: var(--wp--preset--color--ink); }
.qs-pick-count { font-family: var(--wp--preset--font-family--mono); font-variant-numeric: tabular-nums; font-size: 0.78rem; color: var(--wp--preset--color--accent); border: 1px solid color-mix(in oklch, var(--wp--preset--color--accent) 40%, transparent); border-radius: 999px; padding: 0.22rem 0.65rem; }
.qs-pick-sub { margin: 0.45rem 0 1rem; color: var(--wp--preset--color--muted); font-size: 0.9rem; max-width: 52ch; }
.qs-pick-list { display: flex; gap: 0.7rem; overflow-x: auto; padding: 0.15rem 0.15rem 0.5rem; scroll-snap-type: x proximity; scrollbar-width: thin; }
.qs-unit-card { position: relative; flex: 0 0 auto; width: 152px; scroll-snap-align: start; text-align: left; cursor: pointer; padding: 0; overflow: hidden;
	background: color-mix(in oklch, var(--wp--custom--surface) 60%, transparent); border: 1px solid var(--wp--custom--line); border-radius: 13px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }
.qs-unit-card:hover { border-color: var(--wp--custom--line-strong); transform: translateY(-2px); }
.qs-unit-card.is-selected { border-color: var(--wp--preset--color--accent); box-shadow: 0 0 0 1px color-mix(in oklch, var(--wp--preset--color--accent) 45%, transparent); }
.qs-unit-thumb { display: block; aspect-ratio: 1 / 1; overflow: hidden;
	background: radial-gradient(70% 60% at 50% 44%, color-mix(in oklch, var(--wp--preset--color--accent) 9%, transparent), transparent 70%), color-mix(in oklch, var(--wp--preset--color--bg) 60%, #000); }
.qs-unit-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 8%; box-sizing: border-box; display: block; }
.qs-unit-info { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.55rem 0.7rem 0.7rem; }
.qs-unit-serial { font-family: var(--wp--preset--font-family--mono); font-size: 0.7rem; letter-spacing: 0.03em; color: var(--wp--preset--color--muted); }
.qs-unit-price { font-family: var(--wp--preset--font-family--mono); font-variant-numeric: tabular-nums; font-weight: 600; color: var(--wp--preset--color--ink); font-size: 0.98rem; }
.qs-unit-price .amount { font-family: inherit; }
.qs-unit-flag { position: absolute; top: 0.5rem; right: 0.5rem; font-family: var(--wp--preset--font-family--mono); font-size: 0.58rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--wp--preset--color--accent); background: color-mix(in oklch, var(--wp--preset--color--accent) 14%, transparent); border: 1px solid color-mix(in oklch, var(--wp--preset--color--accent) 34%, transparent); border-radius: 6px; padding: 0.12rem 0.4rem; }
.qs-pick-selected { margin-top: 1.1rem; }
.qs-pick-price { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: clamp(1.7rem, 4vw, 2.1rem); color: var(--wp--preset--color--ink); font-variant-numeric: tabular-nums; }
.qs-pick-price del, .qs-pick-price del .amount { color: var(--wp--preset--color--muted); font-size: 0.62em; font-weight: 400; }
.qs-pick-price ins { text-decoration: none; }
.qs-pick-note { margin: 0.45rem 0 0; font-size: 0.85rem; color: var(--wp--preset--color--muted); }
.qs-pick-add { margin-top: 0.95rem; width: 100%; border: 0; border-radius: 999px; cursor: pointer; font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: 1.02rem; color: var(--wp--preset--color--bg);
	background: linear-gradient(180deg, color-mix(in oklch, var(--wp--preset--color--accent) 90%, var(--wp--preset--color--ink)) 0%, var(--wp--preset--color--accent) 100%); padding: 0.92rem 1.5rem; transition: transform 0.15s ease, opacity 0.2s ease; }
.qs-pick-add:hover { transform: translateY(-1px); }
.qs-pick-add.loading { opacity: 0.6; pointer-events: none; }
.qs-pick-reassure { margin: 0.75rem 0 0; font-size: 0.82rem; color: var(--wp--preset--color--muted); }
.qs-pick-reassure .ck { color: var(--wp--preset--color--accent); }
.qs-pick-reassure b { color: var(--wp--preset--color--ink); font-family: var(--wp--preset--font-family--mono); }
.qs-pick-empty { color: var(--wp--preset--color--muted); }
@media (prefers-reduced-motion: reduce) { .qs-unit-card, .qs-pick-add { transition: none; } }

/* ---- Track B: per-unit savings + urgency in the picker ---- */
.qs-pick-priceline { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.6rem; }
.qs-pick-now { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: clamp(1.7rem, 4vw, 2.1rem); color: var(--wp--preset--color--ink); font-variant-numeric: tabular-nums; }
.qs-pick-now .amount { font-family: inherit; }
.qs-pick-was { font-family: var(--wp--preset--font-family--mono); font-variant-numeric: tabular-nums; color: var(--wp--preset--color--muted); text-decoration: line-through; font-size: 1rem; }
.qs-pick-was[hidden], .qs-pick-disc[hidden], .qs-pick-save[hidden] { display: none; }
.qs-pick-disc { font-family: var(--wp--preset--font-family--mono); font-weight: 600; font-size: 0.82rem; color: var(--wp--preset--color--accent); background: color-mix(in oklch, var(--wp--preset--color--accent) 14%, transparent); border-radius: 999px; padding: 0.2rem 0.6rem; }
.qs-pick-save { margin: 0.5rem 0 0; font-size: 0.92rem; color: var(--wp--preset--color--muted); }
.qs-pick-save b { color: var(--wp--preset--color--ink); font-variant-numeric: tabular-nums; }
.qs-pick-urgency { margin: 0.55rem 0 0; font-size: 0.85rem; color: var(--wp--preset--color--muted); display: flex; align-items: center; gap: 0.45rem; }
.qs-pick-urgency b { color: var(--wp--preset--color--ink); }
.qs-pick-urgency .qs-stock-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--wp--preset--color--accent); box-shadow: 0 0 8px color-mix(in oklch, var(--wp--preset--color--accent) 70%, transparent); flex-shrink: 0; }

/* ---- Track B: "From" prefix + sold-out cards ---- */
.qs-deal-from { font-family: var(--wp--preset--font-family--body); font-weight: 500; font-size: 0.72rem; color: var(--wp--preset--color--muted); margin-right: 0.28rem; }
.qs-deal-stock.is-soldout { color: var(--wp--preset--color--muted); background: color-mix(in oklch, var(--wp--preset--color--muted) 16%, transparent); border-color: var(--wp--custom--line); }
.qs-deal-card.is-soldout .qs-deal-media img { filter: saturate(0.55) brightness(0.72); }
.qs-deal-soldout-note { font-family: var(--wp--preset--font-family--mono); font-size: 0.74rem; letter-spacing: 0.02em; color: var(--wp--preset--color--muted); }

/* ===========================================================================
   Track C — product search + branded empty states.
   ========================================================================= */
.qs-search { position: relative; display: flex; align-items: center; }
.qs-search-icon { position: absolute; left: 0.7rem; color: var(--wp--preset--color--muted); pointer-events: none; }
/* NOTE: the global input[type="search"] rule above is (0,1,1); this must out-specify it
   or the left padding collapses and the magnifier icon sits on top of the text. */
.qs-search input.qs-search-input {
	width: 100%; font-family: var(--wp--preset--font-family--body); font-size: 0.88rem;
	color: var(--wp--preset--color--ink);
	background: color-mix(in oklch, var(--wp--preset--color--bg) 55%, transparent);
	border: 1px solid var(--wp--custom--line); border-radius: 999px;
	padding: 0.5rem 0.95rem 0.5rem 2.35rem; transition: border-color 0.2s ease, background 0.2s ease;
	-webkit-appearance: none; appearance: none;
}
.qs-search-input::placeholder { color: color-mix(in oklch, var(--wp--preset--color--muted) 80%, transparent); }
.qs-search-input:focus { outline: none; border-color: color-mix(in oklch, var(--wp--preset--color--accent) 55%, transparent); background: color-mix(in oklch, var(--wp--preset--color--bg) 75%, transparent); }
.qs-search-input:focus-visible { box-shadow: 0 0 0 3px color-mix(in oklch, var(--wp--preset--color--accent) 26%, transparent); }
.qs-search-header { width: min(240px, 26vw); margin-left: auto; margin-right: 0.9rem; }
@media (max-width: 900px) { .qs-search-header { display: none; } }
.qs-shop-search { max-width: 420px; margin: 0 0 1.3rem; }
@media (max-width: 900px) { .qs-shop-search { max-width: none; } }

.qs-empty { text-align: center; padding: clamp(2.4rem, 7vw, 4.5rem) 1.2rem; border: 1px dashed var(--wp--custom--line); border-radius: 18px; background: color-mix(in oklch, var(--wp--custom--surface) 38%, transparent); }
.qs-empty-mark { display: block; font-size: 2rem; line-height: 1; color: color-mix(in oklch, var(--wp--preset--color--accent) 70%, transparent); margin-bottom: 0.9rem; }
.qs-empty-title { font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: clamp(1.2rem, 2.6vw, 1.6rem); color: var(--wp--preset--color--ink); margin: 0 0 0.5rem; }
.qs-empty-sub { margin: 0 auto 1.4rem; max-width: 46ch; color: var(--wp--preset--color--muted); font-size: 0.95rem; }
.qs-empty-cta { display: inline-block; border-radius: 999px; padding: 0.7rem 1.5rem; font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: 0.95rem; text-decoration: none; color: var(--wp--preset--color--bg);
	background: linear-gradient(180deg, color-mix(in oklch, var(--wp--preset--color--accent) 90%, var(--wp--preset--color--ink)) 0%, var(--wp--preset--color--accent) 100%); }
.qs-empty-cta:hover { color: var(--wp--preset--color--bg); transform: translateY(-1px); }

/* branded empty cart drawer + suppress the free-ship nudge at zero */
.qs-drawer-nudge.is-empty { display: none; }
.qs-drawer-empty { text-align: center; padding: 2.2rem 1rem; }
.qs-drawer-empty-title { font-family: var(--wp--preset--font-family--display); font-weight: 600; color: var(--wp--preset--color--ink); margin: 0 0 0.4rem; font-size: 1.05rem; }
.qs-drawer-empty-sub { margin: 0 0 1.2rem; color: var(--wp--preset--color--muted); font-size: 0.9rem; }

/* ---- rethought shop filters: aligned Condition + Price rows with labels ---- */
.qs-shop-filters { align-items: center; margin-bottom: 0.7rem; }
.qs-shop-filters:last-of-type { margin-bottom: 1.4rem; }
.qs-filter-label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	min-width: 4.6rem; flex-shrink: 0;
}
@media (max-width: 520px) { .qs-filter-label { min-width: 100%; margin-bottom: 0.1rem; } }

/* ---- consistent header cart: icon + live count on every page ---- */
.qs-cart-link {
	position: relative; display: inline-flex; align-items: center; gap: 0.5rem; line-height: 1;
	padding: 0.5rem 1rem; border-radius: 999px;
	border: 1px solid color-mix(in oklch, var(--wp--preset--color--accent) 42%, transparent);
	background: color-mix(in oklch, var(--wp--preset--color--accent) 12%, transparent);
	color: var(--wp--preset--color--ink) !important; font-weight: 600; font-size: 0.9rem;
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.qs-cart-link:hover {
	background: color-mix(in oklch, var(--wp--preset--color--accent) 20%, transparent);
	border-color: var(--wp--preset--color--accent);
	transform: translateY(-1px);
}
.qs-cart-link svg { display: block; }
.qs-cart-label { font-family: var(--wp--preset--font-family--display); letter-spacing: -0.01em; }
.qs-cart-count {
	min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box;
	display: inline-flex; align-items: center; justify-content: center;
	font-family: var(--wp--preset--font-family--mono); font-variant-numeric: tabular-nums; font-size: 0.72rem; font-weight: 700; line-height: 1;
	color: var(--wp--preset--color--bg); background: var(--wp--preset--color--accent); border-radius: 999px;
}
.qs-cart-count[hidden] { display: none; }
@media (max-width: 560px) {
	.qs-cart-link { padding: 0.5rem 0.7rem; }
	.qs-cart-label { display: none; }
}

/* ===========================================================================
   Track E — price-anchor honesty, guarantee slot, trust strips, footer linking.
   ========================================================================= */

/* the stated basis for a struck-through "was" price (never a bare anchor) */
.qs-pick-anchor-lbl, .qs-pdp-anchor-lbl {
	font-family: var(--wp--preset--font-family--mono); font-size: 0.62rem; letter-spacing: 0.08em;
	text-transform: uppercase; color: var(--wp--preset--color--muted); align-self: center;
}
.qs-pdp-anchor-lbl { margin-left: 0.35rem; }
.qs-pick-anchor-lbl[hidden] { display: none; }

/* dossier: says plainly whether the checks are per-unit or the grade standard */
.qs-dossier-checks-lbl {
	margin: 0 0 0.5rem; font-family: var(--wp--preset--font-family--mono); font-size: 0.63rem;
	letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--muted);
}

/* risk-reversal line under Add-to-cart (appears once the guarantee copy is set) */
.qs-guarantee {
	margin: 0.7rem 0 0; font-size: 0.88rem; color: var(--wp--preset--color--ink);
	display: flex; gap: 0.5rem; align-items: baseline;
}
.qs-guarantee .ck { color: var(--wp--preset--color--accent); flex-shrink: 0; }

/* trust strip — checkout (above Place Order) + cart drawer footer */
.qs-trust-strip { border-top: 1px solid var(--wp--custom--line); padding: 0.95rem 0 0.2rem; margin: 1rem 0 0; }
.qs-trust-line { margin: 0 0 0.55rem; font-size: 0.84rem; color: var(--wp--preset--color--muted); display: flex; gap: 0.45rem; align-items: baseline; }
.qs-trust-line .qs-lock { font-size: 0.8rem; }
.qs-trust-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.qs-trust-points li { font-size: 0.82rem; color: var(--wp--preset--color--muted); display: flex; gap: 0.45rem; align-items: baseline; }
.qs-trust-points .ck { color: var(--wp--preset--color--accent); flex-shrink: 0; }
.qs-drawer-foot { padding: 0 1.3rem 1.1rem; border-top: 1px solid var(--wp--custom--line); }
.qs-drawer-foot .qs-trust-strip { border-top: 0; margin-top: 0.6rem; padding-top: 0; }

/* footer internal-linking columns (crawlable category + condition archives) */
.qs-footer-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1.6rem; margin: 2rem 0 0.5rem; padding-top: 1.6rem; border-top: 1px solid var(--wp--custom--line); }
.qs-footer-h { margin: 0 0 0.6rem; font-family: var(--wp--preset--font-family--mono); font-size: 0.64rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.qs-footer-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.34rem; }
.qs-footer-nav a { font-size: 0.88rem; color: var(--wp--preset--color--muted); text-decoration: none; }
.qs-footer-nav a:hover { color: var(--wp--preset--color--ink); }

/* PDP mobile: price + primary CTA reachable without scrolling past the 9-grade explainer.
   NOTE: `order` only applies to DIRECT flex children of .qs-pdp-info — for a grouped
   listing that is the whole .qs-pick block (its own price/CTA live inside it). */
@media (max-width: 780px) {
	.qs-pdp-info { display: flex; flex-direction: column; }
	/* flex items default to min-width:auto, so the wide unit carousel (4 cards ≈ 646px)
	   would force the whole page to overflow horizontally instead of scrolling internally */
	.qs-pdp-info > * { min-width: 0; max-width: 100%; }
	.qs-pick, .qs-pick-list { min-width: 0; max-width: 100%; }
	.qs-pdp-eyebrow { order: -6; }
	.qs-pdp-title { order: -5; }
	.qs-cond-block { order: -4; }
	.qs-pdp-price { order: -3; }
	.qs-pdp-save, .qs-pdp-stock { order: -2; }
	.qs-pdp-buy, .qs-pick { order: -1; }
	.qs-guarantee { order: 0; }
	.qs-grades-explainer { order: 5; }
	/* a portrait product photo otherwise fills the whole first screen and pushes the
	   price + CTA far below the fold — cap it so the buy area is reachable immediately */
	.qs-gallery-main { max-height: 46vh; }
	.qs-gallery-main img { width: 100%; height: 100%; max-height: 46vh; object-fit: contain; }
	/* the full product title in the breadcrumb wrapped to 3 lines and ate a third of the
	   first screen — keep the trail to one scrollable line */
	.woocommerce-breadcrumb {
		white-space: nowrap; overflow-x: auto; overflow-y: hidden;
		-webkit-overflow-scrolling: touch; scrollbar-width: none; font-size: 0.82rem;
	}
	.woocommerce-breadcrumb::-webkit-scrollbar { display: none; }
}

/* Screen-reader-only utility (used by search labels + the pick-your-unit live region). */
.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0;
	position: absolute !important; word-wrap: normal !important;
}

/* ===========================================================================
   PHASE 0 — SUBSTRATE (design panel, 2026-07-25). The silent defects that made
   every other visual improvement invisible, plus the token layer everything
   after this composes against.
   ========================================================================= */

/* --- Defect 2: the archive card lost its entire glass recipe (and its hover) to
   a specificity collision. `.woocommerce ul.products li.product` (0,3,2) at the top
   of this file outranks `.qs-deal-card` (0,1,0), so shop cards painted FLAT — no
   top-edge ink sheen, no accent hover glow — while the SAME product's card on the
   home page had both. Re-assert the recipe at (0,4,2). No !important: later state
   classes (.is-soldout etc.) must still be able to win. --- */
.woocommerce ul.products li.product.qs-deal-card,
.qs-shop-main ul.products li.product.qs-deal-card {
	background:
		linear-gradient(180deg, color-mix(in oklch, var(--wp--preset--color--ink) 5%, transparent) 0%, transparent 34%),
		color-mix(in oklch, var(--wp--custom--surface) 82%, transparent);
	border: 1px solid color-mix(in oklch, var(--wp--preset--color--ink) 8%, transparent);
	border-radius: 16px;
	overflow: hidden;
	padding: 0;
	transition: transform var(--qs-dur-2) var(--qs-ease-out),
		border-color var(--qs-dur-2) var(--qs-ease-out),
		box-shadow var(--qs-dur-2) var(--qs-ease-out);
}
.woocommerce ul.products li.product.qs-deal-card:hover,
.qs-shop-main ul.products li.product.qs-deal-card:hover {
	transform: translateY(-3px);
	border-color: color-mix(in oklch, var(--wp--preset--color--accent) 36%, transparent);
	box-shadow: var(--qs-elev-lift);
}

/* --- Defect 4: tell the UA this is a dark document (native controls, scrollbars,
   form widgets) and armour Chrome's autofill, which otherwise paints a white slab
   over checkout inputs — on the one surface where trust becomes revenue. --- */
:root { color-scheme: dark; }
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
	-webkit-text-fill-color: var(--wp--preset--color--ink);
	-webkit-box-shadow: 0 0 0 1000px color-mix(in oklch, var(--wp--preset--color--bg) 88%, var(--wp--preset--color--ink) 12%) inset;
	caret-color: var(--wp--preset--color--ink);
	transition: background-color 9999s ease-out 0s;
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce ul.products li.product.qs-deal-card,
	.qs-shop-main ul.products li.product.qs-deal-card { transition: none; }
	.woocommerce ul.products li.product.qs-deal-card:hover,
	.qs-shop-main ul.products li.product.qs-deal-card:hover { transform: none; }
}

/* ===========================================================================
   PHASE 2 — THE CARD: the name lockup + the vertical contract.
   Supplier titles ran 1-4 lines, so every card in a row ended at a different
   height and the grid never read as one designed object. Now: fixed bands —
   brand eyebrow (1 line), model (clamped 2), qualifier (clamped 1), price
   pinned to the bottom. Same contract at 3 products and at 300.
   ========================================================================= */

/* --- Sibling conditions: the same model offered at another grade. "One listing per
   product+condition" means those are separate URLs, so without this a shopper can only
   ever find the grade they happened to land on. --- */
.qs-condswitch { margin: 0 0 1.3rem; }
.qs-condswitch-lbl { display: block; font-family: var(--wp--preset--font-family--mono); font-size: 0.66rem;
	letter-spacing: var(--qs-track-label); text-transform: uppercase; color: var(--wp--preset--color--muted); margin-bottom: 0.5rem; }
.qs-condswitch-list { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.qs-condswitch-opt { display: grid; gap: 0.15rem; padding: 0.6rem 0.9rem; min-width: 9.5rem;
	border: 1px solid var(--wp--custom--line); border-radius: 12px; text-decoration: none;
	background: color-mix(in oklch, var(--wp--custom--surface) 55%, transparent);
	transition: border-color var(--qs-dur-2) var(--qs-ease-out), transform var(--qs-dur-2) var(--qs-ease-out); }
.qs-condswitch-opt:hover { border-color: color-mix(in oklch, var(--wp--preset--color--accent) 40%, transparent); transform: translateY(-2px); }
.qs-condswitch-opt .cs-grade { font-family: var(--wp--preset--font-family--mono); font-size: 0.68rem; letter-spacing: 0.04em;
	text-transform: uppercase; color: var(--wp--preset--color--accent); }
.qs-condswitch-opt .cs-price { font-family: var(--wp--preset--font-family--mono); font-variant-numeric: tabular-nums;
	font-weight: 600; color: var(--wp--preset--color--ink); font-size: 0.98rem; }
.qs-condswitch-opt .cs-stock { font-size: 0.74rem; color: var(--wp--preset--color--muted); }
@media (prefers-reduced-motion: reduce) { .qs-condswitch-opt { transition: none; } .qs-condswitch-opt:hover { transform: none; } }

.qs-deal-brand {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.62rem;
	letter-spacing: var(--qs-track-label);
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin: 0 0 0.3rem;
	min-height: 0.9em;
}
.qs-deal-card .qs-deal-name {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 1.02rem;
	line-height: 1.28;
	letter-spacing: var(--qs-track-display);
	color: var(--wp--preset--color--ink);
	margin: 0 0 0.22rem;
	/* two lines, always — the band is reserved even for a one-line name */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(2 * 1.28em);
}
.qs-deal-qual {
	margin: 0;
	font-size: 0.82rem;
	line-height: 1.35;
	color: var(--wp--preset--color--muted);
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 1.35em;
}
/* the body is a column; the price row is pushed to the bottom of every card */
.qs-deal-card .qs-deal-body { display: flex; flex-direction: column; flex: 1; }
.qs-deal-card .qs-deal-price-row { margin-top: auto; padding-top: 0.7rem; }
.qs-deal-card .qs-deal-link { flex: 1; }

/* --- Money micro-typography: the number is the hero, the currency symbol is not.
   WooCommerce already wraps the symbol in .woocommerce-Price-currencySymbol, so this
   is presentation-only — no string surgery, no effect on schema/feeds. Demoting the
   glyph drops the price's visual mass while the NUMBER reads larger. --- */
.qs-deal-now .woocommerce-Price-currencySymbol,
.qs-pdp-now .woocommerce-Price-currencySymbol,
.qs-pick-price .woocommerce-Price-currencySymbol,
.qs-unit-price .woocommerce-Price-currencySymbol {
	font-size: 0.62em;
	font-weight: 500;
	vertical-align: 0.42em;
	margin-right: 0.06em;
	color: color-mix(in oklch, currentColor 68%, transparent);
}
/* the two defectors: the biggest price on the site was display-face, so its
   tabular-nums silently no-op'd and the number jittered between unit selections */
.qs-pick-price,
.qs-pick-now {
	font-family: var(--wp--preset--font-family--mono);
	font-variant-numeric: tabular-nums;
	font-weight: 500;
}
/* the full supplier title, kept on-page under the h1 — long-tail tokens stay
   visible + crawlable while the h1 reads like a product, not a feed row */
.qs-pdp-fullname {
	margin: 0.4rem 0 0;
	font-size: 0.84rem;
	line-height: 1.45;
	color: color-mix(in oklch, var(--wp--preset--color--muted) 82%, transparent);
	max-width: 52ch;
}

/* ===========================================================================
   PHASE 3 — THE SHOP PAGE: the masthead ledger, the control rail, and a grid
   with declared breakpoints instead of an emergent auto-fill track.
   ========================================================================= */

/* --- the two-column masthead --- */
.qs-shop-head.has-ledger {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.6rem;
	align-items: end;
}
@media (min-width: 900px) {
	.qs-shop-head.has-ledger { grid-template-columns: minmax(0, 1fr) auto; gap: 3rem; }
}
.qs-shop-head-copy { min-width: 0; }

/* --- the Inspection Ledger: a facility readout in the dossier's voice --- */
.qs-ledger {
	position: relative;
	min-width: 260px;
	padding: 1.05rem 1.2rem 0.9rem;
	border: 1px solid var(--wp--custom--line);
	border-radius: 14px;
	background: color-mix(in oklch, var(--wp--custom--surface) 55%, transparent);
	overflow: hidden;
}
.qs-ledger-seal {
	position: absolute;
	right: -14px;
	bottom: -18px;
	color: var(--wp--preset--color--accent);
	opacity: 0.07;
	line-height: 0;
	pointer-events: none;
}
.qs-ledger-seal .qs-seal { width: 132px; height: 132px; }
.qs-ledger-kicker {
	margin: 0 0 0.7rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.62rem;
	letter-spacing: var(--qs-track-label);
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}
.qs-ledger-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.6rem;
	padding: 0.42rem 0;
	border-top: 1px solid var(--wp--custom--line);
	position: relative;
}
.qs-ledger-row .l {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.66rem;
	letter-spacing: var(--qs-track-label);
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	white-space: nowrap;
}
.qs-ledger-row .v {
	font-family: var(--wp--preset--font-family--mono);
	font-variant-numeric: tabular-nums;
	font-size: 0.84rem;
	color: var(--wp--preset--color--ink);
	white-space: nowrap;
}

/* --- declared grid breakpoints: deterministic at 3, 7 and 300, with no dangling
   4th track appearing at odd widths (auto-fill was inventing one) --- */
.qs-shop-main ul.products,
.woocommerce ul.products {
	grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}
@media (min-width: 560px) {
	.qs-shop-main ul.products,
	.woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (min-width: 900px) {
	.qs-shop-main ul.products,
	.woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (min-width: 1240px) {
	.qs-shop-main ul.products,
	.woocommerce ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

/* --- the control rail: one instrument panel, in the site's own mono voice --- */
.qs-shop-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	padding: 0.55rem 0 0.7rem;
	border-top: 1px solid var(--wp--custom--line);
	border-bottom: 1px solid var(--wp--custom--line);
	margin-bottom: 1.5rem;
}
.qs-shop-toolbar .qs-result-count {
	font-family: var(--wp--preset--font-family--mono);
	font-variant-numeric: tabular-nums;
	font-size: 0.72rem;
	letter-spacing: var(--qs-track-label);
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
/* restyle the native select so it stops reading as a CMS default */
.qs-shop-toolbar .woocommerce-ordering select,
.qs-shop-main select.orderby {
	-webkit-appearance: none;
	appearance: none;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	background-color: transparent;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 14px) calc(50% + 1px), calc(100% - 9px) calc(50% + 1px);
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	border: 1px solid var(--wp--custom--line);
	border-radius: 999px;
	padding: 0.42rem 2.1rem 0.42rem 0.9rem;
	cursor: pointer;
	transition: color var(--qs-dur-1) var(--qs-ease-out), border-color var(--qs-dur-1) var(--qs-ease-out);
}
.qs-shop-toolbar .woocommerce-ordering select:hover,
.qs-shop-main select.orderby:hover {
	color: var(--wp--preset--color--ink);
	border-color: var(--wp--custom--line-strong);
}
/* sold-out: the price stays (proof the discount was real), the card reads spent */
.qs-deal-card.is-soldout .qs-deal-media img { opacity: 0.42; filter: saturate(0.5); }
.qs-deal-card.is-soldout .qs-deal-now,
.qs-deal-card.is-soldout .qs-deal-was { color: var(--wp--preset--color--muted); }
.qs-deal-soldout-note {
	flex-shrink: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.66rem;
	letter-spacing: var(--qs-track-label);
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	border: 1px solid var(--wp--custom--line);
	border-radius: 999px;
	padding: 0.2rem 0.6rem;
}

/* ===========================================================================
   PHASE 4 — THE EVIDENCE STRIP / PROOF FRAME (the signature move).
   Two photographic registers, never blended:
     RENDER  = the dark-room hero (accent glow, contain, floats in the room).
     EXHIBIT = the real, unretouched unit photo. Flat mat, NO accent radial (these
               photos bring their own light), cover-cropped so it FILLS its frame
               instead of letterboxing inside a moody vignette, hairline border +
               inset rule borrowed from the dossier, and a mono caption naming the
               unit. Staged as evidence, the rawness becomes the proof.
   ========================================================================= */
.qs-evidence { margin: 1.6rem 0 1.4rem; }
.qs-evidence-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.9rem; margin-bottom: 0.75rem; }
.qs-evidence-kicker {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.66rem;
	letter-spacing: var(--qs-track-label);
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}
.qs-evidence-note { font-size: 0.84rem; color: var(--wp--preset--color--muted); }
.qs-evidence-strip {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(132px, 1fr);
	gap: 0.7rem;
	overflow-x: auto;
	padding-bottom: 0.4rem;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
}
.qs-proof-frame {
	position: relative;
	margin: 0;
	scroll-snap-align: start;
	border: 1px solid var(--wp--custom--line);
	border-radius: 10px;
	overflow: hidden;
	/* a flat archival mat — deliberately NOT the dark-room ground */
	background: color-mix(in oklch, var(--wp--preset--color--ink) 4%, var(--wp--preset--color--bg));
}
.qs-proof-frame::before {
	content: "";
	position: absolute;
	inset: 4px;
	border: 1px solid color-mix(in oklch, var(--wp--preset--color--muted) 12%, transparent);
	border-radius: 7px;
	pointer-events: none;
	z-index: 1;
}
.qs-proof-frame a { display: block; line-height: 0; }
.qs-proof-frame img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover; /* fills the frame — no letterboxing, no fake vignette */
	display: block;
	transition: transform var(--qs-dur-3) var(--qs-ease-out);
}
.qs-proof-frame:hover img { transform: scale(1.03); }
.qs-proof-frame figcaption {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.56rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	padding: 0.4rem 0.5rem 0.45rem;
	border-top: 1px solid var(--wp--custom--line);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
@media (prefers-reduced-motion: reduce) {
	.qs-proof-frame img, .qs-proof-frame:hover img { transition: none; transform: none; }
}

/* the hero gallery is a render: keep it sticky so the product stays present while
   the shopper reads the picker, evidence, dossier and specs */
@media (min-width: 900px) {
	.qs-pdp-gallery { position: sticky; top: 1.5rem; align-self: start; }
}

/* ===========================================================================
   PHASE 5 — FEEL. Every item here ships with its reduced-motion branch.
   ========================================================================= */

/* --- CARD HOVER REVEAL: the render cross-fades to the ACTUAL photograph. This is
   the brand thesis as an interaction — every rival shows a stock render and asks
   for trust; showing the unglamorous countertop photo BEFORE the click, as a
   deliberate gesture, is structurally impossible for anyone who doesn't
   photograph individual units. --- */
.qs-deal-proof {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity var(--qs-dur-3) var(--qs-ease-out);
	pointer-events: none;
	z-index: 0;
}
.qs-deal-card:hover .qs-deal-proof,
.qs-deal-card:focus-within .qs-deal-proof { opacity: 1; }
.qs-deal-proof-cue {
	position: absolute;
	left: 0.7rem;
	bottom: 0.7rem;
	z-index: 2;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.56rem;
	letter-spacing: var(--qs-track-label);
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
	background: color-mix(in oklch, var(--wp--preset--color--bg) 62%, transparent);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border: 1px solid color-mix(in oklch, var(--wp--preset--color--ink) 14%, transparent);
	border-radius: 999px;
	padding: 0.18rem 0.5rem;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity var(--qs-dur-2) var(--qs-ease-out), transform var(--qs-dur-2) var(--qs-ease-out);
}
.qs-deal-card:hover .qs-deal-proof-cue,
.qs-deal-card:focus-within .qs-deal-proof-cue { opacity: 1; transform: none; }
/* sold-out cards don't tease a photo of something you can't buy */
.qs-deal-card.is-soldout .qs-deal-proof,
.qs-deal-card.is-soldout .qs-deal-proof-cue { display: none; }

/* --- UNIT SWAP: fade THROUGH the dark room. A symmetric cross-dissolve between two
   unlike bright phone photos smears into a double-exposure that reads as a bug;
   dropping to the room and back hides the aspect jump and makes the room itself
   the transition medium. --- */
.qs-evidence-strip.is-swapping { opacity: 0; transform: scale(0.985); }
.qs-evidence-strip {
	opacity: 1;
	transform: none;
	transition: opacity var(--qs-dur-2) var(--qs-ease-out), transform var(--qs-dur-2) var(--qs-ease-out);
}
/* the commit ring — one-shot confirmation that THIS unit is now yours to buy */
@keyframes qs-commit {
	from { box-shadow: 0 0 0 6px color-mix(in oklch, var(--wp--preset--color--accent) 34%, transparent); }
	to   { box-shadow: 0 0 0 1px color-mix(in oklch, var(--wp--preset--color--accent) 0%, transparent); }
}
.qs-unit-card.is-committing { animation: qs-commit 260ms var(--qs-ease-out) 1; }

/* --- PRESS STATES: the store's feedback vocabulary was hover-only on a
   mobile-first store. Every tappable thing now acknowledges the finger. --- */
@media (hover: none) {
	.qs-deal-card:active { transform: scale(0.985); }
	.qs-unit-card:active { transform: scale(0.97); }
	.qs-pick-add:active, .qs-sticky-add:active, .qs-empty-cta:active { transform: scale(0.98); }
	.qs-chip:active { transform: scale(0.96); }
}

/* --- FOCUS RINGS: one visible, on-brand ring — the most obvious home-brew tell
   available to anyone who presses Tab. --- */
:root { --qs-focus: 0 0 0 2px var(--wp--preset--color--bg), 0 0 0 4px var(--wp--preset--color--accent); }
.qs-deal-link:focus-visible,
.qs-unit-card:focus-visible,
.qs-pick-add:focus-visible,
.qs-sticky-add:focus-visible,
.qs-drawer-x:focus-visible,
.qs-chip:focus-visible,
.qs-search-input:focus-visible,
.qs-gallery-thumb:focus-visible,
.qs-empty-cta:focus-visible,
.qs-proof-frame a:focus-visible,
.qs-nav-links a:focus-visible {
	outline: none;
	box-shadow: var(--qs-focus);
	border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
	.qs-deal-proof, .qs-deal-proof-cue, .qs-evidence-strip { transition: none; }
	.qs-deal-proof-cue { transform: none; }
	.qs-unit-card.is-committing { animation: none; }
	.qs-deal-card:active, .qs-unit-card:active, .qs-pick-add:active, .qs-sticky-add:active, .qs-chip:active { transform: none; }
}
/* the add-to-cart state machine: a working label, not a mystery dim */
.qs-pick-add.is-working { opacity: 0.75; cursor: progress; }
.qs-pick-add:disabled { cursor: default; }

/* --- PHASE 6 gate fix: mobile gutters. The store mains are alignfull with a 1120px
   constrained layout, so above 1120 the viewport supplies the margin — but at 390px
   there is none, and every headline, paragraph, chip and rule sat flush against the
   screen edge. Content needs air on the device the founding scene describes. --- */
@media (max-width: 1160px) {
	.qs-shop-main,
	.qs-pdp-main {
		padding-left: clamp(1rem, 4vw, 2rem);
		padding-right: clamp(1rem, 4vw, 2rem);
	}
}

/* --- Proof-photo lightbox. The evidence shots used to open as a raw image file in a new tab,
   which dumps the shopper out of the deal on the one surface meant to prove the unit is real. --- */
.qs-proof-open { position: relative; display: block; }
.qs-proof-zoom {
	position: absolute; right: 0.4rem; bottom: 0.4rem; display: grid; place-items: center;
	width: 1.6rem; height: 1.6rem; border-radius: 50%; color: var(--wp--preset--color--ink);
	background: color-mix(in oklch, var(--wp--preset--color--bg) 62%, transparent);
	border: 1px solid color-mix(in oklch, var(--wp--preset--color--ink) 16%, transparent);
	opacity: 0; transition: opacity var(--qs-dur-2) var(--qs-ease-out);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.qs-proof-frame:hover .qs-proof-zoom,
.qs-proof-open:focus-visible .qs-proof-zoom { opacity: 1; }

.qs-lightbox { position: fixed; inset: 0; z-index: 300; visibility: hidden; pointer-events: none; }
.qs-lightbox.is-open { visibility: visible; pointer-events: auto; }
.qs-lightbox-scrim { position: absolute; inset: 0; background: color-mix(in oklch, var(--wp--preset--color--bg) 78%, #000);
	opacity: 0; transition: opacity var(--qs-dur-3) var(--qs-ease-out); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.qs-lightbox.is-open .qs-lightbox-scrim { opacity: 1; }
.qs-lightbox-inner { position: absolute; inset: 0; display: grid; grid-template-columns: auto 1fr auto;
	align-items: center; gap: clamp(0.4rem, 2vw, 1.4rem); padding: clamp(1rem, 4vw, 3rem); }
.qs-lightbox-fig { margin: 0; display: grid; gap: 0.8rem; justify-items: center; min-width: 0;
	transform: scale(0.98); opacity: 0; transition: transform var(--qs-dur-3) var(--qs-ease-out), opacity var(--qs-dur-3) var(--qs-ease-out); }
.qs-lightbox.is-open .qs-lightbox-fig { transform: none; opacity: 1; }
.qs-lightbox-fig img { max-width: 100%; max-height: 78vh; width: auto; height: auto; display: block;
	border-radius: 14px; border: 1px solid var(--wp--custom--line); box-shadow: var(--qs-elev-panel); background: var(--wp--preset--color--bg); }
.qs-lightbox-fig figcaption { font-family: var(--wp--preset--font-family--mono); font-size: 0.7rem;
	letter-spacing: var(--qs-track-label); text-transform: uppercase; color: var(--wp--preset--color--muted); }
.qs-lightbox-x { position: absolute; top: clamp(0.6rem, 2vw, 1.4rem); right: clamp(0.6rem, 2vw, 1.4rem);
	width: 2.4rem; height: 2.4rem; border-radius: 50%; cursor: pointer; font-size: 1.5rem; line-height: 1;
	color: var(--wp--preset--color--ink); background: color-mix(in oklch, var(--wp--custom--surface) 70%, transparent);
	border: 1px solid var(--wp--custom--line); }
.qs-lightbox-x:hover { border-color: var(--wp--custom--line-strong); }
.qs-lightbox-nav { width: 2.6rem; height: 2.6rem; border-radius: 50%; cursor: pointer; font-size: 1.6rem; line-height: 1;
	color: var(--wp--preset--color--ink); background: color-mix(in oklch, var(--wp--custom--surface) 70%, transparent);
	border: 1px solid var(--wp--custom--line); }
.qs-lightbox-nav:hover { border-color: color-mix(in oklch, var(--wp--preset--color--accent) 40%, transparent); }
.qs-lightbox-nav[hidden] { display: none; }
@media (max-width: 640px) { .qs-lightbox-inner { grid-template-columns: 1fr; } .qs-lightbox-nav { position: absolute; bottom: 1.2rem; }
	.qs-lightbox-nav.prev { left: 1.2rem; } .qs-lightbox-nav.next { right: 1.2rem; } }
@media (prefers-reduced-motion: reduce) {
	.qs-lightbox-scrim, .qs-lightbox-fig, .qs-proof-zoom { transition: none; }
	.qs-lightbox-fig { transform: none; }
}