/* ==========================================================================
   Nythera Labs — clinical dark lab aesthetic with depth.
   Tokens → base → layout → components → home → shop → WooCommerce → motion.
   ========================================================================== */

:root {
	--bg: #050608;
	--bg-2: #090b0f;
	--bg-3: #10131a;
	--text: #eef0f3;
	--muted: #9aa1ad;
	--faint: #7d8491; /* 5.3:1 on --bg: small print stays AA */
	--line: rgba(255, 255, 255, 0.08);
	--line-2: rgba(255, 255, 255, 0.15);
	--glass: rgba(255, 255, 255, 0.035);
	--glass-2: rgba(255, 255, 255, 0.065);
	--accent: #8fd3ff;
	--glow: var(--accent);
	--silver-1: #f5f7f9;
	--silver-2: #c4cad3;
	--success: #7fe0b0;
	--danger: #ff8f8f;

	--font-display: "Sora", "Sora Fallback", system-ui, sans-serif;
	--font-body: "Inter", "Inter Fallback", system-ui, sans-serif;
	--font-mono: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, monospace;

	--radius: 20px;
	--radius-sm: 12px;
	--gutter: clamp(16px, 4vw, 48px);
	--max: clamp(1240px, 82vw, 1440px); /* content measure: grows with large monitors, then stops */
	--header-h: 68px;
	--ease: cubic-bezier(0.2, 0.7, 0.1, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--shadow-deep: 0 40px 80px -40px rgba(0, 0, 0, 0.9), 0 12px 30px -18px rgba(0, 0, 0, 0.7);
	--glass-edge: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

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

/* No visible scrollbars anywhere: page, cart drawer, lists (scrolling still works with wheel,
   touch and keyboard). */
* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; width: 0; height: 0; }

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: calc(var(--header-h) + 16px);
	background: var(--bg);
}

body {
	margin: 0;
	min-height: 100vh;
	min-height: 100svh;
	background:
		radial-gradient(1200px 700px at 80% -10%, rgba(120, 170, 220, 0.07), transparent 60%),
		radial-gradient(900px 600px at -10% 30%, rgba(160, 140, 255, 0.04), transparent 60%),
		var(--bg);
	color: var(--text);
	font: 400 1rem/1.65 var(--font-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}

/* Film grain over everything (static, GPU-cheap). */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 100;
	pointer-events: none;
	opacity: 0.045;
	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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img,
video,
canvas,
svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration-color: var(--line-2); text-underline-offset: 0.2em; }
a:hover { text-decoration-color: currentColor; }

button,
input,
select,
textarea { font: inherit; color: inherit; }

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

::selection { background: rgba(143, 211, 255, 0.3); }

h1,
h2,
h3,
h4 {
	margin: 0 0 0.5em;
	font-family: var(--font-display);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.02em;
	text-wrap: balance;
}
p { margin: 0 0 1em; text-wrap: pretty; }

.screen-reader-text,
.hp {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 200;
	padding: 10px 16px;
	border-radius: 999px;
	background: var(--silver-1);
	color: #000;
	transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* ---------- Type scale ---------- */
.display {
	font-size: clamp(2.2rem, min(6.2vw, 9.5svh), 5.4rem);
	font-weight: 300;
	letter-spacing: -0.035em;
	line-height: 1.02;
}
.display--sm { font-size: clamp(2rem, min(4.6vw, 7.4svh), 4rem); }
.headline { font-size: clamp(1.6rem, min(3.4vw, 5.8svh), 3rem); font-weight: 400; letter-spacing: -0.03em; }
.headline--sm { font-size: clamp(1.4rem, 2.4vw, 2rem); }
.title { font-size: 1.35rem; }
.lede { font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--muted); max-width: 36em; }
.eyebrow {
	margin: 0 0 1rem;
	font: 500 0.72rem/1.4 var(--font-mono);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--muted);
}
.mono { font-family: var(--font-mono); letter-spacing: 0.02em; }
.muted { color: var(--muted); }
.small { font-size: 0.875rem; }

/* ---------- Layout ---------- */
.container {
	width: 100%;
	max-width: calc(var(--max) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.narrow { max-width: calc(820px + var(--gutter) * 2); }
.page-shell { padding-block: clamp(20px, min(5vw, 5svh), 64px) clamp(64px, 10vw, 120px); }
.page-hero { margin-bottom: clamp(20px, min(4vw, 5svh), 56px); }
.page-hero .lede { margin-top: 0.5rem; }
.section-head { margin-bottom: clamp(28px, 4vw, 48px); max-width: 720px; }
.section-head--row { display: flex; align-items: end; justify-content: space-between; gap: 24px; max-width: none; }
.button-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Surfaces ---------- */
.glass {
	position: relative;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02));
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--glass-edge), var(--shadow-deep);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	backdrop-filter: blur(18px) saturate(140%);
}

/* ---------- Buttons ---------- */
.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.wc-block-components-button {
	--b-bg: linear-gradient(180deg, var(--silver-1), var(--silver-2));
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 22px;
	border: 0;
	border-radius: 999px;
	background: var(--b-bg);
	color: #07090c;
	font: 600 0.95rem/1 var(--font-body);
	letter-spacing: 0.01em;
	text-decoration: none;
	cursor: pointer;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		inset 0 -2px 0 rgba(0, 0, 0, 0.18),
		0 10px 24px -10px rgba(170, 200, 230, 0.55),
		0 2px 4px rgba(0, 0, 0, 0.4);
	transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), filter 0.25s;
	-webkit-tap-highlight-color: transparent;
}
.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover { transform: translateY(-1px); filter: brightness(1.04); }
.button:active,
.woocommerce a.button:active,
.woocommerce button.button:active {
	transform: translateY(1px) scale(0.985);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 2px 6px rgba(0, 0, 0, 0.25), 0 4px 10px -6px rgba(170, 200, 230, 0.5);
}
.button .icon { width: 18px; height: 18px; }
.button--ghost {
	background: rgba(255, 255, 255, 0.04);
	color: var(--text);
	box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.button--ghost:hover { background: rgba(255, 255, 255, 0.08); }
.button--block { width: 100%; }
.button.loading { opacity: 0.7; pointer-events: none; }
.button.added .icon { animation: pop 0.5s var(--ease); }
a.added_to_cart { display: none !important; }

.icon-button {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: var(--glass);
	cursor: pointer;
}

.text-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--muted);
	font-size: 0.9rem;
	text-decoration: none;
	transition: color 0.2s, gap 0.2s var(--ease);
}
.text-link .icon { width: 16px; height: 16px; }
.text-link:hover { color: var(--text); gap: 12px; }

