/* Lattice Peptides — v2 design system ("Swiss clinical")
   Source of truth: Downloads/Peptide E-Commerce Platform Design/design.md v1.1
   Families: Archivo (headings/body/UI) + IBM Plex Mono (data).
   Primary: Clinical Blue. Verified Teal reserved for proof/COA UI only. */

:root {
	/* Ink & surface */
	--color-ink-900: #0B1220;
	--color-ink-700: #334155;
	--color-ink-600: #4a5b6e;
	--color-ink-500: #64748B;
	--color-ink-400: #8296a8;
	--color-ink-300: #CBD5E1;
	--color-border: #dde4ec;
	--color-border-soft: #eef2f6;
	--color-surface-0: #ffffff;
	--color-surface-50: #F8FAFC;
	--color-surface-100: #F1F5F9;

	/* Primary — Clinical Blue */
	--color-primary-700: #0B5CAD;
	--color-primary-600: #1470D6;
	--color-primary-100: #E3F0FC;
	--color-primary-100-border: #cfe0f5;

	/* Accent — Verified Teal (proof/trust ONLY) */
	--color-verify-600: #0E8F84;
	--color-verify-650: #0c7a70;
	--color-verify-text: #0e6e63;
	--color-verify-100: #DBF3F0;
	--color-verify-border: #b8e5df;
	--color-verify-border-soft: #cdeee8;
	--color-verify-surface: #f2fbf9;

	/* Semantic */
	--color-success: #15803D;
	--color-warning: #B45309;
	--color-danger: #B91C1C;
	--color-sale: #C2410C;

	/* RUO band */
	--color-ruo-bg: #fef6ee;
	--color-ruo-text: #7c3d12;
	--color-ruo-border: #f5d9b8;

	/* Type */
	--font-sans: 'Archivo', system-ui, sans-serif;
	--font-mono: 'IBM Plex Mono', ui-monospace, monospace;

	/* Shape & shadow */
	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-card: 12px;
	--radius-lg: 16px;
	--radius-full: 999px;
	--shadow-sm: 0 4px 20px rgba(12, 31, 51, 0.08);
	--shadow-md: 0 10px 28px rgba(12, 31, 51, 0.12);

	--container: 1280px;
	--motion-fast: 120ms;
	--motion-base: 200ms;
	--ease-standard: cubic-bezier(0.2, 0, 0, 1);
}

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

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

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

body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 1.55;
	color: var(--color-ink-700);
	background: var(--color-surface-0);
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--color-primary-600); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--color-primary-700); }

h1, h2, h3, h4 {
	font-family: var(--font-sans);
	font-weight: 700;
	color: var(--color-ink-900);
	line-height: 1.1;
}

h1 { font-size: clamp(30px, 4vw, 36px); letter-spacing: -0.02em; margin: 0 0 12px; }
h2 { font-size: clamp(22px, 3vw, 26px); letter-spacing: -0.02em; margin: 0 0 10px; }
h3 { font-size: 16.5px; letter-spacing: -0.015em; margin: 0 0 8px; }
h4 { font-size: 15px; font-weight: 600; margin: 0 0 6px; }

p { margin: 0 0 1rem; }

.mono { font-family: var(--font-mono); }

.container { max-width: var(--container); margin-inline: auto; padding-inline: 24px; }

/* ---------- RUO compliance strip ---------- */
.ruo-strip {
	background: var(--color-ruo-bg);
	border-bottom: 1px solid var(--color-ruo-border);
	padding: 6px 12px;
	text-align: center;
}
.ruo-strip p { margin: 0; font-size: 11.5px; font-weight: 500; color: var(--color-ruo-text); }

