/* =========================================================
   Auryx Lab — Design tokens
   ========================================================= */
:root {
	--color-bg: #F7F8F7;
	--color-surface: #FFFFFF;
	--color-text: #0B0F0B;
	--color-muted: #5C635B;
	--color-faint: #8A9088;
	/* Electric mint is reserved for data and accents.
	   --color-accent      pure mint — only on dark surfaces and data readouts.
	   --color-accent-dark fills/hover backgrounds (always with dark text on top).
	   --color-accent-dim  accent *text* on the light background; #00FFC2 sits at
	                       ~1.4:1 there, which is unreadable, so text uses this. */
	--color-accent: #1E6F6A;
	--color-accent-dark: #1E6F6A;
	--color-accent-dim: #00795A;
	--color-dark: #1C1C1C;
	--color-ink: #0B0F0B;
	--color-border: #E3E6E2;
	--color-border-strong: #CDD2CB;
	--color-alert: #8A5E1F;
	--color-alert-bg: #FBF2E4;
	--color-alert-border: #EBD9B8;

	--font-display: "Space Grotesk", "Neue Montreal", system-ui, sans-serif;
	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

	--radius: 2px;
	--radius-lg: 4px;

	--container: 1280px;
	--gutter: 1.25rem;

	--space-section: 4rem;

	--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
	--speed: 0.32s;

	/* Layered shadows — a tight contact shadow plus a wide ambient one. A single
	   large blur is what makes cards read as flat stickers. */
	--shadow-card:
		0 1px 1px rgba(11, 15, 11, 0.04),
		0 2px 6px -2px rgba(11, 15, 11, 0.06);
	--shadow-raise:
		0 1px 1px rgba(11, 15, 11, 0.05),
		0 6px 14px -6px rgba(11, 15, 11, 0.10),
		0 18px 36px -18px rgba(11, 15, 11, 0.14);
	--shadow-lift:
		0 2px 4px rgba(11, 15, 11, 0.06),
		0 14px 28px -10px rgba(11, 15, 11, 0.14),
		0 32px 56px -24px rgba(11, 15, 11, 0.20);
}

@media (min-width: 640px) {
	:root { --gutter: 2rem; --space-section: 5.5rem; }
}
@media (min-width: 1024px) {
	:root { --gutter: 2.5rem; --space-section: 7rem; }
}

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

html {
	scroll-behavior: smooth;
	/* Sticky header + marquee height, so #anchor links don't land under the bar. */
	scroll-padding-top: 6rem;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.65;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-synthesis-weight: none;
}

body.auryx-nav-open { overflow: hidden; }

a { color: inherit; text-decoration: none; }
img, svg, video { max-width: 100%; display: block; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }

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

:focus-visible {
	outline: 2px solid var(--color-accent-dim);
	outline-offset: 3px;
	border-radius: 1px;
}
/* Keep focus visible against the dark sections. */
.auryx-footer :focus-visible,
.auryx-regional :focus-visible,
.auryx-cta-band :focus-visible,
.auryx-spotlight-visual :focus-visible { outline-color: var(--color-accent); }

::selection { background: var(--color-accent); color: var(--color-text); }

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

.auryx-skip-link:focus {
	position: fixed !important;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 200;
	width: auto; height: auto;
	clip: auto;
	clip-path: none;
	margin: 0;
	padding: 0.75rem 1.25rem;
	background: var(--color-text);
	color: #fff;
	font-size: 0.9rem;
	border-radius: var(--radius);
}

.auryx-container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.auryx-muted { color: var(--color-faint); }

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

/* =========================================================
   Typography helpers
   ========================================================= */
.auryx-eyebrow {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-faint);
	margin-bottom: 1rem;
}
.auryx-eyebrow-accent { color: var(--color-accent-dim); }

/* Numbered section header: mono index + title on the left, a short descriptor
   on the right, ruled off underneath. */
.auryx-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem 3rem;
	flex-wrap: wrap;
	margin-bottom: 3rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--color-border);
}
.auryx-section-head > div { min-width: 0; }
.auryx-section-head .auryx-eyebrow { margin-bottom: 0.6rem; }
.auryx-section-title { font-size: clamp(1.75rem, 3.4vw, 2.5rem); font-weight: 700; }
.auryx-section-note {
	color: var(--color-muted);
	font-size: 0.95rem;
	max-width: 28ch;
	padding-bottom: 0.35rem;
}
.auryx-section-lede {
	margin-top: 1rem;
	color: var(--color-muted);
	max-width: 52ch;
}

/* =========================================================
   Buttons
   ========================================================= */