/* ---------- Research bar + header ---------- */
.research-bar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px var(--gutter);
	border-top: 1px solid var(--line);
	background: #030405;
	color: var(--muted);
	font: 500 0.7rem/1.4 var(--font-mono);
	letter-spacing: 0.06em;
	text-align: center;
}
.research-bar .icon { flex: none; width: 14px; height: 14px; }

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	height: var(--header-h);
	transition: background 0.3s, border-color 0.3s;
	border-bottom: 1px solid transparent;
}
.site-header.is-scrolled,
body:not(.is-home) .site-header {
	background: rgba(5, 6, 8, 0.72);
	border-bottom-color: var(--line);
	-webkit-backdrop-filter: blur(16px) saturate(150%);
	backdrop-filter: blur(16px) saturate(150%);
}
.site-header__inner {
	/* Equal side columns keep the navigation optically centered regardless of logo/actions width. */
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
	height: 100%;
	max-width: calc(var(--max) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.site-header__brand { justify-self: start; text-decoration: none; }

.wordmark { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; }
.wordmark__main { font: 400 1.02rem/1 var(--font-display); letter-spacing: 0.42em; margin-right: -0.42em; }
.wordmark__sub { margin-top: 5px; font: 400 0.55rem/1 var(--font-display); letter-spacing: 0.62em; margin-right: -0.62em; color: var(--muted); }
.wordmark--lg .wordmark__main { font-size: 1.5rem; }
.wordmark--lg .wordmark__sub { font-size: 0.72rem; }

.site-nav { justify-self: center; }
.site-nav__list { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.site-nav__list a {
	position: relative;
	display: block;
	padding: 10px 16px;
	border-radius: 999px;
	color: var(--muted);
	font-size: 0.92rem;
	text-decoration: none;
	transition: color 0.2s, background 0.2s;
}
.site-nav__list a:hover,
.site-nav__list .current-menu-item > a { color: var(--text); background: var(--glass-2); }
.site-nav__switchers { display: none; }

.site-header__actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.site-header__switchers { display: flex; gap: 8px; }

.switch { display: flex; gap: 2px; margin: 0; padding: 3px; list-style: none; border: 1px solid var(--line); border-radius: 999px; }
.switch a {
	display: block;
	padding: 5px 9px;
	border-radius: 999px;
	color: var(--faint);
	font: 500 0.7rem/1 var(--font-mono);
	letter-spacing: 0.08em;
	text-decoration: none;
}
.switch a[aria-current] { background: var(--glass-2); color: var(--text); }
.switch a:hover { color: var(--text); }

.cart-button {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: var(--glass);
	text-decoration: none;
	transition: background 0.2s, border-color 0.2s;
}
.cart-button:hover { background: var(--glass-2); border-color: var(--line-2); }
.cart-button .icon { width: 20px; height: 20px; }
.cart-count {
	position: absolute;
	top: -3px;
	right: -3px;
	display: grid;
	place-items: center;
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--silver-1);
	color: #000;
	font: 600 0.68rem/1 var(--font-body);
	box-shadow: 0 0 0 3px var(--bg);
	transition: transform 0.3s var(--ease);
}
.cart-count.is-empty { transform: scale(0); }
.cart-count.is-bumped { animation: pop 0.5s var(--ease); }

.nav-toggle { display: none; }

/* ---------- Cart drawer ---------- */
.cart-drawer { position: fixed; inset: 0; z-index: 90; }
.cart-drawer[hidden] { display: block; visibility: hidden; pointer-events: none; }
.cart-drawer__scrim {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	opacity: 0;
	transition: opacity 0.35s var(--ease);
}
.cart-drawer__panel {
	position: absolute;
	top: 10px;
	right: 10px;
	bottom: 10px;
	display: flex;
	flex-direction: column;
	width: min(420px, calc(100vw - 20px));
	padding: 20px;
	background: rgba(12, 14, 19, 0.88);
	transform: translateX(calc(100% + 20px));
	transition: transform 0.45s var(--ease);
}
.cart-drawer.is-open .cart-drawer__scrim { opacity: 1; }
.cart-drawer.is-open .cart-drawer__panel { transform: none; }
.cart-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cart-drawer__title { margin: 0; font: 500 1.2rem/1.1 var(--font-display); }
.cart-drawer .widget_shopping_cart_content { display: flex; flex: 1; flex-direction: column; min-height: 0; }

.woocommerce-mini-cart { flex: 1; margin: 0; padding: 0; overflow: auto; list-style: none; }
.woocommerce-mini-cart-item {
	position: relative;
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: 4px 14px;
	padding: 14px 32px 14px 0;
	border-bottom: 1px solid var(--line);
	font-size: 0.92rem;
}
.woocommerce-mini-cart-item a:not(.remove) { display: contents; text-decoration: none; font-weight: 500; }
.woocommerce-mini-cart-item img { grid-row: span 2; width: 64px; height: 80px; object-fit: cover; border-radius: 10px; background: #000; }
.woocommerce-mini-cart-item .quantity { grid-column: 2; color: var(--muted); font-family: var(--font-mono); font-size: 0.8rem; }
.woocommerce-mini-cart-item dl.variation { grid-column: 2; display: flex; gap: 6px; margin: 0; color: var(--muted); font-size: 0.8rem; }
.woocommerce-mini-cart-item dl.variation dd,
.woocommerce-mini-cart-item dl.variation p { margin: 0; }
.woocommerce-mini-cart-item .remove {
	position: absolute;
	top: 14px;
	right: 0;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	color: var(--muted);
	text-decoration: none;
	font-size: 1.1rem;
}
.woocommerce-mini-cart-item .remove:hover { background: var(--glass-2); color: var(--text); }
.woocommerce-mini-cart__total { display: flex; justify-content: space-between; margin: 16px 0 12px; font-size: 1.05rem; }
.woocommerce-mini-cart__buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.woocommerce-mini-cart__buttons .button:not(.checkout) { --b-bg: rgba(255, 255, 255, 0.05); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.woocommerce-mini-cart__empty-message { margin: auto; color: var(--muted); text-align: center; }

/* ---------- Lenis smooth scroll (lenis 1.3 base styles) ---------- */
html.lenis,
html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ---------- GSAP (main.js adds html.has-gsap) ---------- */
/* SplitText line masks: room for descenders and accents without moving the layout. */
.split-line-mask { padding-block: 0.06em 0.14em; margin-block: -0.06em -0.14em; }
/* While GSAP raises an item, CSS transitions would lag every frame behind it. */
.has-gsap [data-reveal].is-revealing { transition: none !important; }
/* Hero beats: GSAP owns their motion (scrub.js); the CSS offset is only the no-script fallback. */
.has-gsap .beat { transform: none; }
/* Looping cues run only while they can be seen. */
.scroll-cue.is-off i::after,
.beat--next:not(.is-on) .next-cue__track i,
.has-gsap .hero:not(.is-in-view) .scroll-cue i::after,
.has-gsap .hero:not(.is-in-view) .next-cue__track i { animation-play-state: paused; }
/* The marquee moves every frame while on screen: its own layer, so it never repaints the page. */
.has-gsap .marquee__track { will-change: transform; }

/* ---------- Page transition ---------- */
.page-transition {
	position: fixed;
	inset: 0;
	z-index: 120;
	background: var(--bg);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.22s var(--ease);
}
.is-leaving .page-transition { opacity: 1; }

/* ==========================================================================
   Home — hero
   ========================================================================== */
.hero { position: relative; height: 260vh; margin-top: calc(var(--header-h) * -1); }
.hero__stage {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
	--p: 0;
}

.hero__media {
	position: absolute;
	inset: 0;
	transform-origin: 50% 55%;
	will-change: transform;
	/* Dims the vial behind the closing CTA so the copy stays legible. */
	opacity: calc(1 - var(--dim, 0) * 0.62);
}
.hero__canvas { opacity: 0; transition: opacity 0.6s; }


/* Real-time 3D vial (hero3d.js) replaces the still once its first frame is drawn. */
.hero__gl,
.hero__halo { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.9s var(--ease) 0.25s; pointer-events: none; }
.hero__halo {
	/* Studio backlight behind the glass, like the product photos. */
	background:
		radial-gradient(ellipse 14% 40% at 50% 54%, rgba(255, 255, 255, 0.42), transparent 72%),
		radial-gradient(ellipse 26% 52% at 50% 56%, rgba(225, 232, 240, 0.12), transparent 72%),
		radial-gradient(ellipse 30% 6% at 50% 86%, rgba(255, 255, 255, 0.2), transparent 70%);
}
.hero.has-gl .hero__gl { opacity: 1; }
/* The backlight lives inside the 3D scene once it runs (it scales with the camera). */
.hero.has-gl .hero__halo { opacity: 0; }
.hero.has-gl .hero__still,
.hero.has-gl .hero__canvas { opacity: 0; transition: opacity 0.35s var(--ease); }
.hero.has-gl .hero__media { transform: none; }
/* Loader: covers the hero until the 3D vial has rendered its first frame (hero3d.js drives the
   bar from real load stages). Without JS, or with reduced motion, it never shows; a CSS timeout
   lifts it anyway if the scene fails silently. */
.hero-loader { display: none; }
.gl .hero-loader {
	--load: 0;
	--curtain: cubic-bezier(0.76, 0, 0.24, 1);
	position: fixed;
	inset: 0;
	z-index: 110; /* above the header (50) and cart drawer (90), below page transitions (120) */
	display: grid;
	grid-template-rows: var(--header-h) 1fr auto;
	/* Faint backlight where the vial will stand, so the reveal reads as the same studio. */
	background:
		radial-gradient(ellipse 12% 34% at 50% 52%, rgba(255, 255, 255, calc(0.015 + var(--load) * 0.05)), transparent 72%),
		var(--bg);
	transition: opacity 0.9s var(--ease) 0.25s, visibility 0s linear 1.2s;
	animation: loader-timeout 0.01s linear 8.5s forwards; /* safety net if the scene stalls */
}
/* Exit: the readouts drop away, then the sheet dissolves and the drawing hands over to the 3D vial. */
.hero-loader.is-done { opacity: 0; visibility: hidden; animation: none; } /* the safety timeout is no longer needed */
html.is-loading { overflow: hidden; }

.hero-loader__top { display: flex; align-items: center; }
.hero-loader__mark { animation: loader-in 0.8s var(--ease) backwards; }

/* Vial line drawing: sized and placed like the 3D vial's opening frame (78 % of the screen
   height, centred 2 % low; portrait 52 %, centred a third down), so it hands over in place. */
.hero-loader__vial {
	position: absolute;
	left: 50%;
	top: 13svh;
	height: 78svh;
	width: auto;
	aspect-ratio: 120 / 246;
	transform: translateX(-50%);
	overflow: visible;
}
.hero-loader__line {
	fill: none;
	stroke: var(--text);
	stroke-width: 0.6;
	vector-effect: non-scaling-stroke;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	opacity: 0.7;
	animation: loader-draw 1.4s var(--curtain) 0.15s forwards;
}
.hero-loader__line.is-cap { animation-delay: 0.45s; }
.hero-loader__line.is-label { opacity: 0.3; animation-delay: 0.75s; }
/* Light rises through the glass with the real load progress. */
.hero-loader__liquid {
	transform-box: view-box;
	transform-origin: 0 240px;
	transform: scaleY(calc(var(--load) * 1));
}
.hero-loader__meniscus {
	stroke: var(--text);
	stroke-width: 0.8;
	vector-effect: non-scaling-stroke;
	opacity: calc(0.25 + var(--load) * 0.5);
	transform: translateY(calc(var(--load) * -184px));
}
.hero-loader__label {
	font-family: var(--font-display);
	font-size: 7px;
	letter-spacing: 3px;
	fill: var(--text);
	opacity: 0;
	animation: loader-label 0.8s var(--ease) 1.1s forwards;
}
@keyframes loader-draw { to { stroke-dashoffset: 0; } }
@keyframes loader-label { to { opacity: 0.45; } }
@media (max-aspect-ratio: 9/10) {
	.hero-loader__vial { top: 7svh; height: 52svh; }
}
.hero-loader__bottom {
	grid-row: 3;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	padding-bottom: clamp(20px, 5svh, 48px);
}
.hero-loader__count,
.hero-loader__stage { margin: 0; transition: opacity 0.4s var(--ease), transform 0.5s var(--curtain); }
.hero-loader__count {
	display: flex;
	align-items: flex-start;
	gap: 0.08em;
	font-family: var(--font-display);
	font-weight: 300;
	font-size: clamp(4.5rem, min(13vw, 22svh), 11rem);
	line-height: 0.82;
	letter-spacing: -0.05em;
	font-variant-numeric: tabular-nums;
	color: var(--text);
	animation: loader-in 0.8s var(--ease) 0.15s backwards;
}
.hero-loader__count small { font-size: 0.22em; letter-spacing: 0; color: var(--muted); padding-top: 0.35em; }
.hero-loader__stage {
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	color: var(--muted);
	text-align: right;
	animation: loader-in 0.8s var(--ease) 0.25s backwards;
}
.hero-loader__stage.is-swapping { opacity: 0; transform: translateY(6px); }
.hero-loader.is-done .hero-loader__count,
.hero-loader.is-done .hero-loader__stage { opacity: 0; transform: translateY(18px); }
/* Hero copy waits behind the loader and rises in with the vial. */
.js .hero__beats { transition: opacity 0.9s var(--ease) 0.7s, transform 0.9s var(--ease) 0.7s; }
html.is-loading .hero:not(.is-loaded) .hero__beats { opacity: 0; transform: translateY(14px); animation: loader-reveal 0.01s linear 8.5s forwards; }
@keyframes loader-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes loader-timeout { to { opacity: 0; visibility: hidden; } }
@keyframes loader-reveal { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	.js .hero-loader { display: none; }
	.js .hero:not(.is-loaded) .hero__beats { opacity: 1; transform: none; }
}

@media (max-width: 899px) {
	.hero__halo { background: radial-gradient(ellipse 34% 30% at 50% 36%, rgba(255, 255, 255, 0.2), transparent 70%); }
}

.hero__vignette {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 70% 60% at 50% 50%, transparent 40%, rgba(5, 6, 8, 0.75) 100%),
		linear-gradient(180deg, rgba(5, 6, 8, 0.55) 0%, transparent 18%, transparent 75%, var(--bg) 100%);
	pointer-events: none;
}

.hero__beats { position: absolute; inset: 0; pointer-events: none; }
.beat {
	position: absolute;
	max-width: min(560px, 44vw);
	opacity: 0;
	transform: translate3d(0, 30px, 0);
	will-change: opacity, transform;
}
.beat.is-on { pointer-events: auto; }
.beat--lead { left: var(--gutter); bottom: 14vh; max-width: min(600px, 36vw); opacity: 1; transform: none; }
.beat--lead .display { font-size: clamp(2.2rem, min(4.6vw, 8.6svh), 4.6rem); }
.beat--right,
.beat--left { max-width: min(500px, 33vw); }
.beat--right { right: var(--gutter); top: 34vh; text-align: right; }
.beat--right .lede { margin-left: auto; }
.beat--left { left: var(--gutter); top: 34vh; }
.beat--next { left: var(--gutter); bottom: 12vh; max-width: min(560px, 40vw); }
/* Closing beat points onward: a live track line + label that leads into the product showcase. */
.next-cue {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	margin-top: 8px;
	color: var(--text);
	font: 500 0.78rem/1 var(--font-mono);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
}
.next-cue__track { position: relative; width: 1px; height: 56px; overflow: hidden; background: var(--line-2); }
.next-cue__track i { position: absolute; left: 0; top: 0; width: 1px; height: 40%; background: var(--silver-1); animation: drip 1.6s var(--ease-in-out) infinite; }
.next-cue:hover span:last-child { text-decoration: underline; text-underline-offset: 6px; }
.beat .headline { text-shadow: 0 4px 30px rgba(0, 0, 0, 0.6); }

.hero__progress {
	position: absolute;
	right: calc(var(--gutter) / 2);
	top: 50%;
	width: 2px;
	height: 120px;
	transform: translateY(-50%);
	background: var(--line);
	border-radius: 2px;
	overflow: hidden;
}
.hero__progress span { display: block; height: 100%; background: var(--silver-1); transform-origin: top; transform: scaleY(var(--p)); }

.scroll-cue {
	position: absolute;
	right: var(--gutter);
	bottom: 28px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	color: var(--faint);
	font: 500 0.65rem/1 var(--font-mono);
	letter-spacing: 0.24em;
	text-transform: uppercase;
	opacity: calc(1 - var(--p) * 12);
}
.scroll-cue i { position: relative; width: 1px; height: 36px; overflow: hidden; }
/* A segment sliding through a clipped track: grows from the top, leaves at the bottom. Transform only,
   so it runs on the compositor (animating transform-origin re-styled the page every frame). */
.scroll-cue i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--muted), transparent); animation: cue 2s var(--ease-in-out) infinite; }

/* ==========================================================================
   Home — product showcase
   ========================================================================== */
/* About half a screen of scrolling per compound (was ~0.8): enough to read the panel, not a long scroll. */
.showcase { position: relative; height: calc(var(--count) * 65vh + 30vh); }
.showcase__stage {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
	--glow-current: var(--accent);
	/* Page black: the rendered turntables fade into exactly this colour. */
	background: var(--bg);
}
.showcase__stage::before,
.showcase__stage::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 18vh;
	z-index: 11;
	pointer-events: none;
}
.showcase__stage::before { top: 0; background: linear-gradient(var(--bg), transparent); }
.showcase__stage::after { bottom: 0; background: linear-gradient(transparent, var(--bg)); }
.showcase__head {
	position: absolute;
	top: calc(var(--header-h) + 3vh);
	left: 0;
	right: 0;
	display: flex;
	align-items: start;
	justify-content: space-between;
	z-index: 12;
}
.showcase__counter { font: 400 0.9rem/1 var(--font-mono); color: var(--muted); letter-spacing: 0.1em; }
.showcase__counter span { color: var(--text); }
/* Odometer: the index rolls to the next number instead of swapping. */
.roll { display: inline-block; height: 1em; overflow: hidden; vertical-align: top; }
.roll__strip { display: flex; flex-direction: column; transform: translate3d(0, calc(var(--i, 0) * -1em), 0); transition: transform 0.8s var(--ease); }
.roll__strip > span { display: block; height: 1em; line-height: 1; }