/* ---------- Header ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--color-border);
}

.header-inner {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-block: 12px;
	flex-wrap: wrap;
}

.logo {
	display: flex;
	align-items: center;
	gap: 9px;
	font-weight: 700;
	font-size: 16px;
	color: var(--color-ink-900);
	text-decoration: none;
	letter-spacing: -0.01em;
}
.logo:hover { color: var(--color-ink-900); }
.logo-mark { display: block; flex-shrink: 0; }

.header-search {
	flex: 1;
	min-width: 180px;
	max-width: 400px;
	display: flex;
	align-items: center;
	gap: 9px;
	border: 1px solid var(--color-border);
	border-radius: 8px;
	padding: 0;
	background: var(--color-surface-50);
	overflow: hidden;
}
.header-search svg { flex-shrink: 0; margin-left: 12px; color: var(--color-ink-400); }
.header-search input[type='search'] {
	flex: 1;
	min-width: 0;
	border: none;
	background: transparent;
	padding: 9px 12px 9px 0;
	font-family: var(--font-sans);
	font-size: 13px;
	color: var(--color-ink-900);
	outline: none;
}
.header-search input[type='search']::placeholder { color: var(--color-ink-400); }
.header-search:focus-within { border-color: var(--color-primary-600); background: var(--color-surface-0); }

.site-nav {
	display: flex;
	gap: 2px;
	align-items: center;
	flex-wrap: wrap;
	margin-left: auto;
	font-size: 13.5px;
	font-weight: 500;
}
.site-nav .nav-link {
	padding: 7px 9px;
	color: var(--color-ink-500);
	text-decoration: none;
	border-radius: var(--radius-sm);
	white-space: nowrap;
	transition: background var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}
.site-nav .nav-link:hover { color: var(--color-ink-900); background: var(--color-surface-100); }
.site-nav .nav-link.is-active { color: var(--color-ink-900); font-weight: 600; background: var(--color-surface-100); }
/* COA lookup is a proof surface — Verified Teal */
.site-nav .nav-link-coa,
.site-nav .nav-link-coa.is-active { color: var(--color-verify-text); font-weight: 600; background: transparent; }
.site-nav .nav-link-coa:hover { color: var(--color-verify-text); background: var(--color-verify-100); }
.site-nav .nav-link-coa.is-active { background: var(--color-verify-100); }

.header-actions {
	display: flex;
	gap: 10px;
	align-items: center;
	font-size: 13px;
	font-weight: 500;
	color: var(--color-ink-900);
}
.header-actions .header-account { color: var(--color-ink-900); text-decoration: none; }
.header-actions .header-account:hover { color: var(--color-primary-600); }
.header-cart {
	display: flex;
	align-items: center;
	gap: 5px;
	color: var(--color-ink-900);
	text-decoration: none;
}
.header-cart:hover { color: var(--color-primary-600); }
.cart-count {
	background: var(--color-primary-600);
	color: #fff;
	border-radius: var(--radius-full);
	font-size: 10.5px;
	font-weight: 700;
	padding: 1px 6px;
	min-width: 1.4em;
	text-align: center;
}
.header-cta {
	background: var(--color-primary-600);
	color: #fff;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	padding: 9px 16px;
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--motion-fast) var(--ease-standard);
}
.header-cta:hover { background: var(--color-primary-700); color: #fff; }

.nav-toggle { display: none; }

@media (max-width: 900px) {
	.nav-toggle {
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		gap: 4px;
		width: 44px;
		height: 44px;
		padding: 10px;
		background: none;
		border: 1px solid var(--color-border);
		border-radius: var(--radius-sm);
		cursor: pointer;
		order: 5;
	}
	.nav-toggle span { display: block; height: 2px; background: var(--color-ink-900); border-radius: 2px; }
	.site-nav {
		display: none;
		width: 100%;
		flex-direction: column;
		align-items: stretch;
		order: 10;
		padding-block: 8px;
	}
	.site-nav.is-open { display: flex; }
	.header-search { order: 9; max-width: none; width: 100%; }
	.header-actions { margin-left: auto; }
}

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 22px;
	border-radius: 8px;
	border: none;
	font-family: var(--font-sans);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}
