/*
 * assets/css/main.css — Vantage theme component styles ("Light Instrument").
 *
 * Purpose:      Full design system: base, type, buttons, forms, Woo notices
 *               (M10), header/footer, homepage sections, generic page shell.
 * Dependencies: design tokens printed by inc/tokens.php (:root custom props);
 *               fonts declared by inc/assets.php.
 * Rules:        COLORS ARE TOKENS ONLY (M11) — no hex/rgb literals in this
 *               file. Breakpoints are literals (custom props can't be used in
 *               media queries): 600 / 920 / 1200px — 920px is THE single
 *               mobile/desktop switch (M14).
 *               Ornament whitelist (M7): hairlines + ticks site-wide;
 *               scanlines / scan-sweep / blueprint-grid HOME ONLY (scoped
 *               under body.home / .v-verify).
 */

/* ============================== BASE ============================== */
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--surface);
	color: var(--text);
	font-family: var(--font-text);
	font-size: var(--text-base);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: var(--c-blue-ring);
}

/* Blueprint grid — HOME ONLY (M7 ornament whitelist). */
body.home::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background-image:
		linear-gradient(var(--line-soft) 1px, transparent 1px),
		linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
	background-size: 56px 56px;
	opacity: .45;
	mask-image: radial-gradient(ellipse 120% 90% at 50% 0%, var(--c-ink) 30%, transparent 100%);
	-webkit-mask-image: radial-gradient(ellipse 120% 90% at 50% 0%, var(--c-ink) 30%, transparent 100%);
}

::selection { background: var(--c-blue); color: var(--c-white); }

img { display: block; max-width: 100%; height: auto; }
a { color: var(--c-blue); text-decoration: none; }
a:hover { color: var(--c-blue-hover); }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6, p, dl, dd, figure { margin: 0; }

a, button, input, select, textarea, summary { touch-action: manipulation; }

:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 3px;
	border-radius: 2px;
}

h2, h3 { scroll-margin-top: var(--s-12); }

/* ============================ A11Y UTIL ============================ */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	left: var(--s-4); top: -64px;
	z-index: 200;
	background: var(--c-blue);
	color: var(--c-white);
	font: var(--mono-label);
	padding: var(--s-3) var(--s-5);
	border-radius: var(--r-s);
	transition: top .15s ease;
}
.skip-link:focus {
	position: fixed !important;
	top: var(--s-4);
	width: auto; height: auto;
	margin: 0;
	clip: auto; clip-path: none;
	white-space: normal;
	color: var(--c-white);
}

/* ============================ LAYOUT ============================ */
.v-wrap {
	max-width: var(--max-w);
	margin-inline: auto;
	padding-inline: var(--pad-x);
}

.site { position: relative; z-index: 1; }

.v-panel {
	position: relative;
	border: 1px solid var(--c-blue-line);
	border-radius: var(--r-m);
	background:
		radial-gradient(ellipse at 85% 0%, var(--c-blue-soft), transparent 55%),
		linear-gradient(165deg, var(--c-paper-0), var(--surface-well-2));
	padding: clamp(36px, 5vw, 64px);
	box-shadow: var(--sh-2);
	overflow: hidden;
}
.v-panel::before {
	content: "";
	position: absolute;
	top: 0; left: 10%; right: 10%;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--c-cyan-line), transparent);
}
.v-panel-sub { margin-top: var(--s-4); color: var(--text-soft); max-width: 46ch; }

/* ---- Signature ornament: cyan hairline (site-wide whitelisted) ---- */
.v-hairline {
	position: relative;
	height: 1px;
	background: linear-gradient(90deg,
		transparent 0%,
		var(--c-cyan-glow) 18%,
		var(--c-cyan-line) 50%,
		var(--c-cyan-glow) 82%,
		transparent 100%);
}
.v-hairline::after {
	content: "";
	position: absolute;
	left: 50%; top: 50%;
	width: 88px; height: 7px;
	transform: translate(-50%, -50%);
	background: radial-gradient(ellipse at center, var(--c-cyan-glow), transparent 70%);
}

/* ---- Mono eyebrow ---- */
.v-tag {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	font: var(--mono-label);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--c-cyan-text);
}
.v-band-dark .v-tag { color: var(--c-cyan); }
.v-tag::before {
	content: "";
	width: var(--s-6); height: 1px;
	background: var(--c-cyan-line);
}

/* ============================ TYPE ============================ */
.v-section-h {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(var(--text-2xl), 3.4vw, var(--text-4xl));
	line-height: 1.08;
	letter-spacing: -.01em;
	color: var(--text);
	margin-top: var(--s-3);
	text-wrap: balance;
}

/* ============================ BUTTONS ============================ */
.v-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-2);
	min-height: 52px;
	padding: 0 var(--s-8);
	border-radius: var(--r-s);
	font-family: var(--font-text);
	font-weight: 600;
	font-size: var(--text-sm);
	letter-spacing: .03em;
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}
.v-btn-primary {
	background: var(--c-blue);
	color: var(--c-white);
	box-shadow: 0 0 0 1px var(--c-blue-line), 0 12px 28px -12px var(--c-blue-glow);
}
.v-btn-primary:hover {
	background: var(--c-blue-hover);
	color: var(--c-white);
	transform: translateY(-1px);
	box-shadow: 0 0 0 1px var(--c-blue-line), 0 18px 36px -12px var(--c-blue-glow);
}
.v-btn-ghost {
	border: 1px solid var(--c-ghost-line);
	color: var(--text);
}
.v-btn-ghost:hover {
	border-color: var(--c-blue);
	color: var(--c-blue);
	background: var(--c-blue-soft);
}
.v-band-dark .v-btn-ghost { color: var(--text); }
.v-band-dark .v-btn-ghost:hover {
	border-color: var(--c-cyan-line);
	color: var(--c-white);
	background: var(--c-ink-wash);
}

/* ============================ FORMS ============================ */
input[type="text"], input[type="email"], input[type="search"],
input[type="tel"], input[type="url"], input[type="password"],
input[type="number"], select, textarea {
	min-height: 48px;
	padding: 0 var(--s-4);
	font-family: var(--font-text);
	font-size: var(--text-base); /* ≥16px: no iOS zoom */
	color: var(--text);
	background-color: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-s);
	transition: border-color .15s ease, box-shadow .15s ease;
}
textarea { padding: var(--s-3) var(--s-4); min-height: 120px; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
	outline: none;
	border-color: var(--c-blue);
	box-shadow: 0 0 0 3px var(--c-blue-ring);
}
::placeholder { color: var(--text-soft); opacity: 1; }
label { font-weight: 500; }

/* ====================== WOO NOTICES (M10) ====================== */
.woocommerce-error, .woocommerce-message, .woocommerce-info {
	list-style: none;
	margin: 0 0 var(--s-6);
	padding: var(--s-4) var(--s-5);
	background: var(--surface-well);
	border: 1px solid var(--line-soft);
	border-left: 3px solid var(--c-blue);
	border-radius: var(--r-s);
	color: var(--text);
	font-size: var(--text-sm);
}
.woocommerce-error { border-left-color: var(--c-warn); }
.woocommerce-message { border-left-color: var(--c-success); }
/* WooCommerce's default ::before icon (webfont checkmark) had no padding
   reserved, so message text overlapped it. Drop it — the colored left border
   carries the success/error meaning. */
.woocommerce-error::before,
.woocommerce-message::before,
.woocommerce-info::before { display: none !important; content: none !important; }
.woocommerce-error li, .woocommerce-message li, .woocommerce-info li { margin: 0 0 var(--s-1); }
.woocommerce-error li:last-child, .woocommerce-message li:last-child, .woocommerce-info li:last-child { margin-bottom: 0; }

/* ============================ RUO BAR ============================ */
.v-ruo-bar {
	position: relative;
	z-index: 5;
	background: var(--surface-well);
	border-bottom: 1px solid var(--line-soft);
	text-align: center;
	padding: var(--s-2) var(--pad-x);
}
.v-ruo-bar p {
	font: var(--mono-meta);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--text-soft);
}
.v-ruo-bar strong { color: var(--c-blue); font-weight: 400; }

/* ============================ HEADER ============================ */
.v-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--surface);
	border-bottom: 1px solid var(--line-soft);
}
@supports (backdrop-filter: blur(2px)) {
	.v-header { background: color-mix(in srgb, var(--surface) 84%, transparent); backdrop-filter: blur(14px); }
}
.v-header::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -1px;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--c-cyan-line), transparent);
	opacity: .5;
}
.v-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-4);
	min-height: 72px;
}
.v-logo-link {
	display: inline-flex;
	align-items: center;
	padding: var(--s-2) 0;
	flex-shrink: 0;
}
.v-logo { height: 38px; width: auto; }

.v-nav-list {
	display: flex;
	align-items: center;
	gap: var(--s-1);
	list-style: none;
}
.v-nav-list a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 var(--s-3);
	font-size: var(--text-sm);
	font-weight: 500;
	letter-spacing: .04em;
	color: var(--text-soft);
	border-radius: var(--r-s);
	transition: color .15s ease, background-color .15s ease;
}
.v-nav-list a:hover { color: var(--text); background: var(--c-ink-wash); }
.v-nav-list .current-menu-item > a,
.v-nav-list .current_page_item > a { color: var(--text); }

.v-header-actions {
	display: flex;
	align-items: center;
	gap: var(--s-2);
}
.v-icon-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	border: 1px solid var(--line);
	border-radius: var(--r-s);
	color: var(--text-soft);
	background: transparent;
	transition: border-color .15s ease, color .15s ease;
}
.v-icon-btn:hover { border-color: var(--text-soft); color: var(--text); }

.v-cart-badge {
	position: absolute;
	top: -6px; right: -6px;
	min-width: 18px; height: 18px;
	display: grid; place-items: center;
	background: var(--c-blue);
	color: var(--c-white);
	font: var(--mono-meta);
	line-height: 1;
	border-radius: 9px;
	padding: 0 var(--s-1);
}
.v-cart-badge[data-count="0"] { display: none; }

/* ---- Expanding search ---- */
.v-search { position: relative; display: flex; align-items: center; }
.v-search-form {
	display: flex;
	align-items: center;
	gap: var(--s-2);
}
.v-search-form input[type="search"] { width: 170px; }
.v-search-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 44px; height: 44px;
	border: 1px solid var(--line);
	border-radius: var(--r-s);
	color: var(--text-soft);
}
.v-search-submit:hover { border-color: var(--c-blue); color: var(--c-blue); }
html:not(.js) .v-search-toggle { display: none; }
html.js .v-search-form {
	display: none;
	position: absolute;
	top: calc(100% + var(--s-3));
	right: 0;
	z-index: 60;
	width: min(360px, calc(100vw - 2 * var(--pad-x)));
	padding: var(--s-3);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-m);
	box-shadow: var(--sh-2);
}
html.js .v-search.is-open .v-search-form { display: flex; flex-direction: column; align-items: stretch; }
html.js .v-search-form input[type="search"] { width: auto; flex: 1; min-width: 0; }
.v-search.is-open .v-search-toggle { border-color: var(--c-blue); color: var(--c-blue); }
/* ≤600px the search icon is the leftmost of four right-aligned actions, so a
   panel anchored to its right edge (right:0) opens off the LEFT of the screen.
   Pin it below the sticky header, inset to the content width instead. */
@media (max-width: 600px) {
	html.js .v-search-form {
		position: fixed;
		top: calc(72px + 1px); /* sticky header min-height + its 1px border */
		left: var(--pad-x);
		right: var(--pad-x);
		width: auto;
		max-width: none;
	}
}

/* ---- Mobile nav (≤920px, the single switch M14) ---- */
.v-menu-toggle { display: none; }
@media (max-width: 920px) {
	.v-menu-toggle { display: inline-flex; }
	.v-nav {
		position: absolute;
		top: 100%;
		left: 0; right: 0;
		background: var(--surface);
		border-bottom: 1px solid var(--line);
		box-shadow: var(--sh-2);
		display: none;
		padding: var(--s-3) var(--pad-x) var(--s-5);
	}
	.v-nav.is-open { display: block; }
	.v-nav-list { flex-direction: column; align-items: stretch; gap: var(--s-1); }
	.v-nav-list a { min-height: 48px; font-size: var(--text-base); }
	html.v-nav-locked { overflow: hidden; }
}
/* ≤600px: the logo + 4 icon buttons don't fit at full size (375px = 335px
   usable; 169px logo + 16px gap + 200px actions = 385px → horizontal
   overflow). Shrink the wordmark and tighten gaps; buttons stay 44px (hit
   target floor). */
@media (max-width: 600px) {
	.v-header-inner { gap: var(--s-2); }
	.v-header-actions { gap: var(--s-1); }
	.v-logo { height: 30px; }
}

/* ============================ HERO ============================ */
.v-hero {
	position: relative;
	z-index: 1;
	overflow: hidden;
}
.v-hero::before {
	content: "";
	position: absolute;
	top: -20%; right: -10%;
	width: 70%; height: 120%;
	background: radial-gradient(ellipse at 60% 45%, var(--c-blue-soft), transparent 65%);
	pointer-events: none;
}
.v-hero-grid {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
	padding-block: clamp(56px, 8vw, 110px);
}
.v-hero-copy .v-tag { margin-bottom: var(--s-7); }
.v-hero h1 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(2.55rem, 6.2vw, var(--text-6xl));
	line-height: 1.02;
	letter-spacing: -.015em;
	color: var(--text);
	margin-bottom: var(--s-6);
	text-wrap: balance;
}
/* Accent word — M9: stroke only where supported; solid blue fallback. */
.v-accent { color: var(--c-blue); }
@supports (-webkit-text-stroke: 1px transparent) {
	.v-accent { color: transparent; -webkit-text-stroke: 1.5px var(--c-blue); }
}
.v-hero-sub {
	max-width: 46ch;
	font-size: clamp(var(--text-base), 1.4vw, var(--text-lg));
	color: var(--text-soft);
	margin-bottom: var(--s-9);
}
.v-cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3);
	margin-bottom: var(--s-11);
}
.v-hero-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3) var(--s-7);
	font: var(--mono-label);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--text-soft);
	list-style: none;
}
.v-hero-meta li { display: flex; align-items: center; gap: var(--s-2); }
.v-hero-meta li::before {
	content: "";
	width: 5px; height: 5px;
	background: var(--c-cyan-text);
	border-radius: 50%;
	box-shadow: 0 0 6px var(--c-cyan-line);
}

/* ---- Hero stage: paper sample plate + readout ---- */
.v-hero-stage {
	position: relative;
	display: grid;
	justify-items: start;
	align-items: center;
	padding-right: clamp(0px, 7vw, 96px);
	min-height: 500px;
}
.v-sample-plate {
	position: relative;
	width: min(380px, 86%);
	aspect-ratio: 4 / 4.7;
	padding: var(--s-4);
	border-radius: var(--r-m);
	background: var(--surface);
	border: 1px solid var(--line-soft);
	box-shadow: var(--sh-2), 0 0 56px -18px var(--c-blue-glow);
}
.v-sample-plate img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--r-s);
}
.v-sample-plate::before {
	content: "";
	position: absolute;
	inset: -18%;
	z-index: -1;
	background: radial-gradient(circle at 50% 52%, var(--c-blue-ring), var(--c-cyan-glow) 50%, transparent 72%);
	pointer-events: none;
}
.v-plate-id {
	position: absolute;
	bottom: var(--s-7); left: var(--s-7);
	z-index: 2;
	font: var(--mono-meta);
	letter-spacing: .2em;
	color: var(--c-cyan-text);
	background: var(--surface);
	border: 1px solid var(--c-blue-line);
	border-radius: var(--s-1);
	padding: var(--s-1) var(--s-2);
}
/* viewfinder ticks + brackets (whitelisted site-wide ornament) */
.v-bracket {
	position: absolute;
	width: 22px; height: 22px;
	border: 2px solid var(--c-cyan-text);
	opacity: .9;
	z-index: 2;
}
.v-br-tl { top: -7px; left: -7px; border-right: 0; border-bottom: 0; border-top-left-radius: 6px; }
.v-br-tr { top: -7px; right: -7px; border-left: 0; border-bottom: 0; border-top-right-radius: 6px; }
.v-br-bl { bottom: -7px; left: -7px; border-right: 0; border-top: 0; border-bottom-left-radius: 6px; }
.v-br-br { bottom: -7px; right: -7px; border-left: 0; border-top: 0; border-bottom-right-radius: 6px; }
.v-tick {
	position: absolute;
	background: var(--c-cyan-line);
	opacity: .85;
	z-index: 2;
}
.v-tick-t { top: -20px; left: 50%; width: 1px; height: 13px; transform: translateX(-50%); }
.v-tick-b { bottom: -20px; left: 50%; width: 1px; height: 13px; transform: translateX(-50%); }
.v-tick-l { left: -20px; top: 50%; height: 1px; width: 13px; transform: translateY(-50%); }
.v-tick-r { right: -20px; top: 50%; height: 1px; width: 13px; transform: translateY(-50%); }

