/* =====================================================
   HEALIO — design tokens
   ===================================================== */
:root {
	--cream: #FBF6F7;
	--paper: #FFFFFF;
	--blush: #E9C3D3;
	--blush-soft: #F4E2EA;
	--rose: #C96790;
	--berry: #8E2444;
	--wine: #2B0A14;
	--mauve: #6B6165;
	--line: rgba(43, 10, 20, 0.10);
	--shadow-soft: 0 24px 48px -24px rgba(43, 10, 20, 0.22);
	--shadow-lift: 0 32px 64px -28px rgba(43, 10, 20, 0.30);

	--font-display: "Fraunces", Georgia, "Times New Roman", serif;
	--font-body: "Figtree", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
	--font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

	--wrap: 1200px;
	--pad: clamp(20px, 4vw, 48px);
	--radius: 18px;
}

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

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--cream);
	color: var(--wine);
	font-family: var(--font-body);
	font-size: 16.5px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4, .hd--h1, .hd--h2, .hd--h3, .hd--h4 {
	font-family: var(--font-display);
	font-weight: 480;
	line-height: 1.06;
	letter-spacing: -0.015em;
	margin: 0;
	text-wrap: balance;
}

h2, .hd--h2 { font-size: clamp(30px, 4.4vw, 52px); }
h2 em, h1 em, .hd--h2 em, .hd--h1 em {
	font-style: italic;
	color: var(--rose);
	font-variation-settings: "opsz" 100;
}

p { margin: 0; }

::selection { background: var(--blush); color: var(--wine); }

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

.eyebrow {
	font-family: var(--font-mono);
	font-size: 11.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--rose);
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--rose); }
.eyebrow-light { color: var(--blush); }
.eyebrow-light::before { background: var(--blush); }

/* =====================================================
   Buttons
   ===================================================== */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--font-body);
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none;
	border-radius: 999px;
	padding: 14px 28px;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.btn-solid {
	background: var(--rose);
	color: #fff;
	box-shadow: 0 14px 28px -14px rgba(201, 103, 144, 0.65);
}
.btn-solid:hover { background: var(--berry); transform: translateY(-2px); box-shadow: 0 18px 34px -14px rgba(142, 36, 68, 0.6); }
.btn-solid:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-ghost {
	background: transparent;
	color: var(--wine);
	border-color: var(--line);
}
.btn-ghost:hover { border-color: var(--rose); color: var(--berry); transform: translateY(-2px); }
.hero-ctas .btn-ghost { border-width: 2.5px; border-color: var(--rose); color: var(--rose); font-weight: 600; }
.hero-ctas .btn-ghost:hover { border-color: var(--berry); color: var(--berry); }
.btn-ghost-light { color: var(--cream); border-color: rgba(251, 246, 247, 0.35); }
.btn-ghost-light:hover { border-color: var(--blush); color: var(--blush); }
.btn-invert { background: var(--cream); color: var(--berry); box-shadow: none; }
.btn-invert:hover { background: var(--blush-soft); }
.btn-line {
	background: transparent;
	color: var(--berry);
	border-color: var(--line);
	padding: 11px 22px;
	font-size: 13.5px;
}
.btn-line:hover { background: var(--rose); border-color: var(--rose); color: #fff; }

/* =====================================================
   Age gate
   ===================================================== */
.age-gate {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(43, 10, 20, 0.55);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}
.age-gate[hidden] { display: none; }
.age-gate-card {
	background: var(--cream);
	border-radius: 24px;
	max-width: 460px;
	width: 100%;
	padding: 44px 40px 36px;
	text-align: center;
	box-shadow: var(--shadow-lift);
}
.age-gate-mark { color: var(--rose); display: inline-block; }
.age-gate-mark .petal-mark { width: 30px; height: 30px; }
.age-gate-mark .logo-mark { width: 48px; height: 48px; display: block; margin: 0 auto; }
.age-gate-brand {
	font-family: var(--font-display);
	font-size: 25px;
	margin: 6px 0 22px;
}
.age-gate-brand span {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: var(--rose);
	margin-left: 8px;
	vertical-align: 3px;
}
.age-gate h2, .age-gate .hd--h2 { font-size: 30px; margin-bottom: 10px; }
.age-gate-sub { color: var(--mauve); font-size: 14.5px; margin-bottom: 22px; }
.age-gate-ack {
	display: flex;
	gap: 10px;
	text-align: left;
	font-size: 13px;
	color: var(--mauve);
	background: var(--blush-soft);
	border-radius: 12px;
	padding: 14px 16px;
	margin-bottom: 22px;
	cursor: pointer;
}
.age-gate-ack input { accent-color: var(--rose); margin-top: 2px; flex-shrink: 0; }
.age-gate .btn { width: 100%; }
.age-gate-exit {
	display: inline-block;
	margin-top: 16px;
	font-size: 12.5px;
	color: var(--mauve);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* =====================================================
   Announcement bar + header
   ===================================================== */
.announce-bar {
	background: var(--wine);
	color: var(--blush);
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	padding: 9px 0;
	overflow: hidden;
}
.announce-track {
	display: flex;
	align-items: center;
	width: max-content;
	white-space: nowrap;
	animation: announce-scroll 38s linear infinite;
}
.announce-item { text-transform: uppercase; padding: 0 14px; }
.announce-sep { color: var(--rose); padding: 0 2px; }
@keyframes announce-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 900;
	background: rgba(251, 246, 247, 0.82);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid transparent;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.site-header.is-scrolled {
	border-bottom-color: var(--line);
	box-shadow: 0 12px 32px -24px rgba(43, 10, 20, 0.25);
}
.header-inner {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 16px var(--pad);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.logo {
	display: inline-flex;
	align-items: baseline;
	gap: 7px;
	text-decoration: none;
	color: var(--wine);
}
.logo .petal-mark { width: 17px; height: 17px; color: var(--rose); align-self: center; }
.logo .logo-mark { width: 28px; height: 28px; align-self: center; display: block; }
.logo-word {
	font-family: var(--font-display);
	font-size: 27px;
	font-weight: 520;
	letter-spacing: -0.01em;
}
.logo-sub {
	font-family: var(--font-mono);
	font-size: 9.5px;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: var(--rose);
}

/* Logo shown at the top of the mobile nav overlay only. */
.mobile-nav-logo { display: none; }

.site-nav ul { list-style: none; display: flex; gap: 30px; margin: 0; padding: 0; }
.site-nav a {
	text-decoration: none;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--wine);
	position: relative;
	padding: 6px 0;
}
.site-nav a::after {
	content: "";
	position: absolute;
	left: 0; right: 100%;
	bottom: 0;
	height: 1.5px;
	background: var(--rose);
	transition: right 0.28s ease;
}
.site-nav a:hover::after { right: 0; }

.header-actions { display: flex; align-items: center; gap: 8px; }
.header-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px; height: 40px;
	border-radius: 50%;
	color: var(--wine);
	transition: background 0.25s ease, color 0.25s ease;
}
.header-icon svg { width: 21px; height: 21px; }
.header-icon:hover { background: var(--blush-soft); color: var(--berry); }
.cart-count {
	position: absolute;
	top: 2px; right: 0;
	background: var(--rose);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	min-width: 16px; height: 16px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 4px;
}

.nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px; height: 40px;
	background: none;
	border: 0;
	cursor: pointer;
	border-radius: 50%;
}
.nav-toggle span {
	display: block;
	width: 20px; height: 2px;
	margin: 0 auto;
	background: var(--wine);
	transition: transform 0.3s ease, opacity 0.3s ease;
}
body.nav-open .nav-toggle span:first-child { transform: translateY(3.5px) rotate(45deg); }
body.nav-open .nav-toggle span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* =====================================================
   Hero
   ===================================================== */