.btn-primary { background: var(--color-primary-600); color: #fff; }
.btn-primary:hover { background: var(--color-primary-700); color: #fff; }
.btn-outline { background: transparent; border: 1.5px solid var(--color-border); color: var(--color-ink-900); }
.btn-outline:hover { border-color: var(--color-primary-600); color: var(--color-primary-600); }
.btn-verify { background: var(--color-verify-600); color: #fff; }
.btn-verify:hover { background: var(--color-verify-650); color: #fff; }
.btn-verify-outline { background: transparent; border: 1.5px solid var(--color-verify-border); color: var(--color-verify-text); }
.btn-verify-outline:hover { background: var(--color-verify-100); color: var(--color-verify-text); }
.btn-dark { background: var(--color-ink-900); color: #fff; }
.btn-dark:hover { background: #1c2c44; color: #fff; }
.btn-sm { padding: 9px 14px; font-size: 13px; border-radius: 8px; }
.btn-lg { padding: 14px 26px; font-size: 15.5px; }
.btn:disabled, .btn.disabled { background: var(--color-border); color: var(--color-ink-500); cursor: not-allowed; }

.text-link { font-size: 13.5px; font-weight: 600; color: var(--color-primary-600); text-decoration: none; }
.text-link:hover { color: var(--color-primary-700); }

/* ---------- Badges & chips ---------- */
.badge {
	display: inline-block;
	border-radius: 4px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 2px 8px;
}
.badge-ruo { background: var(--color-ruo-bg); color: var(--color-ruo-text); border: 1px solid var(--color-ruo-border); }
.badge-lot {
	background: var(--color-verify-100);
	color: var(--color-verify-text);
	border-radius: 4px;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 600;
	padding: 2px 8px;
	text-transform: none;
	letter-spacing: 0;
}
.badge-purity {
	font-family: var(--font-mono);
	font-size: 9.5px;
	background: var(--color-verify-100);
	color: var(--color-verify-text);
	border-radius: 4px;
	padding: 2px 6px;
	font-weight: 600;
}
.badge-save { background: #fdeee3; color: var(--color-sale); border-radius: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 8px; }

.chip {
	display: inline-block;
	background: var(--color-surface-50);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	padding: 6px 12px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--color-ink-900);
	text-decoration: none;
	transition: border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}
.chip:hover { border-color: var(--color-primary-600); color: var(--color-primary-600); }
.chip-primary { background: var(--color-primary-100); border-color: var(--color-primary-100-border); color: var(--color-primary-600); font-weight: 600; }
.chip-primary:hover { background: #d3e6fa; color: var(--color-primary-600); }

.verify-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--color-verify-100);
	color: var(--color-verify-text);
	border-radius: var(--radius-full);
	padding: 5px 12px;
	font-size: 11px;
	font-weight: 600;
}
.verify-pill .verify-dot {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--color-verify-600);
	color: #fff;
	font-size: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.stock-dot { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--color-success); }
.stock-dot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--color-success); }
.stock-dot.is-out { color: var(--color-danger); }
.stock-dot.is-out::before { background: var(--color-danger); }

/* ---------- Sections ---------- */
.section { padding-block: 44px 8px; }
.section-alt {
	background: var(--color-surface-50);
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
	margin-top: 44px;
	padding-block: 40px 44px;
}
.section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 16px;
	flex-wrap: wrap;
	gap: 8px;
}
.section-head h2 { margin: 0; }
.section-head .section-sub { margin: 4px 0 0; font-size: 14px; color: var(--color-ink-500); }

.kicker {
	margin: 0 0 12px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--color-verify-text);
}

/* ---------- Hero ---------- */
.hero-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 48px;
	align-items: center;
	padding-block: 52px 44px;
}
.hero-grid h1 {
	font-size: clamp(34px, 4vw, 48px);
	line-height: 1.06;
	letter-spacing: -0.028em;
	margin: 0 0 16px;
}
.hero-lead { margin: 0 0 22px; font-size: 17px; color: var(--color-ink-600); max-width: 34rem; }
.hero-ctas { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.hero-checks { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 12.5px; color: var(--color-ink-700); }
.hero-checks span { display: inline-flex; align-items: center; gap: 6px; }
.hero-checks .check { color: var(--color-success); font-weight: 700; }

.hero-visual { position: relative; }
.img-placeholder {
	border-radius: var(--radius-lg);
	border: 1px solid var(--color-border);
	box-shadow: inset 0 0 0 6px #ffffff;
	background: repeating-linear-gradient(45deg, #eef4f6 0 12px, #f7fafb 12px 24px);
	display: flex;
	align-items: center;
	justify-content: center;
}
.img-placeholder span { font-family: var(--font-mono); font-size: 12px; color: #8aa0ad; }
.hero-visual .img-placeholder { aspect-ratio: 1 / 0.94; }
.hero-lot-chip {
	position: absolute;
	left: -14px;
	bottom: 24px;
	background: #fff;
	border: 1px solid var(--color-verify-border);
	border-radius: var(--radius-md);
	padding: 10px 14px;
	box-shadow: var(--shadow-md);
	display: flex;
	align-items: center;
	gap: 10px;
}
.hero-lot-chip .verify-dot {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--color-verify-100);
	color: var(--color-verify-text);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 12px;
	flex-shrink: 0;
}
.hero-lot-chip .lot-line { font-family: var(--font-mono); font-size: 12px; color: var(--color-ink-900); }
.hero-lot-chip .lot-line strong { color: var(--color-success); font-weight: 600; }

/* ---------- Trust metrics bar ---------- */
.trust-metrics {
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
	background: var(--color-surface-50);
}
.trust-metrics-inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 16px;
	text-align: center;
	padding-block: 20px;
}
.trust-metric .metric-value { font-family: var(--font-mono); font-weight: 600; font-size: 19px; color: var(--color-ink-900); }
.trust-metric .metric-label { font-size: 11.5px; color: var(--color-ink-500); }

/* ---------- Cards ---------- */
.card {
	background: var(--color-surface-0);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	padding: 18px 20px;
}
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.card-label {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-ink-400);
	margin-bottom: 12px;
}
.chip-row { display: flex; flex-wrap: wrap; gap: 7px; }