/* Entrance: the heading rises out of a mask, eyebrow and counter fade up. */
.reveal-line { display: block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.reveal-line > span { display: inline-block; transition: transform 1.1s var(--ease) 0.08s; }
.showcase__head .eyebrow,
.showcase__counter { transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.js .showcase__stage:not(.is-in) .reveal-line > span { transform: translate3d(0, 110%, 0); }
.js .showcase__stage:not(.is-in) .showcase__head .eyebrow,
.js .showcase__stage:not(.is-in) .showcase__counter { opacity: 0; transform: translate3d(0, 12px, 0); }

.showcase__track { position: absolute; inset: 0; }
.slide {
	--d: 0;
	--ad: 0;
	--rise: 0;
	position: absolute;
	left: 36%;
	top: 54%;
	width: min(30vw, 44svh);
	transform:
		translate3d(-50%, -50%, 0)
		translate3d(calc(var(--d) * min(27vw, 42vh)), calc(var(--rise) * 16vh), 0)
		scale(calc(1 - min(var(--ad), 2) * 0.24));
	/* Depth via scale + opacity only (compositor-friendly, no per-frame blur). */
	opacity: calc((1 - min(var(--ad), 2) * 0.4) * (1 - var(--rise)));
	/* Posters sit on page black: lighten lets overlapping neighbours merge without visible edges. */
	mix-blend-mode: lighten;
	will-change: transform, opacity;
}
.slide__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	/* Feathers the studio backdrop into an ellipse, so no frame edge ever reads as a box.
	   The vial itself (cap top ≈ 12 %, body 31–69 % wide) stays fully inside the opaque core. */
	-webkit-mask-image: radial-gradient(ellipse 50% 60% at 50% 48%, #000 62%, transparent 100%);
	mask-image: radial-gradient(ellipse 50% 60% at 50% 48%, #000 62%, transparent 100%);
}
@media (hover: hover) and (pointer: fine) {
	.slide__media { transition: filter 0.6s var(--ease); }
	.slide:not(.is-current) .slide__media:hover { filter: brightness(1.45); }
}

/* Live 3D view (showcase3d.js / product3d.js): framed exactly like the poster underneath, with the
   same edge fade the offline renders bake in (dev/render-turntables.js, fadeEdges). */
.live-view { position: absolute; inset: 0; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity 0.38s var(--ease); }
.live-view.is-on { opacity: 1; }
.live-view canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.live-view__fade {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to right, rgb(5 6 8) 0%, rgb(5 6 8 / 0.55) 10.8%, rgb(5 6 8 / 0) 24%),
		linear-gradient(to left, rgb(5 6 8) 0%, rgb(5 6 8 / 0.55) 10.8%, rgb(5 6 8 / 0) 24%),
		linear-gradient(to bottom, rgb(5 6 8) 0%, rgb(5 6 8 / 0.55) 3.6%, rgb(5 6 8 / 0) 8%),
		linear-gradient(to top, rgb(5 6 8) 0%, rgb(5 6 8 / 0.55) 7.2%, rgb(5 6 8 / 0) 16%);
}
.slide__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	-webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, #000 60%, transparent 100%);
	mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, #000 60%, transparent 100%);
}
/* Rendered front views fade into the page on their own; the vials stand still (no spin). */
.slide__img--render { -webkit-mask-image: none; mask-image: none; }
.slide__panel { display: none; }

.showcase__panels {
	position: absolute;
	/* Halfway between the screen edge and the content edge: off the edge on wide screens,
	   but clear of the neighbouring vial. */
	right: max(var(--gutter), calc((100vw - var(--max)) / 4));
	top: 50%;
	width: min(400px, 32vw);
	transform: translateY(-44%);
	max-height: calc(100svh - var(--header-h) - 120px);
	z-index: 12;
}
.showcase-panel {
	position: absolute;
	inset: auto 0;
	top: 0;
	padding: clamp(18px, 3svh, 28px);
	opacity: 0;
	visibility: hidden;
	/* Enters from the side the range is moving toward, leaves to the other. */
	transform: translate3d(calc(var(--dir, 1) * 22px), 0, 0);
	transition: opacity 0.4s var(--ease), transform 0.7s var(--ease), visibility 0s 0.4s;
}
.showcase-panel.is-leaving { transform: translate3d(calc(var(--dir, 1) * -22px), 0, 0); }
.showcase-panel.is-active {
	position: relative;
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 0.6s 0.12s var(--ease), transform 0.9s 0.12s var(--ease), visibility 0s;
}
.showcase-panel > * { transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); }
.showcase-panel:not(.is-active) > * { opacity: 0; transform: translate3d(0, 10px, 0); }
.showcase-panel.is-active > * { transition: opacity 0.7s var(--ease), transform 0.9s var(--ease); transition-delay: calc(var(--k, 0) * 60ms + 160ms); }
.showcase-panel > :nth-child(2) { --k: 1; }
.showcase-panel > :nth-child(3) { --k: 2; }
.showcase-panel > :nth-child(4) { --k: 3; }
.showcase-panel > :nth-child(5) { --k: 4; }
.js .showcase__stage:not(.is-in) .showcase-panel.is-active { opacity: 0; transform: translate3d(22px, 0, 0); }
.js .showcase__stage:not(.is-in) .showcase-panel.is-active > * { opacity: 0; transform: translate3d(0, 10px, 0); }
.showcase-panel__title,
.slide__panel h3 { font-size: clamp(1.6rem, min(2.6vw, 4.6svh), 2.5rem); font-weight: 400; letter-spacing: -0.03em; margin-bottom: 18px; }
.showcase-panel .text-link,
.slide__panel .text-link { margin-top: 16px; }

.showcase__nav {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 4vh;
	display: flex;
	gap: 6px;
	z-index: 12;
}
.showcase__dot {
	flex: 1;
	padding: 14px 0 0;
	border: 0;
	background: none;
	color: var(--faint);
	font: 500 0.72rem/1.2 var(--font-mono);
	letter-spacing: 0.08em;
	text-align: left;
	text-transform: uppercase;
	cursor: pointer;
	position: relative;
	transition: color 0.3s;
}
.showcase__dot::before,
.showcase__dot::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 1px;
	transform-origin: left;
}
/* Track line, drawn in one after another on entrance. */
.showcase__dot::after { background: var(--line-2); }
/* Progress: fills with scroll through each product's slot (scrub.js sets --fill). */
.showcase__dot::before { z-index: 1; background: var(--silver-1); transform: scaleX(var(--fill, 0)); }
.showcase__dot span { display: inline-block; transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.js .showcase__stage:not(.is-in) .showcase__dot::after { transform: scaleX(0); }
.js .showcase__stage:not(.is-in) .showcase__dot span { opacity: 0; transform: translate3d(0, 8px, 0); }
.showcase__stage.is-entering .showcase__dot::after { transition: transform 1.1s var(--ease) calc(var(--k, 0) * 90ms + 250ms); }
.showcase__stage.is-entering .showcase__dot span { transition-delay: calc(var(--k, 0) * 90ms + 380ms); }
.showcase__dot:hover { color: var(--muted); }
.showcase__dot.is-active { color: var(--text); }

/* ---------- Spec list ---------- */
.spec-list { display: grid; gap: 0; margin: 0 0 20px; }
.spec-list > div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
.spec-list dt { color: var(--muted); }
.spec-list dd { margin: 0; text-align: right; }
.spec-list--table > div:first-child { border-top: 1px solid var(--line); }

/* ---------- Buy box ---------- */
.buy-box { display: grid; gap: 16px; }
.pills { display: flex; gap: 8px; margin: 0; padding: 0; border: 0; }
.pills__legend { margin-bottom: 8px; padding: 0; font: 500 0.7rem/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }
.pill { position: relative; flex: 1; cursor: pointer; }
.pill input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.pill span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 8px 12px;
	border: 1px solid var(--line-2);
	border-radius: var(--radius-sm);
	color: var(--muted);
	font-size: 0.88rem;
	transition: all 0.2s var(--ease);
}
.pill input:checked + span { border-color: var(--silver-2); background: rgba(255, 255, 255, 0.08); color: var(--text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.pill input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.pill__tag {
	position: absolute;
	top: -8px;
	right: 8px;
	padding: 2px 7px;
	border-radius: 999px;
	background: var(--silver-1);
	color: #000;
	font: 600 0.62rem/1.3 var(--font-body);
	font-style: normal;
}
.buy-box__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.price-tag { display: flex; align-items: baseline; gap: 10px; margin: 0; font: 400 1.6rem/1 var(--font-display); letter-spacing: -0.02em; }
.price-tag del { color: var(--faint); font-size: 1rem; }
.price-tag .woocommerce-Price-currencySymbol { font-size: 0.75em; color: var(--muted); }
.buy-box--compact .price-tag { font-size: 1.35rem; }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: 999px; }
.qty__btn { display: grid; place-items: center; width: 40px; height: 44px; border: 0; background: none; color: var(--muted); cursor: pointer; }
.qty__btn:hover { color: var(--text); }
.qty__btn .icon { width: 16px; height: 16px; }
.qty__input { width: 36px; border: 0; background: none; text-align: center; -moz-appearance: textfield; appearance: textfield; }
.qty__input::-webkit-inner-spin-button,
.qty__input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* ==========================================================================
   Home — standard (editorial split) + catalog band
   ========================================================================== */
.standard { padding-block: clamp(48px, 7vw, 104px) clamp(72px, 10vw, 140px); }
.standard__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 7vw, 112px); align-items: start; }
.standard__aside { position: sticky; top: calc(var(--header-h) + 40px); }
.standard__title { max-width: 11em; margin-bottom: clamp(20px, 4svh, 48px); }
.standard__figure { margin: 0; }
.standard__frame {
	position: relative;
	aspect-ratio: 4 / 5;
	height: min(40svh, 475px);
	overflow: hidden;
	border-radius: 4px;
	background: #010102;
}
.standard__frame img { width: 100%; height: 118%; margin-top: -9%; object-fit: cover; filter: grayscale(0.35) contrast(1.05); will-change: transform; }
.standard__frame::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); pointer-events: none; }
.standard__figure figcaption { margin-top: 14px; color: var(--faint); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }

.standard__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-2); counter-reset: none; }
.standard__item {
	position: relative;
	display: grid;
	grid-template-columns: 64px 1fr auto;
	gap: 8px 24px;
	align-items: baseline;
	padding: clamp(28px, 3.4vw, 44px) 0;
	border-bottom: 1px solid var(--line);
}
/* Hairline that draws across as the row enters. */
.standard__item::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 100%;
	height: 1px;
	background: var(--silver-2);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 1.4s var(--ease) 0.2s;
}
.standard__item.is-visible::after { transform: scaleX(1); }
.standard__index { color: var(--faint); font-size: 0.78rem; }
.standard__body h3 { margin-bottom: 10px; font-size: clamp(1.3rem, 2vw, 1.75rem); font-weight: 400; letter-spacing: -0.025em; }
.standard__body p { max-width: 38ch; margin: 0; color: var(--muted); }
.standard__meta { color: var(--faint); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; }

.catalog-band { padding-bottom: clamp(80px, 10vw, 140px); overflow: hidden; }
.marquee {
	display: block;
	padding-block: clamp(18px, 2.6vw, 36px);
	border-block: 1px solid var(--line);
	text-decoration: none;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track { display: flex; align-items: center; gap: clamp(28px, 4vw, 64px); width: max-content; animation: marquee 48s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item { font: 300 clamp(3rem, 8.5vw, 8rem)/1 var(--font-display); letter-spacing: -0.045em; color: var(--text); white-space: nowrap; transition: color 0.4s var(--ease); }
.marquee__item.is-outline { color: rgba(238, 240, 243, 0.2); }
.marquee:hover .marquee__item.is-outline { color: rgba(238, 240, 243, 0.55); }
.marquee__sep { flex: none; width: 10px; height: 10px; border: 1px solid var(--line-2); border-radius: 50%; }

.catalog-band__row { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-top: clamp(32px, 4vw, 56px); }
.catalog-band__title { max-width: 18em; margin: 0; font-size: clamp(1.3rem, 2.2vw, 1.9rem); font-weight: 400; letter-spacing: -0.025em; color: var(--muted); }
.big-link {
	display: inline-flex;
	align-items: center;
	gap: 18px;
	flex: none;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--line-2);
	font: 400 clamp(1.4rem, 2.6vw, 2.2rem)/1 var(--font-display);
	letter-spacing: -0.03em;
	text-decoration: none;
	transition: border-color 0.4s var(--ease);
}
.big-link__icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: linear-gradient(180deg, var(--silver-1), var(--silver-2));
	color: #07090c;
	transition: transform 0.5s var(--ease);
}
.big-link__icon .icon { width: 20px; height: 20px; }
.big-link:hover { border-color: var(--text); }
.big-link:hover .big-link__icon { transform: translateX(6px) rotate(-45deg); }
.big-link:active .big-link__icon { transform: translateX(6px) rotate(-45deg) scale(0.94); }