.v-spec-readout {
	position: absolute;
	right: 0;
	top: 6%;
	z-index: 3;
	width: 244px;
	background: var(--surface);
	border: 1px solid var(--c-blue-line);
	border-radius: var(--r-s);
	box-shadow: var(--sh-2);
	font-family: var(--font-mono);
	overflow: hidden;
}
.v-spec-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-2);
	padding: var(--s-2) var(--s-3);
	border-bottom: 1px solid var(--c-blue-line);
	font: var(--mono-meta);
	letter-spacing: .18em;
	color: var(--c-cyan-text);
}
.v-spec-readout dl {
	padding: var(--s-3);
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--s-2) var(--s-3);
	font: var(--mono-meta);
	line-height: 1.5;
}
.v-spec-readout dt { color: var(--text-soft); letter-spacing: .08em; }
.v-spec-readout dd { color: var(--text); text-align: right; overflow-wrap: anywhere; }
.v-spec-price {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding: var(--s-2) var(--s-3);
	border-top: 1px solid var(--c-blue-line);
}
.v-spec-price-label { font: var(--mono-meta); letter-spacing: .18em; color: var(--text-soft); }
.v-spec-price-val {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--text-xl);
	color: var(--text);
	font-variant-numeric: tabular-nums;
}

@media (max-width: 920px) {
	.v-hero-grid { grid-template-columns: minmax(0, 1fr); }
	/* Stacked hero: center the sample plate + spec readout (they sit under the
	   copy here, so the desktop start-alignment + 7vw right pad read as a
	   left-hugging orphan). */
	.v-hero-stage { min-height: 0; padding-block: var(--s-5) var(--s-4); justify-items: center; padding-right: 0; }
	.v-sample-plate { width: min(320px, 78%); }
	.v-spec-readout { position: relative; right: auto; bottom: auto; margin-top: -36px; width: min(300px, 100%); }
}

/* ============================ PRODUCT RAIL ============================ */
.v-rail-section { position: relative; z-index: 1; padding-block: clamp(56px, 7vw, 96px); }
.v-rail-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--s-6);
	margin-bottom: var(--s-9);
}
.v-rail-controls { display: flex; gap: var(--s-2); flex-shrink: 0; }
html:not(.js) .v-rail-controls { display: none; } /* enhancement-only (B3) */
.v-rail-btn {
	width: 48px; height: 48px;
	display: grid;
	place-items: center;
	border: 1px solid var(--line);
	border-radius: var(--r-s);
	color: var(--text-soft);
	transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.v-rail-btn:hover { border-color: var(--c-blue); color: var(--c-blue); background: var(--c-blue-soft); }

.v-rail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: clamp(248px, 24vw, 308px);
	gap: var(--s-4);
	overflow-x: auto;
	scroll-snap-type: x proximity; /* B3: proximity, never mandatory */
	padding: var(--s-1) var(--s-1) var(--s-5);
	margin-inline: calc(-1 * var(--s-1));
	list-style: none;
	scrollbar-width: thin;
	scrollbar-color: var(--c-blue-line) var(--line-soft);
}
.v-rail::-webkit-scrollbar { height: 5px; }
.v-rail::-webkit-scrollbar-track { background: var(--line-soft); border-radius: 3px; }
.v-rail::-webkit-scrollbar-thumb { background: var(--c-blue-line); border-radius: 3px; }

.v-card {
	position: relative;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border: 1px solid var(--line-soft);
	border-radius: var(--r-s);
	overflow: hidden;
	transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
/* Equal-height cards: let the body grow and pin the foot (price + Add) to the
   bottom so a 2-line title can't misalign the Add buttons across a grid row. */
.v-card-body { flex: 1 1 auto; display: flex; flex-direction: column; }
.v-card-foot { margin-top: auto; }
.v-card:hover,
.v-card:focus-within {
	border-color: var(--c-blue-line);
	transform: translateY(-3px);
	box-shadow: var(--sh-2), 0 0 24px -12px var(--c-blue-glow);
}
/* Rail card top row: index (left) + category (right) in one flex row so a long
   category can never collide with the VA·NNN chip. */
.v-card-toprow {
	position: absolute;
	top: var(--s-4); left: var(--s-4); right: var(--s-4);
	z-index: 2;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--s-2);
	pointer-events: none;
}
.v-card-index {
	flex: none;
	font: var(--mono-meta);
	letter-spacing: .2em;
	color: var(--c-cyan-text);
	background: var(--surface);
	border: 1px solid var(--c-blue-line);
	border-radius: var(--s-1);
	padding: var(--s-1) var(--s-2);
}
.v-card-toprow .v-card-cat {
	position: static;
	width: fit-content;
	max-width: 64%;
	text-align: right;
	line-height: 1.25;
}
.v-card-cat {
	position: absolute;
	top: var(--s-5); right: var(--s-5);
	font: var(--mono-meta);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--text-soft);
	background: var(--surface);
	border: 1px solid var(--line);
	padding: var(--s-1) var(--s-2);
	border-radius: var(--s-1);
	z-index: 2;
}
.v-card-media {
	position: relative;
	aspect-ratio: 4 / 3.6;
	margin: var(--s-2) var(--s-2) 0;
	padding: var(--s-2);
	border-radius: var(--r-s);
	overflow: hidden;
	background: var(--surface-well);
	border: 1px solid var(--line-soft);
}
.v-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--s-1);
	transition: transform .25s ease;
}
.v-card:hover .v-card-media img,
.v-card:focus-within .v-card-media img { transform: scale(1.045); }

.v-card-body { padding: var(--s-3) var(--s-4) var(--s-4); }
.v-card-name {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--text-lg);
	letter-spacing: .01em;
}
.v-card-name a { color: var(--text); }
.v-card-sub {
	font: var(--mono-meta);
	letter-spacing: .1em;
	color: var(--text-soft);
	margin: var(--s-1) 0 var(--s-3);
}
/* Static per-card readout (B3: spec data never hover-only) */
.v-card-spec {
	display: grid;
	gap: var(--s-1);
	border-top: 1px solid var(--line-soft);
	padding-top: var(--s-3);
	margin-bottom: var(--s-3);
}
.v-card-spec div { display: flex; justify-content: space-between; gap: var(--s-3); }
.v-card-spec dt { font: var(--mono-meta); letter-spacing: .12em; color: var(--text-soft); }
.v-card-spec dd { font: var(--mono-meta); letter-spacing: .06em; color: var(--text); }
.v-card-foot {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--s-3);
	border-top: 1px solid var(--line-soft);
	padding-top: var(--s-3);
}
.v-card-price-wrap { display: grid; gap: 2px; }
.v-card-price {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--text-xl);
	color: var(--text);
	font-variant-numeric: tabular-nums;
}
.v-card-ship {
	font: var(--mono-meta);
	letter-spacing: .06em;
	color: var(--text-soft);
}
.v-card-view {
	font: var(--mono-label);
	letter-spacing: .12em;
	color: var(--c-blue);
	white-space: nowrap;
}
/* Quick add-to-cart on shop/featured cards — sits ABOVE the stretched
   card-link overlay (z-index 1) so the button is independently clickable. */
.v-card-add {
	position: relative;
	z-index: 2;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-1);
	min-height: 44px;
	padding: 0 var(--s-4);
	border-radius: var(--r-s);
	background: var(--c-blue);
	color: var(--c-white);
	font: var(--mono-label);
	letter-spacing: .1em;
	white-space: nowrap;
	border: 1px solid var(--c-blue);
	cursor: pointer;
	transition: background-color .15s ease, transform .15s ease;
}
.v-card-add::before {
	content: "";
	width: 15px; height: 15px;
	background: currentColor;
	-webkit-mask: var(--va-cart-icon) center / contain no-repeat;
	mask: var(--va-cart-icon) center / contain no-repeat;
}
.v-card-add:hover { background: var(--c-blue-hover); color: var(--c-white); transform: translateY(-1px); }
.v-card-add.loading { opacity: .7; pointer-events: none; }
.v-card-add.added::before { -webkit-mask-image: var(--va-check-icon); mask-image: var(--va-check-icon); }
.v-card-add--view {
	background: transparent;
	color: var(--c-blue);
	border-color: var(--line);
}
.v-card-add--view::before { display: none; }
/* ≤600px the cards are a 2-up grid (~162px each); the full-padding Add button
   (79px) overran the card edge. Tighten padding/gap/letter-spacing and let the
   price block shrink so the foot row fits inside the card. */
@media (max-width: 600px) {
	.v-card-foot { gap: var(--s-2); }
	.v-card-price-wrap { min-width: 0; }
	.v-card-add { padding: 0 var(--s-3); gap: 5px; letter-spacing: .04em; }
	.v-card-add::before { width: 13px; height: 13px; }
}
:root {
	--va-cart-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E");
	--va-check-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
/* Stretched card link + focus ring on the card frame */
/* Related/up-sell products on the single-product page render the card markup
   but their <li> is Woo's `.product` (position:static, not `.v-card`). Without
   a positioned container the stretched `.v-card-link::after` overlay escaped up
   to `div.product` and blanketed the WHOLE page — covering the add-to-cart
   button so clicks navigated to a related product instead of adding. Scope the
   overlay by positioning every card container. */
.single-product .related li.product,
.single-product .up-sells li.product,
.woocommerce .related li.product,
.woocommerce .up-sells li.product { position: relative; }
.v-card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.v-card-link:focus-visible { outline: none; }
.v-card-link:focus-visible::after {
	outline: 2px solid var(--focus-ring);
	outline-offset: -2px;
	border-radius: var(--r-s);
}

.v-rail-note {
	font: var(--mono-label);
	letter-spacing: .1em;
	color: var(--text-soft);
	margin-top: var(--s-1);
}

/* ====================== VERIFY BAND (dark, HOME ONLY module) ====================== */
.v-verify {
	position: relative;
	z-index: 1;
	border-block: 1px solid var(--line-soft);
	overflow: hidden;
}
/* scanlines — HOME-ONLY whitelist (this band exists only on home) */
.v-verify::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: repeating-linear-gradient(
		to bottom,
		transparent 0px,
		transparent 3px,
		var(--c-cyan-glow) 3px,
		var(--c-cyan-glow) 4px);
	opacity: .18;
}
/* scan sweep — motion gated on prefers-reduced-motion */
@media (prefers-reduced-motion: no-preference) {
	.v-verify::after {
		content: "";
		position: absolute;
		left: 0; right: 0;
		top: -15%;
		height: 60px;
		background: linear-gradient(to bottom, transparent, var(--c-cyan-glow), transparent);
		animation: v-scan-sweep 7s linear infinite;
		pointer-events: none;
	}
	@keyframes v-scan-sweep {
		from { transform: translateY(-80px); }
		to   { transform: translateY(640px); }
	}
}

.v-verify-inner { padding-block: clamp(56px, 7vw, 92px); position: relative; }
.v-verify-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--s-3) var(--s-6);
	margin-bottom: var(--s-9);
}
.v-verify-stamp {
	font: var(--mono-label);
	letter-spacing: .14em;
	color: var(--text-soft);
}
.v-verify-rows { display: grid; }
.v-verify-row {
	display: grid;
	grid-template-columns: 64px minmax(120px, 240px) 1fr auto;
	align-items: baseline;
	gap: var(--s-3) var(--s-5);
	padding: var(--s-5) 0;
	border-top: 1px solid var(--line-soft);
	font-family: var(--font-mono);
}
.v-verify-row:last-child { border-bottom: 1px solid var(--line-soft); }
.v-verify-idx { font: var(--mono-label); color: var(--text-soft); letter-spacing: .12em; }
.v-verify-key {
	font: var(--mono-label);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--text-soft);
}
.v-verify-val {
	font: var(--mono-data);
	color: var(--text);
	letter-spacing: .04em;
}
.v-verify-state {
	font: var(--mono-meta);
	letter-spacing: .16em;
	color: var(--c-cyan);
	border: 1px solid var(--c-cyan-line);
	border-radius: var(--s-1);
	padding: var(--s-1) var(--s-2);
	white-space: nowrap;
}
.v-verify-cta { margin-top: var(--s-9); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }
.v-verify-note { font: var(--mono-label); letter-spacing: .1em; color: var(--text-soft); }

@media (max-width: 600px) {
	.v-verify-row { grid-template-columns: 44px 1fr auto; }
	.v-verify-key { grid-column: 2; }
	.v-verify-val { grid-column: 2 / -1; grid-row: 2; }
	.v-verify-state { grid-column: 3; grid-row: 1; }
}

/* ============================ CATEGORY INDEX ============================ */
.v-cat-section { position: relative; z-index: 1; padding-block: clamp(56px, 7vw, 100px); }
.v-cat-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: start;
	margin-top: var(--s-10);
}
.v-cat-list { border-top: 1px solid var(--line); }
.v-cat-row {
	display: grid;
	grid-template-columns: 56px 1fr auto;
	align-items: center;
	gap: var(--s-4);
	padding: var(--s-6) var(--s-2);
	border-bottom: 1px solid var(--line);
	min-height: 88px;
	color: var(--text);
	transition: background-color .18s ease, padding-left .18s ease;
}
.v-cat-row:hover, .v-cat-row:focus-visible {
	background: linear-gradient(90deg, var(--c-blue-soft), transparent 70%);
	padding-left: var(--s-4);
	color: var(--text);
}
.v-cat-num {
	font: var(--mono-data);
	letter-spacing: .14em;
	color: var(--c-cyan-text);
}
.v-cat-name {
	display: block;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(var(--text-lg), 2.6vw, 1.9rem);
	color: var(--text-soft);
	line-height: 1.15;
	transition: color .15s ease;
}
.v-cat-row:hover .v-cat-name, .v-cat-row:focus-visible .v-cat-name { color: var(--text); }
.v-cat-meta {
	display: block;
	font: var(--mono-meta);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--text-soft);
	margin-top: var(--s-1);
}
.v-cat-arrow {
	width: 40px; height: 40px;
	display: grid; place-items: center;
	border: 1px solid var(--line);
	border-radius: 50%;
	color: var(--text-soft);
	transition: border-color .15s ease, color .15s ease, transform .18s ease;
}
.v-cat-row:hover .v-cat-arrow, .v-cat-row:focus-visible .v-cat-arrow {
	border-color: var(--c-blue);
	color: var(--c-blue);
	transform: rotate(-45deg);
}

.v-cat-preview {
	position: sticky;
	top: 110px;
	aspect-ratio: 4 / 4.6;
	max-height: 520px;
	border: 1px solid var(--line-soft);
	border-radius: var(--r-s);
	background: var(--surface-well);
	padding: var(--s-3);
	box-shadow: var(--sh-2);
	overflow: hidden;
	display: grid;
	place-items: center;
}
.v-cat-preview img {
	position: absolute;
	inset: var(--s-3);
	width: calc(100% - 2 * var(--s-3));
	height: calc(100% - 2 * var(--s-3));
	object-fit: cover;
	border-radius: var(--r-s);
	opacity: 0;
	transform: scale(1.02);
	transition: opacity .3s ease, transform .3s ease;
}
.v-cat-preview img.is-active { opacity: 1; transform: scale(1); }
.v-preview-label {
	position: absolute;
	bottom: var(--s-7); left: var(--s-7);
	z-index: 3;
	font: var(--mono-meta);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--c-cyan-text);
	background: var(--surface);
	border: 1px solid var(--c-blue-line);
	border-radius: var(--s-1);
	padding: var(--s-1) var(--s-2);
}
.v-preview-label:empty { display: none; }
.v-preview-corner {
	position: absolute;
	top: var(--s-7); right: var(--s-7);
	z-index: 3;
	font: var(--mono-meta);
	letter-spacing: .14em;
	color: var(--text-soft);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--s-1);
	padding: var(--s-1) var(--s-2);
}

@media (max-width: 920px) {
	.v-cat-grid { grid-template-columns: minmax(0, 1fr); }
	.v-cat-preview { display: none; }
}

/* ============================ HOW ORDERING ============================ */
.v-how {
	position: relative;
	z-index: 1;
	padding-block: clamp(56px, 7vw, 100px);
	background: linear-gradient(to bottom, transparent, var(--surface-well-2) 30%, transparent);
}
.v-how-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--s-4);
	margin-top: var(--s-11);
}
.v-how-step {
	position: relative;
	background: var(--surface);
	border: 1px solid var(--line-soft);
	border-radius: var(--r-s);
	padding: var(--s-7) var(--s-5) var(--s-6);
	transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.v-how-step:hover {
	border-color: var(--c-blue-line);
	transform: translateY(-3px);
	box-shadow: var(--sh-2);
}
.v-step-num {
	font: var(--mono-label);
	letter-spacing: .2em;
	color: var(--c-cyan-text);
	display: inline-block;
	border: 1px solid var(--c-blue-line);
	border-radius: var(--s-1);
	padding: var(--s-1) var(--s-2);
	margin-bottom: var(--s-4);
}
.v-how-step h3 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--text-lg);
	color: var(--text);
	margin-bottom: var(--s-2);
	line-height: 1.2;
}
.v-how-step p { font-size: var(--text-sm); color: var(--text-soft); line-height: 1.6; }
.v-step-detail {
	display: block;
	margin-top: var(--s-3);
	font: var(--mono-meta);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--text-soft);
}
@media (max-width: 920px) { .v-how-grid { grid-template-columns: minmax(0, 1fr); } }