/* ---------- Product cards ---------- */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }

.product-card {
	background: var(--color-surface-0);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	overflow: hidden;
	text-decoration: none;
	display: flex;
	flex-direction: column;
	transition: box-shadow var(--motion-base) var(--ease-standard), border-color var(--motion-base) var(--ease-standard);
	color: inherit;
}
.product-card:hover { border-color: var(--color-primary-600); box-shadow: var(--shadow-sm); color: inherit; }
.product-card-media {
	aspect-ratio: 4 / 3;
	background: repeating-linear-gradient(45deg, #eef4f6 0 12px, #f7fafb 12px 24px);
	position: relative;
}
.product-card-media img { width: 100%; height: 100%; object-fit: cover; }
.product-card-media .badge-purity { position: absolute; top: 8px; left: 8px; }
.product-card-media .badge-format { position: absolute; top: 8px; right: 8px; font-size: 9.5px; background: var(--color-primary-100); color: var(--color-primary-600); border-radius: 4px; padding: 2px 7px; font-weight: 700; letter-spacing: 0.03em; }
.product-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.product-card-name { font-weight: 700; font-size: 14.5px; letter-spacing: -0.01em; color: var(--color-ink-900); }
.product-card-alias { font-size: 11.5px; color: var(--color-ink-400); margin-bottom: 6px; }
.product-card-rating { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 11.5px; }
.product-card-rating .stars { color: var(--color-warning); }
.product-card-rating .count { font-size: 11px; color: var(--color-ink-400); }
.product-card .stock-dot { margin-bottom: 10px; }
.product-card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.product-card-price { font-family: var(--font-mono); font-weight: 700; font-size: 14.5px; color: var(--color-ink-900); }
.product-card-price del { color: var(--color-ink-400); font-weight: 400; margin-right: 4px; }
.product-card-price ins { text-decoration: none; }
.product-card-cta {
	font-size: 12px;
	font-weight: 600;
	color: #fff;
	background: var(--color-primary-600);
	border-radius: 7px;
	padding: 7px 13px;
	white-space: nowrap;
}
.product-card:hover .product-card-cta { background: var(--color-primary-700); }

/* ---------- COA module (signature trust component) ---------- */
.coa-teaser {
	border: 1px solid var(--color-verify-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: linear-gradient(135deg, var(--color-verify-surface), #ffffff);
}
.coa-teaser-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: center; }
.coa-teaser-copy { padding: 32px 36px; }
.coa-teaser-copy p.lede { margin: 0 0 18px; font-size: 15px; color: var(--color-ink-600); max-width: 26rem; }
.coa-teaser-cert { padding: 28px 36px; }

.coa-form { display: flex; max-width: 440px; }
.coa-form input[type='text'] {
	flex: 1;
	min-width: 0;
	padding: 13px 16px;
	background: #fff;
	border: 1px solid var(--color-verify-border);
	border-right: none;
	border-radius: 9px 0 0 9px;
	color: var(--color-ink-900);
	font-family: var(--font-mono);
	font-size: 13px;
	outline: none;
}
.coa-form input[type='text']:focus { border-color: var(--color-verify-600); }
.coa-form button {
	padding: 13px 20px;
	background: var(--color-verify-600);
	border: none;
	border-radius: 0 9px 9px 0;
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	font-family: var(--font-sans);
	cursor: pointer;
}
.coa-form button:hover { background: var(--color-verify-650); }
.coa-form-hint { margin: 10px 0 0; font-family: var(--font-mono); font-size: 11px; color: var(--color-ink-400); }
.coa-form-error { margin: 10px 0 0; font-size: 12.5px; color: var(--color-danger); }

.coa-cert {
	border: 1px solid var(--color-verify-border-soft);
	border-radius: var(--radius-card);
	overflow: hidden;
	background: #fff;
	box-shadow: 0 4px 20px rgba(14, 143, 132, 0.08);
}
.coa-cert-head {
	background: var(--color-verify-surface);
	border-bottom: 1px solid var(--color-verify-border-soft);
	padding: 11px 16px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.coa-cert-head .cert-title { font-weight: 700; font-size: 13px; letter-spacing: -0.01em; color: var(--color-ink-900); }
.coa-cert-head .cert-meta { font-family: var(--font-mono); font-size: 10.5px; color: var(--color-verify-text); }
.coa-cert-status { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; border-radius: 4px; padding: 3px 8px; }
.coa-cert-status.is-current { color: var(--color-verify-text); background: var(--color-verify-100); }
.coa-cert-status.is-archived { color: var(--color-warning); background: #fdeee3; }
.coa-cert-row {
	display: grid;
	grid-template-columns: 1.3fr 1fr 0.6fr;
	padding: 9px 16px;
	border-bottom: 1px solid var(--color-border-soft);
	font-size: 12.5px;
	align-items: center;
}
.coa-cert-row:last-of-type { border-bottom: none; }
.coa-cert-row .assay { color: var(--color-ink-500); }
.coa-cert-row .result { font-family: var(--font-mono); font-size: 11.5px; color: var(--color-ink-900); }
.coa-cert-row .status { color: var(--color-success); font-weight: 600; font-size: 11px; font-family: var(--font-mono); }
.coa-cert-foot {
	padding: 10px 16px;
	background: var(--color-surface-50);
	border-top: 1px solid var(--color-border-soft);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	font-size: 12px;
}
.coa-cert-foot .tested { color: var(--color-ink-500); font-family: var(--font-mono); }
.coa-cert-foot a { color: var(--color-verify-text); font-weight: 600; text-decoration: none; }
.coa-cert-foot a:hover { text-decoration: underline; color: var(--color-verify-text); }

/* Full-width certificate band (PDP) */
.coa-band { border: 1px solid var(--color-verify-border); border-radius: 14px; overflow: hidden; }
.coa-band-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 22px;
	background: var(--color-verify-surface);
	border-bottom: 1px solid var(--color-verify-border);
	flex-wrap: wrap;
	gap: 10px;
}
.coa-band-title { display: flex; align-items: center; gap: 10px; }
.coa-band-title .verify-dot {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--color-verify-100);
	color: var(--color-verify-text);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 14px;
	flex-shrink: 0;
}
.coa-band-title .t { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; color: var(--color-ink-900); }
.coa-band-title .m { font-family: var(--font-mono); font-size: 11.5px; color: var(--color-ink-500); }
.coa-band-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.coa-band-actions a {
	border: 1.5px solid var(--color-verify-border);
	border-radius: 8px;
	padding: 8px 14px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--color-verify-text);
	text-decoration: none;
}
.coa-band-actions a:hover { background: var(--color-verify-100); color: var(--color-verify-text); }
.coa-band-cols {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr 0.7fr;
	padding: 9px 22px;
	background: #fbfefd;
	border-bottom: 1px solid #e3f4f0;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-ink-500);
}
.coa-band-row {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr 0.7fr;
	padding: 12px 22px;
	border-bottom: 1px solid #eef6f3;
	font-size: 13px;
	align-items: center;
	background: #fff;
}
.coa-band-row:last-child { border-bottom: none; }
.coa-band-row .assay { font-weight: 600; color: var(--color-ink-900); }
.coa-band-row .method { color: var(--color-ink-500); }
.coa-band-row .result { font-family: var(--font-mono); font-size: 12.5px; }
.coa-band-row .status { font-family: var(--font-mono); font-size: 11px; color: var(--color-success); font-weight: 600; }
@media (max-width: 720px) {
	.coa-band-cols, .coa-band-row { grid-template-columns: 1.2fr 1fr 0.6fr; }
	.coa-band-cols .method, .coa-band-row .method { display: none; }
}

/* Lot ledger table */
.ledger { border: 1px solid var(--color-border); border-radius: var(--radius-card); overflow: hidden; }
.ledger-cols, .ledger-row { display: grid; grid-template-columns: 1.2fr 1.4fr 1fr 1fr 0.8fr; align-items: center; }
.ledger-cols {
	padding: 10px 18px;
	background: var(--color-surface-50);
	border-bottom: 1px solid var(--color-border);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-ink-500);
}
.ledger-row {
	width: 100%;
	padding: 13px 18px;
	border: none;
	border-bottom: 1px solid var(--color-border-soft);
	background: #fff;
	font-family: var(--font-sans);
	font-size: 13.5px;
	cursor: pointer;
	text-align: left;
	transition: background var(--motion-fast) var(--ease-standard);
}
.ledger-row:hover, .ledger-row.is-active { background: var(--color-verify-surface); }
.ledger-row:last-child { border-bottom: none; }
.ledger-row .lot { font-family: var(--font-mono); font-size: 12.5px; color: var(--color-ink-900); }
.ledger-row .compound { font-weight: 600; color: var(--color-ink-900); }
.ledger-row .purity { font-family: var(--font-mono); font-size: 12.5px; color: var(--color-verify-text); }
.ledger-row .purity .pass { background: var(--color-verify-100); border-radius: 4px; padding: 1px 6px; font-size: 10px; font-weight: 600; }
.ledger-row .released { color: var(--color-ink-500); }
.ledger-row .status { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; color: var(--color-verify-text); }
.ledger-row .status.is-archived { color: var(--color-warning); }
@media (max-width: 720px) {
	.ledger-cols, .ledger-row { grid-template-columns: 1.2fr 1.4fr 1fr; }
	.ledger-cols span:nth-child(n+4), .ledger-row span:nth-child(n+4) { display: none; }
}