/* ==========================================================================
   Catalog + product
   ========================================================================== */
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 0; padding: 0; list-style: none; }
.product-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; transform-style: preserve-3d; }
.product-card__media {
	position: relative;
	display: block;
	height: clamp(200px, 36svh, 400px);
	overflow: hidden;
	border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
	/* Same black as the packshot backgrounds: the vial sits in the card without a visible image box. */
	background: #010102;
}
.product-card__img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%; transition: transform 0.8s var(--ease); }
.product-card:hover .product-card__img { transform: scale(1.035) translateY(-1%); }
.product-card__glare,
.product-stage .product-card__glare {
	position: absolute;
	inset: 0;
	background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 30%), rgba(255, 255, 255, 0.12), transparent 45%);
	opacity: 0;
	transition: opacity 0.4s;
	pointer-events: none;
}
.product-card:hover .product-card__glare,
.product-stage:hover .product-card__glare { opacity: 1; }
.product-card__body { display: flex; flex: 1; flex-direction: column; padding: clamp(16px, 2.4svh, 22px) 22px clamp(18px, 2.6svh, 24px); }
.product-card__body .eyebrow { margin-bottom: 8px; }
.product-card__title { margin-bottom: 4px; font-size: clamp(1.2rem, 2.8svh, 1.45rem); font-weight: 400; }
.product-card__title a { text-decoration: none; }
.product-card__spec { margin-bottom: clamp(10px, 1.8svh, 18px); color: var(--muted); font-size: 0.8rem; }
.product-card .buy-box { margin-top: auto; }

.badge {
	position: absolute;
	top: 14px;
	left: 14px;
	padding: 5px 10px;
	border-radius: 999px;
	background: var(--silver-1);
	color: #000;
	font: 600 0.7rem/1 var(--font-body);
}

.crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(12px, 2.4svh, 24px); color: var(--faint); font: 400 0.78rem/1.4 var(--font-mono); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--text); }

.disclaimer {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 32px 0 0;
	color: var(--faint);
	font-size: 0.82rem;
}
.disclaimer .icon { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.disclaimer--boxed { margin: 20px 0 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.02); color: var(--muted); }

.research-standard { margin-top: clamp(48px, 8vw, 96px); }
/* Editorial row (no card): hairline on top, label | text | mail link. */
.research-standard__inner {
	display: grid;
	grid-template-columns: 180px 1fr auto;
	gap: 24px clamp(24px, 4vw, 64px);
	align-items: end;
	padding-top: clamp(28px, 4vw, 48px);
	border-top: 1px solid var(--line-2);
}
.research-standard__label { margin: 0; align-self: start; padding-top: 10px; }
.research-standard__title { margin-bottom: 10px; font-size: clamp(1.6rem, min(3vw, 5svh), 2.6rem); font-weight: 300; letter-spacing: -0.035em; }
.research-standard__inner .muted { max-width: 44ch; margin: 0; }
.research-standard__mail { font-size: clamp(1.1rem, 1.8vw, 1.5rem); }
.research-standard__mail .big-link__icon { width: 44px; height: 44px; }

.product-layout { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.product-stage {
	position: sticky;
	top: calc(var(--header-h) + 16px);
	height: clamp(360px, calc(100svh - var(--header-h) - 120px), 820px);
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: calc(var(--radius) + 8px);
	background: #020203;
	box-shadow: var(--shadow-deep);
	transform-style: preserve-3d;
}
.product-stage__glow {
	position: absolute;
	inset: 30% 10% 0;
	background: radial-gradient(ellipse at 50% 70%, color-mix(in srgb, var(--glow) 30%, transparent), transparent 65%);
	filter: blur(30px);
}
.product-stage__media { position: relative; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.product-stage__live { transition: opacity 1s var(--ease); }
.product-stage__live .live-view__fade { inset: auto; }
.product-stage.has-gl .product-stage__live { opacity: 1; }
.product-stage.has-gl { cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.product-stage.has-gl.is-dragging { cursor: grabbing; }
.product-stage.has-gl .product-card__glare { display: none; }
.product-stage:focus-visible { outline: 1px solid var(--line-2); outline-offset: 4px; }
.stage-hint {
	position: absolute;
	left: 50%;
	bottom: clamp(16px, 3svh, 26px);
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 9px 16px 9px 13px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: rgb(5 6 8 / 0.5);
	box-shadow: var(--glass-edge);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	color: var(--muted);
	font-size: 0.68rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transform: translate3d(-50%, 10px, 0);
	transition: opacity 0.6s var(--ease), transform 0.8s var(--ease);
}
.stage-hint__icon { width: 16px; height: 16px; animation: hint-sway 2.6s var(--ease-in-out) infinite; }
.product-stage.has-gl .stage-hint { opacity: 1; transform: translate3d(-50%, 0, 0); transition-delay: 1.4s; }
.product-stage.has-gl.is-used .stage-hint { opacity: 0; transform: translate3d(-50%, 10px, 0); transition-delay: 0s; }
@keyframes hint-sway {
	0%, 100% { transform: translateX(-2px); }
	50% { transform: translateX(2px); }
}
.product-stage__floor { position: absolute; inset: auto 0 0; height: 30%; background: linear-gradient(transparent, rgba(2, 2, 3, 0.7)); pointer-events: none; }
.product-info__title { margin-bottom: clamp(10px, 2svh, 18px); font-size: clamp(1.7rem, min(3vw, 5.4svh), 2.8rem); }
.product-info__lead { margin: 0; max-width: 46ch; color: var(--muted); }
.product-info__intro { color: var(--muted); }
.product-info__buy { margin-top: clamp(16px, 3svh, 28px); padding: clamp(16px, 2.6svh, 24px); }
.product-section { margin-top: 36px; }
.related { margin-top: clamp(64px, 10vw, 120px); }

/* ---------- Support ---------- */
.support-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(24px, 4vw, 48px); align-items: start; }
.faq { display: grid; gap: 10px; }
.faq__item { padding: 0; border-radius: var(--radius-sm); box-shadow: var(--glass-edge); }
.faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 22px;
	cursor: pointer;
	font-weight: 500;
	list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__icon { flex: none; width: 20px; height: 20px; color: var(--muted); transition: transform 0.35s var(--ease); }
.faq__item[open] .faq__icon { transform: rotate(45deg); }
.faq__answer { padding: 0 22px 20px; color: var(--muted); }
.faq__answer p { margin: 0; }
.support-side { display: grid; gap: 20px; position: sticky; top: calc(var(--header-h) + 24px); }
.contact-card,
.docs-card { padding: clamp(22px, 3vw, 32px); }
.contact-card .title { margin-bottom: 4px; }

.form { display: grid; gap: 14px; margin-top: 20px; }
.field { display: grid; gap: 6px; margin: 0; }
.field label,
.woocommerce form .form-row label { color: var(--muted); font-size: 0.85rem; }
.field input,
.field textarea,
.woocommerce form .form-row .input-text,
.woocommerce form .form-row select,
.woocommerce-cart .coupon .input-text,
.select2-container--default .select2-selection--single {
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	border: 1px solid var(--line-2);
	border-radius: var(--radius-sm);
	background: rgba(0, 0, 0, 0.35);
	color: var(--text);
	transition: border-color 0.2s, box-shadow 0.2s;
}
.field textarea { min-height: 120px; resize: vertical; }
.select2-container--default .select2-selection--single .select2-selection__rendered { padding: 0; color: var(--text); line-height: 22px; }
.select2-container--default .select2-selection--single .select2-selection__arrow { top: 11px; right: 8px; }
.select2-dropdown { border-color: var(--line-2); background: var(--bg-3); color: var(--text); }
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] { background: var(--glass-2); color: var(--text); }
.select2-container--default .select2-search--dropdown .select2-search__field { border-color: var(--line-2); background: rgba(0, 0, 0, 0.35); }
.field input:focus,
.field textarea:focus,
.woocommerce form .form-row .input-text:focus,
.woocommerce form .form-row select:focus {
	outline: none;
	border-color: var(--silver-2);
	box-shadow: 0 0 0 4px rgba(143, 211, 255, 0.12);
}
.form__note { margin: 0; font-size: 0.8rem; }

.notice { padding: 12px 14px; border-radius: var(--radius-sm); font-size: 0.9rem; }
.notice--success { background: rgba(127, 224, 176, 0.1); color: var(--success); }
.notice--error { background: rgba(255, 143, 143, 0.1); color: var(--danger); }

.doc-links { display: grid; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.doc-links a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	text-decoration: none;
	transition: background 0.2s, border-color 0.2s;
}
.doc-links a:hover { background: var(--glass-2); border-color: var(--line-2); }
.doc-links .icon { flex: none; width: 20px; height: 20px; color: var(--muted); }
.doc-links span { flex: 1; }
.doc-links__arrow { transition: transform 0.25s var(--ease); }
.doc-links a:hover .doc-links__arrow { transform: translateX(3px); }
.doc-links__note { display: block; margin-top: 2px; color: var(--muted); font-size: 0.82rem; }

/* ---------- Lab tests (product page) ---------- */
.product-section { scroll-margin-top: calc(var(--header-h) + 24px); }
.lab-proof {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 12px;
	padding: 12px 16px;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: rgba(127, 224, 176, 0.035);
	font-size: 0.88rem;
	text-decoration: none;
	transition: background 0.2s, border-color 0.2s;
}
.lab-proof:hover { background: var(--glass-2); border-color: var(--line-2); }
.lab-proof .icon { flex: none; width: 18px; height: 18px; color: var(--success); }
.lab-proof__text { flex: 1; font-variant-numeric: tabular-nums; }
.lab-proof__by { color: var(--muted); font-size: 0.78rem; white-space: nowrap; }

.lab-intro { max-width: 52ch; margin: 0 0 16px; }
.lab-tests { display: grid; gap: 12px; margin: 0 0 16px; padding: 0; list-style: none; }
.lab-test {
	display: grid;
	grid-template-columns: clamp(96px, 22%, 124px) minmax(0, 1fr);
	grid-template-areas: "scan head" "scan results" "scan verify";
	align-content: start;
	gap: 14px 20px;
	padding: 16px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--glass);
	box-shadow: var(--glass-edge);
}
.lab-test__scan {
	grid-area: scan;
	position: relative;
	align-self: start;
	overflow: hidden;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.9);
}
.lab-test__scan img { display: block; width: 100%; height: auto; transition: transform 0.5s var(--ease); }
.lab-test__scan:hover img { transform: scale(1.05); }
.lab-test__zoom {
	position: absolute;
	right: 6px;
	bottom: 6px;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(5, 6, 8, 0.78);
	color: var(--text);
}
.lab-test__zoom .icon { width: 14px; height: 14px; }
.lab-test__head { grid-area: head; }
.lab-test__meta { margin: 0 0 6px; color: var(--faint); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; }
.lab-test__title { margin: 0; font: 500 1.05rem/1.3 var(--font-display); letter-spacing: -0.01em; }
.lab-test__date { margin: 4px 0 0; color: var(--muted); font-size: 0.82rem; }
.lab-test__results { grid-area: results; margin: 0; }
.lab-test__results > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 0.88rem; }
.lab-test__results > div:last-child { border-bottom: 1px solid var(--line); }
.lab-test__results dt { color: var(--muted); }
.lab-test__results dd { margin: 0; font: 500 0.95rem/1.2 var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.lab-test__results .is-pass { padding: 3px 8px; border-radius: 6px; background: rgba(127, 224, 176, 0.1); color: var(--success); font-size: 0.78rem; letter-spacing: 0.06em; }
.lab-test__verify { grid-area: verify; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 0.8rem; }
.lab-test__key {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 12px;
	border: 1px dashed var(--line-2);
	border-radius: 8px;
	background: transparent;
	color: var(--text);
	font: 400 0.8rem/1 var(--font-mono);
	letter-spacing: 0.06em;
	cursor: pointer;
	transition: background 0.2s, border-color 0.2s;
}
.lab-test__key:hover { border-color: var(--silver-2); background: var(--glass-2); }
.lab-test__key .icon { width: 15px; height: 15px; color: var(--muted); }
.lab-test__copied-icon,
.lab-test__key.is-copied .lab-test__copy { display: none; }
.lab-test__key.is-copied .lab-test__copied-icon { display: block; color: var(--success); }
.lab-test__status { color: var(--success); }
.lab-test__link { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin-left: auto; color: var(--muted); text-decoration: none; transition: color 0.2s; }
.lab-test__link:hover { color: var(--text); }
.lab-test__link .icon { width: 15px; height: 15px; transition: transform 0.25s var(--ease); }
.lab-test__link:hover .icon { transform: translateX(3px); }

/* Full-size report: natural width, scrolls inside on short screens. */
.lab-viewer {
	width: min(694px, 94vw);
	max-width: none;
	max-height: 94svh;
	padding: 0;
	overflow-y: auto;
	border: 0;
	border-radius: var(--radius-sm);
	background: #fff;
	box-shadow: var(--shadow-deep);
}
.lab-viewer::backdrop { background: rgba(2, 3, 5, 0.84); backdrop-filter: blur(6px); }
.lab-viewer__img { display: block; width: 100%; height: auto; }
.lab-viewer__close { position: fixed; top: 16px; right: 16px; z-index: 1; background: rgba(5, 6, 8, 0.8); color: var(--text); }
.lab-viewer__close .icon { width: 20px; height: 20px; }

@media (max-width: 599px) {
	.lab-test { grid-template-columns: 84px minmax(0, 1fr); grid-template-areas: "scan head" "results results" "verify verify"; gap: 14px; padding: 14px; }
	.lab-test__link { margin-left: 0; }
}

/* ---------- Prose (legal pages) ---------- */
.prose { padding: clamp(24px, 5vw, 56px); color: #cdd2d9; }
.prose h1,
.prose h2,
.prose h3 { margin-top: 1.8em; color: var(--text); font-size: 1.25rem; }
.prose > :first-child { margin-top: 0; }
.prose ul,
.prose ol { padding-left: 1.2em; }
.prose a { color: var(--accent); }

.empty-state { padding-block: 12vh; text-align: center; }
.empty-state .button-row { justify-content: center; }

/* ==========================================================================
   WooCommerce — cart, checkout, account, notices
   ========================================================================== */
.wc-step-bar {
	display: flex;
	gap: 6px;
	margin-bottom: 32px;
	font: 500 0.72rem/1 var(--font-mono);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--faint);
}
.wc-step-bar span { flex: 1; padding-top: 12px; border-top: 1px solid var(--line-2); }
.wc-step-bar .is-done { color: var(--muted); border-top-color: var(--silver-2); }
.wc-step-bar .is-active { color: var(--text); border-top: 2px solid var(--silver-1); }

.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 24px;
	padding: 14px 18px;
	border: 1px solid var(--line-2);
	border-radius: var(--radius-sm);
	background: var(--glass);
	list-style: none;
	font-size: 0.92rem;
}
.woocommerce-message { border-color: rgba(127, 224, 176, 0.3); }
.woocommerce-error { border-color: rgba(255, 143, 143, 0.35); color: #ffd3d3; }
.woocommerce-error li { width: 100%; }
.woocommerce-message .button,
.woocommerce-info .button { order: 2; min-height: 38px; padding: 0 16px; font-size: 0.85rem; }

.wc-surface .woocommerce { display: block; }
.woocommerce-cart-form { margin-bottom: 32px; }
table.shop_table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--glass);
	overflow: hidden;
}
table.shop_table th,
table.shop_table td { padding: 16px 18px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
table.shop_table thead th { color: var(--faint); font: 500 0.7rem/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; }
table.shop_table tr:last-child > * { border-bottom: 0; }
table.shop_table .product-thumbnail img { width: 64px; height: 80px; object-fit: cover; border-radius: 10px; background: #000; }
table.shop_table .product-name a { text-decoration: none; font-weight: 500; }
table.shop_table .product-remove a { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--muted); text-decoration: none; font-size: 1.2rem; }
table.shop_table .product-remove a:hover { background: var(--glass-2); color: var(--text); }
table.shop_table .quantity .qty { width: 72px; min-height: 42px; padding: 8px; border: 1px solid var(--line-2); border-radius: 999px; background: transparent; text-align: center; }
table.shop_table td.actions { padding: 16px 18px; }
table.shop_table td.actions .coupon { display: inline-flex; gap: 8px; }
table.shop_table td.actions .coupon .input-text { width: 180px; min-height: 44px; }
table.shop_table td.actions > .button { float: right; --b-bg: rgba(255, 255, 255, 0.05); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); min-height: 44px; }
table.shop_table td.actions > .button:disabled { opacity: 0.4; }
table.shop_table dl.variation { display: flex; gap: 6px; margin: 4px 0 0; color: var(--muted); font-size: 0.82rem; }
table.shop_table dl.variation dd,
table.shop_table dl.variation p { margin: 0; }