.v-pay-strip {
	margin-top: var(--s-8);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-2) var(--s-3);
}
.v-pay-label {
	font: var(--mono-label);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--text-soft);
	margin-right: var(--s-2);
}
.v-pay-chip {
	font: var(--mono-label);
	letter-spacing: .08em;
	color: var(--text-soft);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: var(--s-2) var(--s-4);
	list-style: none;
}
.v-after-pay {
	margin-top: var(--s-9);
	font-size: var(--text-sm);
	color: var(--text-soft);
	max-width: 72ch;
}
.v-after-pay a { text-decoration: underline; text-underline-offset: 3px; }

/* ============================ WHOLESALE ============================ */
.v-wholesale { position: relative; z-index: 1; padding-block: clamp(40px, 5vw, 72px) 0; }
.v-wholesale-panel {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-6) var(--s-10);
}
.v-wholesale-copy { max-width: 56ch; }

/* ============================ CAPTURE ============================ */
.v-capture { position: relative; z-index: 1; padding-block: clamp(56px, 7vw, 100px); }
.v-capture-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
	gap: clamp(28px, 4vw, 64px);
	align-items: center;
}
/* minmax(0,1fr), NOT 1fr: the email input's intrinsic min-content (~330px)
   otherwise blows the auto-min track past the panel and overflows 375px. */
@media (max-width: 920px) { .v-capture-grid { grid-template-columns: minmax(0, 1fr); } }
.v-form-note {
	margin-top: var(--s-3);
	font: var(--mono-meta);
	letter-spacing: .08em;
	color: var(--text-soft);
}

/* mu-plugin shortcode form, restyled on the light panel (semantics live in
   vantage-core; selectors out-specify its inline fallback styles) */
.v-capture .va-footer-form { display: flex; gap: var(--s-2); flex-wrap: wrap; margin: 0; }
.v-capture .va-footer-form input[type="email"] {
	flex: 1;
	min-width: 200px;
	min-height: 52px;
	padding: 0 var(--s-4);
	font-family: var(--font-mono);
	font-size: var(--text-base);
	color: var(--text);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-s);
	outline: none;
}
.v-capture .va-footer-form input[type="email"]:focus-visible {
	border-color: var(--c-blue);
	box-shadow: 0 0 0 3px var(--c-blue-ring);
}
.v-capture .va-footer-form button {
	min-height: 52px;
	padding: 0 var(--s-8);
	background: var(--c-blue);
	color: var(--c-white);
	border: 0;
	border-radius: var(--r-s);
	font-family: var(--font-text);
	font-weight: 600;
	font-size: var(--text-sm);
	letter-spacing: .03em;
	box-shadow: 0 0 0 1px var(--c-blue-line), 0 12px 28px -12px var(--c-blue-glow);
}
.v-capture .va-footer-form button:hover { background: var(--c-blue-hover); }
.v-capture .va-footer-form-msg { font: var(--mono-label); margin-top: var(--s-3); color: var(--c-cyan-text); }
@media (max-width: 600px) {
	.v-capture .va-footer-form { flex-direction: column; }
	/* In the column the email input must not keep its row min-width (200px) /
	   intrinsic size — force it to the panel width so it can't run off-screen. */
	.v-capture .va-footer-form input[type="email"] { width: 100%; min-width: 0; }
	.v-capture .va-footer-form button { width: 100%; }
}

/* ============================ FOOTER ============================ */
.v-footer {
	position: relative;
	z-index: 1;
	border-top: 1px solid var(--line-soft);
	overflow: hidden;
}
.v-footer-top {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.6fr);
	gap: var(--s-9);
	padding-block: clamp(48px, 6vw, 80px) var(--s-10);
}
/* Company & Support as a 2-column list (was one long column). */
.v-footer-menu-2col {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2px var(--s-6);
}
.v-footer-brand .v-logo { height: 40px; width: auto; margin-bottom: var(--s-4); }
.v-footer-brand p {
	font-size: var(--text-sm);
	color: var(--text-soft);
	max-width: 34ch;
	line-height: 1.7;
}
.v-footer-head {
	font: var(--mono-label);
	font-weight: 400;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--c-cyan);
	margin-bottom: var(--s-4);
}
.v-footer-col ul { display: grid; gap: 2px; list-style: none; }
.v-footer-col a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 2px 0;
	font-size: var(--text-sm);
	color: var(--text-soft);
	transition: color .15s ease;
}
.v-footer-col a:hover { color: var(--c-white); }
.v-footer-capture-sub {
	font-size: var(--text-sm);
	color: var(--text-soft);
	line-height: 1.7;
	margin-bottom: var(--s-3);
}

/* mu-plugin shortcode form inside the dark footer */
.v-footer .va-footer-form { display: flex; gap: var(--s-2); flex-wrap: wrap; margin: 0; }
.v-footer .va-footer-form input[type="email"] {
	flex: 1;
	min-width: 0;
	min-height: 48px;
	padding: 0 var(--s-3);
	font-family: var(--font-mono);
	font-size: var(--text-base);
	color: var(--text);
	background: var(--surface-well);
	border: 1px solid var(--line);
	border-radius: var(--r-s);
	outline: none;
}
.v-footer .va-footer-form input[type="email"]:focus-visible {
	border-color: var(--c-cyan);
	box-shadow: 0 0 0 3px var(--c-cyan-glow);
}
.v-footer .va-footer-form button {
	min-height: 48px;
	padding: 0 var(--s-5);
	background: var(--c-blue);
	color: var(--c-white);
	border: 0;
	border-radius: var(--r-s);
	font-family: var(--font-text);
	font-weight: 600;
	font-size: var(--text-sm);
	letter-spacing: .03em;
}
.v-footer .va-footer-form button:hover { background: var(--c-blue-hover); }
.v-footer .va-footer-form-msg { font: var(--mono-label); margin-top: var(--s-2); color: var(--c-cyan); }

.v-footer-pay {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-2) var(--s-3);
	border-top: 1px solid var(--line-soft);
	padding-block: var(--s-5);
}
.v-footer-pay .v-pay-list { display: contents; }
.v-footer-pay .v-pay-chip {
	color: var(--text-soft);
	background: transparent;
	border-color: var(--line);
}

.v-footer-ruo {
	border-top: 1px solid var(--line-soft);
	padding-block: var(--s-6);
}
.v-footer-ruo p {
	font: var(--mono-meta);
	line-height: 1.8;
	letter-spacing: .04em;
	color: var(--text-soft);
	max-width: 110ch;
}
.v-footer-ruo strong { color: var(--text); font-weight: 400; }

.v-footer-legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-3) var(--s-6);
	border-top: 1px solid var(--line-soft);
	padding-block: var(--s-5);
	font: var(--mono-meta);
	letter-spacing: .08em;
	color: var(--text-soft);
}

/* Giant wordmark — C1: low-opacity SOLID fill (no sub-pixel stroke), hidden
   at the small breakpoint. Decorative only. */
.v-giant-wordmark {
	display: block;
	width: 100%;
	height: auto;
	margin-top: var(--s-2);
	user-select: none;
	pointer-events: none;
}
.v-giant-wordmark text {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 124px;
	letter-spacing: .04em;
	fill: var(--line-soft);
}
@media (max-width: 920px) {
	.v-footer-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.v-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
	.v-giant-wordmark { display: none; }
	.v-footer-top { grid-template-columns: minmax(0, 1fr); }
}

/* ============================ GENERIC PAGE ============================ */
.v-page-inner { padding-block: clamp(40px, 6vw, 80px); }
.v-page-head { margin-bottom: var(--s-8); }
.v-page-title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
	line-height: 1.08;
	letter-spacing: -.01em;
	color: var(--text);
	margin-top: var(--s-2);
	text-wrap: balance;
}
.v-entry-content { max-width: 76ch; }
.v-entry-content h2, .v-entry-content h3, .v-entry-content h4 {
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--text);
	line-height: 1.2;
	margin: var(--s-8) 0 var(--s-3);
}
.v-entry-content h2 { font-size: var(--text-xl); }
.v-entry-content h3 { font-size: var(--text-lg); }
.v-entry-content p, .v-entry-content ul, .v-entry-content ol { margin: 0 0 var(--s-4); color: var(--text-soft); }
.v-entry-content ul, .v-entry-content ol { padding-left: var(--s-5); }
.v-entry-content a { text-decoration: underline; text-underline-offset: 3px; }
/* Buttons inside prose must never inherit the link underline. */
.v-entry-content .v-btn,
.v-entry-content .button,
.v-entry-content a.button,
.v-entry-content .checkout-button,
.v-entry-content #place_order,
.v-entry-content .woocommerce-button { text-decoration: none; }
.v-entry-content img { border-radius: var(--r-s); }
.v-entry-content table { border-collapse: collapse; width: 100%; margin: 0 0 var(--s-4); }
.v-entry-content th, .v-entry-content td {
	border: 1px solid var(--line);
	padding: var(--s-2) var(--s-3);
	text-align: left;
	font-size: var(--text-sm);
}
.v-article-teaser { padding-block: var(--s-6); border-bottom: 1px solid var(--line-soft); }
.v-teaser-title { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); }
.v-teaser-title a { color: var(--text); }
.v-teaser-title a:hover { color: var(--c-blue); }
.v-page .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px; min-height: 44px;
	padding: 0 var(--s-2);
	border: 1px solid var(--line);
	border-radius: var(--r-s);
	color: var(--text-soft);
	margin-right: var(--s-1);
}
.v-page .page-numbers.current { background: var(--c-blue); color: var(--c-white); border-color: var(--c-blue); }
.v-page nav.pagination, .v-page .nav-links { margin-top: var(--s-8); }

/* ================================================================== */
/* ====================== P3 — SHOP + PRODUCT ======================= */
/* ================================================================== */

/* ---- Neutralize WooCommerce default float layout where we grid ---- */
.woocommerce ul.products,
.woocommerce-page ul.products { margin: 0; padding: 0; list-style: none; }
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering { margin: 0; }

/* ============================ BREADCRUMB ============================ */
.v-breadcrumb {
	font: var(--mono-label);
	letter-spacing: .1em;
	color: var(--text-soft);
	margin-bottom: var(--s-6);
}
.v-breadcrumb a { color: var(--text-soft); }
.v-breadcrumb a:hover { color: var(--c-blue); }
.v-crumb-sep { margin: 0 var(--s-2); color: var(--line); }

/* ============================ SHOP HEADER ============================ */
.v-shop-head { margin-bottom: var(--s-8); }
.v-shop-head .v-page-title { margin-top: var(--s-3); }

.v-pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	margin-top: var(--s-6);
}
.v-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	min-height: 40px;
	padding: 0 var(--s-4);
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--text-soft);
	background: var(--surface);
	transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.v-pill:hover { border-color: var(--c-blue); color: var(--c-blue); background: var(--c-blue-soft); }
.v-pill.is-active {
	border-color: var(--c-blue);
	background: var(--c-blue);
	color: var(--c-white);
}
.v-pill-label { font-size: var(--text-sm); font-weight: 500; letter-spacing: .02em; }
.v-pill-count {
	font: var(--mono-meta);
	letter-spacing: .06em;
	padding: 1px var(--s-2);
	border-radius: 999px;
	background: var(--c-ink-wash);
	color: inherit;
}
.v-pill.is-active .v-pill-count { background: rgba(255,255,255,.22); }

.v-shop-desc { margin-top: var(--s-6); max-width: 76ch; }
.v-shop-desc p { color: var(--text-soft); }

/* ============================ SHOP TOOLBAR ============================ */
.v-shop-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--s-3);
	padding: var(--s-4) 0;
	margin-bottom: var(--s-5);
	border-top: 1px solid var(--line-soft);
	border-bottom: 1px solid var(--line-soft);
}
.v-shop-count {
	font: var(--mono-label);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--text-soft);
}
.v-shop-order select {
	min-height: 44px;
	font: var(--mono-label);
	letter-spacing: .04em;
	padding-right: var(--s-8);
	cursor: pointer;
	/* Windows dark-mode <select> contrast safety */
	background-color: var(--surface);
	color: var(--text);
}

/* ============================ SHOP GRID ============================ */
.v-shop-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
	gap: var(--s-4);
	list-style: none;
	margin: 0;
	padding: 0;
}
.v-shop-grid li.product,
.v-shop-grid .v-shop-card {
	float: none;
	width: auto;
	margin: 0;
	clear: none;
}
/* Shop/related/recently-viewed cards reuse .v-card; cancel the rail-only
   scroll snap so they sit in the grid cleanly. */
.v-shop-grid .v-card { scroll-snap-align: none; }
.v-shop-card .v-card-cat { top: var(--s-4); right: var(--s-4); }
.v-shop-card .v-card-sub { margin-bottom: var(--s-4); }
@media (max-width: 600px) {
	.v-shop-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-3); }
	.v-shop-card .v-card-body { padding: var(--s-3); }
	.v-shop-card .v-card-name { font-size: var(--text-base); }
}

/* ============================ PAGINATION ============================ */
/* High-specificity to beat WooCommerce's default pagination (purple #E9E6ED
   current chip + inline-block segmented bar — that was the "weird grid"). */
.woocommerce nav.woocommerce-pagination { margin-top: var(--s-9); text-align: center; }
.woocommerce nav.woocommerce-pagination ul {
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	list-style: none;
	margin: 0;
	padding: 0;
	border: 0;
}
.woocommerce nav.woocommerce-pagination ul li {
	margin: 0;
	border: 0;
	overflow: visible;
}
.woocommerce nav.woocommerce-pagination ul li a.page-numbers,
.woocommerce nav.woocommerce-pagination ul li span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 var(--s-2);
	border: 1px solid var(--line);
	border-radius: var(--r-s);
	background: var(--surface);
	color: var(--text-soft);
	font: var(--mono-label);
	letter-spacing: .04em;
	transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.woocommerce nav.woocommerce-pagination ul li a.page-numbers:hover {
	border-color: var(--c-blue);
	color: var(--c-blue);
	background: var(--c-blue-soft);
}
.woocommerce nav.woocommerce-pagination ul li span.page-numbers.current,
.woocommerce nav.woocommerce-pagination ul li a.page-numbers.current {
	background: var(--c-blue);
	border-color: var(--c-blue);
	color: var(--c-white);
}

/* ============================ EMPTY STATE ============================ */
.v-empty {
	border: 1px solid var(--line-soft);
	border-radius: var(--r-m);
	background: var(--surface-well);
	padding: clamp(40px, 6vw, 72px);
	text-align: center;
}
.v-empty .v-tag { justify-content: center; }
.v-empty .v-section-h { margin-bottom: var(--s-4); }
.v-empty-sub { color: var(--text-soft); max-width: 48ch; margin: 0 auto var(--s-7); }

/* ====================== SEARCH SUGGEST (listbox) ====================== */
.v-suggest-field { display: flex; align-items: center; gap: var(--s-2); }
.v-suggest-field input[type="search"] { flex: 1; min-width: 0; }
.v-suggest-list {
	margin: var(--s-2) 0 0;
	padding: var(--s-1);
	list-style: none;
	border: 1px solid var(--line);
	border-radius: var(--r-m);
	background: var(--surface);
	box-shadow: var(--sh-2);
	max-height: min(60vh, 420px);
	overflow-y: auto;
	overscroll-behavior: contain;
}
.v-suggest-opt {
	display: grid;
	grid-template-columns: 40px 1fr auto;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-2) var(--s-3);
	border-radius: var(--r-s);
	cursor: pointer;
}
.v-suggest-opt.is-active,
.v-suggest-opt:hover { background: var(--c-blue-soft); }
.v-suggest-thumb {
	width: 40px; height: 40px;
	object-fit: cover;
	border-radius: var(--s-1);
	background: var(--surface-well);
	border: 1px solid var(--line-soft);
}
.v-suggest-text { display: grid; gap: 1px; min-width: 0; }
.v-suggest-name {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--text-sm);
	color: var(--text);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.v-suggest-sku { font: var(--mono-meta); letter-spacing: .08em; color: var(--text-soft); }
.v-suggest-price {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--text-base);
	color: var(--text);
	font-variant-numeric: tabular-nums;
}

/* ====================== SINGLE PRODUCT LAYOUT ====================== */
.single-product div.product {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: clamp(28px, 4vw, 56px) clamp(28px, 4vw, 64px);
	align-items: start;
}
.single-product div.product > .woocommerce-product-gallery { grid-column: 1; min-width: 0; }
.single-product div.product > .summary { grid-column: 2; min-width: 0; }
.single-product div.product > .woocommerce-tabs,
.single-product div.product > .related,
.single-product div.product > .up-sells,
.single-product div.product > .v-rv-section,
.single-product div.product > .v-sticky-atc { grid-column: 1 / -1; }
/* Neutralize WooCommerce's default float widths (its `div.summary` /
   `div.woocommerce-product-gallery` selectors out-specify a class-only
   override and were squeezing each grid track to ~48%). !important is the
   clean win over a third-party framework default. */
.single-product div.product .woocommerce-product-gallery,
.single-product div.product .summary,
.single-product div.product .entry-summary,
.single-product div.product div.summary,
.single-product div.product div.woocommerce-product-gallery {
	float: none !important;
	width: 100% !important;
	margin: 0 !important;
	clear: none !important;
}
@media (max-width: 920px) {
	.single-product div.product { grid-template-columns: minmax(0, 1fr); }
	.single-product div.product > .woocommerce-product-gallery,
	.single-product div.product > .summary { grid-column: 1; }
}

