/* ==========================================================================
   Secure Peptide Solutions
   One stylesheet. Tokens -> primitives -> components -> plugin surfaces.
   Motion vocabulary is derived from the logo: helix, base-pair rungs, keyhole.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Faces
   -------------------------------------------------------------------------- */

@font-face {
	font-family: "SPS Display";
	src: url("fonts/sps-display-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "SPS Display";
	src: url("fonts/sps-display-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "SPS Sans";
	src: url("fonts/sps-sans-400.woff2") format("woff2");
	font-weight: 400 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "SPS Mono";
	src: url("fonts/sps-mono-400.woff2") format("woff2");
	font-weight: 400 500;
	font-style: normal;
	font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Tokens
   theme.json emits --wp--preset--color--*. These aliases keep component CSS
   readable and give one place to retune without touching every rule.
   -------------------------------------------------------------------------- */

:root {
	--base: var(--wp--preset--color--base, #fafcfe);
	--surface: var(--wp--preset--color--surface, #f0f4f9);
	--line: var(--wp--preset--color--line, #d8dfe7);
	--line-strong: var(--wp--preset--color--line-strong, #8993a0);
	--mute: var(--wp--preset--color--mute, #657182);
	--ink: var(--wp--preset--color--ink, #10253e);
	--brand: var(--wp--preset--color--brand, #144278);
	--brand-hi: var(--wp--preset--color--brand-hi, #93baed);
	--accent: var(--wp--preset--color--accent, #be222d);
	--accent-hi: var(--wp--preset--color--accent-hi, #ff908a);

	--font-display: "SPS Display", system-ui, sans-serif;
	--font-sans: "SPS Sans", system-ui, -apple-system, sans-serif;
	--font-mono: "SPS Mono", ui-monospace, "SF Mono", monospace;

	--r-sm: 6px;
	--r-md: 10px;
	--r-lg: 16px;

	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--dur: 260ms;

	/* pointer position, written once per frame by app.js */
	--mx: 50%;
	--my: 50%;
}

/* Transitionable angle for the verification ring. Without @property an angle
   cannot be animated at all — it snaps. */
@property --ring-angle {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */

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

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

body {
	margin: 0;
	background: var(--base);
	color: var(--ink);
	font-family: var(--font-sans);
	font-size: 1rem;
	line-height: 1.6;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

p,
li {
	text-wrap: pretty;
	max-width: 68ch;
}

h1,
h2,
h3,
h4 {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: 0.005em;
	text-transform: uppercase;
	text-wrap: balance;
	margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4rem); }
h2 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); }
h3 { font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.625rem); }

/* Every measured value in the catalogue: price, mg, batch, SKU, COA ref.
   This is the register that separates a supplier from a storefront. */
.sps-num,
.woocommerce-Price-amount,
.sps-batch,
.sps-sku {
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	letter-spacing: -0.01em;
}

a {
	color: var(--brand);
	text-underline-offset: 0.18em;
	text-decoration-thickness: from-font;
	transition: color var(--dur) var(--ease);
}

a:hover { color: var(--accent); }

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

/* --------------------------------------------------------------------------
   4. Eyebrow / label — the technical caption voice
   -------------------------------------------------------------------------- */

.sps-eyebrow {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mute);
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}

.sps-eyebrow::before {
	content: "";
	inline-size: 1.75rem;
	block-size: 2px;
	background: var(--accent);
	flex: none;
}

/* --------------------------------------------------------------------------
   5. Base-pair rule — the divider, lifted from the helix rungs in the mark
   -------------------------------------------------------------------------- */

.sps-rungs {
	block-size: 10px;
	border: 0;
	margin: 0;
	background-image: repeating-linear-gradient(
		90deg,
		var(--line-strong) 0 2px,
		transparent 2px 9px
	);
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	opacity: 0.7;
}

/* --------------------------------------------------------------------------
   6. Helix scroll spine
   Rotation is driven by scroll position, not a scroll listener. Native,
   compositor-driven, no main-thread work.
   -------------------------------------------------------------------------- */

.sps-spine {
	position: fixed;
	inset-block-start: 0;
	inset-inline-start: clamp(6px, 1.6vw, 26px);
	inline-size: 44px;
	block-size: 100vh;
	overflow: hidden;
	z-index: 0;
	pointer-events: none;
	opacity: 0.42;
	mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
}

.sps-spine__inner {
	display: block;
	/* barber-pole: translating a helix vertically reads as rotation */
	animation: sps-helix-turn 26s linear infinite;
	will-change: transform;
}

/* Scroll adds motion on top of the idle turn. */
@supports (animation-timeline: scroll()) {
	.sps-spine__inner {
		animation:
			sps-helix-turn 26s linear infinite,
			sps-helix-scroll linear;
		animation-timeline: auto, scroll(root block);
	}
}

.sps-spine__strand {
	stroke: var(--brand);
	stroke-width: 1.6;
	fill: none;
	stroke-linecap: round;
}

.sps-spine__strand--b {
	stroke: var(--accent);
	stroke-width: 1.4;
	opacity: 0.75;
}

.sps-spine__rung {
	stroke: var(--line-strong);
	stroke-width: 1.1;
}

@keyframes sps-helix-turn {
	from { transform: translateY(0); }
	to   { transform: translateY(-1280px); }
}

@keyframes sps-helix-scroll {
	from { translate: 0 0; }
	to   { translate: 0 -640px; }
}

/* --------------------------------------------------------------------------
   7. Reveals — scroll-driven, not IntersectionObserver
   -------------------------------------------------------------------------- */

@supports (animation-timeline: view()) {
	.sps-reveal {
		animation: sps-rise both;
		animation-timeline: view();
		animation-range: entry 8% cover 26%;
	}
}

@keyframes sps-rise {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   8. Product card
   -------------------------------------------------------------------------- */

.sps-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
	gap: clamp(0.75rem, 2vw, 1.5rem);
}

.sps-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--base);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: 1.25rem;
	overflow: hidden;
	isolation: isolate;
	transition:
		transform var(--dur) var(--ease),
		border-color var(--dur) var(--ease),
		box-shadow var(--dur) var(--ease),
		opacity var(--dur) var(--ease);
}

/* Pointer-tracked spotlight. --mx/--my come from one delegated listener
   coalesced to a single write per frame. */
.sps-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0;
	background: radial-gradient(
		240px circle at var(--mx) var(--my),
		color-mix(in oklch, var(--brand-hi) 30%, transparent),
		transparent 70%
	);
	transition: opacity var(--dur) var(--ease);
}

@media (hover: hover) {
	.sps-card:hover {
		transform: translateY(-3px);
		border-color: var(--line-strong);
		box-shadow: 0 12px 32px -18px color-mix(in oklch, var(--ink) 55%, transparent);
	}

	.sps-card:hover::before { opacity: 1; }

	/* Dim the siblings so the hovered card reads as selected, not just raised. */
	.sps-grid:has(.sps-card:hover) .sps-card:not(:hover) {
		opacity: 0.55;
	}
}

.sps-card__title {
	font-family: var(--font-display);
	font-size: 1.0625rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	line-height: 1.15;
	margin: 0.75rem 0 0.25rem;
}

.sps-card__meta {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	color: var(--mute);
	letter-spacing: 0.02em;
}

.sps-card__price {
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	font-size: 1.25rem;
	font-weight: 500;
	color: var(--accent);
	margin-block-start: auto;
	padding-block-start: 0.75rem;
}

/* --------------------------------------------------------------------------
   9. Verification mark — the keyhole motif, for COA and batch states
   -------------------------------------------------------------------------- */

.sps-verified {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.45rem 0.85rem;
	border-radius: 999px;
	background: var(--surface);
	font-family: var(--font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--brand);
	isolation: isolate;
}

/* Gradient ring via mask-composite, animated through @property. */
.sps-verified::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: conic-gradient(
		from var(--ring-angle),
		var(--accent),
		var(--brand-hi),
		var(--brand),
		var(--accent)
	);
	mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	mask-composite: exclude;
	-webkit-mask-composite: xor;
	animation: sps-ring 6s linear infinite;
}

@keyframes sps-ring {
	to { --ring-angle: 360deg; }
}

.sps-verified__icon {
	inline-size: 0.9rem;
	block-size: 0.9rem;
	flex: none;
	fill: var(--accent);
}

/* --------------------------------------------------------------------------
   10. Buttons
   -------------------------------------------------------------------------- */

.sps-btn {
	--btn-bg: var(--accent);
	--btn-fg: #fff;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.7rem 1.4rem;
	border: 1px solid transparent;
	border-radius: var(--r-sm);
	background: var(--btn-bg);
	color: var(--btn-fg);
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	overflow: hidden;
	transition:
		transform 140ms var(--ease),
		box-shadow var(--dur) var(--ease);
}

/* Sweep runs on transform, so it composites rather than repainting. */
.sps-btn::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		100deg,
		transparent 20%,
		rgba(255, 255, 255, 0.28) 50%,
		transparent 80%
	);
	transform: translateX(-100%);
	transition: transform 620ms var(--ease);
}

@media (hover: hover) {
	.sps-btn:hover {
		box-shadow: 0 8px 22px -10px color-mix(in oklch, var(--accent) 70%, transparent);
	}
	.sps-btn:hover::after { transform: translateX(100%); }
}

.sps-btn:active { transform: translateY(1px); }

.sps-btn--ghost {
	--btn-bg: transparent;
	--btn-fg: var(--brand);
	border-color: var(--line-strong);
}

/* --------------------------------------------------------------------------
   11. WooCommerce — quantity pricing tiers (plugin markup, theme styling)
   Class names come from ew-quantity-pricing/assets/css/front.css. The plugin
   is never edited; a plugin update cannot undo this.
   -------------------------------------------------------------------------- */

.ewqp-wrap {
	margin-block: 1.25rem;
	padding: 1rem 1.1rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
}

.ewqp-title {
	font-family: var(--font-display);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--brand);
	margin-block-end: 0.75rem;
}

.ewqp-table {
	inline-size: 100%;
	border-collapse: collapse;
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	font-size: 0.8125rem;
}

.ewqp-table th {
	text-align: start;
	font-weight: 500;
	color: var(--mute);
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding-block-end: 0.5rem;
	border-block-end: 1px solid var(--line);
}

.ewqp-table td {
	padding-block: 0.5rem;
	border-block-end: 1px solid var(--line);
}

.ewqp-table tr:last-child td { border-block-end: 0; }

.ewqp-clickable { cursor: pointer; transition: background-color 160ms var(--ease); }

@media (hover: hover) {
	.ewqp-clickable:hover td { background: color-mix(in oklch, var(--brand-hi) 22%, transparent); }
}

.ewqp-active td {
	background: color-mix(in oklch, var(--accent) 10%, transparent);
	color: var(--ink);
	font-weight: 500;
}

.ewqp-col-save,
.ewqp-live-save { color: var(--accent); font-weight: 500; }

.ewqp-note,
.ewqp-preview-flag {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	color: var(--mute);
}

/* --------------------------------------------------------------------------
   12. Affiliates (plugin markup, theme styling)
   Class names from ew-affiliates/assets/ew-affiliates.css.
   -------------------------------------------------------------------------- */

.ew-aff { font-family: var(--font-sans); color: var(--ink); }

.ew-aff-hero {
	padding: clamp(1.5rem, 4vw, 3rem);
	border-radius: var(--r-lg);
	background:
		radial-gradient(120% 140% at 12% 0%, color-mix(in oklch, var(--brand) 92%, #000) 0%, var(--brand) 55%);
	color: #fff;
}

.ew-aff-hero h1,
.ew-aff-hero h2 { color: #fff; }

.ew-aff-hero__intro { color: var(--brand-hi); }

.ew-aff-panel,
.ew-aff-card {
	background: var(--base);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: 1.25rem;
	transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

@media (hover: hover) {
	.ew-aff-card:hover { border-color: var(--line-strong); transform: translateY(-2px); }
}

.ew-aff-panel__head,
.ew-aff-card__label,
.ew-aff-stat__label {
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mute);
}

.ew-aff-card__big,
.ew-aff-stat__value {
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
	font-weight: 500;
	color: var(--brand);
	line-height: 1.1;
}

.ew-aff-stats,
.ew-aff-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
	gap: 0.875rem;
}

.ew-aff-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.7rem 1.4rem;
	border: 1px solid transparent;
	border-radius: var(--r-sm);
	background: var(--accent);
	color: #fff;
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: box-shadow var(--dur) var(--ease), transform 140ms var(--ease);
}

@media (hover: hover) {
	.ew-aff-btn:hover {
		box-shadow: 0 8px 22px -10px color-mix(in oklch, var(--accent) 70%, transparent);
	}
}

.ew-aff-btn--ghost {
	background: transparent;
	color: var(--brand);
	border-color: var(--line-strong);
}

.ew-aff-pill {
	display: inline-block;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: var(--surface);
	color: var(--mute);
}

.ew-aff-pill--approved,
.ew-aff-pill--paid {
	background: color-mix(in oklch, var(--brand) 14%, transparent);
	color: var(--brand);
}

.ew-aff-pill--pending {
	background: color-mix(in oklch, var(--accent) 12%, transparent);
	color: var(--accent);
}

.ew-aff-pill--rejected,
.ew-aff-pill--disabled { background: var(--surface); color: var(--line-strong); }

.ew-aff-table {
	inline-size: 100%;
	border-collapse: collapse;
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	font-size: 0.8125rem;
}

.ew-aff-table th {
	text-align: start;
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mute);
	font-weight: 500;
	padding-block: 0.6rem;
	border-block-end: 1px solid var(--line);
}

.ew-aff-table td {
	padding-block: 0.6rem;
	border-block-end: 1px solid var(--line);
}

/* Leaderboard: the owner calls himself the king of peptides. The board should
   feel like a standings table, so rank 1 gets weight rather than a trophy. */
.ew-aff-table--board tr:first-child td { color: var(--ink); font-weight: 500; }

.ew-aff-rank {
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	color: var(--mute);
}

.ew-aff-ladder__you td,
.ew-aff-tier-now {
	background: color-mix(in oklch, var(--accent) 8%, transparent);
	color: var(--ink);
}

.ew-aff-progress {
	block-size: 6px;
	border-radius: 999px;
	background: var(--surface);
	overflow: hidden;
}

.ew-aff-progress > * {
	display: block;
	block-size: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--brand), var(--accent));
	transition: inline-size 700ms var(--ease);
}

.ew-aff-code-input,
.ew-aff-copy {
	font-family: var(--font-mono);
	letter-spacing: 0.04em;
	padding: 0.6rem 0.8rem;
	border: 1px solid var(--line-strong);
	border-radius: var(--r-sm);
	background: var(--surface);
	color: var(--ink);
}

.ew-aff-alert {
	padding: 0.8rem 1rem;
	border-radius: var(--r-sm);
	border-inline-start: 3px solid var(--line-strong);
	background: var(--surface);
	font-size: 0.9375rem;
}

.ew-aff-alert--ok { border-inline-start-color: var(--brand); }
.ew-aff-alert--error { border-inline-start-color: var(--accent); }

/* --------------------------------------------------------------------------
   13. Motion and pointer gates
   Everything above degrades to a calm, fast, static site here.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	.sps-spine { display: none; }
	.sps-reveal { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}
}

/* --------------------------------------------------------------------------
   14. Reconstitution calculator
   -------------------------------------------------------------------------- */

.sps-calc:not([data-calc]) {
	display: grid;
	gap: clamp(1rem, 2.5vw, 2rem);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 62rem) {
	.sps-calc:not([data-calc]) { grid-template-columns: minmax(0, 1fr) minmax(320px, 26rem); align-items: start; }
	.sps-calc__result { position: sticky; top: 1.5rem; }
}

.sps-calc__field { padding-block: 1rem; border-block-end: 1px solid var(--line); }
.sps-calc__field:last-of-type { border-block-end: 0; }

.sps-calc__legend {
	font-family: var(--font-mono);
	font-size: .6875rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mute);
	margin-block-end: .6rem;
}

.sps-calc__opts { display: flex; flex-wrap: wrap; gap: .4rem; }

.sps-calc__opts button {
	font-family: var(--font-mono);
	font-size: .8125rem;
	padding: .5rem .85rem;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: var(--base);
	color: var(--ink);
	cursor: pointer;
	transition: border-color 160ms var(--ease), background-color 160ms var(--ease), color 160ms var(--ease);
}

@media (hover: hover) {
	.sps-calc__opts button:hover { border-color: var(--line-strong); }
}

.sps-calc__opts button[aria-pressed="true"] {
	background: var(--brand);
	border-color: var(--brand);
	color: #fff;
}

.sps-calc__custom { margin-block-start: .5rem; }

.sps-calc:not([data-calc]) input[type="number"] {
	font-family: var(--font-mono);
	font-size: .9375rem;
	padding: .55rem .7rem;
	inline-size: 100%;
	max-inline-size: 12rem;
	border: 1px solid var(--line-strong);
	border-radius: var(--r-sm);
	background: var(--base);
	color: var(--ink);
}