/* ---------- Answer box (AEO) ---------- */
.answer-box {
	border-left: 3px solid var(--color-verify-600);
	background: var(--color-surface-0);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	padding: 14px 18px;
	margin-bottom: 16px;
}
.answer-box .answer-label {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-verify-text);
	margin-bottom: 6px;
}
.answer-box p { margin: 0; font-size: 14.5px; color: var(--color-ink-700); }

/* FAQ cards */
.faq-card { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 14px 16px; background: var(--color-surface-0); }
.faq-card h3 { margin: 0 0 4px; font-weight: 700; font-size: 14px; letter-spacing: -0.01em; }
.faq-card p { margin: 0; font-size: 13px; color: var(--color-ink-500); }
.faq-stack { display: flex; flex-direction: column; gap: 10px; }

/* Citation chips */
.citation-row { display: flex; gap: 10px; font-size: 13px; color: var(--color-ink-700); align-items: center; margin-bottom: 8px; }
.citation-chip {
	font-family: var(--font-mono);
	font-size: 11px;
	background: var(--color-verify-100);
	color: var(--color-verify-text);
	border-radius: 4px;
	padding: 2px 7px;
	flex-shrink: 0;
}

/* ---------- Breadcrumb ---------- */
.breadcrumb {
	display: flex;
	gap: 8px;
	font-size: 12.5px;
	color: var(--color-ink-400);
	align-items: center;
	flex-wrap: wrap;
	padding-block: 18px 0;
}
.breadcrumb a { color: var(--color-ink-400); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-primary-600); }
.breadcrumb .current { color: var(--color-ink-900); font-weight: 500; }