/* ---- Gallery ---- */
/* z-index:0 establishes a stacking context so WooCommerce's zoom trigger (which
   core styles to z-index:99) stays trapped BELOW the sticky header (z-50) and
   its open mobile nav drawer — otherwise the magnifier floats over the menu. */
.woocommerce-product-gallery { position: relative; z-index: 0; }
.woocommerce-product-gallery__wrapper { margin: 0; }
.woocommerce-product-gallery__image { border-radius: var(--r-m); overflow: hidden; }
.woocommerce-product-gallery__image img {
	border-radius: var(--r-m);
	border: 1px solid var(--line-soft);
	background: var(--surface-well);
}
.woocommerce-product-gallery .flex-control-thumbs {
	display: flex; flex-wrap: wrap; gap: var(--s-2);
	margin: var(--s-3) 0 0; padding: 0; list-style: none;
}
.woocommerce-product-gallery .flex-control-thumbs li { width: 72px; }
.woocommerce-product-gallery .flex-control-thumbs img {
	border-radius: var(--r-s);
	border: 1px solid var(--line-soft);
	cursor: pointer;
	opacity: .7;
	transition: opacity .15s ease, border-color .15s ease;
}
.woocommerce-product-gallery .flex-control-thumbs img:hover,
.woocommerce-product-gallery .flex-control-thumbs .flex-active img { opacity: 1; border-color: var(--c-blue-line); }
.woocommerce-product-gallery__trigger {
	position: absolute; top: var(--s-3); right: var(--s-3); z-index: 3;
	width: 40px; height: 40px; display: grid; place-items: center;
	border: 1px solid var(--line); border-radius: 50%;
	background: var(--surface); color: var(--text-soft);
}

/* ---- Summary: title / price ---- */
.single-product .product_title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(var(--text-2xl), 3.4vw, var(--text-4xl));
	line-height: 1.06;
	letter-spacing: -.01em;
	color: var(--text);
	margin: 0 0 var(--s-3);
	text-wrap: balance;
}
.single-product .summary .price,
.single-product .summary .price .amount {
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--text);
	font-variant-numeric: tabular-nums;
}
.single-product .summary > .price { font-size: var(--text-2xl); margin: 0 0 var(--s-4); }
.single-product .summary .price del { color: var(--text-soft); opacity: .7; margin-right: var(--s-2); font-weight: 500; }
.single-product .summary .price ins { text-decoration: none; }
.single-product .woocommerce-product-details__short-description {
	color: var(--text-soft);
	margin: var(--s-4) 0;
	max-width: 56ch;
}

/* ---- Trust badges (M8) ---- */
.v-trust {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2) var(--s-5);
	list-style: none;
	margin: 0 0 var(--s-5);
	padding: var(--s-4) 0;
	border-top: 1px solid var(--line-soft);
	border-bottom: 1px solid var(--line-soft);
}
.v-trust-item {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	font: var(--mono-label);
	letter-spacing: .04em;
	color: var(--text-soft);
}
.v-trust-tick { color: var(--c-success); flex-shrink: 0; }

/* ---- PER-SKU SPEC READOUT (B2) ---- */
.v-readout {
	margin: var(--s-5) 0;
	border: 1px solid var(--c-blue-line);
	border-radius: var(--r-m);
	background:
		radial-gradient(ellipse at 90% 0%, var(--c-blue-soft), transparent 60%),
		linear-gradient(165deg, var(--c-paper-0), var(--surface-well));
	overflow: hidden;
	font-family: var(--font-mono);
}
.v-readout-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-3);
	padding: var(--s-3) var(--s-4);
	border-bottom: 1px solid var(--c-blue-line);
}
.v-readout-title {
	font: var(--mono-label);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--c-cyan-text);
}
.v-readout-sku { font: var(--mono-meta); letter-spacing: .12em; color: var(--text-soft); }
.v-readout-grid { margin: 0; padding: var(--s-2) var(--s-4) var(--s-4); }
.v-readout-row {
	display: grid;
	grid-template-columns: minmax(88px, 0.4fr) 1fr;
	align-items: baseline;
	gap: var(--s-4);
	padding: var(--s-3) 0;
	border-bottom: 1px solid var(--line-soft);
}
.v-readout-row:last-child { border-bottom: 0; }
.v-readout-row dt {
	font: var(--mono-label);
	letter-spacing: .14em;
	color: var(--text-soft);
}
.v-readout-row dd {
	margin: 0;
	font: var(--mono-data);
	letter-spacing: .03em;
	color: var(--text);
	text-align: right;
	overflow-wrap: anywhere;
}

/* ---- Add-to-cart form ---- */
.single-product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--s-3);
	margin: var(--s-5) 0;
}
/* Compact integrated stepper (matches the cart) — was a bulky box with the
   +/- buttons looking detached. */
.single-product form.cart .quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--line);
	border-radius: var(--r-s);
	overflow: hidden;
	background: var(--surface);
}
.single-product form.cart .quantity .va-step {
	width: 44px; height: 44px;
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--text-soft);
	font-size: 18px; line-height: 1;
	border: 0; background: transparent;
	cursor: pointer;
}
.single-product form.cart .quantity .va-step:hover { color: var(--c-blue); background: var(--c-blue-soft); }
.single-product form.cart .quantity .va-step:disabled { opacity: .4; cursor: default; }
.single-product form.cart .quantity input.qty {
	width: 46px; min-height: 44px;
	border: 0; border-inline: 1px solid var(--line);
	border-radius: 0;
	text-align: center;
	font: var(--mono-data);
	font-variant-numeric: tabular-nums;
	background: transparent;
	-moz-appearance: textfield;
	padding: 0;
}
.single-product form.cart .quantity input.qty::-webkit-inner-spin-button,
.single-product form.cart .quantity input.qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.single-product .single_add_to_cart_button,
.single-product .single_add_to_cart_button.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 var(--s-8);
	border: 0;
	border-radius: var(--r-s);
	background: var(--c-blue);
	color: var(--c-white);
	font-family: var(--font-text);
	font-weight: 600;
	font-size: var(--text-sm);
	letter-spacing: .03em;
	box-shadow: 0 0 0 1px var(--c-blue-line), 0 12px 28px -12px var(--c-blue-glow);
	transition: background-color .15s ease, transform .15s ease;
}
.single-product .single_add_to_cart_button:hover { background: var(--c-blue-hover); transform: translateY(-1px); }

/* ---- Reassurance block (COA / ship / pay / after-pay) ---- */
.v-pdp-reassure { margin-top: var(--s-5); }
.v-coa-link {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	font: var(--mono-label);
	letter-spacing: .08em;
	color: var(--c-blue);
	padding: var(--s-2) 0;
}
.v-coa-link:hover { color: var(--c-blue-hover); }
.v-ship-notes {
	display: grid;
	gap: var(--s-1);
	list-style: none;
	margin: var(--s-4) 0;
	padding: var(--s-4) 0;
	border-top: 1px solid var(--line-soft);
	border-bottom: 1px solid var(--line-soft);
}
.v-ship-notes li { display: flex; justify-content: space-between; gap: var(--s-4); }
.v-ship-k { font: var(--mono-label); letter-spacing: .1em; text-transform: uppercase; color: var(--text-soft); }
.v-ship-v { font: var(--mono-data); color: var(--text); text-align: right; }
.v-ruo-line { font: var(--mono-meta); letter-spacing: .04em; color: var(--text-soft); margin: var(--s-3) 0 var(--s-5); }
.v-pdp-pay { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.v-pdp-pay .v-pay-list { display: contents; }
.v-after-pay-link {
	flex-basis: 100%;
	margin-top: var(--s-2);
	font: var(--mono-label);
	letter-spacing: .06em;
	color: var(--c-blue);
}
.v-after-pay-link:hover { color: var(--c-blue-hover); }

/* ---- Sticky add-to-cart bar ---- */
.v-sticky-atc {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 80;
	background: color-mix(in srgb, var(--surface) 92%, transparent);
	border-top: 1px solid var(--line);
	box-shadow: 0 -8px 28px -16px var(--c-blue-glow);
	transform: translateY(100%);
	transition: transform .22s ease;
	padding-bottom: env(safe-area-inset-bottom, 0);
}
@supports (backdrop-filter: blur(2px)) {
	.v-sticky-atc { backdrop-filter: blur(12px); }
}
.v-sticky-atc.is-visible { transform: translateY(0); }
.v-sticky-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-4);
	min-height: 64px;
	padding-block: var(--s-2);
}
.v-sticky-meta { display: grid; gap: 1px; min-width: 0; }
.v-sticky-name {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--text-base);
	color: var(--text);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.v-sticky-price {
	font: var(--mono-data);
	color: var(--text-soft);
	font-variant-numeric: tabular-nums;
}
.v-sticky-btn { min-height: 48px; flex-shrink: 0; white-space: nowrap; }
@media (max-width: 600px) {
	.v-sticky-name { max-width: 44vw; }
	.v-sticky-btn { padding: 0 var(--s-5); }
}

/* ---- Description / data tabs ---- */
.woocommerce-tabs { margin-top: clamp(40px, 5vw, 72px); }
.woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-5);
	list-style: none;
	margin: 0 0 var(--s-6);
	padding: 0;
	border-bottom: 1px solid var(--line);
}
/* Kill WooCommerce's default connected-tab pseudo borders + the gray box on
   inactive tabs (its `div.product` selectors out-specify a plain .tabs rule). */
.woocommerce-tabs ul.tabs::before,
.woocommerce-tabs ul.tabs::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none !important; content: none !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce-tabs ul.tabs li {
	margin: 0;
	border: 0;
	background: transparent;
}
/* Underline indicator for the selected tab — no box. */
.woocommerce div.product .woocommerce-tabs ul.tabs li a,
.woocommerce-tabs ul.tabs li a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 0 var(--s-3);
	margin-bottom: -1px;
	font: var(--mono-label);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--text-soft);
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	background: transparent;
	transition: color .15s ease, border-color .15s ease;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover,
.woocommerce-tabs ul.tabs li a:hover { color: var(--text); background: transparent; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li.active a { color: var(--c-blue); background: transparent; border-bottom-color: var(--c-blue); }
.woocommerce-tabs .panel,
.woocommerce-Tabs-panel { max-width: 80ch; }
/* Tighten the description panel's side gutters on phones so the copy isn't
   squeezed into a narrow column (was ~40px each side on a 375px screen). */
@media (max-width: 600px) {
	.single-product .woocommerce-tabs .panel,
	.single-product .woocommerce-Tabs-panel { padding-left: var(--s-4); padding-right: var(--s-4); }
}
.woocommerce-tabs .panel h2,
.woocommerce-Tabs-panel h2 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--text-xl);
	color: var(--text);
	line-height: 1.2;
	margin: var(--s-7) 0 var(--s-3);
}
.woocommerce-tabs .panel h2:first-child,
.woocommerce-Tabs-panel h2:first-child { margin-top: 0; }
.woocommerce-tabs .panel h3,
.woocommerce-Tabs-panel h3 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--text-lg);
	color: var(--text);
	margin: var(--s-6) 0 var(--s-2);
}
.woocommerce-tabs .panel p,
.woocommerce-tabs .panel ul,
.woocommerce-tabs .panel ol,
.woocommerce-Tabs-panel p,
.woocommerce-Tabs-panel ul,
.woocommerce-Tabs-panel ol { color: var(--text-soft); margin: 0 0 var(--s-4); }
.woocommerce-tabs .panel ul,
.woocommerce-tabs .panel ol { padding-left: var(--s-5); }
.woocommerce-tabs table.shop_attributes {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--text-sm);
}
.woocommerce-tabs table.shop_attributes th,
.woocommerce-tabs table.shop_attributes td {
	border: 1px solid var(--line);
	padding: var(--s-2) var(--s-3);
	text-align: left;
}
.woocommerce-tabs table.shop_attributes th { color: var(--text); font-weight: 600; width: 30%; }
.woocommerce-tabs table.shop_attributes td { color: var(--text-soft); }

/* ---- Related products + recently-viewed headings ---- */
.related.products > h2,
.up-sells > h2 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(var(--text-xl), 3vw, var(--text-2xl));
	color: var(--text);
	margin: 0 0 var(--s-6);
}
.related.products,
.up-sells { margin-top: clamp(40px, 5vw, 72px); }

.v-rv-section { margin-top: clamp(40px, 5vw, 72px); }
.v-rv-section .v-section-h { margin-bottom: var(--s-6); }
.v-rv-rail .v-card { background: var(--surface); }

/* ============================ REDUCED MOTION ============================ */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

/* ============================================================
   P3-polish (Kro): kill WooCommerce 10 default purple on every
   button surface the theme didn't explicitly style; remove with
   prejudice — tokens are the only source of button color.
   ============================================================ */
body .woocommerce button.button,
body .woocommerce input.button,
body .woocommerce a.button,
body .woocommerce #respond input#submit,
body .single_add_to_cart_button,
body .woocommerce div.product form.cart .button,
body.woocommerce div.product form.cart .button,
body .woocommerce button.button.alt,
body .woocommerce a.button.alt,
body .wp-element-button,
body button[type="submit"] {
	background: var(--blue, #0057FF) !important;
	color: #fff !important;
	border: none;
}
body .woocommerce button.button:hover,
body .woocommerce a.button:hover,
body .single_add_to_cart_button:hover,
body .wp-element-button:hover,
body button[type="submit"]:hover {
	background: var(--blue-hover, #1A6DFF) !important;
	color: #fff !important;
}

/* ================================================================== */
/* ================= P4 — CART + CHECKOUT + ACCOUNT ================= */
/* ================================================================== */

/* ---- Shared: paper well + section heads reused across money pages ---- */
.v-well {
	background: var(--surface-well);
	border: 1px solid var(--line-soft);
	border-radius: var(--r-m);
	padding: clamp(20px, 3vw, 32px);
}
.woocommerce-error, .woocommerce-message, .woocommerce-info { scroll-margin-top: var(--s-12); }
/* Outline a notice when JS focuses it (focus-to-error, M10). */
.woocommerce-error:focus-visible,
.woocommerce-message:focus-visible,
.woocommerce-info:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.woocommerce-error a, .woocommerce-message a, .woocommerce-info a { color: var(--c-blue); font-weight: 600; }
.woocommerce-message { background: color-mix(in srgb, var(--c-success) 7%, var(--surface)); }

/* Honeypot — hidden every way (mu-plugin also sets an inline fallback). */
.va-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---- Money pages need the full grid, not the 76ch prose measure ---- */
.woocommerce-cart .v-entry-content,
.woocommerce-checkout .v-entry-content,
.woocommerce-account .v-entry-content { max-width: none; }

/* ====================== CART ====================== */
.woocommerce-cart .v-page-inner { max-width: var(--max-w); }
.woocommerce-cart-form { margin: 0; }
/* Neutralize WooCommerce's float/percentage widths inside our grid. */
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-cart .cart-collaterals .cross-sells,
.woocommerce-cart .cart-collaterals .v-cart-xsell { width: auto; float: none; }

/* Free-shipping progress */
.v-freeship {
	margin: 0 0 var(--s-6);
	padding: var(--s-4) var(--s-5);
	background: var(--surface-well);
	border: 1px solid var(--line-soft);
	border-radius: var(--r-s);
}
.v-freeship-msg {
	display: flex; align-items: center; gap: var(--s-2);
	margin: 0 0 var(--s-3);
	font: var(--mono-label);
	letter-spacing: .04em;
	color: var(--text);
}
.v-freeship-msg .woocommerce-Price-amount { font-weight: 600; color: var(--c-blue); }
.v-freeship.is-cleared .v-freeship-msg { color: var(--c-success); }
.v-freeship-tick { color: var(--c-success); }
.v-freeship-track {
	height: 6px; border-radius: 999px;
	background: var(--c-ink-wash);
	overflow: hidden;
}
.v-freeship-fill {
	display: block; height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--c-blue), var(--c-cyan));
	transition: width .4s ease;
}
.v-freeship.is-cleared .v-freeship-fill { background: var(--c-success); }

/* Cart table — B-table discipline: ruled rows, mono data voice */
.woocommerce-cart table.cart {
	width: 100%;
	table-layout: fixed;
	border: 1px solid var(--line-soft);
	border-radius: var(--r-m);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: var(--surface);
	margin: 0 0 var(--s-5);
}
/* The cart.php override removed Price/Subtotal AND moved the actions out of the
   table — so it's a clean 4-column item-only table; fixed layout sizes it
   reliably with the name column taking the rest. */
.woocommerce-cart table.cart th.product-remove,
.woocommerce-cart table.cart td.product-remove { width: 56px; }
/* WooCommerce's woocommerce-smallscreen.css (media ≤768px) hides the cart
   thumbnail with `.woocommerce table.cart .product-thumbnail{display:none}`
   (specificity 0,3,1). This compound selector (0,3,2) out-specifies it so the
   thumbnail shows across 375–768px; the ≤600 grid block re-sets it to block. */