.hero {
	position: relative;
	min-height: calc(94vh - 100px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.hero-video {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	opacity: 0.35;
	filter: blur(2px) saturate(1.05);
}
.hero-glow {
	position: absolute;
	inset: -10%;
	background:
		radial-gradient(46% 60% at 72% 40%, rgba(233, 195, 211, 0.55) 0%, rgba(233, 195, 211, 0) 70%),
		radial-gradient(38% 48% at 18% 78%, rgba(233, 195, 211, 0.38) 0%, rgba(233, 195, 211, 0) 70%);
}
.hero-petals { position: absolute; inset: 0; overflow: hidden; }
.petal {
	position: absolute;
	width: 26px; height: 19px;
	background: linear-gradient(135deg, #F0CBDA 0%, var(--rose) 130%);
	border-radius: 68% 32% 62% 38% / 60% 48% 52% 40%;
	opacity: 0.5;
	will-change: transform;
}

.hero-ghost {
	position: absolute;
	top: 44%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-family: var(--font-display);
	font-weight: 560;
	font-size: clamp(110px, 21vw, 340px);
	letter-spacing: -0.02em;
	color: var(--wine);
	opacity: 0.06;
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
	z-index: 1;
	line-height: 1;
}

.hero-inner {
	position: relative;
	z-index: 2;
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 48px var(--pad);
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(24px, 5vw, 72px);
	width: 100%;
}

.hero-pill {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--font-mono);
	font-size: 11.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--berry);
	background: rgba(255, 255, 255, 0.65);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 9px 18px;
	margin-bottom: 26px;
}
.pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--rose); }
.pill-flag { font-size: 14px; line-height: 1; }

.hero-title {
	font-size: clamp(46px, 7vw, 92px);
	margin-bottom: 24px;
}
.hero-sub {
	max-width: 46ch;
	font-size: 17.5px;
	color: var(--mauve);
	margin-bottom: 34px;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; }

.hero-visual { position: relative; z-index: 2; display: flex; justify-content: flex-start; overflow: visible; }
.hero-vial {
	/* Sized by width (viewport-relative), not by container %, so a wide/landscape
	   product shot can bleed past its grid column toward the hero's right edge
	   instead of shrinking to fit — .hero has overflow:hidden to contain the bleed.
	   NOTE: desktop size only — mobile overrides this in the max-width:860px block.
	   Anchored left (.hero-visual justify-content:flex-start) so it bleeds slightly
	   past the right edge as a design accent instead of shrinking the copy column. */
	width: min(54vw, 700px);
	max-width: none;
	height: auto;
	flex-shrink: 0;
	/* Transparent PNG cutout: drop-shadow follows the vial's alpha outline
	   so it reads as a real product floating in the hero, not a white card. */
	filter: drop-shadow(0 34px 44px rgba(142, 36, 68, 0.30));
	will-change: transform;
}

.hero-scroll {
	display: none;
	position: absolute;
	bottom: 26px;
	left: 50%;
	transform: translateX(-50%);
	width: 24px; height: 38px;
	border: 1.5px solid var(--line);
	border-radius: 999px;
	z-index: 2;
}
.hero-scroll span {
	position: absolute;
	top: 7px; left: 50%;
	width: 4px; height: 8px;
	margin-left: -2px;
	border-radius: 999px;
	background: var(--rose);
	animation: scrollcue 1.8s ease-in-out infinite;
}
@keyframes scrollcue {
	0%, 100% { transform: translateY(0); opacity: 1; }
	60% { transform: translateY(12px); opacity: 0.2; }
}

/* =====================================================
   Trust marquee
   ===================================================== */
.trust-marquee {
	background: var(--wine);
	color: var(--cream);
	overflow: hidden;
	padding: 15px 0;
}
.marquee-track {
	display: flex;
	align-items: center;
	gap: 34px;
	width: max-content;
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
	animation: marquee 30s linear infinite;
}
.m-sep { color: var(--rose); font-size: 14px; }
@keyframes marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* =====================================================
   Sections — shared
   ===================================================== */
.section {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: clamp(56px, 7vw, 92px) var(--pad);
}
.section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: clamp(34px, 5vw, 56px);
}

/* =====================================================
   Featured products
   ===================================================== */