/* ---------- PDP ---------- */
.pdp-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
	gap: 44px;
	align-items: start;
	padding-block: 22px 40px;
}
.pdp-gallery { position: sticky; top: 84px; }
.pdp-gallery .img-placeholder, .pdp-gallery-main { aspect-ratio: 1; border-radius: var(--radius-lg); overflow: hidden; }
.pdp-gallery-main img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-lg); border: 1px solid var(--color-border); }
.pdp-thumbs { display: flex; gap: 10px; margin-top: 12px; }
.pdp-thumb {
	width: 72px;
	height: 72px;
	border-radius: var(--radius-md);
	border: 1px solid var(--color-border);
	background: repeating-linear-gradient(45deg, #eef4f6 0 8px, #f7fafb 8px 16px);
	overflow: hidden;
}
.pdp-thumb.is-active { border: 2px solid var(--color-primary-600); }
.pdp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pdp-thumb-coa {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-surface-50);
	font-family: var(--font-mono);
	font-size: 9.5px;
	color: var(--color-verify-text);
	text-align: center;
	text-decoration: none;
	line-height: 1.3;
}
.pdp-thumb-coa:hover { border-color: var(--color-verify-600); color: var(--color-verify-text); }
@media (max-width: 900px) { .pdp-gallery { position: static; } }