.auryx-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	padding: 0.95em 1.75em;
	min-height: 3rem;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1;
	border-radius: var(--radius);
	border: 1px solid transparent;
	text-align: center;
	transition: background var(--speed) var(--ease-out-quart),
		color var(--speed) var(--ease-out-quart),
		border-color var(--speed) var(--ease-out-quart),
		transform var(--speed) var(--ease-out-quart);
}
/* Solid buttons are mono/uppercase — "lab terminal" UI, per the type system. */
.auryx-btn-solid,
.auryx-btn-accent {
	font-family: var(--font-mono);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.auryx-btn-solid { background: var(--color-text); color: var(--color-bg); }
.auryx-btn-solid:hover { background: var(--color-accent-dark); color: var(--color-text); }

.auryx-btn-accent { background: var(--color-accent); color: var(--color-text); }
.auryx-btn-accent:hover { background: var(--color-accent-dark); }

.auryx-btn-outline { border-color: var(--color-border-strong); color: var(--color-text); }
.auryx-btn-outline:hover { border-color: var(--color-text); }

.auryx-btn-ghost {
	background: none;
	color: inherit;
	font-family: var(--font-mono);
	font-size: 0.82rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.95em 0;
	min-height: 0;
	border-bottom: 1px solid currentColor;
	border-radius: 0;
}
.auryx-btn-ghost:hover { color: var(--color-accent-dim); }

.auryx-arrow {
	display: inline-block;
	transition: transform var(--speed) var(--ease-out-quart);
}
.auryx-btn:hover .auryx-arrow { transform: translateX(4px); }

/* =========================================================
   Marquee bar
   ========================================================= */
/* Disclaimer copy is not data, so it stays off-white rather than mint. */
.auryx-marquee-bar {
	background: var(--color-ink);
	color: var(--color-bg);
	border-bottom: 1px solid var(--color-dark);
	overflow: hidden;
	position: relative;
	z-index: 60;
}
.auryx-marquee {
	display: flex;
	width: max-content;
	padding-block: 0.5rem;
	/* Two identical tracks side by side; translating exactly one track width
	   loops seamlessly regardless of viewport width. */
	animation: auryx-marquee 45s linear infinite;
}
.auryx-marquee-track { display: flex; flex: none; }
.auryx-marquee-item {
	font-family: var(--font-mono);
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	white-space: nowrap;
	padding-inline-end: 3rem;
}
@keyframes auryx-marquee {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.auryx-marquee { animation: none; }
	.auryx-marquee-track + .auryx-marquee-track { display: none; }
}

/* =========================================================
   Header
   ========================================================= */
.auryx-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: transparent;
	border-bottom: 1px solid transparent;
	transition: background var(--speed) var(--ease-out-quart),
		border-color var(--speed) var(--ease-out-quart);
}
.auryx-header.is-scrolled {
	background: rgba(247, 248, 247, 0.82);
	backdrop-filter: blur(14px) saturate(1.4);
	-webkit-backdrop-filter: blur(14px) saturate(1.4);
	border-bottom-color: var(--color-border);
}
/* Backdrop-filter is unreliable behind fixed nav drawers; fall back to opaque. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.auryx-header.is-scrolled { background: var(--color-bg); }
}

.auryx-header-inner {
	max-width: var(--container);
	margin-inline: auto;
	padding: 1rem var(--gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 4.5rem;
}

.auryx-logo-text {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-family: var(--font-mono);
	font-weight: 700;
	letter-spacing: 0.14em;
	font-size: 0.95rem;
	text-transform: uppercase;
	white-space: nowrap;
}
.auryx-logo-mark {
	width: 0.6rem;
	height: 0.6rem;
	flex: none;
	background: var(--color-accent-dim);
	transform: rotate(45deg);
}
.auryx-footer .auryx-logo-mark { background: var(--color-accent); }
.auryx-logo img { max-height: 2.5rem; width: auto; }

.auryx-nav-list {
	display: flex;
	align-items: center;
	gap: 2rem;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.9rem;
	font-weight: 500;
}
.auryx-nav-list li { position: relative; }
.auryx-nav-list a {
	display: inline-block;
	padding-block: 0.35rem;
	position: relative;
}
.auryx-nav-list a::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform var(--speed) var(--ease-out-quart);
}
.auryx-nav-list a:hover::after,
.auryx-nav-list .current-menu-item > a::after {
	transform: scaleX(1);
	transform-origin: left;
}

/* Sub-menus */
.auryx-nav-list .sub-menu {
	position: absolute;
	top: 100%;
	left: -1rem;
	min-width: 12rem;
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0.5rem 0;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-lift);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity var(--speed) var(--ease-out-quart),
		transform var(--speed) var(--ease-out-quart),
		visibility var(--speed);
	z-index: 10;
}
.auryx-nav-list li:hover > .sub-menu,
.auryx-nav-list li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.auryx-nav-list .sub-menu a { display: block; padding: 0.5rem 1rem; }
.auryx-nav-list .sub-menu a::after { display: none; }
.auryx-nav-list .sub-menu a:hover { background: var(--color-bg); }

.auryx-header-actions {
	display: flex;
	align-items: center;
	gap: 1rem;
}
.auryx-cart-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-family: var(--font-mono);
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.5rem 0;
	white-space: nowrap;
}
.auryx-cart-link:hover { color: var(--color-accent-dim); }
.auryx-cart-count { font-variant-numeric: tabular-nums; }

/* Nav toggle (mobile) */
.auryx-nav-toggle {
	display: none;
	width: 2.75rem;
	height: 2.75rem;
	align-items: center;
	justify-content: center;
	margin-inline-end: -0.5rem;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius);
}
.auryx-nav-toggle-bars {
	position: relative;
	display: block;
	width: 1.1rem;
	height: 0.65rem;
}
.auryx-nav-toggle-bars span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 1.5px;
	background: currentColor;
	transition: transform var(--speed) var(--ease-out-quart), opacity 0.15s linear;
}
.auryx-nav-toggle-bars span:first-child { top: 0; }
.auryx-nav-toggle-bars span:last-child { bottom: 0; }
.auryx-nav-toggle[aria-expanded="true"] .auryx-nav-toggle-bars span:first-child { transform: translateY(0.32rem) rotate(45deg); }
.auryx-nav-toggle[aria-expanded="true"] .auryx-nav-toggle-bars span:last-child { transform: translateY(-0.32rem) rotate(-45deg); }

.auryx-nav-scrim {
	position: fixed;
	inset: 0;
	z-index: 45;
	background: rgba(11, 15, 11, 0.45);
	opacity: 0;
	transition: opacity var(--speed) var(--ease-out-quart);
}
.auryx-nav-scrim.is-visible { opacity: 1; }