.product-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
}
.product-card {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.product-media {
	display: block;
	position: relative;
	background: linear-gradient(160deg, var(--blush-soft) 0%, #fff 90%);
}
.product-media img { width: 100%; aspect-ratio: 1; object-fit: cover; mix-blend-mode: multiply; }
.sale-flag {
	position: absolute;
	top: 12px; left: 12px;
	z-index: 2;
	background: var(--berry);
	color: #fff;
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-radius: 999px;
	padding: 5px 12px;
}
.product-info { padding: 18px 20px 22px; text-align: center; }
.product-info h3, .product-info .hd--h3 { font-family: var(--font-body); font-size: 16px; font-weight: 600; letter-spacing: 0; }
.product-info h3 a, .product-info .hd--h3 a { text-decoration: none; }
.product-info h3 a:hover, .product-info .hd--h3 a:hover { color: var(--berry); }
.product-price { color: var(--berry); font-weight: 600; font-size: 15px; margin: 7px 0 14px; }
.product-price del { color: var(--mauve); font-weight: 400; margin-right: 6px; }
.product-price ins { text-decoration: none; }
.product-btn { width: 100%; }

/* =====================================================
   Statement
   ===================================================== */
.statement { position: relative; }
.statement-grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: clamp(32px, 6vw, 80px);
	align-items: center;
}
.statement-sub { color: var(--mauve); max-width: 52ch; margin: 20px 0 36px; }
.statement-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }
.statement-list li { display: flex; gap: 22px; align-items: flex-start; }
.s-num {
	font-family: var(--font-display);
	font-style: italic;
	font-size: 30px;
	color: var(--rose);
	line-height: 1;
	min-width: 52px;
}
.statement-list h3, .statement-list .hd--h3 { font-family: var(--font-body); font-size: 17px; font-weight: 650; margin-bottom: 5px; }
.statement-list p { color: var(--mauve); font-size: 14.5px; max-width: 46ch; }
.statement-visual img {
	border-radius: 28px;
	box-shadow: var(--shadow-lift);
	width: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 5;
}

/* =====================================================
   Categories
   ===================================================== */
.category-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
.category-tile {
	text-decoration: none;
	text-align: center;
	display: grid;
	justify-items: center;
	gap: 4px;
}
.category-circle {
	width: min(100%, 210px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: linear-gradient(150deg, var(--blush-soft), var(--blush));
	background-size: cover;
	background-position: center;
	border: 1px solid var(--line);
	box-shadow: var(--shadow-soft);
	transition: transform 0.35s ease, box-shadow 0.35s ease;
	margin-bottom: 14px;
}
.category-tile:hover .category-circle { transform: scale(1.045); box-shadow: var(--shadow-lift); }
.category-name { font-family: var(--font-display); font-size: 21px; }
.category-tile:hover .category-name { color: var(--berry); }
.category-count { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mauve); }

/* =====================================================
   Stats
   ===================================================== */
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.stat-card {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 34px 30px;
	box-shadow: var(--shadow-soft);
}
.stat-num {
	font-family: var(--font-display);
	font-size: clamp(44px, 5vw, 64px);
	line-height: 1;
	color: var(--berry);
	margin-bottom: 14px;
	font-variant-numeric: tabular-nums;
}
.stat-suffix { color: var(--rose); font-style: italic; margin-left: 2px; }
.stat-card h3, .stat-card .hd--h3 { font-family: var(--font-body); font-size: 16px; font-weight: 650; margin-bottom: 6px; }
.stat-card p { color: var(--mauve); font-size: 14px; }

/* =====================================================
   Reviews
   ===================================================== */
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.review-card {
	margin: 0;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 30px 28px;
	box-shadow: var(--shadow-soft);
	display: grid;
	gap: 14px;
	align-content: start;
}
.review-stars { color: var(--rose); letter-spacing: 3px; font-size: 14px; }
.review-card blockquote {
	margin: 0;
	font-family: var(--font-display);
	font-size: 19px;
	line-height: 1.4;
	font-weight: 420;
}
.review-card figcaption {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13.5px;
	font-weight: 600;
}
.review-avatar {
	width: 34px; height: 34px;
	border-radius: 50%;
	background: linear-gradient(140deg, var(--rose), var(--berry));
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display);
	font-size: 15px;
}
.review-badge {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--rose);
	background: var(--blush-soft);
	border-radius: 999px;
	padding: 4px 10px;
	margin-left: auto;
	font-weight: 400;
}

/* =====================================================
   Journal
   ===================================================== */
.journal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.journal-card {
	text-decoration: none;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	padding-bottom: 24px;
	display: grid;
	gap: 9px;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	align-content: start;
}
.journal-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.journal-media { display: block; aspect-ratio: 16 / 10; background: linear-gradient(150deg, var(--blush-soft), var(--blush)); position: relative; margin-bottom: 8px; }
.journal-media img { width: 100%; height: 100%; object-fit: cover; }
.journal-fallback {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display);
	font-style: italic;
	font-size: 64px;
	color: rgba(142, 36, 68, 0.35);
}
.journal-meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mauve); padding: 0 22px; }
.journal-card h3, .journal-card .hd--h3 { font-size: 21px; padding: 0 22px; }
.journal-card:hover h3, .journal-card:hover .hd--h3 { color: var(--berry); }
.journal-card p { color: var(--mauve); font-size: 14px; padding: 0 22px; }
.journal-more { color: var(--berry); font-size: 13.5px; font-weight: 600; padding: 0 22px; }

/* =====================================================
   FAQ
   ===================================================== */
.faq-wrap {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
}
.faq-tabs { display: grid; gap: 6px; position: sticky; top: 110px; }
.faq-tab {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	text-align: left;
	background: none;
	border: 1px solid transparent;
	border-radius: 12px;
	padding: 15px 18px;
	font-family: var(--font-body);
	font-size: 15.5px;
	font-weight: 600;
	color: var(--mauve);
	cursor: pointer;
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.faq-tab span { font-family: var(--font-mono); font-size: 11px; color: var(--rose); font-weight: 400; }
.faq-tab:hover { color: var(--wine); background: var(--blush-soft); }
.faq-tab.is-active { background: var(--paper); border-color: var(--line); color: var(--wine); box-shadow: var(--shadow-soft); }
.faq-panel { display: none; }
.faq-panel.is-active { display: block; }
.faq-item {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 14px;
	margin-bottom: 12px;
	overflow: hidden;
}
.faq-item summary {
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 19px 22px;
	font-weight: 600;
	font-size: 15.5px;
	cursor: pointer;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-x { position: relative; width: 14px; height: 14px; flex-shrink: 0; }
.faq-x::before, .faq-x::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	background: var(--rose);
	transition: transform 0.3s ease;
}
.faq-x::before { width: 14px; height: 1.6px; }
.faq-x::after { width: 1.6px; height: 14px; }
.faq-item[open] .faq-x::after { transform: rotate(90deg); }
.faq-item[open] summary { color: var(--berry); }
.faq-item p { padding: 0 22px 20px; color: var(--mauve); font-size: 14.5px; max-width: 62ch; }

/* =====================================================
   Final CTA
   ===================================================== */
.final-cta {
	background:
		radial-gradient(60% 90% at 80% 10%, rgba(201, 103, 144, 0.25) 0%, rgba(201, 103, 144, 0) 60%),
		var(--wine);
	color: var(--cream);
	text-align: center;
	padding: clamp(72px, 10vw, 130px) var(--pad);
}
.final-cta-inner { max-width: 640px; margin: 0 auto; display: grid; gap: 20px; justify-items: center; }
.final-cta h2, .final-cta .hd--h2 { color: var(--cream); }
.final-cta h2 em, .final-cta .hd--h2 em { color: var(--blush); }
.final-cta p { color: rgba(251, 246, 247, 0.75); max-width: 46ch; }
.final-cta .eyebrow { justify-content: center; }
.final-cta .hero-ctas { justify-content: center; margin-top: 8px; }

/* =====================================================
   Footer
   ===================================================== */
.site-footer {
	position: relative;
	background: var(--wine);
	color: var(--cream);
	overflow: hidden;
	border-top: 1px solid rgba(233, 195, 211, 0.16);
}
.footer-inner {
	position: relative;
	z-index: 2;
	max-width: var(--wrap);
	margin: 0 auto;
	padding: clamp(56px, 7vw, 88px) var(--pad) 40px;
}
.footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: clamp(28px, 4vw, 56px);
	padding-bottom: 48px;
	border-bottom: 1px solid rgba(233, 195, 211, 0.16);
}
.footer-logo { color: var(--cream); margin-bottom: 16px; }
.footer-logo .logo-word { font-size: 24px; }
.footer-logo .logo-mark { width: 26px; height: 26px; }