.cart-collaterals { display: flex; justify-content: flex-end; }
.cart_totals { width: min(440px, 100%); }
.cart_totals h2 { font-size: 1.2rem; }
.cart_totals .shop_table th { width: 40%; color: var(--muted); font-weight: 400; }
.cart_totals .order-total .amount { font: 400 1.4rem/1 var(--font-display); }
.wc-proceed-to-checkout { margin-top: 16px; }
.wc-proceed-to-checkout .checkout-button { width: 100%; min-height: 54px; }
#shipping_method { margin: 0; padding: 0; list-style: none; }
.woocommerce-shipping-destination,
.woocommerce-shipping-calculator { color: var(--muted); font-size: 0.85rem; }

.cart-empty.woocommerce-info { justify-content: center; padding: 48px 24px; font-size: 1.05rem; }
.return-to-shop { text-align: center; }

form.checkout { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(24px, 4vw, 48px); align-items: start; }
form.checkout .col2-set { grid-column: 1; }
form.checkout #order_review_heading,
form.checkout #order_review { grid-column: 2; }
form.checkout #order_review_heading { grid-row: 1; margin: 0; font-size: 1.2rem; }
form.checkout #order_review { grid-row: 1 / span 2; margin-top: 2.4rem; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--glass); box-shadow: var(--glass-edge), var(--shadow-deep); position: sticky; top: calc(var(--header-h) + 24px); }
form.checkout .col2-set .col-1,
form.checkout .col2-set .col-2 { width: 100%; float: none; }
form.checkout h3 { font-size: 1.2rem; margin-top: 1.4em; }
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.woocommerce form .form-row { margin: 0 0 14px; padding: 0; }
.woocommerce form .form-row-wide,
#billing_address_1_field,
#billing_address_2_field,
#billing_country_field,
#billing_email_field,
#billing_company_field,
#shipping_address_1_field,
#shipping_address_2_field,
#shipping_country_field,
#order_comments_field { grid-column: 1 / -1; }
.woocommerce form .form-row .required { color: var(--muted); text-decoration: none; }
.woocommerce form .form-row.woocommerce-invalid .input-text { border-color: rgba(255, 143, 143, 0.6); }
.woocommerce form .form-row textarea { min-height: 110px; }
/* Order summary as a list: label left, amount right on every row (a two-column table squeezed the
   amounts into the middle of a narrow column and broke "5 739,00 Kč" across lines). */
#order_review table.shop_table,
#order_review table.shop_table tbody,
#order_review table.shop_table tfoot { display: block; border: 0; background: none; }
#order_review table.shop_table thead { display: none; }
#order_review table.shop_table tr { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 20px; padding: 14px 0; border-bottom: 1px solid var(--line); }
#order_review table.shop_table th,
#order_review table.shop_table td { display: block; padding: 0; border: 0; }
#order_review .cart_item .product-name { flex: 1; min-width: 0; line-height: 1.45; }
#order_review .cart_item .product-quantity { color: var(--muted); font-weight: 400; white-space: nowrap; }
#order_review .product-total,
#order_review tfoot td { margin-left: auto; text-align: right; }
#order_review tfoot th { color: var(--muted); font-weight: 400; }
/* Shipping choices: full-width selectable rows (radio, method, price) under the "Doprava" label. */
#order_review .woocommerce-shipping-totals { flex-direction: column; align-items: stretch; gap: 10px; }
#order_review .woocommerce-shipping-totals td { margin-left: 0; text-align: left; }
#order_review #shipping_method { display: grid; gap: 8px; }
#order_review #shipping_method li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); text-align: left; transition: border-color 0.2s, background 0.2s; }
#order_review #shipping_method li:has(input:checked) { border-color: var(--silver-2); background: rgba(255, 255, 255, 0.05); }
#order_review #shipping_method li input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--silver-1); }
#order_review #shipping_method li label { flex: 1; cursor: pointer; }
#payment ul.payment_methods li > input { width: 18px; height: 18px; margin: 0 10px 0 0; vertical-align: -3px; accent-color: var(--silver-1); }
#order_review .order-total { align-items: center; border-bottom: 0; padding-top: 18px; }
#order_review .order-total th { color: var(--text); font-weight: 500; }
#order_review .order-total .amount { font: 400 1.4rem/1 var(--font-display); }
#payment ul.payment_methods { margin: 16px 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
#payment ul.payment_methods li { padding: 14px 0; border-bottom: 1px solid var(--line); }
#payment .payment_box { margin-top: 10px; padding: 12px 14px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.03); color: var(--muted); font-size: 0.88rem; }
#payment .payment_box p { margin: 0; }
#payment .place-order { padding: 0; }
#payment #place_order { width: 100%; min-height: 56px; margin-top: 12px; font-size: 1rem; }
.woocommerce-terms-and-conditions-wrapper,
.research-confirm { font-size: 0.85rem; color: var(--muted); }
.research-confirm { margin-top: 12px !important; padding: 12px 14px !important; border: 1px solid var(--line-2); border-radius: var(--radius-sm); }
.woocommerce form .form-row .input-checkbox { margin-right: 8px; accent-color: var(--silver-1); }
.woocommerce-privacy-policy-text { font-size: 0.8rem; color: var(--faint); }

.woocommerce-order { display: grid; gap: 24px; }
.woocommerce-thankyou-order-received { font: 400 clamp(1.6rem, 3vw, 2.4rem)/1.2 var(--font-display); letter-spacing: -0.02em; }
ul.woocommerce-order-overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
ul.woocommerce-order-overview li { padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--glass); color: var(--muted); font-size: 0.8rem; }
ul.woocommerce-order-overview li strong { display: block; margin-top: 6px; color: var(--text); font-size: 1rem; font-weight: 500; }
.woocommerce-bacs-bank-details { padding: 24px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--glass); }
.wc-bacs-bank-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.wc-bacs-bank-details li { color: var(--muted); font-size: 0.82rem; }
.wc-bacs-bank-details strong { display: block; color: var(--text); font: 500 0.95rem/1.4 var(--font-mono); }

.woocommerce-account .woocommerce { display: grid; grid-template-columns: 240px 1fr; gap: 32px; }
.woocommerce-MyAccount-navigation ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.woocommerce-MyAccount-navigation a { display: block; padding: 10px 14px; border-radius: var(--radius-sm); color: var(--muted); text-decoration: none; }
.woocommerce-MyAccount-navigation .is-active a,
.woocommerce-MyAccount-navigation a:hover { background: var(--glass-2); color: var(--text); }
.woocommerce-account:not(.logged-in) .woocommerce { display: block; max-width: 480px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { position: relative; padding-top: clamp(56px, 8vw, 96px); border-top: 1px solid var(--line); background: linear-gradient(180deg, var(--bg-2), #030405); }
.site-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.site-footer__brand p { max-width: 30em; margin-top: 20px; color: var(--muted); font-size: 0.9rem; }
.site-footer__col ul { display: grid; gap: 10px; margin: 0 0 10px; padding: 0; list-style: none; }
.site-footer__col a { color: var(--muted); font-size: 0.9rem; text-decoration: none; }
.site-footer__col a:hover { color: var(--text); }
.site-footer__company { color: var(--faint); font-size: 0.85rem; }
.site-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: 48px; padding-block: 24px; border-top: 1px solid var(--line); color: var(--faint); font-size: 0.78rem; }
.site-footer__base p { margin: 0; max-width: 60em; }

/* ==========================================================================
   Motion
   ========================================================================== */
[data-tilt] {
	--rx: 0deg;
	--ry: 0deg;
	transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));
	transition: transform 0.6s var(--ease);
}
[data-tilt].is-tilting { transition: transform 0.12s linear; }

/* Only content that starts below the fold is armed (main.js): the first screen never waits for script. */
[data-reveal].is-armed { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
[data-reveal].is-armed.is-visible { opacity: 1; transform: none; }
[data-reveal][data-tilt].is-armed.is-visible { transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)); }

@keyframes cue { from { transform: translateY(-100%); } to { transform: translateY(100%); } }