@media (max-width: 899px) {
	.auryx-nav-toggle { display: inline-flex; }

	.auryx-nav {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 55;
		width: min(20rem, 84vw);
		padding: 6rem var(--gutter) 2rem;
		background: var(--color-surface);
		border-left: 1px solid var(--color-border);
		box-shadow: var(--shadow-lift);
		transform: translateX(100%);
		visibility: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		transition: transform var(--speed) var(--ease-out-quart), visibility var(--speed);
	}
	.auryx-nav.is-open { transform: translateX(0); visibility: visible; }

	.auryx-nav-list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		font-size: 1.05rem;
	}
	.auryx-nav-list > li { border-bottom: 1px solid var(--color-border); }
	.auryx-nav-list a { padding-block: 1rem; }
	.auryx-nav-list a::after { display: none; }

	.auryx-nav-list .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		border: 0;
		box-shadow: none;
		margin: 0 0 0.5rem;
		padding: 0 0 0.5rem 1rem;
		background: none;
		font-size: 0.95rem;
	}
}

/* =========================================================
   Hero
   ========================================================= */
.auryx-hero { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 7vw, 6rem); }
.auryx-hero-inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2.5rem, 5vw, 4rem);
	align-items: center;
}
@media (min-width: 900px) {
	.auryx-hero-inner { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}

/* Bold statement, then a lighter italic clause that trails off in muted grey. */
.auryx-hero-heading {
	font-size: clamp(2.5rem, 6vw, 5rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.03em;
}
.auryx-hero-heading strong { font-weight: 700; }
.auryx-hero-heading em {
	font-style: italic;
	font-weight: 300;
	color: var(--color-muted);
}

.auryx-hero-subtext {
	max-width: 42ch;
	margin-top: 1.5rem;
	font-size: clamp(1rem, 1.4vw, 1.1rem);
	color: var(--color-muted);
}
.auryx-hero-ctas {
	margin-top: 2.25rem;
	display: flex;
	gap: 1.5rem 2rem;
	flex-wrap: wrap;
	align-items: center;
}

.auryx-readout-card {
	background: var(--color-dark);
	color: var(--color-bg);
	border-radius: var(--radius-lg);
	padding: clamp(1.5rem, 3vw, 2.25rem);
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	position: relative;
	overflow: hidden;
	box-shadow: var(--shadow-lift);
}
.auryx-readout-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(120% 90% at 85% 0%, rgba(0, 255, 194, 0.14), transparent 60%);
	pointer-events: none;
}
/* Split header rule, matching the reference readout. */
.auryx-readout-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding-bottom: 1rem;
	margin-bottom: 1.5rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.auryx-readout-label {
	font-family: var(--font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	color: #8E968D;
	text-transform: uppercase;
}
/* The one big number: display face, pure mint — this is data, so it gets it. */
.auryx-readout-stat {
	font-family: var(--font-display);
	font-size: clamp(3rem, 6vw, 4rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--color-accent);
	font-variant-numeric: tabular-nums;
}
.auryx-readout-meta {
	font-family: var(--font-mono);
	font-size: 0.68rem;
	line-height: 1.7;
	color: #B4BAB3;
	overflow-wrap: anywhere;
}
/* 2×2 spec grid under the trace. */
.auryx-readout-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem 1rem;
	margin: 1.75rem 0 0;
}
.auryx-readout-grid > div { min-width: 0; }
.auryx-readout-grid dt {
	font-family: var(--font-mono);
	font-size: 0.65rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #7B837A;
	margin-bottom: 0.3rem;
}
.auryx-readout-grid dd {
	margin: 0;
	font-family: var(--font-mono);
	font-size: 0.9rem;
	color: #EAEDE9;
}
.auryx-readout-grid .is-pass { color: var(--color-accent); }

.auryx-hplc-graph {
	width: 100%;
	height: 72px;
	margin-top: 0.75rem;
}
.auryx-hplc-line {
	stroke: var(--color-accent);
	stroke-linejoin: round;
	stroke-dasharray: 700;
	stroke-dashoffset: 700;
	animation: auryx-draw 2.2s var(--ease-out-quart) 0.3s forwards;
}
@keyframes auryx-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
	.auryx-hplc-line { stroke-dashoffset: 0; animation: none; }
}

/* =========================================================
   Trust badges
   ========================================================= */
.auryx-trust-badges {
	border-block: 1px solid var(--color-border);
	background: var(--color-surface);
}
/* Full-bleed band of ruled cells with a mint status dot in each. */
.auryx-trust-inner {
	list-style: none;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	font-family: var(--font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-text);
}
@media (min-width: 900px) {
	.auryx-trust-inner { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.auryx-trust-inner li {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	min-width: 0;
	padding: 1.5rem;
	border-right: 1px solid var(--color-border);
	transition: background var(--speed) var(--ease-out-quart);
}
.auryx-trust-inner li:hover { background: var(--color-bg); }
.auryx-trust-inner li:last-child { border-right: 0; }
@media (min-width: 900px) {
	/* Flush the outer text edges with the page container. */
	.auryx-trust-inner li:first-child { padding-inline-start: 0; }
	.auryx-trust-inner li:last-child { padding-inline-end: 0; }
}
@media (max-width: 899px) {
	.auryx-trust-inner li:nth-child(odd) { padding-inline-start: 0; }
	.auryx-trust-inner li:nth-child(even) { border-right: 0; padding-inline-end: 0; }
	.auryx-trust-inner li:nth-child(-n + 2) { border-bottom: 1px solid var(--color-border); }
}
.auryx-trust-inner li::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	flex: none;
	border-radius: 50%;
	background: var(--color-accent-dark);
	box-shadow: 0 0 0 3px rgba(0, 184, 148, 0.16);
}

/* =========================================================
   Process
   ========================================================= */
.auryx-process { padding-block: var(--space-section); }
.auryx-process-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	background: var(--color-border);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	overflow: hidden;
}
@media (min-width: 640px) { .auryx-process-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .auryx-process-grid { grid-template-columns: repeat(4, 1fr); } }