.pdp-badges { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.pdp-title { margin: 0 0 4px; font-size: 36px; line-height: 1.06; letter-spacing: -0.026em; }
.pdp-alias { margin: 0 0 8px; font-size: 14px; color: var(--color-ink-500); }
.pdp-rating { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; font-size: 13px; }
.pdp-rating .stars { color: var(--color-warning); font-size: 14px; }
.pdp-rating .avg { font-weight: 600; color: var(--color-ink-900); }
.pdp-rating .count { color: var(--color-ink-400); }

.variant-label { font-size: 12px; font-weight: 600; color: var(--color-ink-900); margin-bottom: 7px; }
.variant-options { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.variant-option {
	border: 1px solid var(--color-border);
	background: #fff;
	color: var(--color-ink-700);
	border-radius: 8px;
	padding: 9px 16px;
	font-family: var(--font-sans);
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color var(--motion-fast) var(--ease-standard), background var(--motion-fast) var(--ease-standard);
}
.variant-option:hover { border-color: var(--color-primary-600); }
.variant-option.is-active { border: 2px solid var(--color-primary-600); background: var(--color-primary-100); color: var(--color-primary-600); padding: 8px 15px; }

.pdp-buy-row { display: flex; gap: 10px; margin-bottom: 14px; align-items: stretch; }
.pdp-qty { display: flex; align-items: center; border: 1px solid var(--color-border); border-radius: 8px; }
.pdp-qty input {
	width: 3.2rem;
	border: none;
	text-align: center;
	font-family: var(--font-mono);
	font-size: 14px;
	font-weight: 600;
	color: var(--color-ink-900);
	background: transparent;
	padding: 12px 4px;
	-moz-appearance: textfield;
}
.pdp-qty input::-webkit-outer-spin-button, .pdp-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.pdp-trust-row { display: flex; gap: 16px; font-size: 11.5px; color: var(--color-ink-500); margin-bottom: 18px; flex-wrap: wrap; }
.pdp-trust-row span { display: inline-flex; align-items: center; gap: 5px; }
.pdp-trust-row .check { color: var(--color-success); font-weight: 700; }

.pdp-facts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px 16px;
	background: var(--color-surface-50);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 14px 16px;
	font-size: 12.5px;
	margin: 0;
}
.pdp-facts > div dt, .pdp-facts .fact-label {
	display: block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-ink-400);
	margin: 0;
}
.pdp-facts dd { margin: 0; }

/* Panels (PDP research content) */
.pdp-panels {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
	gap: 44px;
	align-items: start;
	padding-block: 40px;
}
.pdp-prose { font-size: 14.5px; color: #33415a; line-height: 1.65; }
.pdp-prose p { margin: 0 0 12px; }
.side-card { border: 1px solid var(--color-border); border-radius: 14px; padding: 16px; background: #fff; }
.side-card .side-card-title { font-weight: 700; font-size: 14px; letter-spacing: -0.01em; color: var(--color-ink-900); margin-bottom: 8px; }
.side-card p { margin: 0 0 8px; font-size: 12.5px; color: var(--color-ink-500); line-height: 1.55; }
.side-card p:last-child { margin-bottom: 0; }

/* RUO disclaimer band */
.disclaimer-band { background: var(--color-ruo-bg); border-top: 1px solid var(--color-ruo-border); }
.disclaimer-band .container { padding-block: 16px; font-size: 12.5px; color: var(--color-ruo-text); }
.disclaimer-band p { margin: 0; }
.disclaimer-band a { color: var(--color-ruo-text); }

/* Sticky add-to-cart bar */
.sticky-atc {
	position: sticky;
	bottom: 0;
	z-index: 90;
	background: rgba(255, 255, 255, 0.97);
	backdrop-filter: blur(10px);
	border-top: 1px solid var(--color-border);
	box-shadow: 0 -4px 16px rgba(12, 31, 51, 0.06);
}
.sticky-atc-inner { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-block: 11px; }
.sticky-atc-name { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 200px; }
.sticky-atc-name .n { font-weight: 700; font-size: 14.5px; letter-spacing: -0.01em; color: var(--color-ink-900); }
.sticky-atc-name .s { font-size: 12px; color: var(--color-ink-400); }
.sticky-atc-price { font-family: var(--font-mono); font-weight: 700; font-size: 18px; color: var(--color-ink-900); }

/* ---------- Shop / catalog ---------- */
.catalog-layout { display: grid; grid-template-columns: 250px 1fr; gap: 32px; align-items: start; padding-block: 24px 8px; }
@media (max-width: 900px) { .catalog-layout { grid-template-columns: 1fr; } }

.facet-panel { position: sticky; top: 76px; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: #fff; overflow: hidden; }
@media (max-width: 900px) { .facet-panel { position: static; } }
.facet-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 13px 16px;
	border-bottom: 1px solid var(--color-border);
	background: var(--color-surface-50);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: -0.01em;
	color: var(--color-ink-900);
}
.facet-head a { font-size: 11.5px; font-weight: 600; color: var(--color-primary-600); text-decoration: none; }
.facet-group { padding: 13px 16px; border-bottom: 1px solid var(--color-border-soft); }
.facet-group-label {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-ink-400);
	margin-bottom: 9px;
}
.facet-options { display: flex; flex-direction: column; gap: 6px; }
.facet-option { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--color-ink-700); text-decoration: none; padding: 2px 0; }
.facet-option:hover { color: var(--color-primary-600); }
.facet-option .box {
	width: 16px;
	height: 16px;
	border-radius: 4px;
	border: 1.5px solid #b8c4cf;
	background: #fff;
	color: #fff;
	font-size: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.facet-option.is-active .box { border-color: var(--color-primary-600); background: var(--color-primary-600); }
.facet-option .count { font-family: var(--font-mono); font-size: 10.5px; color: var(--color-ink-400); margin-left: auto; }
.facet-verified {
	padding: 13px 16px;
	background: var(--color-verify-surface);
	border-top: 1px solid var(--color-verify-border-soft);
	font-size: 11.5px;
	color: var(--color-verify-text);
	display: flex;
	align-items: center;
	gap: 7px;
}
.facet-verified .verify-dot {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--color-verify-600);
	color: #fff;
	font-size: 9px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.catalog-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; flex-wrap: wrap; gap: 10px; }