/* FDA / legal disclaimer block */
.footer-disclaimer-block {
	margin-top: 40px;
	padding-top: 28px;
	border-top: 1px solid rgba(233, 195, 211, 0.16);
	max-width: 100%;
}
.footer-disclaimer-block h4, .footer-disclaimer-block .hd--h4 {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--rose);
	margin-bottom: 14px;
}
.footer-disclaimer-block p {
	font-size: 12px;
	line-height: 1.7;
	color: rgba(251, 246, 247, 0.55);
	margin-bottom: 12px;
	max-width: none;
}
.footer-disclaimer-block p:last-child { margin-bottom: 0; }
.footer-disclaimer-block a { color: var(--blush); text-decoration: underline; text-underline-offset: 2px; }
.footer-blurb { color: var(--blush); font-size: 14.5px; max-width: 34ch; margin-bottom: 18px; }
.footer-disclaimer { color: rgba(251, 246, 247, 0.45); font-size: 12px; line-height: 1.6; max-width: 40ch; }
.footer-col h4, .footer-col .hd--h4 {
	font-family: var(--font-mono);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--rose);
	margin-bottom: 18px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer-col a {
	text-decoration: none;
	color: rgba(251, 246, 247, 0.8);
	font-size: 14.5px;
	transition: color 0.2s ease;
}
.footer-col a:hover { color: var(--blush); }
.footer-legal {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding-top: 26px;
	font-size: 12.5px;
	color: rgba(251, 246, 247, 0.5);
}
.footer-legal-note { font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; font-size: 11px; }
.footer-watermark {
	position: absolute;
	bottom: -0.28em;
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(120px, 22vw, 360px);
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1px rgba(233, 195, 211, 0.14);
	pointer-events: none;
	user-select: none;
	white-space: nowrap;
}

/* =====================================================
   Inner pages + WooCommerce
   ===================================================== */
.page-shell {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: clamp(48px, 7vw, 88px) var(--pad) clamp(64px, 9vw, 120px);
}
.page-shell-narrow { max-width: 820px; }
.page-head { margin-bottom: clamp(32px, 5vw, 56px); }
.page-head h1, .page-head .hd--h1 { font-size: clamp(38px, 5.5vw, 64px); }
.prose { max-width: 68ch; font-size: 17px; }
.prose p { margin-bottom: 1.2em; }
.prose h2, .prose h3, .prose .hd--h2, .prose .hd--h3 { margin: 1.6em 0 0.6em; }
.prose h3 { font-size: 21px; }
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.2em; }
.prose li { margin-bottom: 0.45em; }
.prose a { color: var(--berry); }
.post-hero img { border-radius: var(--radius); box-shadow: var(--shadow-soft); margin-bottom: 36px; }
.post-footer { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); }
.post-footer .footer-disclaimer { color: var(--mauve); }