.auryx-process-step {
	background: var(--color-surface);
	padding: 2rem 1.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	transition: background var(--speed) var(--ease-out-quart);
}
.auryx-process-step:hover { background: var(--color-bg); }
.auryx-process-index {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	color: var(--color-accent-dim);
}
.auryx-process-title { font-size: 1.05rem; letter-spacing: -0.01em; }
.auryx-process-step p { font-size: 0.92rem; color: var(--color-muted); }

/* =========================================================
   Spotlight
   ========================================================= */
.auryx-spotlight {
	display: grid;
	grid-template-columns: 1fr;
	background: var(--color-surface);
	border-block: 1px solid var(--color-border);
}
@media (min-width: 900px) {
	.auryx-spotlight { grid-template-columns: 1fr 1fr; }
}
.auryx-spotlight-visual {
	background: linear-gradient(135deg, #2A2A2A, var(--color-ink));
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(20rem, 36vw, 32rem);
	overflow: hidden;
}

/* Orbital molecule: concentric rings + nodes, slowly rotating. */
.auryx-molecule {
	position: relative;
	width: min(66%, 19rem);
	aspect-ratio: 1;
	animation: auryx-spin 24s linear infinite;
}
.auryx-molecule-ring {
	position: absolute;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 50%;
}
.auryx-molecule-ring-1 { inset: 0; }
.auryx-molecule-ring-2 { inset: 15%; }
.auryx-molecule-ring-3 { inset: 30%; border-color: var(--color-accent); opacity: 0.85; }
.auryx-molecule-node {
	position: absolute;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--color-bg);
}
.auryx-molecule-node-1 { top: -6px; left: 50%; margin-left: -6px; }
.auryx-molecule-node-2 {
	bottom: 10%;
	right: 8%;
	background: var(--color-accent);
	box-shadow: 0 0 18px rgba(0, 255, 194, 0.55);
}
.auryx-molecule-node-3 { bottom: 22%; left: 13%; width: 8px; height: 8px; opacity: 0.7; }
@keyframes auryx-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	.auryx-molecule { animation: none; }
}

/* Keeps the copy column aligned to the page container instead of the panel edge. */
.auryx-spotlight-body {
	display: flex;
	align-items: center;
	padding: clamp(2.5rem, 6vw, 5rem) var(--gutter);
}
@media (min-width: 900px) {
	.auryx-spotlight-body {
		padding-inline-start: clamp(2.5rem, 4vw, 4rem);
		padding-inline-end: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
	}
}
.auryx-spotlight-copy {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	max-width: 46ch;
}
.auryx-spotlight-copy h2 { font-size: clamp(1.65rem, 3vw, 2.35rem); }
.auryx-spotlight-copy p { color: var(--color-muted); }
.auryx-spotlight-actions {
	display: flex;
	align-items: center;
	gap: 1.5rem 2rem;
	margin-top: 0.5rem;
	flex-wrap: wrap;
}
.auryx-coa-preview {
	font-family: var(--font-mono);
	font-size: 0.82rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-bottom: 1px solid currentColor;
	padding-bottom: 0.15rem;
	transition: color var(--speed) var(--ease-out-quart);
}
.auryx-coa-preview:hover { color: var(--color-accent-dim); }

.auryx-spotlight-specs {
	display: flex;
	flex-wrap: wrap;
	gap: 0 2.5rem;
	margin: 1.5rem 0 0;
	padding-top: 1.5rem;
	border-top: 1px solid var(--color-border);
}
.auryx-spotlight-specs div { display: flex; flex-direction: column; gap: 0.2rem; }
.auryx-spotlight-specs dt {
	font-family: var(--font-mono);
	font-size: 0.68rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-faint);
}
.auryx-spotlight-specs dd {
	margin: 0;
	font-family: var(--font-mono);
	font-size: 1.05rem;
	font-weight: 500;
}

/* =========================================================
   Regional banner
   ========================================================= */
/* Deep near-black slab, not the softer charcoal — borrowed from the reference
   fulfillment band so it reads as a hard break in the page. */
.auryx-regional {
	background: var(--color-ink);
	color: var(--color-bg);
	padding-block: clamp(4rem, 8vw, 6.5rem);
}
.auryx-regional-inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	align-items: center;
}
@media (min-width: 900px) {
	.auryx-regional-inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
}
.auryx-regional-copy h2 {
	font-size: clamp(1.75rem, 3.4vw, 2.4rem);
	margin-bottom: 0.85rem;
	max-width: 20ch;
}
.auryx-regional-copy h2 em { font-style: normal; color: var(--color-accent); }
.auryx-regional .auryx-eyebrow { color: var(--color-accent); }

/* Supporting copy and the spec strip share the right column. */
.auryx-regional-aside {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	align-items: flex-start;
}
.auryx-regional-sub {
	font-size: 0.98rem;
	line-height: 1.7;
	max-width: 42ch;
	color: rgba(247, 248, 247, 0.72);
}
.auryx-regional-stats { width: 100%; }

.auryx-regional-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	margin: 0;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--radius);
	overflow: hidden;
}
.auryx-regional-stats div {
	background: var(--color-ink);
	padding: 1.25rem 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	text-align: center;
}
.auryx-regional-stats dt {
	font-family: var(--font-mono);
	font-size: 0.66rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #8E968D;
}
.auryx-regional-stats dd {
	margin: 0;
	font-family: var(--font-mono);
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--color-accent);
}

/* =========================================================
   Categories
   ========================================================= */