.catalog-count { font-family: var(--font-mono); font-size: 12.5px; color: var(--color-ink-500); }
.sort-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.sort-pill {
	border: 1px solid var(--color-border);
	background: #fff;
	color: var(--color-ink-500);
	border-radius: var(--radius-full);
	padding: 6px 13px;
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
}
.sort-pill:hover { border-color: var(--color-primary-600); color: var(--color-primary-600); }
.sort-pill.is-active { border-color: var(--color-primary-600); background: var(--color-primary-100); color: var(--color-primary-600); }

.page-intro { padding-block: 18px 8px; }
.page-intro .lead { margin: 0; font-size: 15px; color: var(--color-ink-600); max-width: 46rem; }

/* Pagination */
.woocommerce-pagination, .lattice-pagination { text-align: center; padding-block: 24px; }
.woocommerce-pagination ul { display: inline-flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.woocommerce-pagination .page-numbers {
	display: inline-block;
	padding: 8px 14px;
	border: 1px solid var(--color-border);
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--color-ink-700);
	text-decoration: none;
}
.woocommerce-pagination .page-numbers.current { background: var(--color-primary-600); border-color: var(--color-primary-600); color: #fff; }
.woocommerce-pagination .page-numbers:hover:not(.current) { border-color: var(--color-primary-600); color: var(--color-primary-600); }

/* ---------- How-it-works cards ---------- */
.step-card { border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 20px; background: #fff; }
.step-card .step-num { font-family: var(--font-mono); font-size: 11px; color: var(--color-ink-400); margin-bottom: 8px; }
.step-card h3 { margin: 0 0 6px; font-size: 15.5px; }
.step-card p { margin: 0; font-size: 13px; color: var(--color-ink-500); }

/* ---------- Dark footer ---------- */
.site-footer { background: var(--color-ink-900); color: rgba(255, 255, 255, 0.75); padding: 36px 0 20px; margin-top: 44px; }
.footer-grid { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin-bottom: 22px; }
.footer-brand { max-width: 320px; }
.footer-brand .footer-logo { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.footer-brand .footer-logo span { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; color: #fff; }
.footer-brand p { margin: 0; font-size: 12px; opacity: 0.75; }
.footer-cols { display: flex; gap: 48px; font-size: 12.5px; flex-wrap: wrap; }
.footer-col { display: flex; flex-direction: column; gap: 6px; }
.footer-heading {
	font-weight: 700;
	font-size: 10.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 2px;
	font-family: var(--font-sans);
}
.footer-col a { color: rgba(255, 255, 255, 0.75); text-decoration: none; }
.footer-col a:hover { color: #fff; }
.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding-top: 12px;
	font-size: 11px;
	opacity: 0.6;
	display: flex;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}
.footer-bottom p { margin: 0; }
.footer-bottom a { color: inherit; }

/* ---------- Generic prose (seeded pages) ---------- */
.page-content { padding-block: 32px 8px; }
.prose { font-size: 14.5px; color: #33415a; line-height: 1.65; max-width: 72ch; }
.prose h2 { margin-top: 28px; }
.prose h3 { margin-top: 20px; }

/* Legacy static-build class shims (seeded page HTML uses these) */
.section .container > .page-header { padding-block: 18px 8px; }
.lead { font-size: 15px; color: var(--color-ink-600); }

/* ---------- Forms ---------- */
input[type='text'], input[type='email'], input[type='tel'], input[type='password'], input[type='number'], textarea, select {
	font-family: var(--font-sans);
	font-size: 14px;
	color: var(--color-ink-900);
	border: 1px solid var(--color-border);
	border-radius: 8px;
	padding: 11px 14px;
	background: #fff;
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--color-primary-600); outline-offset: 0; border-color: var(--color-primary-600); }
label { font-size: 13px; font-weight: 500; }

/* ---------- Utility ---------- */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 44px; align-items: start; }
.mt-0 { margin-top: 0; }
.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px;
}