/* BPA Bioscience: homepage prototype (wireframes pp. 3–4). */

/* ---------- Tokens (sampled from the wireframe render) ---------- */
:root {
	--bpa-cream: #f5f1ea;
	--bpa-cream-2: #f9f7f3;
	--bpa-panel: #e0dbd4;
	--bpa-chip: #e9eae5;
	--bpa-line: #d3ccc0;
	--bpa-ink: #14201b;
	--bpa-ink-2: #1b2620;
	--bpa-night: #17211e;
	--bpa-green: #2f4a38;
	--bpa-text: #4d5551;
	--bpa-muted: #7b817d;
	--bpa-footer-text: #d6d3cb;
	--bpa-footer-muted: #98a09b;
	--bpa-white: #fff;
	--bpa-proto: #f2c84b;

	--bpa-serif: "Newsreader", "Iowan Old Style", Georgia, serif;
	--bpa-sans: "IBM Plex Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
	--bpa-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
	--bpa-logo: "Marcellus", "Trajan Pro", "Optima", Georgia, serif;

	--bpa-wrap: 1200px;
	--bpa-gutter: clamp(1.25rem, 4vw, 2.5rem);
	--bpa-section: clamp(3.5rem, 7vw, 6rem);
	--bpa-radius: 2px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--bpa-cream);
	color: var(--bpa-ink);
	font: 400 1rem/1.6 var(--bpa-sans);
	-webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { margin: 0; font-family: var(--bpa-serif); font-weight: 500; letter-spacing: -0.01em; color: var(--bpa-ink); }
button { font: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--bpa-green); outline-offset: 3px; }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.skip-link:focus {
	clip: auto; width: auto; height: auto; z-index: 1000; top: .5rem; left: .5rem;
	padding: .75rem 1rem; background: var(--bpa-white); color: var(--bpa-ink);
}

.bpa-wrap { width: 100%; max-width: calc(var(--bpa-wrap) + 2 * var(--bpa-gutter)); margin-inline: auto; padding-inline: var(--bpa-gutter); }
.bpa-section { padding-block: var(--bpa-section); }

.bpa-icon { width: 1.5rem; height: 1.5rem; flex: none; }

/* ---------- Shared components ---------- */
.bpa-eyebrow {
	display: flex; align-items: center; gap: 1.5rem;
	margin-bottom: 1rem;
	font: 500 .8125rem/1.4 var(--bpa-mono);
	letter-spacing: .2em; text-transform: uppercase; color: var(--bpa-ink);
}
.bpa-eyebrow::before { content: ""; width: 3rem; height: 1px; background: currentColor; flex: none; }
.bpa-eyebrow--plain::before { display: none; }

.bpa-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 2.25rem; }
.bpa-section__title { font-size: clamp(2.125rem, 4.2vw, 3.5rem); line-height: 1.05; }