.auryx-categories { padding-block: var(--space-section); }
.auryx-category-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	background: var(--color-border);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	overflow: hidden;
}
@media (min-width: 900px) {
	.auryx-category-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Title top, count bottom, whole tile inverts on hover and the count goes mint.
   Every animated property is declared up front so the transition runs both ways
   instead of snapping back. */
.auryx-category-card {
	background: var(--color-surface);
	padding: 2rem 1.75rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 2.5rem;
	min-height: 13rem;
	position: relative;
	isolation: isolate;
	transition: background 0.4s var(--ease-out-quart), color 0.4s var(--ease-out-quart);
}
.auryx-category-card:hover,
.auryx-category-card:focus-visible { background: var(--color-text); color: var(--color-bg); }

.auryx-category-name {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.15rem, 1.6vw, 1.5rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
	text-wrap: balance;
}
.auryx-category-count {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-accent-dim);
	transition: color 0.4s var(--ease-out-quart);
}
.auryx-category-card:hover .auryx-category-count,
.auryx-category-card:focus-visible .auryx-category-count { color: var(--color-accent); }
.auryx-category-go {
	display: inline-block;
	transition: transform 0.4s var(--ease-out-quart);
}
.auryx-category-card:hover .auryx-category-go,
.auryx-category-card:focus-visible .auryx-category-go { transform: translateX(0.35rem); }

/* =========================================================
   Catalog grid (homepage + shop archive + Woo loops)
   ========================================================= */
.auryx-catalog { padding-block: var(--space-section); }

/* Fixed 3-up, matching loop_shop_columns. auto-fill would open a fourth,
   half-empty track on wide screens. */
.auryx-catalog-grid,
ul.products {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1.25rem, 2.5vw, 2rem);
}
@media (min-width: 640px) {
	.auryx-catalog-grid,
	ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
	.auryx-catalog-grid,
	ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.auryx-product-card {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--color-surface);
	box-shadow: var(--shadow-card);
	transition: opacity 0.6s var(--ease-out-quart),
		transform 0.45s var(--ease-out-quart),
		border-color var(--speed) var(--ease-out-quart),
		box-shadow 0.45s var(--ease-out-quart);
}
/* Hairline highlight along the top edge — cheap way to give a flat panel an
   actual lit surface rather than a printed rectangle. */
.auryx-product-card::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9) 30%, rgba(255, 255, 255, 0.9) 70%, transparent);
	z-index: 3;
	pointer-events: none;
}
.auryx-product-card:hover,
.auryx-product-card:focus-within {
	transform: translateY(-6px);
	border-color: var(--color-border-strong);
	box-shadow: var(--shadow-lift);
}
/* Don't fight the reveal animation's own transform while it's still running. */
.js [data-reveal]:not(.is-visible):hover { transform: translateY(20px); }

/* Scroll reveal — only hide when JS is present to bring it back. */
.js [data-reveal] { opacity: 0; transform: translateY(20px); }
.js [data-reveal].is-visible { opacity: 1; transform: translateY(0); }
[data-reveal] {
	transition: opacity 0.6s var(--ease-out-quart), transform 0.6s var(--ease-out-quart);
}

.auryx-product-media {
	display: block;
	position: relative;
	aspect-ratio: 4 / 5;
	/* Soft vignette + top-light, so a transparent vial PNG sits in a space
	   instead of floating on a flat swatch. */
	background:
		radial-gradient(80% 55% at 50% 18%, rgba(255, 255, 255, 0.95), transparent 70%),
		radial-gradient(120% 90% at 50% 120%, rgba(0, 184, 148, 0.10), transparent 60%),
		linear-gradient(168deg, #EEF1EE 0%, #F4F6F3 55%, #E8ECE7 100%);
	overflow: hidden;
}
/* Grounding shadow under the product. */
.auryx-product-media::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 8%;
	width: 55%;
	height: 8%;
	transform: translateX(-50%);
	background: radial-gradient(closest-side, rgba(11, 15, 11, 0.16), transparent 75%);
	pointer-events: none;
}
.auryx-product-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s var(--ease-out-quart);
}
.auryx-product-card:hover .auryx-product-media img { transform: scale(1.03); }
.auryx-product-media-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
.auryx-product-media-mark {
	font-family: var(--font-mono);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	color: var(--color-border-strong);
}

.auryx-product-flag {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	padding: 0.3rem 0.6rem;
	font-family: var(--font-mono);
	font-size: 0.62rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-radius: var(--radius);
	background: var(--color-text);
	color: #fff;
}
.auryx-product-flag-sale { background: var(--color-accent); color: var(--color-text); }
.auryx-product-flag-out { background: var(--color-alert-bg); color: var(--color-alert); }

/* Purity chip on the image — mint on charcoal, the one bit of pure accent a
   card gets. */
.auryx-purity-badge {
	position: absolute;
	top: 0.85rem;
	right: 0.85rem;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.05rem;
	width: 3.1rem;
	height: 3.1rem;
	border-radius: 50%;
	background: var(--color-dark);
	color: var(--color-accent);
	font-family: var(--font-mono);
	line-height: 1;
	box-shadow: 0 6px 16px -6px rgba(11, 15, 11, 0.5);
}
.auryx-purity-badge-value { font-size: 0.72rem; font-weight: 700; letter-spacing: -0.02em; }
.auryx-purity-badge-label {
	font-size: 0.5rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(247, 248, 247, 0.65);
}

.auryx-product-body {
	padding: 1.35rem 1.25rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	flex: 1;
}
.auryx-product-cat {
	font-family: var(--font-mono);
	font-size: 0.62rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-accent-dim);
}
.auryx-product-name {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.15rem;
	line-height: 1.25;
	letter-spacing: -0.02em;
	margin: 0;
}
.auryx-product-name a { transition: color var(--speed) var(--ease-out-quart); }
.auryx-product-card:hover .auryx-product-name a { color: var(--color-accent-dim); }