.sps-calc__dose { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

.sps-calc__toggle { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.sps-calc__toggle button {
	font-family: var(--font-mono); font-size: .8125rem; padding: .55rem .8rem;
	border: 0; background: var(--base); color: var(--mute); cursor: pointer;
}
.sps-calc__toggle button[aria-pressed="true"] { background: var(--brand); color: #fff; }

/* result panel */
.sps-calc__result {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: 1.25rem;
}

.sps-calc__headline {
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	font-size: clamp(2.75rem, 2rem + 3.4vw, 4.25rem);
	font-weight: 500;
	line-height: 1;
	color: var(--accent);
	letter-spacing: -.03em;
}

.sps-calc__headline sub {
	font-size: .875rem; font-weight: 400; color: var(--mute);
	letter-spacing: .1em; text-transform: uppercase; vertical-align: baseline; margin-inline-start: .4rem;
}

.sps-calc__rows { margin-block-start: 1rem; }

.sps-calc__row {
	display: flex; justify-content: space-between; gap: 1rem;
	padding-block: .55rem; border-block-start: 1px solid var(--line);
	font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: .8125rem;
}

.sps-calc__row dt { color: var(--mute); letter-spacing: .06em; text-transform: uppercase; font-size: .6875rem; }
.sps-calc__row dd { margin: 0; color: var(--ink); }

.sps-calc__warn {
	margin-block-start: 1rem; padding: .7rem .85rem;
	border-inline-start: 3px solid var(--line-strong);
	background: var(--base); border-radius: var(--r-sm);
	font-size: .8125rem; color: var(--mute);
}

.sps-calc__warn--bad { border-inline-start-color: var(--accent); color: var(--ink); }

/* syringe */
.sps-syr { margin-block: 1.25rem; }
.sps-syr__svg { inline-size: 100%; block-size: auto; display: block; overflow: visible; }
.sps-syr__barrel { fill: var(--base); stroke: var(--line-strong); stroke-width: 1.5; }
.sps-syr__fill { fill: color-mix(in oklch, var(--brand) 38%, transparent); transition: width 320ms var(--ease); }
.sps-syr__fill.is-over { fill: color-mix(in oklch, var(--accent) 42%, transparent); }
.sps-syr__plunger { fill: var(--brand); transition: x 320ms var(--ease); }
.sps-syr__flange, .sps-syr__hub { fill: var(--line-strong); }
.sps-syr__needle { stroke: var(--line-strong); stroke-width: 2.5; stroke-linecap: round; }
.sps-syr__tick { stroke: var(--line-strong); stroke-width: 1; }
.sps-syr__tick--minor { opacity: .5; }
.sps-syr__tlabel { fill: var(--mute); font-family: var(--font-mono); font-size: 10px; }

/* --------------------------------------------------------------------------
   15. COA register
   -------------------------------------------------------------------------- */

.sps-coa__tools { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; margin-block-end: 1.25rem; }

.sps-coa__search {
	flex: 1 1 16rem;
	font-family: var(--font-mono); font-size: .875rem;
	padding: .65rem .85rem;
	border: 1px solid var(--line-strong); border-radius: var(--r-sm);
	background: var(--base); color: var(--ink);
}

.sps-coa__count { font-family: var(--font-mono); font-size: .75rem; color: var(--mute); letter-spacing: .08em; text-transform: uppercase; }

.sps-coa__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1rem; }

.sps-coa-card {
	position: relative; display: grid; gap: .75rem;
	grid-template-columns: 78px minmax(0, 1fr);
	padding: 1rem; background: var(--base);
	border: 1px solid var(--line); border-radius: var(--r-lg);
	isolation: isolate;
	transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.sps-coa-card img { inline-size: 78px; block-size: auto; }

@media (hover: hover) {
	.sps-coa-card:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: 0 12px 30px -20px color-mix(in oklch, var(--ink) 60%, transparent); }
	.sps-coa__grid:has(.sps-coa-card:hover) .sps-coa-card:not(:hover) { opacity: .55; }
}

.sps-coa-card__name { font-family: var(--font-display); font-size: .9375rem; font-weight: 600; text-transform: uppercase; line-height: 1.2; margin: 0; }
.sps-coa-card__batch { font-family: var(--font-mono); font-size: .75rem; color: var(--mute); letter-spacing: .04em; }
.sps-coa-card__purity { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 1.5rem; font-weight: 500; color: var(--brand); line-height: 1.1; }
.sps-coa-card__meta { font-family: var(--font-mono); font-size: .6875rem; color: var(--mute); }
.sps-coa-card__actions { display: flex; gap: .5rem; margin-block-start: .35rem; flex-wrap: wrap; }

.sps-coa-card[hidden] { display: none; }

.sps-coa__empty { padding: 2rem; text-align: center; color: var(--mute); font-family: var(--font-mono); font-size: .875rem; }

/* pending state — the 36 products without a certificate yet */
.sps-coa-card--pending { border-style: dashed; }
.sps-coa-card--pending .sps-coa-card__purity { color: var(--line-strong); }

/* [hidden] must beat the flex display on calculator rows */
.sps-calc__row[hidden] { display: none; }

/* the syringe is the reason to use this tool — give it room */
.sps-syr { margin-block: 1.5rem; padding: 1rem .5rem; background: var(--base); border: 1px solid var(--line); border-radius: var(--r-md); }
.sps-syr__tlabel { font-size: 13px; }

/* COA panel on the product page */
.sps-coa-panel {
	margin-block: 1.25rem;
	padding: 1rem 1.1rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
}

.sps-coa-panel__rows { margin: .9rem 0 1rem; display: grid; gap: 0; }

.sps-coa-panel__rows > div {
	display: flex; justify-content: space-between; gap: 1rem;
	padding-block: .5rem; border-block-start: 1px solid var(--line);
	font-size: .8125rem;
}

.sps-coa-panel__rows dt {
	font-family: var(--font-mono); font-size: .6875rem;
	letter-spacing: .1em; text-transform: uppercase; color: var(--mute);
}

.sps-coa-panel__rows dd { margin: 0; color: var(--ink); }

/* --------------------------------------------------------------------------
   16. Header / footer
   -------------------------------------------------------------------------- */

.sps-header {
	position: sticky; inset-block-start: 0; z-index: 40;
	background: color-mix(in oklch, var(--base) 88%, transparent);
	backdrop-filter: saturate(140%) blur(10px);
	border-block-end: 1px solid var(--line);
}

.sps-header__bar { align-items: center; gap: 1rem; }
.sps-header__nav { align-items: center; gap: 1.25rem; }

.sps-header .wp-block-navigation a {
	font-family: var(--font-display);
	font-size: .8125rem; font-weight: 600;
	letter-spacing: .07em; text-transform: uppercase;
	color: var(--ink); text-decoration: none;
	position: relative; padding-block: .35rem;
}

.sps-header .wp-block-navigation a::after {
	content: ""; position: absolute; inset-inline: 0; inset-block-end: 0;
	block-size: 2px; background: var(--accent);
	transform: scaleX(0); transform-origin: left;
	transition: transform 260ms var(--ease);
}

@media (hover: hover) {
	.sps-header .wp-block-navigation a:hover::after { transform: scaleX(1); }
	.sps-header .wp-block-navigation a:hover { color: var(--brand); }
}

.sps-header .wp-block-navigation .current-menu-item a::after { transform: scaleX(1); }

.sps-footer a { color: var(--brand-hi); }
.sps-footer a:hover { color: #fff; }
.sps-footer__head { font-size: .8125rem; letter-spacing: .12em; color: #fff; }
.sps-footer__tag { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em; color: #fff; }
.sps-footer__ruo, .sps-footer__legal { font-size: .75rem; opacity: .78; max-inline-size: 46ch; }
.sps-footer .wp-block-page-list { list-style: none; padding: 0; }
.sps-footer .wp-block-page-list li { margin-block: .3rem; }

/* --------------------------------------------------------------------------
   17. WooCommerce surfaces
   -------------------------------------------------------------------------- */

.sps-shop__intro { color: var(--mute); max-inline-size: 72ch; }

.wc-block-product-template,
.wp-block-woocommerce-product-collection .wc-block-product-template {
	gap: clamp(.75rem, 2vw, 1.5rem);
}

.wc-block-product-template .wc-block-product {
	background: var(--base);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: 1rem;
	transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

@media (hover: hover) {
	.wc-block-product-template .wc-block-product:hover {
		transform: translateY(-3px);
		border-color: var(--line-strong);
		box-shadow: 0 12px 32px -18px color-mix(in oklch, var(--ink) 55%, transparent);
	}
	.wc-block-product-template:has(.wc-block-product:hover) .wc-block-product:not(:hover) { opacity: .55; }
}

.wc-block-product img { border-radius: var(--r-md); }

.wc-block-components-product-price,
.woocommerce-Price-amount,
.price {
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	color: var(--accent);
}

.wc-block-product-template .wp-block-post-title a,
.woocommerce-loop-product__title {
	font-family: var(--font-display);
	font-size: 1rem; font-weight: 600;
	text-transform: uppercase; letter-spacing: .01em; line-height: 1.2;
	color: var(--ink); text-decoration: none;
}

/* buttons Woo renders itself */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.wc-block-components-button, .woocommerce #respond input#submit {
	font-family: var(--font-display);
	font-size: .875rem; font-weight: 600;
	letter-spacing: .06em; text-transform: uppercase;
	background: var(--accent); color: #fff;
	border: 0; border-radius: var(--r-sm);
	padding: .7rem 1.4rem;
	transition: box-shadow var(--dur) var(--ease), transform 140ms var(--ease);
}

@media (hover: hover) {
	.woocommerce a.button:hover, .woocommerce button.button:hover,
	.wc-block-components-button:hover {
		background: var(--accent);
		box-shadow: 0 8px 22px -10px color-mix(in oklch, var(--accent) 70%, transparent);
	}
}

/* single product */
.sps-product .product_title { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); }
.sps-product .woocommerce-product-gallery img { border-radius: var(--r-lg); }
.sps-product .summary .price { font-size: 1.75rem; }
.sps-product .woocommerce-tabs .tabs { list-style: none; padding: 0; display: flex; gap: .5rem; flex-wrap: wrap; border-block-end: 1px solid var(--line); }
.sps-product .woocommerce-tabs .tabs a {
	font-family: var(--font-display); font-size: .8125rem; font-weight: 600;
	letter-spacing: .07em; text-transform: uppercase; text-decoration: none;
	display: block; padding: .6rem .9rem; color: var(--mute);
}
.sps-product .woocommerce-tabs .tabs .active a { color: var(--brand); border-block-end: 2px solid var(--accent); }

.woocommerce-breadcrumb, .wc-block-breadcrumbs {
	font-family: var(--font-mono); font-size: .75rem;
	letter-spacing: .04em; color: var(--mute);
}

.woocommerce-message, .woocommerce-info, .woocommerce-error {
	border-block-start: 0; border-inline-start: 3px solid var(--brand);
	background: var(--surface); border-radius: var(--r-sm); padding: .9rem 1rem;
}
.woocommerce-error { border-inline-start-color: var(--accent); }

/* --------------------------------------------------------------------------
   18. Age gate
   -------------------------------------------------------------------------- */

.sps-gate {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	place-items: center;
	padding: 1.25rem;
	background:
		radial-gradient(120% 120% at 20% 0%, color-mix(in oklch, var(--brand) 92%, #000) 0%, var(--ink) 70%);
	overflow-y: auto;
}

.sps-gate__panel {
	inline-size: min(100%, 34rem);
	background: var(--base);
	border-radius: var(--r-lg);
	padding: clamp(1.5rem, 4vw, 2.75rem);
	box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .7);
	text-align: center;
	animation: sps-gate-in 420ms var(--ease) both;
}

@keyframes sps-gate-in {
	from { opacity: 0; transform: translateY(14px) scale(.985); }
	to   { opacity: 1; transform: none; }
}

.sps-gate__logo img { max-inline-size: 130px; block-size: auto; margin-inline: auto; }
.sps-gate .sps-eyebrow { justify-content: center; margin-block-start: 1rem; }
.sps-gate .sps-eyebrow::before { display: none; }

.sps-gate__title { font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.125rem); margin-block: .6rem 0; }
.sps-gate__body { color: var(--mute); font-size: .9375rem; margin-inline: auto; max-inline-size: 42ch; }

.sps-gate__actions {
	display: flex;
	gap: .625rem;
	justify-content: center;
	flex-wrap: wrap;
	margin-block: 1.5rem 1rem;
}

.sps-gate__legal {
	font-size: .75rem;
	color: var(--line-strong);
	max-inline-size: 46ch;
	margin-inline: auto;
	margin-block-end: 0;
}

@media (prefers-reduced-motion: reduce) {
	.sps-gate__panel { animation: none; }
}

/* --------------------------------------------------------------------------
   19. Manual payment instructions
   -------------------------------------------------------------------------- */

.sps-pay {
	margin-block: 1.5rem;
	padding: clamp(1rem, 2.5vw, 1.5rem);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
}

.sps-pay__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

.sps-pay__amount {
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
	font-weight: 500;
	color: var(--accent);
	margin: 0;
	line-height: 1;
}

.sps-pay__row {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding-block: .7rem;
	border-block-start: 1px solid var(--line);
}

.sps-pay__row:first-of-type { margin-block-start: 1rem; }

.sps-pay__label {
	font-family: var(--font-mono);
	font-size: .6875rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mute);
	flex: 0 0 8.5rem;
}

.sps-pay__value {
	flex: 1 1 auto;
	font-family: var(--font-mono);
	font-size: 1rem;
	color: var(--ink);
	word-break: break-all;
}

.sps-pay__copy {
	flex: none;
	font-family: var(--font-mono);
	font-size: .6875rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: .35rem .7rem;
	border: 1px solid var(--line-strong);
	border-radius: var(--r-sm);
	background: var(--base);
	color: var(--brand);
	cursor: pointer;
	transition: background-color 160ms var(--ease), color 160ms var(--ease);
}

@media (hover: hover) {
	.sps-pay__copy:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
}

.sps-pay__how { font-size: .875rem; color: var(--mute); margin-block: 1rem 0; }
.sps-pay__how p { margin-block: 0 .5rem; }

.sps-pay__sent { margin-block-start: 1.25rem; padding-block-start: 1.25rem; border-block-start: 1px solid var(--line); }

.sps-pay__msg {
	font-size: .875rem;
	color: var(--brand);
	margin-block: .75rem 0;
}

/* --------------------------------------------------------------------------
   20. Tracking
   -------------------------------------------------------------------------- */

.sps-track {
	margin-block: 1.5rem;
	padding: 1.25rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
}

.sps-track__rows { margin-block: .9rem 1.1rem; }

.sps-track__rows > div {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding-block: .5rem;
	border-block-start: 1px solid var(--line);
	font-size: .875rem;
}

.sps-track__rows dt {
	font-family: var(--font-mono);
	font-size: .6875rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mute);
}

.sps-track__rows dd { margin: 0; color: var(--ink); }

.sps-track__state {
	font-family: var(--font-display);
	font-size: 1.25rem;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: var(--brand);
	margin-block: .35rem 0;
}

.sps-track__none { color: var(--mute); font-size: .9375rem; }

.sps-track-form {
	display: flex;
	gap: .75rem;
	flex-wrap: wrap;
	align-items: end;
	margin-block-end: 1.5rem;
}

.sps-track-form label { display: grid; gap: .35rem; }

.sps-track-form input {
	font-family: var(--font-mono);
	font-size: .9375rem;
	padding: .6rem .8rem;
	border: 1px solid var(--line-strong);
	border-radius: var(--r-sm);
	background: var(--base);
	color: var(--ink);
	min-inline-size: 14rem;
}

/* header layout corrections */
.sps-header__bar { align-items: center; gap: clamp(1rem, 3vw, 2.5rem); min-block-size: 68px; }
.sps-header .wp-block-site-logo { flex: none; }
.sps-header .wp-block-site-logo img { display: block; max-block-size: 46px; inline-size: auto; }
.sps-header__actions { align-items: center; gap: 1rem; flex: none; }

.sps-nav { flex: 1 1 auto; }
.sps-nav .wp-block-navigation__container { gap: clamp(.75rem, 1.6vw, 1.6rem); flex-wrap: nowrap; }
.sps-nav .wp-block-navigation-item__content { white-space: nowrap; }

@media (max-width: 62rem) {
	.sps-nav .wp-block-navigation__responsive-container-open { color: var(--ink); }
}

/* mini cart + account icons */
.sps-header .wc-block-mini-cart__button { color: var(--ink); padding: 0; }
.sps-header .wc-block-mini-cart__badge { background: var(--accent); color: #fff; }

/* --------------------------------------------------------------------------
   21. Home
   -------------------------------------------------------------------------- */

.sps-hero { padding-block: clamp(3rem, 8vw, 6.5rem) clamp(2rem, 5vw, 4rem); }
.sps-hero__title { margin-block: .75rem 1rem; }
.sps-hero__lede { font-size: clamp(1rem, .95rem + .35vw, 1.1875rem); color: var(--mute); max-inline-size: 58ch; }
.sps-hero__cta { margin-block-start: 2rem; gap: .625rem; }

.sps-section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.sps-section > h2 { margin-block: .5rem 1.5rem; }

.sps-pillars { padding-block: clamp(2rem, 5vw, 3.5rem); }
.sps-pillars h3 { font-size: 1.0625rem; letter-spacing: .02em; }
.sps-pillars p { color: var(--mute); font-size: .9375rem; }

/* category list -> tiles */
.sps-cats .wc-block-product-categories-list {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: .75rem;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr));
}

.sps-cats .wc-block-product-categories-list-item {
	position: relative;
	display: flex; align-items: baseline; justify-content: space-between; gap: .75rem;
	padding: 1.1rem 1.2rem;
	background: var(--base);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
		box-shadow var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.sps-cats .wc-block-product-categories-list-item a {
	font-family: var(--font-display);
	font-size: .9375rem; font-weight: 600;
	text-transform: uppercase; letter-spacing: .015em; line-height: 1.25;
	color: var(--ink); text-decoration: none;
}

.sps-cats .wc-block-product-categories-list-item a::after { content: ""; position: absolute; inset: 0; }

.sps-cats .wc-block-product-categories-list-item-count {
	font-family: var(--font-mono); font-variant-numeric: tabular-nums;
	font-size: .8125rem; color: var(--accent); flex: none;
}

@media (hover: hover) {
	.sps-cats .wc-block-product-categories-list-item:hover {
		transform: translateY(-3px); border-color: var(--line-strong);
		box-shadow: 0 12px 30px -20px color-mix(in oklch, var(--ink) 60%, transparent);
	}
	.sps-cats .wc-block-product-categories-list:has(.wc-block-product-categories-list-item:hover)
		.wc-block-product-categories-list-item:not(:hover) { opacity: .55; }
}

/* best sellers grid */
.wc-block-grid__products { list-style: none; margin: 0; padding: 0; gap: clamp(.75rem, 2vw, 1.25rem); }

.wc-block-grid__product {
	background: var(--base); border: 1px solid var(--line);
	border-radius: var(--r-lg); padding: 1rem; margin: 0;
	transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
		box-shadow var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.wc-block-grid__product-link { text-decoration: none; }
.wc-block-grid__product-image img { border-radius: var(--r-md); }

.wc-block-grid__product-title {
	font-family: var(--font-display); font-size: .9375rem; font-weight: 600;
	text-transform: uppercase; letter-spacing: .01em; line-height: 1.25;
	color: var(--ink); margin-block: .75rem .35rem;
}

.wc-block-grid__product-price { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--accent); }

@media (hover: hover) {
	.wc-block-grid__product:hover {
		transform: translateY(-3px); border-color: var(--line-strong);
		box-shadow: 0 12px 32px -18px color-mix(in oklch, var(--ink) 55%, transparent);
	}
	.wc-block-grid__products:has(.wc-block-grid__product:hover) .wc-block-grid__product:not(:hover) { opacity: .55; }
}

.sps-tools { border-block-start: 1px solid var(--line); }
.sps-tools h2 { font-size: clamp(1.25rem, 1.1rem + .8vw, 1.625rem); }
.sps-tools p { color: var(--mute); }

.sps-ruo {
	padding-block: clamp(1.5rem, 4vw, 2.5rem);
	border-block-start: 1px solid var(--line);
}
.sps-ruo p { font-size: .8125rem; color: var(--line-strong); max-inline-size: 82ch; }

/* core buttons inherit the brand */
.wp-block-button__link {
	font-family: var(--font-display); font-size: .875rem; font-weight: 600;
	letter-spacing: .06em; text-transform: uppercase;
	background: var(--accent); color: #fff; border-radius: var(--r-sm);
	padding: .7rem 1.4rem;
	transition: box-shadow var(--dur) var(--ease), transform 140ms var(--ease);
}
.is-style-outline .wp-block-button__link {
	background: transparent; color: var(--brand); border: 1px solid var(--line-strong);
}
@media (hover: hover) {
	.wp-block-button__link:hover { box-shadow: 0 8px 22px -10px color-mix(in oklch, var(--accent) 70%, transparent); }
}

/* checkout: block checkout surfaces */
.sps-checkout-note,
.wc-block-components-notice-banner.is-info {
	font-size: .875rem; color: var(--mute);
	background: var(--surface); border: 1px solid var(--line);
	border-radius: var(--r-md); padding: .8rem 1rem;
}

.sps-pay-blocks__desc { font-size: .875rem; color: var(--mute); padding-block: .25rem; }

.wc-block-components-title,
.wc-block-checkout__form h2 {
	font-family: var(--font-display); text-transform: uppercase; letter-spacing: .02em;
}

.wc-block-components-text-input input,
.wc-block-components-select select,
.wc-block-components-textarea {
	border-color: var(--line-strong) !important;
	border-radius: var(--r-sm) !important;
	font-family: var(--font-sans);
}

.wc-block-components-totals-item__value,
.wc-block-components-formatted-money-amount,
.wc-block-components-order-summary-item__quantity {
	font-family: var(--font-mono); font-variant-numeric: tabular-nums;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value { color: var(--accent); }

.wc-block-components-radio-control__option { border-radius: var(--r-sm); }
.wc-block-components-radio-control-accordion-option--checked-option-highlighted { border-color: var(--brand); }

/* ==========================================================================
   22. Dark hero
   The one place the site goes dark. Light everywhere else, so the contrast
   does the work rather than decoration.
   ========================================================================== */

.sps-hero--dark {
	position: relative;
	isolation: isolate;
	margin-block-start: -1px;
	padding-block: clamp(3.5rem, 9vw, 7rem);
	background:
		radial-gradient(90% 120% at 78% 8%, color-mix(in oklch, var(--brand) 62%, #000) 0%, transparent 58%),
		radial-gradient(70% 90% at 8% 100%, color-mix(in oklch, var(--accent) 26%, #000) 0%, transparent 62%),
		var(--ink);
	color: #fff;
}

/* faint base-pair grid, masked so it fades rather than tiles visibly */
.sps-hero--dark::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 50%;
	inline-size: 100vw;
	transform: translateX(-50%);
	z-index: -1;
	background-image:
		repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 46px),
		repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 46px);
	mask-image: radial-gradient(80% 70% at 50% 40%, #000 0%, transparent 78%);
}

.sps-hero--dark .wp-block-columns { align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem); }

.sps-hero--dark .sps-eyebrow { color: var(--brand-hi); }
.sps-hero--dark .sps-eyebrow::before { background: var(--accent-hi); }

.sps-hero__title {
	font-size: clamp(2.375rem, 1.4rem + 4.4vw, 4.75rem);
	line-height: .98;
	letter-spacing: -.005em;
	color: #fff;
	margin-block: .85rem .9rem;
}

/* per-line reveal: each line wipes up from behind its own edge */
.sps-hero__title .sps-line {
	display: block;
	overflow: hidden;
	padding-block-end: .06em;
}

.sps-hero__title .sps-line > span {
	display: block;
	animation: sps-line-up 900ms var(--ease) both;
}

.sps-hero__title .sps-line:nth-child(2) > span { animation-delay: 110ms; }

@keyframes sps-line-up {
	from { transform: translateY(105%); }
	to   { transform: none; }
}

.sps-hero--dark .sps-hero__lede {
	color: color-mix(in oklch, var(--brand-hi) 82%, #fff);
	font-size: clamp(1rem, .95rem + .4vw, 1.1875rem);
	max-inline-size: 46ch;
	animation: sps-fade-up 900ms var(--ease) 260ms both;
}

.sps-hero--dark .sps-hero__cta { animation: sps-fade-up 900ms var(--ease) 380ms both; }

@keyframes sps-fade-up {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

.sps-hero--dark .is-style-outline .wp-block-button__link {
	color: #fff;
	border-color: color-mix(in oklch, var(--brand-hi) 60%, transparent);
}

@media (hover: hover) {
	.sps-hero--dark .is-style-outline .wp-block-button__link:hover {
		background: rgba(255, 255, 255, .08);
		border-color: var(--brand-hi);
	}
}

/* the vial */
.sps-hero__vial { position: relative; }

.sps-hero__vial img {
	display: block;
	inline-size: min(100%, 27rem);
	block-size: auto;
	margin-inline: auto;
	filter: drop-shadow(0 40px 60px rgba(0, 0, 0, .55));
	animation: sps-vial-in 1100ms var(--ease) 180ms both, sps-float 7s ease-in-out 1.3s infinite;
}

@keyframes sps-vial-in {
	from { opacity: 0; transform: translateY(28px) rotate(-3deg) scale(.96); }
	to   { opacity: 1; transform: none; }
}

@keyframes sps-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-12px); }
}

/* halo behind the vial */
.sps-hero__vial::before {
	content: "";
	position: absolute;
	inset-block: 6%;
	inset-inline: 14%;
	z-index: -1;
	border-radius: 50%;
	background: radial-gradient(circle, color-mix(in oklch, var(--brand-hi) 30%, transparent) 0%, transparent 68%);
	filter: blur(24px);
	animation: sps-pulse 6s ease-in-out infinite;
}

@keyframes sps-pulse {
	0%, 100% { opacity: .55; transform: scale(1); }
	50%      { opacity: .85; transform: scale(1.06); }
}

/* spec readout beside the vial */
.sps-spec {
	display: grid;
	gap: .5rem;
	margin-block-start: 1.75rem;
	font-family: var(--font-mono);
	font-size: .8125rem;
}

.sps-spec div {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding-block: .5rem;
	border-block-start: 1px solid rgba(255, 255, 255, .14);
}

.sps-spec dt { color: var(--brand-hi); letter-spacing: .08em; text-transform: uppercase; font-size: .6875rem; }
.sps-spec dd { margin: 0; color: #fff; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   23. Compound ticker
   -------------------------------------------------------------------------- */

.sps-ticker {
	--speed: 44s;
	overflow: hidden;
	padding-block: .9rem;
	border-block: 1px solid var(--line);
	background: var(--surface);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.sps-ticker__track {
	display: flex;
	inline-size: max-content;
	gap: 2.5rem;
	animation: sps-marquee var(--speed) linear infinite;
}

.sps-ticker:hover .sps-ticker__track { animation-play-state: paused; }

.sps-ticker span {
	font-family: var(--font-mono);
	font-size: .8125rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mute);
	white-space: nowrap;
}

.sps-ticker span::before { content: "◦"; color: var(--accent); margin-inline-end: 2.5rem; }

@keyframes sps-marquee {
	to { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   24. Counting stats — the number animates in pure CSS via @property
   -------------------------------------------------------------------------- */

@property --sps-count {
	syntax: "<integer>";
	initial-value: 0;
	inherits: false;
}

.sps-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
	gap: clamp(1rem, 3vw, 2.5rem);
	padding-block: clamp(2.5rem, 6vw, 4rem);
}

.sps-stat__n {
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	font-size: clamp(2.5rem, 1.8rem + 3vw, 4rem);
	font-weight: 500;
	line-height: 1;
	color: var(--brand);
	letter-spacing: -.03em;
}

.sps-stat__n::after { content: counter(sps-n); counter-reset: sps-n var(--sps-count); }

.sps-stat__n[data-suffix]::before { content: ""; }

.sps-stat__suffix { color: var(--accent); }

.sps-stat__l {
	font-family: var(--font-mono);
	font-size: .6875rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mute);
	margin-block-start: .6rem;
}

@supports (animation-timeline: view()) {
	.sps-stat__n {
		animation: sps-count 1.4s linear both;
		animation-timeline: view();
		animation-range: entry 20% cover 40%;
	}
}

@keyframes sps-count {
	from { --sps-count: 0; }
	to   { --sps-count: var(--sps-to, 100); }
}

@media (prefers-reduced-motion: reduce) {
	.sps-hero__title .sps-line > span,
	.sps-hero--dark .sps-hero__lede,
	.sps-hero--dark .sps-hero__cta,
	.sps-hero__vial img { animation: none; }
	.sps-hero__vial::before { animation: none; }
	.sps-ticker__track { animation: none; }
	.sps-stat__n { animation: none; }
	.sps-stat__n::after { content: counter(sps-n); counter-reset: sps-n var(--sps-to, 0); }
}

/* --------------------------------------------------------------------------
   25. Hero corrections
   -------------------------------------------------------------------------- */

/* Full-bleed via a painted pseudo-element rather than negative margins.
   The margin trick assumes the parent is centred in the viewport; with the
   block editor's constrained layout it is not, so the band lands offset. */
.sps-hero--dark { position: relative; background: none; }

.sps-hero--dark::after {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 50%;
	z-index: -2;
	inline-size: 100vw;
	transform: translateX(-50%);
	background:
		radial-gradient(90% 120% at 72% 8%, color-mix(in oklch, var(--brand) 62%, #000) 0%, transparent 58%),
		radial-gradient(70% 90% at 6% 100%, color-mix(in oklch, var(--accent) 24%, #000) 0%, transparent 62%),
		var(--ink);
}

.sps-ticker { position: relative; background: none; border-block-color: transparent; }

.sps-ticker::after {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 50%;
	z-index: -2;
	inline-size: 100vw;
	transform: translateX(-50%);
	background: var(--surface);
	border-block: 1px solid var(--line);
}

/* Cap the size so it wraps at the intended point, and never mid-word. */
.sps-hero__title {
	font-size: clamp(2rem, 1.05rem + 2.9vw, 3.5rem);
	hyphens: none;
	overflow-wrap: normal;
	word-break: normal;
}

@media (max-width: 30rem) {
	.sps-hero__title { font-size: clamp(1.75rem, 1.1rem + 3.2vw, 2.375rem); }
}

/* Buttons side by side, not stacked. */
.sps-hero__cta { display: flex; flex-direction: row; flex-wrap: wrap; gap: .625rem; }
.sps-hero__cta .wp-block-button { margin: 0; }

/* Give the vial real presence. */
.sps-hero--dark .wp-block-columns { align-items: center; }
.sps-hero__vial img { inline-size: min(100%, 21rem); }

@media (min-width: 48rem) {
	.sps-hero__vial img { inline-size: min(115%, 25rem); margin-inline-end: -6%; }
}

.sps-spec { max-inline-size: 22rem; margin-inline: auto; }

/* Ticker sits flush under the dark band. */
.sps-ticker { margin-block-start: 0; }

/* Affiliates gets a pill in the nav — it is a call to action, not a page link. */
.sps-nav__cta .wp-block-navigation-item__content,
.sps-nav .sps-nav__cta a {
	position: relative;
	padding: .42rem .85rem !important;
	border-radius: 999px;
	background: color-mix(in oklch, var(--accent) 12%, transparent);
	color: var(--accent) !important;
	transition: background-color 200ms var(--ease), color 200ms var(--ease);
}

.sps-nav__cta .wp-block-navigation-item__content::after { display: none; }

@media (hover: hover) {
	.sps-nav__cta .wp-block-navigation-item__content:hover {
		background: var(--accent);
		color: #fff !important;
	}
}

/* nothing should push the page sideways */
html, body { overflow-x: clip; }

/* ==========================================================================
   26. Affiliate spotlight
   Second dark band on the page. Uses the same treatment as the hero so the
   page reads as two dark bookends around a light middle.
   ========================================================================== */

.sps-aff-spot {
	position: relative;
	isolation: isolate;
	padding-block: clamp(3rem, 7vw, 5.5rem);
	color: #fff;
}

.sps-aff-spot::after {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 50%;
	inline-size: 100vw;
	transform: translateX(-50%);
	z-index: -2;
	background:
		radial-gradient(80% 130% at 88% 10%, color-mix(in oklch, var(--accent) 34%, #000) 0%, transparent 58%),
		radial-gradient(90% 120% at 10% 92%, color-mix(in oklch, var(--brand) 66%, #000) 0%, transparent 62%),
		var(--ink);
}

/* rotating conic edge — the same @property trick as the verification ring */
.sps-aff-spot::before {
	content: "";
	position: absolute;
	inset-inline-start: 50%;
	inset-block-start: 0;
	inline-size: 100vw;
	block-size: 2px;
	transform: translateX(-50%);
	z-index: -1;
	background: linear-gradient(90deg, transparent, var(--accent), var(--brand-hi), transparent);
	background-size: 50% 100%;
	animation: sps-edge 7s linear infinite;
}

@keyframes sps-edge {
	from { background-position: -100% 0; }
	to   { background-position: 200% 0; }
}

.sps-aff-spot .sps-eyebrow { color: var(--accent-hi); }
.sps-aff-spot .sps-eyebrow::before { background: var(--accent-hi); }
.sps-aff-spot h2 { color: #fff; font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3rem); margin-block: .7rem .75rem; }
.sps-aff-spot p { color: color-mix(in oklch, var(--brand-hi) 84%, #fff); }

.sps-aff-spot__grid {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
}

@media (min-width: 56rem) {
	.sps-aff-spot__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}

/* tier ladder */
.sps-tiers { display: grid; gap: .5rem; margin-block-start: 1.5rem; }

.sps-tier {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 1rem;
	padding: .8rem 1rem;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: var(--r-md);
	background: rgba(255, 255, 255, .04);
	font-family: var(--font-mono);
	font-size: .8125rem;
	transition: transform 260ms var(--ease), border-color 260ms var(--ease), background-color 260ms var(--ease);
}

.sps-tier__rate {
	font-size: 1.375rem;
	font-weight: 500;
	color: var(--accent-hi);
	font-variant-numeric: tabular-nums;
	min-inline-size: 3.4rem;
}

.sps-tier__name { letter-spacing: .1em; text-transform: uppercase; color: #fff; font-size: .6875rem; }
.sps-tier__req { color: var(--brand-hi); font-variant-numeric: tabular-nums; }

@media (hover: hover) {
	.sps-tier:hover {
		transform: translateX(6px);
		border-color: color-mix(in oklch, var(--accent) 70%, transparent);
		background: rgba(255, 255, 255, .08);
	}
	.sps-tiers:has(.sps-tier:hover) .sps-tier:not(:hover) { opacity: .6; }
}

/* leaderboard card */
.sps-board {
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: var(--r-lg);
	padding: clamp(1rem, 2.5vw, 1.5rem);
	backdrop-filter: blur(6px);
}

.sps-board__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding-block-end: .8rem;
	border-block-end: 1px solid rgba(255, 255, 255, .16);
}

.sps-board__title { font-family: var(--font-display); font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.sps-board__month { font-family: var(--font-mono); font-size: .6875rem; color: var(--brand-hi); letter-spacing: .08em; text-transform: uppercase; }

.sps-board__row {
	display: grid;
	grid-template-columns: 2.2rem 1fr auto;
	align-items: center;
	gap: .75rem;
	padding-block: .7rem;
	border-block-end: 1px solid rgba(255, 255, 255, .09);
	font-family: var(--font-mono);
	font-size: .875rem;
}

.sps-board__row:last-child { border-block-end: 0; }
.sps-board__rank { color: var(--brand-hi); font-variant-numeric: tabular-nums; }
.sps-board__row:first-child .sps-board__rank { color: var(--accent-hi); }
.sps-board__name { color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sps-board__amt { color: var(--accent-hi); font-variant-numeric: tabular-nums; }

/* the bar fills on scroll */
.sps-board__bar {
	grid-column: 1 / -1;
	block-size: 3px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .1);
	overflow: hidden;
}

.sps-board__bar > i {
	display: block;
	block-size: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--brand-hi), var(--accent));
	transform-origin: left;
	transform: scaleX(var(--w, .5));
}

@supports (animation-timeline: view()) {
	.sps-board__bar > i {
		animation: sps-bar 1s var(--ease) both;
		animation-timeline: view();
		animation-range: entry 15% cover 35%;
	}
}

@keyframes sps-bar {
	from { transform: scaleX(0); }
	to   { transform: scaleX(var(--w, .5)); }
}

.sps-aff-spot .wp-block-button__link { background: var(--accent); }
.sps-aff-spot .is-style-outline .wp-block-button__link {
	background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35);
}

@media (prefers-reduced-motion: reduce) {
	.sps-aff-spot::before { animation: none; }
	.sps-board__bar > i { animation: none; }
}

/* category archive intro */
.sps-cat-intro { max-inline-size: 76ch; margin-block: .5rem 2rem; }

.sps-cat-intro__lede {
	font-size: clamp(1rem, .95rem + .35vw, 1.125rem);
	color: var(--ink);
	margin-block: 0 .75rem;
}

.sps-cat-intro__body { color: var(--mute); font-size: .9375rem; margin: 0; }

/* ==========================================================================
   27. Depth
   Layered parallax plus a scroll-driven tilt. No 3D engine, no model — the
   depth comes from moving layers at different rates inside a perspective,
   which is what most "3D scroll" sites are actually doing.
   ========================================================================== */

.sps-hero__vial {
	perspective: 1400px;
	perspective-origin: 50% 45%;
	transform-style: preserve-3d;
}

.sps-hero__vial img {
	position: relative;
	z-index: 2;
	transform-style: preserve-3d;
	will-change: transform;
}

/* Scroll drives a slow rotation and lift. The vial turns as the page moves,
   which is the effect people read as 3D. */
@supports (animation-timeline: scroll()) {
	.sps-hero__vial img {
		animation:
			sps-vial-in 1100ms var(--ease) 180ms both,
			sps-vial-turn linear;
		animation-timeline: auto, scroll(root block);
		animation-range: auto, 0 90vh;
	}

	/* The halo sits behind and moves the other way — the rate difference is
	   what sells the depth. */
	.sps-hero__vial::before {
		animation:
			sps-pulse 6s ease-in-out infinite,
			sps-halo-drift linear;
		animation-timeline: auto, scroll(root block);
		animation-range: auto, 0 90vh;
	}

	/* Spec readout drifts slowest, so it reads as furthest forward. */
	.sps-spec {
		animation: sps-spec-drift linear;
		animation-timeline: scroll(root block);
		animation-range: 0 90vh;
	}
}

@keyframes sps-vial-turn {
	from { transform: rotateY(-9deg) rotateX(2deg) translateZ(0) translateY(0); }
	to   { transform: rotateY(11deg) rotateX(-3deg) translateZ(60px) translateY(-38px); }
}

@keyframes sps-halo-drift {
	from { transform: translateY(0) scale(1); }
	to   { transform: translateY(34px) scale(1.14); }
}

@keyframes sps-spec-drift {
	from { transform: translateY(0); }
	to   { transform: translateY(-16px); }
}

/* Pointer tilt, layered on top of the scroll rotation. --tx/--ty are written
   once per frame by app.js. */
@media (hover: hover) {
	.sps-hero__vial {
		--tx: 0deg;
		--ty: 0deg;
	}

	.sps-hero__vial img {
		rotate: y var(--ty);
		transition: rotate 380ms var(--ease);
	}
}

/* --------------------------------------------------------------------------
   28. Label swap on hover
   The label slides up and out while a duplicate slides in from below. Two
   copies of the text, one mask, no JS.
   -------------------------------------------------------------------------- */

.sps-btn,
.wp-block-button__link {
	position: relative;
	overflow: hidden;
}

.sps-swap {
	display: inline-grid;
	overflow: hidden;
	vertical-align: bottom;
}

.sps-swap > span {
	grid-area: 1 / 1;
	transition: transform 340ms var(--ease), opacity 340ms var(--ease);
}

.sps-swap > span:last-child {
	transform: translateY(110%);
	opacity: 0;
}

@media (hover: hover) {
	.sps-btn:hover .sps-swap > span:first-child,
	.wp-block-button__link:hover .sps-swap > span:first-child {
		transform: translateY(-110%);
		opacity: 0;
	}

	.sps-btn:hover .sps-swap > span:last-child,
	.wp-block-button__link:hover .sps-swap > span:last-child {
		transform: none;
		opacity: 1;
	}
}

/* --------------------------------------------------------------------------
   29. Numbered feature cards
   -------------------------------------------------------------------------- */

.sps-pillars .wp-block-column {
	position: relative;
	counter-increment: sps-pillar;
	padding-block-start: 2.5rem;
}

.sps-pillars .wp-block-column::before {
	content: "0" counter(sps-pillar);
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	font-family: var(--font-mono);
	font-size: .75rem;
	letter-spacing: .16em;
	color: var(--accent);
}

.sps-pillars .wp-block-column::after {
	content: "";
	position: absolute;
	inset-block-start: 1.6rem;
	inset-inline: 0;
	block-size: 1px;
	background: var(--line);
	transform-origin: left;
}

@supports (animation-timeline: view()) {
	.sps-pillars .wp-block-column::after {
		animation: sps-rule-draw 900ms var(--ease) both;
		animation-timeline: view();
		animation-range: entry 10% cover 28%;
	}
}

@keyframes sps-rule-draw {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

.sps-pillars { counter-reset: sps-pillar; }

@media (prefers-reduced-motion: reduce) {
	.sps-hero__vial img,
	.sps-hero__vial::before,
	.sps-spec { animation: none !important; transform: none !important; }
	.sps-pillars .wp-block-column::after { animation: none; transform: none; }
	.sps-swap > span:last-child { display: none; }
}

/* ==========================================================================
   30. Interior page headers
   Every non-home page opens with a dark band so the site keeps one voice.
   ========================================================================== */

.sps-phead {
	position: relative;
	isolation: isolate;
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
	margin-block-end: clamp(2rem, 5vw, 3.5rem);
	color: #fff;
}

.sps-phead::after {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 50%;
	inline-size: 100vw;
	transform: translateX(-50%);
	z-index: -2;
	background:
		radial-gradient(80% 130% at 82% 6%, color-mix(in oklch, var(--brand) 60%, #000) 0%, transparent 60%),
		radial-gradient(70% 100% at 8% 100%, color-mix(in oklch, var(--accent) 22%, #000) 0%, transparent 62%),
		var(--ink);
}

.sps-phead::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 50%;
	inline-size: 100vw;
	block-size: 1px;
	transform: translateX(-50%);
	z-index: -1;
	background: linear-gradient(90deg, transparent, var(--accent), var(--brand-hi), transparent);
	background-size: 50% 100%;
	animation: sps-edge 9s linear infinite;
}

.sps-phead .sps-eyebrow { color: var(--accent-hi); }
.sps-phead .sps-eyebrow::before { background: var(--accent-hi); }

.sps-phead h1 {
	color: #fff;
	font-size: clamp(2rem, 1.15rem + 2.7vw, 3.25rem);
	margin-block: .7rem .6rem;
}

.sps-phead p {
	color: color-mix(in oklch, var(--brand-hi) 84%, #fff);
	max-inline-size: 56ch;
	font-size: clamp(1rem, .95rem + .3vw, 1.125rem);
	margin: 0;
}

/* --------------------------------------------------------------------------
   31. Fact strip — mono data row under a page header
   -------------------------------------------------------------------------- */

.sps-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	overflow: hidden;
	margin-block: 0 clamp(2rem, 5vw, 3rem);
}

.sps-facts > div {
	background: var(--base);
	padding: 1.1rem 1.2rem;
	transition: background-color 260ms var(--ease);
}

@media (hover: hover) {
	.sps-facts > div:hover { background: var(--surface); }
}

.sps-facts dt {
	font-family: var(--font-mono);
	font-size: .6875rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mute);
	margin-block-end: .4rem;
}

.sps-facts dd {
	margin: 0;
	font-family: var(--font-mono);
	font-size: 1rem;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}

.sps-facts dd a { color: var(--brand); text-decoration: none; }

/* --------------------------------------------------------------------------
   32. Alternating story rows
   -------------------------------------------------------------------------- */

.sps-story { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center; padding-block: clamp(1.75rem, 4vw, 3rem); border-block-start: 1px solid var(--line); }

@media (min-width: 52rem) {
	.sps-story { grid-template-columns: 1fr 1.35fr; }
	.sps-story--flip > *:first-child { order: 2; }
}

.sps-story__n {
	font-family: var(--font-mono);
	font-size: .75rem;
	letter-spacing: .16em;
	color: var(--accent);
}

.sps-story h2 { font-size: clamp(1.3rem, 1.1rem + .9vw, 1.75rem); margin-block: .5rem .5rem; }
.sps-story p { color: var(--mute); }

/* --------------------------------------------------------------------------
   33. Contact form (Fluent Forms) styled into the theme
   -------------------------------------------------------------------------- */

.sps-contact { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }

@media (min-width: 56rem) {
	.sps-contact { grid-template-columns: 1.15fr 1fr; align-items: start; }
}

.frm-fluent-form .ff-el-input--label label {
	font-family: var(--font-mono);
	font-size: .6875rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mute);
}

.frm-fluent-form input[type="text"],
.frm-fluent-form input[type="email"],
.frm-fluent-form textarea,
.frm-fluent-form select {
	font-family: var(--font-sans);
	border: 1px solid var(--line-strong);
	border-radius: var(--r-sm);
	background: var(--base);
	color: var(--ink);
	padding: .65rem .8rem;
	transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}

.frm-fluent-form input:focus,
.frm-fluent-form textarea:focus {
	outline: none;
	border-color: var(--brand);
	box-shadow: 0 0 0 3px color-mix(in oklch, var(--brand-hi) 45%, transparent);
}

.frm-fluent-form .ff-btn-submit {
	font-family: var(--font-display);
	font-size: .875rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	background: var(--accent);
	color: #fff;
	border: 0;
	border-radius: var(--r-sm);
	padding: .75rem 1.5rem;
	cursor: pointer;
	transition: box-shadow 260ms var(--ease);
}

@media (hover: hover) {
	.frm-fluent-form .ff-btn-submit:hover {
		box-shadow: 0 8px 22px -10px color-mix(in oklch, var(--accent) 70%, transparent);
	}
}

/* --------------------------------------------------------------------------
   34. Affiliate page — plugin markup on a dark header
   -------------------------------------------------------------------------- */

.sps-aff-page .ew-aff-hero { display: none; }
.sps-aff-page .ew-aff { margin-block-start: 0; }

/* When the content supplies its own dark page header, the template's
   post-title is a duplicate H1. Hide it rather than remove the block, so
   pages without a header (policies, account) still get a title. */
main:has(.sps-phead) > .wp-block-post-title { display: none; }

/* --------------------------------------------------------------------------
   35. Fallback styling
   Where scroll-driven CSS is unsupported (Firefox stable as of mid-2026,
   roughly 17% of traffic) motion.js drives the same effects. The finished
   state stays the default so a browser with neither still reads correctly.
   -------------------------------------------------------------------------- */

.sps-no-sda .sps-reveal,
.sps-no-sda .sps-pillars .wp-block-column {
	/* Cancel any scroll-driven animation explicitly. A keyframe with
	   fill-mode both outranks a plain declaration, so without this the
	   .is-in class cannot restore opacity. */
	animation: none !important;
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}

.sps-no-sda .sps-reveal.is-in,
.sps-no-sda .sps-pillars .wp-block-column.is-in {
	opacity: 1;
	transform: none;
}

.sps-no-sda .sps-pillars .wp-block-column::after { transform: scaleX(0); transition: transform 800ms var(--ease); }
.sps-no-sda .sps-pillars .wp-block-column.is-in::after { transform: scaleX(1); }

.sps-no-sda .sps-board__bar > i { transform: scaleX(0); transition: transform 900ms var(--ease); }

.sps-no-sda .sps-hero__vial::before { transform: translateY(var(--halo-y, 0)); }

/* Lenis needs the page to opt in. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* Anything scrollable inside the page must be exempt. */
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

/* ==========================================================================
   36. Shop grid — rebuild
   The previous pass applied the display face, uppercase, to product names
   that run to sixty characters. Long names in a condensed uppercase face
   wrap to six lines and break mid-word. Product names get the body face,
   sentence case, and a line clamp.
   ========================================================================== */

.sps-shop .wp-block-woocommerce-product-collection,
.sps-shop .wc-block-product-template {
	max-inline-size: none;
}

.wc-block-product-template {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
	gap: clamp(.75rem, 1.6vw, 1.25rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.wc-block-product-template .wc-block-product {
	display: flex;
	flex-direction: column;
	inline-size: 100% !important;
	max-inline-size: none !important;
	margin: 0 !important;
	padding: .9rem .9rem 1rem;
	background: var(--base);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	overflow: hidden;
	isolation: isolate;
}

/* image gets real presence */
.wc-block-product-template .wc-block-components-product-image {
	margin: 0 0 .85rem;
	border-radius: var(--r-md);
	background: var(--surface);
	overflow: hidden;
}

.wc-block-product-template .wc-block-components-product-image img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 1;
	object-fit: contain;
	padding: .5rem;
	transition: transform 420ms var(--ease);
}

@media (hover: hover) {
	.wc-block-product-template .wc-block-product:hover .wc-block-components-product-image img {
		transform: scale(1.05) translateY(-2px);
	}
}

/* names: body face, sentence case, clamped */
.wc-block-product-template .wp-block-post-title,
.wc-block-product-template .wc-block-components-product-name {
	font-family: var(--font-sans) !important;
	font-size: .9375rem !important;
	font-weight: 500 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	line-height: 1.35 !important;
	margin: 0 0 .5rem !important;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: break-word;
	hyphens: none;
}

.wc-block-product-template .wp-block-post-title a,
.wc-block-product-template .wc-block-components-product-name {
	color: var(--ink);
	text-decoration: none;
	font-family: inherit;
	text-transform: none;
}

@media (hover: hover) {
	.wc-block-product-template .wp-block-post-title a:hover { color: var(--brand); }
}

/* price sits above the button, pushed to the bottom */
.wc-block-product-template .wp-block-woocommerce-product-price,
.wc-block-product-template .wc-block-components-product-price {
	margin-block: auto 0 !important;
	padding-block-start: .5rem;
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	font-size: 1rem;
	color: var(--accent);
	white-space: nowrap;
}

.wc-block-product-template .wc-block-components-product-price del { color: var(--line-strong); font-size: .8125rem; }

/* button: full width, never wraps */
.wc-block-product-template .wp-block-button,
.wc-block-product-template .wc-block-components-product-button {
	margin-block-start: .75rem !important;
	inline-size: 100%;
}

.wc-block-product-template .wc-block-components-product-button a,
.wc-block-product-template .wc-block-components-product-button button,
.wc-block-product-template .wp-block-button__link {
	display: block;
	inline-size: 100%;
	padding: .6rem .5rem !important;
	font-size: .75rem !important;
	letter-spacing: .05em;
	white-space: nowrap;
	text-align: center;
	border-radius: var(--r-sm);
}

/* archive header + result count */
.sps-shop .wp-block-query-title { margin-block-end: .5rem; }

.woocommerce-result-count,
.wc-block-product-collection__product-count {
	font-family: var(--font-mono);
	font-size: .75rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--mute);
}

/* pagination */
.wp-block-query-pagination {
	margin-block-start: clamp(1.5rem, 4vw, 2.5rem);
	gap: .4rem;
	font-family: var(--font-mono);
	font-size: .8125rem;
}

.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers {
	padding: .45rem .75rem;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	text-decoration: none;
	color: var(--ink);
	transition: border-color 200ms var(--ease), background-color 200ms var(--ease);
}

.wp-block-query-pagination .current {
	background: var(--brand);
	border-color: var(--brand);
	color: #fff;
}

@media (hover: hover) {
	.wp-block-query-pagination a:hover { border-color: var(--line-strong); background: var(--surface); }
}

/* ==========================================================================
   37. Content sections
   The rebuild lost most of the old homepage's substance. These carry it.
   ========================================================================== */

/* trust triad */
.sps-trust {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	background: var(--line);
	border-block: 1px solid var(--line);
	/* full-bleed: auto-fit against a constrained parent gave two columns
	   and an empty third cell */
	inline-size: 100vw;
	margin-inline: calc(50% - 50vw);
	padding-inline: max(1.5rem, calc(50vw - 590px));
	background-clip: padding-box;
}

@media (min-width: 46rem) {
	.sps-trust { grid-template-columns: repeat(3, 1fr); }
}

.sps-trust > div {
	background: var(--base);
	padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 2.5vw, 1.75rem);
	position: relative;
	transition: background-color 300ms var(--ease);
}

.sps-trust > div::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	block-size: 2px;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 400ms var(--ease);
}

@media (hover: hover) {
	.sps-trust > div:hover { background: var(--surface); }
	.sps-trust > div:hover::before { transform: scaleX(1); }
}

.sps-trust h3 {
	font-size: 1rem;
	letter-spacing: .04em;
	margin-block: .75rem .5rem;
}

.sps-trust p { color: var(--mute); font-size: .875rem; margin: 0; }

.sps-trust__ico {
	inline-size: 1.5rem;
	block-size: 1.5rem;
	fill: none;
	stroke: var(--accent);
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* editorial lead block */
.sps-lead { padding-block: clamp(2.5rem, 6vw, 4.5rem); }

.sps-lead__grid { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); }

@media (min-width: 54rem) {
	.sps-lead__grid { grid-template-columns: .85fr 1.15fr; align-items: start; }
}

.sps-lead h2 { margin-block: .5rem 0; }

.sps-lead p { color: var(--mute); }

.sps-lead p strong { color: var(--ink); font-weight: 500; }

/* marketing category cards with copy */
.sps-mcats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
	gap: clamp(.75rem, 1.8vw, 1.25rem);
}

.sps-mcat {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	background: var(--base);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	overflow: hidden;
	isolation: isolate;
	transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
		box-shadow var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.sps-mcat::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	inline-size: 100%;
	block-size: 100%;
	z-index: -1;
	background: radial-gradient(120% 90% at 100% 0%, color-mix(in oklch, var(--brand-hi) 26%, transparent), transparent 62%);
	opacity: 0;
	transition: opacity var(--dur) var(--ease);
}

.sps-mcat__n {
	font-family: var(--font-mono);
	font-size: .6875rem;
	letter-spacing: .16em;
	color: var(--accent);
}

.sps-mcat h3 {
	font-size: 1.0625rem;
	line-height: 1.2;
	margin-block: .6rem .5rem;
}

.sps-mcat p { color: var(--mute); font-size: .875rem; margin: 0 0 1rem; }

.sps-mcat__go {
	margin-block-start: auto;
	font-family: var(--font-mono);
	font-size: .75rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--brand);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
}

.sps-mcat__go::after { content: "→"; transition: transform 300ms var(--ease); }

.sps-mcat a::before { content: ""; position: absolute; inset: 0; }

@media (hover: hover) {
	.sps-mcat:hover {
		transform: translateY(-4px);
		border-color: var(--line-strong);
		box-shadow: 0 16px 36px -22px color-mix(in oklch, var(--ink) 60%, transparent);
	}
	.sps-mcat:hover::before { opacity: 1; }
	.sps-mcat:hover .sps-mcat__go::after { transform: translateX(4px); }
	.sps-mcats:has(.sps-mcat:hover) .sps-mcat:not(:hover) { opacity: .58; }
}

/* process / method strip on dark */
.sps-method {
	position: relative;
	isolation: isolate;
	padding-block: clamp(3rem, 7vw, 5rem);
	color: #fff;
}

.sps-method::after {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 50%;
	inline-size: 100vw;
	transform: translateX(-50%);
	z-index: -2;
	background:
		radial-gradient(70% 110% at 15% 0%, color-mix(in oklch, var(--brand) 58%, #000) 0%, transparent 62%),
		var(--ink);
}

.sps-method h2 { color: #fff; }
.sps-method p { color: color-mix(in oklch, var(--brand-hi) 84%, #fff); }

.sps-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: clamp(1rem, 2.5vw, 2rem);
	margin-block-start: clamp(1.5rem, 4vw, 2.5rem);
	counter-reset: sps-step;
}

.sps-step { counter-increment: sps-step; padding-block-start: 1.75rem; position: relative; }

.sps-step::before {
	content: "0" counter(sps-step);
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	font-family: var(--font-mono);
	font-size: .75rem;
	letter-spacing: .16em;
	color: var(--accent-hi);
}

.sps-step::after {
	content: "";
	position: absolute;
	inset-block-start: 1.1rem;
	inset-inline: 0;
	block-size: 1px;
	background: rgba(255, 255, 255, .18);
}

.sps-step h3 { color: #fff; font-size: .9375rem; letter-spacing: .04em; margin-block: 0 .5rem; }
.sps-step p { font-size: .875rem; margin: 0; }

/* --------------------------------------------------------------------------
   38. Grids escape the prose column
   contentSize is 720px, which is right for reading and far too narrow for a
   card grid. Grids take the wide measure while the prose around them does not.
   -------------------------------------------------------------------------- */

.sps-mcats,
.sps-cats .wc-block-product-categories-list,
.sps-stats,
.wc-block-grid__products,
.sps-steps,
.sps-aff-spot__grid,
.sps-lead__grid,
.sps-facts {
	position: relative;
	inline-size: min(1180px, calc(100vw - 3rem));
	max-inline-size: none;
	margin-inline: auto;
	inset-inline-start: 50%;
	transform: translateX(-50%);
}

@media (min-width: 62rem) {
	.sps-mcats { grid-template-columns: repeat(3, 1fr); }
	.sps-cats .wc-block-product-categories-list { grid-template-columns: repeat(4, 1fr); }
	.wc-block-grid__products { grid-template-columns: repeat(5, 1fr) !important; }
}

/* best sellers grid needs to actually be a grid */
.wc-block-grid__products {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
	gap: clamp(.75rem, 1.6vw, 1.25rem);
}

.wc-block-grid__product {
	display: flex !important;
	flex-direction: column;
	inline-size: 100% !important;
	max-inline-size: none !important;
	padding: .9rem .9rem 1rem;
	text-align: start;
}

.wc-block-grid__product-title {
	font-family: var(--font-sans) !important;
	font-size: .875rem !important;
	font-weight: 500 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.wc-block-grid__product-price { margin-block: auto 0 !important; padding-block-start: .5rem; font-size: .9375rem; }
.wc-block-grid__product-add-to-cart { margin-block-start: .75rem !important; }
.wc-block-grid__product-add-to-cart a { display: block; inline-size: 100%; font-size: .75rem !important; padding: .6rem .5rem !important; white-space: nowrap; }

/* section headings stay in the prose column, aligned with the wide grid edge */
.sps-section > h2,
.sps-section > p,
.sps-method > h2,
.sps-method > p {
	inline-size: min(1180px, calc(100vw - 3rem));
	margin-inline: auto;
	position: relative;
	inset-inline-start: 50%;
	transform: translateX(-50%);
	max-inline-size: min(1180px, calc(100vw - 3rem));
}

.sps-section > p:not(.sps-eyebrow),
.sps-method > p { max-inline-size: min(72ch, calc(100vw - 3rem)); margin-inline: 0; inset-inline-start: 0; transform: none; inline-size: auto; }

.sps-section > .sps-eyebrow,
.sps-method > .sps-eyebrow {
	inline-size: min(1180px, calc(100vw - 3rem));
	margin-inline: auto;
	position: relative;
	inset-inline-start: 50%;
	transform: translateX(-50%);
}

/* --------------------------------------------------------------------------
   40. Chrome v2 — floating pill nav + index footer
   One header, two visual modes. Outer bar owns the default; inner pill owns
   the floating state. Height stays constant so the page never jumps.
   -------------------------------------------------------------------------- */

:root {
	--d-base: oklch(16% 0.042 255);
	--d-elev: oklch(20.5% 0.046 255);
	--d-elev2: oklch(24.5% 0.048 255);
	--d-line: oklch(38% 0.045 255 / 0.45);
	--d-ink: #eaf1fa;
	--d-mute: oklch(75% 0.028 250);
	--ease-nav: cubic-bezier(0.16, 1, 0.3, 1);
}

.sps-nav {
	padding-block: 0;
	background: color-mix(in oklch, var(--d-base) 78%, transparent);
	backdrop-filter: saturate(140%) blur(14px);
	-webkit-backdrop-filter: saturate(140%) blur(14px);
	border-block-end: 1px solid var(--d-line);
	transition:
		padding 520ms var(--ease-nav),
		background-color 520ms var(--ease-nav),
		border-color 520ms var(--ease-nav);
}

.sps-nav__inner {
	max-inline-size: var(--wp--style--global--wide-size, 1240px);
	margin-inline: auto;
	min-block-size: 64px;
	padding: 6px clamp(1rem, 3vw, 1.75rem);
	align-items: center;
	gap: clamp(0.75rem, 2.5vw, 2rem);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	transform: translateY(0);
	transition:
		max-inline-size 520ms var(--ease-nav),
		min-block-size 520ms var(--ease-nav),
		padding 520ms var(--ease-nav),
		border-radius 520ms var(--ease-nav),
		background-color 520ms var(--ease-nav),
		box-shadow 520ms var(--ease-nav),
		transform 520ms var(--ease-nav);
}

.sps-nav.is-floating {
	background: transparent;
	border-block-end-color: transparent;
	backdrop-filter: blur(0);
	-webkit-backdrop-filter: blur(0);
}

.sps-nav.is-floating .sps-nav__inner {
	max-inline-size: 56rem;
	min-block-size: 54px;
	padding-block: 4px;
	border-radius: 999px;
	background: color-mix(in oklch, var(--d-base) 93%, transparent);
	backdrop-filter: saturate(150%) blur(18px);
	-webkit-backdrop-filter: saturate(150%) blur(18px);
	box-shadow:
		0 12px 32px oklch(10% 0.03 255 / 0.45),
		0 0 0 1px var(--d-line) inset;
	transform: translateY(12px);
}

.sps-nav__logo { flex: none; }
.sps-nav__logo img { display: block; max-block-size: 38px; inline-size: auto; }

.sps-nav__links { align-items: center; }
.sps-nav .wp-block-navigation a {
	font-family: var(--font-display);
	font-size: 0.8125rem; font-weight: 600;
	letter-spacing: 0.07em; text-transform: uppercase;
	color: var(--d-ink); text-decoration: none;
	padding: 0.35rem 0.15rem;
	white-space: nowrap;
	position: relative;
}
.sps-nav .wp-block-navigation a::after {
	content: ""; position: absolute; inset-inline: 0.15rem; inset-block-end: 0;
	block-size: 2px; background: var(--accent-hi);
	transform: scaleX(0); transform-origin: left;
	transition: transform 260ms var(--ease);
}
@media (hover: hover) {
	.sps-nav .wp-block-navigation a:hover { color: #fff; }
	.sps-nav .wp-block-navigation a:hover::after { transform: scaleX(1); }
}
.sps-nav .wp-block-navigation .current-menu-item a::after { transform: scaleX(1); }

.sps-nav__actions { align-items: center; gap: 0.9rem; flex: none; }
.sps-nav .wc-block-mini-cart__button,
.sps-nav .wc-block-customer-account__account-icon,
.sps-nav .wp-block-woocommerce-customer-account a { color: var(--d-ink); }
.sps-nav .wc-block-mini-cart__badge { background: var(--accent); color: #fff; }

.sps-nav__cta {
	font-family: var(--font-display);
	font-size: 0.78rem; font-weight: 700;
	letter-spacing: 0.08em; text-transform: uppercase;
	color: #fff; text-decoration: none;
	background: var(--accent);
	padding: 0.55rem 1.05rem;
	border-radius: 999px;
	white-space: nowrap;
	transition: background-color 200ms var(--ease), transform 200ms var(--ease);
}
@media (hover: hover) {
	.sps-nav__cta:hover { background: color-mix(in oklch, var(--accent) 84%, white); }
}

/* Mobile: WP nav overlay goes dark; CTA hides to keep the bar one line. */
.sps-nav .wp-block-navigation__responsive-container-open,
.sps-nav .wp-block-navigation__responsive-container-close { color: var(--d-ink); }
.sps-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--d-base); color: var(--d-ink);
	padding: 5rem 1.75rem 2rem;
}
.sps-nav .wp-block-navigation__responsive-container.is-menu-open a { color: var(--d-ink); font-size: 1.05rem; }
@media (max-width: 719px) {
	.sps-nav__cta { display: none; }
	.sps-nav.is-floating .sps-nav__inner { max-inline-size: calc(100% - 1.5rem); }
}

/* ---- Footer: index archetype ------------------------------------------- */

.sps-ftr {
	background: var(--d-base);
	color: var(--d-ink);
	border-block-start: 1px solid var(--d-line);
}
.sps-ftr__inner { padding: clamp(3rem, 6vw, 4.5rem) 0 1.5rem; }

.sps-ftr__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr));
	gap: clamp(1.5rem, 3.5vw, 3rem);
	padding-block-end: clamp(2rem, 4vw, 3rem);
	border-block-end: 1px solid var(--d-line);
}
.sps-ftr__logo img { display: block; max-inline-size: 190px; block-size: auto; }
.sps-ftr__tag {
	font-family: var(--font-display); text-transform: uppercase;
	letter-spacing: 0.05em; font-weight: 600; color: #fff;
	margin-block: 1rem 0.75rem;
}
.sps-ftr__ruo, .sps-ftr__pay { font-size: 0.78rem; color: var(--d-mute); max-inline-size: 40ch; }
.sps-ftr__pay { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.02em; }

.sps-ftr__col { display: flex; flex-direction: column; gap: 0.55rem; }
.sps-ftr__col h3 {
	font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--d-mute); margin: 0 0 0.35rem;
}
.sps-ftr__col a {
	color: var(--d-ink); text-decoration: none; font-size: 0.92rem;
	inline-size: fit-content;
	transition: color 180ms var(--ease);
}
.sps-ftr__col a:hover { color: var(--accent-hi); }

.sps-ftr__base {
	display: flex; justify-content: space-between; align-items: center;
	gap: 1rem; flex-wrap: wrap;
	padding-block-start: 1.25rem;
	font-size: 0.78rem; color: var(--d-mute);
}
.sps-ftr__base p { margin: 0; }
.sps-ftr__base-note { font-family: var(--font-mono); letter-spacing: 0.04em; }

@media (max-width: 900px) {
	.sps-ftr__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sps-ftr__brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
	.sps-ftr__grid { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   41. Dark home
   The front page runs dark end to end. Scope: body.sps-home / main.sps-dh.
   Everything is visible without JS or animation support; motion only adds.
   -------------------------------------------------------------------------- */

body.sps-home { background: var(--d-base); color: var(--d-ink); }
body.sps-home .sps-helix-spine { display: none; }

.sps-dh { overflow-x: clip; }
.sps-dh h1, .sps-dh h2, .sps-dh h3 { color: #fff; overflow-wrap: anywhere; min-inline-size: 0; }
.sps-dh p { color: var(--d-mute); }
.sps-dh .sps-eyebrow { color: var(--accent-hi); }
.sps-dh .sps-eyebrow::before { background: var(--accent-hi); }

.sps-dh section { position: relative; }

.dh-wrap {
	max-inline-size: var(--wp--style--global--wide-size, 1240px);
	margin-inline: auto;
	padding-inline: clamp(1.1rem, 3.5vw, 2rem);
}

/* ---- Hero: centered marquee, orbiting vials, one glow ------------------- */

.dh-hero {
	padding-block: clamp(4.5rem, 10vw, 7.5rem) clamp(2.5rem, 5vw, 4rem);
	text-align: center;
	isolation: isolate;
}
.dh-hero::before {
	content: ""; position: absolute; inset: -20% -10% auto;
	block-size: 130%;
	background:
		radial-gradient(46rem 30rem at 50% 8%, oklch(45% 0.11 258 / 0.55), transparent 65%),
		radial-gradient(30rem 22rem at 50% 46%, oklch(48% 0.16 20 / 0.22), transparent 70%);
	z-index: -1;
	pointer-events: none;
}
.dh-hero .sps-eyebrow { justify-content: center; }
.dh-hero h1 {
	font-size: clamp(2.4rem, 6.4vw, 4.6rem);
	line-height: 1.02;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	margin: 0.9rem auto 0;
	max-inline-size: 18ch;
	text-wrap: balance;
}
.dh-hero__lede {
	max-inline-size: 56ch;
	margin: 1.4rem auto 0;
	font-size: 1.075rem;
	color: var(--d-mute);
}
.dh-hero__cta {
	display: flex; justify-content: center; gap: 0.75rem; flex-wrap: wrap;
	margin-block-start: 2rem;
}

/* Stage: center vial + orbiting product vials */
.dh-stage {
	position: relative;
	max-inline-size: 880px;
	margin: clamp(2.5rem, 5vw, 4rem) auto 0;
	min-block-size: clamp(280px, 42vw, 420px);
	display: grid; place-items: center;
}
.dh-stage__glow {
	position: absolute; inset: 0;
	background: radial-gradient(24rem 17rem at 50% 62%, oklch(52% 0.13 258 / 0.5), transparent 70%);
	pointer-events: none;
}
.dh-stage__hero-vial {
	position: relative; z-index: 2;
	inline-size: clamp(190px, 28vw, 290px); block-size: auto;
	filter: drop-shadow(0 24px 48px oklch(8% 0.03 255 / 0.7));
}
.dh-stage__sat {
	position: absolute; z-index: 1;
	inline-size: clamp(64px, 9vw, 104px); block-size: auto;
	border-radius: 14px;
	background: color-mix(in oklch, var(--d-elev) 82%, transparent);
	border: 1px solid var(--d-line);
	box-shadow: 0 14px 30px oklch(8% 0.03 255 / 0.55);
	padding: 8px;
	animation: dh-drift 7s ease-in-out infinite alternate;
}
.dh-stage__sat:nth-child(odd) { animation-duration: 9s; animation-delay: -3s; }
.dh-stage__sat--1 { inset-block-start: 4%;  inset-inline-start: 7%;  rotate: -7deg; }
.dh-stage__sat--2 { inset-block-start: 46%; inset-inline-start: 0;   rotate: 5deg; }
.dh-stage__sat--3 { inset-block-end: 2%;    inset-inline-start: 19%; rotate: -4deg; }
.dh-stage__sat--4 { inset-block-start: 6%;  inset-inline-end: 8%;    rotate: 6deg; }
.dh-stage__sat--5 { inset-block-start: 48%; inset-inline-end: 0;     rotate: -5deg; }
.dh-stage__sat--6 { inset-block-end: 3%;    inset-inline-end: 20%;   rotate: 4deg; }

@keyframes dh-drift {
	from { translate: 0 -7px; }
	to   { translate: 0 9px; }
}
@media (prefers-reduced-motion: reduce) {
	.dh-stage__sat { animation: none; }
}
@media (max-width: 640px) {
	.dh-stage__sat--2, .dh-stage__sat--5 { display: none; }
}

/* ---- Stat chips ---------------------------------------------------------- */

.dh-chips {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.75rem;
	margin-block-start: clamp(2.25rem, 5vw, 3.5rem);
	text-align: left;
}
.dh-chip {
	display: flex; align-items: baseline; gap: 0.6rem;
	background: color-mix(in oklch, var(--d-elev) 88%, transparent);
	border: 1px solid var(--d-line);
	border-radius: 12px;
	padding: 0.85rem 1rem;
}
.dh-chip b {
	font-family: var(--font-mono);
	font-weight: 500;
	font-size: clamp(1.15rem, 2vw, 1.45rem);
	color: #fff;
	white-space: nowrap;
}
.dh-chip span {
	font-size: 0.74rem; line-height: 1.25;
	letter-spacing: 0.05em; text-transform: uppercase;
	color: var(--d-mute);
}
@media (max-width: 860px) { .dh-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- Ticker reskin -------------------------------------------------------- */

.sps-dh .sps-ticker {
	background: var(--d-elev);
	border-block: 1px solid var(--d-line);
	color: var(--d-mute);
}

/* ---- Section header ------------------------------------------------------- */

.dh-sec { padding-block: clamp(3.25rem, 7vw, 5.5rem); }
.dh-sec__head { max-inline-size: 46rem; margin-block-end: clamp(1.75rem, 4vw, 2.75rem); }
.dh-sec__head--center { margin-inline: auto; text-align: center; }
.dh-sec__head--center .sps-eyebrow { justify-content: center; }
.dh-sec__head h2 {
	font-size: clamp(1.7rem, 3.6vw, 2.6rem);
	line-height: 1.08;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	margin: 0.7rem 0 0;
	text-wrap: balance;
}
.dh-sec__head p { margin-block-start: 0.9rem; }

/* ---- Bento ---------------------------------------------------------------- */

.dh-bento {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}
.dh-card {
	position: relative;
	display: flex; flex-direction: column;
	background: linear-gradient(180deg, var(--d-elev2), var(--d-elev) 62%);
	border: 1px solid var(--d-line);
	border-radius: 18px;
	overflow: hidden;
	transition: border-color 220ms var(--ease), translate 220ms var(--ease);
}
@media (hover: hover) {
	.dh-card:hover { border-color: oklch(55% 0.06 255 / 0.7); translate: 0 -3px; }
}
.dh-card__vis {
	min-block-size: 168px;
	display: grid; place-items: center;
	padding: 1.5rem 1.5rem 0.5rem;
}
.dh-card__body { padding: 1.1rem 1.5rem 1.5rem; }
.dh-card__body h3 { font-size: 1.2rem; margin: 0 0 0.45rem; letter-spacing: 0.02em; }
.dh-card__body p { font-size: 0.94rem; margin: 0; max-inline-size: 52ch; }
.dh-card__go {
	margin-block-start: 0.8rem;
	display: inline-block;
	font-family: var(--font-display); font-size: 0.78rem; font-weight: 600;
	letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--accent-hi); text-decoration: none;
}
.dh-card__go::after { content: " →"; }
@media (max-width: 760px) { .dh-bento { grid-template-columns: minmax(0, 1fr); } }

/* Card visuals — real data rendered as mono readouts, no fake chrome */
.dh-readout {
	inline-size: 100%; max-inline-size: 25rem;
	font-family: var(--font-mono); font-size: 0.78rem;
	color: var(--d-mute);
	border: 1px solid var(--d-line); border-radius: 12px;
	background: oklch(14% 0.035 255 / 0.65);
	padding: 1rem 1.1rem;
	display: grid; gap: 0.45rem;
}
.dh-readout div { display: flex; justify-content: space-between; gap: 1rem; }
.dh-readout b { color: #fff; font-weight: 500; text-align: right; }
.dh-readout .ok { color: oklch(80% 0.16 150); }

.dh-paylogos {
	display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center;
}
.dh-paylogos span {
	font-family: var(--font-display); font-weight: 600; font-size: 0.9rem;
	letter-spacing: 0.04em;
	color: var(--d-ink);
	border: 1px solid var(--d-line); border-radius: 999px;
	background: oklch(14% 0.035 255 / 0.65);
	padding: 0.55rem 1.1rem;
}

/* ---- Best sellers: dark product cards ------------------------------------ */

.sps-dh .wc-block-grid__products {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
	padding: 0; margin: 0;
	list-style: none;
}
.sps-dh .wc-block-grid__product {
	display: flex; flex-direction: column;
	background: linear-gradient(180deg, var(--d-elev2), var(--d-elev) 70%);
	border: 1px solid var(--d-line);
	border-radius: 16px;
	padding: 1.1rem 1.1rem 1.25rem;
	margin: 0;
	max-inline-size: none;
	transition: border-color 220ms var(--ease), translate 220ms var(--ease);
}
@media (hover: hover) {
	.sps-dh .wc-block-grid__product:hover { border-color: oklch(55% 0.06 255 / 0.7); translate: 0 -3px; }
}
.sps-dh .wc-block-grid__product-link { text-decoration: none; display: block; }
.sps-dh .wc-block-grid__product-image { margin: 0 0 0.8rem; }
.sps-dh .wc-block-grid__product-image img {
	inline-size: 100%; block-size: auto; border-radius: 10px;
	background: oklch(93% 0.008 250);
}
.sps-dh .wc-block-grid__product-title {
	color: var(--d-ink) !important;
	font-family: var(--font-sans);
	font-size: 0.92rem; font-weight: 600; line-height: 1.35;
	margin: 0 0 0.4rem;
}
.sps-dh .wc-block-grid__product-price {
	font-family: var(--font-mono); font-size: 0.9rem;
	color: var(--accent-hi) !important;
	margin-block-end: 0.75rem;
}
.sps-dh .wc-block-grid__product-price * { color: inherit !important; }
.sps-dh .wp-block-button__link,
.sps-dh .wc-block-grid__product .add_to_cart_button {
	margin-block-start: auto;
	background: transparent;
	border: 1px solid var(--d-line);
	color: var(--d-ink);
	border-radius: 999px;
	font-family: var(--font-display); font-weight: 600;
	font-size: 0.72rem; letter-spacing: 0.07em; text-transform: uppercase;
	padding: 0.55rem 1rem;
	text-align: center;
	transition: background-color 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease);
}
@media (hover: hover) {
	.sps-dh .wc-block-grid__product .add_to_cart_button:hover,
	.sps-dh .wp-block-button__link:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
}
.sps-dh .wc-block-grid__product-onsale {
	background: var(--accent); color: #fff; border: 0;
	font-family: var(--font-mono); font-size: 0.68rem;
}
@media (max-width: 980px) { .sps-dh .wc-block-grid__products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 440px)  { .sps-dh .wc-block-grid__products { grid-template-columns: minmax(0, 1fr); } }

/* ---- Research areas ------------------------------------------------------- */

.dh-cats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
}
.dh-cat {
	position: relative;
	display: flex; flex-direction: column; gap: 0.5rem;
	background: color-mix(in oklch, var(--d-elev) 88%, transparent);
	border: 1px solid var(--d-line);
	border-radius: 16px;
	padding: 1.4rem 1.4rem 1.3rem;
	text-decoration: none;
	transition: border-color 220ms var(--ease), translate 220ms var(--ease);
}
@media (hover: hover) {
	.dh-cat:hover { border-color: oklch(55% 0.06 255 / 0.7); translate: 0 -3px; }
	.dh-cat:hover .dh-cat__go { color: #fff; }
}
.dh-cat__n {
	font-family: var(--font-mono); font-size: 0.72rem;
	color: var(--accent-hi); letter-spacing: 0.1em;
}
.dh-cat h3 { font-size: 1.08rem; margin: 0; letter-spacing: 0.02em; }
.dh-cat p { font-size: 0.88rem; margin: 0; }
.dh-cat__go {
	margin-block-start: auto; padding-block-start: 0.6rem;
	font-family: var(--font-display); font-size: 0.75rem; font-weight: 600;
	letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--accent-hi);
	transition: color 200ms var(--ease);
}
.dh-cat__go::after { content: " →"; }
@media (max-width: 900px) { .dh-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .dh-cats { grid-template-columns: minmax(0, 1fr); } }

/* ---- Affiliate band -------------------------------------------------------- */

.dh-aff {
	background:
		radial-gradient(38rem 24rem at 82% 20%, oklch(40% 0.1 258 / 0.5), transparent 70%),
		var(--d-elev);
	border-block: 1px solid var(--d-line);
}
.dh-aff__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: center;
}
.dh-tiers { display: grid; gap: 0.6rem; }
.dh-tier {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr) auto;
	align-items: center; gap: 1rem;
	border: 1px solid var(--d-line);
	border-radius: 12px;
	background: oklch(14% 0.035 255 / 0.55);
	padding: 0.8rem 1.1rem;
}
.dh-tier b { font-family: var(--font-mono); font-weight: 500; font-size: 1.25rem; color: #fff; }
.dh-tier span { font-size: 0.88rem; color: var(--d-mute); }
.dh-tier i {
	font-style: normal; font-family: var(--font-mono);
	font-size: 0.75rem; color: var(--accent-hi); white-space: nowrap;
}
@media (max-width: 860px) { .dh-aff__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---- FAQ -------------------------------------------------------------------- */

.dh-faq { max-inline-size: 46rem; margin-inline: auto; display: grid; gap: 0.6rem; }
.dh-faq details {
	border: 1px solid var(--d-line);
	border-radius: 12px;
	background: color-mix(in oklch, var(--d-elev) 88%, transparent);
	overflow: hidden;
	transition: border-color 220ms var(--ease);
}
.dh-faq details[open] { border-color: oklch(55% 0.06 255 / 0.7); }
.dh-faq summary {
	cursor: pointer;
	list-style: none;
	display: flex; justify-content: space-between; align-items: center; gap: 1rem;
	padding: 1rem 1.25rem;
	font-family: var(--font-sans); font-weight: 600; font-size: 0.98rem;
	color: var(--d-ink);
}
.dh-faq summary::-webkit-details-marker { display: none; }
.dh-faq summary::after {
	content: "+";
	font-family: var(--font-mono); font-size: 1.1rem;
	color: var(--accent-hi);
	transition: rotate 240ms var(--ease);
	flex: none;
}
.dh-faq details[open] summary::after { rotate: 45deg; }
.dh-faq details > p {
	margin: 0; padding: 0 1.25rem 1.15rem;
	font-size: 0.93rem; max-inline-size: none;
}

/* ---- Pre-footer CTA band ----------------------------------------------------- */

.dh-cta {
	text-align: center;
	padding-block: clamp(4rem, 9vw, 6.5rem);
	isolation: isolate;
}
.dh-cta::before {
	content: ""; position: absolute; inset: 0;
	background: radial-gradient(34rem 22rem at 50% 60%, oklch(45% 0.11 258 / 0.5), transparent 70%);
	z-index: -1; pointer-events: none;
}
.dh-cta h2 {
	font-size: clamp(1.9rem, 4.4vw, 3.1rem);
	text-transform: uppercase; line-height: 1.06;
	margin: 0 auto; max-inline-size: 22ch; text-wrap: balance;
}
.dh-cta p { max-inline-size: 46ch; margin: 1rem auto 0; }
.dh-cta .dh-hero__cta { margin-block-start: 1.8rem; }

/* ---- RUO note ------------------------------------------------------------------ */

.dh-ruo {
	border-block-start: 1px solid var(--d-line);
	padding-block: 1.5rem;
}
.dh-ruo p {
	font-family: var(--font-mono); font-size: 0.72rem; line-height: 1.6;
	letter-spacing: 0.02em;
	color: var(--d-mute);
	max-inline-size: none; text-align: center;
	margin: 0;
}

/* ---- Buttons in dark scope ------------------------------------------------------ */

.sps-dh .sps-btn--ghost {
	color: var(--d-ink);
	border-color: var(--d-line);
	background: transparent;
}
@media (hover: hover) {
	.sps-dh .sps-btn--ghost:hover { border-color: var(--d-ink); color: #fff; background: transparent; }
}

/* Dark-scope details */
.sps-dh .sps-ticker span { color: var(--d-mute); }
.dh-aff h2 {
	font-size: clamp(1.7rem, 3.6vw, 2.6rem);
	text-transform: uppercase; line-height: 1.08;
	margin: 0.7rem 0 0; text-wrap: balance;
}
.dh-aff__intro p { margin-block-start: 1rem; }
.dh-aff__intro .dh-hero__cta { justify-content: flex-start; margin-block-start: 1.6rem; }

/* --------------------------------------------------------------------------
   42. Dark home corrections
   Raw-HTML sections don't get WP's per-block alignfull margins, so the
   breakout is done here; the shared 5-column product rule is retuned for
   the dark grid; the spine stays off the dark page.
   -------------------------------------------------------------------------- */

body.sps-home { overflow-x: clip; }
body.sps-home .sps-spine { display: none; }

/* Full-bleed breakout for every dark-home band, independent of WP layout. */
.sps-dh .alignfull {
	inline-size: 100vw;
	max-inline-size: 100vw;
	margin-inline: calc(50% - 50vw);
}

/* The wrap owns the measure inside a band. */
.sps-dh .dh-wrap { inline-size: auto; }

/* Neutralise the light-theme grid breakout inside the dark page: the wrap
   already provides the wide measure, so the translate trick double-shifts. */
.sps-dh .wc-block-grid__products {
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	inline-size: 100% !important;
	max-inline-size: none;
	inset-inline-start: 0 !important;
	transform: none !important;
	margin-inline: 0;
}
@media (max-width: 980px) { .sps-dh .wc-block-grid__products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 440px)  { .sps-dh .wc-block-grid__products { grid-template-columns: minmax(0, 1fr) !important; } }

/* Footer inner keeps its side padding at every width. */
.sps-ftr__inner { padding-inline: clamp(1.1rem, 3.5vw, 2rem); }

/* Ticker stays on the dark elevation no matter which rule got there first. */
.sps-dh .sps-ticker { background: var(--d-elev) !important; border-color: var(--d-line) !important; }

/* The ticker's visible surface is its ::after (a legacy full-bleed shim);
   on the dark page that pseudo takes the elevation, not the light surface. */
.sps-dh .sps-ticker::after { background: var(--d-elev); border-block-color: var(--d-line); }

/* Sticky must ride the template-part wrapper: the inner header's containing
   block is exactly its own height, so sticky there has zero travel. */
header.wp-block-template-part {
	position: sticky;
	inset-block-start: 0;
	z-index: 60;
}

/* --------------------------------------------------------------------------
   43. Hero stage depth
   A perspective camera on the stage, satellites angled toward the centre at
   three depths (near = large and sharp, far = smaller, dimmer, blurred),
   pointer parallax layered on top by app.js. Everything still reads
   correctly as a static arrangement when motion is off.
   -------------------------------------------------------------------------- */

.dh-stage {
	perspective: 1100px;
	transform-style: preserve-3d;
}

/* Depth assignments: --dz drives parallax amplitude and scale, --ry angles
   each card toward the centre vial like objects on a curved shelf. */
.dh-stage__sat--1 { --dz: 0.9;  --ry: 18deg; }
.dh-stage__sat--2 { --dz: 0.4;  --ry: 24deg; }
.dh-stage__sat--3 { --dz: 0.7;  --ry: 12deg; }
.dh-stage__sat--4 { --dz: 0.9;  --ry: -18deg; }
.dh-stage__sat--5 { --dz: 0.4;  --ry: -24deg; }
.dh-stage__sat--6 { --dz: 0.7;  --ry: -12deg; }

.dh-stage__sat {
	transform: rotateY(var(--ry, 0deg)) scale(calc(0.68 + var(--dz, 0.6) * 0.35));
	will-change: transform;
	box-shadow:
		0 calc(10px + var(--dz, 0.6) * 16px) calc(18px + var(--dz, 0.6) * 22px) oklch(8% 0.03 255 / 0.55),
		0 0 0 1px var(--d-line) inset;
}

/* Atmosphere: the far row sits behind the focal plane. */
.dh-stage__sat--2,
.dh-stage__sat--5 {
	filter: blur(1.3px) brightness(0.82) saturate(0.9);
	z-index: 0;
}

/* Centre vial: floats on the individual translate property (so the JS tilt
   on transform composes with it), with a glass-floor reflection where the
   engine supports it and a deeper drop shadow everywhere else. */
.dh-stage__hero-vial {
	will-change: transform;
	animation: dh-core-float 7s ease-in-out infinite alternate;
	filter: drop-shadow(0 30px 46px oklch(6% 0.03 255 / 0.75));
	-webkit-box-reflect: below 4px linear-gradient(transparent 58%, oklch(100% 0 0 / 0.16));
}

@keyframes dh-core-float {
	from { translate: 0 -7px; }
	to   { translate: 0 9px; }
}

/* A slow specular pass over the focal area — light moving across glass. */
.dh-stage::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	background: linear-gradient(105deg, transparent 42%, oklch(100% 0 0 / 0.28) 50%, transparent 58%);
	background-size: 300% 100%;
	animation: dh-sheen 9s ease-in-out infinite;
	mask-image: radial-gradient(ellipse 16% 44% at 50% 55%, #000 55%, transparent 78%);
	-webkit-mask-image: radial-gradient(ellipse 16% 44% at 50% 55%, #000 55%, transparent 78%);
	mix-blend-mode: screen;
}

@keyframes dh-sheen {
	0%, 55%  { background-position: 120% 0; }
	85%, 100% { background-position: -30% 0; }
}

@media (prefers-reduced-motion: reduce) {
	.dh-stage::before { animation: none; opacity: 0; }
	.dh-stage__hero-vial { animation: none; }
}

/* --------------------------------------------------------------------------
   44. Stage v2 — pop, not perspective
   The angled-shelf look is gone: satellites face forward, spread wide, pop
   on hover and swap into the centre on click. Parallax stays translate-only.
   -------------------------------------------------------------------------- */

.dh-stage { perspective: none; }

.dh-stage__sat {
	/* Reset the v1 shelf: no rotateY, no depth blur, one size. */
	transform: none;
	filter: none;
	appearance: none;
	cursor: pointer;
	inline-size: clamp(80px, 10vw, 124px);
	padding: 10px;
	background: color-mix(in oklch, var(--d-elev) 85%, transparent);
	border: 1px solid var(--d-line);
	border-radius: 16px;
	box-shadow: 0 16px 32px oklch(8% 0.03 255 / 0.5);
	transition:
		scale 320ms cubic-bezier(0.34, 1.56, 0.64, 1),
		box-shadow 320ms var(--ease),
		border-color 320ms var(--ease),
		rotate 320ms var(--ease);
	will-change: transform, scale;
}
.dh-stage__sat img { inline-size: 100%; block-size: auto; display: block; }
.dh-stage__sat--2, .dh-stage__sat--5 { filter: none; z-index: 1; }

@media (hover: hover) {
	.dh-stage__sat:hover {
		scale: 1.16;
		rotate: 0deg;
		border-color: var(--accent-hi);
		box-shadow:
			0 24px 48px oklch(8% 0.03 255 / 0.65),
			0 0 0 1px var(--accent-hi),
			0 0 34px oklch(60% 0.16 20 / 0.35);
		z-index: 4;
	}
}
.dh-stage__sat:focus-visible {
	outline: 2px solid var(--accent-hi);
	outline-offset: 3px;
	scale: 1.12;
	z-index: 4;
}
.dh-stage__sat:active { scale: 1.05; }

/* Wider spread, taller stage: room to breathe. */
.dh-stage--live { min-block-size: clamp(320px, 46vw, 520px); }
.dh-stage__sat--1 { inset-block-start: 2%;  inset-inline-start: 5%;  rotate: -6deg; }
.dh-stage__sat--2 { inset-block-start: 44%; inset-inline-start: -1%; rotate: 4deg; }
.dh-stage__sat--3 { inset-block-end: 4%;    inset-inline-start: 17%; rotate: -3deg; }
.dh-stage__sat--4 { inset-block-start: 2%;  inset-inline-end: 5%;    rotate: 6deg; }
.dh-stage__sat--5 { inset-block-start: 44%; inset-inline-end: -1%;   rotate: -4deg; }
.dh-stage__sat--6 { inset-block-end: 4%;    inset-inline-end: 17%;   rotate: 3deg; }

.dh-stage__core { position: relative; z-index: 2; }
.dh-stage__core .dh-stage__hero-vial {
	inline-size: clamp(210px, 30vw, 330px);
	transition: opacity 240ms var(--ease), scale 240ms var(--ease);
}
.dh-stage--swapping .dh-stage__hero-vial { opacity: 0; scale: 0.94; }

.dh-stage__caption {
	position: absolute;
	inset-block-end: -4.5rem;
	inset-inline: 0;
	display: grid;
	justify-items: center;
	gap: 0.2rem;
	z-index: 2;
}
.dh-stage__caption b {
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 0.98rem;
	color: var(--d-ink);
	max-inline-size: 34ch;
	text-align: center;
}
.dh-stage__caption .sps-num { font-family: var(--font-mono); color: var(--accent-hi); font-size: 0.92rem; }
.dh-stage__caption a {
	font-family: var(--font-display);
	font-size: 0.75rem; font-weight: 600;
	letter-spacing: 0.09em; text-transform: uppercase;
	color: var(--d-mute); text-decoration: none;
	transition: color 200ms var(--ease);
}
.dh-stage__caption a:hover { color: #fff; }

/* Caption needs room below the stage. */
.dh-hero .dh-stage { margin-block-end: 5.5rem; }

@media (max-width: 760px) {
	.dh-stage__sat--2, .dh-stage__sat--5 { display: none; }
	.dh-stage--live { min-block-size: clamp(300px, 90vw, 420px); }
	.dh-stage__sat { inline-size: clamp(72px, 19vw, 96px); }
	.dh-stage__sat--3 { inset-inline-start: 8%; }
	.dh-stage__sat--6 { inset-inline-end: 8%; }
}

/* --------------------------------------------------------------------------
   45. Breathing room
   -------------------------------------------------------------------------- */

.dh-sec { padding-block: clamp(4.25rem, 9vw, 7.5rem); }
.dh-hero { padding-block: clamp(5rem, 11vw, 8.5rem) clamp(3rem, 6vw, 5rem); }
.dh-bento { gap: 1.4rem; }
.dh-cats { gap: 1.4rem; }
.sps-dh .wc-block-grid__products { gap: 1.4rem; }
.dh-chips { gap: 1rem; margin-block-start: clamp(2.75rem, 6vw, 4.25rem); }
.dh-sec__head { margin-block-end: clamp(2.25rem, 5vw, 3.5rem); }

/* --------------------------------------------------------------------------
   46. Motion kit — button sheen, staggered reveals, marquee pause affordance
   -------------------------------------------------------------------------- */

.sps-dh .sps-btn { overflow: hidden; }
.sps-dh .sps-btn::before {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(115deg, transparent 42%, oklch(100% 0 0 / 0.35) 50%, transparent 58%);
	background-size: 280% 100%;
	background-position: 120% 0;
	transition: background-position 700ms var(--ease);
	pointer-events: none;
}
@media (hover: hover) {
	.sps-dh .sps-btn:hover::before { background-position: -40% 0; }
}

/* Stagger the JS reveal fallback so grids cascade in. */
.sps-reveal:nth-child(2) { transition-delay: 70ms; }
.sps-reveal:nth-child(3) { transition-delay: 140ms; }
.sps-reveal:nth-child(4) { transition-delay: 210ms; }
.sps-reveal:nth-child(5) { transition-delay: 280ms; }
.sps-reveal:nth-child(6) { transition-delay: 350ms; }

/* --------------------------------------------------------------------------
   47. Dark shop — band, classic loop cards, ordering bar, pagination
   -------------------------------------------------------------------------- */

.dh-shopband {
	padding-block: clamp(3.5rem, 7vw, 5.5rem) clamp(2rem, 4vw, 3rem);
	position: relative;
	isolation: isolate;
}
.dh-shopband::before {
	content: ""; position: absolute; inset: 0;
	background: radial-gradient(40rem 22rem at 30% 0%, oklch(42% 0.1 258 / 0.5), transparent 70%);
	z-index: -1; pointer-events: none;
}
.dh-shopband h1 {
	font-size: clamp(2rem, 4.6vw, 3.4rem);
	text-transform: uppercase;
	line-height: 1.04;
	margin: 0.7rem 0 0;
	color: #fff;
}
.dh-shopband__lede { max-inline-size: 52ch; margin-block-start: 0.9rem; color: var(--d-mute); }

.dh-shoploop { padding-block-end: clamp(3.5rem, 7vw, 5.5rem); }

body.sps-dark .woocommerce-result-count { color: var(--d-mute); font-family: var(--font-mono); font-size: 0.8rem; }
body.sps-dark .woocommerce-ordering select {
	background: var(--d-elev);
	color: var(--d-ink);
	border: 1px solid var(--d-line);
	border-radius: 10px;
	padding: 0.5rem 2rem 0.5rem 0.85rem;
	font-family: var(--font-sans);
	font-size: 0.85rem;
}
body.sps-dark .woocommerce-notices-wrapper .woocommerce-message,
body.sps-dark .woocommerce-notices-wrapper .woocommerce-info {
	background: var(--d-elev); color: var(--d-ink); border-color: var(--d-line);
}

/* Classic loop grid */
body.sps-dark ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.4rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}
body.sps-dark ul.products::before,
body.sps-dark ul.products::after { display: none; }
body.sps-dark ul.products li.product {
	float: none !important;
	inline-size: auto !important;
	margin: 0 !important;
	display: grid;
	grid-template-rows: auto auto auto 1fr auto;
	background: linear-gradient(180deg, var(--d-elev2), var(--d-elev) 70%);
	border: 1px solid var(--d-line);
	border-radius: 16px;
	padding: 1.1rem 1.1rem 1.2rem;
	position: relative;
	transition: border-color 260ms var(--ease), translate 260ms var(--ease), box-shadow 260ms var(--ease);
}
@media (hover: hover) {
	body.sps-dark ul.products li.product:hover {
		border-color: oklch(55% 0.06 255 / 0.8);
		translate: 0 -5px;
		box-shadow: 0 22px 44px oklch(8% 0.03 255 / 0.5);
	}
}
body.sps-dark ul.products li.product > a.woocommerce-LoopProduct-link {
	display: contents;
	text-decoration: none;
}
body.sps-dark ul.products li.product img.attachment-woocommerce_thumbnail,
body.sps-dark ul.products li.product img.sps-loop-img-b {
	inline-size: 100%; block-size: auto;
	border-radius: 10px;
	background: oklch(93% 0.008 250);
	grid-row: 1; grid-column: 1;
}
body.sps-dark ul.products li.product img.sps-loop-img-b {
	position: absolute;
	inset-block-start: 1.1rem; inset-inline: 1.1rem;
	inline-size: calc(100% - 2.2rem);
	opacity: 0;
	transition: opacity 320ms var(--ease);
	pointer-events: none;
}
@media (hover: hover) {
	body.sps-dark ul.products li.product:hover img.sps-loop-img-b { opacity: 1; }
}
body.sps-dark ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--font-sans);
	font-size: 0.92rem; font-weight: 600; line-height: 1.35;
	color: var(--d-ink);
	padding: 0.85rem 0 0.3rem;
	margin: 0;
}
body.sps-dark ul.products li.product .price {
	font-family: var(--font-mono);
	font-size: 0.9rem;
	color: var(--accent-hi) !important;
	margin: 0 0 0.25rem;
}
body.sps-dark ul.products li.product .price * { color: inherit !important; }
.sps-loop-tier {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.02em;
	color: oklch(80% 0.16 150);
	background: oklch(35% 0.09 150 / 0.18);
	border: 1px solid oklch(50% 0.1 150 / 0.35);
	border-radius: 999px;
	padding: 0.22rem 0.6rem;
	margin-block-end: 0.7rem;
	justify-self: start;
}
.sps-loop-tier .woocommerce-Price-amount { color: inherit; }

/* Qty stepper + button row */
.sps-loop-qty {
	display: inline-grid;
	grid-template-columns: 2rem 2.6rem 2rem;
	align-items: stretch;
	border: 1px solid var(--d-line);
	border-radius: 999px;
	overflow: hidden;
	margin-block-start: auto;
}
.sps-loop-qty__b {
	appearance: none; border: 0; cursor: pointer;
	background: transparent; color: var(--d-ink);
	font-size: 1rem; line-height: 1;
	transition: background-color 180ms var(--ease);
}
.sps-loop-qty__b:hover { background: oklch(30% 0.05 255 / 0.6); }
.sps-loop-qty input {
	appearance: textfield; -moz-appearance: textfield;
	border: 0; background: transparent;
	color: #fff; font-family: var(--font-mono); font-size: 0.85rem;
	text-align: center; inline-size: 100%;
	padding: 0.45rem 0;
}
.sps-loop-qty input::-webkit-outer-spin-button,
.sps-loop-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

body.sps-dark ul.products li.product .sps-loop-qty { grid-row: 5; grid-column: 1; justify-self: start; }
body.sps-dark ul.products li.product a.button,
body.sps-dark ul.products li.product .added_to_cart {
	grid-row: 5; grid-column: 1;
	justify-self: end;
	align-self: center;
	background: transparent;
	border: 1px solid var(--d-line);
	color: var(--d-ink);
	border-radius: 999px;
	font-family: var(--font-display); font-weight: 600;
	font-size: 0.72rem; letter-spacing: 0.07em; text-transform: uppercase;
	padding: 0.55rem 1rem;
	text-decoration: none;
	transition: background-color 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease);
}
body.sps-dark ul.products li.product .sps-loop-qty ~ a.button { max-inline-size: calc(100% - 7.4rem); }
@media (hover: hover) {
	body.sps-dark ul.products li.product a.button:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
}
body.sps-dark ul.products li.product .onsale {
	position: absolute; inset-block-start: 0.8rem; inset-inline-start: 0.8rem;
	background: var(--accent); color: #fff;
	font-family: var(--font-mono); font-size: 0.68rem;
	border-radius: 999px; padding: 0.25rem 0.6rem;
	z-index: 2;
}
body.sps-dark nav.woocommerce-pagination { margin-block-start: 2.5rem; text-align: center; }
body.sps-dark nav.woocommerce-pagination ul { display: inline-flex; gap: 0.4rem; border: 0; }
body.sps-dark nav.woocommerce-pagination li { border: 0; }
body.sps-dark nav.woocommerce-pagination li a,
body.sps-dark nav.woocommerce-pagination li span {
	display: grid; place-items: center;
	min-inline-size: 2.4rem; block-size: 2.4rem;
	border: 1px solid var(--d-line); border-radius: 10px;
	background: var(--d-elev); color: var(--d-ink);
	font-family: var(--font-mono); font-size: 0.85rem;
	transition: border-color 180ms var(--ease), background-color 180ms var(--ease);
}
body.sps-dark nav.woocommerce-pagination li span.current { background: var(--accent); border-color: var(--accent); color: #fff; }
body.sps-dark nav.woocommerce-pagination li a:hover { border-color: var(--accent-hi); }

@media (max-width: 980px) { body.sps-dark ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 440px)  { body.sps-dark ul.products { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   48. Dark single product
   -------------------------------------------------------------------------- */

body.sps-dark .sps-product { color: var(--d-ink); }
body.sps-dark .sps-product .product_title { color: #fff; }
body.sps-dark .sps-product .woocommerce-breadcrumb,
body.sps-dark .sps-product .woocommerce-breadcrumb a { color: var(--d-mute); }
body.sps-dark .sps-product .price { color: var(--accent-hi) !important; font-family: var(--font-mono); }
body.sps-dark .sps-product .price * { color: inherit !important; }
body.sps-dark .sps-product .woocommerce-product-details__short-description { color: var(--d-mute); }
body.sps-dark .sps-product .woocommerce-product-gallery img {
	border-radius: 14px;
	background: oklch(93% 0.008 250);
}
body.sps-dark .sps-product .flex-control-thumbs img {
	border-radius: 8px; opacity: 0.55; transition: opacity 200ms var(--ease);
}
body.sps-dark .sps-product .flex-control-thumbs img.flex-active,
body.sps-dark .sps-product .flex-control-thumbs img:hover { opacity: 1; }

body.sps-dark .sps-product form.cart .variations th,
body.sps-dark .sps-product form.cart .variations td { color: var(--d-ink); }
body.sps-dark .sps-product form.cart select {
	background: var(--d-elev); color: var(--d-ink);
	border: 1px solid var(--d-line); border-radius: 10px;
	padding: 0.55rem 2rem 0.55rem 0.85rem;
	font-family: var(--font-sans); font-size: 0.9rem;
}
body.sps-dark .sps-product form.cart .quantity .qty {
	background: var(--d-elev); color: #fff;
	border: 1px solid var(--d-line); border-radius: 10px;
	font-family: var(--font-mono);
	min-block-size: 2.9rem;
	inline-size: 4.4rem;
	text-align: center;
}
body.sps-dark .sps-product .single_add_to_cart_button {
	background: var(--accent); color: #fff; border: 0; border-radius: 999px;
	font-family: var(--font-display); font-weight: 700;
	letter-spacing: 0.07em; text-transform: uppercase;
	padding: 0.9rem 1.8rem;
	transition: background-color 200ms var(--ease), translate 200ms var(--ease);
}
body.sps-dark .sps-product .single_add_to_cart_button:hover {
	background: color-mix(in oklch, var(--accent) 84%, white);
	translate: 0 -2px;
}
body.sps-dark .sps-product .reset_variations { color: var(--d-mute); }
body.sps-dark .sps-product .product_meta,
body.sps-dark .sps-product .product_meta a { color: var(--d-mute); }
body.sps-dark .sps-product .product_meta a:hover { color: var(--accent-hi); }
body.sps-dark .sps-product .stock.in-stock { color: oklch(80% 0.16 150); font-family: var(--font-mono); font-size: 0.85rem; }
body.sps-dark .sps-product .stock.out-of-stock { color: var(--accent-hi); font-family: var(--font-mono); font-size: 0.85rem; }

body.sps-dark .sps-product .woocommerce-tabs ul.tabs { border-block-end: 1px solid var(--d-line); }
body.sps-dark .sps-product .woocommerce-tabs ul.tabs li {
	background: transparent; border: 0;
}
body.sps-dark .sps-product .woocommerce-tabs ul.tabs li a { color: var(--d-mute); }
body.sps-dark .sps-product .woocommerce-tabs ul.tabs li.active a { color: #fff; box-shadow: inset 0 -2px 0 var(--accent); }
body.sps-dark .sps-product .woocommerce-Tabs-panel,
body.sps-dark .sps-product .woocommerce-Tabs-panel p,
body.sps-dark .sps-product .woocommerce-Tabs-panel li { color: var(--d-mute); }
body.sps-dark .sps-product .woocommerce-Tabs-panel h2,
body.sps-dark .sps-product .woocommerce-Tabs-panel h3,
body.sps-dark .sps-product .woocommerce-Tabs-panel b { color: var(--d-ink); }
body.sps-dark .sps-product table.shop_attributes th,
body.sps-dark .sps-product table.shop_attributes td { border-color: var(--d-line); color: var(--d-mute); }
body.sps-dark .sps-product .related.products > h2,
body.sps-dark .sps-product .up-sells > h2 {
	color: #fff; text-transform: uppercase;
	font-size: clamp(1.4rem, 3vw, 2rem);
	margin-block: 3rem 0.5rem;
}
body.sps-dark .sps-product blockquote {
	border-inline-start: 3px solid var(--accent);
	background: var(--d-elev);
	border-radius: 0 10px 10px 0;
	padding: 0.9rem 1.1rem;
}

/* Volume pricing table, dark */
body.sps-dark .ewqp-wrap {
	background: var(--d-elev);
	border: 1px solid var(--d-line);
	border-radius: 12px;
	padding: 1rem 1.1rem;
}
body.sps-dark .ewqp-title { color: var(--d-ink); font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.8rem; }
body.sps-dark .ewqp-table th { color: var(--d-mute); }
body.sps-dark .ewqp-table td { color: var(--d-ink); border-color: var(--d-line); font-family: var(--font-mono); font-size: 0.85rem; }
body.sps-dark .ewqp-table .ewqp-col-save, 
body.sps-dark .ewqp-table td:last-child { color: oklch(80% 0.16 150); }
.ewqp-wrap.is-empty { display: none; }

/* --------------------------------------------------------------------------
   49. Blog cards
   -------------------------------------------------------------------------- */

.dh-blogq { padding-block-end: clamp(3.5rem, 7vw, 5.5rem); }
.dh-post {
	background: linear-gradient(180deg, var(--d-elev2), var(--d-elev) 70%);
	border: 1px solid var(--d-line);
	border-radius: 16px;
	overflow: hidden;
	transition: border-color 260ms var(--ease), translate 260ms var(--ease);
}
@media (hover: hover) {
	.dh-post:hover { border-color: oklch(55% 0.06 255 / 0.8); translate: 0 -5px; }
}
.dh-post .wp-block-post-featured-image { margin: 0; }
.dh-post .wp-block-post-featured-image img { display: block; inline-size: 100%; }
.dh-post__date {
	font-family: var(--font-mono); font-size: 0.72rem;
	letter-spacing: 0.06em; color: var(--accent-hi);
	padding: 1rem 1.25rem 0;
	margin: 0;
}
.dh-post__title { font-size: 1.15rem; line-height: 1.25; padding: 0.4rem 1.25rem 0; margin: 0; }
.dh-post__title a { color: var(--d-ink); text-decoration: none; }
.dh-post__title a:hover { color: #fff; }
.dh-post .wp-block-post-excerpt { padding: 0.5rem 1.25rem 1.25rem; margin: 0; }
.dh-post .wp-block-post-excerpt p { font-size: 0.9rem; color: var(--d-mute); margin: 0; }
.dh-post .wp-block-post-excerpt__more-link { color: var(--accent-hi); text-decoration: none; font-family: var(--font-display); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.07em; }
.dh-noposts { text-align: center; padding-block: 4rem; display: grid; gap: 1.2rem; justify-items: center; }
.dh-pagenav { justify-content: center; padding-block: 2rem; }
.dh-pagenav a, .dh-pagenav .page-numbers { color: var(--d-ink); }

body.sps-dark .sps-blog h1 { color: #fff; }

/* Dark scope base: every sps-dark page gets the dark canvas, no spine. */
body.sps-dark { background: var(--d-base); color: var(--d-ink); overflow-x: clip; }
body.sps-dark .sps-spine { display: none; }
body.sps-dark .woocommerce-breadcrumb { color: var(--d-mute); }
body.sps-dark .woocommerce-breadcrumb a { color: var(--d-mute); }

/* Nav links stay legible over every surface. */
.sps-nav a:not(.sps-nav__cta) { color: var(--d-ink); }
.sps-nav a:not(.sps-nav__cta):hover { color: #fff; }

/* --------------------------------------------------------------------------
   50. Creative kit — grain, bracket labels, ghost words, mega statement,
   scroll manifesto, outlined marquee. Reference language: keytom /
   404damned / razed, translated into the SPS navy-and-crimson identity.
   -------------------------------------------------------------------------- */

/* Film grain across every dark page: one inline SVG, 5% opacity. */
body.sps-dark::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	pointer-events: none;
	opacity: 0.05;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 160px 160px;
}

/* Bracketed terminal eyebrows on dark surfaces. */
.sps-dh .sps-eyebrow::before { content: "[ "; color: var(--accent-hi); }
.sps-dh .sps-eyebrow::after  { content: " ]"; color: var(--accent-hi); }
.sps-dh .sps-eyebrow { letter-spacing: 0.22em; }

/* Ghost word floating behind a section: content comes from data-ghost. */
.dh-sec[data-ghost] { position: relative; overflow: clip; }
.dh-sec[data-ghost]::before {
	content: attr(data-ghost);
	position: absolute;
	inset-block-start: 0.5rem;
	inset-inline-end: -2rem;
	z-index: 0;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(6rem, 17vw, 15rem);
	line-height: 1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: transparent;
	-webkit-text-stroke: 1px oklch(45% 0.05 255 / 0.35);
	pointer-events: none;
	user-select: none;
}
.dh-sec[data-ghost] > .dh-wrap { position: relative; z-index: 1; }
@supports (animation-timeline: view()) {
	.dh-sec[data-ghost]::before {
		animation: dh-ghost-drift linear both;
		animation-timeline: view();
	}
	@keyframes dh-ghost-drift {
		from { translate: 6rem 0; }
		to   { translate: -6rem 0; }
	}
}

/* Scroll manifesto: words start muted and light up in sequence. */
.dh-manifesto { padding-block: clamp(5rem, 11vw, 9rem); }
.dh-manifesto p {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(1.55rem, 3.6vw, 2.9rem);
	line-height: 1.28;
	text-transform: uppercase;
	letter-spacing: 0.015em;
	max-inline-size: 24ch;
	margin: 0;
}
.dh-manifesto .w {
	color: oklch(38% 0.04 255);
	transition: color 240ms var(--ease);
}
.dh-manifesto .w.lit { color: var(--d-ink); }
.dh-manifesto .w.lit.hot { color: var(--accent-hi); }

/* Mega statement: three stacked words — solid, crimson, outline. */
.dh-mega { display: grid; gap: 0; margin: 0 0 1.4rem; }
.dh-mega span {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(3rem, 9.5vw, 7.5rem);
	line-height: 0.98;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	display: block;
}
.dh-mega span:nth-child(1) { color: #fff; }
.dh-mega span:nth-child(2) { color: var(--accent-hi); }
.dh-mega span:nth-child(3) {
	color: transparent;
	-webkit-text-stroke: 1.5px oklch(85% 0.02 255 / 0.85);
}
.dh-cta { text-align: start; }
.dh-cta .dh-hero__cta { justify-content: flex-start; }
.dh-cta p { max-inline-size: 46ch; }

/* Marquee: bigger, alternating solid and outline entries. */
.sps-dh .sps-ticker span {
	font-size: clamp(1rem, 2vw, 1.5rem);
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: 0.08em;
}
.sps-dh .sps-ticker span:nth-child(even) {
	color: transparent;
	-webkit-text-stroke: 1px oklch(70% 0.03 255 / 0.7);
}

/* Hero core scrub: the centre vial grows slightly as you scroll past. */
@supports (animation-timeline: scroll()) {
	.dh-stage__core { 
		animation: dh-core-scrub linear both;
		animation-timeline: scroll();
		animation-range: 0 60vh;
	}
	@keyframes dh-core-scrub {
		from { scale: 1; }
		to   { scale: 1.12; }
	}
}

/* Bracket eyebrows: fully replace the legacy dash decoration on dark. */
.sps-dh .sps-eyebrow::before,
.sps-dh .sps-eyebrow::after {
	display: inline;
	inline-size: auto;
	block-size: auto;
	background: none;
	border: 0;
	margin: 0 0.35em 0 0;
	vertical-align: baseline;
	position: static;
	transform: none;
}
.sps-dh .sps-eyebrow::after { margin: 0 0 0 0.35em; }

/* Mega CTA text sits on the same left edge as the statement. */
.dh-cta p { margin-inline: 0; }

/* --------------------------------------------------------------------------
   51. GSAP hand-off — when choreography runs, the CSS motion system yields.
   -------------------------------------------------------------------------- */

body.has-gsap .sps-reveal {
	opacity: 1;
	transform: none;
	translate: none;
	animation: none !important;
	transition: none !important;
}
body.has-gsap .dh-stage__sat { animation: none; }
body.has-gsap .dh-stage__core { animation: none; }
body.has-gsap .dh-sec[data-ghost]::before {
	animation: none;
	translate: var(--ghost-x, 0) 0;
}
body.has-gsap .dh-manifesto .w { transition: none; }

/* Split-word hero title: each word masks its own rise. */
.dh-hero h1 .hw { display: inline-block; overflow: clip; vertical-align: bottom; }
.dh-hero h1 .hw i { display: inline-block; font-style: normal; will-change: transform; }

/* Cursor pair — hidden on touch by JS gating; blend keeps it visible on any surface. */
.sps-cursor-dot,
.sps-cursor-ring {
	position: fixed;
	inset-block-start: 0;
	inset-inline-start: 0;
	pointer-events: none;
	z-index: 2147483200;
	border-radius: 50%;
	translate: -50% -50%;
}
.sps-cursor-dot {
	inline-size: 7px;
	block-size: 7px;
	background: var(--accent-hi);
}
.sps-cursor-ring {
	inline-size: 38px;
	block-size: 38px;
	border: 1.5px solid oklch(85% 0.03 255 / 0.8);
	opacity: 0.5;
	mix-blend-mode: difference;
}

/* --------------------------------------------------------------------------
   52. Brand lockup, hero shield watermark, stage v3, reticle cursor
   -------------------------------------------------------------------------- */

/* Header brand: shield mark plus a crisp type wordmark that stays legible. */
.sps-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	text-decoration: none;
}
.sps-brand__mark {
	inline-size: 42px;
	block-size: auto;
	filter: drop-shadow(0 2px 10px oklch(60% 0.12 255 / 0.55));
}
.sps-brand__word {
	display: grid;
	line-height: 1.05;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.82rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--d-ink);
	white-space: nowrap;
}
.sps-brand__word b {
	font-weight: 600;
	font-size: 0.62rem;
	letter-spacing: 0.34em;
	color: var(--accent-hi);
}
@media (max-width: 560px) { .sps-brand__word { display: none; } }

/* Hero watermark: the shield looms behind the headline. */
.dh-hero .dh-wrap { position: relative; }
.dh-hero .dh-wrap::before {
	content: "";
	position: absolute;
	inset-block-start: clamp(-4rem, -6vw, -2rem);
	inset-inline-start: 50%;
	translate: -50% 0;
	inline-size: clamp(300px, 40vw, 560px);
	aspect-ratio: 732 / 776;
	background: url("img/shield.png") center / contain no-repeat;
	opacity: 0.14;
	filter: saturate(1.2) drop-shadow(0 0 60px oklch(55% 0.12 255 / 0.5));
	mask-image: linear-gradient(180deg, #000 55%, transparent 92%);
	-webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 92%);
	pointer-events: none;
	z-index: 0;
}
.dh-hero .dh-wrap > * { position: relative; z-index: 1; }

/* Stage v3: resting satellites sit back; the hovered one lights up hard. */
.dh-stage--live .dh-stage__sat {
	opacity: 0.82;
	filter: saturate(0.9) brightness(0.92);
	transition:
		opacity 280ms var(--ease),
		filter 280ms var(--ease),
		scale 320ms cubic-bezier(0.34, 1.56, 0.64, 1),
		box-shadow 320ms var(--ease),
		border-color 320ms var(--ease),
		rotate 320ms var(--ease);
}
@media (hover: hover) {
	.dh-stage--live:hover .dh-stage__sat { opacity: 0.55; }
	.dh-stage--live .dh-stage__sat:hover {
		opacity: 1;
		filter: saturate(1.15) brightness(1.12);
		scale: 1.3;
		rotate: 0deg;
		border-color: var(--accent-hi);
		background: color-mix(in oklch, var(--d-elev2) 92%, white);
		box-shadow:
			0 30px 60px oklch(8% 0.03 255 / 0.7),
			0 0 0 1px var(--accent-hi),
			0 0 48px oklch(60% 0.16 20 / 0.45);
		z-index: 5;
	}
}
.dh-stage--live .dh-stage__sat:focus-visible { opacity: 1; filter: none; }

/* Larger centerpiece. */
.dh-stage__core .dh-stage__hero-vial { inline-size: clamp(250px, 34vw, 400px); }
.dh-stage--live { min-block-size: clamp(340px, 50vw, 580px); }

/* Reticle cursor: crosshair ring with tick marks plus a mono label. */
.sps-cursor-ring {
	inline-size: 44px;
	block-size: 44px;
	border: 1px solid oklch(85% 0.03 255 / 0.75);
	opacity: 0.55;
	mix-blend-mode: normal;
}
.sps-cursor-ring::before,
.sps-cursor-ring::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	background: oklch(85% 0.03 255 / 0.8);
}
.sps-cursor-ring::before { inline-size: 1px; block-size: 10px; }
.sps-cursor-ring::after  { inline-size: 10px; block-size: 1px; }
.sps-cursor-ring::before { clip-path: polygon(0 0, 100% 0, 100% 32%, 0 32%, 0 68%, 100% 68%, 100% 100%, 0 100%); }
.sps-cursor-ring::after  { clip-path: polygon(0 0, 32% 0, 32% 100%, 0 100%, 68% 0, 100% 0, 100% 100%, 68% 100%); }
.sps-cursor-label {
	position: fixed;
	inset-block-start: 0;
	inset-inline-start: 0;
	translate: -50% calc(-50% - 38px);
	pointer-events: none;
	z-index: 2147483201;
	font-family: var(--font-mono);
	font-size: 0.62rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--accent-hi);
	background: color-mix(in oklch, var(--d-base) 88%, transparent);
	border: 1px solid var(--d-line);
	border-radius: 999px;
	padding: 0.22rem 0.6rem;
	opacity: 0;
	scale: 0.8;
	transition: opacity 180ms var(--ease), scale 180ms var(--ease);
}
.sps-cursor-label.is-on { opacity: 1; scale: 1; }
.dh-hero .dh-wrap::before { translate: -50% var(--mark-y, 0); }

/* --------------------------------------------------------------------------
   53. Footer v2 — roomy index, bracket headers, arrow hovers, and the
   giant clipped wordmark riding the very bottom of every page.
   -------------------------------------------------------------------------- */

.sps-ftr2 {
	position: relative;
	background:
		radial-gradient(50rem 24rem at 85% 0%, oklch(30% 0.07 258 / 0.55), transparent 70%),
		var(--d-base);
	color: var(--d-ink);
	border-block-start: 1px solid var(--d-line);
	overflow: clip;
	isolation: isolate;
}
.sps-ftr2__wrap {
	max-inline-size: var(--wp--style--global--wide-size, 1180px);
	margin-inline: auto;
	padding: clamp(3.5rem, 7vw, 6rem) clamp(1.1rem, 3.5vw, 2rem) clamp(1.25rem, 3vw, 2rem);
	position: relative;
	z-index: 1;
}
.sps-ftr2__top {
	display: grid;
	grid-template-columns: minmax(240px, 1.2fr) 2.4fr;
	gap: clamp(2rem, 6vw, 5rem);
	padding-block-end: clamp(2.5rem, 5vw, 4rem);
	border-block-end: 1px solid var(--d-line);
}
.sps-ftr2__brand { display: grid; gap: 1rem; align-content: start; justify-items: start; }
.sps-ftr2__brand .sps-brand__mark { inline-size: 46px; }
.sps-ftr2__tag {
	font-family: var(--font-display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 1.05rem;
	color: #fff;
	margin: 0.25rem 0 0;
}
.sps-ftr2__note { font-size: 0.85rem; color: var(--d-mute); max-inline-size: 30ch; margin: 0; }
.sps-ftr2__pay { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.sps-ftr2__pay span {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	color: var(--d-ink);
	border: 1px solid var(--d-line);
	background: color-mix(in oklch, var(--d-elev) 80%, transparent);
	border-radius: 999px;
	padding: 0.32rem 0.75rem;
}

.sps-ftr2__cols {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1.25rem, 3vw, 2.5rem);
}
.sps-ftr2__col h4 {
	font-family: var(--font-mono);
	font-weight: 500;
	font-size: 0.7rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--accent-hi);
	margin: 0 0 1.1rem;
}
.sps-ftr2__col h4::before { content: "[ "; }
.sps-ftr2__col h4::after  { content: " ]"; }
.sps-ftr2__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.65rem; }
.sps-ftr2__col a {
	position: relative;
	color: var(--d-ink);
	text-decoration: none;
	font-size: 0.92rem;
	transition: color 200ms var(--ease), padding-inline-start 240ms var(--ease);
}
.sps-ftr2__col a::before {
	content: "→";
	position: absolute;
	inset-inline-start: -2px;
	opacity: 0;
	color: var(--accent-hi);
	translate: -8px 0;
	transition: opacity 200ms var(--ease), translate 240ms var(--ease);
}
@media (hover: hover) {
	.sps-ftr2__col a:hover { color: #fff; padding-inline-start: 1.15rem; }
	.sps-ftr2__col a:hover::before { opacity: 1; translate: 0 0; }
}

.sps-ftr2__bar {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	padding-block-start: 1.25rem;
	font-family: var(--font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.05em;
	color: var(--d-mute);
}
.sps-ftr2__ruo { color: oklch(60% 0.1 20); }

/* The giant wordmark: outline stroke, clipped at the page's bottom edge. */
.sps-ftr2__mega {
	position: relative;
	z-index: 0;
	font-family: var(--font-display);
	font-weight: 700;
	text-transform: uppercase;
	white-space: nowrap;
	text-align: center;
	line-height: 0.72;
	font-size: clamp(4rem, 12.5vw, 11.5rem);
	letter-spacing: 0.03em;
	color: transparent;
	-webkit-text-stroke: 1px oklch(45% 0.05 255 / 0.4);
	margin-block-start: clamp(1rem, 2.5vw, 2rem);
	margin-block-end: -0.18em;
	pointer-events: none;
	user-select: none;
	will-change: transform;
}

/* --------------------------------------------------------------------------
   54. Mobile experience — dark nav overlay, comfortable targets, footer
   collapse, stage and type scale tuning under 760px.
   -------------------------------------------------------------------------- */

/* Hamburger and close icons: light on the dark bar. */
.sps-nav .wp-block-navigation__responsive-container-open,
.sps-nav .wp-block-navigation__responsive-container-close {
	color: var(--d-ink);
}
.sps-nav .wp-block-navigation__responsive-container-open svg,
.sps-nav .wp-block-navigation__responsive-container-close svg {
	inline-size: 28px;
	block-size: 28px;
}

/* Full-screen dark menu with display-type links. */
.wp-block-navigation__responsive-container.has-modal-open {
	background: var(--d-base) !important;
	color: var(--d-ink);
}
.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__responsive-container-content {
	padding: 5.5rem 1.6rem 2rem;
}
.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation-item {
	border-block-end: 1px solid var(--d-line);
}
.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation-item__content {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.6rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--d-ink) !important;
	padding: 0.9rem 0;
	display: block;
}
.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation-item__content:active {
	color: var(--accent-hi) !important;
}
.wp-block-navigation__responsive-container-close {
	inset-block-start: 1.1rem !important;
	inset-inline-end: 1.1rem !important;
}

@media (max-width: 760px) {
	.sps-ftr2__top { grid-template-columns: 1fr; gap: 2.25rem; }
	.sps-ftr2__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
	.sps-ftr2__col a { font-size: 1rem; padding-block: 0.15rem; }
	.sps-ftr2__bar { flex-direction: column; gap: 0.4rem; }
	.sps-ftr2__mega { font-size: 15.5vw; }

	/* Comfortable tap targets on shop cards. */
	body.sps-dark ul.products li.product a.button { padding: 0.7rem 1.1rem; }
	.sps-loop-qty { grid-template-columns: 2.4rem 2.8rem 2.4rem; }
	.sps-loop-qty__b { min-block-size: 2.6rem; }

	/* Type scale trims so the big set pieces fit small screens. */
	.dh-mega span { font-size: clamp(2.2rem, 12vw, 3.4rem); }
	.dh-manifesto p { font-size: clamp(1.25rem, 5.6vw, 1.7rem); max-inline-size: none; }
	.dh-sec[data-ghost]::before { font-size: 24vw; opacity: 0.7; }
	.dh-hero .dh-wrap::before { inline-size: 78vw; opacity: 0.11; }
	.dh-stage__core .dh-stage__hero-vial { inline-size: clamp(210px, 62vw, 300px); }
	.dh-hero .dh-stage { margin-block-end: 6rem; }
}

/* Mobile menu: a backdrop-filtered ancestor turns position:fixed into a
   local trap, so the filter stands down while the modal is open, and the
   overlay is pinned to the full viewport explicitly. */
body.has-modal-open header.wp-block-template-part,
body.has-modal-open .sps-nav,
body.has-modal-open .sps-nav__inner {
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	filter: none !important;
	transform: none !important;
}
.wp-block-navigation__responsive-container.is-menu-open {
	position: fixed !important;
	inset: 0 !important;
	background: var(--d-base) !important;
	z-index: 100000;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding: 5.5rem 1.6rem 2rem !important;
	inline-size: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	inline-size: 100%;
	display: grid;
	gap: 0;
}

/* The open-menu class lives on the container, not body, so release the
   trapping ancestors via :has(). transform:none !important also beats
   any inline transform written by the motion layer. */
header.wp-block-template-part:has(.is-menu-open),
.sps-nav:has(.is-menu-open),
.sps-nav__inner:has(.is-menu-open) {
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	filter: none !important;
	transform: none !important;
	translate: none !important;
}

/* Menu rows: big, left-aligned index style. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-content: start;
	justify-items: stretch;
}
.wp-block-navigation__responsive-container.is-menu-open li.wp-block-navigation-item {
	inline-size: 100%;
	border-block-end: 1px solid var(--d-line);
}
.wp-block-navigation__responsive-container.is-menu-open a.wp-block-navigation-item__content {
	display: block !important;
	inline-size: 100%;
	text-align: start !important;
	font-family: var(--font-display) !important;
	font-size: 1.7rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none !important;
	color: var(--d-ink) !important;
	padding: 1rem 0 !important;
}

/* --------------------------------------------------------------------------
   55. Feedback round — visible constellation, admin-bar offset, brand glow,
   glow-orb cursor, card spotlights, touch feedback, orbit ring, progress.
   -------------------------------------------------------------------------- */

/* Logged-in admin bar overlaps the sticky header: offset it. */
body.admin-bar header.wp-block-template-part { inset-block-start: 32px; }
@media (max-width: 782px) {
	body.admin-bar header.wp-block-template-part { inset-block-start: 46px; }
}

/* Constellation v4: satellites are FULLY visible at rest. Siblings dim
   only when one of them is actually hovered. */
.dh-stage--live .dh-stage__sat {
	opacity: 1;
	filter: none;
	background: color-mix(in oklch, var(--d-elev2) 88%, white);
	box-shadow:
		0 14px 34px oklch(8% 0.03 255 / 0.55),
		0 0 0 1px oklch(55% 0.06 255 / 0.35),
		0 0 22px oklch(55% 0.1 255 / 0.22);
}
@media (hover: hover) {
	.dh-stage--live:hover .dh-stage__sat { opacity: 1; }
	.dh-stage--live:has(.dh-stage__sat:hover) .dh-stage__sat:not(:hover) {
		opacity: 0.62;
		filter: saturate(0.85) brightness(0.9);
	}
}

/* Slow orbit ring ties the constellation together and adds depth. */
.dh-stage--live::before {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	inline-size: min(72%, 640px);
	aspect-ratio: 1;
	margin: 0;
	translate: -50% -50%;
	border: 1px dashed oklch(45% 0.06 255 / 0.35);
	border-radius: 50%;
	animation: dh-orbit 90s linear infinite;
	pointer-events: none;
}
@keyframes dh-orbit { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { .dh-stage--live::before { animation: none; } }

/* Brand shield: glows on hover and press. */
.sps-brand__mark { transition: filter 320ms var(--ease), scale 220ms var(--ease); }
@media (hover: hover) {
	.sps-brand:hover .sps-brand__mark {
		filter:
			drop-shadow(0 0 10px oklch(65% 0.12 255 / 0.9))
			drop-shadow(0 0 22px oklch(62% 0.19 20 / 0.7));
		scale: 1.06;
	}
}
.sps-brand:active .sps-brand__mark {
	scale: 0.94;
	filter:
		drop-shadow(0 0 14px oklch(70% 0.2 20 / 1))
		drop-shadow(0 0 30px oklch(65% 0.12 255 / 0.8));
}

/* Glow orb: a soft light source trailing the pointer, screen-blended so
   it genuinely illuminates the dark surface beneath it. */
.sps-cursor-glow {
	position: fixed;
	inset-block-start: 0;
	inset-inline-start: 0;
	inline-size: 240px;
	block-size: 240px;
	translate: -50% -50%;
	pointer-events: none;
	z-index: 2147482900;
	border-radius: 50%;
	background: radial-gradient(circle,
		oklch(72% 0.17 20 / 0.5) 0%,
		oklch(60% 0.12 255 / 0.32) 30%,
		oklch(50% 0.1 258 / 0.12) 55%,
		transparent 72%);
	filter: blur(14px);
	mix-blend-mode: screen;
	opacity: 0.75;
	transition: opacity 300ms var(--ease);
}

/* Card spotlight: a light pool tracks the pointer inside each card. */
.dh-card, .dh-cat, .dh-post,
body.sps-dark ul.products li.product,
.sps-dh .wc-block-grid__product {
	position: relative;
}
.dh-card::after, .dh-cat::after, .dh-post::after,
body.sps-dark ul.products li.product::after,
.sps-dh .wc-block-grid__product::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	opacity: 0;
	transition: opacity 350ms var(--ease);
	background:
		radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%),
			oklch(70% 0.14 20 / 0.14), transparent 55%),
		radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%),
			oklch(65% 0.1 255 / 0.12), transparent 62%);
	z-index: 1;
}
@media (hover: hover) {
	.dh-card:hover::after, .dh-cat:hover::after, .dh-post:hover::after,
	body.sps-dark ul.products li.product:hover::after,
	.sps-dh .wc-block-grid__product:hover::after { opacity: 1; }
	.dh-card:hover, .dh-cat:hover {
		border-color: oklch(60% 0.14 20 / 0.55);
		box-shadow:
			0 24px 60px oklch(8% 0.03 255 / 0.6),
			0 0 0 1px oklch(60% 0.14 20 / 0.35),
			0 0 44px oklch(60% 0.15 20 / 0.16);
	}
}

/* Touch feedback: presses feel physical on every interactive surface. */
.sps-btn:active, .sps-nav__cta:active { scale: 0.95; }
.dh-card:active, .dh-cat:active, .dh-post:active { scale: 0.985; }
.dh-stage__sat:active { scale: 1.18 !important; border-color: var(--accent-hi); }
body.sps-dark ul.products li.product a.button:active,
.sps-dh .wc-block-grid__product .add_to_cart_button:active { scale: 0.94; }
.is-tapped {
	box-shadow:
		0 0 0 2px var(--accent-hi),
		0 0 34px oklch(62% 0.18 20 / 0.5) !important;
	transition: box-shadow 120ms var(--ease);
}

/* Scroll progress: a hairline of crimson across the very top. */
.sps-progress {
	position: fixed;
	inset-block-start: 0;
	inset-inline-start: 0;
	block-size: 2px;
	inline-size: 100%;
	transform-origin: 0 50%;
	scale: 0 1;
	background: linear-gradient(90deg, var(--accent-hi), oklch(70% 0.12 255));
	z-index: 2147483100;
	pointer-events: none;
}
body.admin-bar .sps-progress { inset-block-start: 32px; }

/* Primary CTA breathes softly at idle. */
@media (prefers-reduced-motion: no-preference) {
	.dh-hero__cta .sps-btn:not(.sps-btn--ghost) { animation: sps-breathe 4.5s var(--ease) infinite; }
	@keyframes sps-breathe {
		0%, 100% { box-shadow: 0 8px 26px oklch(50% 0.17 20 / 0.35); }
		50%      { box-shadow: 0 8px 40px oklch(58% 0.2 20 / 0.6); }
	}
}

/* --------------------------------------------------------------------------
   56. Jitter-proof satellite hover: the button (hit area) never changes
   size — only the vial image inside scales. Hover geometry stays fixed,
   so the hover state cannot flicker no matter how the pointer moves.
   -------------------------------------------------------------------------- */
.dh-stage--live .dh-stage__sat,
.dh-stage--live .dh-stage__sat:hover {
	scale: none !important;
	rotate: none;
}
.dh-stage--live .dh-stage__sat img {
	transition: scale 300ms cubic-bezier(0.34, 1.4, 0.64, 1), filter 260ms var(--ease);
	will-change: transform;
}
@media (hover: hover) {
	.dh-stage--live .dh-stage__sat:hover {
		opacity: 1;
		border-color: var(--accent-hi);
		background: color-mix(in oklch, var(--d-elev2) 90%, white);
		box-shadow:
			0 30px 60px oklch(8% 0.03 255 / 0.7),
			0 0 0 1px var(--accent-hi),
			0 0 48px oklch(60% 0.16 20 / 0.45);
		z-index: 5;
	}
	.dh-stage--live .dh-stage__sat:hover img {
		scale: 1.34;
		filter: saturate(1.15) brightness(1.12);
	}
}
.dh-stage--live .dh-stage__sat:active { scale: none !important; }
.dh-stage--live .dh-stage__sat:active img { scale: 1.2; }

/* --------------------------------------------------------------------------
   57. Motion architecture rebuild.

   Every animator owns a private custom property and the browser composes
   them into one transform. Nothing writes `transform` directly, so the
   float, the parallax, the magnetic hover and the entrance can never
   overwrite one another — which was the whole cause of the shaking.
   -------------------------------------------------------------------------- */

.dh-stage--live .dh-stage__sat {
	--px: 0;    /* pointer parallax x        */
	--py: 0;    /* pointer parallax y        */
	--fx: 0;    /* idle float x              */
	--fy: 0;    /* idle float y              */
	--fr: 0;    /* idle float rotation       */
	--mx: 0;    /* magnetic pull x           */
	--my: 0;    /* magnetic pull y           */
	--lift: 0;  /* hover lift                */

	transform:
		translate3d(
			calc((var(--px) + var(--fx) + var(--mx)) * 1px),
			calc((var(--py) + var(--fy) + var(--my) - var(--lift)) * 1px),
			0
		);
	rotate: calc((var(--rot0, 0) + var(--fr)) * 1deg);
	scale: none !important;
	animation: none !important;
	/* Only presentation transitions here — never geometry. */
	transition:
		box-shadow 320ms var(--ease),
		border-color 320ms var(--ease),
		background-color 320ms var(--ease);
	will-change: transform;
}
.dh-stage--live .dh-stage__sat--1 { --rot0: -6; }
.dh-stage--live .dh-stage__sat--2 { --rot0:  4; }
.dh-stage--live .dh-stage__sat--3 { --rot0: -3; }
.dh-stage--live .dh-stage__sat--4 { --rot0:  6; }
.dh-stage--live .dh-stage__sat--5 { --rot0: -4; }
.dh-stage--live .dh-stage__sat--6 { --rot0:  3; }

/* The vial image scales; the button's hit area never does. */
.dh-stage--live .dh-stage__sat img {
	transition: scale 380ms cubic-bezier(0.33, 1.3, 0.5, 1), filter 320ms var(--ease);
}

@media (hover: hover) {
	.dh-stage--live .dh-stage__sat:hover {
		border-color: var(--accent-hi);
		background: color-mix(in oklch, var(--d-elev2) 88%, white);
		box-shadow:
			0 40px 70px oklch(6% 0.03 255 / 0.75),
			0 0 0 1px var(--accent-hi),
			0 0 60px oklch(62% 0.18 20 / 0.5),
			0 0 120px oklch(60% 0.13 255 / 0.3);
		z-index: 6;
	}
	.dh-stage--live .dh-stage__sat:hover img {
		scale: 1.28;
		filter: saturate(1.18) brightness(1.16) drop-shadow(0 12px 22px oklch(6% 0.03 255 / 0.6));
	}
	/* Everything else recedes so the hovered vial owns the stage. */
	.dh-stage--live:has(.dh-stage__sat:hover) .dh-stage__sat:not(:hover) {
		opacity: 0.5;
		filter: saturate(0.75) brightness(0.85) blur(0.6px);
	}
	.dh-stage--live .dh-stage__sat { transition: box-shadow 320ms var(--ease), border-color 320ms var(--ease), opacity 320ms var(--ease), filter 320ms var(--ease); }
}

/* --------------------------------------------------------------------------
   58. Product / content cards — 3D tilt with a travelling glare, in the
   spirit of the reference pen.
   -------------------------------------------------------------------------- */

.dh-card, .dh-cat, .dh-post,
body.sps-dark ul.products li.product,
.sps-dh .wc-block-grid__product {
	--rx: 0;
	--ry: 0;
	--tz: 0;
	transform:
		perspective(1000px)
		rotateX(calc(var(--rx) * 1deg))
		rotateY(calc(var(--ry) * 1deg))
		translateZ(calc(var(--tz) * 1px));
	transform-style: preserve-3d;
	transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 380ms var(--ease), border-color 380ms var(--ease);
	will-change: transform;
}
.dh-card.is-tilting, .dh-cat.is-tilting, .dh-post.is-tilting,
body.sps-dark ul.products li.product.is-tilting,
.sps-dh .wc-block-grid__product.is-tilting {
	transition: box-shadow 380ms var(--ease), border-color 380ms var(--ease);
}

/* Travelling glare sheet that follows the pointer across the card face. */
.dh-card::before, .dh-cat::before, .dh-post::before,
body.sps-dark ul.products li.product::before,
.sps-dh .wc-block-grid__product::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	z-index: 2;
	opacity: 0;
	transition: opacity 380ms var(--ease);
	background: linear-gradient(
		105deg,
		transparent 35%,
		oklch(92% 0.02 255 / 0.13) 47%,
		oklch(96% 0.03 20 / 0.2) 50%,
		oklch(92% 0.02 255 / 0.13) 53%,
		transparent 65%
	);
	background-size: 260% 260%;
	background-position: calc(var(--gx, 50%) * 1) calc(var(--gy, 50%) * 1);
}
@media (hover: hover) {
	.dh-card:hover::before, .dh-cat:hover::before, .dh-post:hover::before,
	body.sps-dark ul.products li.product:hover::before,
	.sps-dh .wc-block-grid__product:hover::before { opacity: 1; }
	body.sps-dark ul.products li.product:hover,
	.sps-dh .wc-block-grid__product:hover {
		box-shadow:
			0 30px 70px oklch(6% 0.03 255 / 0.6),
			0 0 0 1px oklch(60% 0.14 20 / 0.4),
			0 0 50px oklch(60% 0.15 20 / 0.15);
	}
}

/* --------------------------------------------------------------------------
   59. Card transform composition — the reveal, the tilt and the glare each
   own a variable, exactly like the stage. No animator writes `transform`,
   so cards can never be left holding a stale 3D matrix (which is what
   knocked the grids out of alignment).
   -------------------------------------------------------------------------- */

.dh-card, .dh-cat, .dh-post,
body.sps-dark ul.products li.product,
.sps-dh .wc-block-grid__product {
	--rx: 0;   /* tilt X   */
	--ry: 0;   /* tilt Y   */
	--revy: 0; /* reveal   */
	transform:
		translate3d(0, calc(var(--revy) * 1px), 0)
		perspective(1100px)
		rotateX(calc(var(--rx) * 1deg))
		rotateY(calc(var(--ry) * 1deg));
	transform-style: flat;
	transform-origin: 50% 50%;
	backface-visibility: hidden;
}

/* Grid items align to the top of their row and keep equal heights. */
body.sps-dark ul.products,
.sps-dh .wc-block-grid__products {
	align-items: stretch;
}
body.sps-dark ul.products li.product,
.sps-dh .wc-block-grid__product {
	align-self: stretch;
	margin-block: 0;
}

/* Pagination clears the tilting cards. */
.woocommerce-pagination {
	position: relative;
	z-index: 4;
	margin-block-start: clamp(2.5rem, 5vw, 4rem);
	clear: both;
}

/* --------------------------------------------------------------------------
   60. Mobile: product rails swipe horizontally with snap, and the tilt is
   disabled on touch (it needs a pointer to make sense).
   -------------------------------------------------------------------------- */

@media (max-width: 760px) {
	.dh-card, .dh-cat, .dh-post,
	body.sps-dark ul.products li.product,
	.sps-dh .wc-block-grid__product {
		transform: translate3d(0, calc(var(--revy) * 1px), 0);
	}

	/* Best sellers and category tiles become swipeable rails. */
	.sps-dh .wc-block-grid__products,
	.dh-cats {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 74%;
		grid-template-columns: none;
		gap: 0.9rem;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 1.1rem;
		padding-inline: 1.1rem;
		padding-block-end: 0.75rem;
		margin-inline: calc(-1 * clamp(1.1rem, 3.5vw, 2rem));
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.sps-dh .wc-block-grid__products::-webkit-scrollbar,
	.dh-cats::-webkit-scrollbar { display: none; }
	.sps-dh .wc-block-grid__product,
	.dh-cats .dh-cat {
		scroll-snap-align: start;
		margin: 0;
		inline-size: auto;
		max-inline-size: none;
	}

	/* A hint that there is more to the right. */
	.sps-dh .dh-best .dh-wrap,
	.dh-cats-wrap { position: relative; }
	.sps-swipe-hint {
		display: flex;
		align-items: center;
		gap: 0.4rem;
		font-family: var(--font-mono);
		font-size: 0.66rem;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: var(--d-mute);
		margin-block-start: 0.9rem;
	}
	.sps-swipe-hint::after {
		content: "";
		inline-size: 22px;
		block-size: 1px;
		background: linear-gradient(90deg, var(--accent-hi), transparent);
		animation: sps-swipe-nudge 1.8s var(--ease) infinite;
	}
	@keyframes sps-swipe-nudge {
		0%, 100% { transform: translateX(0); opacity: 0.5; }
		50%      { transform: translateX(7px); opacity: 1; }
	}
}

/* Mobile rails: WooCommerce block grid sets flex-basis/width per column on
   the items themselves, which leaves the first card stacked under the rest.
   Override the item sizing, not just the container. */
@media (max-width: 760px) {
	.sps-dh .wc-block-grid__products {
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: stretch;
	}
	.sps-dh .wc-block-grid__products > .wc-block-grid__product {
		flex: 0 0 74% !important;
		inline-size: 74% !important;
		max-inline-size: 74% !important;
		min-inline-size: 74% !important;
		margin: 0 !important;
		padding: 0;
	}
	.dh-cats {
		display: flex !important;
		flex-wrap: nowrap !important;
	}
	.dh-cats > .dh-cat {
		flex: 0 0 78% !important;
		inline-size: 78% !important;
		max-inline-size: 78% !important;
	}
	/* Shop archive grid stays a two-up grid (browsing, not a rail). */
	body.sps-dark ul.products {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 0.85rem;
	}
	body.sps-dark ul.products li.product {
		inline-size: auto !important;
		max-inline-size: none !important;
		margin: 0 !important;
		float: none !important;
	}
}

/* --------------------------------------------------------------------------
   61. Inner page shell — every non-home page gets the same dark band header,
   readable measure and card language as the home page.
   -------------------------------------------------------------------------- */

.sps-pagehead {
	position: relative;
	padding-block: clamp(4.5rem, 9vw, 8rem) clamp(2rem, 4vw, 3rem);
	background:
		radial-gradient(46rem 22rem at 18% 0%, oklch(32% 0.08 258 / 0.65), transparent 70%),
		var(--d-base);
	border-block-end: 1px solid var(--d-line);
	overflow: clip;
}
.sps-pagehead__wrap {
	max-inline-size: var(--wp--style--global--wide-size, 1180px);
	margin-inline: auto;
	padding-inline: clamp(1.1rem, 3.5vw, 2rem);
	position: relative;
	z-index: 1;
}
.sps-pagehead h1 {
	font-family: var(--font-display);
	font-weight: 700;
	text-transform: uppercase;
	font-size: clamp(2.1rem, 6vw, 4.4rem);
	line-height: 0.98;
	letter-spacing: 0.01em;
	color: #fff;
	margin: 0.4rem 0 0;
	max-inline-size: 20ch;
}
.sps-pagehead__lede {
	color: var(--d-mute);
	max-inline-size: 58ch;
	margin-block-start: 1.1rem;
	font-size: 1.02rem;
}
.sps-pagehead__ghost {
	position: absolute;
	inset-inline-end: -1rem;
	inset-block-start: 34%;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(5rem, 15vw, 13rem);
	line-height: 1;
	text-transform: uppercase;
	color: transparent;
	-webkit-text-stroke: 1px oklch(45% 0.05 255 / 0.28);
	pointer-events: none;
	user-select: none;
	z-index: 0;
}

/* Body copy on inner pages. */
body.sps-dark .sps-pagebody {
	max-inline-size: var(--wp--style--global--wide-size, 1180px);
	margin-inline: auto;
	padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.1rem, 3.5vw, 2rem) clamp(4rem, 8vw, 7rem);
}
body.sps-dark .sps-pagebody > *,
body.sps-dark .entry-content > * { max-inline-size: 74ch; }
body.sps-dark .sps-pagebody h2,
body.sps-dark .entry-content h2 {
	font-family: var(--font-display);
	text-transform: uppercase;
	font-size: clamp(1.5rem, 3.2vw, 2.3rem);
	margin-block: 2.4rem 0.9rem;
	color: #fff;
}
body.sps-dark .sps-pagebody h3,
body.sps-dark .entry-content h3 {
	font-family: var(--font-display);
	text-transform: uppercase;
	font-size: clamp(1.15rem, 2.2vw, 1.5rem);
	margin-block: 1.8rem 0.6rem;
	color: var(--d-ink);
}
body.sps-dark .sps-pagebody p,
body.sps-dark .entry-content p { color: var(--d-mute); line-height: 1.75; }
body.sps-dark .sps-pagebody li,
body.sps-dark .entry-content li { color: var(--d-mute); line-height: 1.7; }
body.sps-dark .sps-pagebody a,
body.sps-dark .entry-content a { color: var(--accent-hi); text-underline-offset: 3px; }
body.sps-dark .sps-pagebody table,
body.sps-dark .entry-content table {
	inline-size: 100%;
	border-collapse: collapse;
	margin-block: 1.5rem;
	font-size: 0.94rem;
}
body.sps-dark .sps-pagebody th,
body.sps-dark .sps-pagebody td,
body.sps-dark .entry-content th,
body.sps-dark .entry-content td {
	border: 1px solid var(--d-line);
	padding: 0.7rem 0.9rem;
	text-align: start;
	color: var(--d-mute);
}
body.sps-dark .sps-pagebody th,
body.sps-dark .entry-content th {
	background: var(--d-elev);
	color: var(--d-ink);
	font-family: var(--font-mono);
	font-size: 0.76rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Forms across contact, account and checkout. */
body.sps-dark input[type="text"],
body.sps-dark input[type="email"],
body.sps-dark input[type="url"],
body.sps-dark input[type="date"],
body.sps-dark input[type="tel"],
body.sps-dark input[type="password"],
body.sps-dark input[type="number"],
body.sps-dark input[type="search"],
body.sps-dark textarea,
body.sps-dark select {
	background: var(--d-elev);
	border: 1px solid var(--d-line);
	color: var(--d-ink);
	border-radius: 10px;
	padding: 0.7rem 0.85rem;
	font: inherit;
	inline-size: 100%;
	transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
body.sps-dark input:focus,
body.sps-dark textarea:focus,
body.sps-dark select:focus {
	outline: none;
	border-color: var(--accent-hi);
	box-shadow: 0 0 0 3px oklch(60% 0.16 20 / 0.22);
}
body.sps-dark label { color: var(--d-ink); font-size: 0.92rem; }

/* --------------------------------------------------------------------------
   62. My Account
   -------------------------------------------------------------------------- */

body.sps-dark .woocommerce-account .woocommerce {
	max-inline-size: var(--wp--style--global--wide-size, 1180px);
	margin-inline: auto;
	padding: clamp(2rem, 5vw, 3.5rem) clamp(1.1rem, 3.5vw, 2rem) clamp(4rem, 8vw, 6rem);
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
}
body.sps-dark .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.35rem;
}
body.sps-dark .woocommerce-MyAccount-navigation a {
	display: block;
	padding: 0.75rem 1rem;
	border: 1px solid var(--d-line);
	border-radius: 12px;
	background: var(--d-elev);
	color: var(--d-ink);
	text-decoration: none;
	font-family: var(--font-mono);
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	transition: border-color 200ms var(--ease), color 200ms var(--ease), background-color 200ms var(--ease);
}
body.sps-dark .woocommerce-MyAccount-navigation li.is-active a,
body.sps-dark .woocommerce-MyAccount-navigation a:hover {
	border-color: var(--accent-hi);
	color: #fff;
	background: color-mix(in oklch, var(--accent-hi) 16%, var(--d-elev));
}
body.sps-dark .woocommerce-MyAccount-content {
	background: var(--d-elev);
	border: 1px solid var(--d-line);
	border-radius: 18px;
	padding: clamp(1.2rem, 3.5vw, 2.2rem);
}
@media (min-width: 861px) {
	body.sps-dark .woocommerce-account .woocommerce {
		grid-template-columns: 260px minmax(0, 1fr);
		align-items: start;
	}
}
body.sps-dark .woocommerce-form-login,
body.sps-dark .woocommerce-form-register {
	background: var(--d-elev);
	border: 1px solid var(--d-line);
	border-radius: 18px;
	padding: clamp(1.3rem, 4vw, 2.2rem);
}
body.sps-dark .woocommerce-form-login__submit,
body.sps-dark .woocommerce-Button,
body.sps-dark .woocommerce-form-register__submit {
	background: var(--accent-hi);
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: 0.75rem 1.5rem;
	font-family: var(--font-display);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
}
body.sps-dark .woocommerce-account table.shop_table {
	background: transparent;
	border-radius: 12px;
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   63. Affiliate dashboard
   -------------------------------------------------------------------------- */

.sps-aff__head h2 {
	font-family: var(--font-display);
	text-transform: uppercase;
	font-size: clamp(1.5rem, 3.4vw, 2.2rem);
	margin: 0.3rem 0 1.4rem;
	color: #fff;
}
.sps-aff__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 0.8rem;
	margin-block-end: 1.4rem;
}
.sps-aff__stat {
	background: var(--d-elev2, var(--d-elev));
	border: 1px solid var(--d-line);
	border-radius: 14px;
	padding: 1rem 1.1rem;
	display: grid;
	gap: 0.2rem;
}
.sps-aff__stat b {
	font-family: var(--font-display);
	font-size: clamp(1.4rem, 3vw, 1.9rem);
	color: #fff;
	line-height: 1;
}
.sps-aff__stat span {
	font-family: var(--font-mono);
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--d-mute);
}
.sps-aff__stat--hi { border-color: oklch(60% 0.16 20 / 0.5); }
.sps-aff__stat--hi b { color: var(--accent-hi); }

.sps-aff__prog { margin-block-end: 1.6rem; }
.sps-aff__prog-bar {
	block-size: 6px;
	border-radius: 999px;
	background: var(--d-elev);
	border: 1px solid var(--d-line);
	overflow: hidden;
}
.sps-aff__prog-bar i {
	display: block;
	block-size: 100%;
	background: linear-gradient(90deg, var(--accent-hi), oklch(70% 0.12 255));
}
.sps-aff__prog p {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	color: var(--d-mute);
	margin: 0.5rem 0 0;
}

.sps-aff__link {
	background: var(--d-elev);
	border: 1px solid var(--d-line);
	border-radius: 16px;
	padding: 1.2rem;
	margin-block-end: 1.6rem;
}
.sps-aff__link h3, .sps-aff__cols h3 {
	font-family: var(--font-display);
	text-transform: uppercase;
	font-size: 1.05rem;
	margin: 0 0 0.8rem;
	color: var(--d-ink);
}
.sps-aff__copy { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.sps-aff__copy input {
	flex: 1 1 240px;
	font-family: var(--font-mono);
	font-size: 0.85rem;
}
.sps-aff__note { font-size: 0.82rem; color: var(--d-mute); margin: 0.7rem 0 0; }
.sps-aff__note b { color: var(--accent-hi); font-family: var(--font-mono); }
.sps-aff__share {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	flex-wrap: wrap;
	margin-block-start: 1rem;
}
.sps-aff__share span {
	font-family: var(--font-mono);
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--d-mute);
	margin-inline-end: 0.2rem;
}
.sps-aff__share .sps-btn { padding: 0.42rem 0.9rem; font-size: 0.75rem; }

.sps-aff__cols { display: grid; gap: 1.5rem; }
@media (min-width: 800px) { .sps-aff__cols { grid-template-columns: 1fr 1fr; } }
.sps-aff__table { inline-size: 100%; border-collapse: collapse; font-size: 0.88rem; }
.sps-aff__table th {
	text-align: start;
	font-family: var(--font-mono);
	font-size: 0.66rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--d-mute);
	border-block-end: 1px solid var(--d-line);
	padding: 0.5rem 0.4rem;
}
.sps-aff__table td {
	padding: 0.65rem 0.4rem;
	border-block-end: 1px solid var(--d-line);
	color: var(--d-ink);
}
.sps-aff__pill {
	font-family: var(--font-mono);
	font-size: 0.66rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border: 1px solid var(--d-line);
	border-radius: 999px;
	padding: 0.18rem 0.55rem;
	color: var(--d-mute);
}
.sps-aff__pill--paid { border-color: oklch(65% 0.15 150 / 0.5); color: oklch(75% 0.15 150); }
.sps-aff__empty { color: var(--d-mute); font-size: 0.9rem; }
.sps-aff-gate {
	background: var(--d-elev);
	border: 1px solid var(--d-line);
	border-radius: 16px;
	padding: clamp(1.3rem, 4vw, 2.2rem);
}
.sps-aff-gate h3 {
	font-family: var(--font-display);
	text-transform: uppercase;
	color: #fff;
	margin: 0.3rem 0 0.7rem;
}
.sps-aff-gate p { color: var(--d-mute); }

/* --------------------------------------------------------------------------
   64. Peptide calculator
   -------------------------------------------------------------------------- */

.sps-calc { margin-block: 0; }
.sps-calc__grid { display: grid; gap: clamp(1rem, 3vw, 1.8rem); }
@media (min-width: 940px) {
	.sps-calc__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: start; }
	.sps-calc__results { position: sticky; inset-block-start: 90px; }
}
.sps-calc__panel { display: grid; gap: 1rem; }
.sps-calc__block {
	background: var(--d-elev);
	border: 1px solid var(--d-line);
	border-radius: 18px;
	padding: clamp(1rem, 3vw, 1.5rem);
	display: grid;
	gap: 0.9rem;
	grid-template-columns: 1fr 1fr;
}
.sps-calc__block-head { grid-column: 1 / -1; }
.sps-calc__block-head h3 {
	font-family: var(--font-display);
	text-transform: uppercase;
	font-size: 1.2rem;
	margin: 0.2rem 0 0;
	color: #fff;
}
.sps-calc__field { display: grid; gap: 0.4rem; }
.sps-calc__field--full { grid-column: 1 / -1; }
.sps-calc__field > span {
	font-family: var(--font-mono);
	font-size: 0.68rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--d-mute);
}
.sps-calc__field > span i {
	text-transform: none;
	letter-spacing: 0;
	font-style: normal;
	opacity: 0.65;
}
.sps-calc__input {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	background: var(--d-base);
	border: 1px solid var(--d-line);
	border-radius: 10px;
	padding-inline: 0.7rem;
	transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.sps-calc__input:focus-within {
	border-color: var(--accent-hi);
	box-shadow: 0 0 0 3px oklch(60% 0.16 20 / 0.2);
}
.sps-calc__input input {
	border: 0 !important;
	background: transparent !important;
	padding-inline: 0 !important;
	font-family: var(--font-mono) !important;
	font-size: 1.05rem !important;
	color: #fff !important;
	box-shadow: none !important;
}
.sps-calc__input i, .sps-calc__input .pre {
	font-family: var(--font-mono);
	font-size: 0.8rem;
	color: var(--d-mute);
	font-style: normal;
}
.sps-calc__input select {
	border: 0 !important;
	background: transparent !important;
	color: var(--d-ink) !important;
	inline-size: auto !important;
	padding: 0.35rem 0 !important;
	font-family: var(--font-mono) !important;
	font-size: 0.85rem !important;
}
.sps-calc__chips { grid-column: 1 / -1; display: flex; gap: 0.4rem; flex-wrap: wrap; }
.sps-calc__chips button {
	font-family: var(--font-mono);
	font-size: 0.74rem;
	color: var(--d-ink);
	background: var(--d-base);
	border: 1px solid var(--d-line);
	border-radius: 999px;
	padding: 0.35rem 0.8rem;
	cursor: pointer;
	transition: border-color 180ms var(--ease), color 180ms var(--ease);
}
.sps-calc__chips button:hover { border-color: var(--accent-hi); color: #fff; }

.sps-calc__readout {
	background:
		radial-gradient(30rem 16rem at 70% 0%, oklch(34% 0.09 258 / 0.55), transparent 70%),
		var(--d-elev);
	border: 1px solid var(--d-line);
	border-radius: 20px;
	padding: clamp(1.2rem, 3.5vw, 2rem);
}
.sps-calc__big { text-align: center; margin-block-end: 0.5rem; }
.sps-calc__big span,
.sps-calc__big i {
	display: block;
	font-family: var(--font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--d-mute);
	font-style: normal;
}
.sps-calc__big b {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(3.4rem, 12vw, 5.6rem);
	line-height: 1;
	color: #fff;
	margin-block: 0.2rem;
	text-shadow: 0 0 40px oklch(60% 0.16 20 / 0.35);
}
.sps-calc__syringe { margin-block: 0.8rem 1.2rem; }
.sps-calc__syringe svg { inline-size: 100%; block-size: auto; }
.sps-calc__syringe .barrel { fill: var(--d-base); stroke: var(--d-line); stroke-width: 1.5; }
.sps-calc__syringe .plunger { fill: oklch(45% 0.03 255); }
.sps-calc__syringe .needle { stroke: oklch(60% 0.02 255); stroke-width: 3; }
.sps-calc__syringe .tick { stroke: oklch(58% 0.03 255 / 0.65); stroke-width: 1; }
.sps-calc__syringe .tick--major { stroke: oklch(75% 0.03 255); stroke-width: 1.4; }
.sps-calc__syringe .tick-label {
	fill: var(--d-mute);
	font-family: var(--font-mono);
	font-size: 11px;
}
.sps-calc__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: 0.7rem;
}
.sps-calc__stats div {
	background: var(--d-base);
	border: 1px solid var(--d-line);
	border-radius: 12px;
	padding: 0.7rem 0.8rem;
	display: grid;
	gap: 0.15rem;
}
.sps-calc__stats span {
	font-family: var(--font-mono);
	font-size: 0.64rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--d-mute);
}
.sps-calc__stats b { font-family: var(--font-mono); font-size: 1.02rem; color: #fff; }
.sps-calc__warn {
	margin: 1rem 0 0;
	padding: 0.8rem 0.95rem;
	border-radius: 12px;
	border: 1px solid oklch(60% 0.16 20 / 0.45);
	background: oklch(35% 0.09 20 / 0.25);
	color: oklch(88% 0.05 20);
	font-size: 0.88rem;
	line-height: 1.55;
}
.sps-calc__actions {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-block-start: 1rem;
}
.sps-calc__actions .sps-btn { font-size: 0.78rem; padding: 0.55rem 1.1rem; }
.sps-calc__presets { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; margin-block-start: 0.9rem; }
.sps-calc__presets > span {
	font-family: var(--font-mono);
	font-size: 0.66rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--d-mute);
}
.sps-calc__presets button {
	font-family: var(--font-mono);
	font-size: 0.74rem;
	color: var(--d-ink);
	background: var(--d-elev);
	border: 1px solid var(--d-line);
	border-radius: 999px;
	padding: 0.3rem 0.55rem 0.3rem 0.8rem;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}
.sps-calc__presets button i { font-style: normal; color: var(--d-mute); padding-inline: 0.25rem; }
.sps-calc__presets button i:hover { color: var(--accent-hi); }

.sps-calc__install {
	margin-block-start: clamp(1.5rem, 4vw, 2.5rem);
	background: linear-gradient(120deg, oklch(28% 0.08 258 / 0.7), var(--d-elev));
	border: 1px solid oklch(60% 0.14 255 / 0.4);
	border-radius: 18px;
	padding: clamp(1.1rem, 3vw, 1.6rem);
	display: flex;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}
.sps-calc__install h3 {
	font-family: var(--font-display);
	text-transform: uppercase;
	color: #fff;
	margin: 0.2rem 0 0.3rem;
	font-size: 1.15rem;
}
.sps-calc__install p { color: var(--d-mute); margin: 0; max-inline-size: 48ch; font-size: 0.92rem; }
.sps-calc__ios {
	margin-block-start: 1rem;
	color: var(--d-mute);
	font-size: 0.88rem;
	border: 1px dashed var(--d-line);
	border-radius: 12px;
	padding: 0.8rem 1rem;
}
.sps-calc__ios b { color: var(--d-ink); }

@media (max-width: 620px) {
	.sps-calc__block { grid-template-columns: 1fr; }
}
@media print {
	.sps-nav, .sps-ftr2, .sps-calc__actions, .sps-calc__install, .sps-calc__panel .sps-calc__chips,
	.sps-progress, .sps-cursor-dot, .sps-cursor-ring, .sps-cursor-glow, .sps-cursor-label { display: none !important; }
	body.sps-dark, .sps-calc__readout, .sps-calc__block { background: #fff !important; color: #000 !important; }
	.sps-calc__big b, .sps-calc__stats b, .sps-calc__block-head h3 { color: #000 !important; }
}

/* --------------------------------------------------------------------------
   65. Calculator layout fixes — an older calculator from the previous build
   also used .sps-calc as a grid, and raw HTML blocks sit inside the
   720px entry-content measure. Both are corrected here.
   -------------------------------------------------------------------------- */

/* The new calculator is a plain block; its inner grid does the layout. */
body.sps-dark .sps-calc[data-calc] {
	display: block;
	grid-template-columns: none;
	gap: 0;
	max-inline-size: none;
}

/* Full-bleed page sections escape the narrow content measure, exactly as
   the home page sections do. */
.entry-content > .sps-pagehead,
.entry-content > .sps-pagebody,
.wp-block-post-content > .sps-pagehead,
.wp-block-post-content > .sps-pagebody {
	inline-size: 100vw;
	max-inline-size: 100vw;
	margin-inline: calc(50% - 50vw);
}
.sps-pagebody--wide {
	max-inline-size: none;
}
.sps-pagebody--wide > * {
	max-inline-size: var(--wp--style--global--wide-size, 1180px);
	margin-inline: auto;
}
body.sps-dark .sps-pagebody--wide > .sps-calc { max-inline-size: 1180px; }

/* Guide copy under the tool keeps a readable measure. */
.sps-calc-guide {
	margin-block-start: clamp(3rem, 7vw, 5rem);
	max-inline-size: 74ch;
}
.sps-calc-guide h2, .sps-calc-guide h3 { color: #fff; }
.sps-calc-guide p { color: var(--d-mute); line-height: 1.75; }
.sps-calc-guide b { color: var(--d-ink); }
.sps-calc-ruo {
	margin-block-start: 2rem;
	border: 1px solid var(--d-line);
	border-inline-start: 3px solid var(--accent-hi);
	border-radius: 12px;
	padding: 1rem 1.2rem;
	background: var(--d-elev);
}
.sps-calc-ruo p { margin: 0; font-size: 0.9rem; }

/* The legacy number-input rule from the old calculator must not reach the
   new inputs. */
body.sps-dark .sps-calc[data-calc] .sps-calc__input input[type="number"] {
	inline-size: 100%;
	min-inline-size: 0;
	text-align: start;
	background: transparent;
	border: 0;
}

/* Pages that carry their own .sps-pagehead suppress the theme's default
   page title band (left over from the Elementor page template). */
body.sps-dark .entry-content:has(.sps-pagehead) ~ * .wp-block-post-title,
body.sps-dark main:has(.sps-pagehead) > .wp-block-post-title,
body.sps-dark main:has(.sps-pagehead) > .wp-block-group > .wp-block-post-title,
body.sps-dark .wp-site-blocks:has(.sps-pagehead) header + .wp-block-post-title {
	display: none;
}
body.sps-dark main:has(.sps-pagehead) > .wp-block-group:first-child:not(:has(.sps-pagehead)) {
	display: none;
}

/* Field borders inside the calculator come from the input wrapper only. */
body.sps-dark .sps-calc[data-calc] .sps-calc__field select {
	background: var(--d-base);
	border: 1px solid var(--d-line);
	border-radius: 10px;
	padding: 0.62rem 0.7rem;
	font-family: var(--font-mono);
	font-size: 0.9rem;
}
body.sps-dark .sps-calc[data-calc] .sps-calc__input { min-block-size: 46px; }

/* The template's own H1 is a direct child of main, and the page's custom
   head band lives further down inside the post content. */
body.sps-dark main.wp-block-group:has(.sps-pagehead) > h1.wp-block-post-title {
	display: none;
}
body.sps-has-head main > h1.wp-block-post-title,
body.sps-has-head h1.wp-block-post-title { display: none !important; }

/* --------------------------------------------------------------------------
   66. Sitewide dark completion — cart, checkout, notices, forms and the
   auto page shell, so every page carries the same system as the home.
   -------------------------------------------------------------------------- */

/* The auto shell mirrors the hand-built one. */
.sps-pagebody--auto { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(4rem, 8vw, 7rem); }
.sps-pagebody--auto .sps-pagebody__in {
	max-inline-size: var(--wp--style--global--wide-size, 1180px);
	margin-inline: auto;
	padding-inline: clamp(1.1rem, 3.5vw, 2rem);
}
.sps-pagebody--auto .sps-pagebody__in > *:not(.woocommerce):not(.alignfull) { max-inline-size: 74ch; }

/* Kill every trace of the old light theme's page chrome. */
body.sps-dark { background: var(--d-base); }
body.sps-dark::before { content: none !important; }
body.sps-dark .wp-site-blocks::before,
body.sps-dark .wp-site-blocks::after { content: none !important; }

/* Woo notices in the dark system. */
body.sps-dark .woocommerce-message,
body.sps-dark .woocommerce-info,
body.sps-dark .woocommerce-error,
body.sps-dark .wc-block-components-notice-banner {
	background: var(--d-elev);
	border: 1px solid var(--d-line);
	border-inline-start: 3px solid var(--accent-hi);
	border-radius: 12px;
	color: var(--d-ink);
	padding: 0.9rem 1.1rem;
}
body.sps-dark .woocommerce-message { border-inline-start-color: oklch(65% 0.15 150); }
body.sps-dark .woocommerce-message a,
body.sps-dark .woocommerce-info a { color: var(--accent-hi); }

/* Cart (classic and blocks). */
body.sps-dark table.cart,
body.sps-dark .wc-block-cart__main,
body.sps-dark .wc-block-components-sidebar .wc-block-components-panel,
body.sps-dark .cart_totals,
body.sps-dark .wc-block-cart-items {
	color: var(--d-ink);
}
body.sps-dark table.cart th,
body.sps-dark .cart_totals th { color: var(--d-mute); }
body.sps-dark table.cart td,
body.sps-dark table.cart th,
body.sps-dark .cart_totals td,
body.sps-dark .cart_totals th {
	border-color: var(--d-line) !important;
	background: transparent;
}
body.sps-dark .wc-block-components-quantity-selector {
	background: var(--d-elev);
	border: 1px solid var(--d-line);
	border-radius: 999px;
}
body.sps-dark .wc-block-components-quantity-selector input,
body.sps-dark .wc-block-components-quantity-selector button { color: var(--d-ink); background: transparent; }
body.sps-dark .wc-block-cart-item__product a,
body.sps-dark table.cart .product-name a { color: var(--d-ink); text-decoration: none; }
body.sps-dark .wc-block-components-product-price,
body.sps-dark .wc-block-components-totals-item__value,
body.sps-dark .wc-block-formatted-money-amount { color: #fff; font-family: var(--font-mono); }
body.sps-dark .wc-block-components-totals-wrapper,
body.sps-dark .wc-block-components-totals-item { border-color: var(--d-line); color: var(--d-ink); }
body.sps-dark .wc-block-cart-item__remove-link,
body.sps-dark table.cart a.remove { color: var(--d-mute); }
body.sps-dark .wc-block-components-sidebar-layout .wc-block-components-panel,
body.sps-dark .wc-block-components-card,
body.sps-dark .wc-block-components-order-summary {
	background: var(--d-elev);
	border: 1px solid var(--d-line);
	border-radius: 16px;
}

/* Checkout (blocks) */
body.sps-dark .wc-block-components-checkout-step,
body.sps-dark .wc-block-components-form .wc-block-components-text-input input,
body.sps-dark .wc-block-components-text-input input,
body.sps-dark .wc-block-components-combobox .components-combobox-control__input,
body.sps-dark .wc-block-components-select .components-custom-select-control__button {
	color: var(--d-ink);
}
body.sps-dark .wc-block-components-text-input input,
body.sps-dark .wc-block-components-combobox input,
body.sps-dark .wc-block-components-select select {
	background: var(--d-elev) !important;
	border: 1px solid var(--d-line) !important;
	border-radius: 10px !important;
}
body.sps-dark .wc-block-components-text-input label,
body.sps-dark .wc-block-components-checkout-step__heading,
body.sps-dark .wc-block-components-checkout-step__description,
body.sps-dark .wc-block-components-title { color: var(--d-ink); }
body.sps-dark .wc-block-components-radio-control__option {
	background: var(--d-elev);
	border: 1px solid var(--d-line);
	border-radius: 12px;
	color: var(--d-ink);
	margin-block-end: 0.5rem;
	padding: 0.85rem 1rem 0.85rem 2.6rem;
	transition: border-color 200ms var(--ease), background-color 200ms var(--ease);
}
body.sps-dark .wc-block-components-radio-control__option-checked {
	border-color: var(--accent-hi);
	background: color-mix(in oklch, var(--accent-hi) 10%, var(--d-elev));
}
body.sps-dark .wc-block-components-checkout-place-order-button {
	background: var(--accent-hi);
	color: #fff;
	border-radius: 999px;
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
body.sps-dark .wc-block-checkout__sidebar .wc-block-components-panel { background: var(--d-elev); }

/* Fluent Forms (contact page). */
body.sps-dark .fluentform .ff-el-input--label label { color: var(--d-ink); }
body.sps-dark .fluentform .ff-el-form-control {
	background: var(--d-elev);
	border: 1px solid var(--d-line);
	color: var(--d-ink);
	border-radius: 10px;
}
body.sps-dark .fluentform .ff-el-form-control:focus {
	border-color: var(--accent-hi);
	box-shadow: 0 0 0 3px oklch(60% 0.16 20 / 0.22);
}
body.sps-dark .fluentform .ff-btn-submit {
	background: var(--accent-hi) !important;
	border: 0 !important;
	border-radius: 999px !important;
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 0.8rem 1.7rem !important;
}

/* Policy pages: sticky auto table of contents. */
body.sps-policy .sps-pagebody__in { display: grid; gap: 2rem; }
@media (min-width: 980px) {
	body.sps-policy .sps-pagebody__in { grid-template-columns: 230px minmax(0, 1fr); align-items: start; }
	.sps-toc { position: sticky; inset-block-start: 100px; }
}
.sps-toc {
	background: var(--d-elev);
	border: 1px solid var(--d-line);
	border-radius: 14px;
	padding: 1rem 1.1rem;
	font-size: 0.85rem;
}
.sps-toc b {
	display: block;
	font-family: var(--font-mono);
	font-size: 0.66rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--accent-hi);
	margin-block-end: 0.6rem;
}
.sps-toc b::before { content: "[ "; }
.sps-toc b::after { content: " ]"; }
.sps-toc a {
	display: block;
	color: var(--d-mute);
	text-decoration: none;
	padding-block: 0.28rem;
	border-inline-start: 2px solid transparent;
	padding-inline-start: 0.6rem;
	margin-inline-start: -0.6rem;
	transition: color 180ms var(--ease), border-color 180ms var(--ease);
}
.sps-toc a:hover, .sps-toc a.is-here { color: #fff; border-inline-start-color: var(--accent-hi); }

/* 404 */
.sps-404 {
	min-block-size: 70vh;
	display: grid;
	place-content: center;
	text-align: center;
	padding: clamp(3rem, 8vw, 6rem) 1.2rem;
}
.sps-404 b {
	font-family: var(--font-display);
	font-size: clamp(6rem, 24vw, 15rem);
	line-height: 0.9;
	color: transparent;
	-webkit-text-stroke: 2px oklch(60% 0.1 255 / 0.7);
	display: block;
}
.sps-404 h1 {
	font-family: var(--font-display);
	text-transform: uppercase;
	color: #fff;
	margin: 1rem 0 0.5rem;
}
.sps-404 p { color: var(--d-mute); max-inline-size: 44ch; margin-inline: auto; }
.sps-404 .dh-hero__cta { justify-content: center; margin-block-start: 1.4rem; }

/* Split-word wrappers are semantic <i> tags; they must never italicise. */
.sps-pagehead h1 .hw { display: inline-block; overflow: clip; vertical-align: bottom; }
.sps-pagehead h1 .hw i { display: inline-block; font-style: normal; }
.sps-pagehead h1 { font-style: normal; }

/* With the component scope on body, guard the two rules that would
   misfire against Woo's own alignment classes. */
body.sps-dh .wc-block-components-sidebar-layout.alignwide { margin-inline: auto; }

/* Page shell containers: immune to WP layout-flow child rules. */
.sps-pagehead .sps-pagehead__wrap {
	inline-size: min(1180px, calc(100% - 2 * clamp(1.1rem, 3.5vw, 2rem))) !important;
	max-inline-size: none !important;
	margin-inline: auto !important;
	padding-inline: 0;
}
.sps-pagebody--auto .sps-pagebody__in {
	inline-size: min(1180px, calc(100% - 2 * clamp(1.1rem, 3.5vw, 2rem))) !important;
	margin-inline: auto !important;
	padding-inline: 0;
}

/* Full-bleed shells, unconditionally. */
.sps-pagehead.alignfull,
.sps-pagebody.alignfull,
main.sps-404 {
	inline-size: 100vw !important;
	max-inline-size: 100vw !important;
	margin-inline: calc(50% - 50vw) !important;
}

/* Contact + application layouts. */
.sps-split { display: grid; gap: clamp(1.2rem, 3vw, 2rem); align-items: start; }
@media (min-width: 920px) { .sps-split { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
.sps-infocards { display: grid; gap: 0.8rem; }
.sps-infocard {
	background: var(--d-elev);
	border: 1px solid var(--d-line);
	border-radius: 14px;
	padding: 1rem 1.15rem;
}
.sps-infocard b {
	display: block;
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #fff;
	margin-block-end: 0.25rem;
}
.sps-infocard p { margin: 0; color: var(--d-mute); font-size: 0.92rem; line-height: 1.6; }
.sps-infocard .mono { font-family: var(--font-mono); color: var(--accent-hi); font-size: 0.85rem; }
.sps-formcard {
	background: var(--d-elev);
	border: 1px solid var(--d-line);
	border-radius: 18px;
	padding: clamp(1.2rem, 3.5vw, 2rem);
}
.sps-steps { display: grid; gap: 0.9rem; counter-reset: step; }
@media (min-width: 860px) { .sps-steps { grid-template-columns: repeat(3, 1fr); } }
.sps-step {
	background: var(--d-elev);
	border: 1px solid var(--d-line);
	border-radius: 16px;
	padding: 1.2rem;
	position: relative;
}
.sps-step i {
	font-style: normal;
	font-family: var(--font-display);
	font-size: 2.4rem;
	color: transparent;
	-webkit-text-stroke: 1px oklch(60% 0.1 255 / 0.7);
	line-height: 1;
	display: block;
	margin-block-end: 0.5rem;
}
.sps-step b { display: block; font-family: var(--font-display); text-transform: uppercase; color: #fff; margin-block-end: 0.3rem; }
.sps-step p { margin: 0; color: var(--d-mute); font-size: 0.92rem; line-height: 1.6; }

/* Full-bleed section components inside a page shell are never prose:
   exempt them from the readable-measure cap and re-bleed them. */
body.sps-dark .sps-pagebody > .dh-sec,
body.sps-dark .sps-pagebody > .dh-manifesto,
body.sps-dark .sps-pagebody > .dh-cta,
body.sps-dark .sps-pagebody > .dh-aff,
body.sps-dark .sps-pagebody > .dh-ruo,
body.sps-dark .sps-pagebody > .sps-ticker {
	max-inline-size: 100vw !important;
	inline-size: 100vw !important;
	margin-inline: calc(50% - 50vw) !important;
}

/* --------------------------------------------------------------------------
   67. Affiliate application form
   -------------------------------------------------------------------------- */
.sps-apply { display: grid; gap: 1rem; }
.sps-apply__row { display: grid; gap: 1rem; }
@media (min-width: 640px) { .sps-apply__row { grid-template-columns: 1fr 1fr; } }
.sps-apply__field { display: grid; gap: 0.4rem; }
.sps-apply__field > span {
	font-family: var(--font-mono);
	font-size: 0.68rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--d-mute);
}
.sps-apply__field > span i { text-transform: none; letter-spacing: 0; font-style: normal; opacity: 0.65; }
.sps-apply__hp { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); margin: -1px; }
.sps-apply__agree {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	font-size: 0.88rem;
	color: var(--d-mute);
}
.sps-apply__agree input {
	inline-size: 1.1rem;
	block-size: 1.1rem;
	margin-block-start: 0.15rem;
	accent-color: var(--accent-hi);
	flex: 0 0 auto;
}
.sps-apply__agree a { color: var(--accent-hi); }
.sps-apply .sps-btn { justify-self: start; }
.sps-apply-done {
	border: 1px solid oklch(65% 0.15 150 / 0.5);
	background: oklch(30% 0.06 150 / 0.25);
	border-radius: 16px;
	padding: clamp(1.2rem, 3.5vw, 2rem);
}
.sps-apply-done h3 { font-family: var(--font-display); text-transform: uppercase; color: #fff; margin: 0.3rem 0 0.6rem; }
.sps-apply-done p { color: var(--d-mute); margin: 0; }
.sps-apply-done a { color: var(--accent-hi); }

/* Reactive grain field behind the hero. */
.sps-field {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	z-index: 0;
	pointer-events: none;
	opacity: 0.85;
}
.dh-hero { position: relative; }
.dh-hero > .dh-wrap { position: relative; z-index: 1; }

/* Field variants: hosts gain stacking context; content rides above. */
.sps-pagehead, .dh-cta, main.sps-404 { position: relative; }
.sps-pagehead > .sps-field, .dh-cta > .sps-field, main.sps-404 > .sps-field {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}
.sps-pagehead__wrap, .dh-cta .dh-wrap { position: relative; z-index: 1; }
.sps-field--ribbon { opacity: 0.7; }
.sps-field--dust { opacity: 0.6; }

/* An .alignfull child is a full-bleed section by declaration — the prose
   measure must never cap one, anywhere. This also restores the home
   page sections, which are .entry-content children on the front page. */
body.sps-dark .entry-content > .alignfull,
body.sps-dark .wp-block-post-content > .alignfull,
body.sps-dark .sps-pagebody > .alignfull {
	max-inline-size: 100vw !important;
	inline-size: 100vw !important;
	margin-inline: calc(50% - 50vw) !important;
}

/* --------------------------------------------------------------------------
   68. Motion pass 2 + shop wow: category pills, lot chips, manifesto
   word-fill, velocity skew, image curtains, back-to-top, mobile toolbar.
   -------------------------------------------------------------------------- */

/* Category pills under the shop band. */
.sps-catpills {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin: 0 0 1.8rem;
}
.sps-catpills__pill {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-family: var(--font-mono);
	font-size: 0.74rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--d-ink);
	text-decoration: none;
	border: 1px solid var(--d-line);
	background: var(--d-elev);
	border-radius: 999px;
	padding: 0.5rem 0.95rem;
	transition: border-color 200ms var(--ease), color 200ms var(--ease), background-color 200ms var(--ease);
	white-space: nowrap;
}
.sps-catpills__pill b {
	font-weight: 500;
	color: var(--d-mute);
	font-size: 0.68rem;
}
.sps-catpills__pill.is-on,
.sps-catpills__pill:hover {
	border-color: var(--accent-hi);
	color: #fff;
	background: color-mix(in oklch, var(--accent-hi) 14%, var(--d-elev));
}
.sps-catpills__pill.is-on b { color: #fff; }
@media (max-width: 760px) {
	.sps-catpills {
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		margin-inline: calc(-1 * clamp(1.1rem, 3.5vw, 2rem));
		padding-inline: clamp(1.1rem, 3.5vw, 2rem);
		padding-block-end: 0.5rem;
		scrollbar-width: none;
	}
	.sps-catpills::-webkit-scrollbar { display: none; }
	.sps-catpills__pill { scroll-snap-align: start; }
}

/* Lot-verified chip on product cards. */
body.sps-dark ul.products li.product,
.sps-dh .wc-block-grid__product { overflow: clip; }
.sps-lotchip {
	position: absolute;
	inset-block-start: 0.7rem;
	inset-inline-start: 0.7rem;
	z-index: 3;
	font-family: var(--font-mono);
	font-size: 0.6rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: oklch(85% 0.05 150);
	background: oklch(30% 0.06 150 / 0.55);
	border: 1px solid oklch(60% 0.12 150 / 0.5);
	border-radius: 999px;
	padding: 0.24rem 0.6rem;
	backdrop-filter: blur(4px);
	pointer-events: none;
}
.sps-lotchip::before {
	content: "";
	display: inline-block;
	inline-size: 5px;
	block-size: 5px;
	border-radius: 50%;
	background: oklch(70% 0.17 150);
	margin-inline-end: 0.35rem;
	vertical-align: 1px;
	box-shadow: 0 0 6px oklch(70% 0.17 150);
}

/* Manifesto scroll fill: words start ghosted, ink in as you scroll. */
.dh-manifesto p .mw { color: oklch(40% 0.04 255); transition: none; }
.dh-manifesto p .mw.is-lit { color: var(--d-ink); }
.dh-manifesto p .mw--hot.is-lit { color: var(--accent-hi); }

/* Velocity skew rides the existing card transform variables. */
body.sps-dark ul.products li.product,
.sps-dh .wc-block-grid__product,
.dh-post {
	transform:
		translate3d(0, calc(var(--revy, 0) * 1px), 0)
		skewY(calc(var(--vskew, 0) * 1deg))
		perspective(1100px)
		rotateX(calc(var(--rx, 0) * 1deg))
		rotateY(calc(var(--ry, 0) * 1deg));
}

/* Featured image curtain reveal on blog cards and post heroes. */
.dh-post img, .sps-dh .wp-post-image {
	clip-path: inset(calc(var(--curtain, 0) * 1%) 0 0 0);
}

/* Back-to-top: progress ring pill. */
.sps-top {
	position: fixed;
	inset-block-end: 1.2rem;
	inset-inline-end: 1.2rem;
	z-index: 90000;
	inline-size: 52px;
	block-size: 52px;
	border-radius: 50%;
	border: 0;
	cursor: pointer;
	display: grid;
	place-items: center;
	color: var(--d-ink);
	background:
		radial-gradient(circle at center, var(--d-elev) 58%, transparent 59%),
		conic-gradient(var(--accent-hi) calc(var(--p, 0) * 1%), var(--d-line) 0);
	opacity: 0;
	translate: 0 16px;
	pointer-events: none;
	transition: opacity 300ms var(--ease), translate 300ms var(--ease);
}
.sps-top.is-on { opacity: 1; translate: 0 0; pointer-events: auto; }
.sps-top svg { inline-size: 18px; block-size: 18px; }
.sps-top:active { scale: 0.9; }
@media (max-width: 760px) {
	.sps-top { inset-block-end: 1rem; inset-inline-end: 1rem; inline-size: 46px; block-size: 46px; }
}

/* Mobile shop toolbar: result count + ordering, sticky under the nav. */
@media (max-width: 760px) {
	body.sps-dark.post-type-archive-product .woocommerce-result-count,
	body.sps-dark.tax-product_cat .woocommerce-result-count { display: none; }
	body.sps-dark form.woocommerce-ordering {
		position: sticky;
		inset-block-start: 64px;
		z-index: 50;
		margin: 0 0 1rem;
	}
	body.sps-dark form.woocommerce-ordering select {
		inline-size: 100%;
		background: color-mix(in oklch, var(--d-elev) 92%, transparent);
		backdrop-filter: blur(8px);
		font-family: var(--font-mono);
		font-size: 0.8rem;
	}
}

/* Mega CTA letters get a rise-and-sweep entrance. */
.dh-mega span .ml { display: inline-block; }

/* Age gate */
.sps-agegate {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: grid;
	place-items: center;
	padding: 1.2rem;
	background: color-mix(in oklch, var(--d-base) 88%, black);
	backdrop-filter: blur(10px);
}
.sps-agegate__card {
	max-inline-size: 460px;
	text-align: center;
	background: var(--d-elev);
	border: 1px solid var(--d-line);
	border-radius: 20px;
	padding: clamp(1.6rem, 5vw, 2.6rem);
}
.sps-agegate__card img { margin-inline: auto; display: block; margin-block-end: 1rem; }
.sps-agegate__card h2 {
	font-family: var(--font-display);
	text-transform: uppercase;
	color: #fff;
	font-size: clamp(1.4rem, 4vw, 2rem);
	margin: 0.3rem 0 0.7rem;
}
.sps-agegate__card p { color: var(--d-mute); margin: 0 0 1.2rem; }
.sps-agegate__btns { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; }