.bpa-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .75rem;
	min-height: 3rem; padding: .75rem 1.75rem;
	border: 0; border-radius: var(--bpa-radius);
	font: 600 1.0625rem/1.2 var(--bpa-sans); text-decoration: none; cursor: pointer;
	transition: background-color .2s, color .2s;
}
.bpa-btn .bpa-icon { width: 1.125rem; height: 1.125rem; }
.bpa-btn--green { background: var(--bpa-green); color: var(--bpa-white); }
.bpa-btn--green:hover { background: #243b2c; }
.bpa-btn--ink { background: var(--bpa-ink-2); color: var(--bpa-white); font-family: var(--bpa-serif); font-weight: 600; }
.bpa-btn--ink:hover { background: #000; }
.bpa-btn--cream { background: var(--bpa-cream); color: var(--bpa-ink); font-weight: 500; justify-content: space-between; min-width: 14rem; }
.bpa-btn--cream:hover { background: var(--bpa-white); }
.bpa-btn[disabled] { opacity: .45; cursor: not-allowed; }

.bpa-link-arrow {
	display: inline-flex; align-items: center; gap: .75rem;
	padding-bottom: .25rem; border-bottom: 1px solid currentColor;
	font-size: 1.0625rem; text-decoration: none; white-space: nowrap;
}
.bpa-link-arrow .bpa-icon { width: 1.125rem; height: 1.125rem; }

/* Labelled stand-in for missing photography. */
.bpa-placeholder {
	position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
	width: 100%; height: 100%; min-height: 10rem; padding: 1rem; text-align: center;
	background:
		repeating-linear-gradient(135deg, rgba(20, 32, 27, .045) 0 1px, transparent 1px 14px),
		#d9d3c9;
	color: #5d625e;
	outline: 1px dashed rgba(20, 32, 27, .28); outline-offset: -8px;
}
.bpa-placeholder__icon { width: 2rem; height: 2rem; opacity: .6; }
.bpa-placeholder__tag { font: 500 .6875rem/1 var(--bpa-mono); letter-spacing: .18em; text-transform: uppercase; }
.bpa-placeholder__note { max-width: 22rem; font-size: .875rem; line-height: 1.4; }

/* ---------- Announcement ribbon (slow leftward loop; see header.php) ---------- */
.bpa-announce {
	--bpa-ribbon-speed: 70s;
	position: relative; display: flex; align-items: center; overflow: hidden;
	background: var(--bpa-night); color: #eae6de;
	font: 400 .8125rem/1.4 var(--bpa-mono); letter-spacing: .04em;
}
.bpa-announce__viewport {
	flex: 1; min-width: 0; overflow: hidden;
	/* Soft fade at both edges so items glide in and out. */
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4rem, #000 calc(100% - 4rem), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 4rem, #000 calc(100% - 4rem), transparent 100%);
}
.bpa-announce__track { display: flex; width: max-content; animation: bpa-ribbon var(--bpa-ribbon-speed) linear infinite; }
.bpa-announce__list { display: flex; flex: none; align-items: center; margin: 0; padding: .55rem 0; list-style: none; white-space: nowrap; }
.bpa-announce__list li { display: flex; align-items: center; }
/* Small leaf-green separator after every item keeps spacing identical across the loop seam. */
.bpa-announce__list li::after { content: ""; width: .3rem; height: .3rem; margin-inline: 2.25rem; border-radius: 50%; background: #7f9c86; }
.bpa-announce a { color: #f3efe7; text-decoration: underline; text-decoration-color: rgba(243, 239, 231, .35); text-underline-offset: .25em; }
.bpa-announce a:hover { text-decoration-color: currentColor; }
.bpa-announce a:focus-visible { outline: 2px solid #b9cdbd; outline-offset: 2px; }
/* Pause while hovered or when toggled. (Focus on the toggle itself does not pause, so its
   Resume state is what you see.) */
.bpa-announce:hover .bpa-announce__track,
.bpa-announce.is-paused .bpa-announce__track { animation-play-state: paused; }
/* Keyboard focus on a ribbon link stops the loop at its start, so the focused (real, first)
   copy is always on screen; the loop restarts when focus leaves. */
.bpa-announce__track:focus-within { animation: none; }
@keyframes bpa-ribbon { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.bpa-announce__toggle {
	flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.25rem; margin-right: calc(var(--bpa-gutter) - .75rem);
	border: 0; background: transparent; color: #eae6de; cursor: pointer;
	/* Stack above the animated (stacking-context) track so clipped ribbon links never "cover" it (axe target-size). */
	position: relative; z-index: 1;
}
.bpa-announce__toggle:focus-visible { outline: 2px solid #b9cdbd; outline-offset: -2px; }
/* Pause glyph (two bars); becomes a play triangle when paused. */
.bpa-announce__icon { width: .7rem; height: .75rem; border-inline: .2rem solid currentColor; box-sizing: border-box; }
.bpa-announce.is-paused .bpa-announce__icon { width: 0; height: 0; border: 0; border-left: .6rem solid currentColor; border-block: .38rem solid transparent; }

@media (max-width: 640px) {
	.bpa-announce { --bpa-ribbon-speed: 55s; font-size: .75rem; }
	.bpa-announce__list li::after { margin-inline: 1.5rem; }
	.bpa-announce__viewport { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 2rem, #000 calc(100% - 2rem), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 2rem, #000 calc(100% - 2rem), transparent 100%); }
}
/* Reduced motion: one static, centred copy; no loop, no toggle. */
@media (prefers-reduced-motion: reduce) {
	.bpa-announce__track { animation: none; width: 100%; justify-content: center; }
	.bpa-announce__list[aria-hidden="true"] { display: none; }
	.bpa-announce__list { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; justify-content: center; white-space: normal; row-gap: .25rem; padding-inline: var(--bpa-gutter); }
	.bpa-announce__list li::after { margin-inline: 1rem; }
	.bpa-announce__list li:last-child::after { display: none; }
	.bpa-announce__viewport { -webkit-mask-image: none; mask-image: none; }
	.bpa-announce__toggle { display: none !important; }
}

/* ---------- Header ---------- */
.bpa-header { position: sticky; top: 0; z-index: 50; background: var(--bpa-white); border-bottom: 1px solid #e7e3dc; }
.admin-bar .bpa-header { top: 32px; }
.bpa-header__inner { display: flex; align-items: center; gap: 2rem; min-height: 5.5rem; }
.bpa-header__logo { flex: none; }

/*
 * Logo lockup: BPA [tree] WELLNESS. Proportions measured from the wireframe:
 * tree ≈ 2.5× cap height, raised so its base sits just below the baseline,
 * ≈ 0.45 cap-height gap either side.
 */
.bpa-wordmark {
	--bpa-logo-ink: #4b4c3c;
	display: inline-flex; align-items: center; column-gap: .38em;
	font: 400 1.7rem/1 var(--bpa-logo); letter-spacing: .1em;
	color: var(--bpa-logo-ink); text-decoration: none; white-space: nowrap;
}
.bpa-wordmark__word { margin-right: 0; }
.bpa-wordmark .bpa-wordmark__tree {
	width: auto; max-width: none; height: 1.75em; flex: none;
	margin-inline: .22em .22em;
	transform: translateY(-.2em);
}
.bpa-wordmark--light { --bpa-logo-ink: #f1eee8; }
.custom-logo { max-height: 3rem; width: auto; }

.bpa-nav { display: flex; align-items: center; gap: 2.5rem; margin-inline: auto; }
.bpa-nav__list { display: flex; gap: 2.5rem; }
.bpa-nav a { font-size: 1.125rem; color: var(--bpa-ink); text-decoration: none; }
.bpa-nav a:hover, .bpa-nav .current-menu-item > a { text-decoration: underline; text-underline-offset: .35em; }

.bpa-header__actions { display: flex; align-items: center; gap: 1.25rem; }
.bpa-icon-btn {
	position: relative; display: inline-grid; place-items: center;
	width: 2.5rem; height: 2.5rem; padding: 0; border: 0; background: none; color: var(--bpa-ink); cursor: pointer;
}
.bpa-header__toggle { display: none; }
.bpa-cart-count {
	position: absolute; top: .1rem; right: .05rem; min-width: 1.1rem; height: 1.1rem; padding-inline: .25rem;
	border-radius: 1rem; background: var(--bpa-green); color: var(--bpa-white);
	font: 600 .6875rem/1.1rem var(--bpa-sans); text-align: center;
}

.bpa-search { border-top: 1px solid #ece8e1; background: var(--bpa-white); }
.bpa-search__form { display: flex; gap: .75rem; padding-block: 1rem; }
.bpa-search__form input[type="search"] {
	flex: 1; min-height: 3rem; padding: .5rem 1rem; border: 1px solid var(--bpa-line); border-radius: var(--bpa-radius);
	background: var(--bpa-cream-2); font: inherit; color: var(--bpa-ink);
}

.bpa-drawer { border-top: 1px solid #ece8e1; background: var(--bpa-white); }
.bpa-drawer__nav { padding-block: .5rem 1.25rem; }
.bpa-drawer__list a, .bpa-drawer__signin {
	display: block; padding-block: .85rem; border-bottom: 1px solid #ece8e1;
	font: 400 1.375rem/1.2 var(--bpa-serif); text-decoration: none; color: var(--bpa-ink);
}

/* ---------- Hero (approved sequential-ink demo) ---------- */
.bpa-hero {
	--bpa-hero-ink: #f8f5ed;
	position: relative; isolation: isolate; overflow: hidden;
	display: flex; align-items: center; min-height: clamp(560px, 47vw, 760px);
	background: #0d1e17; color: var(--bpa-hero-ink);
}
/* Desktop: the photo fills the right ~62% and fades into the green-black left, so the vial row sits clear of the copy. */
.bpa-hero__photo {
	position: absolute; top: 0; right: 0; z-index: -2;
	width: 62%; height: 100%; object-fit: cover; object-position: 60% 55%;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%); mask-image: linear-gradient(90deg, transparent 0, #000 30%);
}
.bpa-hero__shade {
	position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(90deg, rgba(13, 30, 23, .96) 0%, rgba(14, 31, 24, .9) 34%, rgba(18, 34, 27, .55) 50%, rgba(20, 35, 26, .12) 72%, rgba(20, 35, 26, .04) 100%);
}
.bpa-hero__inner { padding-block: clamp(4rem, 7vw, 6.5rem); }
.bpa-hero__copy { max-width: min(34rem, 42vw); }
.bpa-hero .bpa-eyebrow { color: #dfe7da; }
.bpa-hero__title { position: relative; margin-block: .25rem 1.75rem; font-size: clamp(3rem, 6.1vw, 5.5rem); line-height: .98; letter-spacing: -.02em; color: var(--bpa-hero-ink); }
.bpa-hero__rule { display: block; width: 5.3rem; height: 1px; margin-bottom: 1.75rem; background: #cfdbc7; transform-origin: left; }
.bpa-hero__lede { max-width: 32rem; margin-bottom: 2rem; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height: 1.65; color: #e1e5dc; }
.bpa-hero__cta { min-height: 3.5rem; padding-inline: 2rem; background: #f1eee3; color: #203c2e; font-size: 1.0625rem; }
.bpa-hero__cta:hover { background: #fff; }
.bpa-hero__cta:focus-visible { outline-color: #f1eee3; }
.bpa-hero__badges { display: flex; margin-block: 2.5rem 1.75rem; }
.bpa-hero__badges li {
	display: flex; flex-direction: column; align-items: center; gap: .85rem;
	padding-inline: 1.75rem; border-left: 1px solid rgba(225, 229, 220, .28); text-align: center;
	font: 400 .8125rem/1.45 var(--bpa-mono); letter-spacing: .06em; color: #e8ece3;
}
.bpa-hero__badges li:first-child { padding-left: 0; border-left: 0; }
.bpa-hero__badges span { max-width: 9rem; }
.bpa-hero__disclaimer {
	max-width: 32rem; padding-top: 1.1rem; border-top: 1px solid rgba(225, 229, 220, .28);
	font: 400 .8125rem/1.5 var(--bpa-mono); color: #d4dccc;
}

/* ---------- Featured compounds ---------- */
.bpa-featured { padding-bottom: 3rem; }
.bpa-featured__all--mobile { display: none; }
.bpa-sample-note {
	margin: -1rem 0 1.5rem; padding: .6rem .9rem;
	border-left: 3px solid var(--bpa-proto); background: rgba(242, 200, 75, .14);
	font-size: .875rem; color: var(--bpa-text);
}

.bpa-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.bpa-card { display: flex; flex-direction: column; background: var(--bpa-cream-2); border: 1px solid #e6e1d8; }
.bpa-card__media { position: relative; display: block; text-decoration: none; aspect-ratio: 5 / 4; overflow: hidden; background: var(--bpa-panel); }
.bpa-card__media img { width: 100%; height: 100%; object-fit: cover; }
.bpa-card__media .bpa-placeholder { min-height: 0; }
.bpa-card__sample-tag {
	position: absolute; top: .75rem; left: .75rem; padding: .2rem .5rem;
	background: var(--bpa-proto); color: #2a2200;
	font: 600 .6875rem/1.3 var(--bpa-mono); letter-spacing: .14em; text-transform: uppercase;
}

.bpa-card__body {
	display: grid; grid-template-columns: 1fr auto; align-items: center;
	grid-template-areas: "cat cat" "name name" "size size" "lot lot" "price atc";
	padding: 1.5rem 1.25rem 1.25rem; flex: 1; align-content: start;
}
.bpa-card__cat { grid-area: cat; margin-bottom: .4rem; font: 400 .75rem/1.3 var(--bpa-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--bpa-text); }
.bpa-card__name { grid-area: name; font-size: 1.625rem; font-weight: 600; line-height: 1.15; }
.bpa-card__name a { text-decoration: none; }
.bpa-card__name-size { display: none; }
.bpa-card__size { grid-area: size; font: 400 1.1875rem/1.4 var(--bpa-serif); color: var(--bpa-ink); }
.bpa-card__blurb { grid-area: blurb; display: none; color: var(--bpa-text); }
.bpa-lot {
	grid-area: lot; display: flex; gap: .75rem; margin-block: 1rem 1.25rem; padding: .45rem .85rem;
	background: var(--bpa-chip); border-radius: var(--bpa-radius);
	font: 400 .8125rem/1.4 var(--bpa-mono); color: var(--bpa-ink);
}
.bpa-lot__sep { color: var(--bpa-muted); }
.bpa-card__price { grid-area: price; font: 600 1.5rem/1 var(--bpa-serif); color: var(--bpa-ink); }
.bpa-card__price del { font-size: .8em; opacity: .55; }
.bpa-card__price ins { text-decoration: none; }
.bpa-card__stock { grid-area: stock; display: none; color: var(--bpa-text); }
.bpa-card__atc { grid-area: atc; min-height: 2.6rem; padding-inline: 2.1rem; font-size: 1rem; }
.bpa-card .added_to_cart { grid-column: 1 / -1; margin-top: .5rem; font-size: .875rem; text-align: right; }

/* ---------- Testing process ---------- */
.bpa-testing__intro { max-width: 22rem; font-size: 1.0625rem; line-height: 1.6; color: var(--bpa-text); }
.bpa-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 3rem; }
.bpa-step { display: flex; flex-direction: column; min-width: 0; }
.bpa-step__num {
	display: flex; align-items: center; gap: 2rem; margin-bottom: 2rem;
	font: 400 .8125rem/1 var(--bpa-mono); letter-spacing: .1em; color: var(--bpa-ink);
}
.bpa-step__num::after { content: ""; flex: 1; height: 1px; background: var(--bpa-muted); }
.bpa-step__title { margin-bottom: .9rem; font-size: clamp(1.5rem, 2.2vw, 1.875rem); }
.bpa-step__body { flex: 1; margin-bottom: 2.75rem; color: var(--bpa-text); font-size: 1.0625rem; line-height: 1.6; }
.bpa-step__figure { position: relative; margin: 0; }
.bpa-step__image { aspect-ratio: 16 / 9; height: auto; min-height: 0; }
.bpa-step:not(:last-child) .bpa-step__figure::after {
	content: "\2192"; position: absolute; top: 28%; right: -2.15rem;
	font: 400 1.75rem/1 var(--bpa-sans); color: var(--bpa-ink);
}
.bpa-step__caption {
	display: flex; flex-direction: column; gap: .3rem; padding-top: 1.5rem; text-align: center;
	font: 400 .8125rem/1.3 var(--bpa-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--bpa-ink);
}

/* ---------- CTA band ---------- */
.bpa-cta { position: relative; isolation: isolate; color: #f3efe7; }
.bpa-cta__bg {
	position: absolute; inset: 0; z-index: -1; min-height: 0;
	align-items: flex-end; justify-content: flex-end; padding: 1.5rem 2rem;
	background:
		linear-gradient(90deg, rgba(56, 47, 38, .96) 0%, rgba(78, 66, 54, .85) 45%, rgba(120, 104, 88, .55) 100%),
		repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 14px),
		#6b5d4f;
	color: rgba(243, 239, 231, .7); outline-color: rgba(243, 239, 231, .3);
}
.bpa-cta__inner { padding-block: clamp(4rem, 8vw, 7rem); }
.bpa-cta .bpa-eyebrow { color: #eae5dc; font-weight: 400; }
.bpa-cta__title { margin-block: .5rem 1.75rem; font-size: clamp(2.75rem, 5.6vw, 4.75rem); line-height: 1.02; color: #f3efe7; }
.bpa-cta__body { max-width: 34rem; margin-bottom: 2.5rem; font-size: clamp(1.0625rem, 1.5vw, 1.3125rem); line-height: 1.6; }

/* ---------- Footer ---------- */
.bpa-footer { background: var(--bpa-night); color: var(--bpa-footer-text); padding-block: 5rem 3rem; }
.bpa-footer a { color: #f1eee8; text-decoration: none; }
.bpa-footer a:hover { text-decoration: underline; }
.bpa-footer__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 3rem; padding-bottom: 4rem; border-bottom: 1px solid #2c3632; }
.bpa-footer .bpa-wordmark { font-size: 1.55rem; }
.bpa-footer__tagline { margin-block: 2rem 1.75rem; font: 500 1.5rem/1.3 var(--bpa-serif); color: #f1eee8; }
.bpa-footer__badge {
	display: inline-block; padding: .55rem .85rem; border: 1px solid #45504b; border-radius: var(--bpa-radius);
	font: 400 .75rem/1.2 var(--bpa-mono); letter-spacing: .16em; text-transform: uppercase; color: #eae6de;
}
.bpa-footer__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.bpa-footer__heading {
	display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;
	font: 400 .75rem/1 var(--bpa-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--bpa-footer-muted);
	list-style: none; pointer-events: none;
}
.bpa-footer__heading::-webkit-details-marker { display: none; }
.bpa-footer__plus { display: none; }
.bpa-footer__list { display: grid; gap: .9rem; font-size: 1.0625rem; }

.bpa-footer__legal { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; padding-block: 2.5rem; border-bottom: 1px solid #2c3632; font-size: .9375rem; line-height: 1.7; }
.bpa-footer__legal strong { color: #fff; }
.bpa-footer__bottom { display: flex; justify-content: space-between; gap: 1rem; padding-top: 2.25rem; font-size: .9375rem; color: #b9bab4; }
.bpa-footer__tag { font: 400 .75rem/1.6 var(--bpa-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--bpa-footer-muted); }

/* ---------- Generic pages (undesigned; minimal) ---------- */
.bpa-page { padding-block: 3rem 5rem; min-height: 50vh; }
.bpa-entry + .bpa-entry { margin-top: 3rem; }
.bpa-entry__title { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 1.25rem; }
.bpa-entry__content > * + * { margin-top: 1rem; }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
	.bpa-nav, .bpa-nav__list { gap: 1.5rem; }
	.bpa-nav a { font-size: 1rem; }
	.bpa-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bpa-header .bpa-wordmark { font-size: 1.3rem; }
}

@media (max-width: 900px) {
	.bpa-nav, .bpa-header__search-toggle, .bpa-header__account { display: none; }
	.bpa-header__inner { display: grid; grid-template-columns: 2.5rem 1fr 2.5rem; gap: 1rem; min-height: 4rem; }
	.bpa-header__toggle { display: inline-grid; margin-left: -.5rem; }
	.bpa-header__logo { justify-self: center; }
	.bpa-header__actions { justify-self: end; margin-right: -.5rem; }
	.bpa-wordmark { font-size: 1.25rem; }

	/* Mobile (demo): the photo is full-bleed behind the copy under a heavier shade. */
	.bpa-hero { align-items: flex-start; min-height: 0; }
	.bpa-hero__photo { width: 100%; object-position: 62% 50%; -webkit-mask-image: none; mask-image: none; }
	.bpa-hero__shade { background: linear-gradient(90deg, rgba(13, 30, 23, .93), rgba(18, 34, 27, .82)); }
	.bpa-hero__inner { padding-block: 3rem 2.75rem; }
	.bpa-hero__copy { max-width: 36rem; }
	.bpa-hero__badges li { padding-inline: 1.25rem; }

	.bpa-steps { grid-template-columns: 1fr; row-gap: 2.5rem; }
	.bpa-step__num { margin-bottom: 1.25rem; }
	.bpa-step__body { margin-bottom: 1.5rem; }
	.bpa-step:not(:last-child) .bpa-step__figure::after { display: none; }
	.bpa-step__image { border-radius: 6px; overflow: hidden; }
	.bpa-testing__head { flex-direction: column; align-items: flex-start; gap: 1rem; }

	.bpa-footer__top { grid-template-columns: 1fr; }
}

/* ---------- Mobile (wireframe p. 4) ---------- */
@media (max-width: 640px) {

	.bpa-header .bpa-wordmark { font-size: 1.0625rem; }
	.bpa-footer .bpa-wordmark { font-size: 1.125rem; }
	.bpa-eyebrow { gap: 1rem; font-size: .75rem; }
	.bpa-eyebrow::before { width: 2.25rem; }

	.bpa-hero__title { font-size: clamp(2.5rem, 12vw, 3.25rem); margin-bottom: 1.25rem; }
	.bpa-hero__rule { margin-bottom: 1.25rem; }
	.bpa-hero__lede { font-size: 1rem; margin-bottom: 1.5rem; }
	.bpa-hero__cta { display: flex; width: 100%; min-height: 3.25rem; font-size: 1.0625rem; }
	.bpa-hero__badges { display: grid; grid-template-columns: repeat(3, 1fr); margin-block: 1.75rem; }
	.bpa-hero__badges li { padding-inline: .5rem; font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; gap: .6rem; }
	.bpa-hero__badges li:first-child { padding-left: .5rem; }

	.bpa-section__head { margin-bottom: 1.25rem; }
	.bpa-featured__all { display: none; }
	.bpa-featured__all--mobile { display: inline-flex; margin-top: 2rem; }
	.bpa-cards { grid-template-columns: 1fr; gap: 1.5rem; }
	.bpa-card { border-radius: 8px; overflow: hidden; }
	.bpa-card__body {
		grid-template-areas: "cat price" "name size" "blurb blurb" "lot lot" "stock atc";
		row-gap: .1rem; padding: 1.25rem;
	}
	.bpa-card__name { font-size: 1.5rem; font-weight: 500; }
	.bpa-card__name-size { display: inline; white-space: nowrap; }
	.bpa-card__size { justify-self: end; font: 400 .875rem/1.4 var(--bpa-sans); color: var(--bpa-text); }
	.bpa-card__price { justify-self: end; }
	.bpa-card__blurb { display: block; margin-top: .75rem; font-size: .9375rem; line-height: 1.55; }
	.bpa-lot { margin-block: 1rem; font-size: .75rem; }
	.bpa-card__stock { display: block; }


	.bpa-cta__title { font-size: clamp(2.5rem, 11vw, 3rem); }
	.bpa-btn--cream { width: 100%; }

	.bpa-footer { padding-top: 3rem; }
	.bpa-footer__top { gap: 1.5rem; padding-bottom: 0; border-bottom: 0; }
	.bpa-footer__cols { grid-template-columns: 1fr; gap: 0; }
	.bpa-footer__col { border-top: 1px solid #2c3632; }
	.bpa-footer__col:last-child { border-bottom: 1px solid #2c3632; }
	.bpa-footer__heading {
		margin: 0; padding-block: 1.1rem; pointer-events: auto; cursor: pointer;
		font: 400 1.0625rem/1 var(--bpa-sans); letter-spacing: 0; text-transform: none; color: #f1eee8;
	}
	.bpa-footer__plus { display: block; width: 1.125rem; height: 1.125rem; transition: transform .2s; }
	.bpa-footer__col[open] .bpa-footer__plus { transform: rotate(45deg); }
	.bpa-footer__list { padding-bottom: 1.25rem; }
	.bpa-footer__legal { grid-template-columns: 1fr; gap: 1rem; border-bottom: 0; font-size: .875rem; }
	.bpa-footer__bottom { flex-direction: column; padding-top: 0; }
	.bpa-footer__tag { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; }
}

/* =====================================================================
   Catalog (wireframes pp. 9–10) and product detail (pp. 5–6)
   ===================================================================== */

.bpa-catalog, .bpa-product { padding-block: 1.75rem 5rem; }
.js .bpa-filters__apply, .js .bpa-toolbar__go { display: none; }
.bpa-anchor { scroll-margin-top: 8rem; }

/* Shared: breadcrumbs, pending marker, pills */
.bpa-crumbs ol { display: flex; flex-wrap: wrap; gap: .25rem .6rem; font-size: .875rem; color: var(--bpa-text); }
.bpa-crumbs li + li::before { content: "\203A"; margin-right: .6rem; color: var(--bpa-muted); }
.bpa-crumbs a { text-decoration: none; }
.bpa-crumbs a:hover { text-decoration: underline; }
.bpa-crumbs [aria-current] { color: var(--bpa-ink); }

.bpa-pending { display: inline-flex; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--bpa-text); }
.bpa-pending__tag {
	padding: .1rem .4rem; border: 1px dashed var(--bpa-muted); border-radius: var(--bpa-radius);
	font: 500 .625rem/1.4 var(--bpa-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bpa-muted);
}

.bpa-pills { display: flex; gap: .6rem; margin-bottom: 2.5rem; overflow-x: auto; scrollbar-width: none; }
.bpa-pill {
	flex: none; padding: .55rem 1.1rem; border: 1px solid var(--bpa-line); border-radius: 999px;
	background: var(--bpa-cream-2); font-weight: 500; font-size: .9375rem; text-decoration: none; color: var(--bpa-ink);
}
.bpa-pill:hover { border-color: var(--bpa-ink); }
.bpa-pill[aria-current] { background: var(--bpa-ink-2); border-color: var(--bpa-ink-2); color: var(--bpa-white); }

/* Catalog header */
.bpa-catalog .bpa-crumbs { margin-bottom: 2.75rem; }
.bpa-catalog__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: 3rem; }
.bpa-catalog__title { font-size: clamp(2.75rem, 5.2vw, 4.5rem); line-height: 1; }
.bpa-catalog__intro { max-width: 30rem; font-size: 1.125rem; line-height: 1.6; color: var(--bpa-text); }

.bpa-catalog__layout { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 3rem; align-items: start; }

/* Filters sidebar */
.bpa-filters { display: grid; gap: 0; }
.bpa-filters__group { margin: 0; padding: 0 0 1.75rem; border: 0; border-bottom: 1px solid var(--bpa-line); }
.bpa-filters__group + .bpa-filters__group, .bpa-filters__apply + .bpa-filters__group { margin-top: 1.75rem; }
.bpa-filters__group:last-child { border-bottom: 0; }
.bpa-filters__title { margin-bottom: 1rem; padding: 0; font: 500 .75rem/1.3 var(--bpa-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--bpa-ink); }
.bpa-filters__apply { margin-block: 1rem; }
.bpa-check { display: flex; align-items: center; gap: .75rem; padding-block: .45rem; font-size: 1.0625rem; cursor: pointer; }
.bpa-check input { width: 1.2rem; height: 1.2rem; margin: 0; accent-color: var(--bpa-ink-2); flex: none; }
.bpa-check__count { margin-left: auto; font: 400 .8125rem/1 var(--bpa-mono); color: var(--bpa-muted); }
.bpa-verify__body { margin-bottom: 1rem; font-size: .9375rem; line-height: 1.55; color: var(--bpa-text); }
.bpa-verify__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; margin-bottom: .75rem; }
.bpa-verify__row input {
	min-width: 0; padding: .6rem .75rem; border: 1px solid var(--bpa-line); border-radius: var(--bpa-radius);
	background: var(--bpa-white); font: inherit;
}
.bpa-verify__row input:disabled { background: var(--bpa-cream-2); }
.bpa-verify__row .bpa-btn { min-height: 2.75rem; padding-inline: 1rem; font-size: .9375rem; }

/* Toolbar */
.bpa-toolbar { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; }
.bpa-toolbar__count { margin-right: auto; color: var(--bpa-text); }
.bpa-toolbar__search, .bpa-toolbar__sort { position: relative; display: flex; align-items: center; }
.bpa-toolbar__search .bpa-icon, .bpa-toolbar__sort .bpa-icon { position: absolute; left: .9rem; width: 1.1rem; height: 1.1rem; color: var(--bpa-text); pointer-events: none; }
.bpa-toolbar__search input, .bpa-toolbar__sort select {
	min-height: 2.9rem; border: 1px solid var(--bpa-line); border-radius: var(--bpa-radius);
	background: var(--bpa-cream-2); font: inherit; color: var(--bpa-ink);
}
.bpa-toolbar__search input { width: 21rem; padding: .5rem 1rem .5rem 2.6rem; }
.bpa-toolbar__sort select { width: 13rem; padding: .5rem 1rem .5rem 2.6rem; cursor: pointer; }
.bpa-toolbar__filter { display: none; }
.bpa-toolbar__badge {
	display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; border-radius: 1rem;
	background: var(--bpa-green); color: var(--bpa-white); font-size: .75rem;
}
.bpa-catalog__active { margin: -1.25rem 0 2rem; font-size: .9375rem; color: var(--bpa-text); }

/* Groups and catalog cards */
.bpa-catalog__group + .bpa-catalog__group { margin-top: 3.5rem; }
.bpa-catalog__group-head {
	display: flex; justify-content: space-between; align-items: baseline;
	margin-bottom: 1.5rem; padding-bottom: .9rem; border-bottom: 1px solid var(--bpa-line);
}
.bpa-catalog__group-title { font-size: clamp(1.75rem, 2.8vw, 2.375rem); }
.bpa-catalog__group-count { font: 400 .8125rem/1 var(--bpa-mono); letter-spacing: .14em; color: var(--bpa-text); }

.bpa-cards--catalog { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; }
.bpa-card--catalog .bpa-card__media, .bpa-card--related .bpa-card__media { aspect-ratio: 11 / 8; }
.bpa-card--catalog .bpa-placeholder__note, .bpa-card--related .bpa-placeholder__note { font-size: .75rem; }
.bpa-card--catalog .bpa-card__body { padding: 1.25rem 1.1rem 1.1rem; }
.bpa-card--catalog .bpa-card__name, .bpa-card--related .bpa-card__name { font-size: 1.375rem; overflow-wrap: anywhere; hyphens: auto; }
.bpa-card--catalog .bpa-card__size { font-size: 1.0625rem; overflow-wrap: anywhere; }
.bpa-card--catalog .bpa-lot { gap: .45rem; margin-block: .9rem 1.1rem; padding: .4rem .6rem; font-size: .6875rem; white-space: nowrap; overflow: hidden; }
.bpa-card--catalog .bpa-card__price { font-size: 1.1875rem; white-space: nowrap; }
.bpa-card--catalog .bpa-card__body { column-gap: .5rem; }
.bpa-card--catalog .bpa-card__atc { min-height: 2.4rem; padding-inline: .8rem; font-size: .875rem; white-space: nowrap; }

.bpa-empty { padding: 3.5rem 2rem; border: 1px dashed var(--bpa-line); text-align: center; }
.bpa-empty__title { margin-bottom: .75rem; font-size: 2rem; line-height: 1.15; }
.bpa-empty p { margin-bottom: 1.5rem; color: var(--bpa-text); }

.bpa-catalog .woocommerce-pagination { margin-top: 3rem; }
.bpa-catalog .woocommerce-pagination ul { display: flex; gap: .5rem; border: 0; }
.bpa-catalog .woocommerce-pagination li { border: 0; }

/* Product detail */
.bpa-product .bpa-crumbs { margin-bottom: 1.75rem; }
.bpa-product__top { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }

.bpa-gallery__stage .bpa-placeholder { aspect-ratio: 1 / 1.04; min-height: 0; }
.bpa-gallery__thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; margin-top: 1.1rem; }
.bpa-gallery__thumb {
	display: grid; place-items: center; aspect-ratio: 1 / .95; padding: 0; cursor: pointer;
	border: 2px solid transparent; background: #d9d3c9; color: #6c706b;
}
.bpa-gallery__thumb[aria-pressed="true"] { border-color: var(--bpa-ink); }
.bpa-gallery__thumb:hover { border-color: var(--bpa-muted); }
.bpa-gallery .woocommerce-product-gallery { width: 100% !important; float: none !important; margin: 0 !important; }

.bpa-product__summary { padding-top: 1.25rem; }
.bpa-product__cat { margin-bottom: .75rem; font: 500 .8125rem/1.3 var(--bpa-mono); letter-spacing: .22em; text-transform: uppercase; }
.bpa-product__title { font-size: clamp(2.25rem, 4vw, 3.5rem); line-height: 1.05; overflow-wrap: anywhere; }
.bpa-product__badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: 1.5rem 1.25rem; }
.bpa-product__badges li { padding: .3rem .85rem; border-radius: 999px; background: #e6e2db; font-size: .875rem; color: var(--bpa-text); }
.bpa-product__price { font: 500 clamp(2rem, 3vw, 2.5rem)/1.1 var(--bpa-serif); color: var(--bpa-ink); }
.bpa-product__price del { font-size: .6em; opacity: .55; }
.bpa-product__price ins { text-decoration: none; }
.bpa-product__desc { margin-top: 1.5rem; padding-bottom: 1.75rem; border-bottom: 1px solid var(--bpa-line); font-size: 1.125rem; line-height: 1.65; color: var(--bpa-text); }
.bpa-product__contents { margin-top: 1rem; font: 400 .875rem/1.4 var(--bpa-mono); color: var(--bpa-text); }

.bpa-sizes { margin-top: 1.75rem; }
.bpa-sizes__label { margin-bottom: .9rem; font-weight: 600; font-size: 1.0625rem; }
.bpa-sizes__list { display: flex; flex-wrap: wrap; gap: .9rem; }
.bpa-size {
	display: inline-grid; place-items: center; min-width: 6.75rem; min-height: 3.75rem; padding: .5rem 1rem;
	border: 1px solid var(--bpa-line); border-radius: var(--bpa-radius); background: var(--bpa-cream-2);
	font-size: 1rem; text-decoration: none; color: var(--bpa-ink);
}
a.bpa-size:hover { border-color: var(--bpa-ink); }
.bpa-size.is-current { border: 1.5px solid var(--bpa-ink); background: var(--bpa-white); font-weight: 600; }

.bpa-buy { display: flex; gap: 1.5rem; margin-top: 2.5rem; }
.bpa-qty {
	display: grid; grid-template-columns: 2.75rem 3.5rem 2.75rem; align-items: center; flex: none;
	border: 1px solid var(--bpa-line); border-radius: var(--bpa-radius); background: var(--bpa-cream-2);
}
.bpa-qty button { height: 100%; min-height: 4rem; border: 0; background: none; font-size: 1.375rem; color: var(--bpa-ink); cursor: pointer; }
.bpa-qty input { width: 100%; border: 0; background: none; text-align: center; font: inherit; font-size: 1.0625rem; color: var(--bpa-ink); -moz-appearance: textfield; }
.bpa-qty input::-webkit-inner-spin-button, .bpa-qty input::-webkit-outer-spin-button { -webkit-appearance: none; }
.bpa-qty :disabled { color: var(--bpa-muted); cursor: not-allowed; }
.bpa-buy__atc { flex: 1; min-height: 4rem; font-family: var(--bpa-sans); font-size: 1.1875rem; font-weight: 600; }
.bpa-buy__note { margin-top: 1.25rem; font-size: .9375rem; line-height: 1.6; color: var(--bpa-text); }
.bpa-buy__note--sample { margin-top: .9rem; padding: .5rem .75rem; border-left: 3px solid var(--bpa-proto); background: rgba(242, 200, 75, .14); }

/* WooCommerce's own add-to-cart form (real products) */
.bpa-buy--wc { display: block; }
.bpa-buy--wc form.cart { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 0; }
.bpa-buy--wc .variations { width: 100%; margin-bottom: .5rem; }
.bpa-buy--wc .variations select { min-height: 3rem; padding: .5rem; border: 1px solid var(--bpa-line); background: var(--bpa-cream-2); font: inherit; }
.bpa-buy--wc .quantity { display: flex; border: 1px solid var(--bpa-line); background: var(--bpa-cream-2); }
.bpa-buy--wc .quantity .qty { width: 3.5rem; border: 0; background: none; text-align: center; font: inherit; }
.bpa-buy--wc .bpa-qty-step { width: 2.75rem; border: 0; background: none; font-size: 1.375rem; cursor: pointer; }
.bpa-buy--wc .single_add_to_cart_button {
	flex: 1; min-height: 4rem; border: 0 !important; border-radius: var(--bpa-radius) !important;
	background: var(--bpa-ink-2) !important; color: var(--bpa-white) !important; font: 600 1.1875rem/1 var(--bpa-sans) !important;
}

/* In-page section nav ("tabs") */
.bpa-tabs { margin-top: 3.5rem; border-bottom: 1px solid var(--bpa-line); }
.bpa-tabs ul { display: flex; gap: 2.75rem; overflow-x: auto; scrollbar-width: none; }
.bpa-tabs a {
	display: block; padding-block: .9rem; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
	font: 400 1.125rem/1.2 var(--bpa-serif); color: var(--bpa-text); text-decoration: none;
}
.bpa-tabs a:hover { color: var(--bpa-ink); }
.bpa-tabs a[aria-current] { border-bottom-color: var(--bpa-ink); color: var(--bpa-ink); }

.bpa-overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: start; padding-block: 3.25rem; border-bottom: 1px solid var(--bpa-line); }
.bpa-overview__title { margin-bottom: 1.5rem; font-size: clamp(2.25rem, 4vw, 3.5rem); line-height: 1.08; }
.bpa-overview__body { max-width: 34rem; margin-bottom: 2.25rem; font: 400 1.25rem/1.65 var(--bpa-serif); color: #2c3430; }
.bpa-overview__highlights { display: flex; flex-wrap: wrap; gap: 1.25rem 2.25rem; }
.bpa-overview__highlights li { display: flex; align-items: center; gap: .9rem; max-width: 15rem; font-size: .9375rem; line-height: 1.45; }
.bpa-overview__image { aspect-ratio: 3 / 2; min-height: 0; height: auto; }

.bpa-product__details { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3.5rem; padding-block: 3rem; }
.bpa-product__h2 { margin-bottom: 1.5rem; font-size: clamp(1.75rem, 2.8vw, 2.375rem); }
.bpa-specs { width: 100%; border-collapse: collapse; border-top: 1px solid var(--bpa-line); }
.bpa-specs th, .bpa-specs td { padding: .75rem 0; border-bottom: 1px solid var(--bpa-line); text-align: left; vertical-align: top; }
.bpa-specs th { width: 40%; padding-right: 1rem; font-weight: 400; }
.bpa-specs td { font: 400 .9375rem/1.5 var(--bpa-mono); color: #3a413d; overflow-wrap: anywhere; }

.bpa-lit { display: grid; gap: .9rem; }
.bpa-lit__item {
	display: flex; justify-content: space-between; align-items: center; gap: 1rem;
	padding: 1.15rem 1.5rem; border: 1px solid #e6e1d8; border-radius: 3px; background: var(--bpa-cream-2); font-size: .9375rem;
}
.bpa-lit__more { margin-top: 1.5rem; }

.bpa-product__panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; padding-bottom: 3rem; }
.bpa-panel { padding: 1.5rem; border: 1px solid #e6e1d8; background: var(--bpa-cream-2); font-size: .9375rem; line-height: 1.6; color: var(--bpa-text); }
.bpa-panel__title { margin-bottom: 1rem; font-size: 1.375rem; }
.bpa-panel .bpa-lot { display: inline-flex; margin: 0 0 1rem; }
.bpa-panel ul { display: grid; gap: .35rem; }
.bpa-panel li::before { content: "– "; color: var(--bpa-muted); }

.bpa-related { padding-block: 1rem 3rem; }
.bpa-related__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.bpa-related__all { display: inline-flex; align-items: center; gap: .5rem; font-size: 1.0625rem; text-decoration: none; white-space: nowrap; }
.bpa-related__all:hover { text-decoration: underline; }
.bpa-related__all .bpa-icon { width: 1rem; height: 1rem; }
.bpa-cards--related { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.bpa-card--related .bpa-card__body { grid-template-columns: 1fr; grid-template-areas: "name" "lot" "price"; padding: 1.25rem; }
.bpa-card--related .bpa-card__name { font-weight: 500; }
.bpa-card--related .bpa-lot { justify-self: start; margin-block: .75rem; padding: .25rem .6rem; font-size: .75rem; }

.bpa-ruo { padding: 1.5rem 2.25rem; border: 1px solid var(--bpa-line); border-radius: 3px; background: #ece8e0; font-size: .9375rem; line-height: 1.6; }

/* ---------- Catalog / product: tablet ---------- */
@media (max-width: 1100px) {
	.bpa-catalog__layout { grid-template-columns: 14rem minmax(0, 1fr); gap: 2.25rem; }
	.bpa-cards--catalog { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.bpa-toolbar { flex-wrap: wrap; }
	.bpa-toolbar__search { flex: 1; }
	.bpa-toolbar__search input { width: 100%; }
	.bpa-product__panels { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
	/* Filters become a toggleable panel (wireframe p. 10 "Filter" button). */
	.bpa-catalog__layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.bpa-catalog__head { flex-direction: column; align-items: flex-start; gap: 1rem; margin-bottom: 1.75rem; }
	.js .bpa-filters { display: none; }
	.js .bpa-filters.is-open { display: grid; margin-bottom: 1.5rem; padding: 1.25rem; border: 1px solid var(--bpa-line); background: var(--bpa-cream-2); }
	.bpa-filters { order: 2; }
	.bpa-catalog__main { order: 1; display: contents; }
	.bpa-toolbar { order: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: 1rem; }
	.bpa-toolbar__search { grid-column: 1 / -1; order: -1; }
	.bpa-toolbar__count { order: 3; grid-column: 1 / -1; margin: 0; font-size: .9375rem; }
	.js .bpa-toolbar__filter { display: inline-flex; min-height: 2.9rem; border: 1px solid var(--bpa-line); background: var(--bpa-cream-2); color: var(--bpa-ink); font-weight: 600; }
	.bpa-toolbar__filter[aria-expanded="true"] { border-color: var(--bpa-ink); }
	.bpa-toolbar__sort select { width: 100%; font-weight: 600; }
	.bpa-filters { order: 1; }
	.bpa-pills, .bpa-catalog__active, .bpa-catalog__group, .bpa-empty, .bpa-catalog .woocommerce-pagination { order: 2; }
	.bpa-pills { margin-bottom: 1.5rem; }
	.bpa-catalog__active { margin-top: 0; }

	.bpa-product__top, .bpa-overview, .bpa-product__details { grid-template-columns: minmax(0, 1fr); }
	.bpa-product__summary { padding-top: 0; }
	.bpa-overview { gap: 2rem; }
	.bpa-overview__highlights { flex-direction: column; }
	.bpa-overview__highlights li { max-width: none; }
	.bpa-tabs ul { gap: 2rem; }
	.bpa-cards--related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Catalog / product: mobile ---------- */
@media (max-width: 640px) {
	.bpa-catalog .bpa-crumbs { margin-bottom: 1.5rem; }
	.bpa-catalog__title { font-size: 2.75rem; }
	.bpa-catalog__intro { font-size: 1rem; }
	.bpa-catalog__group + .bpa-catalog__group { margin-top: 2.5rem; }
	.bpa-catalog__group-title { font-size: 1.75rem; }

	/* Compact two-column cards (p. 10) */
	.bpa-cards--catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
	.bpa-card--catalog { border-radius: 4px; }
	.bpa-card--catalog .bpa-card__media { aspect-ratio: 6 / 5; }
	.bpa-card--catalog .bpa-placeholder { padding: .5rem; gap: .25rem; outline-offset: -5px; }
	.bpa-card--catalog .bpa-placeholder__icon { width: 1.5rem; height: 1.5rem; }
	.bpa-card--catalog .bpa-placeholder__tag { font-size: .5625rem; }
	.bpa-card--catalog .bpa-placeholder__note { display: none; }
	.bpa-card--catalog .bpa-card__body { grid-template-columns: 1fr; grid-template-areas: "name" "size" "lot" "price" "atc"; row-gap: 0; padding: .75rem .7rem .8rem; }
	.bpa-card--catalog .bpa-card__cat { display: none; }
	.bpa-card--catalog .bpa-card__name { font-size: 1.125rem; font-weight: 600; }
	.bpa-card--catalog .bpa-card__size { justify-self: start; font: 400 1rem/1.35 var(--bpa-serif); color: var(--bpa-ink); }
	.bpa-card--catalog .bpa-lot { margin-block: .5rem .4rem; padding: 0; background: none; font-size: .625rem; color: var(--bpa-text); gap: .35rem; flex-wrap: wrap; }
	.bpa-card--catalog .bpa-card__price { justify-self: start; margin-bottom: .6rem; font-size: 1.1875rem; }
	.bpa-card--catalog .bpa-card__atc { width: 100%; min-height: 2.3rem; padding-inline: .5rem; font-size: .875rem; }
	.bpa-card--catalog .bpa-card__sample-tag { top: .4rem; left: .4rem; font-size: .5625rem; }

	.bpa-product .bpa-crumbs { margin-bottom: 1rem; font-size: .8125rem; }
	.bpa-gallery__thumbs { gap: .6rem; margin-top: .75rem; }
	.bpa-product__title { font-size: 2.25rem; }
	.bpa-product__badges { margin-block: 1rem; }
	.bpa-product__desc { font-size: 1rem; }
	.bpa-sizes__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
	.bpa-size { min-width: 0; min-height: 3.25rem; padding-inline: .25rem; font-size: .9375rem; }
	.bpa-buy { gap: .75rem; margin-top: 1.5rem; }
	.bpa-qty { grid-template-columns: 2.5rem 2.5rem 2.5rem; }
	.bpa-qty button, .bpa-buy__atc { min-height: 3.4rem; }
	.bpa-buy__atc { font-size: 1.0625rem; }
	.bpa-buy__note { font-size: .875rem; }
	.bpa-tabs { margin-top: 2rem; margin-inline: calc(-1 * var(--bpa-gutter)); padding-inline: var(--bpa-gutter); }
	.bpa-tabs ul { gap: 1.75rem; }
	.bpa-tabs a { font-size: 1.0625rem; }
	.bpa-overview { padding-block: 2.25rem; }
	.bpa-overview__body { font-size: 1.0625rem; }
	.bpa-specs th { width: 45%; font-size: .9375rem; }
	.bpa-specs td { font-size: .8125rem; }
	.bpa-lit__item { flex-direction: column; align-items: flex-start; gap: .5rem; padding: 1rem 1.1rem; }

	/* Related: horizontal scroller with the next card peeking (p. 6) */
	.bpa-cards--related {
		display: grid; grid-auto-flow: column; grid-auto-columns: 62%; grid-template-columns: none;
		overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--bpa-gutter)); padding-inline: var(--bpa-gutter);
		gap: .9rem; scrollbar-width: none; scroll-padding-inline: var(--bpa-gutter);
	}
	.bpa-related__head .bpa-product__h2 { font-size: 1.75rem; line-height: 1.1; }
	.bpa-related__cat { display: none; }
	.bpa-card--related { scroll-snap-align: start; }
	.bpa-card--related .bpa-card__name { font-size: 1.125rem; }
	.bpa-card--related .bpa-card__body { grid-template-areas: "name" "lot" "price"; padding: .9rem; }
	.bpa-card--related .bpa-card__price { justify-self: start; }
	.bpa-ruo { padding: 1.25rem; font-size: .875rem; }
}

/* Compact featured row (wireframe p. 3): four cards across on desktop. */
.bpa-featured .bpa-card__media { aspect-ratio: 4 / 3; }
/* Close-up sample art is pre-cropped to 4:3 (vial ~87% of height), so cover never trims cap or base. */
.bpa-featured .bpa-card__media .bpa-card__img--closeup { object-position: 50% 50%; }
@media (min-width: 901px) {
	.bpa-featured .bpa-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .875rem; }
	.bpa-featured .bpa-card__body { padding: .9rem .85rem .85rem; column-gap: .5rem; }
	.bpa-featured .bpa-card__cat { margin-bottom: .25rem; font-size: .625rem; letter-spacing: .16em; }
	.bpa-featured .bpa-card__name { font-size: clamp(1.0625rem, 1.55vw, 1.3125rem); overflow-wrap: anywhere; }
	.bpa-featured .bpa-card__size { font-size: .9375rem; }
	.bpa-featured .bpa-lot { justify-self: start; max-width: 100%; flex-wrap: wrap; gap: .3rem; margin-block: .65rem .8rem; padding: .3rem .5rem; font-size: .625rem; }
	.bpa-featured .bpa-card__price { font-size: clamp(1rem, 1.3vw, 1.1875rem); white-space: nowrap; }
	.bpa-featured .bpa-card__atc { min-height: 2.125rem; padding: .4rem clamp(.6rem, 1vw, 1rem); font-size: clamp(.75rem, .95vw, .8125rem); white-space: nowrap; }
}
@media (max-width: 640px) {
	.bpa-featured .bpa-card__body { grid-template-columns: minmax(0, 1fr) auto; }
	.bpa-featured .bpa-card__name { font-size: 1.375rem; }
	/* Keep short sample names like "BPC-157" from breaking at the hyphen. */
	.bpa-featured .bpa-card__name-text { white-space: nowrap; }
	.bpa-featured .bpa-card__atc { padding-inline: 1.25rem; white-space: nowrap; }
}

/* Testing process images (mockup p. 3): a full-bleed band of three frames under the text columns.
   16:9 (mockup is ~1.85) so the sample report's disclosures stay fully in frame. */
.bpa-step__photo { display: block; width: 100%; object-fit: cover; background: var(--bpa-panel); }
@media (min-width: 901px) {
	/* Figures stay inside their steps; container units place them on a wider band grid than the text. */
	.bpa-testing { container-type: inline-size; }
	.bpa-steps {
		--bpa-content: calc(min(100cqw, var(--bpa-wrap) + 2 * var(--bpa-gutter)) - 2 * var(--bpa-gutter));
		--bpa-content-left: calc((100cqw - var(--bpa-content)) / 2);
		--bpa-col: calc((var(--bpa-content) - 6rem) / 3); /* 3rem column-gap */
		--bpa-band: min(100cqw, 1600px);
		--bpa-band-gap: 3.5rem;
		--bpa-frame: calc((var(--bpa-band) - 2 * var(--bpa-band-gap)) / 3);
	}
	.bpa-step__figure {
		--bpa-i: 0;
		width: var(--bpa-frame);
		margin-left: calc((100cqw - var(--bpa-band)) / 2 + var(--bpa-i) * (var(--bpa-frame) + var(--bpa-band-gap)) - var(--bpa-content-left) - var(--bpa-i) * (var(--bpa-col) + 3rem));
	}
	.bpa-step:nth-child(2) .bpa-step__figure { --bpa-i: 1; }
	.bpa-step:nth-child(3) .bpa-step__figure { --bpa-i: 2; }
	.bpa-step__image { aspect-ratio: 16 / 9; }
	/* Arrow centred in the gap between frames, at the frame's vertical middle. */
	.bpa-step:not(:last-child) .bpa-step__figure::after {
		top: calc(var(--bpa-frame) * 9 / 16 / 2); right: calc(var(--bpa-band-gap) / -2);
		transform: translate(50%, -50%); font-size: 1.5rem;
	}
	.bpa-step__caption { padding-top: 1.25rem; line-height: 1.5; }
}
@media (max-width: 900px) {
	.bpa-step__image { aspect-ratio: 5 / 3; }
	.bpa-step__caption { padding-top: 1.1rem; }
}

/* CTA banner, matched to the rough mockup at its native widths (p. 3 desktop at 1440px, p. 4 mobile at 390px).
   The photo is zoomed past "cover" so the vial matches the mockup's scale; --cta-h drives the zoom and placement. */
.bpa-cta { overflow: hidden; display: flex; align-items: center; background: #3e3428; }
.bpa-cta__media { position: absolute; inset: 0; z-index: -1; }
.bpa-cta__img {
	position: absolute; max-width: none; height: auto;
	width: max(calc(var(--cta-h) * var(--cta-zoom) * 2), 100%);
	top: calc(var(--cta-h) * var(--cta-top));
	/* Vial centre (68.3% of the photo) lands at --cta-vial-x of the band; min() stops the photo leaving a gap at the left. */
	left: min(0px, calc(var(--cta-vial-x) - .683 * max(calc(var(--cta-h) * var(--cta-zoom) * 2), 100%)));
}
.bpa-cta__media::after { content: ""; position: absolute; inset: 0; }
.bpa-cta__inner { position: relative; max-width: none; margin: 0; }
.bpa-cta .bpa-eyebrow { margin: 0; font-family: var(--bpa-sans); font-weight: 400; text-transform: uppercase; color: #eee9e1; }
.bpa-cta__title { margin: 0; font-weight: 500; color: #f3efe7; }
.bpa-cta__body { margin: 0; max-width: none; color: #f1ede6; }
.bpa-cta .bpa-btn--cream {
	min-width: 0; width: auto; padding-block: 0; justify-content: space-between;
	background: #f2efe9; color: #1d2421; font-weight: 400;
}
.bpa-cta .bpa-btn--cream .bpa-icon { stroke-width: 1.25; }

@media (min-width: 1024px) {
	.bpa-cta {
		--cta-h: clamp(520px, 45.7vw, 900px); --cta-zoom: 1.264; --cta-top: -.0866; --cta-vial-x: 68.4%;
		height: var(--cta-h); min-height: 0; align-items: flex-start;
	}
	/* Mockup overlay: deep brown across the copy, easing out before the vial and the report heading. */
	.bpa-cta__media::after { background: linear-gradient(90deg, rgba(58, 50, 38, .8) 0%, rgba(58, 50, 38, .76) 33%, rgba(58, 50, 38, .52) 42%, rgba(58, 50, 38, .16) 50%, rgba(58, 50, 38, 0) 56%); }
	.bpa-cta__inner { padding: calc(var(--cta-h) * .227) 0 0 5.5vw; }
	.bpa-cta .bpa-eyebrow { font-size: max(.75rem, .993vw); letter-spacing: .19em; line-height: 1; }
	.bpa-cta__title { margin-top: 1.375vw; font-size: max(3rem, 4.9vw); line-height: .992; letter-spacing: -.01em; }
	.bpa-cta__body { margin-top: 2.11vw; font-size: max(1rem, 1.278vw); line-height: 1.66; }
	.bpa-cta .bpa-btn--cream { margin-top: 2.91vw; width: max(12rem, 14.17vw); height: max(3rem, 3.78vw); min-height: 0; padding-inline: max(1.5rem, 2.3vw) max(1rem, 1.6vw); font-size: max(.9375rem, 1.1vw); }
	.bpa-cta .bpa-btn--cream .bpa-icon { width: max(1.5rem, 1.9vw); height: max(1.5rem, 1.9vw); }
}
@media (max-width: 1023px) {
	.bpa-cta {
		--cta-h: 600px; --cta-zoom: 1.2567; --cta-top: -.085; --cta-vial-x: max(69%, 226px); /* 226px floor keeps the whole "Sample Report" heading in frame on 320px phones */
		height: var(--cta-h); align-items: flex-start;
	}
	/* Mockup p. 4 tints the whole photo; heavier behind the copy, light by the "Sample Report" heading (~65–72% down). */
	.bpa-cta__media::after { background: linear-gradient(180deg, rgba(40, 33, 25, .82) 0%, rgba(40, 33, 25, .76) 52%, rgba(40, 33, 25, .2) 62%, rgba(40, 33, 25, .08) 100%); }
	.bpa-cta__inner { padding: 49px 20px 0; max-width: 26rem; }
	.bpa-cta .bpa-eyebrow { font-size: .71875rem; letter-spacing: .19em; line-height: 1; }
	.bpa-cta__title { margin-top: 16px; font-size: clamp(2.25rem, 11.43vw, 2.7875rem); line-height: .987; }
	.bpa-cta__body { margin-top: 21px; font-size: 1rem; line-height: 25px; }
	.bpa-cta__body br { display: none; }
	.bpa-cta .bpa-btn--cream { margin-top: 26px; width: 180px; height: 50px; min-height: 0; padding-inline: 26px 19px; font-size: .96875rem; }
	.bpa-cta .bpa-btn--cream .bpa-icon { width: 24px; height: 24px; }
}

/* ---------- Researcher-entry acknowledgment gate (wireframe p. 2; self-attestation only) ---------- */
.bpa-gate {
	position: fixed; inset: 0; z-index: 1000;
	display: grid; overflow-y: auto; overscroll-behavior: contain;
	padding: clamp(1rem, 4vw, 2rem);
	background: rgba(84, 92, 88, .8);
	font-family: var(--bpa-sans); color: var(--bpa-ink);
}
.bpa-gate-ok .bpa-gate { display: none; }
html:not(.bpa-gate-ok) body.bpa-gate-open { overflow: hidden; }
/* The page behind is blurred. */
html:not(.bpa-gate-ok) body.bpa-gate-open > :not(.bpa-gate):not(script) { filter: blur(6px); }

.bpa-gate__dialog {
	/* Auto margins centre the dialog when it fits and let it scroll from the top, unclipped, when it does not. */
	margin: auto; width: min(35rem, 100%); padding: 2.5rem;
	background: #fff; border-radius: 8px; box-shadow: 0 24px 64px rgba(20, 32, 27, .28);
}
/* The container takes focus on open so screen readers announce it; it is not a control, so no ring. */
.bpa-gate__dialog:focus, .bpa-gate__dialog:focus-visible { outline: none; }
.bpa-gate { --bpa-gate-green: #1d5a52; }
.bpa-gate__logo { margin: 0 0 1.0625rem; line-height: 0; }
.bpa-gate__logo .bpa-wordmark { font-size: 1.6rem; }
.bpa-gate__logo-img { display: block; width: 13.5rem; max-width: 70%; height: auto; }
.bpa-gate__title { margin: 0 0 1.25rem; font: 700 1.72rem/1.2 var(--bpa-sans); letter-spacing: -.01em; color: var(--bpa-ink); }
.bpa-gate__intro { margin: 0 0 1.25rem; font-size: .9375rem; line-height: 1.6; color: #5a625e; }

.bpa-gate__statements { display: grid; gap: .875rem; margin: 0; padding: 1rem 1.125rem; border: 0; border-radius: 6px; background: #f4f4f2; }
.bpa-gate__item { display: grid; grid-template-columns: 1.25rem 1fr; gap: .75rem; align-items: start; }
.bpa-gate__item label { font-size: .875rem; line-height: 1.5; color: var(--bpa-ink); cursor: pointer; }
.bpa-gate__check {
	appearance: none; -webkit-appearance: none; display: grid; place-content: center;
	width: 1.25rem; height: 1.25rem; margin: .0625rem 0 0;
	border: 1.5px solid #4d5551; border-radius: 3px; background: #fff; cursor: pointer;
}
.bpa-gate__check::after {
	content: ""; width: .7rem; height: .4rem; margin-top: -.15rem;
	border: solid #fff; border-width: 0 0 2px 2px; transform: rotate(-45deg) scale(0);
}
.bpa-gate__check:checked { background: var(--bpa-gate-green); border-color: var(--bpa-gate-green); }
.bpa-gate__check:checked::after { transform: rotate(-45deg) scale(1); }
.bpa-gate__check:focus-visible { outline: 2px solid var(--bpa-gate-green); outline-offset: 2px; }
.bpa-gate__check[aria-invalid="true"] { border-color: #a3341f; box-shadow: 0 0 0 1px #a3341f; }

.bpa-gate__error { margin: .875rem 0 0; font-size: .875rem; line-height: 1.4; font-weight: 600; color: #a3341f; }
.bpa-gate__submit {
	display: flex; align-items: center; justify-content: center; width: 100%; min-height: 3rem; margin-top: 1.25rem; padding: .75rem 1rem;
	border: 0; border-radius: 4px; background: var(--bpa-gate-green); color: #fff;
	font: 600 1rem/1.2 var(--bpa-sans); text-decoration: none; cursor: pointer;
}
.bpa-gate__submit:hover { background: #164a43; }
.bpa-gate__submit:focus-visible { outline: 2px solid var(--bpa-gate-green); outline-offset: 3px; }
.bpa-gate__links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; margin: 1.125rem 0 0; font-size: .875rem; line-height: 1.4; }
.bpa-gate__links a { text-underline-offset: .2em; }
.bpa-gate__policy { color: var(--bpa-gate-green); }
.bpa-gate__leave { color: #4d5551; }
.bpa-gate__note { margin: 1.25rem 0 0; padding-top: .875rem; border-top: 1px solid #e6e3dd; font-size: .75rem; line-height: 1.45; color: #5a625e; }
.bpa-gate__note strong { font: 600 .6875rem/1 var(--bpa-mono); letter-spacing: .14em; text-transform: uppercase; color: #6b5a00; }

@media (max-width: 640px) {
	.bpa-gate { padding: 1rem; }
	.bpa-gate__dialog { padding: 1.5rem 1.25rem; }
	.bpa-gate__logo { margin-bottom: 1.25rem; }
	.bpa-gate__logo .bpa-wordmark { font-size: 1.25rem; }
	.bpa-gate__logo-img { width: 11rem; }
	.bpa-gate__title { margin-bottom: .875rem; font-size: 1.5rem; }
	.bpa-gate__intro { font-size: .9375rem; }
	.bpa-gate__statements { padding: .875rem; }
}
@media (prefers-reduced-motion: no-preference) {
	.bpa-gate__check::after { transition: transform .12s ease-out; }
}

/* ---------- Testing-process animation (replaces the three process photos) ----------
   Default styles are each scene's finished state (no JS / reduced motion). JS adds
   .bpa-steps--animate (start state) and .is-playing per step to run it once. */
.bpa-proc { display: grid; place-items: center; overflow: hidden; background: #ece8e1; box-shadow: inset 0 0 0 1px #e0d9ce; }
.bpa-proc__svg { width: 100%; height: 100%; overflow: visible; }
.bpa-proc__svg * { transform-box: fill-box; }
.bpa-proc__glass, .bpa-proc__axis, .bpa-proc__ground, .bpa-proc__tick, .bpa-proc__mark, .bpa-proc__lot rect {
	fill: none; stroke: var(--bpa-ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.bpa-proc__ground, .bpa-proc__tick { stroke: #b9b1a4; }
.bpa-proc__mark { stroke-width: 1.2; opacity: .5; }
.bpa-proc__solid { fill: var(--bpa-ink); }
.bpa-proc__liquid { fill: rgba(47, 74, 56, .22); }
.bpa-proc__fill { fill: rgba(47, 74, 56, .55); transform-origin: 50% 100%; }
.bpa-proc__drop { fill: var(--bpa-green); opacity: 0; }
.bpa-proc__vial { transform-origin: 100% 100%; }
.bpa-proc__trace { fill: none; stroke: var(--bpa-green); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.bpa-proc__line { stroke: var(--bpa-ink); stroke-width: 2.4; stroke-linecap: round; transform-origin: 0 50%; }
.bpa-proc__link { stroke: var(--bpa-green); stroke-width: 2; stroke-linecap: round; transform-origin: 0 50%; }
.bpa-proc__lot rect { stroke: var(--bpa-green); }
.bpa-proc__lot text { font: 500 13px var(--bpa-mono); letter-spacing: .12em; fill: var(--bpa-ink); }

/* Start state while waiting to play. */
.bpa-steps--animate .bpa-proc__fill { transform: scaleY(0); }
.bpa-steps--animate .bpa-proc__trace { stroke-dashoffset: 1; }
.bpa-steps--animate .bpa-proc__line, .bpa-steps--animate .bpa-proc__link { transform: scaleX(0); }
.bpa-steps--animate .bpa-proc__lot { opacity: .25; }
.bpa-steps--animate .bpa-proc__lot rect { stroke: var(--bpa-ink); }

/* 01 · vial tips a sample into the tube. */
.is-playing .bpa-proc__vial { animation: bpa-proc-tip 1.8s ease-in-out forwards; }
.is-playing .bpa-proc__drop { animation: bpa-proc-drop 1.8s ease-in-out forwards; }
.is-playing .bpa-proc__fill { animation: bpa-proc-fill .7s 1.25s ease-out forwards; }
/* 02 · chromatogram draws left to right. */
.is-playing .bpa-proc__trace { animation: bpa-proc-draw 1.7s .1s ease-out forwards; }
/* 03 · report lines are written, then linked to the lot tag. */
.is-playing .bpa-proc__line { animation: bpa-proc-grow .4s .15s ease-out forwards; }
.is-playing .bpa-proc__line:nth-of-type(2) { animation-delay: .45s; }
.is-playing .bpa-proc__line:nth-of-type(3) { animation-delay: .75s; }
.is-playing .bpa-proc__link { animation: bpa-proc-grow .4s 1.1s ease-out forwards; }
.is-playing .bpa-proc__lot { animation: bpa-proc-lot .45s 1.45s ease-out forwards; }
.is-playing .bpa-proc__lot rect { animation: bpa-proc-lot-edge .45s 1.45s ease-out forwards; }
/* Arrow hands off to the next step. */
.is-handoff .bpa-step__figure::after { animation: bpa-proc-handoff .7s ease-out; }

@keyframes bpa-proc-tip { 0%, 100% { transform: rotate(0); } 35%, 65% { transform: rotate(28deg); } }
@keyframes bpa-proc-drop {
	0%, 32% { opacity: 0; transform: translate(0, 0); }
	42% { opacity: 1; }
	68% { opacity: 1; transform: translate(36px, 18px); }
	92% { opacity: 1; transform: translate(36px, 46px); }
	100% { opacity: 0; transform: translate(36px, 50px); }
}
@keyframes bpa-proc-fill { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes bpa-proc-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes bpa-proc-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes bpa-proc-lot { from { opacity: .25; } to { opacity: 1; } }
@keyframes bpa-proc-lot-edge { from { stroke: var(--bpa-ink); } to { stroke: var(--bpa-green); } }
@keyframes bpa-proc-handoff { 0%, 100% { translate: 0 0; color: var(--bpa-ink); } 45% { translate: 6px 0; color: var(--bpa-green); } }

.bpa-process__controls { margin-top: 2.25rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; }
.bpa-process__controls[hidden] { display: none; }
.bpa-process__note { margin: 0; font: 400 .75rem/1.5 var(--bpa-mono); letter-spacing: .08em; color: var(--bpa-text); }
.bpa-process__note--static { margin-top: 2.25rem; }
.bpa-process__replay {
	display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .5rem 1rem;
	border: 1px solid var(--bpa-line); border-radius: var(--bpa-radius); background: transparent; color: var(--bpa-ink);
	font: 500 .875rem/1 var(--bpa-sans); cursor: pointer;
}
.bpa-process__replay:hover { border-color: var(--bpa-ink); }
.bpa-process__replay svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

@media (prefers-reduced-motion: reduce) {
	.bpa-proc *, .bpa-step__figure::after { animation: none !important; }
}

/* ---------- Hero ink sequence (assets/js/hero-ink.js) ----------
   html.bpa-hero-pending is set early only when motion is allowed; it hides copy without
   changing layout. No-JS / reduced motion never get it, so the hero is static. */
.bpa-hero__copy { position: relative; }
.bpa-hero-pending .bpa-hero__title, .bpa-hero__title.is-inking { color: transparent; }
.bpa-hero-pending .bpa-hero__reveal { opacity: 0; }
.bpa-hero-pending .bpa-hero__photo { transform: scale(1.07); }
.bpa-hero.is-inking .bpa-hero__photo { animation: bpa-hero-settle 2.5s cubic-bezier(.2, .7, .2, 1) both; }

.bpa-hero__ink { position: absolute; overflow: visible; pointer-events: none; }
.bpa-hero__ink text {
	fill: transparent; stroke: #f8f5ed; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round;
	stroke-dasharray: 420; stroke-dashoffset: 420; opacity: 0;
	animation: bpa-ink-letter .85s cubic-bezier(.35, .05, .3, 1) var(--bpa-ink-delay, 0s) forwards;
}
/* One shared timeline from t=0 (.is-inking): eyebrow + photo at once, letters from .15s,
   supporting copy entering while the letters draw; everything settles by ~2.6s. */
.bpa-hero.is-inking .bpa-hero__reveal { animation: bpa-hero-detail .8s cubic-bezier(.2, .7, .2, 1) both; }
.bpa-hero.is-inking .bpa-hero__rule { animation-name: bpa-hero-rule; animation-delay: .6s; }
.bpa-hero.is-inking .bpa-hero__lede { animation-delay: .9s; }
.bpa-hero.is-inking .bpa-hero__cta { animation-delay: 1.25s; }
.bpa-hero.is-inking .bpa-hero__badges { animation-delay: 1.55s; }
.bpa-hero.is-inking .bpa-hero__disclaimer { animation-delay: 1.8s; }

@keyframes bpa-ink-letter {
	0% { stroke-dashoffset: 420; fill: transparent; stroke-width: 1.25; opacity: 0; }
	5% { opacity: 1; }
	65% { stroke-dashoffset: 0; fill: transparent; stroke-width: 1.25; }
	100% { stroke-dashoffset: 0; fill: #f8f5ed; stroke-width: 0; opacity: 1; }
}
@keyframes bpa-hero-detail { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
@keyframes bpa-hero-rule { from { opacity: 1; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } }
@keyframes bpa-hero-settle { from { transform: scale(1.07); } to { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
	.bpa-hero *, .bpa-hero__ink text { animation: none !important; }
	.bpa-hero-pending .bpa-hero__title, .bpa-hero__title.is-inking { color: var(--bpa-hero-ink); }
	.bpa-hero-pending .bpa-hero__reveal { opacity: 1; }
	.bpa-hero-pending .bpa-hero__photo { transform: none; }
	.bpa-hero__ink { display: none; }
}

/* ---------- Featured cards: expanding reveal (after Ascend Bio Lab "Latest Products") ----------
   Purchase controls live in .bpa-card__actions under the price. Default (touch, tablets, mobile,
   reduced motion): the row is always visible. Only fine-pointer desktops collapse it: the card is
   clipped above the row and shifted down by the row's height; hover / keyboard focus un-clips and
   un-shifts it, so the card grows UPWARD from a fixed bottom edge and the row is revealed beneath
   the price. Transforms + clip-path only: the grid row never changes height, neighbours never move,
   and the photo is never covered, so the whole vial stays visible. No quick-view / wishlist:
   only existing actions (sample: "Sample only" + disabled button; real product: stock + its link). */
.bpa-featured .bpa-card__actions { grid-area: actions; display: flex; align-items: center; justify-content: flex-end; gap: .75rem; }
.bpa-featured .bpa-card__body { grid-template-areas: "cat cat" "name name" "size size" "lot lot" "price actions"; }
@media (max-width: 640px) {
	.bpa-featured .bpa-card__body { grid-template-areas: "cat price" "name size" "blurb blurb" "lot lot" "actions actions"; }
	.bpa-featured .bpa-card__actions { justify-content: space-between; }
}

/* (The upward-growing card that reserved a blank action row below each card was replaced 2026-10-13: the
   same hover/focus reveal now happens inside the price row. See "Featured belt" at the end.) */


/* ---------- Homepage: Shop by category (after Elyria Bio's tile row) ---------- */
.bpa-cats { padding-top: clamp(2.5rem, 5vw, 3.75rem); }
.bpa-cats__title { margin: 0 0 1.25rem; }
.bpa-cats__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; }
/* Whole tile is the link; symbol, name and count share one centred column. */
.bpa-cat-tile {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem;
	height: 100%; padding: 1.35rem 1rem 1.2rem; text-align: center;
	border: 1px solid #e3ddd3; border-radius: var(--bpa-radius); background: var(--bpa-cream-2);
	color: var(--bpa-ink); text-decoration: none;
	transition: border-color .25s ease, transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s ease;
}
.bpa-cat-tile__icon {
	display: grid; place-items: center; width: 2.5rem; height: 2.5rem; margin-bottom: .45rem;
	border-radius: 50%; background: #ecebe4; color: var(--bpa-green); transition: background-color .25s ease, color .25s ease;
}
.bpa-cat-tile__icon .bpa-icon { width: 1.25rem; height: 1.25rem; stroke-width: 1.5; }
.bpa-cat-tile__name { font: 500 1.25rem/1.2 var(--bpa-serif); }
.bpa-cat-tile__count { font: 400 .6875rem/1.3 var(--bpa-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bpa-text); }
.bpa-cats__item--all .bpa-cat-tile { background: transparent; }

/* Cue: fine-pointer hover and keyboard focus match; touch gets no sticky hover. */
.bpa-cat-tile:focus-visible { outline-offset: 3px; border-color: var(--bpa-ink); }
.bpa-cat-tile:focus-visible .bpa-cat-tile__icon { background: var(--bpa-green); color: var(--bpa-white); }
.bpa-cat-tile:active { border-color: var(--bpa-ink); }
@media (hover: hover) and (pointer: fine) {
	.bpa-cat-tile:hover { border-color: var(--bpa-ink); transform: translateY(-2px); box-shadow: 0 10px 22px -16px rgba(20, 32, 27, .45); }
	.bpa-cat-tile:hover .bpa-cat-tile__icon { background: var(--bpa-green); color: var(--bpa-white); }
}
@media (max-width: 1100px) {
	.bpa-cats__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.bpa-cats__item--all { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
	.bpa-cats__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
	.bpa-cat-tile { padding: 1.1rem .75rem 1rem; }
	.bpa-cat-tile__name { font-size: 1.125rem; }
}
@media (prefers-reduced-motion: reduce) {
	.bpa-cat-tile, .bpa-cat-tile__icon { transition: none; }
	.bpa-cat-tile:hover { transform: none; }
}

/* ---------- Homepage: Why choose BPA Bioscience? (replaces "At a glance" placeholders) ---------- */
.bpa-why { padding-block: clamp(3.5rem, 7vw, 6rem); background: var(--bpa-cream-2); border-block: 1px solid #ebe6dd; }
.bpa-why__head { max-width: 40rem; margin: 0 auto clamp(2.5rem, 5vw, 3.75rem); text-align: center; }
.bpa-why__head .bpa-eyebrow { justify-content: center; }
.bpa-why__head .bpa-eyebrow::before { display: none; }
.bpa-why__title { margin-top: .5rem; font-size: clamp(2.25rem, 4.2vw, 3.5rem); line-height: 1.05; }
.bpa-why__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bpa-why__item { display: flex; flex-direction: column; align-items: center; padding: .5rem clamp(1.5rem, 3.5vw, 3rem); text-align: center; }
.bpa-why__item + .bpa-why__item { border-left: 1px solid var(--bpa-line); }
.bpa-why__symbol {
	display: grid; place-items: center; width: 6.5rem; height: 6.5rem; margin-bottom: 1.75rem;
	border-radius: 50%; background: #e9ece4; box-shadow: inset 0 0 0 1px rgba(47, 74, 56, .12);
}
.bpa-why__symbol svg { width: 3.25rem; height: 3.25rem; fill: none; stroke: var(--bpa-green); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.bpa-why__item-title { margin-bottom: .9rem; font-size: clamp(1.5rem, 2.1vw, 1.875rem); }
.bpa-why__body { max-width: 21rem; font-size: 1.0625rem; line-height: 1.65; color: var(--bpa-text); }
.bpa-why__note { margin: clamp(2.25rem, 4vw, 3rem) 0 0; text-align: center; font: 400 .75rem/1.5 var(--bpa-mono); letter-spacing: .08em; color: var(--bpa-text); }
@media (max-width: 900px) {
	.bpa-why__list { grid-template-columns: 1fr; gap: 0; }
	.bpa-why__item { padding: 2.25rem 0; }
	.bpa-why__item + .bpa-why__item { border-left: 0; border-top: 1px solid var(--bpa-line); }
	.bpa-why__item:first-child { padding-top: 0; }
	.bpa-why__symbol { width: 5.5rem; height: 5.5rem; margin-bottom: 1.25rem; }
	.bpa-why__symbol svg { width: 2.75rem; height: 2.75rem; }
	.bpa-why__body { max-width: 30rem; }
}

/* ---------- Product page draft sections (LOCAL DRAFT; organisation after Elyria, styling per mockup) ---------- */
.bpa-gallery__concept { margin: 0; }
.bpa-gallery__concept img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; background: var(--bpa-panel); }
.bpa-gallery__concept figcaption { margin-top: .6rem; font: 400 .75rem/1.4 var(--bpa-mono); letter-spacing: .06em; color: var(--bpa-text); }
.bpa-product__price-note { margin: -.5rem 0 1.25rem; }
.bpa-product__identity { margin-top: .75rem; padding-left: .9rem; border-left: 2px solid var(--bpa-line); font-size: .9375rem; line-height: 1.55; color: var(--bpa-text); }

.bpa-status { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--bpa-line); }
.bpa-status__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: 1.05rem 0; border-bottom: 1px solid var(--bpa-line); }
.bpa-status dt { display: flex; align-items: center; gap: .85rem; font: 500 1.125rem/1.3 var(--bpa-serif); color: var(--bpa-ink); }
.bpa-status dt .bpa-icon { width: 1.35rem; height: 1.35rem; color: var(--bpa-green); }
.bpa-status dd { margin: 0; font: 400 .75rem/1.4 var(--bpa-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--bpa-text); text-align: right; }

.bpa-product__section { padding-block: 3rem; border-bottom: 1px solid var(--bpa-line); }
.bpa-specs { max-width: 52rem; }
.bpa-specs td.is-pending { font-family: var(--bpa-sans); font-size: .875rem; color: var(--bpa-muted); font-style: italic; }

.bpa-empty-state { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.25rem; max-width: 52rem; padding: 1.75rem; border: 1px dashed #cfc7b9; border-radius: 4px; background: var(--bpa-cream-2); }
.bpa-empty-state > .bpa-icon { width: 2rem; height: 2rem; color: var(--bpa-green); }
.bpa-empty-state__title { margin-bottom: .4rem; font: 500 1.25rem/1.3 var(--bpa-serif); color: var(--bpa-ink); }
.bpa-empty-state p { max-width: 40rem; margin-bottom: .9rem; line-height: 1.6; color: var(--bpa-text); }

.bpa-lit__caution { max-width: 46rem; margin-bottom: 1.5rem; padding: .9rem 1.1rem; border-left: 3px solid var(--bpa-green); background: #eef0ea; font-size: .9375rem; line-height: 1.6; color: #2c3430; }
.bpa-lit { list-style: none; max-width: 52rem; }
.bpa-lit .bpa-lit__item { display: block; padding: 1.25rem 1.4rem; }
.bpa-lit__citation { margin-bottom: .75rem; font: 500 1.125rem/1.45 var(--bpa-serif); color: var(--bpa-ink); }
.bpa-lit__meta { display: grid; gap: .45rem; margin: 0 0 .85rem; }
.bpa-lit__meta div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; font-size: .9375rem; line-height: 1.55; }
.bpa-lit__meta dt { font: 400 .75rem/1.9 var(--bpa-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--bpa-text); }
.bpa-lit__meta dd { margin: 0; color: #3a413d; }
.bpa-lit__links { display: flex; flex-wrap: wrap; gap: 1.25rem; font-size: .9375rem; }
.bpa-lit__links a { color: var(--bpa-green); text-underline-offset: .2em; }
.bpa-lit__status { margin-top: 1.25rem; max-width: 52rem; }

.bpa-faq { max-width: 52rem; border-top: 1px solid var(--bpa-line); }
.bpa-faq__item { border-bottom: 1px solid var(--bpa-line); }
.bpa-faq__item summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem 0; font: 500 1.1875rem/1.35 var(--bpa-serif); color: var(--bpa-ink); cursor: pointer; list-style: none; }
.bpa-faq__item summary::-webkit-details-marker { display: none; }
.bpa-faq__icon { width: 1.1rem; height: 1.1rem; flex: none; transition: transform .2s ease; }
.bpa-faq__item[open] .bpa-faq__icon { transform: rotate(45deg); }
.bpa-faq__item p { max-width: 44rem; padding-bottom: 1.25rem; line-height: 1.65; color: var(--bpa-text); }
@media (max-width: 640px) {
	.bpa-product__section { padding-block: 2.25rem; }
	.bpa-status dt { font-size: 1rem; }
	.bpa-status__row { grid-template-columns: 1fr; gap: .3rem; }
	.bpa-status dd { text-align: left; }
	.bpa-empty-state { grid-template-columns: 1fr; padding: 1.25rem; }
	.bpa-lit__meta div { grid-template-columns: 1fr; gap: .1rem; }
	.bpa-faq__item summary { font-size: 1.0625rem; }
}
@media (prefers-reduced-motion: reduce) { .bpa-faq__icon { transition: none; } }

/* ---------- Quick view (inc/quick-view.php) ---------- */
.bpa-qv-btn { display: none; }
.bpa-qv-ready .bpa-qv-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
	border: 1px solid var(--bpa-line); border-radius: var(--bpa-radius); background: var(--bpa-white); color: var(--bpa-ink);
	font: 500 .8125rem/1 var(--bpa-sans); cursor: pointer; transition: border-color .2s ease, background-color .2s ease;
}
.bpa-qv-btn .bpa-icon { width: 1rem; height: 1rem; }
.bpa-qv-btn:hover { border-color: var(--bpa-ink); }
.bpa-qv-btn:focus-visible { outline: 2px solid var(--bpa-green); outline-offset: 2px; }
/* Featured + catalog: one icon-only magnifier in the image's top-right corner. The visible
   "Quick view" text is screen-reader only; the accessible name stays "Quick view: <product>". */
.bpa-card { position: relative; }
.bpa-card__media { position: relative; }
.bpa-qv-ready .bpa-qv-btn--overlay {
	position: absolute; top: .75rem; right: .75rem; z-index: 2;
	width: 2.5rem; height: 2.5rem; padding: 0; border-color: rgba(20, 32, 27, .14); border-radius: 50%;
	background: rgba(255, 255, 255, .94); box-shadow: 0 4px 12px -6px rgba(20, 32, 27, .45);
}
.bpa-qv-btn--overlay .bpa-icon { width: 1.125rem; height: 1.125rem; }
.bpa-qv-btn--overlay .bpa-qv-btn__label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.bpa-qv-ready .bpa-qv-btn--overlay:hover { border-color: var(--bpa-ink); background: var(--bpa-white); }
.bpa-qv-ready .bpa-qv-btn--overlay:focus-visible { outline: 2px solid var(--bpa-green); outline-offset: 2px; }
@media (max-width: 640px) {
	/* 44px tap target on phones. */
	.bpa-qv-ready .bpa-qv-btn--overlay { top: .6rem; right: .6rem; width: 2.75rem; height: 2.75rem; }
}
/* Featured purchase row: only the (disabled) button remains, aligned right. */
.bpa-featured .bpa-card--sample .bpa-card__actions { justify-content: flex-end; }

.bpa-qv { width: min(56rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; border: 0; border-radius: 8px; background: var(--bpa-cream-2); color: var(--bpa-ink); box-shadow: 0 30px 80px rgba(20, 32, 27, .35); }
.bpa-qv::backdrop { background: rgba(20, 32, 27, .55); }
/* The dialog container is not a control (focus goes to Close); no ring on the panel itself. */
.bpa-qv:focus, .bpa-qv:focus-visible { outline: none; }
.bpa-qv__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.bpa-qv__close { position: absolute; top: .75rem; right: .75rem; z-index: 1; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--bpa-ink); cursor: pointer; }
.bpa-qv__close:focus-visible { outline: 2px solid var(--bpa-green); outline-offset: 2px; }
.bpa-qv__media { display: grid; place-items: center; min-height: 16rem; background: var(--bpa-panel); }
.bpa-qv__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bpa-qv__placeholder { font: 400 .75rem/1.4 var(--bpa-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bpa-text); }
.bpa-qv__body { padding: 2rem 2rem 1.75rem; overflow-y: auto; }
.bpa-qv__cat { font: 400 .75rem/1.3 var(--bpa-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--bpa-text); }
.bpa-qv__title { margin: .35rem 3rem .75rem 0; font-size: clamp(1.75rem, 3vw, 2.25rem); line-height: 1.1; }
.bpa-qv__badge { display: inline-block; margin-bottom: 1rem; padding: .3rem .7rem; border-radius: 999px; background: #e9eae5; font-size: .8125rem; color: var(--bpa-text); }
.bpa-qv__price { margin-bottom: 1.25rem; font: 600 1.5rem/1.2 var(--bpa-serif); }
.bpa-qv__price-note { display: block; margin-top: .25rem; font: 400 .75rem/1.4 var(--bpa-mono); letter-spacing: .04em; color: var(--bpa-text); }
.bpa-qv__facts { display: grid; margin: 0 0 1.5rem; border-top: 1px solid var(--bpa-line); }
.bpa-qv__facts div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: .75rem; padding: .7rem 0; border-bottom: 1px solid var(--bpa-line); font-size: .875rem; line-height: 1.5; }
.bpa-qv__facts dt { font: 400 .6875rem/1.8 var(--bpa-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--bpa-text); }
.bpa-qv__facts dd { margin: 0; color: #2c3430; }
.bpa-qv__link { width: 100%; justify-content: space-between; }
.bpa-qv__note { margin-top: .9rem; font-size: .8125rem; color: var(--bpa-text); }
@media (max-width: 640px) {
	.bpa-qv { width: 100vw; max-width: 100vw; max-height: 92dvh; margin: auto 0 0; border-radius: 12px 12px 0 0; }
	.bpa-qv__inner { grid-template-columns: 1fr; }
	.bpa-qv__media { min-height: 0; aspect-ratio: 4 / 3; }
	.bpa-qv__body { padding: 1.25rem 1.25rem 1.5rem; }
	.bpa-qv__facts div { grid-template-columns: 1fr; gap: .15rem; }
}

/* ---------- LOCAL DRAFT pages: support, policies, lot lookup, checkout prototypes ---------- */
.bpa-dp { padding-block: 1.75rem 5rem; min-height: 60vh; }
.bpa-dp__head { max-width: 46rem; margin: 1.25rem 0 2rem; }
.bpa-dp__title { margin: .5rem 0 1rem; font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1.02; }
.bpa-dp__intro { font: 400 1.25rem/1.6 var(--bpa-serif); color: #2c3430; }
.bpa-dp__note { max-width: 52rem; margin-bottom: 2rem; }
.bpa-dp__section { max-width: 52rem; padding-block: 2rem; border-top: 1px solid var(--bpa-line); }
.bpa-dp__h2 { margin-bottom: 1.1rem; font: 500 clamp(1.5rem, 2.4vw, 2rem)/1.15 var(--bpa-serif); color: var(--bpa-ink); }
.bpa-dp__p { max-width: 44rem; margin-bottom: 1rem; font-size: 1.0625rem; line-height: 1.65; color: var(--bpa-text); }
.bpa-dp__list { display: grid; gap: .6rem; padding-left: 1.2rem; list-style: disc; font-size: 1.0625rem; line-height: 1.55; color: #2c3430; }
.bpa-dp__links { display: grid; gap: .8rem; }
.bpa-dp__aside { margin-top: 1.25rem; }
.bpa-dp__fields { display: grid; margin: 0; border-top: 1px solid var(--bpa-line); }
.bpa-dp__fields > div { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 1.25rem; padding: .85rem 0; border-bottom: 1px solid var(--bpa-line); font-size: .9375rem; line-height: 1.55; }
.bpa-dp__fields dt { font-weight: 500; color: var(--bpa-ink); overflow-wrap: anywhere; }
.bpa-dp__fields dd { margin: 0; color: #2c3430; }
/* C2, AA: darker muted grey-green for pending values (4.77:1 on #f5f1ea, 5.00:1 on #f9f7f3). */
.bpa-dp__fields dd.is-pending { font-style: italic; color: #666c68; }
.bpa-dp__steps { display: grid; gap: 1.5rem; counter-reset: bpa-step; }
.bpa-dp__steps li { position: relative; padding-left: 3.25rem; counter-increment: bpa-step; }
.bpa-dp__steps li::before { content: counter(bpa-step, decimal-leading-zero); position: absolute; left: 0; top: .1rem; font: 400 .875rem/1.6 var(--bpa-mono); letter-spacing: .1em; color: var(--bpa-green); }
.bpa-dp__steps h3 { margin-bottom: .35rem; font-size: 1.375rem; }
.bpa-dp__steps p { line-height: 1.6; color: var(--bpa-text); }
.bpa-dp__toggle { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.5rem; }
.bpa-dp__toggle a { padding: .5rem 1rem; border: 1px solid var(--bpa-line); border-radius: 999px; color: var(--bpa-ink); text-decoration: none; font-size: .9375rem; }
.bpa-dp__toggle a[aria-current] { background: var(--bpa-ink-2); border-color: var(--bpa-ink-2); color: var(--bpa-white); }

.bpa-lookup { display: grid; gap: .6rem; max-width: 40rem; margin-bottom: 1.5rem; }
.bpa-lookup__label, .bpa-form-grid label { font-weight: 500; font-size: .9375rem; color: var(--bpa-ink); }
.bpa-lookup__row { display: flex; gap: .6rem; }
.bpa-lookup input, .bpa-form-grid input, .bpa-form-grid select, .bpa-form-grid textarea {
	width: 100%; min-height: 3rem; padding: .7rem .9rem; border: 1px solid #cfc7b9; border-radius: var(--bpa-radius);
	background: var(--bpa-white); font: inherit; color: var(--bpa-ink);
}
.bpa-lookup__row input { flex: 1; font-family: var(--bpa-mono); letter-spacing: .04em; }
.bpa-lookup input[aria-invalid="true"], .bpa-form-grid input[aria-invalid="true"] { border-color: #a3341f; box-shadow: 0 0 0 1px #a3341f; }
.bpa-lookup input:disabled, .bpa-form-grid :disabled { background: #efece6; color: var(--bpa-muted); cursor: not-allowed; }
.bpa-lookup__help { font-size: .875rem; line-height: 1.5; color: var(--bpa-text); }
.bpa-lookup__error, .bpa-field-error, .bpa-checkoutp__error { font-size: .875rem; font-weight: 600; color: #a3341f; }
.bpa-lookup__ok { margin-top: 1rem; font-weight: 600; color: var(--bpa-green); }
.bpa-lookup__idle { color: var(--bpa-text); font-size: .9375rem; }
.bpa-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; margin-bottom: 1rem; }
.bpa-form-grid p { display: grid; gap: .4rem; }
.bpa-form-grid__full { grid-column: 1 / -1; }
.bpa-check-row { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start; line-height: 1.5; }
.bpa-check-row input { width: 1.2rem; height: 1.2rem; margin-top: .15rem; accent-color: var(--bpa-green); }

.bpa-coa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 2rem; }
.bpa-coa__status { display: inline-block; margin-bottom: 1rem; padding: .35rem .8rem; border: 1px dashed #b9b1a4; border-radius: 999px; font: 400 .75rem/1.4 var(--bpa-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--bpa-text); }
.bpa-coa__doc { display: grid; place-content: center; justify-items: center; gap: .75rem; min-height: 22rem; border: 1px dashed #cfc7b9; border-radius: 4px; background: repeating-linear-gradient(135deg, #f1ede6 0 10px, #ebe6de 10px 20px); color: var(--bpa-text); text-align: center; font-size: .9375rem; }
.bpa-coa__doc .bpa-icon { width: 2.5rem; height: 2.5rem; }

.bpa-drafts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; max-width: 64rem; }
.bpa-dp__section--drafts_index { max-width: 64rem; }
.bpa-drafts__item { padding: 1.4rem 1.5rem; border: 1px solid #e3ddd3; border-radius: 4px; background: var(--bpa-cream-2); }
.bpa-drafts__name { margin-bottom: .5rem; font-size: 1.625rem; }
.bpa-drafts__name a { color: var(--bpa-ink); text-underline-offset: .18em; }
.bpa-drafts__identity { margin-bottom: .85rem; font-size: .9375rem; line-height: 1.55; color: var(--bpa-text); }
.bpa-drafts__meta { display: flex; flex-wrap: wrap; gap: .4rem; }
.bpa-drafts__meta span { padding: .25rem .6rem; border-radius: 999px; background: #e9eae5; font: 400 .6875rem/1.4 var(--bpa-mono); letter-spacing: .04em; color: var(--bpa-text); }
.bpa-research th a { color: var(--bpa-ink); font-weight: 500; }
.bpa-research td.is-pending { font-family: var(--bpa-sans); font-style: italic; color: var(--bpa-muted); }
.bpa-research thead th { font: 400 .75rem/1.4 var(--bpa-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--bpa-text); }

.bpa-cartp { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
.bpa-dp__section--cart, .bpa-dp__section--checkout { max-width: 64rem; }
.bpa-cartp__table { width: 100%; border-collapse: collapse; }
.bpa-cartp__table th, .bpa-cartp__table td { padding: 1rem .5rem 1rem 0; border-bottom: 1px solid var(--bpa-line); text-align: left; vertical-align: top; }
.bpa-cartp__table thead th { font: 400 .75rem/1.4 var(--bpa-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--bpa-text); }
.bpa-cartp__table tbody th { font: 500 1.125rem/1.35 var(--bpa-serif); }
.bpa-cartp__sub { display: block; margin-top: .2rem; font: 400 .8125rem/1.4 var(--bpa-sans); color: var(--bpa-text); }
.bpa-cartp__table input { width: 4.5rem; min-height: 2.5rem; padding: .4rem; border: 1px solid #cfc7b9; background: #efece6; }
.bpa-cartp__summary { padding: 1.5rem; border: 1px solid #e3ddd3; background: var(--bpa-cream-2); }
.bpa-cartp__summary .bpa-dp__fields > div { grid-template-columns: minmax(0, 1fr) auto; }
.bpa-cartp__go { width: 100%; margin-top: 1.25rem; }
.bpa-checkoutp { display: grid; gap: 1.5rem; }
.bpa-checkoutp fieldset { margin: 0; padding: 0; border: 0; }
.bpa-checkoutp legend { padding: 0; }
.bpa-checkoutp__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
@media (max-width: 900px) {
	.bpa-coa, .bpa-cartp { grid-template-columns: 1fr; }
	.bpa-drafts { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.bpa-dp__fields > div { grid-template-columns: 1fr; gap: .2rem; }
	.bpa-form-grid { grid-template-columns: 1fr; }
	.bpa-lookup__row { flex-direction: column; }
	.bpa-coa__doc { min-height: 14rem; }
	.bpa-cartp__table thead { display: none; }
}

/* BPC-157 research content (product page): optional per-product fields. */
.bpa-overview__body--note { font-size: 1.0625rem; color: var(--bpa-text); }
.bpa-lit__intro { max-width: 46rem; margin: -.5rem 0 1.5rem; font-size: .9375rem; line-height: 1.6; color: var(--bpa-text); }
.bpa-lit__heading { margin-bottom: .4rem; font: 400 .75rem/1.4 var(--bpa-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bpa-green); }
.bpa-lit__review dd { font-style: italic; color: var(--bpa-muted); }

/* Contact panel (bottom right; local interaction demo). Hidden until main.js reveals it after the
   researcher gate; tucked while a dialog/drawer is open or the footer is in view. Reduced motion: no slide. */
.bpa-contact {
	position: fixed; z-index: 40;
	right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom));
	display: flex; flex-direction: column-reverse; align-items: flex-end; gap: .625rem;
	max-width: calc(100vw - 2rem);
}
.bpa-contact__toggle {
	display: inline-flex; align-items: center; gap: .55rem; flex: none;
	min-height: 52px; padding: 0 1.35rem 0 1.1rem;
	border: 0; border-radius: 999px; background: var(--bpa-green); color: var(--bpa-cream);
	font: 500 .9375rem/1 var(--bpa-sans); white-space: nowrap; cursor: pointer;
	box-shadow: 0 4px 14px rgba(20, 32, 27, .2), 0 1px 3px rgba(20, 32, 27, .12);
	transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.bpa-contact__toggle:hover { background: #263e2f; box-shadow: 0 8px 22px rgba(20, 32, 27, .24), 0 2px 4px rgba(20, 32, 27, .12); transform: translateY(-1px); }
.bpa-contact.is-open .bpa-contact__toggle { background: var(--bpa-ink); }
.bpa-contact__toggle:focus-visible { outline: 2px solid var(--bpa-ink); outline-offset: 3px; }
.bpa-contact__icons { display: grid; place-items: center; flex: none; width: 24px; height: 24px; }
.bpa-contact__icon { grid-area: 1 / 1; width: 24px; height: 24px; transition: opacity .2s ease, transform .2s ease; }
.bpa-contact__icon--close { width: 20px; height: 20px; opacity: 0; transform: rotate(-45deg) scale(.8); }
.bpa-contact__toggle[aria-expanded="true"] .bpa-contact__icon--open { opacity: 0; transform: rotate(45deg) scale(.8); }
.bpa-contact__toggle[aria-expanded="true"] .bpa-contact__icon--close { opacity: 1; transform: none; }
@media (max-width: 640px) {
	.bpa-contact__toggle { min-height: 48px; padding: 0 1.1rem 0 .95rem; gap: .45rem; font-size: .875rem; }
	.bpa-contact__icons, .bpa-contact__icon { width: 22px; height: 22px; }
	.bpa-contact__icon--close { width: 18px; height: 18px; }
}
.bpa-contact__panel {
	width: 20rem; max-width: 100%; padding: 1rem 1rem 1.1rem;
	border: 1px solid var(--bpa-line); border-radius: var(--bpa-radius); background: var(--bpa-white);
	box-shadow: 0 12px 32px rgba(20, 32, 27, .16);
}
.bpa-contact__panel[hidden] { display: none; }
.bpa-contact__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.bpa-contact__title { margin: 0; font: 400 1.25rem/1.2 var(--bpa-serif); color: var(--bpa-ink); }
.bpa-contact__close {
	display: grid; place-items: center; width: 44px; height: 44px; margin: -.6rem -.6rem -.6rem 0;
	border: 0; background: none; color: var(--bpa-ink); cursor: pointer;
}
.bpa-contact__close .bpa-icon { width: 1.125rem; height: 1.125rem; }
.bpa-contact__options { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.bpa-contact__option {
	display: grid; gap: .3rem; min-height: 44px; padding: .75rem .85rem;
	border: 1px solid var(--bpa-line); border-radius: var(--bpa-radius); color: var(--bpa-ink); text-decoration: none;
}
a.bpa-contact__option:hover { border-color: var(--bpa-green); background: var(--bpa-cream); }
.bpa-contact__option.is-pending { border-style: dashed; background: var(--bpa-cream); color: var(--bpa-muted); }
.bpa-contact__label { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font: 500 .9375rem/1.3 var(--bpa-sans); }
.bpa-contact__desc { font-size: .8125rem; line-height: 1.45; color: var(--bpa-text); }
.bpa-pending-tag { padding: .15rem .4rem; border: 1px dashed currentColor; font: 400 .625rem/1 var(--bpa-mono); letter-spacing: .12em; text-transform: uppercase; }
.js .bpa-contact { visibility: hidden; opacity: 0; transform: translateY(16px); }
.js .bpa-contact.is-shown { visibility: visible; opacity: 1; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1), visibility 0s; }
.js .bpa-contact.is-shown.is-tucked { visibility: hidden; opacity: 0; transform: translateY(16px); transition: opacity .25s ease, transform .25s ease, visibility 0s .25s; }
@media (prefers-reduced-motion: reduce) {
	.js .bpa-contact, .js .bpa-contact.is-shown, .js .bpa-contact.is-shown.is-tucked { transform: none; transition: none; }
	.bpa-contact__toggle, .bpa-contact__toggle:hover, .bpa-contact__icon { transition: none; transform: none; }
	.bpa-contact__toggle[aria-expanded="true"] .bpa-contact__icon--open { transform: none; }
}
@media print { .bpa-contact { display: none; } }

/* Homepage FAQ (#faq, after the closing banner, before the footer): centred heading, one narrow
   column of question rows with fine dividers and a pale round chevron control. scroll-margin
   clears the sticky header when the nav "FAQ" link lands here. */
.bpa-home-faq { padding-block: clamp(3.5rem, 7vw, 6.5rem); background: var(--bpa-cream); scroll-margin-top: 89px; }
.bpa-home-faq:focus { outline: none; }
.bpa-home-faq__head { max-width: 40rem; margin: 0 auto clamp(2rem, 4vw, 3rem); text-align: center; }
.bpa-home-faq__title { margin: 0 0 .875rem; font: 400 clamp(2rem, 3.4vw, 2.75rem)/1.1 var(--bpa-serif); color: var(--bpa-ink); }
.bpa-home-faq__intro { margin: 0; line-height: 1.6; color: var(--bpa-text); text-wrap: balance; }
.bpa-home-faq__list { max-width: 48rem; margin-inline: auto; border-top: 1px solid var(--bpa-line); }
.bpa-home-faq__item { border-bottom: 1px solid var(--bpa-line); }
.bpa-home-faq__item summary {
	display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
	min-height: 44px; padding: 1.5rem 0; cursor: pointer; list-style: none;
}
.bpa-home-faq__item summary::-webkit-details-marker { display: none; }
.bpa-home-faq__q { font: 600 1.0625rem/1.4 var(--bpa-sans); color: var(--bpa-ink); transition: color .2s ease; }
.bpa-home-faq__control {
	display: grid; place-items: center; flex: none; width: 36px; height: 36px;
	border-radius: 50%; background: var(--bpa-chip); color: var(--bpa-green);
	transition: background-color .2s ease, transform .25s ease;
}
.bpa-home-faq__control .bpa-icon { width: 18px; height: 18px; }
.bpa-home-faq__item summary:hover .bpa-home-faq__q { color: var(--bpa-green); }
.bpa-home-faq__item summary:hover .bpa-home-faq__control { background: var(--bpa-panel); }
.bpa-home-faq__item summary:focus-visible { outline: 2px solid var(--bpa-green); outline-offset: 4px; }
.bpa-home-faq__item[open] .bpa-home-faq__control { transform: rotate(180deg); background: var(--bpa-green); color: var(--bpa-cream); }
.bpa-home-faq__a { max-width: 42rem; margin: -.5rem 0 0; padding: 0 3.5rem 1.5rem 0; line-height: 1.65; color: var(--bpa-text); }
.bpa-home-faq__a a { color: var(--bpa-green); text-decoration: underline; text-underline-offset: .2em; }
.bpa-home-faq__all { margin: clamp(1.75rem, 3vw, 2.5rem) 0 0; text-align: center; }
@media (max-width: 640px) {
	.bpa-home-faq { scroll-margin-top: 65px; }
	.bpa-home-faq__item summary { gap: 1rem; padding: 1.15rem 0; }
	.bpa-home-faq__q { font-size: 1rem; }
	.bpa-home-faq__control { width: 32px; height: 32px; }
	.bpa-home-faq__a { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.bpa-home-faq__q, .bpa-home-faq__control { transition: none; }
}

/* Research-updates signup (homepage, below the closing banner). LOCAL PREVIEW: not connected.
   Wide rounded card: copy left, pill field + button right; stacks on phones. Once-on-enter reveal
   (main.js adds .is-revealed); static with reduced motion or without JS. */
.bpa-signup { padding-block: clamp(3rem, 6vw, 5rem); background: var(--bpa-cream); }
.bpa-signup__card {
	position: relative; overflow: hidden;
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center;
	padding: clamp(1.75rem, 4vw, 3.25rem) clamp(1.5rem, 4.5vw, 3.75rem);
	border: 1px solid var(--bpa-line); border-radius: 24px; background: var(--bpa-cream-2);
}
/* Accent: a thin green rule along the card's top edge. */
.bpa-signup__card::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 3px; background: var(--bpa-green); transform-origin: left; }
.bpa-signup__kicker { margin: 0 0 .6rem; font: 500 .75rem/1.3 var(--bpa-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bpa-green); }
.bpa-signup__title { margin: 0 0 .6rem; font: 400 clamp(1.75rem, 2.8vw, 2.375rem)/1.12 var(--bpa-serif); color: var(--bpa-ink); }
.bpa-signup__body { max-width: 30rem; margin: 0; line-height: 1.6; color: var(--bpa-text); }
.bpa-signup__fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.bpa-signup__row {
	display: flex; align-items: center; gap: .375rem; padding: .375rem;
	border: 1px solid var(--bpa-line); border-radius: 999px; background: var(--bpa-white);
	transition: border-color .2s ease, box-shadow .2s ease;
}
.bpa-signup__row:focus-within { border-color: var(--bpa-green); box-shadow: 0 0 0 3px rgba(47, 74, 56, .18); }
.bpa-signup__input {
	flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 1rem;
	border: 0; border-radius: 999px; background: transparent; color: var(--bpa-ink); font: 400 1rem/1.2 var(--bpa-sans);
}
.bpa-signup__input::placeholder { color: var(--bpa-muted); }
.bpa-signup__input:focus { outline: none; }
.bpa-signup__input:focus-visible { outline: none; }
.bpa-signup__input[aria-invalid="true"] { color: #8a2f22; }
.bpa-signup__button {
	flex: none; min-height: 44px; padding: 0 1.5rem;
	border: 0; border-radius: 999px; background: var(--bpa-green); color: var(--bpa-cream);
	font: 500 .9375rem/1 var(--bpa-sans); white-space: nowrap; cursor: pointer; transition: background-color .2s ease;
}
.bpa-signup__button:hover { background: var(--bpa-ink); }
.bpa-signup__button:focus-visible { outline: 2px solid var(--bpa-ink); outline-offset: 3px; }
.bpa-signup__fieldset:disabled .bpa-signup__row { opacity: .6; }
.bpa-signup__fieldset:disabled .bpa-signup__button { cursor: not-allowed; }
.bpa-signup__note { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .85rem 0 0 .25rem; font-size: .8125rem; color: var(--bpa-text); }
.bpa-signup__status { min-height: 1.4em; margin: .5rem 0 0 .25rem; font-size: .875rem; line-height: 1.45; color: var(--bpa-ink); }
.bpa-signup__status.is-invalid { color: #8a2f22; }
.bpa-signup__status:empty { margin-top: 0; }
@media (prefers-reduced-motion: no-preference) {
	.js .bpa-signup__card { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
	.js .bpa-signup__card::before { transform: scaleX(0); transition: transform 1s cubic-bezier(.2, .7, .2, 1) .25s; }
	.js .bpa-signup__card.is-revealed { opacity: 1; transform: none; }
	.js .bpa-signup__card.is-revealed::before { transform: none; }
}
@media (max-width: 860px) {
	.bpa-signup__card { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
	.bpa-signup__card { border-radius: 18px; }
	.bpa-signup__row { flex-direction: column; align-items: stretch; gap: .5rem; padding: 0; border: 0; background: none; }
	.bpa-signup__row:focus-within { box-shadow: none; }
	.bpa-signup__input { min-height: 48px; border: 1px solid var(--bpa-line); background: var(--bpa-white); }
	.bpa-signup__input:focus-visible { border-color: var(--bpa-green); box-shadow: 0 0 0 3px rgba(47, 74, 56, .18); }
	.bpa-signup__button { min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
	.bpa-signup__row, .bpa-signup__button { transition: none; }
}

/* ---------- Featured belt (2026-10-13) ----------
   Wide, nearly edge-to-edge row of tall rounded cards (structure inspired by a captured carousel
   reference; BPA copy/assets only). Four real draft cards fill the width on desktop; narrower screens
   scroll/snap with a partial next card. Prev/next appear only when the row actually overflows
   (main.js) and on fine pointers. Interaction kept: Add to cart reveals on hover/keyboard focus on
   hover-capable desktops (inside the price row, so no blank space is reserved); always visible on
   touch and with reduced motion. Quick view unchanged. */
.bpa-featured.bpa-section { padding-block: clamp(2.25rem, 4.5vw, 3.75rem); }
/* Shared wide homepage container (Shop by category + Featured): ~80px gutters at 1920, 1760px max content. */
.bpa-wide { width: 100%; max-width: calc(1760px + 2 * clamp(1rem, 4.2vw, 5rem)); margin-inline: auto; padding-inline: clamp(1rem, 4.2vw, 5rem); }
.bpa-featured .bpa-section__head { margin-bottom: 1.25rem; }
.bpa-belt { position: relative; --bpa-belt-gap: 14px; }
.bpa-featured .bpa-belt__track {
	display: flex; gap: var(--bpa-belt-gap); margin: 0; padding: 6px 0 18px; list-style: none;
	overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.bpa-belt__track::-webkit-scrollbar { display: none; }
/* Six cards (Jason, 2026-10-13): ~282px each at 1920 (six fill the 1760px row); never narrower than
   260px or wider than 300px, so narrower screens overflow with a partial next card. */
.bpa-featured .bpa-belt__track > .bpa-card { flex: 0 0 clamp(260px, calc((100% - 5 * var(--bpa-belt-gap)) / 6), 300px); min-width: 0; scroll-snap-align: start; }
@media (max-width: 640px) { .bpa-belt { --bpa-belt-gap: 12px; } .bpa-featured .bpa-belt__track > .bpa-card { flex-basis: 68%; } }

/* Soft rounded surface instead of a hard box border. */
.bpa-featured .bpa-belt .bpa-card {
	position: relative; overflow: hidden; border: 0; border-radius: 18px; background: var(--bpa-cream-2);
	box-shadow: 0 0 0 1px rgba(20, 32, 27, .06), 0 1px 3px rgba(20, 32, 27, .05);
	transition: box-shadow .3s ease, transform .3s cubic-bezier(.2, .7, .2, 1);
}
.bpa-featured .bpa-belt .bpa-card__media { aspect-ratio: 5 / 6; border-radius: 0; background: #ece6dc; }
/* Close-ups are 4:3 with the vial ~30% wide and ~87% tall: a taller cover crop trims only background. */
.bpa-featured .bpa-belt .bpa-card__media .bpa-card__img--closeup { object-position: 50% 55%; }
.bpa-featured .bpa-belt .bpa-card__body {
	grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "cat cat" "name name" "lot lot" "price actions";
	align-items: center; padding: .75rem .9rem .9rem; column-gap: .5rem;
}
.bpa-featured .bpa-belt .bpa-card__cat { margin-bottom: .2rem; font-size: .625rem; letter-spacing: .16em; }
.bpa-featured .bpa-belt .bpa-card__name { font-size: 1.1875rem; font-weight: 500; line-height: 1.2; overflow-wrap: normal; }
.bpa-featured .bpa-belt .bpa-card__name-text { white-space: nowrap; }
.bpa-featured .bpa-belt .bpa-card__name-size { display: inline; font: 400 .8em/1 var(--bpa-sans); color: var(--bpa-text); white-space: nowrap; }
.bpa-featured .bpa-belt .bpa-card__size, .bpa-featured .bpa-belt .bpa-card__blurb, .bpa-featured .bpa-belt .bpa-card__stock { display: none; }
.bpa-featured .bpa-belt .bpa-lot { justify-self: start; max-width: 100%; flex-wrap: wrap; gap: .3rem; margin-block: .5rem .7rem; padding: .25rem .55rem; border-radius: 999px; font-size: .625rem; }
.bpa-featured .bpa-belt .bpa-card__price { justify-self: start; font-size: 1.0625rem; white-space: nowrap; }
.bpa-featured .bpa-belt .bpa-card__actions { grid-area: actions; display: flex; justify-content: flex-end; margin: 0; }
.bpa-featured .bpa-belt .bpa-card__atc { width: auto; max-width: none; height: auto; min-height: 2.125rem; padding: .4rem .85rem; border-radius: 999px; font-size: .75rem; white-space: nowrap; }
.bpa-featured .bpa-belt .bpa-qv-btn--overlay { border-radius: 50%; }

@media (hover: hover) and (pointer: fine) {
	.bpa-featured .bpa-belt .bpa-card:is(:hover, :has(:focus-visible)) { box-shadow: 0 0 0 1px rgba(20, 32, 27, .08), 0 14px 28px -16px rgba(20, 32, 27, .45); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.bpa-featured .bpa-belt .bpa-card:is(:hover, :has(:focus-visible)) { transform: translateY(-3px); }
	.bpa-featured .bpa-belt .bpa-card__media img { transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
	.bpa-featured .bpa-belt .bpa-card:is(:hover, :has(:focus-visible)) .bpa-card__media img { transform: scale(1.03); }
	/* Add to cart reveals on hover / keyboard focus (kept from the previous design). */
	.bpa-featured .bpa-belt .bpa-card__actions { opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .25s ease, transform .25s ease, visibility 0s .25s; }
	.bpa-featured .bpa-belt .bpa-card:is(:hover, :has(:focus-visible)) .bpa-card__actions { opacity: 1; visibility: visible; transform: none; transition: opacity .3s .05s ease, transform .3s .05s ease, visibility 0s; }
}

/* Edge controls + fade (only while overflowing). */
.bpa-belt__nav {
	position: absolute; z-index: 2; top: calc(6px + 32%); display: grid; place-items: center;
	width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
	background: var(--bpa-cream-2); color: var(--bpa-ink); cursor: pointer;
	box-shadow: 0 0 0 1px rgba(20, 32, 27, .08), 0 6px 16px -6px rgba(20, 32, 27, .35);
	transition: opacity .2s ease, background-color .2s ease;
}
.bpa-belt__nav[hidden] { display: none; }
.bpa-belt__nav .bpa-icon { width: 20px; height: 20px; }
.bpa-belt__nav--prev { left: -12px; } .bpa-belt__nav--prev .bpa-icon { transform: rotate(90deg); }
.bpa-belt__nav--next { right: -12px; } .bpa-belt__nav--next .bpa-icon { transform: rotate(-90deg); }
.bpa-belt__nav:hover { background: var(--bpa-white); }
.bpa-belt__nav:focus-visible { outline: 2px solid var(--bpa-green); outline-offset: 3px; }
.bpa-belt__nav[aria-disabled="true"] { opacity: 0; pointer-events: none; }
.bpa-belt__nav[aria-disabled="true"]:focus-visible { opacity: .5; }
@media (hover: none), (pointer: coarse) { .bpa-belt__nav { display: none; } }
.bpa-belt.has-next .bpa-belt__track { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); }
.bpa-belt.has-prev .bpa-belt__track { -webkit-mask-image: linear-gradient(to right, transparent, #000 56px); mask-image: linear-gradient(to right, transparent, #000 56px); }
.bpa-belt.has-prev.has-next .bpa-belt__track { -webkit-mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent); }
@media (prefers-reduced-motion: reduce) {
	.bpa-featured .bpa-belt .bpa-card, .bpa-belt__nav { transition: none; }
}

/* ---------- Shop by category: wide container + refined tiles (2026-10-13) ----------
   Same container/gutters as the Featured belt. Rounded soft surfaces, larger centred symbols,
   clear names, quieter counts; no arrows. Five tiles in one row from 901px; below that a
   horizontal swipe row with a partial next tile (links stay keyboard-reachable). */
.bpa-cats { padding-top: clamp(2.25rem, 4.5vw, 3.5rem); }
.bpa-cats__title { margin: 0 0 1rem; }
.bpa-cats__list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.bpa-cats__item--all { grid-column: auto; }
.bpa-cat-tile {
	gap: .3rem; padding: 1.6rem 1rem 1.4rem; min-height: 0;
	border: 0; border-radius: 16px; background: var(--bpa-cream-2);
	box-shadow: 0 0 0 1px rgba(20, 32, 27, .07), 0 1px 3px rgba(20, 32, 27, .04);
	transition: box-shadow .25s ease, transform .25s cubic-bezier(.2, .7, .2, 1), background-color .25s ease;
}
.bpa-cats__item--all .bpa-cat-tile { background: transparent; box-shadow: inset 0 0 0 1px rgba(20, 32, 27, .14); }
.bpa-cat-tile__icon { width: 3.5rem; height: 3.5rem; margin-bottom: .6rem; background: #ebe8df; }
.bpa-cat-tile__icon .bpa-icon { width: 1.75rem; height: 1.75rem; stroke-width: 1.4; }
.bpa-cat-tile__name { font: 500 clamp(1.1875rem, 1.35vw, 1.4375rem)/1.2 var(--bpa-serif); color: var(--bpa-ink); }
.bpa-cat-tile__count { font: 400 .625rem/1.3 var(--bpa-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bpa-muted); }
.bpa-cat-tile:focus-visible { outline: 2px solid var(--bpa-green); outline-offset: 3px; box-shadow: 0 0 0 1px rgba(20, 32, 27, .14); }
.bpa-cat-tile:active { box-shadow: 0 0 0 1px var(--bpa-green); }
@media (hover: hover) and (pointer: fine) {
	.bpa-cat-tile:hover { border-color: transparent; background: var(--bpa-white); box-shadow: 0 0 0 1px rgba(47, 74, 56, .35), 0 12px 24px -16px rgba(20, 32, 27, .4); }
}
@media (max-width: 1100px) {
	.bpa-cats__list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.bpa-cats__item--all { grid-column: auto; }
}
@media (max-width: 900px) {
	.bpa-cats__list {
		display: flex; gap: 12px; margin: -4px; padding: 4px 4px 10px;
		overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 4px; scrollbar-width: none;
	}
	.bpa-cats__list::-webkit-scrollbar { display: none; }
	.bpa-cats__item { flex: 0 0 calc((100% - 3 * 12px) / 3.4); scroll-snap-align: start; }
	.bpa-cat-tile { padding: 1.25rem .75rem 1.1rem; }
	.bpa-cat-tile__icon { width: 3rem; height: 3rem; margin-bottom: .45rem; }
	.bpa-cat-tile__icon .bpa-icon { width: 1.5rem; height: 1.5rem; }
}
@media (max-width: 640px) {
	.bpa-cats__item { flex-basis: calc((100% - 12px) / 2.35); }
	.bpa-cat-tile__name { font-size: 1.0625rem; }
}

/* Missing-asset placeholder inside the featured belt (GHK-Cu, CJC-1295 until concept art exists). */
.bpa-featured .bpa-belt .bpa-card__media .bpa-placeholder { height: 100%; padding: 1rem; gap: .4rem; }
.bpa-featured .bpa-belt .bpa-placeholder__note { font-size: .75rem; }

/* Category tiles scaled to the six-card belt (2026-10-13): same row width, lower and lighter. */
.bpa-cat-tile { padding: 1.1rem .9rem 1rem; gap: .2rem; }
.bpa-cat-tile__icon { width: 2.75rem; height: 2.75rem; margin-bottom: .4rem; }
.bpa-cat-tile__icon .bpa-icon { width: 1.375rem; height: 1.375rem; }
.bpa-cat-tile__name { font-size: clamp(1.0625rem, 1.05vw, 1.1875rem); }
@media (max-width: 900px) {
	.bpa-cat-tile { padding: 1rem .7rem .9rem; }
	.bpa-cat-tile__icon { width: 2.5rem; height: 2.5rem; }
	.bpa-cat-tile__icon .bpa-icon { width: 1.25rem; height: 1.25rem; }
}

/* ---------- Size-variant groups (2026-10-13) ----------
   Catalog card size summary + draft range note; product-page size options with prices; Quick view
   size radios. */
.bpa-card__price-note { display: block; margin-top: .2rem; font: 400 .625rem/1.3 var(--bpa-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--bpa-text); white-space: normal; }
.bpa-size__price { display: block; margin-top: .15rem; font: 400 .75rem/1.2 var(--bpa-mono); color: var(--bpa-text); }
.bpa-qv__sizes { margin: 0 0 1.25rem; padding: 0; border: 0; min-width: 0; }
.bpa-qv__sizes[hidden] { display: none; }
.bpa-qv__sizes-label { margin-bottom: .5rem; padding: 0; font: 500 .6875rem/1.3 var(--bpa-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--bpa-text); }
.bpa-qv__size-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.bpa-qv__size { position: relative; display: inline-flex; }
.bpa-qv__size input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.bpa-qv__size span {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem;
	border: 1px solid var(--bpa-line); border-radius: 999px; background: var(--bpa-white);
	font: 500 .875rem/1 var(--bpa-sans); color: var(--bpa-ink);
}
.bpa-qv__size input:checked + span { border: 1.5px solid var(--bpa-ink); background: var(--bpa-cream); }
.bpa-qv__size input:focus-visible + span { outline: 2px solid var(--bpa-green); outline-offset: 2px; }
.bpa-qv__size:hover span { border-color: var(--bpa-ink); }
/* Multi-size cards: the draft price range takes its own row above the (disabled) button. */
.bpa-card--catalog.bpa-card--range .bpa-card__body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "cat" "name" "size" "lot" "price" "atc"; }
.bpa-card--catalog.bpa-card--range .bpa-card__price { margin-bottom: .6rem; }
.bpa-card--catalog.bpa-card--range .bpa-card__atc { justify-self: start; }
.bpa-card--related.bpa-card--range .bpa-card__price { white-space: normal; }
.bpa-card--range .bpa-card__price { white-space: normal; overflow-wrap: anywhere; }
.bpa-lit__caveat { max-width: 46rem; margin: 0 0 1.5rem; padding: .75rem 1rem; border-left: 3px solid #8a2f22; background: rgba(138, 47, 34, .06); font-size: .9375rem; line-height: 1.55; color: var(--bpa-ink); }

/* ---------- Account sign-in (logged-out /my-account/ and lost-password), 2026-10-14 ----------
   Theme-only styling around WooCommerce's own forms (woocommerce/myaccount/form-login.php
   override keeps every hook, field, nonce and link). Centred rounded card: forest-green brand
   panel + cream form panel; single column on phones. */
.woocommerce-account:not(.logged-in) .bpa-page { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3.5rem, 7vw, 6rem); }
.woocommerce-account:not(.logged-in) .bpa-entry__title { max-width: 60rem; margin: 0 auto 1.5rem; font-size: clamp(2rem, 3.6vw, 2.75rem); text-align: center; }
.woocommerce-account:not(.logged-in) .woocommerce { max-width: 60rem; margin-inline: auto; }

.bpa-auth {
	display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); overflow: hidden;
	border-radius: 20px; background: var(--bpa-cream-2);
	box-shadow: 0 0 0 1px rgba(20, 32, 27, .07), 0 18px 40px -28px rgba(20, 32, 27, .45);
}
.bpa-auth__brand {
	position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: .75rem;
	padding: clamp(1.75rem, 4vw, 2.75rem); background: var(--bpa-green); color: var(--bpa-cream);
}
.bpa-auth__brand .bpa-wordmark, .bpa-auth__brand a { margin-bottom: auto; color: var(--bpa-cream); }
.bpa-auth__brand-line { margin: 0; font: 400 1.375rem/1.3 var(--bpa-serif); color: var(--bpa-cream); }
.bpa-auth__brand-note { margin: 0; font: 400 .6875rem/1.5 var(--bpa-mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(245, 241, 234, .75); }
.bpa-auth__panel { padding: clamp(1.75rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3.25rem); }
.bpa-auth__eyebrow { margin-bottom: .5rem; }
.bpa-auth__title { margin: 0 0 .5rem; font: 400 clamp(1.75rem, 2.6vw, 2.125rem)/1.15 var(--bpa-serif); color: var(--bpa-ink); }
.bpa-auth__intro { margin: 0 0 1.5rem; font-size: .9375rem; line-height: 1.55; color: var(--bpa-text); }

/* Fields (login + lost-password). */
.woocommerce-account:not(.logged-in) .woocommerce form .form-row { margin: 0 0 1.1rem; padding: 0; }
.woocommerce-account:not(.logged-in) .woocommerce form label { display: block; margin-bottom: .4rem; font: 500 .875rem/1.3 var(--bpa-sans); color: var(--bpa-ink); }
.woocommerce-account:not(.logged-in) .woocommerce form .required { color: #8a2f22; text-decoration: none; }
.woocommerce-account:not(.logged-in) .woocommerce form .input-text {
	width: 100%; min-height: 48px; padding: .7rem .95rem;
	border: 1px solid var(--bpa-line); border-radius: 10px; background: var(--bpa-white);
	font: 400 1rem/1.3 var(--bpa-sans); color: var(--bpa-ink); box-shadow: none;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.woocommerce-account:not(.logged-in) .woocommerce form .input-text:focus { outline: none; border-color: var(--bpa-green); box-shadow: 0 0 0 3px rgba(47, 74, 56, .2); }
.woocommerce-account:not(.logged-in) .woocommerce form .input-text[aria-invalid="true"] { border-color: #8a2f22; }
.woocommerce-account:not(.logged-in) .woocommerce form .password-input { position: relative; display: block; }
.woocommerce-account:not(.logged-in) .woocommerce form .password-input .input-text { padding-right: 3.25rem; }
.woocommerce-account:not(.logged-in) .woocommerce form .show-password-input {
	position: absolute; top: 50%; right: .3rem; width: 44px; height: 44px; margin: 0; padding: 0;
	transform: translateY(-50%); border: 0; border-radius: 8px; background-color: transparent; color: var(--bpa-text); cursor: pointer;
}
.woocommerce-account:not(.logged-in) .woocommerce form .show-password-input:focus-visible { outline: 2px solid var(--bpa-green); outline-offset: 0; }

/* Remember me + submit row. */
.woocommerce-account:not(.logged-in) .woocommerce-form-login > .form-row:not(.woocommerce-form-row) { display: flex; flex-direction: column; align-items: stretch; gap: 1rem; margin-top: .25rem; }
.woocommerce-account:not(.logged-in) .woocommerce-form-login__rememberme { display: inline-flex !important; align-items: center; gap: .55rem; margin: 0 !important; font-weight: 400 !important; cursor: pointer; }
.woocommerce-account:not(.logged-in) .woocommerce-form-login__rememberme input { width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--bpa-green); }
.woocommerce-account:not(.logged-in) .woocommerce form .button {
	display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 50px; margin: 0; padding: .75rem 1.5rem;
	border: 0; border-radius: 999px; background: var(--bpa-green); color: var(--bpa-cream);
	font: 500 1rem/1 var(--bpa-sans); cursor: pointer; transition: background-color .2s ease;
}
.woocommerce-account:not(.logged-in) .woocommerce form .button:hover { background: var(--bpa-ink); color: var(--bpa-cream); }
.woocommerce-account:not(.logged-in) .woocommerce form .button:focus-visible { outline: 2px solid var(--bpa-ink); outline-offset: 3px; }
.woocommerce-account:not(.logged-in) .woocommerce .lost_password { margin: 1.1rem 0 0; text-align: center; font-size: .875rem; }
.woocommerce-account:not(.logged-in) .woocommerce .lost_password a { color: var(--bpa-green); text-underline-offset: .2em; }

/* Lost-password form: same card treatment. */
.woocommerce-account:not(.logged-in) .woocommerce form.lost_reset_password {
	max-width: 32rem; margin-inline: auto; padding: clamp(1.75rem, 4vw, 2.75rem);
	border: 0; border-radius: 20px; background: var(--bpa-cream-2);
	box-shadow: 0 0 0 1px rgba(20, 32, 27, .07), 0 18px 40px -28px rgba(20, 32, 27, .45);
}
.woocommerce-account:not(.logged-in) .woocommerce form.lost_reset_password > p:first-child { margin: 0 0 1.25rem; line-height: 1.55; color: var(--bpa-text); }
.woocommerce-account:not(.logged-in) .woocommerce form.lost_reset_password .form-row-first { width: 100%; float: none; }

/* Notices (errors from WooCommerce's own handlers). */
.woocommerce-account:not(.logged-in) .woocommerce-notices-wrapper:not(:empty) { max-width: 60rem; margin: 0 auto 1rem; }
.woocommerce-account:not(.logged-in) .woocommerce-error,
.woocommerce-account:not(.logged-in) .woocommerce-message,
.woocommerce-account:not(.logged-in) .woocommerce-info {
	margin: 0 0 1rem; padding: .9rem 1.1rem .9rem 1.1rem; list-style: none;
	border: 0; border-left: 3px solid var(--bpa-green); border-radius: 10px; background: var(--bpa-white);
	box-shadow: 0 0 0 1px rgba(20, 32, 27, .07); font-size: .9375rem; line-height: 1.5; color: var(--bpa-ink);
}
.woocommerce-account:not(.logged-in) .woocommerce-error { border-left-color: #8a2f22; background: #fbf3f1; }
.woocommerce-account:not(.logged-in) .woocommerce-error::before,
.woocommerce-account:not(.logged-in) .woocommerce-message::before,
.woocommerce-account:not(.logged-in) .woocommerce-info::before { display: none; }

@media (max-width: 720px) {
	.bpa-auth { grid-template-columns: 1fr; border-radius: 16px; }
	.bpa-auth__brand { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: .35rem 1rem; padding: 1.1rem 1.25rem; }
	.bpa-auth__brand .bpa-wordmark, .bpa-auth__brand a { margin-bottom: 0; }
	.bpa-auth__brand-line { display: none; }
	.bpa-auth__brand-note { flex-basis: 100%; font-size: .625rem; }
	.bpa-auth__panel { padding: 1.5rem 1.25rem 1.75rem; }
}
@media (prefers-reduced-motion: reduce) {
	.woocommerce-account:not(.logged-in) .woocommerce form .input-text,
	.woocommerce-account:not(.logged-in) .woocommerce form .button { transition: none; }
}
/* WooCommerce boxes form.login itself (border, padding, margin); inside the BPA card it sits flush. */
.woocommerce-account:not(.logged-in) .bpa-auth form.login { margin: 0; padding: 0; border: 0; border-radius: 0; }
.woocommerce-account:not(.logged-in) .woocommerce form.lost_reset_password { margin-top: 0; }
/* Four browse tiles (All compounds, Peptides, Peptide blends, Other research materials), 2026-10-14. */
.bpa-cats__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .bpa-cats__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px) { .bpa-cats__item { flex-basis: calc((100% - 2 * 12px) / 2.6); } }
@media (max-width: 640px) { .bpa-cats__item { flex-basis: calc((100% - 12px) / 2.2); } }
/* Featured belt: name + availability line ("1 size available"), matching catalog cards (2026-10-14). */
.bpa-featured .bpa-belt .bpa-card__body { grid-template-areas: "cat cat" "name name" "size size" "lot lot" "price actions"; }
.bpa-featured .bpa-belt .bpa-card__size { display: block; grid-area: size; margin-top: .15rem; font: 400 .875rem/1.35 var(--bpa-sans); color: var(--bpa-text); }
.bpa-featured .bpa-belt .bpa-card__name-size { display: none; }
.bpa-featured .bpa-belt .bpa-card__size { justify-self: start; text-align: left; }
/* Range price + always-visible action (touch / phones): button on its own row so nothing overlaps. */
@media (hover: none), (pointer: coarse), (max-width: 640px) {
	.bpa-featured .bpa-belt .bpa-card--range .bpa-card__body { grid-template-areas: "cat cat" "name name" "size size" "lot lot" "price price" "actions actions"; }
	.bpa-featured .bpa-belt .bpa-card--range .bpa-card__actions { justify-content: flex-start; margin-top: .6rem; }
}

/* Why choose BPA Bioscience: four peer blocks, tighter spacing (2026-10-14). Four columns on desktop,
   two on tablet, one on phones; vertical rules only between blocks in the same row. */
.bpa-why { padding-block: clamp(2.75rem, 5vw, 4.25rem); }
.bpa-why__head { margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); }
.bpa-why__title { font-size: clamp(2rem, 3.6vw, 3rem); }
.bpa-why__list { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 2rem; }
.bpa-why__item { padding: .25rem clamp(1rem, 2vw, 1.75rem); }
.bpa-why__symbol { width: 5rem; height: 5rem; margin-bottom: 1.1rem; }
.bpa-why__symbol svg { width: 2.6rem; height: 2.6rem; }
.bpa-why__item-title { margin-bottom: .55rem; font-size: clamp(1.3125rem, 1.6vw, 1.5rem); }
.bpa-why__body { max-width: 19rem; font-size: 1rem; line-height: 1.6; }
.bpa-why__note { margin-top: clamp(1.75rem, 3vw, 2.25rem); }
@media (max-width: 1100px) {
	.bpa-why__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.25rem; }
	.bpa-why__item:nth-child(odd) { border-left: 0; }
	.bpa-why__item { padding-top: 0; }
	.bpa-why__item + .bpa-why__item { border-top: 0; }
	.bpa-why__item:nth-child(even) { border-left: 1px solid var(--bpa-line); }
	.bpa-why__symbol { width: 5rem; height: 5rem; margin-bottom: 1rem; }
	.bpa-why__body { max-width: 22rem; }
}
@media (max-width: 640px) {
	.bpa-why__list { grid-template-columns: 1fr; row-gap: 0; }
	.bpa-why__item { padding: 1.75rem 0; }
	.bpa-why__item:first-child { padding-top: 0; }
	.bpa-why__item + .bpa-why__item { border-left: 0; border-top: 1px solid var(--bpa-line); }
	.bpa-why__symbol { width: 4.5rem; height: 4.5rem; }
	.bpa-why__symbol svg { width: 2.3rem; height: 2.3rem; }
}

/* Contact pill: gentle grow on pointer hover / keyboard focus (2026-10-14). Scales ~7% from its
   bottom-right anchor, so it expands inward (no clipping) and causes no layout shift (transform only).
   Only for hover-capable fine pointers with motion allowed; touch and reduced motion stay static. */
.bpa-contact__toggle { transform-origin: 100% 100%; backface-visibility: hidden; }
.bpa-contact__toggle:hover { transform: none; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.bpa-contact__toggle { transition: background-color .2s ease, box-shadow .25s ease, transform .25s cubic-bezier(.2, .7, .2, 1); }
	.bpa-contact__toggle:hover { transform: scale(1.07); }
}
@media (prefers-reduced-motion: no-preference) {
	.bpa-contact__toggle:focus-visible { transform: scale(1.07); }
}

/* Shop by category: one staggered entrance per load (2026-10-14, revised). Hidden from the first paint
   via html.bpa-cats-pending (inline head script; motion allowed only); main.js adds .is-in when the tile
   row is in view. 180ms between tiles, ~600ms rise/scale settle, restrained. */
@media (prefers-reduced-motion: no-preference) {
	.bpa-cats-pending .bpa-cats:not(.is-in) .bpa-cats__item { opacity: 0; transform: translateY(24px) scale(.95); }
	.bpa-cats-pending .bpa-cats.is-in .bpa-cats__item {
		opacity: 1; transform: none;
		transition:
			opacity .45s ease calc(80ms + var(--bpa-i, 0) * 180ms),
			transform .6s cubic-bezier(.22, .9, .3, 1.06) calc(80ms + var(--bpa-i, 0) * 180ms);
	}
}

/* Catalog interaction refinement, Jason review 2026-10-14. */
.bpa-card--catalog { border-radius:16px; border-color:transparent; box-shadow:0 2px 12px rgba(20,32,27,.055); }
.bpa-qv-ready .bpa-card--catalog .bpa-qv-btn--overlay { width:auto; min-width:44px; padding:0 12px; gap:7px; border-radius:999px; background:rgba(255,255,255,.96); box-shadow:0 3px 12px rgba(20,32,27,.1); }
@media (hover:hover) and (pointer:fine) {
 .bpa-card--catalog { transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease; }
 .bpa-card--catalog:hover,.bpa-card--catalog:focus-within { transform:translateY(-5px); box-shadow:0 14px 30px rgba(20,32,27,.13); }
 .bpa-card--catalog:hover .bpa-qv-btn__label,.bpa-card--catalog:focus-within .bpa-qv-btn__label { position:static!important;width:auto;height:auto;clip:auto;overflow:visible;white-space:nowrap;font-size:.75rem; }
}
@media (hover:none),(pointer:coarse),(max-width:640px) {
 .bpa-card--catalog .bpa-qv-btn__label { position:static!important;width:auto;height:auto;clip:auto;overflow:visible;white-space:nowrap;font-size:.6875rem; }
 .bpa-card--catalog .bpa-qv-btn--overlay { top:.5rem;right:.5rem;padding:0 9px; }
 .bpa-card--catalog:active { box-shadow:0 4px 18px rgba(20,32,27,.15); }
}
@media (prefers-reduced-motion:no-preference) {
 .bpa-qv[open] { animation:bpa-detail-pop .24s cubic-bezier(.2,.8,.2,1); }
 .bpa-qv[open]::backdrop { animation:bpa-detail-shade .2s ease; }
 @keyframes bpa-detail-pop { from { opacity:0;transform:translateY(14px) scale(.97); } to { opacity:1;transform:none; } }
 @keyframes bpa-detail-shade { from { background:rgba(20,32,27,0); } to { background:rgba(20,32,27,.55); } }
 @media(max-width:640px) {
  .bpa-qv[open] { animation:bpa-detail-sheet .3s cubic-bezier(.2,.8,.2,1); }
  @keyframes bpa-detail-sheet { from { opacity:.6;transform:translateY(45px); } to { opacity:1;transform:none; } }
 }
}
@media(max-width:640px) {
 .bpa-qv { border-radius:22px 22px 0 0; }
 .bpa-qv__media { max-height:180px;aspect-ratio:auto;overflow:hidden; }
 .bpa-qv__media img { max-height:180px;object-fit:contain; }
}
@media(prefers-reduced-motion:reduce) {
 .bpa-card--catalog,.bpa-card--catalog:hover,.bpa-card--catalog:focus-within { transition:none;transform:none; }
 .bpa-qv[open],.bpa-qv[open]::backdrop { animation:none; }
}

/* Jason: retain icon-only Quick view controls (accessible label remains). */
.bpa-qv-ready .bpa-card--catalog .bpa-qv-btn--overlay { width:44px;min-width:44px;height:44px;padding:0;gap:0; }
.bpa-card--catalog .bpa-qv-btn--overlay .bpa-qv-btn__label,
.bpa-card--catalog:hover .bpa-qv-btn--overlay .bpa-qv-btn__label,
.bpa-card--catalog:focus-within .bpa-qv-btn--overlay .bpa-qv-btn__label { position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap; }

/* Fill the mobile preview image area without side letterboxing. */
@media(max-width:640px) {
 .bpa-qv__media:has(img) { display:block;aspect-ratio:4/3;max-height:none; }
 .bpa-qv__media img { width:100%;height:100%;max-height:none;object-fit:cover; }
}


.bpa-hero__verify{display:flex;align-items:center;gap:.5rem;width:fit-content;margin-top:1rem;color:inherit;text-decoration:none;font-weight:600;background:none;border:0;padding:0}.bpa-hero__verify:hover{text-decoration:underline;text-underline-offset:4px}.bpa-hero__verify:focus-visible{outline:2px solid currentColor;outline-offset:5px}

.bpa-hero__actions{display:flex;flex-direction:column;align-items:center;width:fit-content}.bpa-hero__verify{justify-content:center;text-align:center}@media(max-width:640px){.bpa-hero__actions{width:100%}}

.bpa-research-feed{display:grid;grid-template-columns:210px minmax(0,1fr);gap:2rem;margin:2rem 0}.bpa-research-feed__compounds{display:flex;flex-direction:column;gap:.5rem;align-self:start;position:sticky;top:6rem}.bpa-research-feed button{min-height:44px;padding:.7rem 1rem;border:1px solid #c9d5ca;border-radius:12px;background:#f1f5ee;color:#183d2c;text-align:left;cursor:pointer}.bpa-research-feed button[aria-pressed=true]{background:#183d2c;color:#fff}.bpa-research-feed button:focus-visible{outline:2px solid #183d2c;outline-offset:3px}[data-research-sources]{display:flex;flex-wrap:wrap;gap:1rem;margin:1rem 0}.bpa-research-paper{padding:1.25rem 0;border-top:1px solid #d5dfd4}.bpa-research-paper h3{font-size:1.15rem;line-height:1.4}.bpa-research-paper p{font-size:.9rem;line-height:1.6}@media(max-width:640px){.bpa-research-feed{grid-template-columns:1fr;gap:1rem}.bpa-research-feed__compounds{position:static;flex-direction:row;overflow-x:auto;padding-bottom:.5rem}.bpa-research-feed__compounds button{flex:0 0 auto}}

/* ---------- Hero: approved olive-and-sage water-helix demo (Jason, 2026-10-15) ----------
   Final styles from Codex …/bpa-hero-motion-concept/index.html (13:30 olive/sage study), ported clean
   and scoped to .bpa-hero--water; the demo's earlier emerald overrides, wire helix.js, light sweep and
   pause button are not used. Layers: water-helix.png (sway + SVG liquid ripple) < vial-cutout.png <
   olive shade < copy. Left copy, badges and the one-time ink entrance are unchanged. The hero keeps the
   theme's height/flow under the header (the demo's 100svh had no header above it).
   Motion: helix sway and vial float/tilt share one 24s ease-in-out clock; hero-water.js idles them off
   screen / in hidden tabs. Reduced motion: the existing `.bpa-hero *` rule stops every animation and the
   ripple filter is dropped (the sage colour treatment stays). */
.bpa-hero--water { background: #303a2a; }
.bpa-hero__fx { position: absolute; width: 0; height: 0; overflow: hidden; }
.bpa-hero__water {
	position: absolute; inset: -3%; z-index: -2; width: 106%; max-width: none; height: 106%;
	object-fit: cover; object-position: center; pointer-events: none;
	filter: saturate(.33) sepia(.28) brightness(.82) url(#bpa-liquid);
	animation: bpa-water-sway 24s ease-in-out infinite;
}
/* Vial (Jason, 2026-10-15): ~28% smaller than the demo's 58%×125% box (now 42%×90%) so the whole vial,
   cap to base and through its float, stays inside the hero; centred in the right half. */
.bpa-hero--water .bpa-hero__vial {
	top: 5%; right: 4%; z-index: -1; width: 42%; height: 90%;
	object-fit: contain; object-position: center; -webkit-mask-image: none; mask-image: none;
	filter: saturate(.65) sepia(.08);
}
/* Same value in both states so adding .is-inking never restarts the clock; no pre-scale/settle. */
.bpa-hero--water .bpa-hero__vial,
.bpa-hero--water.is-inking .bpa-hero__vial { animation: bpa-vial-float 24s ease-in-out infinite; }
.bpa-hero-pending .bpa-hero--water .bpa-hero__vial { transform: none; }
.bpa-hero--water.is-offscreen .bpa-hero__water,
.bpa-hero--water.is-offscreen .bpa-hero__vial { animation-play-state: paused; }
.bpa-hero--water .bpa-hero__shade {
	z-index: -1; pointer-events: none;
	background: linear-gradient(90deg, rgba(40, 49, 33, .96), rgba(43, 51, 36, .72) 36%, rgba(66, 73, 48, .25) 65%, rgba(84, 91, 62, .16));
}
.bpa-hero--water .bpa-hero__copy { position: relative; z-index: 2; }
/* Actions: "Shop the catalog" and "How we verify" side by side; "Verify certificates" centred below. */
.bpa-hero--water .bpa-hero__actions { display: grid; grid-template-columns: auto auto; gap: 12px 16px; align-items: center; }
.bpa-hero--water .bpa-hero__verify { grid-column: 1 / -1; justify-self: center; margin-top: 0; }
.bpa-hero__how {
	display: inline-flex; align-items: center; justify-content: center; min-height: 3.5rem; padding: 0 1.3rem;
	border: 1px solid #bac5a2; background: rgba(255, 255, 255, .03); color: #f3f0e5;
	font-weight: 600; text-decoration: none;
}
.bpa-hero__how:hover { border-color: #f3f0e5; background: rgba(255, 255, 255, .08); }
.bpa-hero__how:focus-visible { outline: 2px solid #f3f0e5; outline-offset: 3px; }
.bpa-hero.is-inking .bpa-hero__how { animation-delay: 1.25s; }
/* "How we verify" target: clear the sticky header (89px; 65px ≤640, as the FAQ anchor). */
#bpa-testing-title { scroll-margin-top: calc(89px + 2rem); }
.bpa-hero__note { position: absolute; right: 12px; bottom: 8px; z-index: 2; font: 10px/1.3 var(--bpa-sans); letter-spacing: .02em; color: #c4d3bd; pointer-events: none; }
@keyframes bpa-water-sway {
	0%, 100% { transform: translateY(-8px) rotate(-.5deg) scale(1); }
	50% { transform: translateY(8px) rotate(.5deg) scale(1.025); }
}
@keyframes bpa-vial-float {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50% { transform: translateY(-9px) rotate(.7deg); }
}
/* ≤1100px the theme runs the copy full width, so the vial becomes a faint background (as the demo's mobile). */
@media (max-width: 1100px) {
	.bpa-hero--water .bpa-hero__vial { opacity: .38; }
}
@media (max-width: 640px) {
	.bpa-hero--water .bpa-hero__vial { top: 15%; right: 0; width: 70%; height: 70%; }
	.bpa-hero--water .bpa-hero__actions { grid-template-columns: 1fr; width: 100%; }
	.bpa-hero--water .bpa-hero__verify { grid-column: 1; }
	#bpa-testing-title { scroll-margin-top: calc(65px + 1.5rem); }
}
@media (prefers-reduced-motion: reduce) {
	.bpa-hero__water { animation: none; filter: saturate(.33) sepia(.28) brightness(.82); }
	.bpa-hero--water .bpa-hero__vial { animation: none; }
}

/* Latest Jason correction: unified Wellness artwork, near-still subpixel shimmer, 48s loop. */
.bpa-hero--composition{background:#283123}
.bpa-hero__composition,.bpa-hero__shimmer{position:absolute;inset:0;width:100%;max-width:none;height:100%;object-fit:cover;object-position:center;pointer-events:none;z-index:-2}
.bpa-hero__shimmer{filter:url(#bpa-liquid);-webkit-mask-image:radial-gradient(ellipse 15% 43% at 76% 50%,transparent 87%,#000 112%);mask-image:radial-gradient(ellipse 15% 43% at 76% 50%,transparent 87%,#000 112%)}
.bpa-hero--composition .bpa-hero__shade{background:linear-gradient(90deg,#232d23aa,transparent 60%)}
@media(max-width:640px){.bpa-hero__composition,.bpa-hero__shimmer{object-position:70% center}}
@media(prefers-reduced-motion:reduce){.bpa-hero__shimmer{display:none}}

/* Jason: visible light shimmer without more geometric ripple. */
.bpa-hero__shimmer{filter:url(#bpa-liquid) brightness(1.08);animation:bpa-soft-highlight 12s ease-in-out infinite}
@keyframes bpa-soft-highlight{0%,100%{opacity:.15}50%{opacity:.65}}
.bpa-hero.is-offscreen .bpa-hero__shimmer{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.bpa-hero__shimmer{display:none;animation:none}}

/* Gentle composited drift avoids repainting a full-size SVG turbulence filter on every frame. */
.bpa-hero__shimmer{filter:none;opacity:1}
.bpa-hero__composition,.bpa-hero__shimmer{animation:none;transform:none} /* Motion concept stays separate pending Jason review. */
@keyframes bpa-liquid-drift{0%,100%{transform:translate3d(-.6%,-.3%,0) scale(1.025)}50%{transform:translate3d(.6%,.3%,0) scale(1.025)}}
.bpa-hero.is-offscreen .bpa-hero__composition,.bpa-hero.is-offscreen .bpa-hero__shimmer{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.bpa-hero__composition{animation:none;transform:none;will-change:auto}.bpa-hero__shimmer{display:none;animation:none;will-change:auto}}

/* Selected flowing-helix brand concept. */
.bpa-bioscience-logo { display:block; width:250px; height:auto; max-width:100%; }
.bpa-wordmark--light .bpa-bioscience-logo { filter:brightness(0) invert(1); }
@media(forced-colors:active) { .bpa-wordmark--light .bpa-bioscience-logo { filter:none; } } /* PQ-27: white-on-dark logo would vanish on the forced Canvas background */
@media(max-width:767px) { .bpa-bioscience-logo { width:190px; } }

/* Shared square concept packshots: show the complete approved vial silhouette. */
.bpa-featured .bpa-card__media img.bpa-card__img--closeup, .bpa-card__media img.bpa-card__concept, .bpa-gallery__concept img, .bpa-qv__media img { object-fit: contain; object-position: center; background: #f3f0e8; }

/* PQ-25 + PQ-29: clear the fixed floaters (cart pill, contact, version switcher) from the footer copyright and from Tab-focused controls (WCAG 2.4.11). */
html { scroll-padding-bottom: 6rem; }
.bpa-footer { padding-bottom: 6rem; }
@media(max-width:560px) { html { scroll-padding-bottom: 8.5rem; } .bpa-footer { padding-bottom: 8.5rem; } }