.woocommerce-cart table.cart th.product-thumbnail,
.woocommerce-cart table.cart td.product-thumbnail { width: 84px; display: table-cell; }
.woocommerce-cart table.cart th.product-quantity,
.woocommerce-cart table.cart td.product-quantity { width: 152px; white-space: nowrap; padding-inline: var(--s-2); }
.woocommerce-cart table.cart th.product-name,
.woocommerce-cart table.cart td.product-name { width: auto; }
/* Actions as a standalone flex row below the table (no longer a colspan cell). */
.v-cart-actions {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	flex-wrap: wrap;
	margin-bottom: var(--s-6);
}
.woocommerce-cart table.cart thead th {
	font: var(--mono-label);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--text-soft);
	text-align: left;
	padding: var(--s-4) var(--s-4);
	border-bottom: 1px solid var(--line);
	background: var(--surface-well);
}
.woocommerce-cart table.cart tbody td {
	padding: var(--s-4);
	border-bottom: 1px solid var(--line-soft);
	vertical-align: middle;
}
.woocommerce-cart table.cart tbody tr:last-child td { border-bottom: 0; }
.woocommerce-cart td.product-remove { text-align: center; vertical-align: middle; padding-inline: 0 !important; }
/* Trash-icon remove button: centered, gray → red on hover/focus. */
.woocommerce-cart td.product-remove a.remove {
	display: flex; align-items: center; justify-content: center;
	width: 44px; height: 44px;
	margin: 0 auto !important;
	border-radius: var(--r-s);
	color: var(--text-soft) !important; /* Woo sets the remove link red !important */
	background: transparent !important;
	font-size: 0; /* hide the default × glyph */
	border: 1px solid transparent;
	transition: color .15s ease, background-color .15s ease;
}
.woocommerce-cart td.product-remove a.remove::before {
	content: "";
	width: 17px; height: 17px;
	background: currentColor;
	-webkit-mask: var(--va-trash-icon) center / contain no-repeat;
	mask: var(--va-trash-icon) center / contain no-repeat;
}
.woocommerce-cart td.product-remove a.remove:hover,
.woocommerce-cart td.product-remove a.remove:focus-visible {
	color: var(--c-warn) !important;
	background: color-mix(in srgb, var(--c-warn) 10%, transparent) !important;
}
:root {
	--va-trash-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cline x1='10' y1='11' x2='10' y2='17'/%3E%3Cline x1='14' y1='11' x2='14' y2='17'/%3E%3C/svg%3E");
}
.woocommerce-cart td.product-thumbnail { width: 88px; }
.woocommerce-cart td.product-thumbnail img {
	width: 72px; height: 72px;
	object-fit: cover;
	border-radius: var(--r-s);
	border: 1px solid var(--line-soft);
	background: var(--surface-well);
}
.woocommerce-cart td.product-name { font-weight: 500; }
.woocommerce-cart td.product-name a { color: var(--text); }
.woocommerce-cart td.product-name a:hover { color: var(--c-blue); }
.woocommerce-cart td.product-name .variation,
.woocommerce-cart td.product-name dl { font: var(--mono-meta); color: var(--text-soft); margin-top: var(--s-1); }
.woocommerce-cart td.product-price,
.woocommerce-cart td.product-subtotal,
.woocommerce-cart th.product-price,
.woocommerce-cart th.product-subtotal { text-align: right; }
.woocommerce-cart td.product-price,
.woocommerce-cart td.product-subtotal { font: var(--mono-data); color: var(--text); font-variant-numeric: tabular-nums; }
.woocommerce-cart td.product-subtotal { font-weight: 400; color: var(--text); }
.woocommerce-cart td.product-subtotal .woocommerce-Price-amount { font-size: var(--text-base); }

/* Quantity stepper (44px touch targets, vanilla JS injects the buttons) */
.woocommerce-cart .quantity {
	display: inline-flex; align-items: center;
	border: 1px solid var(--line);
	border-radius: var(--r-s);
	overflow: hidden;
	background: var(--surface);
}
.woocommerce-cart .quantity .va-step {
	width: 44px; height: 44px;
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--text-soft);
	font-size: 20px; line-height: 1;
	border: 0; background: transparent;
}
.woocommerce-cart .quantity .va-step:hover { color: var(--c-blue); background: var(--c-blue-soft); }
.woocommerce-cart .quantity .va-step:disabled { opacity: .4; cursor: default; }
.woocommerce-cart .quantity input.qty {
	width: 48px; min-height: 44px;
	border: 0; border-inline: 1px solid var(--line);
	border-radius: 0;
	text-align: center;
	font: var(--mono-data);
	font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
	padding: 0;
}
.woocommerce-cart .quantity input.qty::-webkit-inner-spin-button,
.woocommerce-cart .quantity input.qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.woocommerce-cart .quantity input.qty:focus-visible { box-shadow: inset 0 0 0 2px var(--c-blue-ring); outline: none; }

/* Cart actions: coupon + update */
.woocommerce-cart .v-cart-actions { padding: var(--s-5) var(--s-4); position: relative; }
/* Pin Update cart to the right edge so a wide feedback pill can't shove it. */
.woocommerce-cart .v-cart-actions button[name="update_cart"] { margin-left: auto; }
/* The invalid-coupon pill (~166px) used to sit between coupon and Update and, in
   the 2-column cart (narrow actions row), wrapped Update to a second line. Lift
   it out of flow — pinned just under the row — so siblings never move. The small
   green "cart updated" check stays inline in the row's blank space. */
.woocommerce-cart .v-cart-actions .v-cart-feedback--error {
	position: absolute;
	left: var(--s-4);
	top: calc(100% - var(--s-4));
	margin: 0;
}
/* flex-wrap so the WC-injected #coupon-error-notice (flex-basis:100%) drops to
   its own line instead of forcing the row past the viewport (mobile overflow fix). */
.woocommerce-cart .v-cart-actions .coupon { display: inline-flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin-right: var(--s-3); }
.woocommerce-cart .v-cart-actions .coupon label { position: absolute; left: -9999px; }
.woocommerce-cart .v-cart-actions .coupon input[name="coupon_code"] { width: clamp(120px, 22vw, 150px); min-height: 42px; }
/* Apply-coupon + Update-cart: same compact ghost button. */
.woocommerce-cart .v-cart-actions button[name="apply_coupon"],
.woocommerce-cart .v-cart-actions button[name="update_cart"] {
	min-height: 42px; padding: 0 var(--s-4);
	border: 1px solid var(--line);
	border-radius: var(--r-s);
	background: var(--surface);
	color: var(--text);
	font-weight: 600; font-size: var(--text-sm); letter-spacing: .03em;
	box-shadow: none;
}
.woocommerce-cart .v-cart-actions button[name="apply_coupon"]:hover:not([disabled]),
.woocommerce-cart .v-cart-actions button[name="update_cart"]:hover:not([disabled]) { border-color: var(--c-blue); color: var(--c-blue); background: var(--c-blue-soft); transform: none; }
.woocommerce-cart .v-cart-actions button[name="update_cart"][disabled] { opacity: .5; }

/* Cart layout: [items table | checkout box] on top, [bench | after-you-pay]
   below. The cart shortcode wraps form + collaterals + after-cart row in
   `.woocommerce`; drive the whole thing as one grid. No sticky totals (a
   sticky box overlapped content during AJAX cart updates/removals). */
.woocommerce-cart .woocommerce {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr);
	gap: clamp(24px, 3vw, 44px);
	align-items: start;
}
.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper,
.woocommerce-cart .woocommerce > .v-freeship { grid-column: 1 / -1; }
.woocommerce-cart .woocommerce-cart-form { grid-column: 1; }
.woocommerce-cart .cart-collaterals {
	grid-column: 2;
	display: block;
	margin: 0;
}
.woocommerce-cart .v-cart-row2 {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr);
	gap: clamp(24px, 3vw, 44px);
	align-items: start;
	margin-top: clamp(36px, 4vw, 56px);
}
@media (max-width: 920px) {
	.woocommerce-cart .woocommerce,
	.woocommerce-cart .v-cart-row2 { grid-template-columns: minmax(0, 1fr); }
	.woocommerce-cart .woocommerce-cart-form,
	.woocommerce-cart .cart-collaterals { grid-column: 1; }
}
/* Drop the redundant Price + Subtotal columns; per-line price shows under the
   product name (injected via woocommerce_cart_item_name). */
.woocommerce-cart table.cart th.product-price,
.woocommerce-cart table.cart td.product-price,
.woocommerce-cart table.cart th.product-subtotal,
.woocommerce-cart table.cart td.product-subtotal { display: none; }
.v-cart-line-price {
	display: block;
	margin-top: var(--s-1);
	font: var(--mono-data);
	color: var(--text-soft);
	font-variant-numeric: tabular-nums;
}
.cart_totals h2 {
	font-family: var(--font-display); font-weight: 600;
	font-size: var(--text-xl); color: var(--text);
	margin: 0 0 var(--s-4);
}
.cart_totals table.shop_table {
	width: 100%;
	background: var(--surface-well);
	border: 1px solid var(--line-soft);
	border-radius: var(--r-m);
	overflow: hidden;
}
/* Render the totals as a flexbox list rather than a real table: a single
   display:block row inside a table is clamped to the first column's width, so
   the shipment options couldn't span full-width. As flex rows we fully own the
   label↔amount money rows AND the stacked shipment row at every width. This
   also neutralizes shop_table_responsive (its ::before data-title labels +
   th-hiding) which otherwise duplicated the shipment label ≤768px. */
.woocommerce-cart .cart_totals table.shop_table,
.woocommerce-cart .cart_totals table.shop_table tbody { display: block; }
.woocommerce-cart .cart_totals table.shop_table tr {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--s-3);
	padding: var(--s-4) var(--s-5);
	border-bottom: 1px solid var(--line-soft);
}
.woocommerce-cart .cart_totals table.shop_table tr:last-child { border-bottom: 0; }
.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td { display: block; padding: 0; border: 0; }
.woocommerce-cart .cart_totals table.shop_table td::before { content: none !important; }
.cart_totals table.shop_table th { font: var(--mono-label); letter-spacing: .08em; text-transform: uppercase; color: var(--text-soft); font-weight: 400; white-space: nowrap; }
.cart_totals table.shop_table td { text-align: right; font: var(--mono-data); color: var(--text); font-variant-numeric: tabular-nums; }
.cart_totals table.shop_table tr.order-total th { color: var(--text); font-family: var(--font-display); text-transform: none; letter-spacing: 0; font-size: var(--text-base); }
.cart_totals table.shop_table tr.order-total td .woocommerce-Price-amount { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; color: var(--text); }
.cart_totals .shipping-calculator-button { color: var(--c-blue); }
/* Shipment row stacks: the "Shipment" label sits on its own line with the
   options listed full-width BELOW it — not crammed to the right of the label. */
.woocommerce-cart .cart_totals table.shop_table tr.shipping,
.woocommerce-cart .cart_totals table.shop_table tr.woocommerce-shipping-totals { flex-direction: column; align-items: stretch; gap: var(--s-2); }
.cart_totals table.shop_table tr.shipping td,
.cart_totals table.shop_table tr.woocommerce-shipping-totals td { text-align: left; }
/* Shipping options: radio | label as a 2-col grid so every option's radio and
   label line up (the right-aligned td was shoving priced labels off to the
   right while "Free Shipping" sat by its radio). */
.cart_totals tr.shipping td,
.cart_totals tr.woocommerce-shipping-totals td { text-align: left; }
.cart_totals .woocommerce-shipping-methods { list-style: none; margin: 0; padding: 0; text-align: left; }
.cart_totals .woocommerce-shipping-methods li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--s-2);
	align-items: center;
	margin: 0 0 var(--s-2);
}
.cart_totals .woocommerce-shipping-methods li:last-child { margin-bottom: 0; }
.cart_totals .woocommerce-shipping-methods li input[type="radio"] { margin: 0; }
.cart_totals .woocommerce-shipping-methods li label { margin: 0; text-align: left; }
/* Destination + "Change address" sit under the options, left-aligned to match
   (WooCommerce right-aligns the destination, which only showed when the box was
   wide — e.g. the full-width totals panel at 375px). */
.cart_totals .woocommerce-shipping-destination,
.cart_totals .woocommerce-shipping-calculator { text-align: left; margin-top: var(--s-3); }
.cart_totals .wc-proceed-to-checkout { padding: var(--s-5) 0 0; }
.cart_totals .wc-proceed-to-checkout a.checkout-button {
	display: flex; align-items: center; justify-content: center;
	width: 100%;
	min-height: 56px;
	border-radius: var(--r-s);
	background: var(--c-blue);
	color: var(--c-white);
	font-weight: 600; font-size: var(--text-base); letter-spacing: .02em;
	box-shadow: 0 0 0 1px var(--c-blue-line), 0 12px 28px -12px var(--c-blue-glow);
}
.cart_totals .wc-proceed-to-checkout a.checkout-button:hover { background: var(--c-blue-hover); transform: translateY(-1px); }

/* (Cart after-you-pay card removed per Rylan — its styling is deleted so it no
   longer bleeds onto the home `.v-after-pay` teaser via the cascade.) */

/* Cross-sell row */
.v-cart-xsell .v-section-h { margin: var(--s-2) 0 var(--s-6); }
.v-xsell-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
@media (max-width: 600px) { .v-xsell-grid { grid-template-columns: repeat(2, 1fr); } }
.v-cart-empty { margin: var(--s-6) 0; }
.woocommerce-cart .return-to-shop { display: none; } /* template button — replaced by our empty CTA */

/* Cart table responsive collapse (≤600px) */
@media (max-width: 600px) {
	.woocommerce-cart table.cart thead { display: none; }
	.woocommerce-cart table.cart,
	.woocommerce-cart table.cart tbody,
	.woocommerce-cart table.cart tr { display: block; }
	.woocommerce-cart table.cart tbody tr {
		position: relative;
		display: grid;
		grid-template-columns: 72px 1fr;
		gap: var(--s-2) var(--s-3);
		padding: var(--s-4);
		border-bottom: 1px solid var(--line-soft);
	}
	.woocommerce-cart table.cart tbody td { display: block; padding: 0; border: 0; }
	/* Two columns: 72px thumbnail (spanning the name+qty rows) | stacked content.
	   Compound selector (0,3,2) overrides WC smallscreen's display:none (0,3,1). */
	.woocommerce-cart table.cart td.product-thumbnail { display: block; grid-column: 1; grid-row: 1 / span 2; align-self: start; width: auto; }
	.woocommerce-cart td.product-thumbnail img { width: 72px; height: 72px; }
	.woocommerce-cart td.product-name { grid-column: 2; align-self: center; padding-right: var(--s-7); }
	.woocommerce-cart td.product-quantity { grid-column: 2; align-self: center; }
	.woocommerce-cart td.product-remove { position: absolute; top: var(--s-3); right: var(--s-3); width: auto; }
	.woocommerce-cart .v-cart-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
	.woocommerce-cart .v-cart-actions .coupon { margin-right: 0; flex: 1 1 100%; }
	.woocommerce-cart .v-cart-actions .coupon input[name="coupon_code"] { flex: 1; width: auto; }
}

/* ====================== CHECKOUT ====================== */
.woocommerce-checkout #customer_details { min-width: 0; }
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 { width: auto; float: none; }
.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading {
	font-family: var(--font-display); font-weight: 600;
	font-size: var(--text-xl); color: var(--text);
	margin: 0 0 var(--s-5);
}
.woocommerce-checkout #customer_details h3 { padding-bottom: var(--s-3); border-bottom: 1px solid var(--line-soft); }

/* Two-column ≥920px: fields left, review/payment right (paper well) */
@media (min-width: 920px) {
	.woocommerce-checkout form.checkout {
		display: grid;
		grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr);
		grid-template-rows: auto 1fr;
		gap: 0 clamp(32px, 4vw, 56px);
		align-items: start;
	}
	.woocommerce-checkout form.checkout #customer_details { grid-column: 1; grid-row: 1 / span 2; }
	.woocommerce-checkout form.checkout #order_review_heading { grid-column: 2; grid-row: 1; }
	.woocommerce-checkout form.checkout #order_review { grid-column: 2; grid-row: 2; position: sticky; top: 96px; }
}

/* Form fields — instrument treatment */
.woocommerce-checkout .form-row { margin: 0 0 var(--s-4); padding: 0; display: flex; flex-direction: column; }
.woocommerce-checkout .form-row label { font-weight: 500; font-size: var(--text-sm); margin-bottom: var(--s-2); color: var(--text); }
.woocommerce-checkout .form-row .required { color: var(--c-warn); border: 0; }
.woocommerce-checkout .form-row .optional { color: var(--text-soft); }
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row .select2-container,
.woocommerce-checkout .form-row select { width: 100%; }
.woocommerce-checkout .woocommerce-input-wrapper { width: 100%; }
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last { width: 100%; }
@media (min-width: 600px) {
	.woocommerce-checkout .col2-set .form-row-first,
	.woocommerce-checkout .col2-set .form-row-last { display: inline-flex; width: calc(50% - var(--s-2)); }
	.woocommerce-checkout .col2-set .form-row-first { margin-right: var(--s-3); }
}
/* Invalid-field state (Woo adds .woocommerce-invalid) */
.woocommerce-checkout .form-row.woocommerce-invalid input.input-text,
.woocommerce-checkout .form-row.woocommerce-invalid select,
.woocommerce-checkout .form-row.woocommerce-invalid .select2-selection {
	border-color: var(--c-warn);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-warn) 18%, transparent);
}
.woocommerce-checkout .form-row.woocommerce-validated input.input-text { border-color: var(--c-success); }
/* Field-adjacent inline error injected by main.js */
.v-field-error {
	display: flex; align-items: flex-start; gap: var(--s-2);
	margin-top: var(--s-2);
	font-size: var(--text-sm);
	color: var(--c-warn);
}
/* PO-Box restriction note (C4) */
.v-checkout-note {
	display: flex; align-items: flex-start; gap: var(--s-2);
	margin: var(--s-2) 0 var(--s-4);
	font-size: var(--text-sm);
	color: var(--text-soft);
}
.v-checkout-note svg { flex-shrink: 0; margin-top: 2px; color: var(--c-cyan-text); }