@keyframes drip { 0% { transform: translateY(-100%); } 100% { transform: translateY(250%); } }
@keyframes marquee { to { transform: translate3d(-50%, 0, 0); } }
@keyframes pop {
	0% { transform: scale(1); }
	40% { transform: scale(1.35); }
	100% { transform: scale(1); }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1099px) {
	.product-grid { grid-template-columns: repeat(2, 1fr); }
	.site-footer__grid { grid-template-columns: 1fr 1fr; }
	.site-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 899px) {
	:root { --header-h: 60px; }

	.site-header__switchers { display: none; }
	.nav-toggle {
		display: inline-grid;
		place-items: center;
		width: 44px;
		height: 44px;
		border: 1px solid var(--line);
		border-radius: 50%;
		background: var(--glass);
		cursor: pointer;
	}
	.nav-toggle__bars { display: grid; gap: 5px; width: 16px; }
	.nav-toggle__bars span { height: 1.5px; background: currentColor; border-radius: 2px; transition: transform 0.35s var(--ease); }
	.nav-open .nav-toggle__bars span:first-child { transform: translateY(3.25px) rotate(45deg); }
	.nav-open .nav-toggle__bars span:last-child { transform: translateY(-3.25px) rotate(-45deg); }
	.site-header__inner { grid-template-columns: 1fr auto; }
	.site-header__actions { margin-left: auto; }
	.site-nav {
		position: fixed;
		inset: var(--header-h) 0 auto;
		display: grid;
		gap: 24px;
		padding: 24px var(--gutter) 32px;
		border-bottom: 1px solid var(--line);
		background: rgba(5, 6, 8, 0.96);
		-webkit-backdrop-filter: blur(20px);
		backdrop-filter: blur(20px);
		transform: translateY(-8px);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0s 0.3s;
	}
	.nav-open .site-nav { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
	.site-nav__list { flex-direction: column; gap: 2px; }
	.site-nav__list a { padding: 14px 4px; border-radius: 0; border-bottom: 1px solid var(--line); font: 400 1.4rem/1.2 var(--font-display); color: var(--text); }
	.site-nav__list a:hover,
	.site-nav__list .current-menu-item > a { background: none; }
	.site-nav__switchers { display: flex; gap: 10px; }

	/* Hero: text below the vial, shorter scroll. */
	.hero { height: 220vh; }
	.beat,
	.beat--lead,
	.beat--right,
	.beat--left { left: var(--gutter); right: var(--gutter); top: auto; bottom: 12vh; max-width: none; text-align: left; }
	.beat--right .lede { margin-left: 0; }
	.beat--next { left: var(--gutter); right: var(--gutter); bottom: 10vh; max-width: none; }
	.hero__progress { display: none; }
	.hero__vignette { background: radial-gradient(ellipse 90% 60% at 50% 40%, transparent 30%, rgba(5, 6, 8, 0.7) 100%), linear-gradient(180deg, rgba(5, 6, 8, 0.6) 0%, transparent 15%, transparent 45%, rgba(5, 6, 8, 0.92) 75%, var(--bg) 100%); }

	/* Showcase: native swipe carousel, no pinning. */
	.showcase { height: auto; padding-block: 56px 72px; }
	.showcase__stage { position: relative; height: auto; overflow: visible; }
	.showcase__head { position: relative; top: auto; margin-bottom: 20px; }
	.showcase__stage::before,
	.showcase__stage::after { height: 56px; }
	.showcase__track {
		position: static;
		display: flex;
		gap: 14px;
		padding: 0 var(--gutter) 8px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--gutter);
		scrollbar-width: none;
	}
	.showcase__track::-webkit-scrollbar { display: none; }
	.slide {
		position: relative;
		left: auto;
		top: auto;
		flex: none;
		width: 82vw;
		max-width: 380px;
		transform: none;
		opacity: 1;
		filter: none;
		mix-blend-mode: normal;
		scroll-snap-align: start;
		transition: opacity 0.6s var(--ease), transform 0.8s var(--ease);
	}
	.slide:not(.is-current) { opacity: 0.5; transform: scale(0.93); }
	.js .showcase__stage:not(.is-in) .slide { opacity: 0; transform: translate3d(0, 48px, 0) scale(0.96); }
	.showcase__stage.is-entering .slide { transition-delay: calc(var(--i, 0) * 90ms); }
	.showcase__dot::before { transform: scaleX(0); transition: transform 0.5s var(--ease); }
	.showcase__dot.is-active::before { transform: scaleX(1); }
	.slide__panel { display: block; margin-top: -40px; padding: 22px; }
	.showcase__panels { display: none; }
	.showcase__nav { position: static; margin-top: 20px; }
	.showcase__dot span { display: none; }
	/* Thin line stays the visual; the button itself keeps a thumb-sized hit area. */
	.showcase__dot { padding-top: 0; height: 40px; }

	.standard__grid { grid-template-columns: 1fr; }
	.standard__aside { position: static; }
	.standard__frame { height: auto; max-width: none; aspect-ratio: 16 / 10; }
	.standard__item { grid-template-columns: 40px 1fr; }
	.standard__meta { grid-column: 2; }
	.catalog-band__row { flex-direction: column; align-items: flex-start; }
	.research-standard__inner { grid-template-columns: 1fr; }
	.research-standard__label { padding-top: 0; }
	.research-standard__mail { justify-self: start; }
	.product-layout,
	.support-grid { grid-template-columns: 1fr; }
	.product-stage,
	.support-side { position: relative; top: 0; }
	/* Keep the title and price in reach of the first screen on phones. */
	.product-stage { height: clamp(280px, 56svh, 560px); }
	form.checkout { grid-template-columns: 1fr; }
	form.checkout .col2-set,
	form.checkout #order_review_heading,
	form.checkout #order_review { grid-column: 1; grid-row: auto; position: static; margin-top: 0; }
	.woocommerce-account .woocommerce { grid-template-columns: 1fr; }

	/* Cart table → stacked cards. */
	table.shop_table_responsive,
	table.shop_table_responsive tbody { display: block; width: 100%; }
	table.shop_table_responsive thead { display: none; }
	table.shop_table_responsive tr { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 4px 12px; padding: 14px; border-bottom: 1px solid var(--line); }
	table.shop_table_responsive td { min-width: 0; padding: 0; border: 0; }
	table.shop_table_responsive td.product-name { grid-column: 2; grid-row: 1; overflow-wrap: anywhere; }
	table.shop_table_responsive td.product-remove a { width: 44px; height: 44px; margin: -7px -7px 0 0; }
	table.shop_table_responsive td.product-thumbnail { grid-row: span 4; }
	table.shop_table_responsive td.product-remove { grid-column: 3; grid-row: 1; }
	table.shop_table_responsive td.product-price,
	table.shop_table_responsive td.product-quantity,
	table.shop_table_responsive td.product-subtotal { grid-column: 2 / -1; display: flex; justify-content: space-between; font-size: 0.9rem; }
	table.shop_table_responsive td[data-title]::before { content: attr(data-title); color: var(--faint); font-size: 0.8rem; }
	table.shop_table_responsive td.product-name::before,
	table.shop_table_responsive td.product-thumbnail::before,
	table.shop_table_responsive td.product-remove::before,
	table.shop_table_responsive td.actions::before { display: none; }
	table.shop_table_responsive tr:has(td.actions) { display: block; }
	table.shop_table td.actions .coupon { display: flex; flex-wrap: wrap; width: 100%; margin-bottom: 10px; }
	table.shop_table td.actions .coupon .input-text { flex: 1 1 160px; width: auto; min-width: 0; }
	table.shop_table td.actions .coupon .button { flex: 1 0 auto; white-space: nowrap; }
	table.shop_table td.actions > .button { float: none; width: 100%; }
	.cart_totals table.shop_table_responsive tr { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
	.cart_totals table.shop_table_responsive th { width: auto; padding: 0; border: 0; }
	.cart_totals table.shop_table_responsive td { text-align: right; }
	.cart_totals table.shop_table_responsive td::before { display: none; }
}

@media (max-width: 599px) {
	.product-grid { grid-template-columns: 1fr; }
	.site-footer__grid { grid-template-columns: 1fr; }
	.woocommerce-billing-fields__field-wrapper,
	.woocommerce-shipping-fields__field-wrapper { grid-template-columns: 1fr; }
	.research-bar { font-size: 0.62rem; }
	.site-footer__col ul { gap: 0; }
	.site-footer__col a { display: inline-block; padding-block: 11px; }
	.wordmark__main { font-size: 0.9rem; letter-spacing: 0.36em; margin-right: -0.36em; }
}

@media (hover: none) {
	[data-tilt] { transform: none !important; }
	/* No sticky hover lift after a tap on touch screens. */
	.button:hover,
	.woocommerce a.button:hover,
	.woocommerce button.button:hover { transform: none; filter: none; }
	.product-card:hover .product-card__img { transform: none; }
	.big-link:hover .big-link__icon { transform: none; }
}

/* Reduced motion: no scrubbing, no parallax, no tilt — content stays fully visible. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
/* Reduced motion hero: one calm, static screen — headline + actions beside the vial. */
.is-reduced-motion .hero { height: auto; }
.is-reduced-motion .hero__stage { position: relative; }
.is-reduced-motion .hero__media { transform: none !important; opacity: 1; }
.is-reduced-motion .hero__canvas,
.is-reduced-motion .hero__sweep,
.is-reduced-motion .hero__progress,
.is-reduced-motion .scroll-cue,
.is-reduced-motion .beat--right,
.is-reduced-motion .beat--left,
.is-reduced-motion .hero__beats { position: absolute; inset: auto auto 12vh max(var(--gutter), calc((100% - var(--max)) / 2)); display: flex; flex-direction: column; gap: 28px; width: min(600px, 36vw); padding: 0; }
.is-reduced-motion .beat { position: relative; inset: auto; max-width: none; opacity: 1 !important; transform: none !important; text-align: left; }

.is-reduced-motion .showcase__head { position: relative; }
@media (max-width: 899px) {
	.is-reduced-motion .hero__beats { inset: auto var(--gutter) 8vh; width: auto; }
}
.is-reduced-motion [data-tilt],
.is-reduced-motion [data-parallax] { transform: none !important; }
.is-reduced-motion [data-reveal] { opacity: 1; transform: none; }
@media (min-width: 900px) {
	.is-reduced-motion .showcase { height: auto; padding-block: 80px; }
	.is-reduced-motion .showcase__stage { position: relative; height: auto; overflow: visible; }
	.is-reduced-motion .showcase__head { position: static; margin-bottom: 32px; }
	.is-reduced-motion .showcase__track { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; padding-inline: var(--gutter); max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; }
	.is-reduced-motion .slide { position: relative; left: auto; top: auto; width: auto; transform: none; opacity: 1; filter: none; mix-blend-mode: normal; }
	.is-reduced-motion .slide__panel { display: block; margin-top: -30px; padding: 20px; }
	.is-reduced-motion .showcase__stage::before,
	.is-reduced-motion .showcase__stage::after,
	.is-reduced-motion .showcase__panels,
	.is-reduced-motion .showcase__nav { display: none; }
}

/* ==========================================================================
   Short screens (laptops ≤ 820px tall): tighter rhythm so every section fits one screen.
   ========================================================================== */
@media (min-width: 900px) and (max-height: 820px) {
	.research-bar { padding-block: 5px; }
	.spec-list > div { padding: 6px 0; font-size: 0.85rem; }
	.pill span { min-height: 38px; }
	.button,
	.woocommerce a.button,
	.woocommerce button.button { min-height: 42px; }
	.buy-box { gap: 12px; }
	.price-tag { font-size: 1.35rem; }
	.showcase__head .headline { margin-bottom: 0; }
	.showcase__nav { bottom: 2.5vh; }
	.standard__item { padding: 22px 0; }
	.disclaimer--boxed { padding: 12px 14px; font-size: 0.78rem; }
	.field input,
	.woocommerce form .form-row .input-text { min-height: 42px; padding: 9px 12px; }
	.field textarea { min-height: 88px; }
	.form { gap: 10px; margin-top: 14px; }
	.page-hero .lede { font-size: 1rem; }
	.faq__item summary { padding: 15px 18px; }
}

/* ==========================================================================
   Fluid layout: 360 px phones → 4K. Hero copy is placed relative to the vial (not the screen
   edges), type and measure stop growing at a premium size, touch targets and safe areas.
   ========================================================================== */

/* ---------- Hero media: poster (LCP) → frames (html.lite) → live 3D (html.gl) ---------- */
/* All three use the same camera and are fitted to the stage height and centred, so each hands
   over to the next in place; wider screens show page black at the sides (the frames fade out). */
.hero__poster { position: absolute; inset: 0; overflow: hidden; }
.hero__poster img { position: absolute; top: 0; left: 50%; width: auto; height: 100%; max-width: none; transform: translateX(-50%); }
.hero__frames { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.hero__frames.is-on { opacity: 1; }
.hero.has-gl .hero__poster,
.hero.has-gl .hero__frames { opacity: 0; transition: opacity 0.35s var(--ease) 0.6s; }

/* ---------- Hero copy ---------- */
.hero {
	/* Half the vial's on-screen width (it fills 78 % of the stage height at a 0.43 aspect, plus the
	   highlight on the cap) and the air between vial and copy. */
	--vial-half: 19svh;
	--vial-gap: clamp(28px, 3.6vw, 96px);
	--beat-w: min(36rem, calc(50% - var(--vial-half) - var(--vial-gap) - var(--gutter)));
}
.hero__title { margin: 0; text-wrap: balance; }
.hero__title .eyebrow { display: block; margin-bottom: clamp(12px, 2svh, 20px); }
.hero__title .display { display: block; max-width: 14ch; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: clamp(18px, 3.2svh, 36px); }
.hero__actions .button { min-height: 52px; padding-inline: 26px; }
.hero__catalog { min-height: 44px; }
.beat .headline { max-width: 16ch; }
.beat .lede { max-width: 34ch; }
/* Soft scrim behind every beat: AA contrast over any frame of the turn, the backlight included. */
.beat { isolation: isolate; }
.beat::before {
	content: "";
	position: absolute;
	inset: -22% -16%;
	z-index: -1;
	background: radial-gradient(closest-side, rgba(5, 6, 8, 0.7), rgba(5, 6, 8, 0.35) 55%, rgba(5, 6, 8, 0));
	pointer-events: none;
}

/* Landscape stages (laptops → 4K, ultrawide, phones and tablets on their side): the vial stands
   centred and the copy takes the columns beside it, anchored to the vial. */
@media (min-aspect-ratio: 9/10) {
	.hero__beats { max-width: none; padding-inline: 0; }
	.beat,
	.beat--lead,
	.beat--right,
	.beat--left,
	.beat--next { width: var(--beat-w); max-width: none; text-align: left; }
	.beat--lead,
	.beat--left,
	.beat--next { left: auto; right: calc(50% + var(--vial-half) + var(--vial-gap)); }
	.beat--right { right: auto; left: calc(50% + var(--vial-half) + var(--vial-gap)); }
	.beat--right .lede { margin-left: 0; }
	.beat--lead { top: auto; bottom: 14svh; }
	.beat--next { top: auto; bottom: 12svh; }
	.beat--right,
	.beat--left { top: 34svh; bottom: auto; }
	.beat--lead .display { font-size: clamp(2rem, min(4.4vw, 8.4svh), 4.75rem); }
}

/* Portrait stages (phones, tablets upright, rotated monitors): vial in the upper part, copy below. */
@media (max-aspect-ratio: 9/10) {
	/* The vial starts under the header instead of behind it. */
	.hero__media { top: var(--header-h); }
	.hero__beats { padding-bottom: env(safe-area-inset-bottom); }
	.beat,
	.beat--lead,
	.beat--right,
	.beat--left,
	.beat--next { left: var(--gutter); right: var(--gutter); top: auto; bottom: 11svh; width: auto; max-width: 36rem; text-align: left; }
	.beat--right .lede { margin-left: 0; }
	.beat--lead .display { font-size: clamp(1.9rem, min(8.8vw, 5.4svh), 3.4rem); }
	.beat .headline { font-size: clamp(1.6rem, min(7.4vw, 4.4svh), 2.6rem); }
	.beat--lead { bottom: 8svh; }
	.hero__progress { display: none; }
	.scroll-cue { display: none; }
}
/* Low landscape screens (phones on their side): the cap would sit behind the header, so the stage
   starts under it, as on portrait screens. */
@media (min-aspect-ratio: 9/10) and (max-height: 600px) {
	.hero__media { top: var(--header-h); }
}
/* Short phones (≤ 700 px tall): the secondary catalog link (also in the menu) gives its line to the vial. */
@media (max-aspect-ratio: 9/10) and (max-height: 700px) {
	.hero__catalog { display: none; }
	.beat--lead { bottom: 6svh; }
}
@media (max-width: 899px) {
	.hero { height: 200vh; }
	.hero__actions { gap: 10px 18px; }
	.hero__actions .button { flex: 1 1 auto; max-width: 20rem; }
}

/* ---------- Grid items may shrink below their content (a sale price beside the quantity stepper
   must wrap, not widen the page on a 360 px phone) ---------- */
.product-layout > *,
.support-grid > *,
.standard__grid > *,
form.checkout > * { min-width: 0; }
.buy-box__row { flex-wrap: wrap; row-gap: 12px; }
/* Prices never break inside ("5 739,00 Kč" stays on one line). */
.woocommerce-Price-amount { white-space: nowrap; }
/* Thank-you order table: the total hugs its amount, the name gets the room. */
.woocommerce-table--order-details td.product-total,
.woocommerce-table--order-details tfoot td { width: 1%; white-space: nowrap; text-align: right; }

/* Checkboxes (terms, research confirmation, ship elsewhere, create account): one style, the box beside
   the label and the required star right after its text. */
.woocommerce form .form-row label.checkbox,
.woocommerce form .form-row .woocommerce-form__label-for-checkbox,
#ship-to-different-address label { position: relative; display: block; padding-left: 32px; cursor: pointer; }
.woocommerce form .form-row .input-checkbox,
#ship-to-different-address input[type="checkbox"] { position: absolute; left: 0; top: 2px; width: 20px; height: 20px; margin: 0; accent-color: var(--silver-1); }
#ship-to-different-address { margin: 1.6em 0 0.8em; font: 500 1rem/1.4 var(--font-body); letter-spacing: 0; }
.research-confirm label.checkbox { color: var(--text); }

/* Notices: the action is a quiet secondary button, not a second primary. */
.woocommerce-message .button,
.woocommerce-info .button { --b-bg: rgba(255, 255, 255, 0.06); min-height: 40px; color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
@media (max-width: 599px) {
	form.checkout #order_review { padding: 18px; }
	.woocommerce-message,
	.woocommerce-info { padding: 14px 16px; }
}
.price-tag { flex-wrap: wrap; row-gap: 4px; }

/* ---------- Reduced motion: one calm screen — the poster, the H1 and its actions beside or below
   the vial (beats 01–03 repeat what "Proč Nythera Labs" says right below). ---------- */
.is-reduced-motion .hero__progress,
.is-reduced-motion .scroll-cue,
.is-reduced-motion .beat--right,
.is-reduced-motion .beat--left,
.is-reduced-motion .beat--next { display: none; }
.is-reduced-motion .hero__beats { position: absolute; inset: 0; display: block; width: auto; max-width: none; padding: 0; }
.is-reduced-motion .beat--lead { position: absolute; }
@media (min-aspect-ratio: 9/10) {
	.is-reduced-motion .beat--lead { inset: auto calc(50% + var(--vial-half) + var(--vial-gap)) 14svh auto; }
}
@media (max-aspect-ratio: 9/10) {
	.is-reduced-motion .beat--lead { inset: auto var(--gutter) 8svh var(--gutter); }
}

/* ---------- Content measure ---------- */
.prose p,
.prose li,
.faq__answer p,
.product-section p { max-width: 72ch; }
.page-hero .display,
.page-hero .headline { max-width: 18ch; }
.page-hero .lede { max-width: 60ch; }
/* Page H1 = keyword eyebrow + display line (Výzkum, Kontakt). */
.page-title { margin: 0 0 0.3em; }
.page-title .eyebrow,
.page-title .display { display: block; }

/* ---------- Breadcrumbs (ordered list) ---------- */
.crumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 0; padding: 0; list-style: none; }
.crumbs__list li { display: inline-flex; align-items: center; gap: 8px; }
.crumbs__list a { display: inline-block; padding-block: 6px; }
.crumbs [aria-current] { color: var(--muted); }

/* ---------- Showcase on phones: product cards only (the vial is the hero above; a vial plus the card
   did not fit one screen). Tablets keep the vial. ---------- */
@media (max-width: 599px) {
	.slide__media { display: none; }
	.slide__panel { margin-top: 0; }
	.slide { width: 84vw; }
}

/* ---------- Showcase: turntable video on the snapped slide (html.lite) ---------- */
.slide__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 0.5s var(--ease); pointer-events: none; }
.slide__video.is-on { opacity: 1; }

/* ---------- Touch targets: 44 px on touch screens, 30 px or more with a mouse ---------- */
.switch a { display: grid; place-items: center; min-width: 36px; min-height: 30px; padding: 0 10px; }
.qty__btn { width: 44px; }
.woocommerce-mini-cart-item .remove { top: 6px; right: -9px; width: 44px; height: 44px; }
@media (pointer: coarse) {
	.switch a { min-width: 48px; min-height: 44px; font-size: 0.78rem; }
	.showcase__dot { height: 44px; }
	.crumbs__list a { padding-block: 11px; }
	.text-link { min-height: 44px; }
}

/* ---------- Forms: 16 px inputs (no iOS zoom on focus) ---------- */
input,
select,
textarea { font-size: max(1rem, 16px); }

/* ---------- Safe areas (notch, home indicator) ---------- */
.container,
.site-header__inner {
	padding-left: max(var(--gutter), env(safe-area-inset-left));
	padding-right: max(var(--gutter), env(safe-area-inset-right));
}
.site-footer__base { padding-bottom: max(24px, env(safe-area-inset-bottom)); }

/* ---------- Product cards adapt to their own width (container queries) ---------- */
.product-grid > li { container-type: inline-size; }
@container (max-width: 330px) {
	.product-card__body { padding-inline: 16px; }
	.product-card .buy-box__row { flex-wrap: wrap; gap: 8px; }
	.product-card .pill span { padding-inline: 8px; font-size: 0.82rem; }
}
@container (min-width: 440px) {
	.product-card__media { height: clamp(260px, 40svh, 460px); }
	.product-card__title { font-size: clamp(1.35rem, 3svh, 1.7rem); }
}

/* ---------- Phones ---------- */
@media (max-width: 899px) {
	/* Glass over the plain page background shows nothing but costs paint time: flat on phones. */
	.glass { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (max-width: 599px) {
	/* Mini cart: a full-screen sheet with its controls in thumb reach. */
	.cart-drawer__panel {
		inset: 0;
		width: 100%;
		border: 0;
		border-radius: 0;
		padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
		transform: translateY(24px);
		opacity: 0;
		transition: transform 0.45s var(--ease), opacity 0.3s var(--ease);
	}
	.cart-drawer.is-open .cart-drawer__panel { transform: none; opacity: 1; }
	.woocommerce-mini-cart__buttons .button { min-height: 52px; }
}

/* ---------- Product page: sticky buy bar on phones ---------- */
.buy-bar { display: none; }
@media (max-width: 899px) {
	.buy-bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 40;
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 10px max(var(--gutter), env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
		border-top: 1px solid var(--line);
		background: rgba(5, 6, 8, 0.9);
		-webkit-backdrop-filter: blur(16px) saturate(150%);
		backdrop-filter: blur(16px) saturate(150%);
		transform: translateY(110%);
		visibility: hidden;
		transition: transform 0.4s var(--ease), visibility 0s 0.4s;
	}
	.buy-bar.is-on { transform: none; visibility: visible; transition: transform 0.4s var(--ease), visibility 0s; }
	.buy-bar__info { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
	.buy-bar__name { overflow: hidden; color: var(--muted); font-size: 0.8rem; white-space: nowrap; text-overflow: ellipsis; }
	.buy-bar__price { font: 400 1.15rem/1.2 var(--font-display); }
	.buy-bar__price del { margin-right: 6px; color: var(--faint); font-size: 0.8em; }
	.buy-bar__price .woocommerce-Price-currencySymbol { font-size: 0.8em; color: var(--muted); }
	.buy-bar .button { flex: none; min-height: 48px; padding-inline: 20px; }
	.product-page { padding-bottom: 96px; }
	/* The vial still fills the stage; title, price and pack choice come up a screen earlier. */
	.product-stage { height: clamp(260px, 46svh, 520px); }
}

/* ---------- Large monitors: the same composition at a calmer scale ---------- */
/* 4K / 5K at 100 % scaling: the whole interface steps up once (type, controls, spacing in rem),
   so the header and copy keep their proportion to the full-height vial instead of shrinking. */
@media (min-width: 2400px) { html { font-size: 112.5%; } }
@media (min-width: 3200px) { html { font-size: 125%; } }
@media (min-width: 1800px) {
	.section-head { max-width: 48rem; }
	.product-layout { gap: clamp(48px, 5vw, 112px); }
	.marquee__item { font-size: clamp(4rem, 6vw, 7rem); }
}

/* ==========================================================================
   Navigation: lab-label links on desktop, full-screen sheet on phones
   ========================================================================== */
.site-nav__foot { display: none; }

/* Desktop: the links speak the same mono, wide-tracked language as the wordmark and the switchers;
   a hairline draws under the link on hover and stays under the current page. */
@media (min-width: 900px) {
	.site-nav__list { gap: 2px; }
	.site-nav__list a {
		padding: 14px 14px 13px;
		border-radius: 0;
		color: var(--muted);
		font: 500 0.72rem/1 var(--font-mono);
		letter-spacing: 0.16em;
		text-transform: uppercase;
	}
	.site-nav__list a::after {
		content: "";
		position: absolute;
		left: 14px;
		right: calc(14px + 0.16em);
		bottom: 6px;
		height: 1px;
		background: currentColor;
		transform: scaleX(0);
		transform-origin: left;
		transition: transform 0.45s var(--ease);
	}
	.site-nav__list a:hover,
	.site-nav__list .current-menu-item > a { background: none; color: var(--text); }
	.site-nav__list a:hover::after,
	.site-nav__list .current-menu-item > a::after { transform: scaleX(1); }
}

/* Phones and tablets: an opaque full-screen sheet under the header bar. The header drops its blur
   here: a backdrop-filter would make the header the containing block of the fixed sheet and shrink it. */
@media (max-width: 899px) {
	.site-header.is-scrolled,
	body:not(.is-home) .site-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(5, 6, 8, 0.94); }
	.nav-open .site-header { background: var(--bg); border-bottom-color: var(--line); }
	html.nav-locked { overflow: hidden; }

	.site-nav {
		position: fixed;
		inset: 0;
		z-index: -1;
		/* A positioned grid item keeps justify-self: center (desktop) and would shrink to its content. */
		justify-self: stretch;
		align-self: stretch;
		display: flex;
		flex-direction: column;
		gap: 0;
		height: 100vh;
		height: 100dvh;
		padding: calc(var(--header-h) + clamp(20px, 5svh, 48px)) max(var(--gutter), env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
		overflow-y: auto;
		border: 0;
		background:
			radial-gradient(70% 45% at 85% 0%, rgba(120, 170, 220, 0.08), transparent 70%),
			var(--bg);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		transform: none;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.35s var(--ease), visibility 0s 0.35s;
	}
	.nav-open .site-nav { opacity: 1; visibility: visible; transition: opacity 0.35s var(--ease), visibility 0s; }

	.site-nav__list { flex-direction: column; gap: 0; }
	.site-nav__list li { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity 0.5s var(--ease), transform 0.6s var(--ease); }
	.nav-open .site-nav__list li { opacity: 1; transform: none; }
	.nav-open .site-nav__list li:nth-child(2) { transition-delay: 0.05s; }
	.nav-open .site-nav__list li:nth-child(3) { transition-delay: 0.1s; }
	.nav-open .site-nav__list li:nth-child(4) { transition-delay: 0.15s; }
	.site-nav__list a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		min-height: 64px;
		padding: 6px 0;
		border: 0;
		border-radius: 0;
		color: var(--muted);
		font: 300 clamp(2rem, 9vw, 2.75rem)/1.1 var(--font-display);
		letter-spacing: -0.035em;
	}
	.site-nav__list a::after { content: ""; flex: none; width: 28px; height: 1px; background: currentColor; opacity: 0; transform: scaleX(0.4); transform-origin: right; transition: opacity 0.3s, transform 0.45s var(--ease); }
	.site-nav__list a:hover,
	.site-nav__list .current-menu-item > a { background: none; color: var(--text); }
	.site-nav__list .current-menu-item > a::after { opacity: 1; transform: none; }

	.site-nav__foot {
		display: grid;
		gap: 18px;
		margin-top: auto;
		padding-top: 28px;
		border-top: 1px solid var(--line);
		opacity: 0;
		transition: opacity 0.5s var(--ease) 0.15s;
	}
	.nav-open .site-nav__foot { opacity: 1; }
	.site-nav__switchers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
	.site-nav__switchers .switch { justify-content: stretch; padding: 4px; }
	.site-nav__switchers .switch li { flex: 1; }
	.site-nav__switchers .switch a { width: 100%; min-height: 44px; font-size: 0.8rem; }
	.site-nav__mail { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); font-size: 0.95rem; text-decoration: none; }
	.site-nav__mail:hover { color: var(--text); }
}

/* ==========================================================================
   Cart totals ("Celkem k platbě"): the same list language as the checkout summary
   ========================================================================== */
.cart_totals h2 { margin-bottom: 14px; }
.cart_totals table.shop_table,
.cart_totals table.shop_table tbody { display: block; width: 100%; }
.cart_totals table.shop_table tr { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 20px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.cart_totals table.shop_table tr:last-child { border-bottom: 0; }
.cart_totals table.shop_table th,
.cart_totals table.shop_table td { display: block; width: auto; padding: 0; border: 0; }
.cart_totals table.shop_table th { color: var(--muted); font-weight: 400; }
.cart_totals table.shop_table td { margin-left: auto; text-align: right; }
.cart_totals table.shop_table td::before { display: none; }
.cart_totals .woocommerce-shipping-totals { flex-direction: column; align-items: stretch; gap: 12px; }
.cart_totals table.shop_table .woocommerce-shipping-totals td { margin-left: 0; text-align: left; }
.cart_totals .order-total { align-items: center; padding-block: 20px; background: rgba(255, 255, 255, 0.025); }
.cart_totals table.shop_table .order-total th { color: var(--text); font-weight: 500; }

/* Shipping choices (cart and checkout): selectable rows, method left, price right. */
.cart_totals #shipping_method,
#order_review #shipping_method { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cart_totals #shipping_method li,
#order_review #shipping_method li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); text-align: left; transition: border-color 0.2s, background 0.2s; }
.cart_totals #shipping_method li:has(input:checked),
#order_review #shipping_method li:has(input:checked) { border-color: var(--silver-2); background: rgba(255, 255, 255, 0.05); }
.cart_totals #shipping_method li input,
#order_review #shipping_method li input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--silver-1); }
.cart_totals #shipping_method li label,
#order_review #shipping_method li label { display: flex; flex: 1; align-items: baseline; justify-content: space-between; gap: 6px 12px; cursor: pointer; }
.cart_totals #shipping_method li .amount,
#order_review #shipping_method li .amount { flex: none; margin-left: auto; }
.cart_totals .woocommerce-shipping-destination { margin: 2px 0 0; color: var(--faint); font-size: 0.82rem; line-height: 1.5; }
.cart_totals .woocommerce-shipping-destination strong { color: var(--muted); font-weight: 500; }
.cart_totals .cart-address-link { display: inline-flex; align-items: center; min-height: 32px; color: var(--muted); font-size: 0.82rem; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.cart_totals .cart-address-link:hover { color: var(--text); text-decoration-color: currentColor; }
.cart_totals table.shop_table tr:has(+ tr.cart-address) { padding-bottom: 4px; border-bottom: 0; }
.cart_totals table.shop_table tr.cart-address { padding-top: 0; }
.cart_totals table.shop_table tr.cart-address td { margin-left: 0; text-align: left; }

/* The old site printed its own header (language, currency and mobile menu markup) at the start of
   <body> from outside the theme; the theme has its own header. */
.nythera-elementor-header,
.nythera-language-switcher,
.nythera-mobile-menu { display: none !important; }

/* Packeta / Zásilkovna pickup point: the picker sits on its own line under the method name, aligned
   with the label text, as a quiet secondary button with the chosen point (or the hint) below it. */
.cart_totals #shipping_method li,
#order_review #shipping_method li { flex-wrap: wrap; }
#shipping_method li .rm-packeta-selector { display: grid; flex: 1 0 100%; justify-items: start; gap: 8px; padding-left: 30px; }
#shipping_method li .rm-packeta-selector:empty,
#shipping_method li:not(:has(input:checked)) .rm-packeta-selector { display: none; }
#shipping_method li .rm-packeta-open-widget.button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin: 0; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 999px; background: rgba(255, 255, 255, 0.06); box-shadow: none; color: var(--text); font-size: 0.85rem; font-weight: 500; letter-spacing: 0; transform: none; }
#shipping_method li .rm-packeta-open-widget.button::before { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11a7 7 0 0 1 14 0c0 4.8-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11a7 7 0 0 1 14 0c0 4.8-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat; }
#shipping_method li .rm-packeta-open-widget.button:hover { border-color: var(--silver-2); background: rgba(255, 255, 255, 0.1); }
#shipping_method li .rm-packeta-open-widget.button:active { transform: translateY(1px); }
#shipping_method li .rm-packeta-selected-point { color: var(--faint); font-size: 0.8rem; line-height: 1.5; }
#shipping_method li .rm-packeta-selected-point:not(:empty)[data-rm-packeta-selected]:not([data-rm-packeta-selected=""]) { color: var(--muted); }

/* WooCommerce dims the order review while it recalculates; its default white veil flashed over the
   dark page. A dark veil with a short fade keeps the update calm. */
.woocommerce .blockUI.blockOverlay,
.blockUI.blockOverlay { background: rgba(9, 10, 13, 0.55) !important; opacity: 1 !important; animation: nythera-veil 0.25s ease-out; }
@keyframes nythera-veil { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .blockUI.blockOverlay { animation: none; } }

/* Phone/tablet showcase carousel: every card the same height (the tallest one), buy area pinned to
   the bottom, and the snapped card centred. Neighbours only dim; they no longer scale, which made
   the card jump sideways and then back to the centre after each swipe. */
@media (max-width: 899px) {
	.showcase__track { --slide-w: min(82vw, 380px); align-items: stretch; scroll-padding-inline: 0; padding-inline: calc((100% - var(--slide-w)) / 2); }
	.slide { display: flex; flex-direction: column; width: var(--slide-w); scroll-snap-align: center; scroll-snap-stop: always; transition: opacity 0.35s var(--ease), transform 0.8s var(--ease); }
	.slide:not(.is-current) { transform: none; opacity: 0.45; }
	.slide__panel { display: flex; flex: 1; flex-direction: column; }
	.slide__panel .buy-box { margin-top: auto; padding-top: 12px; }
}
@media (max-width: 599px) {
	.showcase__track { --slide-w: 84vw; }
}

/* Catalog cards: the packshot blends into the card. Same black as the render's own background, and
   its edges (the studio side light) fade out, so no image box shows around the vial. The price and
   button sit on a hairline at the card bottom, so cards without pack options read as complete too. */
.product-card__media { background: radial-gradient(ellipse 70% 60% at 50% 42%, #07090c, #040608 70%); }
.product-card__media::after { content: ""; position: absolute; inset: auto 0 0; height: 22%; background: linear-gradient(transparent, rgba(4, 6, 8, 0.9)); pointer-events: none; }
.product-card__img {
	-webkit-mask-image: radial-gradient(ellipse 62% 78% at 50% 44%, #000 58%, transparent 100%);
	mask-image: radial-gradient(ellipse 62% 78% at 50% 44%, #000 58%, transparent 100%);
}
.product-card .buy-box { margin-top: auto; }
.product-card .buy-box__row { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }

/* Checkout login ("Vracíte se k nám?"): a quiet panel, name and password side by side, "remember me"
   and the button on one line. The show-password toggle WooCommerce adds after the password (an
   unstyled white button before) becomes an eye icon inside the field. */
form.woocommerce-form-login { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin: 0 0 28px; padding: clamp(18px, 2.4vw, 26px); border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255, 255, 255, 0.02); }
form.woocommerce-form-login > p:first-child { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.55; }
form.woocommerce-form-login .form-row-first,
form.woocommerce-form-login .form-row-last { width: auto; margin: 0; float: none; }
form.woocommerce-form-login .clear { display: none; }
form.woocommerce-form-login .form-row:not(.form-row-first):not(.form-row-last) { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin: 4px 0 0; }
form.woocommerce-form-login .woocommerce-form-login__rememberme { margin: 0; color: var(--muted); font-size: 0.9rem; }
.woocommerce form .form-row .woocommerce-form__input-checkbox { position: absolute; left: 0; top: 2px; width: 20px; height: 20px; margin: 0; accent-color: var(--silver-1); }
form.woocommerce-form-login .woocommerce-form-login__submit { min-width: 160px; margin: 0; }
form.woocommerce-form-login .lost_password { grid-column: 1 / -1; margin: 0; font-size: 0.85rem; }
form.woocommerce-form-login .lost_password a { color: var(--muted); }
form.woocommerce-form-login .lost_password a:hover { color: var(--text); }
@media (max-width: 599px) {
	form.woocommerce-form-login { grid-template-columns: 1fr; }
	form.woocommerce-form-login .woocommerce-form-login__submit { width: 100%; }
}

.password-input { position: relative; display: block; }
.password-input input { padding-right: 52px; }
.woocommerce .show-password-input,
.show-password-input { position: absolute; top: 50%; right: 6px; display: grid; place-items: center; width: 40px; height: 40px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 999px; background: transparent; box-shadow: none; color: var(--muted); cursor: pointer; transform: translateY(-50%); }
.show-password-input::after { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--eye) center / contain no-repeat; mask: var(--eye) center / contain no-repeat; --eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.show-password-input.display-password::after { --eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M4 4l16 16'/%3E%3C/svg%3E"); }
.show-password-input:hover,
.show-password-input:focus-visible { color: var(--text); background: rgba(255, 255, 255, 0.06); }

/* Mini cart item: the photo sits to the left and the text flows beside it. (The grid with the link set
   to display: contents broke apart when the name came in several pieces, e.g. "Name - 1 Lahvička",
   and pushed the pack under the photo.) */
.woocommerce-mini-cart-item { display: block; min-height: 108px; padding: 14px 32px 14px 78px; }
.woocommerce-mini-cart-item a:not(.remove) { display: block; line-height: 1.35; }
.woocommerce-mini-cart-item img { position: absolute; top: 14px; left: 0; }
.woocommerce-mini-cart-item dl.variation { margin-top: 4px; }
.woocommerce-mini-cart-item .quantity { display: block; margin-top: 6px; }