/* Shop toolbar — category filter + price sort pills */
.shop-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
	margin: 0 0 32px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--line);
}
.shop-filters, .shop-sort { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.shop-sort-label {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mauve);
	margin-right: 2px;
}
.shop-pill {
	display: inline-block;
	padding: 8px 16px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: #fff;
	color: var(--wine);
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.shop-pill:hover { border-color: var(--rose); color: var(--berry); transform: translateY(-1px); }
.shop-pill.is-active { background: var(--rose); border-color: var(--rose); color: #fff; }
.shop-pill-sort { font-family: var(--font-body); }
@media (max-width: 700px) {
	.shop-toolbar { flex-direction: column; align-items: stretch; }
	.shop-filters, .shop-sort { justify-content: center; }
}

/* WooCommerce base skin */
.woocommerce ul.products { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 22px; margin: 0 !important; padding: 0; }
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none; }
.woocommerce ul.products li.product {
	float: none !important;
	width: 100% !important;
	margin: 0 !important;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	padding: 0 0 20px !important;
	text-align: center;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.woocommerce ul.products li.product:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.woocommerce ul.products li.product a img { margin: 0 0 14px; background: linear-gradient(160deg, var(--blush-soft), #fff); }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--font-body); font-size: 16px; font-weight: 600; padding: 0 16px 4px; }
.woocommerce ul.products li.product .price { color: var(--berry) !important; font-weight: 600; font-size: 15px !important; }
.woocommerce ul.products li.product .button {
	margin: 12px auto 0;
}
.woocommerce .button, .woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #respond input#submit,
.woocommerce a.button.alt, .woocommerce button.button.alt, .wc-block-components-button {
	background: var(--rose) !important;
	color: #fff !important;
	border-radius: 999px !important;
	font-family: var(--font-body) !important;
	font-weight: 600 !important;
	padding: 12px 24px !important;
	border: 0 !important;
	transition: background 0.25s ease, transform 0.25s ease !important;
}
/* Gate the darker hover behind real hover devices — on touch screens :hover
   sticks after a tap, which made "Add to Cart" buttons look stuck in the dark
   hover color after adding. */
@media (hover: hover) {
	.woocommerce .button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover,
	.woocommerce a.button.alt:hover, .wc-block-components-button:hover { background: var(--berry) !important; transform: translateY(-2px); }
}
.woocommerce span.onsale {
	background: var(--berry) !important;
	font-family: var(--font-mono);
	font-size: 10.5px !important;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-radius: 999px !important;
	line-height: 1 !important;
	padding: 7px 13px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	top: 12px !important;
	left: 12px !important;
}
.woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--berry) !important; font-size: 22px; font-weight: 600; }
.woocommerce div.product .product_title { font-size: clamp(30px, 4vw, 44px); }
.woocommerce div.product div.images img { border-radius: var(--radius); background: linear-gradient(160deg, var(--blush-soft), #fff); }
.woocommerce nav.woocommerce-pagination ul { border: 0; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; margin: 0 3px; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span {
	border-radius: 999px; padding: 10px 16px; font-weight: 600;
}
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--rose); color: #fff; }
.woocommerce .woocommerce-breadcrumb { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mauve) !important; margin-bottom: 28px !important; }
.woocommerce .woocommerce-breadcrumb a { color: var(--rose); }
.woocommerce-message, .woocommerce-info {
	border-top-color: var(--rose) !important;
	background: var(--blush-soft) !important;
	color: var(--wine) !important;
	border-radius: 12px;
}
.woocommerce-message::before, .woocommerce-info::before { color: var(--rose) !important; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select {
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 12px 14px;
	background: #fff;
	font-family: var(--font-body);
}
.woocommerce table.shop_table { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.woocommerce table.shop_table td, .woocommerce table.shop_table th { border-color: var(--line) !important; }

/* =====================================================
   Reveal helper (initial states set by GSAP only)
   ===================================================== */
/* =====================================================
   Where to buy peptides (buying guide)
   ===================================================== */
.buyguide-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.buyguide-copy .eyebrow { margin-bottom: 18px; }
.buyguide-body { display: grid; gap: 16px; margin: 22px 0 32px; color: var(--mauve); font-size: 15px; line-height: 1.72; max-width: 56ch; }
.buyguide-body strong { color: var(--berry); font-weight: 600; }
.buyguide-aside-title { font-family: var(--font-display); font-size: clamp(22px, 2.6vw, 30px); line-height: 1.15; margin-bottom: 22px; }
.buyguide-cards { display: grid; gap: 14px; }
.buyguide-card { display: flex; gap: 16px; align-items: flex-start; background: var(--blush-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.buyguide-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.buyguide-ico { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; color: var(--rose); box-shadow: var(--shadow-soft); }
.buyguide-ico svg { width: 20px; height: 20px; }
.buyguide-card h4, .buyguide-card .hd--h4 { font-family: var(--font-body); font-size: 15.5px; font-weight: 650; margin-bottom: 5px; }
.buyguide-card p { color: var(--mauve); font-size: 13.5px; line-height: 1.6; }
.buyguide-copy > .btn-solid { display: flex; width: fit-content; margin: 4px auto 0; }

/* =====================================================
   Healio vs Traditional (comparison / us-vs-them)
   ===================================================== */
.compare-layout { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.compare-intro .eyebrow { margin-bottom: 16px; }
.compare-intro h2, .compare-intro .hd--h2 { line-height: 1.02; }
.compare-sub { color: var(--mauve); font-size: 16px; max-width: 40ch; margin-top: 18px; }
.compare-panel { position: relative; --hcol: clamp(118px, 13vw, 158px); }
.compare-table { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) var(--hcol) var(--hcol); }
.compare-card { position: absolute; z-index: 0; top: -26px; bottom: -18px; right: var(--hcol); width: var(--hcol); background: var(--paper); border: 1px solid rgba(201, 103, 144, 0.28); border-radius: 22px; box-shadow: 0 40px 72px -30px rgba(142, 36, 68, 0.45); }
.compare-cell { display: flex; align-items: center; padding: 15px 18px; }
.compare-corner { padding: 0; }
.compare-col-head { flex-direction: column; justify-content: flex-end; gap: 12px; padding: 6px 6px 18px; text-align: center; }
.compare-col-head img { height: clamp(56px, 7vw, 74px); width: auto; object-fit: contain; object-position: bottom; }
.compare-col-head.is-trad img { filter: grayscale(0.4) opacity(0.85); }
.compare-pill { display: inline-block; background: var(--rose); color: #fff; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; padding: 6px 15px; border-radius: 999px; box-shadow: 0 8px 16px -8px rgba(201, 103, 144, 0.8); }
.compare-trad-name { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--mauve); line-height: 1.35; }
.compare-benefit { font-size: 14.5px; font-weight: 500; color: var(--wine); line-height: 1.4; border-top: 1px solid var(--line); padding-left: 2px; padding-right: 22px; }
.compare-mark { justify-content: center; border-top: 1px solid var(--line); }
.compare-mark.is-healio { border-top-color: rgba(201, 103, 144, 0.16); }
.compare-yes, .compare-no { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; }
.compare-yes { background: var(--rose); color: #fff; box-shadow: 0 8px 14px -6px rgba(201, 103, 144, 0.75); }
.compare-yes svg { width: 15px; height: 15px; }
.compare-no { background: rgba(43, 10, 20, 0.05); color: var(--mauve); }
.compare-no svg { width: 13px; height: 13px; }

/* Shop archive: breathing room between the page title and the filter pills */
.woo-shell .page-title { margin-bottom: 30px; }

@media (max-width: 860px) {
	.buyguide-grid { grid-template-columns: 1fr; gap: 40px; }
	.compare-layout { grid-template-columns: 1fr; gap: 30px; }
	.compare-intro { text-align: center; }
	.compare-intro .eyebrow { justify-content: center; }
	.compare-sub { margin-left: auto; margin-right: auto; }
	.compare-panel { width: 100%; max-width: 600px; margin: 0 auto; }
	/* Match section-head/compare-intro: center the eyebrow + heading (+ short sub-line) on mobile. */
	.statement-copy .eyebrow, .buyguide-copy .eyebrow { justify-content: center; }
	.statement-copy .eyebrow, .statement-copy h2, .statement-sub, .buyguide-copy .eyebrow, .buyguide-copy h2, .statement-copy .hd--h2, .buyguide-copy .hd--h2 { text-align: center; }
}
@media (max-width: 560px) {
	.compare-panel { --hcol: 80px; }
	.compare-cell { padding: 13px 10px; }
	.compare-benefit { font-size: 12.5px; padding-right: 12px; }
	.compare-col-head { gap: 8px; padding: 4px 4px 14px; }
	.compare-pill, .compare-trad-name { font-size: 9.5px; }
	.compare-pill { padding: 5px 11px; }
	.compare-yes, .compare-no { width: 25px; height: 25px; }
	.compare-sub { font-size: 14px; }
}

.reveal { will-change: transform, opacity; }

/* =====================================================
   Responsive
   ===================================================== */
@media (max-width: 1020px) {
	.product-grid, .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
	.category-grid { grid-template-columns: repeat(2, 1fr); }
	.stats-grid, .reviews-grid, .journal-grid { grid-template-columns: 1fr 1fr; }
	.journal-grid > *:last-child { display: none; }
	.faq-wrap { grid-template-columns: 1fr; }
	.faq-tabs { position: static; display: flex; flex-wrap: wrap; }
}

@media (max-width: 860px) {
	/* Fix: neutralise the header as a containing block so the fixed mobile-nav overlay fills the viewport (a lingering GSAP transform + backdrop-filter otherwise trap it inside the header bar). */
	.site-header { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; transform: none !important; will-change: auto !important; }
	/* Beats the base `.site-nav a{position:relative}`. The wordmark used to be
	   absolutely positioned here; it now sits in the overlay's normal flow so
	   the menu below it can never overlap it. */
	.site-nav a.mobile-nav-logo { position: static; }

	/* Hero (mobile): reorder to pill -> vial -> title -> sub -> CTAs, all above the fold.
	   display:contents flattens .hero-copy so its children join .hero-inner's flex
	   flow, letting the vial sit between the pill and the title without markup changes. */
	.hero { min-height: auto; }
	.hero-inner {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 0;
		padding-top: 20px;
		padding-bottom: 20px;
	}
	.hero-copy { display: contents; }
	.hero-pill { order: 1; margin-bottom: 12px; }
	.hero-visual { order: 2; width: 100%; justify-content: center; margin-bottom: 10px; }
	.hero-vial { width: min(82vw, 400px); max-height: 38vh; }
	.hero-title { order: 3; margin-bottom: 12px; }
	.hero-sub { order: 4; font-size: 13.5px; max-width: 38ch; margin-bottom: 18px; }
	.hero-ctas { order: 5; flex-wrap: nowrap; justify-content: center; width: 100%; gap: 10px; margin-bottom: 24px; }

	.statement-grid { grid-template-columns: 1fr; }
	.statement-visual { order: -1; }

	/* Section headers + buttons centered on mobile */
	.section-head { flex-direction: column; align-items: center; text-align: center; }
	.section-head .eyebrow { justify-content: center; }

	/* Full-screen overlay menu.
	   The wordmark sits in normal flow at the top and the list flows beneath
	   it. It used to be absolutely positioned while the list was vertically
	   centred, so once the Shop submenu made the list taller the two
	   overlapped. The overlay scrolls on its own if the menu outgrows a short
	   viewport, rather than clipping. */
	.site-nav {
		position: fixed;
		inset: 0;
		z-index: 890;
		background: var(--cream);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		padding: 44px 24px calc(48px + env(safe-area-inset-bottom, 0px));
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.3s ease;
	}
	body.nav-open { overflow: hidden; }
	body.nav-open .site-nav { opacity: 1; pointer-events: auto; }
	.nav-toggle { display: flex; position: relative; z-index: 950; }

	.mobile-nav-logo {
		position: static;
		transform: none;
		flex: 0 0 auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 6px;
		text-decoration: none;
		color: var(--wine);
	}
	.mobile-nav-logo::after { display: none; }
	.mobile-nav-logo .logo-mark { width: 42px; height: 42px; }
	.mobile-nav-logo .logo-word { font-family: var(--font-display); font-size: 24px; font-weight: 520; color: var(--wine); }

	/* Scoped to .menu so the nested .sub-menu keeps its own layout and type. */
	.site-nav .menu {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 22px;
		width: 100%;
		margin: clamp(30px, 6vh, 52px) 0 0;
	}
	.site-nav .menu > li { width: 100%; }
	/* The second selector matters: main.js wraps parent links in
	   .nav-item-row, so `> a` alone stops matching them and Shop drops back
	   to the 14.5px body font while its siblings stay display serif. */
	.site-nav .menu > li > a,
	.site-nav .menu > li > .nav-item-row > a {
		font-family: var(--font-display);
		font-size: clamp(26px, 7vw, 31px);
		font-weight: 480;
		line-height: 1.1;
		letter-spacing: -0.015em;
	}
}

@media (max-width: 560px) {
	.stats-grid, .reviews-grid, .journal-grid,
	.woocommerce ul.products { grid-template-columns: 1fr; }
	.category-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
	.product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.journal-grid > *:last-child { display: grid; }
	.footer-grid { grid-template-columns: 1fr 1fr; }
	.hero-ctas .btn { flex: 1 1 0; min-width: 0; width: auto; padding: 13px 8px; font-size: 12.5px; white-space: nowrap; }
	.category-circle { width: clamp(130px, 42vw, 165px); margin-left: auto; margin-right: auto; }
}

/* =====================================================
   Reduced motion
   ===================================================== */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.marquee-track, .announce-track { animation: none; }
	.hero-scroll span { animation: none; }
	*, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* =====================================================
   Primary nav dropdown — Shop → collections

   Desktop: a hover/focus panel, no JS involved.
   Mobile: a collapsed accordion opened by its own caret button, so the
   parent link still navigates to /shop/ and the overlay stays short.
   main.js wraps the link in .nav-item-row and injects .nav-sub-toggle.
   ===================================================== */
.site-nav li { position: relative; }
/* display:contents removes the JS-injected wrapper from desktop layout
   entirely, so the Shop link keeps the exact inline box its siblings have.
   As an inline-flex box it was 5.9px taller and sat a pixel lower, which is
   subtle but reads as "that one is set differently". */
.site-nav .nav-item-row { display: contents; }
.site-nav .nav-item-row > a { padding-right: 14px; }
.site-nav .nav-item-row > a::before {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	width: 5px;
	height: 5px;
	margin-top: -4px;
	border-right: 1.4px solid currentColor;
	border-bottom: 1.4px solid currentColor;
	transform: rotate(45deg);
	opacity: 0.5;
	transition: transform 0.28s ease, opacity 0.2s ease, margin-top 0.28s ease;
}
.site-nav .menu-item-has-children:hover .nav-item-row > a::before,
.site-nav .menu-item-has-children:focus-within .nav-item-row > a::before {
	opacity: 1;
	transform: rotate(225deg);
	margin-top: -1px;
}
/* The caret button is mobile-only; desktop uses hover and the ::after mark. */
.site-nav .nav-sub-toggle { display: none; }

/* Invisible bridge across the gap so the pointer can travel to the panel. */
.site-nav .menu-item-has-children::after {
	content: "";
	position: absolute;
	left: -12px; right: -12px;
	top: 100%;
	height: 18px;
}
.site-nav .sub-menu {
	position: absolute;
	top: calc(100% + 16px);
	left: 50%;
	transform: translateX(-50%) translateY(-6px);
	flex-direction: column;
	gap: 2px;
	min-width: 236px;
	padding: 10px;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 16px;
	box-shadow: var(--shadow-lift);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	z-index: 200;
	transition: opacity 0.22s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.22s;
}
.site-nav .menu-item-has-children:hover > .sub-menu,
.site-nav .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}
.site-nav .sub-menu li { width: 100%; }
.site-nav .sub-menu a {
	display: block;
	padding: 9px 14px;
	border-radius: 10px;
	font-size: 14px;
	white-space: nowrap;
	transition: background 0.2s ease, color 0.2s ease;
}
.site-nav .sub-menu a::after { content: none; }
.site-nav .sub-menu a:hover { background: var(--blush-soft); color: var(--berry); }

@media (max-width: 860px) {
	/* Collapsed accordion. The item becomes a two-row grid and the submenu
	   row animates between 0fr and 1fr, so the height transition needs no JS
	   measurement and cannot get stuck at a stale pixel height. */
	.site-nav .menu-item-has-children {
		display: grid;
		grid-template-rows: auto 0fr;
		transition: grid-template-rows 0.42s cubic-bezier(0.22, 1, 0.36, 1);
	}
	.site-nav .menu-item-has-children.is-open { grid-template-rows: auto 1fr; }
	.site-nav .menu-item-has-children::after { content: none; }
	/* Back to a real box here so the link and its caret button sit on one
	   centred row, forming row 1 of the item's two-row grid. */
	.site-nav .nav-item-row {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 2px;
	}
	.site-nav .nav-item-row > a { padding-right: 0; }
	.site-nav .nav-item-row > a::before { content: none; }

	.site-nav .nav-sub-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 38px;
		height: 38px;
		padding: 0;
		border: 0;
		background: none;
		color: var(--rose);
		cursor: pointer;
		flex: 0 0 auto;
		/* Cancels its own width so the row centres on the label alone and
		   Shop lines up with the links below it; the caret simply overhangs
		   to the right. */
		margin-right: -38px;
	}
	.site-nav .nav-sub-toggle__chev {
		width: 9px;
		height: 9px;
		margin-top: -4px;
		border-right: 1.8px solid currentColor;
		border-bottom: 1.8px solid currentColor;
		transform: rotate(45deg);
		transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), margin-top 0.35s ease;
	}
	.site-nav .menu-item-has-children.is-open .nav-sub-toggle__chev {
		transform: rotate(225deg);
		margin-top: 3px;
	}

	/* Reset every desktop dropdown property, including the hover transform
	   that was sliding the panel half its width to the left on tap. */
	.site-nav .sub-menu,
	.site-nav .menu-item-has-children:hover > .sub-menu,
	.site-nav .menu-item-has-children:focus-within > .sub-menu {
		position: static;
		transform: none;
		left: auto;
		top: auto;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		display: flex;
		flex-direction: column;
		gap: 0;
		width: min(304px, 100%);
		min-width: 0;
		max-width: none;
		margin: 0 auto;
		padding: 0;
		background: none;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		overflow: hidden;
		min-height: 0;
		transition: none;
	}
	/* The card lives on an inner wrapper so the grid row can collapse to a
	   true zero height without the card's own padding holding it open. */
	.site-nav .sub-menu li:first-child { margin-top: 15px; }
	.site-nav .sub-menu li:last-child { margin-bottom: 2px; }
	.site-nav .sub-menu li {
		width: 100%;
		background: rgba(255, 255, 255, 0.7);
		border-left: 1px solid var(--line);
		border-right: 1px solid var(--line);
	}
	.site-nav .sub-menu li:first-child {
		border-top: 1px solid var(--line);
		border-top-left-radius: 18px;
		border-top-right-radius: 18px;
	}
	.site-nav .sub-menu li:last-child {
		border-bottom: 1px solid var(--line);
		border-bottom-left-radius: 18px;
		border-bottom-right-radius: 18px;
	}
	.site-nav .sub-menu li + li { border-top: 1px solid rgba(43, 10, 20, 0.05); }
	.site-nav .sub-menu a {
		display: block;
		font-family: var(--font-body);
		font-size: 14.5px;
		font-weight: 500;
		line-height: 1.35;
		color: var(--mauve);
		padding: 12px 18px;
		border: 0;
		border-radius: 0;
		background: none;
		white-space: normal;
	}
	.site-nav .sub-menu a:hover,
	.site-nav .sub-menu a:active { background: none; color: var(--berry); }
}


/* =========================================================
   Blog: table of contents
   ========================================================= */
.post-toc {
	margin: 30px 0 40px;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-soft);
	overflow: hidden;
}
.post-toc__title {
	margin: 0;
	padding: 15px 26px;
	background: var(--berry);
	color: #fff;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.post-toc__list {
	margin: 0;
	padding: 20px 26px 22px;
	list-style: none;
	counter-reset: toc;
	columns: 2;
	column-gap: 38px;
}
.post-toc__list li {
	counter-increment: toc;
	margin: 0 0 11px;
	padding-left: 30px;
	position: relative;
	break-inside: avoid;
	font-size: 14.5px;
	line-height: 1.45;
}
.post-toc__list li::before {
	content: counter(toc, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 2px;
	font-family: var(--font-mono);
	font-size: 10.5px;
	font-weight: 600;
	color: var(--rose);
	background: var(--blush-soft);
	border-radius: 4px;
	padding: 2px 5px;
	line-height: 1.2;
}
.post-toc__list a {
	color: var(--wine);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.18s ease, border-color 0.18s ease;
}
.post-toc__list a:hover,
.post-toc__list a:focus-visible {
	color: var(--berry);
	border-bottom-color: var(--blush);
}
@media (max-width: 720px) {
	.post-toc__list { columns: 1; padding: 18px 20px 20px; }
	.post-toc__title { padding: 13px 20px; }
}

/* Offset anchor jumps so headings clear the sticky header. */
.prose h2[id] { scroll-margin-top: 96px; }

/* =========================================================
   Blog: content tables
   ========================================================= */
.prose figure.wp-block-table,
.prose .wp-block-table {
	margin: 30px 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
/* Scoped away from WooCommerce block tables. The cart and checkout blocks render
   real <table>s inside .prose, so the editorial skin below used to repaint them:
   white header text landed on a near-white row ("PRODUCT"/"TOTAL" unreadable) and
   every cell picked up a hairline border that lined up with nothing. Those tables
   are styled as cards in shop.css instead. */
.prose table:not([class*="wc-block"]) {
	width: 100%;
	border-collapse: collapse;
	font-size: 14.5px;
	line-height: 1.5;
	background: var(--paper);
	border: 1px solid var(--line);
}
.prose table:not([class*="wc-block"]) thead th {
	background: var(--berry);
	color: #fff;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.02em;
	text-align: left;
	padding: 13px 16px;
	border: none;
	border-right: 1px solid rgba(255, 255, 255, 0.18);
}
.prose table:not([class*="wc-block"]) thead th:last-child { border-right: none; }
.prose table:not([class*="wc-block"]) tbody td {
	padding: 12px 16px;
	border-top: 1px solid var(--line);
	border-right: 1px solid var(--line);
	vertical-align: top;
	color: var(--wine);
}
.prose table:not([class*="wc-block"]) tbody td:last-child { border-right: none; }
.prose table:not([class*="wc-block"]) tbody tr:nth-child(even) { background: var(--cream); }
.prose table:not([class*="wc-block"]) tbody tr:hover { background: var(--blush-soft); }
.prose table:not([class*="wc-block"]) tbody td:first-child { font-weight: 600; }

/* Highlighted row, used for Healio in comparison tables. */
.prose table:not([class*="wc-block"]) tbody tr.is-healio {
	background: var(--blush-soft);
	box-shadow: inset 3px 0 0 var(--berry);
}
.prose table:not([class*="wc-block"]) tbody tr.is-healio:hover { background: var(--blush); }
.prose table:not([class*="wc-block"]) tbody tr.is-healio td { font-weight: 600; }

@media (max-width: 720px) {
	.prose table:not([class*="wc-block"]) { font-size: 13.5px; }
	.prose table:not([class*="wc-block"]) thead th,
	.prose table:not([class*="wc-block"]) tbody td { padding: 10px 12px; }
}

/* =========================================================
   Blog: previous / next navigation
   ========================================================= */
.post-nav {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 28px;
	margin: 46px 0 8px;
	padding-top: 26px;
	border-top: 1px solid var(--line);
}
.post-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	max-width: 47%;
	color: var(--berry);
	text-decoration: none;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.4;
	transition: color 0.18s ease, gap 0.18s ease;
}
.post-nav__link--next { margin-left: auto; text-align: right; }
.post-nav__link:hover,
.post-nav__link:focus-visible { color: var(--wine); }
.post-nav__link--prev:hover .post-nav__chev { transform: translateX(-3px); }
.post-nav__link--next:hover .post-nav__chev { transform: translateX(3px); }
.post-nav__chev {
	flex: 0 0 auto;
	font-size: 24px;
	line-height: 1;
	color: var(--rose);
	transition: transform 0.18s ease;
}
.post-nav__title {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.post-nav__spacer { display: block; flex: 1 1 0; }

@media (max-width: 720px) {
	.post-nav {
		flex-direction: column;
		gap: 16px;
	}
	.post-nav__link {
		max-width: 100%;
		width: 100%;
	}
	.post-nav__link--next {
		margin-left: 0;
		justify-content: flex-start;
		text-align: left;
		flex-direction: row-reverse;
	}
	.post-nav__link--next .post-nav__title { text-align: left; }
	.post-nav__title { white-space: normal; }
	.post-nav__spacer { display: none; }
}

/* =========================================================
   PDP: collapsible research description
   ========================================================= */
.pdp-desc { position: relative; }
.pdp-desc[data-collapsed="1"] { max-height: 360px; overflow: hidden; }
.pdp-desc__fade { display: none; }
.pdp-desc[data-collapsed="1"] .pdp-desc__fade {
	display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 170px;
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(255,255,255,0), var(--paper) 88%);
}
.pdp-desc__body h2 { font-size: 23px; line-height: 1.25; margin: 30px 0 10px; }
.pdp-desc__body h2:first-child { margin-top: 4px; }
.pdp-desc__body h3 { font-size: 17px; margin: 22px 0 8px; }
.pdp-desc__body p { margin: 0 0 14px; }
.pdp-desc__body ul, .pdp-desc__body ol { margin: 0 0 16px 20px; }
.pdp-desc__body li { margin-bottom: 7px; }
.pdp-desc__body table {
	width: 100%; border-collapse: collapse; font-size: 14px; margin: 20px 0;
	border: 1px solid var(--line); background: var(--paper);
}
.pdp-desc__body thead th {
	background: var(--berry); color: #fff; text-align: left; font-weight: 600;
	font-size: 12.5px; padding: 11px 13px; border-right: 1px solid rgba(255,255,255,0.16);
}
.pdp-desc__body thead th:last-child { border-right: none; }
.pdp-desc__body tbody td {
	padding: 10px 13px; border-top: 1px solid var(--line);
	border-right: 1px solid var(--line); vertical-align: top;
}
.pdp-desc__body tbody td:last-child { border-right: none; }
.pdp-desc__body tbody tr:nth-child(even) { background: var(--cream); }
.pdp-desc__toggle {
	display: inline-flex; align-items: center; gap: 8px;
	margin: 18px 0 4px; padding: 12px 22px;
	background: var(--berry); color: #fff;
	border: 1px solid var(--berry); border-radius: 999px;
	font-family: var(--font-body); font-size: 13.5px; font-weight: 600;
	letter-spacing: 0.01em; cursor: pointer;
	transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.pdp-desc__toggle:hover { background: var(--wine); transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.pdp-desc__toggle::after { content: "\2193"; font-size: 14px; }
.pdp-desc[data-collapsed="0"] + .pdp-desc__toggle::after { content: "\2191"; }
@media (max-width: 720px) {
	.pdp-desc[data-collapsed="1"] { max-height: 300px; }
	.pdp-desc__body h2 { font-size: 20px; }
}