/* Size / variant chips. */
.auryx-product-sizes {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0.1rem 0 0;
	padding: 0;
}
.auryx-product-sizes li {
	padding: 0.25rem 0.55rem;
	border: 1px solid var(--color-border-strong);
	border-radius: 999px;
	background: var(--color-bg);
	font-family: var(--font-mono);
	font-size: 0.64rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-muted);
}

.auryx-product-status {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8rem;
	color: var(--color-muted);
}
.auryx-status-dot {
	width: 0.45rem;
	height: 0.45rem;
	flex: none;
	border-radius: 50%;
	background: var(--color-accent-dark);
	box-shadow: 0 0 0 3px rgba(0, 184, 148, 0.16);
}
.auryx-product-status.is-out { color: var(--color-alert); }
.auryx-product-status.is-out .auryx-status-dot {
	background: var(--color-alert);
	box-shadow: 0 0 0 3px rgba(138, 94, 31, 0.14);
}

.auryx-product-footer {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-top: auto;
	padding-top: 1.1rem;
	border-top: 1px solid var(--color-border);
}
.auryx-product-price {
	min-width: 0;
	font-family: var(--font-mono);
	font-size: 0.95rem;
	font-weight: 500;
	line-height: 1.3;
	overflow-wrap: anywhere;
}
.auryx-product-price del { opacity: 0.5; margin-inline-end: 0.35rem; }
.auryx-product-price ins { text-decoration: none; }

.auryx-product-price {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}
.auryx-price-prefix {
	font-size: 0.6rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-faint);
}

/* Primary CTA + a secondary "peek" arrow, mirroring the reference's
   button-plus-icon pairing. */
.auryx-product-buy {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.auryx-product-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.6rem;
	padding-inline: 1.1rem;
	background: var(--color-text);
	color: var(--color-bg);
	border: 1px solid var(--color-text);
	border-radius: var(--radius);
	font-family: var(--font-mono);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	box-shadow: var(--shadow-card);
	transition: background var(--speed) var(--ease-out-quart),
		border-color var(--speed) var(--ease-out-quart),
		color var(--speed) var(--ease-out-quart);
}
.auryx-product-cta:hover,
.auryx-product-cta:focus-visible {
	background: var(--color-accent-dark);
	border-color: var(--color-accent-dark);
	color: var(--color-text);
}
.auryx-product-cta.loading { opacity: 0.55; pointer-events: none; }

.auryx-product-peek {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 2.6rem;
	height: 2.6rem;
	border: 1px solid var(--color-border-strong);
	border-radius: 50%;
	font-family: var(--font-mono);
	transition: background var(--speed) var(--ease-out-quart),
		border-color var(--speed) var(--ease-out-quart),
		color var(--speed) var(--ease-out-quart),
		transform var(--speed) var(--ease-out-quart);
}
.auryx-product-peek:hover,
.auryx-product-peek:focus-visible {
	background: var(--color-text);
	border-color: var(--color-text);
	color: var(--color-bg);
	transform: translateX(2px);
}
/* Woo appends its own "View cart" link after an AJAX add; keep it inline. */
.auryx-product-footer .added_to_cart {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	border-bottom: 1px solid currentColor;
}

/* Woo's <li class="product"> wrapper already is the card. */
li.auryx-loop-item.auryx-product-card { list-style: none; }

/* =========================================================
   Featured rail (Best sellers)
   ========================================================= */
.auryx-rail-section {
	padding-block: var(--space-section);
	background:
		radial-gradient(60% 100% at 50% 0%, rgba(0, 184, 148, 0.05), transparent 70%),
		var(--color-bg);
	border-bottom: 1px solid var(--color-border);
}
.auryx-rail-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem 3rem;
	flex-wrap: wrap;
	margin-bottom: 2.5rem;
}
.auryx-rail-intro { min-width: 0; }
.auryx-rail-intro .auryx-section-lede { max-width: 38ch; }
.auryx-rail-controls {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 1rem;
}
.auryx-rail-arrows { display: flex; gap: 0.6rem; }
@media (max-width: 639px) {
	.auryx-rail-controls { align-items: flex-start; }
	/* Touch swipe already does this, and the stacked arrows read as clutter. */
	.auryx-rail-arrows { display: none; }
}
.auryx-rail-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.85rem;
	height: 2.85rem;
	border: 1px solid var(--color-border-strong);
	border-radius: 50%;
	background: var(--color-surface);
	font-family: var(--font-mono);
	box-shadow: var(--shadow-card);
	transition: background var(--speed) var(--ease-out-quart),
		border-color var(--speed) var(--ease-out-quart),
		color var(--speed) var(--ease-out-quart),
		opacity var(--speed) var(--ease-out-quart);
}
.auryx-rail-arrow:hover:not(:disabled) {
	background: var(--color-text);
	border-color: var(--color-text);
	color: var(--color-bg);
}
.auryx-rail-arrow:disabled { opacity: 0.35; cursor: not-allowed; }

/* Edge-to-edge scroller: it sits outside .auryx-container and re-creates the
   gutter itself, so the first card lines up with the heading and the last one
   can still scroll clear of the viewport edge. */
.auryx-rail {
	/* Must equal the track's inline padding, or mandatory snapping lands past
	   the leading gutter on load and clips the first card. */
	--rail-pad: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));

	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-padding-inline-start: var(--rail-pad);
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	/* Room for the cards' hover lift and shadow, which would otherwise clip. */
	padding-block: 0.5rem 1.5rem;
}
.auryx-rail::-webkit-scrollbar { display: none; }
.auryx-rail:focus-visible { outline-offset: -3px; }