/* Order review table + payment, paper well */
.woocommerce-checkout #order_review {
	background: var(--surface-well);
	border: 1px solid var(--line-soft);
	border-radius: var(--r-m);
	padding: clamp(20px, 3vw, 28px);
}
.woocommerce-checkout #order_review .shop_table {
	width: 100%; border: 0; border-collapse: separate; border-spacing: 0;
	background: transparent; margin: 0 0 var(--s-4);
}
.woocommerce-checkout #order_review .shop_table th,
.woocommerce-checkout #order_review .shop_table td {
	padding: var(--s-3) 0;
	border-bottom: 1px solid var(--line-soft);
	text-align: left;
}
.woocommerce-checkout #order_review .shop_table td.product-total,
.woocommerce-checkout #order_review .shop_table th.product-total { text-align: right; font: var(--mono-data); font-variant-numeric: tabular-nums; }
.woocommerce-checkout #order_review .shop_table .cart_item td.product-name { font-size: var(--text-sm); color: var(--text); }
.woocommerce-checkout #order_review .shop_table .product-quantity { color: var(--text-soft); }
.woocommerce-checkout #order_review .order-total th { font-family: var(--font-display); }
.woocommerce-checkout #order_review .order-total .woocommerce-Price-amount { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; }

/* Payment methods list */
.woocommerce-checkout #payment { background: transparent; border-radius: 0; }
.woocommerce-checkout #payment ul.payment_methods {
	list-style: none; margin: 0 0 var(--s-4); padding: 0;
	border: 0;
	display: grid; gap: var(--s-2);
}
.woocommerce-checkout #payment ul.payment_methods li {
	border: 1px solid var(--line);
	border-radius: var(--r-s);
	padding: var(--s-3) var(--s-4);
	background: var(--surface);
	transition: border-color .15s ease, background-color .15s ease;
}
.woocommerce-checkout #payment ul.payment_methods li:hover { border-color: var(--c-blue-line); }
.woocommerce-checkout #payment ul.payment_methods li label {
	display: inline-flex; align-items: center; gap: var(--s-2);
	font-weight: 600; color: var(--text); margin: 0; cursor: pointer;
}
.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] { width: 18px; height: 18px; accent-color: var(--c-blue); }
.woocommerce-checkout #payment ul.payment_methods li img { max-height: 24px; width: auto; vertical-align: middle; }
.woocommerce-checkout #payment .payment_box {
	background: var(--surface-well-2);
	border-radius: var(--r-s);
	margin: var(--s-3) 0 0;
	padding: var(--s-3) var(--s-4);
	font-size: var(--text-sm); color: var(--text-soft);
}
.woocommerce-checkout #payment .payment_box::before { display: none; }
.woocommerce-checkout #payment .place-order { padding: var(--s-4) 0 0; }
.woocommerce-checkout #payment #place_order {
	width: 100%; min-height: 56px;
	border: 0; border-radius: var(--r-s);
	background: var(--c-blue); color: var(--c-white);
	font-weight: 600; font-size: var(--text-base); letter-spacing: .02em;
	box-shadow: 0 0 0 1px var(--c-blue-line), 0 12px 28px -12px var(--c-blue-glow);
}
.woocommerce-checkout #payment #place_order:hover { background: var(--c-blue-hover); transform: translateY(-1px); }
.woocommerce-checkout #payment .woocommerce-privacy-policy-text { font-size: var(--text-xs); color: var(--text-soft); margin-top: var(--s-3); }

/* RUO affirmation — prominent attention well (rendered by vantage-core) */
.va-checkout-affirm {
	margin: var(--s-4) 0 var(--s-5);
	padding: var(--s-4) var(--s-5);
	background: var(--surface);
	border: 1px solid var(--c-blue-line);
	border-left: 4px solid var(--c-blue);
	border-radius: var(--r-s);
}
.va-checkout-affirm .va-affirm-label { display: flex; align-items: flex-start; gap: var(--s-3); cursor: pointer; margin: 0; }
.va-checkout-affirm input[type="checkbox"] { flex-shrink: 0; margin-top: 3px; width: 20px; height: 20px; accent-color: var(--c-blue); cursor: pointer; }
.va-checkout-affirm .va-affirm-text { font-size: var(--text-sm); line-height: 1.6; color: var(--text); }

/* Account-creation checkbox + login row at checkout */
.woocommerce-checkout .woocommerce-account-fields .create-account { margin-top: var(--s-2); }
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info { background: var(--surface-well); }

/* Checkout notices group: give it air + an anchor for focus */
.woocommerce-checkout .woocommerce-NoticeGroup { margin-bottom: var(--s-5); }

/* ====================== ORDER RECEIVED ====================== */
.woocommerce-order { max-width: 880px; }
.woocommerce-order > .woocommerce-notice,
.woocommerce-order p.woocommerce-thankyou-order-received {
	font-family: var(--font-display); font-weight: 600;
	font-size: var(--text-2xl); color: var(--text);
	margin: 0 0 var(--s-5);
}
.v-confirm {
	display: flex; align-items: flex-start; gap: var(--s-4);
	padding: clamp(20px, 3vw, 28px);
	background: color-mix(in srgb, var(--c-success) 6%, var(--surface));
	border: 1px solid color-mix(in srgb, var(--c-success) 35%, var(--line-soft));
	border-radius: var(--r-m);
	margin: 0 0 var(--s-6);
}
.v-confirm-mark {
	flex-shrink: 0;
	width: 44px; height: 44px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--c-success); color: var(--c-white);
}
.v-confirm-status { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: var(--text); margin: 0 0 var(--s-1); }
.v-confirm-sub { font-size: var(--text-sm); color: var(--text-soft); margin: 0; }
.woocommerce-order ul.woocommerce-order-overview {
	list-style: none; margin: 0 0 var(--s-7); padding: var(--s-5);
	display: grid; gap: var(--s-4);
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	background: var(--surface-well); border: 1px solid var(--line-soft); border-radius: var(--r-m);
	border-left: 0;
}
.woocommerce-order ul.woocommerce-order-overview li {
	border: 0 !important;
	font: var(--mono-label); letter-spacing: .08em; text-transform: uppercase;
	color: var(--text-soft); font-size: var(--text-xs);
}
.woocommerce-order ul.woocommerce-order-overview li strong {
	display: block; margin-top: var(--s-1);
	font: var(--mono-data); letter-spacing: .02em; text-transform: none;
	color: var(--text); font-variant-numeric: tabular-nums;
}
.woocommerce-order .woocommerce-order-details > h2,
.woocommerce-order .woocommerce-customer-details > h2,
.woocommerce-order section > h2 {
	font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl);
	color: var(--text); margin: var(--s-8) 0 var(--s-4);
}
.woocommerce-order .woocommerce-table--order-details,
.woocommerce-order .shop_table {
	width: 100%; border: 1px solid var(--line-soft); border-radius: var(--r-m);
	border-collapse: separate; border-spacing: 0; overflow: hidden;
}
.woocommerce-order .woocommerce-table--order-details th,
.woocommerce-order .woocommerce-table--order-details td { padding: var(--s-4); border-bottom: 1px solid var(--line-soft); text-align: left; }
.woocommerce-order .woocommerce-table--order-details td.product-total,
.woocommerce-order .woocommerce-table--order-details th.product-total,
.woocommerce-order .woocommerce-table--order-details tfoot th + td { text-align: right; font-variant-numeric: tabular-nums; }
/* Gateway "after you pay" instructions block */
.woocommerce-thankyou-order-failed,
.woocommerce-order .woocommerce-thankyou-order-received + p,
.woocommerce-order .wc-bacs-bank-details,
.woocommerce-order .woocommerce-order > p:not([class]) { color: var(--text-soft); }
.v-account-nudge {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: var(--s-4);
	margin: var(--s-8) 0 0;
	padding: clamp(20px, 3vw, 28px);
	background: var(--surface-well);
	border: 1px solid var(--c-blue-line);
	border-radius: var(--r-m);
}
.v-account-nudge-h { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: var(--text); margin: 0 0 var(--s-1); }
.v-account-nudge-body p { font-size: var(--text-sm); color: var(--text-soft); margin: 0; max-width: 52ch; }

/* ====================== MY ACCOUNT ====================== */
/* Only the LOGGED-IN account uses the side-rail grid. Logged-out (login +
   register) stays block so #customer_login owns its own 2-up layout, and the
   notices-wrapper spans both columns rather than displacing the content. */
@media (min-width: 920px) {
	.woocommerce-account.logged-in .woocommerce {
		display: grid;
		grid-template-columns: 240px minmax(0, 1fr);
		gap: clamp(24px, 4vw, 48px);
		align-items: start;
	}
	.woocommerce-account.logged-in .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
	.woocommerce-account.logged-in .woocommerce-MyAccount-navigation { grid-column: 1; }
	.woocommerce-account.logged-in .woocommerce-MyAccount-content { grid-column: 2; }
}
/* Side-rail nav */
.woocommerce-MyAccount-navigation { margin: 0; }
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-1); }
@media (min-width: 920px) {
	.woocommerce-MyAccount-navigation { position: sticky; top: 96px; }
	.woocommerce-MyAccount-navigation ul { flex-direction: column; gap: 2px; }
}
.woocommerce-MyAccount-navigation-link a {
	display: block;
	padding: var(--s-3) var(--s-4);
	border-radius: var(--r-s);
	color: var(--text-soft);
	font-weight: 500; font-size: var(--text-sm);
	border: 1px solid transparent;
}
.woocommerce-MyAccount-navigation-link a:hover { color: var(--text); background: var(--c-ink-wash); }
.woocommerce-MyAccount-navigation-link.is-active a {
	color: var(--c-blue); background: var(--c-blue-soft);
	border-color: var(--c-blue-line);
}
.woocommerce-MyAccount-content { min-width: 0; }
.woocommerce-MyAccount-content > p:first-child { color: var(--text-soft); }

/* Dashboard intro */
.v-account-head { margin-bottom: var(--s-7); }
.v-account-head .v-page-title { margin-top: var(--s-3); }
.v-account-head-sub { margin-top: var(--s-3); color: var(--text-soft); max-width: 52ch; }
.v-account-dash { margin-bottom: var(--s-6); }
.v-account-dash-h { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); color: var(--text); margin: var(--s-2) 0 var(--s-5); }
.v-account-quick { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.v-account-quick-link {
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--s-3);
	padding: var(--s-4);
	border: 1px solid var(--line-soft);
	border-radius: var(--r-s);
	background: var(--surface);
	color: var(--text); font-weight: 600; font-size: var(--text-sm);
}
.v-account-quick-link:hover { border-color: var(--c-blue-line); color: var(--c-blue); background: var(--c-blue-soft); }
.v-account-quick-arrow { color: var(--text-soft); }
.v-account-quick-link:hover .v-account-quick-arrow { color: var(--c-blue); }

/* Orders table + status chips */
.woocommerce-orders-table {
	width: 100%; border: 1px solid var(--line-soft); border-radius: var(--r-m);
	border-collapse: separate; border-spacing: 0; overflow: hidden;
}
.woocommerce-orders-table thead th {
	font: var(--mono-label); letter-spacing: .1em; text-transform: uppercase;
	color: var(--text-soft); text-align: left; font-weight: 400;
	padding: var(--s-4); background: var(--surface-well); border-bottom: 1px solid var(--line);
}
.woocommerce-orders-table td { padding: var(--s-4); border-bottom: 1px solid var(--line-soft); vertical-align: middle; font-size: var(--text-sm); }
.woocommerce-orders-table tr:last-child td { border-bottom: 0; }
.woocommerce-orders-table .va-order-thumbs { display: flex; align-items: center; gap: var(--s-1); }
.woocommerce-orders-table .va-order-thumbs img { width: 36px; height: 36px; border-radius: var(--r-s); border: 1px solid var(--line-soft); object-fit: cover; background: var(--surface-well); }
.woocommerce-orders-table .va-thumb-more { font: var(--mono-meta); color: var(--text-soft); }
.woocommerce-orders-table__cell-order-status,
.woocommerce-orders-table .woocommerce-orders-table__cell-order-status { }
.woocommerce-orders-table__cell-order-status mark,
.woocommerce-orders-table__cell-order-status {
	font: var(--mono-label); letter-spacing: .02em;
}
.woocommerce-orders-table td.woocommerce-orders-table__cell-order-status {
	color: var(--text);
}
.woocommerce-orders-table td.woocommerce-orders-table__cell-order-status::before {
	content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
	background: var(--c-success); margin-right: var(--s-2); vertical-align: middle;
}
.woocommerce-orders-table .woocommerce-button,
.woocommerce-orders-table a.button {
	display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--s-3);
	border-radius: var(--r-s); font: var(--mono-label); letter-spacing: .04em;
	border: 1px solid var(--line); color: var(--text); background: var(--surface);
	margin: 2px;
}
.woocommerce-orders-table a.button:hover { border-color: var(--c-blue); color: var(--c-blue); background: var(--c-blue-soft); }
.woocommerce-orders-table a.button.view { border-color: var(--c-blue-line); }

@media (max-width: 600px) {
	.woocommerce-orders-table thead { display: none; }
	.woocommerce-orders-table, .woocommerce-orders-table tbody, .woocommerce-orders-table tr, .woocommerce-orders-table td { display: block; width: 100%; }
	.woocommerce-orders-table tr { padding: var(--s-4); border-bottom: 1px solid var(--line-soft); }
	.woocommerce-orders-table td { border: 0; padding: var(--s-1) 0; text-align: right; }
	.woocommerce-orders-table td::before { content: attr(data-title); float: left; font: var(--mono-label); text-transform: uppercase; letter-spacing: .06em; color: var(--text-soft); }
	.woocommerce-orders-table .va-order-thumbs { justify-content: flex-end; }
}

/* Order detail + addresses + account-details forms */
.woocommerce-order-details, .woocommerce-customer-details { margin-bottom: var(--s-7); }
.woocommerce-customer-details address {
	font-style: normal; padding: var(--s-4);
	background: var(--surface-well); border: 1px solid var(--line-soft); border-radius: var(--r-s);
	color: var(--text-soft); line-height: 1.7;
}
.woocommerce-Addresses { display: grid; gap: var(--s-4); grid-template-columns: 1fr; margin-top: var(--s-4); }
@media (min-width: 600px) { .woocommerce-Addresses { grid-template-columns: 1fr 1fr; } }
.woocommerce-Address { padding: var(--s-5); background: var(--surface-well); border: 1px solid var(--line-soft); border-radius: var(--r-m); }
.woocommerce-Address-title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-3); }
.woocommerce-Address-title h2, .woocommerce-Address-title h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: var(--text); }
.woocommerce-Address-title a { font: var(--mono-label); letter-spacing: .04em; color: var(--c-blue); }
.woocommerce-Address address { font-style: normal; color: var(--text-soft); line-height: 1.7; }
.woocommerce-EditAccountForm, .woocommerce-address-fields { max-width: 640px; }
.woocommerce-EditAccountForm fieldset {
	margin: var(--s-6) 0 0; padding: var(--s-5);
	border: 1px solid var(--line-soft); border-radius: var(--r-m);
}
.woocommerce-EditAccountForm legend { font-family: var(--font-display); font-weight: 600; padding: 0 var(--s-2); color: var(--text); }
.woocommerce-EditAccountForm .form-row,
.woocommerce-address-fields .form-row { margin-bottom: var(--s-4); display: flex; flex-direction: column; }
.woocommerce-EditAccountForm label,
.woocommerce-address-fields label { font-weight: 500; font-size: var(--text-sm); margin-bottom: var(--s-2); }
.woocommerce-EditAccountForm .button,
.woocommerce-address-fields .button,
.woocommerce-Address .button {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 48px; padding: 0 var(--s-7);
	border: 0; border-radius: var(--r-s);
	background: var(--c-blue); color: var(--c-white);
	font-weight: 600; font-size: var(--text-sm); letter-spacing: .03em;
}
.woocommerce-EditAccountForm .button:hover { background: var(--c-blue-hover); }
.woocommerce-MyAccount-content .woocommerce-pagination { margin-top: var(--s-6); }

