/* ============================================================================
   Round 2 — refinement pass on top of the pharma pass (Naem spec 2026-08-25).
   Loaded last. Additive: it changes only what he named. Dark ground only;
   there is no light branch anywhere in this file by design (R4).
   ========================================================================= */

:root {
	--step-icon-fill: color-mix(in srgb, var(--accent) 12%, transparent);
	--step-icon-ring: color-mix(in srgb, var(--accent) 34%, var(--line));
	--step-icon-ink: var(--accent-cool, #2AEEE4);
}

/* --- R1 / R2 · the brand mark -------------------------------------------- */
/* Bigger, and the P now sits in an explicit ring. The relief is a filter on a
   group inside the SVG, so a single `filter: none` returns the flat treatment. */

.site-header .wordmark { font-size: 21px; }
.site-header .wordmark .mark { flex: 0 0 auto; width: 40px; height: 40px; }
.site-header .wordmark .node { flex: 0 0 auto; width: 7px; height: 7px; }
.transparency-mark svg { width: clamp(64px, 5.6vw, 86px); }
.site-footer .wordmark .mark { width: 34px; height: 34px; }

/* `?logo=flat` renders the same mark without relief, for the A/B comparison. */
body.logo-flat .mark .mark-relief { filter: none !important; }

/* --- R3 · nav centred in the top bar ------------------------------------- */
/* Desktop only. Below 900px the nav is a full-width drawer and the header keeps
   its flex order, so mobile is untouched. Equal 1fr side tracks put the menu's
   centre on the wrap's centre regardless of how wide the mark or icons get. */

@media (min-width: 901px) {
	.site-header .wrap {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		align-items: center;
		gap: var(--s4);
	}
	.site-header .wordmark { grid-column: 1; justify-self: start; min-width: 0; }
	.site-header .primary-nav { grid-column: 2; justify-self: center; margin-left: 0; }
	.site-header .primary-nav .menu { white-space: nowrap; }
	.site-header .icons { grid-column: 3; justify-self: end; }
	.site-header .nav-toggle { display: none; }
}

/* --- R5 / R6 · the molecular field --------------------------------------- */
/* R5: the reference runs its helix as a FULL-BLEED layer across the whole hero
   at opacity 1, which is why it reads. Ours was boxed into the right 62% at a
   third of that opacity, which is why it did not. It is now full-bleed too, and
   the shader opacity is raised in molecular-field.js.
   R6: "in the middle between the Text and the Bestseller product" is then a
   question of where the layer's DENSITY sits, not where its box sits. The radial
   mask peaks on the measured midpoint between the copy's right edge and the
   product plate's left edge, so the helix reads in that corridor and fades out
   before it reaches either. A scrim under the copy holds the text contrast
   without putting a shadow blob behind the headline. */

.hero-split .molecular-field {
	inset: 0;
	-webkit-mask-image: radial-gradient(82% 92% at 42.15% 50%, #000 0%, #000 52%, rgba(0, 0, 0, .78) 80%, transparent 100%);
	mask-image: radial-gradient(82% 92% at 42.15% 50%, #000 0%, #000 52%, rgba(0, 0, 0, .78) 80%, transparent 100%);
}

/* Contrast scrim: a soft wash from the page colour under the copy column only.
   Sits above the field and below the copy, and never eats pointer events. */
.hero-split::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(96deg,
		color-mix(in srgb, var(--page) 78%, transparent) 0%,
		color-mix(in srgb, var(--page) 52%, transparent) 9%,
		color-mix(in srgb, var(--page) 24%, transparent) 16%,
		transparent 23%);
}
.hero-split .hero-split-grid { position: relative; z-index: 3; }
.hero-split .hero-copy { position: relative; z-index: 3; }

@media (max-width: 900px) {
	/* Stacked layout: the corridor is vertical, so the density peaks on the seam
	   between the copy block and the product plate, and the scrim runs top-down.
	   The two blocks sat 32px apart, which left no middle for the helix to be in;
	   this opens one. */
	.hero-split .hero-split-grid { gap: clamp(104px, 24vw, 150px); }
	.hero-split .molecular-field {
		-webkit-mask-image: radial-gradient(120% 62% at 50% 41%, #000 0%, #000 46%, rgba(0, 0, 0, .80) 78%, transparent 100%);
		mask-image: radial-gradient(120% 62% at 50% 41%, #000 0%, #000 46%, rgba(0, 0, 0, .80) 78%, transparent 100%);
	}
	.hero-split::after {
		background: linear-gradient(180deg,
			color-mix(in srgb, var(--page) 74%, transparent) 0%,
			color-mix(in srgb, var(--page) 46%, transparent) 8%,
			color-mix(in srgb, var(--page) 20%, transparent) 15%,
			transparent 22%);
	}
}

@media (max-width: 680px) {
	/* The copy/product seam measures 50.9-51.2% of the field height at 375-390
	   and 48.8% at 430, so the density peak is placed there rather than on the
	   900px band's 41%. */
	.hero-split .molecular-field {
		-webkit-mask-image: radial-gradient(128% 56% at 50% 50%, #000 0%, #000 44%, rgba(0, 0, 0, .78) 76%, transparent 100%);
		mask-image: radial-gradient(128% 56% at 50% 50%, #000 0%, #000 44%, rgba(0, 0, 0, .78) 76%, transparent 100%);
	}
	.hero-split .molecular-canvas,
	.hero-split .molecular-poster { inset: 0; width: 100%; height: 100%; }
}

/* Not in his list, but I am in this hero for R5/R6 and it is visibly wrong:
   the BESTSELLER chip is absolutely positioned and the plate only reserved room
   for it below 900px, so from 1000px up it sat on the product photo's top-left
   corner (62x23px at 1100, 10x16px at 1440). The plate now reserves the chip's
   height at every width. Nothing he named changes. */
@media (min-width: 901px) {
	.hero-split .hero-stage { padding-top: clamp(60px, 5.6vw, 76px); }
}

/* The molecular field is much brighter now, and the pause control sits on top
   of it. Give it its own ground so it stays readable and hittable. */
.hero-split #molecularMotionToggle {
	min-height: 44px;
	padding: 10px 14px;
	border: 1px solid var(--line-strong);
	border-radius: var(--r-pill);
	background: color-mix(in srgb, var(--page) 82%, transparent);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: var(--muted);
}
.hero-split #molecularMotionToggle:hover { color: var(--text); border-color: var(--accent); }

/* --- R7 · no play/pause on the bestsellers rail -------------------------- */
/* The control is gone from the markup for #rail-best. This keeps the remaining
   prev/next pair from drifting now that the row is one button shorter. */
#rail-best .pharma-rail-controls { gap: var(--s3); }

/* The pen-unlock line is one sentence, but its markup is <strong> + text + <span>
   + text inside a flex row with justify-content: space-between, so each run
   became its own flex item and the sentence tore into fragments 79px apart.
   Only the ELIGIBLE state has a button that needs the row treatment; the locked
   and claimed states are prose and must read as prose. This is in the very
   section R8 moved up the page, so it had to be right. */
.gift-claim-surface .peptpro-pen-gift,
.pdp-gift .peptpro-pen-gift {
	display: block;
	justify-content: normal;
	line-height: 1.6;
}
.gift-claim-surface .peptpro-pen-gift.is-eligible,
.pdp-gift .peptpro-pen-gift.is-eligible {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s4);
	flex-wrap: wrap;
}
.gift-claim-surface .peptpro-pen-gift.is-eligible > span,
.pdp-gift .peptpro-pen-gift.is-eligible > span { flex: 1 1 18ch; }
.gift-claim-surface .peptpro-pen-gift__claim,
.pdp-gift .peptpro-pen-gift__claim { flex: 0 0 auto; }

/* --- R10 · a picture on every category tile ------------------------------ */

.category-tile.has-media { align-content: start; gap: 8px; padding-top: var(--s4); }
.cat-media {
	display: block;
	aspect-ratio: 16 / 10;
	margin-bottom: var(--s3);
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: radial-gradient(circle at 50% 26%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 58%), var(--surface-raised);
}
.cat-media-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cat-media.is-empty {
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 8px;
	border-style: dashed;
	border-color: var(--line-strong);
	color: var(--quiet);
}
.cat-media.is-empty svg { width: 34px; height: 28px; }
.cat-media-note { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.category-tile.has-media:hover .cat-media { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }

/* --- R11 · icons on "Before you order", matching the reference's structure */
/* Measured on beyond-peptides.com: a 64px icon plate, 20px above a 20/600
   title, in a column. Same geometry here, our palette. */

.purchase-item { gap: 10px; }
.purchase-item .step-icon { display: block; margin-bottom: 10px; }
.purchase-item .step-icon svg { display: block; width: 64px; height: 64px; }
.purchase-grid .purchase-item b { font-size: 18px; line-height: 1.3; }

@media (max-width: 680px) {
	/* The narrow header has no room for 40px; 34px is still a clear step up from
	   the 28px it was, and `flex: 0 0 auto` stops the mark being squeezed oval. */
	.site-header .wordmark .mark { width: 34px; height: 34px; }
	.site-header .wordmark { font-size: 18px; }
	.purchase-item .step-icon svg { width: 52px; height: 52px; }
	.purchase-grid .purchase-item b { font-size: 17px; }
}

/* --- R12 · the five-star feedback rating --------------------------------- */

.pd-rating { display: flex; align-items: center; gap: 10px; margin: 6px 0 var(--s3); }
.pd-stars { display: inline-flex; gap: 3px; color: var(--accent-bright, #00E8D8); }
.pd-stars svg { display: block; }
.pd-rating-value { color: var(--muted); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.buy-panel .pd-price { margin-bottom: var(--s3); }

/* --- R13 · the bundle selector ------------------------------------------- */

.bundle-tiers {
	margin: var(--s5) 0;
	padding: var(--s4);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--surface-raised);
}
.bundle-head { display: grid; gap: 3px; margin-bottom: var(--s4); }
.bundle-head b { font-size: 15px; font-weight: 600; }
.bundle-head span { color: var(--muted); font-size: 13px; line-height: 1.5; }
.bundle-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); }
.bundle-option {
	display: grid;
	align-content: start;
	gap: 3px;
	min-height: 76px;
	padding: 10px 8px;
	border: 1px solid var(--line-strong);
	border-radius: var(--r-sm);
	background: var(--surface);
	color: var(--text);
	text-align: left;
	cursor: pointer;
	transition: border-color 180ms var(--ease), background 180ms var(--ease);
}
.bundle-option:hover { border-color: color-mix(in srgb, var(--accent) 52%, var(--line-strong)); }
.bundle-option.is-selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.bundle-option:focus-visible { outline: 2px solid var(--accent-bright, #00E8D8); outline-offset: 2px; }
.bo-qty { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.bo-unit { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.bo-unit .amount, .bo-unit bdi { color: inherit; font-size: inherit; }
.bo-off { color: var(--accent-text); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bo-off-none { color: var(--quiet); font-weight: 500; }
.bundle-summary { margin: var(--s4) 0 0; color: var(--text); font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.bundle-summary .amount, .bundle-summary bdi { color: inherit; font-weight: 600; }
.bundle-saving { color: var(--ok); }
.tier-applied { display: block; margin-top: 4px; color: var(--accent-text); font-size: 12px; font-weight: 600; }

@media (max-width: 680px) {
	.bundle-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bundle-option { min-height: 72px; }
}

/* The quantity box was 58px wide with 16px of padding: content box 24px, so a
   two-digit quantity scrolled and only "1" rendered. Choosing the 10-vial tier
   would have shown the shopper a box reading 1. It has to fit three digits. */
form.cart .quantity { min-width: 94px; }
form.cart .quantity input.qty {
	flex: 0 0 auto;
	width: 94px;
	min-width: 94px;
	padding-inline: 6px;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 680px) {
	form.cart .quantity { flex: 0 0 94px; min-width: 94px; }
}

/* --- R14 · the four-part product description ----------------------------- */

.pd-desc-sections { margin-top: var(--s7); }
.pd-desc-sections h2 { margin-bottom: var(--s5); }
.pd-accordion { display: grid; border-top: 1px solid var(--line); }
.pd-section { border-bottom: 1px solid var(--line); }
.pd-section > summary {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr) 24px;
	align-items: center;
	gap: var(--s3);
	min-height: 60px;
	padding: var(--s4) 0;
	cursor: pointer;
	list-style: none;
}
.pd-section > summary::-webkit-details-marker { display: none; }
.pd-section > summary:hover .pd-section-t { color: var(--accent-text); }
.pd-section > summary:focus-visible { outline: 2px solid var(--accent-bright, #00E8D8); outline-offset: 2px; }
.pd-section-n { color: var(--accent-text); font-size: 12px; font-weight: 600; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.pd-section-t { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.pd-section-i { position: relative; width: 24px; height: 24px; }
.pd-section-i::before,
.pd-section-i::after {
	content: "";
	position: absolute;
	left: 4px;
	top: 11px;
	width: 16px;
	height: 2px;
	border-radius: 2px;
	background: var(--muted);
	transition: transform 200ms var(--ease);
}
.pd-section-i::after { transform: rotate(90deg); }
.pd-section[open] .pd-section-i::after { transform: rotate(0deg); }
.pd-section-body { padding: 0 0 var(--s5) 46px; }
.pd-section-body p { margin: 0; max-width: 74ch; color: var(--muted); font-size: 15px; line-height: 1.7; }
.pd-desc-ruo { margin-top: var(--s5); }
.pd-desc-legacy { margin-top: var(--s5); }

@media (max-width: 680px) {
	.pd-section > summary { grid-template-columns: 28px minmax(0, 1fr) 24px; gap: var(--s2); }
	.pd-section-body { padding-left: 36px; }
	.pd-section-t { font-size: 16px; }
}

/* --- Reduced motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.bundle-option, .pd-section-i::before, .pd-section-i::after, .cat-media { transition: none !important; }
}