.auryx-rail-track {
	list-style: none;
	display: flex;
	gap: clamp(1rem, 2vw, 1.5rem);
	margin: 0;
	padding: 0;
	/* Matches .auryx-container's edges at any width. */
	padding-inline: var(--rail-pad);
	width: max-content;
}
.auryx-rail-item {
	scroll-snap-align: start;
	width: clamp(15rem, 74vw, 19rem);
	display: flex;
}
.auryx-rail-item > .auryx-product-card { width: 100%; }
.auryx-product-card-rail .auryx-product-media { aspect-ratio: 1 / 1; }

/* =========================================================
   COA registry table
   ========================================================= */
.auryx-registry {
	padding-block: var(--space-section);
	background: var(--color-surface);
	border-block: 1px solid var(--color-border);
}
.auryx-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}
.auryx-registry-table {
	width: 100%;
	min-width: 40rem;
	border-collapse: collapse;
	font-size: 0.92rem;
}
.auryx-registry-table th,
.auryx-registry-table td {
	text-align: left;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--color-border);
	vertical-align: middle;
}
.auryx-registry-table thead th {
	font-family: var(--font-mono);
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-faint);
	background: var(--color-bg);
}
.auryx-registry-table tbody tr:last-child th,
.auryx-registry-table tbody tr:last-child td { border-bottom: 0; }
.auryx-registry-table tbody tr { transition: background var(--speed) var(--ease-out-quart); }
.auryx-registry-table tbody tr:hover { background: var(--color-bg); }
.auryx-registry-table tbody th { font-weight: 600; }
.auryx-registry-table tbody th a:hover { color: var(--color-accent-dim); }
.auryx-registry-table td { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.auryx-registry-action { text-align: right; }
.auryx-registry-action a {
	display: inline-block;
	padding: 0.35rem 0.85rem;
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	border: 1px solid var(--color-border-strong);
	border-radius: 999px;
	transition: background var(--speed) var(--ease-out-quart), color var(--speed) var(--ease-out-quart);
}
.auryx-registry-action a:hover { background: var(--color-text); color: #fff; border-color: var(--color-text); }

/* =========================================================
   FAQ
   ========================================================= */
.auryx-faq { padding-block: var(--space-section); }
.auryx-faq-inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	align-items: start;
}
@media (min-width: 900px) {
	.auryx-faq-inner { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: 4rem; }
	.auryx-faq-sticky { position: sticky; top: 7rem; }
}
.auryx-faq-sticky .auryx-btn-ghost { margin-top: 1.5rem; }

.auryx-faq-accordion { border-top: 1px solid var(--color-border); }
.auryx-faq-item { border-bottom: 1px solid var(--color-border); }
.auryx-faq-heading { margin: 0; font-size: inherit; }
.auryx-faq-question {
	width: 100%;
	padding: 1.35rem 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1.5rem;
	font-family: var(--font-display);
	font-size: 1.02rem;
	font-weight: 500;
	letter-spacing: -0.01em;
	text-align: left;
	transition: color var(--speed) var(--ease-out-quart);
}
.auryx-faq-question:hover { color: var(--color-accent-dim); }
.auryx-faq-icon {
	position: relative;
	width: 14px;
	height: 14px;
	flex: none;
}
.auryx-faq-icon::before,
.auryx-faq-icon::after {
	content: "";
	position: absolute;
	background: currentColor;
	transition: transform var(--speed) var(--ease-out-quart);
}
.auryx-faq-icon::before { inset-inline: 0; top: 6.5px; height: 1px; }
.auryx-faq-icon::after { inset-block: 0; left: 6.5px; width: 1px; }
.auryx-faq-question[aria-expanded="true"] .auryx-faq-icon::after { transform: scaleY(0); }

.auryx-faq-answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s var(--ease-out-quart);
}
.auryx-faq-answer p {
	margin: 0;
	padding-bottom: 1.5rem;
	max-width: 62ch;
	color: var(--color-muted);
}
.auryx-faq-flagged .auryx-faq-answer p {
	color: var(--color-alert);
	background: var(--color-alert-bg);
	border: 1px solid var(--color-alert-border);
	border-radius: var(--radius);
	padding: 1rem 1.25rem;
	margin-bottom: 1.5rem;
}
/* Without JS the panels are static open text rather than dead buttons. */
.no-js .auryx-faq-answer { max-height: none; }
.no-js .auryx-faq-icon { display: none; }

/* =========================================================
   Closing CTA band
   ========================================================= */