/* ====================== LOGIN / REGISTER ====================== */
#customer_login.u-columns,
.woocommerce-account .u-columns {
	display: grid; gap: clamp(20px, 4vw, 40px);
	grid-template-columns: 1fr; margin: 0;
}
@media (min-width: 768px) {
	#customer_login.u-columns {
		grid-template-columns: 1fr 1fr;
		grid-template-areas: "login register";
	}
	/* Explicit placement: WooCommerce's column ordering otherwise auto-flows
	   login into column 2 and wraps register to a second row. */
	#customer_login .u-column1 { grid-area: login; }
	#customer_login .u-column2 { grid-area: register; }
}
#customer_login .u-column1,
#customer_login .u-column2 { width: auto; float: none; }
.woocommerce-account .col2-set .col-1,
.woocommerce-account .col2-set .col-2 { width: auto; float: none; }
form.woocommerce-form-login,
form.woocommerce-form-register {
	padding: clamp(24px, 4vw, 36px);
	background: var(--surface-well);
	border: 1px solid var(--line-soft);
	border-radius: var(--r-m);
	margin: 0;
}
.woocommerce-account .u-column1 > h2,
.woocommerce-account .u-column2 > h2,
#customer_login h2 {
	font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl);
	color: var(--text); margin: 0 0 var(--s-5);
}
.woocommerce-form-login .form-row,
.woocommerce-form-register .form-row { margin-bottom: var(--s-4); display: flex; flex-direction: column; }
.woocommerce-form-login label,
.woocommerce-form-register label { font-weight: 500; font-size: var(--text-sm); margin-bottom: var(--s-2); }
.woocommerce-form-login .woocommerce-form-login__rememberme,
.woocommerce-form__label-for-checkbox { flex-direction: row; align-items: center; gap: var(--s-2); }
.woocommerce-form-login__rememberme span,
.woocommerce-form__label-for-checkbox span { font-weight: 400; }
.woocommerce-form-login .button,
.woocommerce-form-register .button {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 48px; padding: 0 var(--s-7);
	border: 0; border-radius: var(--r-s);
	background: var(--c-blue); color: var(--c-white);
	font-weight: 600; font-size: var(--text-sm); letter-spacing: .03em;
}
.woocommerce-form-login .button:hover,
.woocommerce-form-register .button:hover { background: var(--c-blue-hover); }
.woocommerce-form-login .woocommerce-LostPassword,
.woocommerce-LostPassword { margin-top: var(--s-3); }
.woocommerce-form-login .woocommerce-LostPassword a,
.woocommerce-LostPassword a { font-size: var(--text-sm); color: var(--c-blue); }
.woocommerce-ResetPassword { max-width: 520px; }
.woocommerce-ResetPassword .form-row { display: flex; flex-direction: column; margin-bottom: var(--s-4); }

/* ====================== REQUEST-COA FORM ====================== */
.v-coa { max-width: 560px; }
.v-coa-form { display: grid; gap: var(--s-4); }
.v-coa .v-field { display: flex; flex-direction: column; }
.v-coa .v-field label { font-weight: 500; font-size: var(--text-sm); margin-bottom: var(--s-2); color: var(--text); }
.v-coa .v-field-opt { color: var(--text-soft); font-weight: 400; }
.v-coa-form .v-btn-primary { justify-self: start; }
.v-coa-success { padding: clamp(28px, 4vw, 40px); background: var(--surface-well); border: 1px solid var(--line-soft); border-radius: var(--r-m); }
.v-coa-success .v-section-h { margin: var(--s-3) 0 var(--s-3); }
.v-coa-success-sub { color: var(--text-soft); max-width: 52ch; margin-bottom: var(--s-5); }

/* ================================================================== */
/* ============== P5 — SECONDARY PAGES + STATES + FORMS ============= */
/* ================================================================== */

/* ---- Breadcrumb-lite page band (page.php / single.php / home.php) ---- */
.v-page-band {
	padding-bottom: var(--s-6);
	border-bottom: 1px solid var(--line-soft);
	margin-bottom: var(--s-8);
}
.v-crumb {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	font: var(--mono-label);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--text-soft);
	margin-bottom: var(--s-4);
}
.v-crumb a { color: var(--text-soft); }
.v-crumb a:hover { color: var(--c-blue); }
.v-crumb-sep { color: var(--c-cyan-text); }
.v-crumb [aria-current="page"] {
	color: var(--text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 32ch;
}
.v-page-sub { margin-top: var(--s-3); color: var(--text-soft); max-width: 60ch; }
.v-post-meta { margin-top: var(--s-3); font: var(--mono-meta); letter-spacing: .12em; text-transform: uppercase; color: var(--c-cyan-text); }
.v-post-foot { margin-top: var(--s-10); padding-top: var(--s-6); border-top: 1px solid var(--line-soft); }

/* ---- Wide pages lift the 76ch prose cap (inc/pages.php body class) ----
   Grids/tables/forms go full width; BARE prose children keep a readable
   measure so wide pages never run 130ch lines. */
.v-wide-page .v-entry-content { max-width: none; }
.v-wide-page .v-entry-content > p:not([class]),
.v-wide-page .v-entry-content > ul:not([class]),
.v-wide-page .v-entry-content > ol:not([class]) { max-width: 76ch; }

/* ---- Prose extras ---- */
.v-entry-content .v-lead {
	font-size: var(--text-xl);
	line-height: 1.5;
	color: var(--text);
	max-width: 64ch;
	margin: 0 0 var(--s-7);
	padding-left: var(--s-4);
	border-left: 2px solid var(--c-blue);
}
.v-entry-content hr { border: 0; border-top: 1px solid var(--line-soft); margin: var(--s-8) 0; }

/* ---- Feature grid (About / Wholesale / RUO) ---- */
.v-feature-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: var(--s-4);
	margin: var(--s-6) 0 var(--s-8);
	padding: 0;
	list-style: none;
}
.v-feature {
	background: var(--surface-well);
	border: 1px solid var(--line-soft);
	border-radius: var(--r-m);
	padding: var(--s-5) var(--s-5) var(--s-6);
}
.v-entry-content .v-feature h3,
.v-entry-content .v-feature h4 { margin: 0 0 var(--s-2); font-size: var(--text-base); }
.v-feature p { margin: 0; font-size: var(--text-sm); }
.v-feature .v-feature-k {
	display: block;
	font: var(--mono-label);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--c-cyan-text);
	margin-bottom: var(--s-2);
}

/* ---- CTA row ---- */
.v-cta-row { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: var(--s-8) 0 var(--s-2); }

/* ---- Compliance notice well (RUO Disclaimer) ---- */
.v-notice-well {
	background: var(--surface-well);
	border: 1px solid var(--c-blue-line);
	border-left: 3px solid var(--c-blue);
	border-radius: var(--r-s);
	padding: var(--s-5) var(--s-6);
	margin: 0 0 var(--s-8);
}
.v-notice-well .v-notice-k {
	display: block;
	font: var(--mono-label);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--c-cyan-text);
	margin-bottom: var(--s-2);
}
.v-notice-well p { margin: 0; color: var(--text); font-weight: 500; }

/* ---- Ruled data table (wholesale tiers — B-table discipline) ---- */
.v-entry-content table.v-table { border: 0; }
.v-entry-content .v-table th {
	border: 0;
	border-bottom: 1px solid var(--line);
	font: var(--mono-label);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--text-soft);
	padding: var(--s-3) var(--s-3) var(--s-2);
	background: transparent;
}
.v-entry-content .v-table td {
	border: 0;
	border-bottom: 1px solid var(--line-soft);
	padding: var(--s-4) var(--s-3);
	font-size: var(--text-sm);
	color: var(--text-soft);
}
.v-table .v-table-strong { color: var(--text); font-weight: 600; }
.v-table .v-table-accent { font: var(--mono-data); color: var(--c-cyan-text); }
@media (max-width: 600px) {
	.v-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.v-table-wrap table { min-width: 520px; }
}

/* ---- FAQ accordion (native <details>) ---- */
.v-faq {
	border: 1px solid var(--line-soft);
	border-radius: var(--r-s);
	background: var(--surface-well);
	margin: 0 0 var(--s-3);
}
.v-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-4);
	min-height: 56px;
	padding: var(--s-4) var(--s-5);
	cursor: pointer;
	font-weight: 600;
	color: var(--text);
	list-style: none;
	touch-action: manipulation;
}
.v-faq summary::-webkit-details-marker { display: none; }
.v-faq summary::after {
	content: "+";
	flex: none;
	font: var(--mono-data);
	font-size: var(--text-lg);
	color: var(--c-cyan-text);
	transition: transform .15s ease;
}
.v-faq[open] summary::after { content: "\2212"; }
.v-faq summary:hover { color: var(--c-blue); }
.v-faq summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--r-s); }
.v-faq-a { padding: 0 var(--s-5) var(--s-5); color: var(--text-soft); }
.v-faq-a p { margin: 0 0 var(--s-3); }
.v-faq-a p:last-child { margin-bottom: 0; }
.v-entry-content .v-faq-group { margin: var(--s-10) 0 var(--s-4); }

/* ---- How-to-Pay rails ---- */
.v-rails-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: var(--s-4);
	margin: var(--s-6) 0;
	padding: 0;
	list-style: none;
}
.v-rail-card {
	background: var(--surface-well);
	border: 1px solid var(--line-soft);
	border-radius: var(--r-m);
	padding: var(--s-5) var(--s-5) var(--s-6);
}
.v-rail-badge {
	display: inline-block;
	font: var(--mono-label);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--c-cyan-text);
	border: 1px solid var(--c-cyan-line);
	border-radius: 999px;
	padding: 2px var(--s-3);
	margin-bottom: var(--s-3);
}
.v-entry-content .v-rail-card h3 { margin: 0 0 var(--s-2); font-size: var(--text-lg); }
.v-rail-tagline { font-size: var(--text-sm); color: var(--text-soft); margin: 0 0 var(--s-4); }
.v-entry-content .v-rail-card ol {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: rail-step;
}
.v-rail-card ol li {
	position: relative;
	counter-increment: rail-step;
	padding: var(--s-2) 0 var(--s-2) var(--s-8);
	border-top: 1px solid var(--line-soft);
	font-size: var(--text-sm);
	color: var(--text-soft);
}
.v-rail-card ol li::before {
	content: "0" counter(rail-step);
	position: absolute;
	left: 0;
	top: var(--s-2);
	font: var(--mono-label);
	color: var(--c-cyan-text);
}

/* ---- How-to-Pay: M8 dark readout module (the ONE navy module, M7) ---- */
.v-htp-after {
	border-radius: var(--r-l);
	padding: clamp(28px, 4vw, 48px);
	margin: var(--s-10) 0;
}
.v-entry-content .v-htp-after h2 { margin: var(--s-3) 0 var(--s-6); color: var(--text); }
.v-htp-after-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	gap: var(--s-5);
	margin: 0 0 var(--s-6);
	padding: 0;
	list-style: none;
}
.v-htp-after-steps li { border-top: 1px solid var(--c-cyan-line); padding-top: var(--s-3); }
.v-htp-after-k {
	display: block;
	font: var(--mono-label);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--c-cyan);
	margin-bottom: var(--s-2);
}
.v-htp-after-steps p { margin: 0; font-size: var(--text-sm); color: var(--text-soft); }
/* "Stuck?" callout — a bordered note, not a bare paragraph dropped under the steps. */
.v-htp-after-contact {
	display: flex;
	align-items: flex-start;
	gap: var(--s-3);
	margin: var(--s-6) 0 0;
	padding: var(--s-4) var(--s-5);
	border: 1px solid rgba(255, 255, 255, .14);
	border-left: 2px solid var(--c-cyan);
	border-radius: var(--r-s);
	background: rgba(255, 255, 255, .04);
	font-size: var(--text-sm);
	line-height: 1.55;
	color: rgba(255, 255, 255, .82);
	max-width: none;
}
.v-htp-after-contact::before {
	content: "";
	flex: none;
	width: 18px; height: 18px;
	margin-top: 1px;
	background: var(--c-cyan);
	-webkit-mask: var(--va-help-icon) center / contain no-repeat;
	mask: var(--va-help-icon) center / contain no-repeat;
}
:root {
	--va-help-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
}

/* ---- Contact split ---- */
.v-contact-grid {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	gap: clamp(24px, 4vw, 56px);
	margin-top: var(--s-6);
}
@media (max-width: 920px) { .v-contact-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---- Numbered step cards (Ambassador / Wholesale process) ---- */
.v-steps-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	gap: var(--s-4);
	margin: var(--s-6) 0 var(--s-8);
	padding: 0;
	list-style: none;
}
.v-step-card {
	background: var(--surface-well);
	border: 1px solid var(--line-soft);
	border-radius: var(--r-m);
	padding: var(--s-5);
}
.v-step-card .v-step-k {
	display: block;
	font: var(--mono-label);
	letter-spacing: .14em;
	color: var(--c-cyan-text);
	margin-bottom: var(--s-2);
}
.v-entry-content .v-step-card h3 { margin: 0 0 var(--s-2); font-size: var(--text-base); }
.v-step-card p { margin: 0; font-size: var(--text-sm); }

/* ---- mu-plugin application forms (wholesale / ambassador), light ---- */
.va-form-row { margin-bottom: var(--s-4); }
.va-form-row--2col {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s-4);
}
@media (max-width: 600px) { .va-form-row--2col { grid-template-columns: minmax(0, 1fr); } }
.va-form-group { display: flex; flex-direction: column; gap: var(--s-2); }
.va-form-group label { font-size: var(--text-sm); font-weight: 500; color: var(--text); }
.va-form-group label span { color: var(--c-warn); }
.va-form-group input, .va-form-group select, .va-form-group textarea { width: 100%; }
.va-wholesale-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-2);
	min-height: 52px;
	padding: 0 var(--s-8);
	border: 0;
	border-radius: var(--r-s);
	background: var(--c-blue);
	color: var(--c-white);
	font-family: var(--font-text);
	font-weight: 600;
	font-size: var(--text-sm);
	letter-spacing: .03em;
	cursor: pointer;
	touch-action: manipulation;
	box-shadow: 0 0 0 1px var(--c-blue-line), 0 12px 28px -12px var(--c-blue-glow);
	transition: background-color .15s ease, transform .15s ease;
}
.va-wholesale-btn:hover { background: var(--c-blue-hover); transform: translateY(-1px); }
.va-wholesale-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.va-wholesale-btn:disabled { opacity: .6; cursor: default; transform: none; }
#va-wholesale-success, #va-ambassador-success {
	background: color-mix(in srgb, var(--c-success) 7%, var(--surface));
	border: 1px solid var(--line-soft);
	border-left: 3px solid var(--c-success);
	border-radius: var(--r-s);
	padding: var(--s-5) var(--s-6);
}
#va-wholesale-success h3, #va-ambassador-success h3 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--text-lg);
	margin: 0 0 var(--s-2);
	color: var(--text);
}
#va-wholesale-success p, #va-ambassador-success p { margin: 0; color: var(--text-soft); }

/* mu [va_wholesale_form] hero + pillars, restyled light (page 259) */
.va-wholesale-hero { padding: var(--s-6) 0 var(--s-8); border-bottom: 1px solid var(--line-soft); margin-bottom: var(--s-8); }
.va-wholesale-label {
	font: var(--mono-label);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--c-cyan-text);
	margin-bottom: var(--s-3);
}
.va-wholesale-title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
	line-height: 1.08;
	color: var(--text);
	margin: 0 0 var(--s-3);
}
.va-wholesale-sub { color: var(--text-soft); max-width: 60ch; margin: 0; }
.va-pillars-inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: var(--s-4);
	margin-bottom: var(--s-10);
}
.va-wholesale-pillar {
	background: var(--surface-well);
	border: 1px solid var(--line-soft);
	border-radius: var(--r-m);
	padding: var(--s-5);
}
.va-pillar-number { font: var(--mono-label); letter-spacing: .14em; color: var(--c-cyan-text); margin-bottom: var(--s-2); }
.va-wholesale-pillar h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); margin: 0 0 var(--s-2); color: var(--text); }
.va-wholesale-pillar p { margin: 0; font-size: var(--text-sm); color: var(--text-soft); }
.va-wholesale-form-section { max-width: 640px; margin-inline: auto; }
.va-wholesale-form-inner h2 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--text-xl);
	color: var(--text);
	margin: 0 0 var(--s-2);
}
.va-form-sub { color: var(--text-soft); margin: 0 0 var(--s-6); }
.va-amb-apply-section { max-width: 640px; margin-inline: auto; }
.va-amb-apply-inner h2 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--text-xl);
	color: var(--text);
	margin: 0 0 var(--s-2);
}
.va-amb-apply-sub { color: var(--text-soft); margin: 0 0 var(--s-6); }

/* ---- Capture consent fine print (all 3 Klaviyo forms) ---- */
.va-form-consent {
	margin-top: var(--s-3);
	font: var(--mono-meta);
	letter-spacing: .04em;
	color: var(--text-soft);
	max-width: 52ch;
}
.va-form-consent a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.va-form-consent a:hover { color: var(--c-blue); }
.v-band-dark .va-form-consent a:hover { color: var(--c-cyan); }

/* ---- Shop inline capture (mu block, light instrument) ---- */
.va-inline-capture {
	grid-column: 1 / -1;
	background:
		radial-gradient(ellipse at 85% 0%, var(--c-blue-soft), transparent 55%),
		linear-gradient(165deg, var(--c-paper-0), var(--surface-well-2));
	border: 1px solid var(--c-blue-line);
	border-radius: var(--r-m);
	padding: clamp(28px, 4vw, 44px);
	margin: var(--s-10) auto 0;
	max-width: 640px;
	text-align: left;
}
.va-inline-capture .va-capture-eyebrow {
	font: var(--mono-label);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--c-cyan-text);
	margin: 0 0 var(--s-2);
}
.va-inline-capture h3 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--text-xl);
	line-height: 1.2;
	color: var(--text);
	margin: 0 0 var(--s-2);
}
.va-inline-capture .va-capture-sub { font-size: var(--text-sm); color: var(--text-soft); margin: 0 0 var(--s-5); }
.va-inline-capture .va-footer-form { display: flex; gap: var(--s-2); flex-wrap: wrap; margin: 0; }
.va-inline-capture .va-footer-form input[type="email"] {
	flex: 1;
	min-width: 200px;
	background: var(--surface);
	border: 1px solid var(--line);
	color: var(--text);
}
.va-inline-capture .va-footer-form button {
	min-height: 48px;
	padding: 0 var(--s-6);
	background: var(--c-blue);
	color: var(--c-white);
	border: 0;
	border-radius: var(--r-s);
	font-family: var(--font-text);
	font-weight: 600;
	font-size: var(--text-sm);
	cursor: pointer;
	touch-action: manipulation;
}
.va-inline-capture .va-footer-form button:hover { background: var(--c-blue-hover); }
.va-inline-capture .va-footer-form-msg { font: var(--mono-label); margin-top: var(--s-3); color: var(--c-cyan-text); }
@media (max-width: 600px) {
	.va-inline-capture .va-footer-form { flex-direction: column; }
	.va-inline-capture .va-footer-form button { width: 100%; }
}

/* ---- Contact Form 7 (Contact + Wholesale Program pages) ---- */
.wpcf7 form > p { margin: 0 0 var(--s-4); }
.wpcf7 label { display: block; font-size: var(--text-sm); font-weight: 500; color: var(--text); margin-bottom: var(--s-2); }
.wpcf7 input:not([type="submit"]), .wpcf7 select, .wpcf7 textarea { width: 100%; }
.wpcf7 input[type="submit"] {
	min-height: 52px;
	padding: 0 var(--s-8);
	border: 0;
	border-radius: var(--r-s);
	background: var(--c-blue);
	color: var(--c-white);
	font-family: var(--font-text);
	font-weight: 600;
	font-size: var(--text-sm);
	letter-spacing: .03em;
	cursor: pointer;
	touch-action: manipulation;
	box-shadow: 0 0 0 1px var(--c-blue-line), 0 12px 28px -12px var(--c-blue-glow);
	transition: background-color .15s ease;
}
.wpcf7 input[type="submit"]:hover { background: var(--c-blue-hover); }
.wpcf7 input[type="submit"]:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.wpcf7 .wpcf7-spinner { margin: 0 0 0 var(--s-3); }
.wpcf7 .wpcf7-not-valid-tip { display: block; margin-top: var(--s-1); font-size: var(--text-xs); color: var(--c-warn); }
.wpcf7 .wpcf7-response-output {
	margin: var(--s-5) 0 0;
	padding: var(--s-4) var(--s-5);
	border: 1px solid var(--line-soft);
	border-left: 3px solid var(--c-blue);
	border-radius: var(--r-s);
	background: var(--surface-well);
	font-size: var(--text-sm);
	color: var(--text);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { border-left-color: var(--c-warn); }
.wpcf7 form.sent .wpcf7-response-output { border-left-color: var(--c-success); }

/* ---- Research blog index ---- */
.v-post-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
	gap: var(--s-4);
}
.v-post-card {
	display: flex;
	flex-direction: column;
	background: var(--surface-well);
	border: 1px solid var(--line-soft);
	border-radius: var(--r-m);
	padding: var(--s-6) var(--s-5);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.v-post-card:hover { border-color: var(--c-blue-line); box-shadow: var(--sh-1); }
.v-post-card:focus-within { border-color: var(--c-blue); }
.v-post-card-meta {
	font: var(--mono-meta);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--c-cyan-text);
	margin: 0 0 var(--s-3);
}
.v-post-card-title { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); line-height: 1.25; margin: 0 0 var(--s-3); }
.v-post-card-title a { color: var(--text); }
.v-post-card-title a:hover { color: var(--c-blue); }
.v-post-card-title a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.v-post-card-excerpt { font-size: var(--text-sm); color: var(--text-soft); }
.v-post-card-excerpt p { margin: 0; }
.v-post-card-link { margin-top: auto; padding-top: var(--s-4); font: var(--mono-label); letter-spacing: .06em; color: var(--c-blue); }

/* ---- Blog RUO disclaimer (mu-appended .va-post-ruo) ---- */
.va-post-ruo {
	margin-top: var(--s-8);
	padding: var(--s-4) var(--s-5);
	background: var(--surface-well);
	border: 1px solid var(--line-soft);
	border-left: 3px solid var(--c-warn);
	border-radius: var(--r-s);
	font-size: var(--text-xs);
	color: var(--text-soft);
}

/* ---- 404 ---- */
.v-404-panel { max-width: 640px; padding-block: clamp(24px, 5vw, 56px); }
.v-404-code {
	display: inline-block;
	font: var(--mono-label);
	letter-spacing: .22em;
	color: var(--c-cyan-text);
	border: 1px solid var(--c-cyan-line);
	border-radius: 999px;
	padding: var(--s-1) var(--s-4);
	margin-bottom: var(--s-5);
}
.v-404-search { display: flex; gap: var(--s-2); flex-wrap: wrap; margin: var(--s-6) 0; }
.v-404-search input[type="search"] { flex: 1; min-width: 200px; }
.v-404-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-8); }
.v-404-help { font-size: var(--text-sm); color: var(--text-soft); border-top: 1px solid var(--line-soft); padding-top: var(--s-5); }
.v-404-help a { color: var(--c-blue); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 600px) {
	.v-404-search { flex-direction: column; }
	.v-404-actions .v-btn { width: 100%; }
}

/* ============================================================
   P6-a11y (Kro): stablecoin gateway renders inline-styled fields
   (#888 text on Woo default lavender box, unlabeled network select)
   that beat the theme's payment-box rules and fail WCAG AA. Force the
   branded surface + readable contrast; the select gets a JS label too.
   ============================================================ */
.woocommerce-checkout #payment div.payment_box,
.woocommerce-checkout #payment li .payment_box {
	background: var(--surface-well-2) !important;
}
/* Remove the triangle/arrow that points from the expanded payment box up at the
   selected method (WooCommerce default ::before, beats the earlier override). */
.woocommerce-checkout #payment ul.payment_methods li .payment_box::before,
.woocommerce-checkout #payment .payment_box::before {
	content: none !important;
	display: none !important;
	border: 0 !important;
}
.woocommerce-checkout #payment .payment_box p,
.woocommerce-checkout #payment .payment_box li,
.woocommerce-checkout #payment .payment_box span {
	color: var(--text-soft) !important;   /* #33405C on #EDF1F7 = ~8.6:1 */
}
.woocommerce-checkout #payment .payment_box select {
	width: 100%;
	min-height: 44px;
	padding: var(--s-2) var(--s-3);
	margin-bottom: var(--s-2);
	border: 1px solid var(--line);
	border-radius: var(--r-s);
	background: var(--surface, #fff);
	color: var(--text);
	font: var(--mono-data);
}
.woocommerce-checkout #payment .payment_box select:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

/* ============================================================
   Stage-5 fix (Kro): cookie consent banner (mu-plugin, z-9000, bottom-fixed)
   covered the sticky add-to-cart bar (z-80) on mobile first-load. The sticky
   bar is an enhancement (the real Add-to-cart button is in the page), so
   suppress it while the one-time consent banner is showing; it returns the
   instant consent is dismissed (banner gains [hidden]).
   ============================================================ */
body:has(#va-cookie-banner:not([hidden])) .v-sticky-atc { display: none !important; }

/* ============================================================
   Punch-list batch 2 (Kro)
   ============================================================ */

/* Hide WooCommerce's auto-injected "View cart" link after add-to-cart
   (appears next to the add button / under cards — looks tacked-on). */
.added_to_cart,
.v-card-foot .added_to_cart,
.woocommerce a.added_to_cart.wc-forward { display: none !important; }

/* WooCommerce adds clearfix ::before/::after (content:" ";display:table) to its
   product lists. On a CSS grid those become PHANTOM grid cells — they pushed the
   related products into columns 2-3 (the "missing panel under the heading" bug).
   Kill them so real items start in column 1. */
.v-shop-grid::before,
.v-shop-grid::after,
.woocommerce .v-shop-grid::before,
.woocommerce .v-shop-grid::after { content: none !important; display: none !important; }

/* Related / up-sell products: fixed columns, left-aligned so the row always
   starts under the "Related products" heading (no centered gap when <4). */
.single-product .related .v-shop-grid,
.single-product .up-sells .v-shop-grid,
.single-product .related ul.products,
.single-product .up-sells ul.products {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	justify-content: start;
}
@media (max-width: 920px) {
	.single-product .related .v-shop-grid,
	.single-product .up-sells .v-shop-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Checkout order-review table: inset the table from the panel edges so cell
   text isn't jammed against the order-review borders. */
.woocommerce-checkout #order_review .shop_table { padding-inline: var(--s-2); }
.woocommerce-checkout #order_review .shop_table th,
.woocommerce-checkout #order_review .shop_table td {
	padding: var(--s-3) var(--s-3);
}
.woocommerce-checkout #order_review .shop_table td.product-name,
.woocommerce-checkout #order_review .shop_table th:first-child { padding-left: var(--s-2); }
.woocommerce-checkout #order_review .shop_table td.product-total { padding-right: var(--s-2); }

/* ============================================================
   Punch-list batch 4 (Kro)
   ============================================================ */

/* Cart after-you-pay removed → row 2 is just the bench, full width. */
.woocommerce-cart .v-cart-row2 { grid-template-columns: minmax(0, 1fr); }

/* Cart feedback: hide the top banners; JS injects a fading inline indicator in
   the actions row — green check on success, red ✗ + message on error. */
.woocommerce-cart .woocommerce-message,
.woocommerce-cart .woocommerce-error { display: none; }
/* Invalid-coupon feedback: WooCommerce core (cart.js) appends
   #coupon-error-notice beside the coupon field and adds .has-error to
   #coupon_code. This was previously hidden, leaving sighted users no cue that a
   coupon was rejected (only screen readers got the role="alert"). Surface it as
   a visible red pill on its own line, and turn the input border red to match. */
.woocommerce-cart .coupon-error-notice {
	flex-basis: 100%;
	width: 100%;
	box-sizing: border-box;
	margin: var(--s-2) 0 0;
	padding: var(--s-1) var(--s-3);
	border-radius: 999px;
	color: var(--c-warn);
	background: color-mix(in srgb, var(--c-warn) 10%, transparent);
	font: var(--mono-label);
	letter-spacing: .04em;
}
.woocommerce-cart #coupon_code.has-error,
.woocommerce-cart #coupon_code.has-error:focus,
.woocommerce-cart #coupon_code.has-error:focus-visible {
	border-color: var(--c-warn);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-warn) 18%, transparent);
	outline: none;
}
.woocommerce-cart .v-cart-actions { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.woocommerce-cart .v-cart-actions .coupon { margin-right: 0; }
.woocommerce-cart .v-cart-actions button[name="update_cart"] { margin-left: auto; }
.v-cart-feedback {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	opacity: 1;
	transition: opacity .5s ease;
}
.v-cart-feedback.is-fading { opacity: 0; }
.v-cart-feedback svg { flex: none; }
.v-cart-feedback--ok {
	justify-content: center;
	width: 30px; height: 30px;
	border-radius: 50%;
	color: var(--c-success);
	background: color-mix(in srgb, var(--c-success) 12%, transparent);
}
.v-cart-feedback--error {
	padding: var(--s-1) var(--s-3);
	border-radius: 999px;
	color: var(--c-warn);
	background: color-mix(in srgb, var(--c-warn) 10%, transparent);
	font: var(--mono-label);
	letter-spacing: .04em;
}

/* Whole payment-method row is clickable. */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method { cursor: pointer; }
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method label { cursor: pointer; }

/* Account opt-in: an explanatory panel (not a bare checkbox), after "Ship to a
   different address?". */
.v-account-toggle {
	margin-top: var(--s-6);
	padding: var(--s-4) var(--s-5);
	border: 1px solid var(--c-blue-line);
	border-radius: var(--r-m);
	background: var(--c-blue-soft);
}
.v-account-toggle .create-account { margin: 0; }
.v-account-toggle .create-account > label {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--text-lg);
	color: var(--text);
	cursor: pointer;
}
.v-account-sub {
	margin: var(--s-2) 0 0 calc(18px + var(--s-2));
	font-size: var(--text-sm);
	line-height: 1.55;
	color: var(--text-soft);
}
#ship-to-different-address > label {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--text-lg);
	color: var(--text);
	cursor: pointer;
}
.v-account-toggle .create-account input[type="checkbox"],
#ship-to-different-address input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--c-blue); flex: none; }

/* Featured category chip hugs its text on a single line (no wrap → no empty
   panel space). Tighter tracking + size so the longest category still fits
   beside the VA·NNN chip. */
.v-card-toprow .v-card-cat {
	white-space: nowrap;
	width: fit-content;
	max-width: 74%;
	letter-spacing: .04em;
	font-size: 9.5px;
	padding: var(--s-1) var(--s-2);
}

/* ==================== SliceWP — Ambassador Program ==================== */
/* Registration + Affiliate Account (login/dashboard) shortcodes. Inputs
   inherit the global FORMS block above; this handles layout, the submit
   button, dashboard nav, stat cards, and tables. */
.slicewp-form,
.slicewp-affiliate-account-wrapper { max-width: 640px; margin: var(--s-6) 0 var(--s-10); }
.slicewp-form .slicewp-form-field,
.slicewp-form p { margin: 0 0 var(--s-4); }
.slicewp-form label,
.slicewp-affiliate-account-wrapper label {
	display: block;
	margin-bottom: var(--s-2);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--text);
}
.slicewp-form input,
.slicewp-form textarea,
.slicewp-affiliate-account-wrapper input,
.slicewp-affiliate-account-wrapper textarea { width: 100%; }
.slicewp-form input[type="submit"],
.slicewp-form button[type="submit"],
.slicewp-affiliate-account-wrapper input[type="submit"] {
	width: auto;
	min-height: 48px;
	padding: 0 var(--s-8);
	background: var(--c-blue);
	color: var(--c-white);
	border: none;
	border-radius: var(--r-s);
	font-family: var(--font-text);
	font-weight: 700;
	letter-spacing: .02em;
	cursor: pointer;
	box-shadow: 0 0 0 1px var(--c-blue-line), 0 12px 28px -12px var(--c-blue-glow);
	transition: background .15s ease, transform .15s ease;
}
.slicewp-form input[type="submit"]:hover,
.slicewp-affiliate-account-wrapper input[type="submit"]:hover {
	background: var(--c-blue-hover);
	transform: translateY(-1px);
}
/* Dashboard navigation tabs */
.slicewp-affiliate-account-navigation {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	margin-bottom: var(--s-6);
	padding-bottom: var(--s-3);
	border-bottom: 1px solid var(--line);
	list-style: none;
}
.slicewp-affiliate-account-navigation li { margin: 0; }
.slicewp-affiliate-account-navigation a {
	display: inline-block;
	padding: var(--s-2) var(--s-4);
	border-radius: var(--r-s);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--text-soft);
	text-decoration: none;
}
.slicewp-affiliate-account-navigation a:hover,
.slicewp-affiliate-account-navigation .slicewp-active a,
.slicewp-affiliate-account-navigation a.slicewp-active {
	background: var(--c-blue-soft);
	color: var(--c-blue);
}
/* Stat / counter cards */
.slicewp-affiliate-account-stats,
.slicewp-counters { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s-4); margin-bottom: var(--s-6); }
.slicewp-counter,
.slicewp-affiliate-account-stats > * {
	padding: var(--s-4) var(--s-5);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-m);
}
.slicewp-counter-value { font-size: var(--text-xl); font-weight: 700; color: var(--text); }
.slicewp-counter-label { font-size: var(--text-sm); color: var(--text-soft); }
/* Referral URL field — long, keep it readable */
.slicewp-affiliate-referral-url input,
input.slicewp-referral-url { font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--text-sm); }
/* Tables (referrals, commissions, payouts) */
.slicewp-affiliate-account-wrapper table { width: 100%; border-collapse: collapse; margin: var(--s-4) 0; }
.slicewp-affiliate-account-wrapper th,
.slicewp-affiliate-account-wrapper td { padding: var(--s-3) var(--s-4); text-align: left; border-bottom: 1px solid var(--line); font-size: var(--text-sm); }
.slicewp-affiliate-account-wrapper th { color: var(--text-soft); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: var(--text-xs); }
@media (max-width: 600px) {
	.slicewp-affiliate-account-wrapper table,
	.slicewp-affiliate-account-wrapper thead,
	.slicewp-affiliate-account-wrapper tbody,
	.slicewp-affiliate-account-wrapper tr,
	.slicewp-affiliate-account-wrapper td { display: block; }
	.slicewp-affiliate-account-wrapper thead { display: none; }
	.slicewp-affiliate-account-wrapper td { border: none; padding: var(--s-1) 0; }
	.slicewp-affiliate-account-wrapper tr { padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
}