.auryx-cta-band {
	background: var(--color-dark);
	color: var(--color-bg);
	padding-block: clamp(3rem, 6vw, 4.5rem);
}
.auryx-cta-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
}
.auryx-cta-inner h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.auryx-cta-inner p { margin-top: 0.6rem; color: #A8AFA7; max-width: 46ch; }

/* =========================================================
   Footer
   ========================================================= */
.auryx-footer { background: var(--color-dark); color: var(--color-bg); }
.auryx-footer-inner {
	max-width: var(--container);
	margin-inline: auto;
	padding: clamp(3rem, 6vw, 4.5rem) var(--gutter) 2.5rem;
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
}
@media (min-width: 640px) {
	.auryx-footer-inner { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
	.auryx-footer-inner { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 3rem; }
}
.auryx-footer-heading {
	font-family: var(--font-mono);
	font-size: 0.7rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: #8E968D;
	margin-bottom: 1.15rem;
}
.auryx-footer-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	font-size: 0.92rem;
}
.auryx-footer-list a { color: #D6DAD5; transition: color var(--speed) var(--ease-out-quart); }
.auryx-footer-list a:hover { color: var(--color-accent); }

.auryx-footer-brand p { color: #A8AFA7; max-width: 34ch; margin-top: 1rem; font-size: 0.95rem; }
.auryx-footer-meta {
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	font-family: var(--font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #737A72;
}

.auryx-footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	max-width: var(--container);
	margin-inline: auto;
	padding: 1.75rem var(--gutter) 2.5rem;
	font-family: var(--font-mono);
	font-size: 0.7rem;
	line-height: 1.8;
	color: #737A72;
}
.auryx-footer-legal { max-width: 90ch; }
.auryx-footer-copy { margin-top: 0.75rem; }

/* =========================================================
   Generic pages, shop wrapper, empty states
   ========================================================= */
.auryx-page,
.auryx-shop-page,
.auryx-product-page {
	padding-block: clamp(2rem, 4vw, 3rem) var(--space-section);
}

.auryx-page-header { margin-bottom: 2.5rem; }
.auryx-page-title,
.auryx-shop-title { font-size: clamp(1.9rem, 4vw, 2.75rem); }
.auryx-page-lede { margin-top: 1rem; color: var(--color-muted); max-width: 60ch; }
.auryx-page-thumb { margin: 0 0 2.5rem; }
.auryx-page-thumb img { border-radius: var(--radius); }

.auryx-breadcrumbs {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	color: var(--color-faint);
	margin-bottom: 1.25rem;
}
.auryx-breadcrumbs a:hover { color: var(--color-text); }
.auryx-breadcrumbs .crumb-sep { padding-inline: 0.25rem; opacity: 0.5; }

.auryx-shop-header { margin-bottom: 2rem; }
.auryx-shop-description { margin-top: 1rem; color: var(--color-muted); max-width: 62ch; }
.auryx-shop-disclaimer {
	display: inline-block;
	margin-top: 1.25rem;
	padding: 0.5rem 0.9rem;
	font-family: var(--font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-alert);
	background: var(--color-alert-bg);
	border: 1px solid var(--color-alert-border);
	border-radius: var(--radius);
}

.auryx-shop-toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 2rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--color-border);
}

.auryx-empty-state {
	max-width: 42rem;
	padding: clamp(2.5rem, 6vw, 4.5rem) 0;
}
.auryx-empty-state h1,
.auryx-empty-state h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); margin-bottom: 1rem; }
.auryx-empty-state p { color: var(--color-muted); margin-bottom: 2rem; }
.auryx-empty-actions { display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; align-items: center; }
.auryx-empty-404 .auryx-search-form { margin-bottom: 2rem; }

/* Post list (blog / archives) */
.auryx-post-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	gap: clamp(1.25rem, 2.5vw, 2rem);
}
.auryx-post-card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 1.75rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
}
.auryx-post-title { font-size: 1.2rem; }
.auryx-post-excerpt { color: var(--color-muted); font-size: 0.95rem; }
.auryx-post-card .auryx-btn-ghost { margin-top: auto; padding-top: 1rem; }

/* Long-form content */
.auryx-prose { max-width: 70ch; }
.auryx-prose > * + * { margin-top: 1.25rem; }
.auryx-prose h2 { font-size: 1.5rem; margin-top: 2.5rem; }
.auryx-prose h3 { font-size: 1.15rem; margin-top: 2rem; }
.auryx-prose a { color: var(--color-accent-dim); text-decoration: underline; text-underline-offset: 0.15em; }
.auryx-prose ul, .auryx-prose ol { padding-inline-start: 1.25rem; }
.auryx-prose li + li { margin-top: 0.5rem; }
.auryx-prose blockquote {
	margin: 0;
	padding-inline-start: 1.25rem;
	border-inline-start: 2px solid var(--color-accent-dim);
	color: var(--color-muted);
}
.auryx-prose code {
	font-family: var(--font-mono);
	font-size: 0.9em;
	background: var(--color-border);
	padding: 0.15em 0.4em;
	border-radius: var(--radius);
}
/* Cart/checkout/account render full-width tables and column sets. */
.auryx-page-flow .auryx-page-content { max-width: none; }

/* =========================================================
   Search form
   ========================================================= */
.auryx-search-form {
	display: flex;
	gap: 0.5rem;
	max-width: 26rem;
}
.auryx-search-field {
	flex: 1;
	min-width: 0;
	padding: 0.8em 1em;
	background: var(--color-surface);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius);
	font-size: 0.95rem;
}
.auryx-search-field::placeholder { color: var(--color-faint); }
.auryx-search-submit {
	flex: none;
	width: 3rem;
	background: var(--color-text);
	color: #fff;
	border-radius: var(--radius);
	transition: background var(--speed) var(--ease-out-quart);
}
.auryx-search-submit:hover { background: var(--color-accent-dark); color: var(--color-text); }

/* =========================================================
   Pagination (shop + blog)
   ========================================================= */
.auryx-shop-pagination { margin-top: 3rem; }
.auryx-shop-pagination ul.page-numbers,
.auryx-shop-pagination .nav-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}
.auryx-shop-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding-inline: 0.75rem;
	font-family: var(--font-mono);
	font-size: 0.85rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background: var(--color-surface);
	transition: background var(--speed) var(--ease-out-quart),
		color var(--speed) var(--ease-out-quart),
		border-color var(--speed) var(--ease-out-quart);
}
.auryx-shop-pagination .page-numbers:hover { border-color: var(--color-text); }
.auryx-shop-pagination .page-numbers.current {
	background: var(--color-text);
	border-color: var(--color-text);
	color: #fff;
}
.auryx-shop-pagination .page-numbers.dots { border-color: transparent; background: none; }
.auryx-shop-pagination li { display: flex; }