rather
than an ) carries
the constraint, since .hero-subtitle-short is inline and an inline
element does not respond to its own width. */
.hero-subtitle {
/* Breaks the box out to a fixed 303px — the middle of the measured
292-314px range that wraps the short copy into the three target
lines at 16px — centred on .hero-copy's own centre line no matter
how wide its 24px padding leaves this element's containing block
(W, resolved here through the % in each calc(), same basis both
sides). Solving margin-left = margin-right = 50% - 151.5px (half
of 303px) makes the box's rendered width fall out to exactly
303px on its own — width: auto, no max-width needed — because
with both margins pinned, auto width is just container-width
minus both margins, and the W terms cancel algebraically. */
margin-left: calc(50% - 151.5px);
margin-right: calc(50% - 151.5px);
}
/* ── The two buttons ──
Normal flow, not position:fixed — asked for outright ("the two
buttons move with the page", meaning scroll away with it like
everything else, not float over it forever.
width: min(303px, calc(100vw - 48px)), centred — capped at 303px,
the same fixed width .hero-subtitle-short's box resolves to just
above (the description's own max), asked for outright: on any
phone wide enough, the buttons stop growing at 303px rather than
continuing to fill the row the way the old 90% did. Below that, the
min() falls back to the viewport width less .hero-copy's own 48px
of side padding (24px each edge) — the same 24px the description's
own box deliberately breaks OUT of, but the buttons don't: they
shrink with it instead, staying inside that padding on a narrow
phone rather than crowding the edge the way the description does.
100% isn't usable here for that fallback: .hero-copy carries no
width of its own — it's a flex item under .hero-content's
align-items:center, sized by shrink-to-fit around its children —
so a percentage on .hero-actions would resolve against whatever
that circular sizing happens to produce, not against a stable
24px-padded box. 100vw is the one thing here with a size that
doesn't depend on any of this column's own content, which is
exactly what a fixed 48px can be subtracted from reliably.
.hero-actions is align-items:stretch (see the 1024px rule), so an
explicit width still has to be given back on the container itself
for it to read as a pair of buttons rather than two full-bleed
bars — min() serves that role exactly like the old 90% did. The
safe-area inset is added on top of a flat 24px rather than
replacing it, so there is real air below View Tests on a phone
with a home-indicator bar as well as one without. */
.hero-actions {
width: min(303px, calc(100vw - 48px));
align-self: center;
flex: 0 0 auto;
/* Up from 12px — asked for outright, "a tiny bit farther" from the
copy above. */
margin-top: 20px;
margin-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}
/* ── Dismissed: docked to the right edge, on its side ──
The pill leaves the bottom-right corner and becomes a tab on the
right edge, rotated a quarter turn anticlockwise so the edge that
was its bottom now faces the screen edge and sits flush against it.
The dock is the anchor (right edge, middle); the card does the
rotation. The negative right offset is half the difference between
the pill's length and its depth — 152 and 48 — which is exactly the
distance the rotated box's right edge falls short of the screen's
without it.
── Centred on the SMALL viewport, not on 50% ──
`top: 50%` looks like it means "halfway down the screen" and does
not. A position:fixed element resolves percentages against the
initial containing block, which on a mobile browser is the LARGE
viewport — the one measured with the chrome retracted. That figure
never changes as the chrome comes and goes, so with Safari's bottom
bar up the pill sat half the bar's height BELOW the centre of what
the visitor could actually see, and only looked centred in the state
where the bar was hidden.
50svh is the small viewport — chrome showing, the least screen there
ever is — so the pill is centred in the area that is guaranteed
visible. When the bar retracts it reads slightly high rather than
slightly low, which is the better way to be wrong: a tab a little
above centre is still fully on screen and fully tappable, where one
below centre creeps toward the bar that is about to cover it.
vh first as the fallback for anything that does not know svh; on
those engines it is the behaviour this always had. */
.promo-dock {
right: 0;
left: auto;
bottom: auto;
top: 50vh;
top: 50svh;
}
.promo-card[data-state="pill"] {
/* On its side the pill's LENGTH is the axis the label runs along and
its DEPTH is the axis across it. At 152 the label had far more room
at its two ends than it had above and below, so the type sat in a
long trough. 120 brings the end gaps down to roughly the ~15px the
depth already gives it, and the two read as one even margin.
Both numbers are named once and the offset below is derived from
them — it is exactly how far the rotated box would otherwise fall
short of the screen edge, so it has to move whenever they do. */
--pill-len: 120px;
--pill-depth: 48px;
width: var(--pill-len);
height: var(--pill-depth);
right: calc((var(--pill-len) - var(--pill-depth)) / -2);
bottom: auto;
top: 0;
transform: translateY(-50%) rotate(-90deg);
transform-origin: center;
}
}
/* The pill's two phrasings — full by default, short at the tier where the
pill turns on its side. */
.promo-pill-short { display: none; }
.promo-pill-full { text-transform: uppercase; }
@media (max-width: 768px) {
.promo-pill-full { display: none; }
.promo-pill-short { display: inline; }
/* Bigger and set in caps. On its side the pill's length is measured
against the screen's height, where there is far more room than the
bottom-right corner ever had — so the label can afford the size that
makes it legible at a glance rather than the size that fitted a
corner. */
.promo-pill-text {
font-size: 17px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
}
@media (max-width: 640px) {
/* ── "Most Popular", sized against the window ──
A vw-based size so the title grows with the screen instead of sitting
at one number chosen for one phone. Capped so a tablet-sized phone in
landscape does not run it into the nav.
max-width holds it just inside the product grid below it: the grid is
the full content column here, and a title exactly as wide reads as a
fourth column rather than as a heading over three. */
.research-banner--capped .process-mega-heading {
font-size: min(13.5vw, 62px);
max-width: 92%;
margin-inline: auto;
line-height: 1.02;
}
/* ── The black band, solid and readable ──
Was 14px letterspaced caps at 65% white on black, which is a caption
pretending to be a notice. Full white, heavier, and larger — this is
the one line on the page that has to survive being skimmed. */
.research-banner--fold .research-banner-text {
font-size: 15px;
font-weight: 700;
letter-spacing: 0.08em;
color: #fff;
}
.research-banner--fold .research-banner-text strong { color: #fff; }
}
/* Removed at 1040px and thinner, asked for outright — the hero already
carries the same claim in .hero-subtitle-short ("...Strictly for
research use."), so this band directly under the hero's buttons was
saying it twice in the first screen and a half. Its own breakpoint
rather than folded into the 768px or 1024px blocks above/below: 1040
is neither of those numbers, so it needs a rule of its own regardless
of how close it sits to them. display:none rather than visibility, so
it also drops out of the accessibility tree instead of leaving a
silent gap for a screen reader to land in. */
@media (max-width: 1040px) {
.research-banner--fold { display: none; }
}
@media (max-width: 1024px) {
/* ── The fold disclaimer was truncated across the whole tablet band ──
.research-banner-text is nowrap at base — a hangover from the
title-alignment trick the CAPPED variant used to need — and the full
sentence stops fitting on one line at about 1023px. Below 640 the
short form takes over and it is fine again, so the clipping was
invisible from either end and only showed in between: measured, it
was cut from 641px all the way to 1023px.
Wrapping is the whole fix. The band is not height-constrained, and a
notice that runs to two lines is a notice; one whose last third is
off the edge is not. */
.research-banner--fold .research-banner-text { white-space: normal; }
}
/* ── reCAPTCHA ──
The floating badge Google's script injects (bottom-right of the
viewport, every page, permanently) is hidden above the phone tier —
it named nothing on this site and sat over content on small screens.
Google's terms allow hiding it ONLY if the required attribution
appears somewhere the visitor will actually see, which is
.recaptcha-notice below, once per form that uses a token: js/ui.js's
two modals and the promo popup. Removing the text without the badge,
or the badge without the text, are both against those terms — the
pair has to move together.
Shown again at ≤768px — asked for outright — while the attribution
text stays visible at every width regardless (asked for outright
too, "keep the form disclaimers though"): showing both the badge AND
the text is always compliant with the terms above, which only bar
showing NEITHER, so this doesn't reopen the problem the badge was
hidden for in the first place. */
.grecaptcha-badge { visibility: hidden; }
@media (max-width: 768px) {
.grecaptcha-badge { visibility: visible; }
}
.recaptcha-notice {
color: var(--text-muted);
font-size: 12px;
line-height: 1.4;
margin-top: 12px;
}
.recaptcha-notice a { color: inherit; text-decoration: underline; }
.promo-popup-recaptcha {
font-size: 12px;
line-height: 1.25;
color: rgba(255, 255, 255, 0.72);
text-align: left;
/* 2px, matching .promo-popup-disclaimers' own `gap` exactly — this line
is one more disclaimer, not a new block, and it was previously spaced
4x further from the list above it than the list's own lines are from
each other. */
margin: 2px 0 0;
}
.promo-popup-recaptcha a { color: inherit; text-decoration: underline; }
/* ============================================================
PHONE — 768px and below, round four
------------------------------------------------------------
Everything here is inside a max-width query and cannot reach a
desktop viewport. Grouped by what it changes rather than by page,
because most of it is one rule applied to the three grids at once
(catalog, lab results, home featured) which are deliberately
identical objects at this width.
============================================================ */
@media (max-width: 768px) {
/* ── The floating cart bar is gone ──
A persistent bar pinned across the bottom of a phone costs a strip
of every screen on the site and duplicates the cart icon already in
the nav, which never scrolls away. display:none rather than
removing it from js/nav.js: the same element is still wanted above
this width, and the script that builds it has no width opinion. */
.cart-float-bar { display: none !important; }
/* ── Nav drawer, flat at the bottom ──
The 1024px rule already squares off the TOP two corners so the
drawer meets the bar cleanly; the bottom two were still the pill's
18px, which read as the last row being a different shape from the
rows above it. Flat all round here. */
.nav-right {
border-radius: 0;
}
/* ══ GRIDS — catalog, lab results, home featured ══
One geometry for all three. The rules below are the whole of
"product bottles keep one size and one position, frames keep one
height, only the whitespace either side of the image resizes". */
/* Edge inset matched to the SEARCH BAR's, which is the narrowest
thing on the catalog page and the one the cards visibly disagreed
with: the toolbar is full-bleed with --grid-edge (12px) of its own,
while the cards sat inside .container--catalog's 24px on top of the
grid's own 12px — 36px, three times the search field's. The
negative margin cancels the container's padding so the grid can set
the inset itself; width:auto releases the fixed track width the
desktop rule pins. */
.products-grid,
.certs-grid,
.featured-products {
grid-template-columns: 1fr;
gap: var(--grid-gap);
margin-inline: calc(-1 * var(--pa-container-pad, 24px));
width: auto;
max-width: none;
padding-inline: var(--grid-edge);
}
/* The frame's height stops tracking its width.
.card-img-wrap is aspect-ratio:1/1 everywhere else, which is what
made the image (and the whole card) grow and shrink with the
window. Pinned instead to the height that ratio produces at the
DESKTOP card width — the same calc the grid's own track uses — so
the frame is exactly the size it is on desktop and stays there at
every width in this tier. */
.product-card .card-img-wrap,
.cert-card .card-img-wrap {
aspect-ratio: auto;
height: calc((1120px - 2 * var(--grid-edge) - 2 * var(--grid-gap)) / 3);
}
/* The image itself is sized off that now-constant height (the base
rule's height:88.587% resolves against this box), so it needs
nothing further to stay constant. What DOES have to go is the
figure's 27.5% side padding: a percentage of the card's width, it
shrank the space available to the image on a narrow phone until
max-width:100% clamped the image itself — the one thing that must
not resize. Zero side padding hands the full width to the flex
centring instead, which is what makes the whitespace either side of
the bottle the only thing that changes as the window narrows. */
.product-card .card-img-wrap figure,
.cert-card .card-img-wrap figure {
padding: 5px 0;
}
/* Same reasoning for the lab-results placeholder mark, which is sized
in percentages of the wrap: the height half is now constant but the
width half would still track the card. Both pinned to what 40% of
the frame above resolves to. */
.card-img-wrap .cert-symbol-placeholder {
width: calc((1120px - 2 * var(--grid-edge) - 2 * var(--grid-gap)) / 3 * 0.4);
height: calc((1120px - 2 * var(--grid-edge) - 2 * var(--grid-gap)) / 3 * 0.4);
}
/* ── All three grids: smaller bottle/symbol, tighter frame ──
.products-grid (catalog) was deliberately excluded from this when
it was first written for the other two, and now brought in to
match — asked for outright, "the size of the product images ...
the proportions of everything" the home page grid has, applied to
the catalog too. 0.7 shrinks the pinned frame (and with it the
image, which is sized in % of the frame) by about 30%; the
figure's top/bottom padding drops from 5px to 1px on top of that
(halved again from an intermediate 2px, asked for outright), so
the whitespace above and below the bottle shrinks by more than
the image itself does. The placeholder mark is re-derived from the
same 0.7-scaled frame height so it keeps tracking it. */
.products-grid .card-img-wrap,
.featured-products .card-img-wrap,
.certs-grid .card-img-wrap {
height: calc((1120px - 2 * var(--grid-edge) - 2 * var(--grid-gap)) / 3 * 0.7);
}
.products-grid .card-img-wrap figure,
.featured-products .card-img-wrap figure,
.certs-grid .card-img-wrap figure {
padding: 1px 0;
}
.certs-grid .card-img-wrap .cert-symbol-placeholder {
width: calc((1120px - 2 * var(--grid-edge) - 2 * var(--grid-gap)) / 3 * 0.7 * 0.4);
height: calc((1120px - 2 * var(--grid-edge) - 2 * var(--grid-gap)) / 3 * 0.7 * 0.4);
}
/* The real symbol image (as opposed to the placeholder mark above,
for a product with none published yet) is an ordinary
.card-img-wrap img — the same element and base sizing a bottle
photo uses (height:88.587% of the frame, object-fit:contain) — so
shrinking it 20% specifically on this grid means overriding that
height here: 88.587% × 0.8 = 70.87%. width stays auto and
object-fit:contain still holds the aspect ratio, so the image
shrinks uniformly in both dimensions rather than just getting
shorter. Scoped to .certs-grid only — bottle photos on the other
two grids are untouched, asked for outright ("on the lab results
page too"). */
.certs-grid .card-img-wrap img {
height: 70.87%;
}
/* Doubles the grid's own edge inset (var(--grid-edge), 12px) on all
three grids now, so the catalog sits exactly as far from the
screen edge as the other two — it was the one left at the plain
var(--grid-edge) inset. */
.products-grid,
.featured-products,
.certs-grid {
padding-inline: calc(var(--grid-edge) * 2);
}
/* Four cards, not eight — asked for outright. index.html renders all
eight of FEATURED_COUNT regardless of width (it's a fixed JS
constant, "two full rows" on the desktop 4-column grid); at one
column here that would be eight stacked cards, so the back four are
hidden rather than the count itself made width-aware. display:none
takes them out of the accessibility tree too, same as every other
phone-only trim on this page. */
.featured-products .product-card:nth-child(n + 5) {
display: none;
}
/* ── Page titles ──
Was clamp(25.7px, 4.82vw, 68.5px), which bottoms out at its 25.7px
floor across this whole tier — a section-heading size for what is
the page's own name. A flat 44px instead, and no truncation: the
title wraps and grows UPWARD out of its own box the way a product
name does, rather than being cut. */
.catalog-hero-title {
font-size: 44px;
line-height: 1.02;
white-space: normal;
overflow-wrap: anywhere;
}
/* ── The search/sort band matches the grid it sits above ──
.page-toolbar-inner's padding-inline (var(--grid-edge), 12px) was
solved for the grid's OLD inset — doubled here to the grid's new
one (see .products-grid etc.'s own padding-inline above) so the
search field's left edge and the sort field's right edge line up
with the cards below, asked for outright ("the same width as the
new grid item widths").
.page-toolbar's own padding-block (space above the search field
and below the sort field, since they stack in one column at this
tier) is set to that same 24px — asked for outright, "equal to
the spacing from the new left edge of the product grid item and
the left edge of the screen." */
.page-toolbar-inner {
padding-inline: calc(var(--grid-edge) * 2);
}
.page-toolbar {
/* 14px, matching .catalog-toolbar's own `gap` exactly — asked for
outright: below 640px that toolbar is flex-direction:column, so
the gap IS the space between the search field and the sort field,
and this padding is the space above the first and below the
second. They were 24px against the gap's 14px, so the band read
as looser at its two ends than in its middle. The number is
restated rather than shared through a custom property because the
gap lives on the CHILD (.catalog-toolbar) and a parent cannot read
a property its own child declares — if that gap ever changes, this
has to change with it. */
padding-block: 14px;
}
/* ── Sort control ──
The label goes: "Sort by" and a box reading "Most Popular" say the
same thing twice, and on one phone-width row that repetition costs
the box its width. The box takes the whole row instead — it no
longer needs to carry the wording itself either way, since
js/catalog.js's "Sorting By " prefix (once applied to the selected
option here) was removed outright, asked for. */
.sort-field label { display: none; }
.sort-field { width: 100%; }
.sort-field .select-native { width: 100%; min-width: 0; }
/* ── The peptide-suggestion frame ──
The prompt above the button is a sentence explaining a button whose
own label already says it. On a phone it is two lines of that. */
.process-actions-prompt { display: none; }
/* ── The Browse Products / Suggest a peptide frame, aligned ──
.process-actions's own padding-inline (var(--grid-edge), the
desktop rule) doesn't break out of its container the way the
product grids now do — it just adds its 12px on top of the
container's already-24px padding, landing the frame's border 36px
from the screen edge against the grid's 24px. Zeroed here rather
than doubled: this element isn't full-bleed like the grids are, so
matching means REMOVING its own extra inset and letting the
container's 24px alone govern it, not adding a second 24px on top
of that. Asked for outright: "the same width and aligned with the
product item border above it" — on both the home page (under
.featured-products) and the catalog (under .products-grid), since
both now share this same class. */
.process-actions {
padding-inline: 0;
}
/* ── Browse Products / Suggest a peptide, styled like Add to Cart ──
.hero-btn here becomes .btn-cart's own look — solid fill, 36px
tall, uppercase, letter-spaced — asked for outright, "styled
exactly the same as add to cart." Vertical spacing from the frame
is preserved rather than left to re-centre around the now-shorter
button: the frame was 104px around a 60px button (22px clear
above and below); at 36px tall, holding that same 22px means the
frame itself has to come down to 80px (36 + 2 × 22), not stay at
104px and let flex centring hand the button MORE clearance than it
has right now. */
.process-actions-frame {
height: 80px;
}
/* --wide (the catalog's "Suggest a peptide" variant) carries its own
min-height:104px and padding:20px 24px, sized for the prompt-beside-
button layout that .process-actions-prompt's display:none (above)
already emptied out — both would otherwise keep the frame at its
old height regardless of the plain rule just above. Reset to the
same 80px/0 the plain frame uses now that only the button is left
inside it. */
.process-actions-frame--wide {
min-height: 80px;
padding: 0;
}
.process-actions-frame .hero-btn,
.process-actions-frame--wide .hero-btn {
/* 100% (flush with the frame's own left/right edges) had 0px of
horizontal clearance against the 22px the button already has
above and below — asked for outright to make all four equal.
calc(100% - 44px) takes 22px off each side; the frame's own
flex centring (align-items:center; justify-content:center) does
the rest, so the button ends up centred with 22px clear on
every edge instead of touching two of the four. */
width: calc(100% - 44px);
height: 36px;
min-height: 36px;
padding: 0 16px;
border: none;
border-radius: var(--radius-md);
background: var(--cta);
color: #fff;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
}
/* ── Offer popup, expanded: the whole screen ──
A corner card is a desktop shape. The 1024px rule already spans it
edge to edge with a 16px margin; at phone width even that reads as
a panel floating on a page nobody can use behind it, so it becomes
the page instead — full bleed, square, and scrolling internally if
the copy runs past the viewport. */
.promo-card[data-state="open"] {
position: fixed;
inset: 0;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: auto;
height: auto;
max-height: none;
border-radius: 0;
overflow-y: auto;
display: flex;
flex-direction: column;
/* flex-end, not center — asked for outright, "the discount content
at the bottom of the screen." The card's own padding (--promo-pad,
the base rule) still keeps the content clear of the true screen
edge; this only moves where the leftover vertical space collects
— above the content now, instead of split evenly above and
below it. */
justify-content: flex-end;
}
/* The height the script pins for the minimise transition is measured
against the corner card; full-screen it would clip the copy. */
.promo-card[data-state="open"] .promo-card-full {
height: auto;
}
/* "Earn 10% Off Your First Order" — 25% bigger than the base clamp,
asked for outright, now that the popup fills the whole screen and
has the room to carry a larger headline. Each bound scaled by the
same 1.25 so the responsive curve keeps its shape. */
.promo-popup-heading {
font-size: clamp(35px, 5vw, 55px);
}
/* ── "No, thanks" becomes a real button ──
A tappable line of underlined text reads fine sitting under a corner
card; full-screen, beside a solid SEND ME MY CODE button, it read as
an afterthought rather than the form's other real choice.
Every property below is .promo-popup-submit's own, verbatim — the
14px padding from that button's ≤1024px rule, and the type treatment
(13px / 700 / 0.04em / uppercase), the radius, the missing border and
the hover from its base rule — so the two are the SAME button at the
same size, asked for outright. Only the two colours are swapped:
black ground, white text, against the submit button's white-on-dark.
width:100% is the one addition with no counterpart on the submit
button, and it is what makes "the same size" true rather than
approximate: the submit button is a flex item in a column-direction
.promo-popup-form (the ≤1024px rule), so `align-items: stretch`
already fills the row for it. This button is a SIBLING of that form,
not a child, and a block-level shrink-to-fits its own text
rather than filling its container — so without this it came out
exactly as wide as the words "I'm fine thanks" happened to be.
margin-top matches the form's own `gap` (10px) exactly — the same
vertical distance the email field and the submit button already sit
apart, asked for outright. */
.promo-popup-decline {
/* Back on — see the note on the base rule for why it is off above
this width. */
display: block;
margin-top: 10px;
width: 100%;
padding: 14px;
border: none;
border-radius: var(--radius-md);
background: #000;
color: #fff;
text-align: center;
text-decoration: none;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
transition: opacity var(--transition);
}
.promo-popup-decline:hover {
color: #fff;
text-decoration: none;
opacity: 0.85;
}
.promo-decline-full { display: none; }
.promo-decline-short { display: inline; }
/* ── Account nav: Sign out moves into Overview ──
The tab row's own Sign out (.account-nav .account-signout) is one
of the "top selectable items" — hidden here so the row is just the
four real sections. The counterpart under Store credit
(js/account.js's overviewHtml) takes over in its place. */
.account-nav .account-signout { display: none; }
.account-overview-signout { display: block; }
/* ── Contact info rows, left-aligned ──
The desktop row is space-between: label pinned left, value flush
against the row's own right edge. Email — the one plain-text value
among the row (the others are inputs, which visually read as a
column because .field-input fills the remaining flex space) — sits
wherever its own text width happens to end, which almost never
lines up with the inputs' left edge above and below it. Fixing the
label column to one width and switching to flex-start puts every
value's left edge at the same x, input or plain text alike. */
.info-row { justify-content: flex-start; gap: 16px; }
.info-label { min-width: 96px; flex-shrink: 0; }
.info-value { text-align: left; }
/* ── Add new address, as an accordion ──
#addr-form is the panel that sits permanently open on desktop; here
it starts closed and only .is-open (toggled by js/account.js's
addr-toggle listener) shows it again. */
.addr-toggle { display: flex; }
#addr-form { display: none; }
#addr-form.is-open { display: block; }
/* ── Google sign-in preview, clear of the promo bar ──
Desktop keeps the top-right corner placement (asked for outright,
see the note on .gsi-preview) that deliberately overlaps both the
standing-offer strip and the nav. On a phone the corner sat right
under the promo bar's own text, close enough to read as one
overlapping mess rather than two things stacked. Dropping the top
offset below --promo-h clears the strip; the unchanged z-index
(102, still above .nav's 100) is what keeps it layered over the nav
bar rather than pushing content down to make room for it. */
.gsi-preview { top: calc(var(--promo-h) + 12px); }
}
/* ── The pill's dismiss X ──
Overlaid on the pill's leading end rather than nested inside it (a
button inside a button is invalid markup — see the note in
js/promo.js). z-index above the pill so the X takes its own taps; the
pill's own click still fires everywhere else.
TOP LEVEL, not inside the phone query above — which is where this
first went, and the display:none default went with it, so above
768px there was nothing hiding the button and a stray X was painted
over the bottom-left corner of the EXPANDED card. The X belongs to
the collapsed pill at every width, so both halves of that rule
(hidden by default, shown by the [data-state="pill"] rule below) have
to be unconditional. */
.promo-pill-x {
position: absolute;
z-index: 2;
width: 30px;
height: 30px;
display: none; /* shown only in the pill state, below */
align-items: center;
justify-content: center;
padding: 0;
border: none;
border-radius: 50%;
background: rgba(0, 0, 0, 0.32);
color: #fff;
cursor: pointer;
}
/* The X is wanted at EVERY width — the brief asks for it in the
bottom-right corner pill as well as the rotated right-edge one — so
its visibility rule sits outside the phone block above. Only its
placement differs between the two, since the rotated pill's own
transform turns "left" into "bottom". */
.promo-card[data-state="pill"] .promo-pill-x {
display: flex;
}
/* ── The pill, put on a real formula ──
Every number below is solved from the same equation, once per tier
(the desktop label and the rotated one are different pixel widths):
margin + X + gap + textInk + margin = pill length
with margin fixed to what the DEPTH axis already gives the text for
free — .promo-card-pill centres the label vertically inside the
pill's own height with no CSS of its own needed for that half, so
reusing that same number for the horizontal margin is what makes
"space before X and after the text" equal to "space above and below
the text", asked for outright. Solving for the pill's own LENGTH
(rather than fitting numbers into the two lengths this already had)
is what makes the result exact instead of approximate — 152px and
120px were "stated rather than derived" to begin with (see the
comment on the collapsed dimensions above), so there was nothing
original to preserve by keeping them.
Desktop — "GET 10% OFF" (see the uppercase note on .promo-pill-full)
at 14px/600 measures 91.04px of ink; the pill's own 48px depth minus
the label's 16px line box leaves 16px above and below it:
margin 9 + X 30 + gap 8 + text 91.04 + margin 16 = 154.04 → 154px
That leading 9, not 16, is not a free variable any more — the pill's
left end is a true semicircle of radius 24 (half the 48px depth), and
the X disc is itself a circle, 30px across (radius 15). Left at 16px
its centre sat at 16 + 15 = 31px from the pill's own left edge, 7px
off the curve's own centre at 24px — so the ring of dark background
showing between the disc and the pill's edge was thicker at the top
and bottom of the curve than at its leading point. Centring the disc
ON the curve's centre (radius 24 − disc radius 15 = 9px of left
margin) is what makes that ring one constant width all the way round
the curve, rather than a lens shape that happens to touch it at one
point. The trailing margin is untouched — it answers to the text's
own vertical margin (16, see above), a different equality — so only
the leading term and the total it feeds into move.
Mobile — "10% OFF" at the rotated tier's 17px/800/uppercase measures
82.27px; 48px depth minus its 19.5px line box leaves 14.25px, rounded
to a flat 14 (a quarter of a pixel is not a rendering difference
anyone will see):
margin 14 + X 30 + gap 8 + text 82.27 + margin 14 = 148.27 → 148px
The gap (X to label) is the SAME 8px both tiers — asked for
outright ("the X needs to be closer… same distance as mobile") —
which only holds because it is one of the terms SOLVED for here
rather than left as a side effect of unrelated padding. */
.promo-card[data-state="pill"] {
width: 154px;
}
.promo-card[data-state="pill"] .promo-pill-x {
left: 9px;
top: 50%;
transform: translateY(-50%);
}
.promo-card[data-state="pill"] .promo-card-pill {
padding-left: 47px; /* margin 9 + X 30 + gap 8 */
padding-right: 16px;
}
@media (max-width: 768px) {
/* Rotated pill: the card is turned -90deg as a whole, so its own
"left" now points at the floor. The X is placed against the card's
left end all the same — after the rotation that is the BOTTOM of
the tab as the reader sees it, which is the end nearest the corner
the pill grew out of. Counter-rotated so the glyph itself stays
upright rather than lying on its side with the label. */
.promo-card[data-state="pill"] {
/* Re-solved again, each term asked for outright in its own pass:
the X-to-label gap cut to two thirds a second time (14 → 9.33 →
6.22), and the trailing margin — OFF to the tab's far edge, which
is what "the top edge" becomes once the -90deg rotation below
turns this card's own RIGHT into the reader's TOP (see the note on
the pill-x placement) — held at its +20% (14 × 1.2 = 16.8):
margin 14 + X 30 + gap 6.22 + text 82.27 + margin 16.8 = 149.29px. */
--pill-len: 149.29px;
/* width restated explicitly, not left to the original mobile rule's
own `width: var(--pill-len)` (further up this file) to carry it:
that rule and the desktop `width: 161px` above are equal
specificity, and the desktop one comes LATER in the file — so
without this, it would win the width property outright at every
width, including this one, regardless of which custom property
the now-ignored var() was pointed at. */
width: var(--pill-len);
}
.promo-card[data-state="pill"] .promo-pill-x {
left: 14px;
top: 50%;
transform: translateY(-50%) rotate(90deg);
/* Circle removed, asked for outright — the X sits directly on the
pill's own fill now, nothing drawn behind it. The 30×30 box
itself is kept as the tap target (still comfortably touch-sized)
even though nothing marks its edges any more. */
background: none;
}
/* Bold to match the label's own weight (17px/800 — see the pill-
length formula's comment above) — a stroke, not a font-weight,
since the X is drawn geometry (see the note on the SVG in
js/promo.js), so "bold" means thickening the stroke rather than
switching a font axis. 1.6 was sized to read clearly at 12×12
against a filled dark circle; without that circle behind it the
mark needs to carry its own visual weight, and 2.6 is what reads
as bold at this size against the text beside it. */
.promo-card[data-state="pill"] .promo-pill-x path {
stroke-width: 2.6;
}
.promo-card[data-state="pill"] .promo-card-pill {
/* margin 14 + X 30 + gap 6.22 = 50.22; trailing margin 16.8 — see the
formula on --pill-len above for where both numbers come from. */
padding-left: 50.22px;
padding-right: 16.8px;
}
}
/* ── The expanded card's minus, top-right ──
Replaces the "No, thanks" line the desktop card used to carry under
its form, asked for outright. Same job (dismiss() → the pill, the
offer is paused, not spent), different reading: a minus in a corner is
window chrome and says "put this away", where a line of text under the
form reads as an answer to the offer.
Deliberately the same 30px disc as the pill's × (.promo-pill-x above):
the two are the same control at two moments — minimise the card, then
dismiss the pill — and they occupy roughly the same region of the
screen one after the other. Anything else would read as two unrelated
buttons trading places.
Absolutely positioned against .promo-card, which is the only element
in this component with a stable box: pinned to the card's own corner,
it cannot be pushed around by the copy rewrapping under it, and it
contributes nothing to the height js measures to pin the open state. */
.promo-minimise {
position: absolute;
z-index: 2;
top: 14px;
right: 14px;
width: 30px;
height: 30px;
display: none; /* shown only above 768px, open, below */
align-items: center;
justify-content: center;
padding: 0;
border: none;
border-radius: 50%;
background: rgba(0, 0, 0, 0.32);
color: #fff;
cursor: pointer;
transition: background var(--transition);
}
.promo-minimise:hover { background: rgba(0, 0, 0, 0.52); }
.promo-minimise:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Only while the card is OPEN, and only above the phone tier — the two
halves of "desktop gets a minus, the phone gets its button". min-width
769 rather than a not-max-768: the brief draws the line at 768
INCLUSIVE on the phone side, and 769 is the next pixel up. */
@media (min-width: 769px) {
.promo-card[data-state="open"] .promo-minimise { display: flex; }
}
/* ── Phone: a crossfade, not a morph ─────────────────────────
Asked for outright — dismissing the full-screen sheet "should simply
fade out onto the background page with no movement animation
whatsoever or transformation into the pill version".
Desktop's card and pill are one box changing size in one place, so
morphing between them describes something true. On a phone they are a
full-screen sheet and a tab on the right edge: a morph there is a
screenful of artwork sliding and shrinking across the page to become
something a tenth its size somewhere else, which is a great deal of
movement to say "closed", and it makes the pill look like a squashed
version of the sheet rather than the separate standing offer it is.
Everything below exists to make the swap POSITIONLESS. The geometry
transitions are replaced by an opacity one on the card, and the two
faces' scale transforms are cancelled, so the only property that
animates at this width is opacity. js/promo.js (swapState) then flips
the state while the card is at zero opacity, so the geometry change
happens on a frame with nothing visible on it.
These sit at the end of the promo rules on purpose: several of the
declarations they replace are attribute-plus-class selectors that
would otherwise outrank a bare .promo-card here regardless of the
media query, so each is restated at its own specificity and later in
the file. */
@media (max-width: 768px) {
.promo-card,
.promo-card[data-state="open"],
.promo-card[data-state="pill"] {
transition: opacity 0.26s ease;
}
/* Both faces cross-fade in place. The base rules scale them about the
card's bottom-right corner so the content converges with the frame —
there is no converging frame here, so there is nothing for them to
travel with. */
.promo-card-full,
.promo-card-pill {
transition: opacity 0.2s ease;
}
.promo-card[data-state="open"] .promo-card-full,
.promo-card[data-state="pill"] .promo-card-full,
.promo-card[data-state="open"] .promo-card-pill,
.promo-card[data-state="pill"] .promo-card-pill {
transform: none;
}
/* Restated because the base rule pairs this transform with its own
shorter transition, and dropping the transform alone would leave the
0.12s opacity curve on one face and 0.2s on the other. */
.promo-card[data-state="open"] .promo-card-full {
transition: opacity 0.2s ease;
}
/* The fading frame itself. pointer-events:none as well as opacity:0 so
the page underneath is live the instant the sheet starts to go —
fading out "onto the background page" means the background page,
not a transparent sheet still eating taps for a quarter second. */
.promo-card.is-fading {
opacity: 0;
pointer-events: none;
}
/* The reduced-motion rule further up this file is overridden by
everything above (later in the file, same or higher specificity), so
it is restated here. js/promo.js already skips the fade entirely
under this setting — crossfades() checks the same query — and this
is the paint side of the same decision: the swap is instantaneous,
which is what the setting asks for. */
@media (prefers-reduced-motion: reduce) {
.promo-card,
.promo-card[data-state="open"],
.promo-card[data-state="pill"],
.promo-card-full,
.promo-card-pill,
.promo-card[data-state="open"] .promo-card-full {
transition: none;
}
}
}
@media (max-width: 768px) {
/* One container inset for the whole tier. The 640px rule already set
24px; extending it up to 768 means the grids' own negative margin
above has exactly one number to cancel rather than two (40px between
641 and 768, 24px below it), which is what let that margin be a
constant instead of a second media query. */
.container { padding: 0 24px; }
/* ── Product page bottle, smaller ──
Below 1024px the frame is already a plain square that fills its
column (see the max-width:1024px rules above) with 48px of padding
on every side — nothing in that padding is direction-specific, so
it's the space above/below the bottle as much as it is the space
either side of it. A fixed, smaller box (was however wide the
stacked single column happened to be) shrinks the bottle itself;
less padding inside that box shrinks the band around it to match,
rather than leaving the old 48px looking oversized next to the now-
smaller photo. margin-inline:auto centres the smaller box, which
doubles its distance to the screen edge as a direct consequence —
centring a 200px box inside a ~342px column already clears twice
the container's own 24px on each side without a separate rule.
.pd-gallery itself still carries the 16:12 band from the
max-width:1024px rule above, sized off the FULL column width — at
200px square the frame no longer fills that band, so without this
override the flex centring that already lives on .pd-gallery would
leave empty space above and below the frame inside its own
now-oversized band, on top of the smaller frame. Cancelling the
ratio lets the band shrink to the frame's own height instead. */
.pd-gallery { aspect-ratio: auto; }
/* ── The frame is one product-grid card wide, and square ──
Asked for outright: "the same amount of width a product grid item
has on the products page". That width is not a number to copy — it
falls out on its own. On the catalog at this tier .products-grid is
one column, breaks out of .container's 24px padding with a matching
negative margin, and puts 24px (var(--grid-edge) × 2) back as its
own inset, so a card is exactly the viewport less 48px. The product
page's .container carries that same 24px padding and .product-detail
is a single column here, so width:100% on this frame resolves to
precisely the same measure — no shared variable needed, and it
stays matched if that container inset is ever changed.
Square rather than the 2:3 band first specified: at 2:3 the frame
came out 218px tall on a 375px phone, shorter than the bottle it
has to hold (see .pd-gallery img below, ~264px), so the photo would
have overflowed or been cropped by the frame's own overflow:hidden.
Confirmed as square outright in answer to exactly that.
aspect-ratio, not a height: the frame's width already tracks the
viewport, so a fixed height would only be square at one width.
The max-width/height/margin-inline this replaces were the old fixed
200px box (see the note above about the smaller bottle), all of
which have to go for width:100% to mean anything. */
.pd-gallery-frame {
width: 100%;
max-width: none;
height: auto;
aspect-ratio: 1 / 1;
margin-inline: 0;
/* Enough room inside the square for the bottle below at its full
height: 24px a side leaves 279px of content box on a 375px phone
against the photo's ~264px, so the frame never clamps it via the
max-height:100% the base .pd-gallery img rule carries. */
padding: 24px;
}
/* ── The bottle: the catalog grid's, 20% bigger ──
Asked for outright, "the same size as it is on the products page on
mobile but 20 percent bigger". Every term is the grid's own, in the
order the grid applies them, rather than the 263.76px they resolve
to on any one phone — the whole point of the phone-tier grid rules
is that this photo is a CONSTANT size at every width in the tier
(see .products-grid .card-img-wrap above), so restating the same
expression is what keeps the two in step if any of it moves:
(1120px - 2 x --grid-edge - 2 x --grid-gap) / 3 the card frame's
desktop measure,
pinned as the
frame's HEIGHT
at this tier
x 0.7 the phone tier's shrink of that frame
- 2px the figure's own 1px top+bottom padding, which the
percentage below resolves against (border-box)
x 0.88587 .card-img-wrap img's height, in % of that figure
x 1.2 the 20% asked for here
width:auto with object-fit:contain (base rule) keeps the 1:2 crop's
own ratio, so the photo grows in both dimensions rather than just
getting taller. max-height:none releases the base rule's clamp to
the frame — the padding above is sized so it would not bind anyway,
but leaving a cap in place that is only just clear of the value it
is capping is how this silently stops matching the grid later. */
.pd-gallery img {
height: calc(((1120px - 2 * var(--grid-edge) - 2 * var(--grid-gap)) / 3 * 0.7 - 2px) * 0.88587 * 1.2);
width: auto;
max-height: none;
max-width: 100%;
}
/* ══ FREQUENTLY BOUGHT TOGETHER — a horizontal run of product cards ══
Asked for outright: the four tiles become a horizontally scrolling
list, each item drawn as the product card the catalog and the home
grid use, at 70% so the next one peeks in from the right edge.
The scroller breaks out to the true screen edges and puts the
container's own 24px back as padding, the same full-bleed idiom
.products-grid uses one tier up in this file. That is what keeps the
FIRST card's left edge on the page's own left margin ("it remains
left aligned at the beginning") while the run still carries on past
the right edge rather than stopping inside it.
gap × 0.7 for the same reason the cards are: the space between two
cards is part of what is being scaled, and leaving it at the full
--grid-gap would read as the cards having been shrunk and then
spread out. */
.fbt-grid {
display: flex;
grid-template-columns: none;
gap: calc(var(--grid-gap, 12px) * 0.7);
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x proximity;
margin-inline: calc(-1 * var(--pa-container-pad, 24px));
padding-inline: var(--pa-container-pad, 24px);
/* Matched to the padding above, and load-bearing: a snap container's
snapport defaults to its PADDING box, so snapping the first card's
start edge to it meant scrolling the strip 24px to put that card
flush against the true screen edge — the exact opposite of the
"left aligned at the beginning" this is supposed to hold. Insetting
the snapport by the same 24px makes the resting position the one
the padding already describes. Same fix, same reason, as
.op-panels' own scroll-padding-inline on the home page. */
scroll-padding-inline: var(--pa-container-pad, 24px);
}
/* zoom, not transform: scale() — the whole card has to be 70% for
LAYOUT as well as paint, so four of them occupy 70% of the room four
full-size cards would and the scroll length is right. A transform
leaves the element's box at full size, so the cards would be drawn
small with full-size gaps between them and the strip would scroll
past a third of empty space at the end. zoom is what .op-card
already uses on the home page for the same reason.
The width is the catalog grid item's own, unscaled — one column,
full-bleed, 24px a side, i.e. 100vw − 48px (see .products-grid in
this same block). Viewport units are not themselves rescaled by
zoom, so this resolves to the real 327px on a 375px phone and the
zoom then renders it at 228.9px: exactly 70% of a product card,
which is what was asked rather than 70% of some other measure.
aspect-ratio/height cancel the desktop tile's forced square — the
card is as tall as a product card's own parts make it now, not a
square with the caption fitted into it. */
.fbt-card {
zoom: 0.7;
flex: 0 0 auto;
width: calc(100vw - 2 * var(--pa-container-pad, 24px));
aspect-ratio: auto;
height: auto;
scroll-snap-align: start;
/* The card's own chrome, restated from .product-card so the two are
the same object: same border, same radius, same ground, same clip
of the photo's top corners. */
background: var(--bg-primary);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
/* .card-body (the quantity stepper and Add to Cart) has no
counterpart here — "there are no buttons though" — but its 20px of
bottom padding is what stops a product card's price sitting on the
card's own edge. 12px here plus .fbt-body's 8px margin-bottom
below reproduces exactly that 20px. */
padding-bottom: 12px;
}
/* The photo well, matched to .card-img-wrap's phone-tier geometry
term for term: the pinned frame height (the desktop card measure ×
0.7 — see .products-grid .card-img-wrap in this same block), the
figure's 1px band, and the bottle's own 88.587% height and 2.096%
downward nudge. Restating the expressions rather than the pixels is
what keeps this card the same object as a grid card if any of them
is retuned. */
.fbt-img {
position: relative;
flex: 0 0 auto;
width: 100%;
height: calc((1120px - 2 * var(--grid-edge) - 2 * var(--grid-gap)) / 3 * 0.7);
padding: 0;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-primary);
}
/* .card-img-wrap::after — the faint sheen down the top of the well. */
.fbt-img::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, transparent 38%);
pointer-events: none;
}
.fbt-img figure {
position: relative;
z-index: 1;
padding: 1px 0;
box-sizing: border-box;
}
.fbt-img img {
width: auto;
height: 88.587%;
max-width: 100%;
max-height: 100%;
object-fit: contain;
transform: translateY(2.096%);
}
/* .card-top's inset plus .card-header's fixed 82px, bottom-aligned —
the block a product card reserves for its name and price, so a
one-line name and a two-line one both sit their price on the same
baseline and four cards in a row line up. */
.fbt-body {
display: flex;
flex-direction: column;
justify-content: flex-end;
height: 82px;
padding: 0 20px 4px;
margin-bottom: 8px;
}
/* .card-name, verbatim. */
.fbt-name {
font-family: 'Inter', sans-serif;
font-size: 22px;
font-weight: 700;
letter-spacing: -0.44px;
line-height: 1.1;
text-transform: uppercase;
margin-bottom: 1px;
color: #000;
}
/* .card-meta, verbatim — size left, price right. The "From" prefix
goes: a card that names one size should not hedge about which price
it is quoting, and the grid card it is copying does not. */
.fbt-meta {
display: flex;
justify-content: space-between;
font-family: 'Helvetica', 'Helvetica Neue', var(--font-sans);
font-size: 21.6px;
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.2;
color: #4d4f52;
}
.fbt-meta-size { display: inline; flex: 0 1 auto; min-width: 0; }
.fbt-from { display: none; }
/* Inherit, not restate: .fbt-price carries its own smaller desktop
type, and every one of those properties has to give way to the
.fbt-meta row above or the price would be set differently from the
size beside it. */
.fbt-price {
flex: 0 0 auto;
text-align: right;
font: inherit;
letter-spacing: inherit;
color: inherit;
}
/* ══ LAB RESULTS — one column, two rows, then the rest on request ══
One per row, so a certificate row is exactly as wide as the square
product frame at the top of the page (both are the container's own
full width at this tier) — asked for outright. */
.pd-tests-list { grid-template-columns: 1fr; }
/* The third row onward, until the button below is pressed. The number
here and TESTS_PREVIEW in js/product.js (which decides whether the
button is rendered at all) are the same figure written twice — they
have to move together. */
.pd-tests-list:not(.is-expanded) .pd-test:nth-child(n + 3) { display: none; }
.pd-tests-more {
display: block;
width: 100%;
margin-top: var(--grid-gap, 12px);
padding: 13px 16px;
/* --border-soft, not --border: the same border a .pd-test row draws
(see its own rule), so the button reads as the last item in the
list it belongs to rather than as a heavier control sitting under
it. Radius matches for the same reason. */
border: 1px solid var(--border-soft);
border-radius: var(--radius-md);
background: var(--bg-primary);
color: var(--text-primary);
font-family: inherit;
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: border-color var(--transition), background var(--transition);
}
.pd-tests-more:hover {
border-color: var(--border-accent);
background: var(--bg-secondary);
}
/* ── The certificate row, retold ──
The size line goes (asked for outright — .pd-test-top is the row that
carried it, and it holds nothing else), "Tap to expand" is added
under the date, and what is left is centred against the thumbnail
rather than sitting at the top of the row.
justify-content:center on the text column is what does that
centring: the ≤1024px rule already sets align-items:center on the
row, which centres the column's BOX against the shot, but the column
is a flex column stretched to the row's height and its own content
was still packed to the top of it. */
.pd-test-top { display: none; }
.pd-test-text { justify-content: center; }
.pd-test-cta {
display: block;
margin-top: 2px;
font-size: 11.5px;
font-weight: 700;
color: var(--text-secondary);
}
/* ── NEW, on anything tested in the last three months ──
Asked for outright; isRecentTest() in js/product.js decides which
rows get one. Pinned to the row's top-right corner rather than
placed in the text column: the column is vertically centred now, so
a flag inside it would ride up and down with however many lines of
component list a certificate happens to have. The corner is the one
place in the frame that is the same on every row.
The row is already position:relative-free — .pd-test is a flex
container with no positioning of its own — so it gets it here. */
.pd-test { position: relative; }
.pd-test-new {
display: inline-block;
position: absolute;
top: 10px;
right: 10px;
padding: 3px 7px;
border-radius: 999px;
background: #15803d;
color: #fff;
font-size: 9.5px;
font-weight: 800;
letter-spacing: 0.09em;
text-transform: uppercase;
line-height: 1.2;
}
/* ══ LAB RESULTS — one column, two rows, then the rest on request ══
One per row, so a certificate row is exactly as wide as the square
product frame at the top of the page (both are the container's own
full width at this tier) — asked for outright. */
.pd-tests-list { grid-template-columns: 1fr; }
/* The third row onward, until the button below is pressed. The number
here and TESTS_PREVIEW in js/product.js (which decides whether the
button is rendered at all) are the same figure written twice — they
have to move together. */
.pd-tests-list:not(.is-expanded) .pd-test:nth-child(n + 3) { display: none; }
.pd-tests-more {
display: block;
width: 100%;
margin-top: var(--grid-gap, 12px);
padding: 13px 16px;
/* --border-soft, not --border: the same border a .pd-test row draws
(see its own rule), so the button reads as the last item in the
list it belongs to rather than as a heavier control sitting under
it. Radius matches for the same reason. */
border: 1px solid var(--border-soft);
border-radius: var(--radius-md);
background: var(--bg-primary);
color: var(--text-primary);
font-family: inherit;
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: border-color var(--transition), background var(--transition);
}
.pd-tests-more:hover {
border-color: var(--border-accent);
background: var(--bg-secondary);
}
/* ── The certificate row, retold ──
The size line goes (asked for outright — .pd-test-top is the row that
carried it, and it holds nothing else), "Tap to expand" is added
under the date, and what is left is centred against the thumbnail
rather than sitting at the top of the row.
justify-content:center on the text column is what does that
centring: the ≤1024px rule already sets align-items:center on the
row, which centres the column's BOX against the shot, but the column
is a flex column stretched to the row's height and its own content
was still packed to the top of it. */
.pd-test-top { display: none; }
.pd-test-text { justify-content: center; }
.pd-test-cta {
display: block;
margin-top: 2px;
font-size: 11.5px;
font-weight: 700;
color: var(--text-secondary);
}
/* ── NEW, on anything tested in the last three months ──
Asked for outright; isRecentTest() in js/product.js decides which
rows get one. Pinned to the row's top-right corner rather than
placed in the text column: the column is vertically centred now, so
a flag inside it would ride up and down with however many lines of
component list a certificate happens to have. The corner is the one
place in the frame that is the same on every row.
The row is already position:relative-free — .pd-test is a flex
container with no positioning of its own — so it gets it here. */
.pd-test { position: relative; }
.pd-test-new {
display: inline-block;
position: absolute;
top: 10px;
right: 10px;
padding: 3px 7px;
border-radius: 999px;
background: #15803d;
color: #fff;
font-size: 9.5px;
font-weight: 800;
letter-spacing: 0.09em;
text-transform: uppercase;
line-height: 1.2;
}
/* ── Compound details: values on one left edge ──
Was label-left / value-right with the two pushed apart
(justify-content: space-between), so a one-word value and a
forty-character sequence started at completely different x
positions and the block read as ragged. A two-track grid instead:
the values all begin on the same line, left-aligned, and read down
as a column.
42% of the 327px this column is on a 375px phone puts that line
~26px to the LEFT of the screen's centre — "slightly left of the
center of the screen", asked for outright. A percentage rather than
a pixel figure so it holds the same relationship at every width in
the tier. */
.pd-prop {
display: grid;
grid-template-columns: 42% 1fr;
gap: 0;
}
.pd-prop-value { text-align: left; }
/* The rules that close the block top and bottom, removed — asked for
outright. Only those two: the lines BETWEEN rows are what separate
one fact from the next and they stay. */
.pd-props { border-top: none; }
.pd-prop:last-child { border-bottom: none; }
/* ── Compound details, moved below the lab results ──
The move itself is js/product.js's (CSS `order` cannot reorder
across two different parents — see the comment there). What is left
for CSS is its spacing in that new home: down here it is one of the
top-level sections, so it takes the same gap above them all, and it
gives up the 28px every .pd-block carries below itself — which
would otherwise sit between it and the reviews on top of their own
gap. Neither applies on desktop, where the block is an ordinary
member of the info column. */
.pd-block--props {
margin-top: clamp(40px, 4.5vw, 64px);
margin-bottom: 0;
}
/* ── The order process, as swipeable cards ──
The three-tab slider goes. Six subsections, one per screen, moved
through by swiping — which is the gesture a phone already has, and
needs no control of its own taking up a row above the content.
display:contents on the panels is what makes six cards out of three
panels: it removes the panel's own box from the layout so its two
.op-step children become direct flex items of .op-panels, giving one
track of six rather than three tracks of two. It also applies to the
panels the tab script has marked [hidden] — deliberately: at this
width there is no selected tab, every step is simply on the strip. */
.op-slider { display: none; }
.op-panels {
display: flex;
/* Releases the fixed height the script measures for the tab
cross-fade (--op-panels-h), which is the tallest single panel and
has no meaning once every step is its own card. */
height: auto;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
gap: 16px;
/* Vertical padding so the front card's shadow is not clipped by the
strip's own overflow, which has to stay hidden on the Y axis to
keep this a horizontal scroller. */
padding-block: 10px;
/* Stretch, not start: a card needs a real, bounded height for its
own overflow-y:auto (below) to ever actually trigger. start
instead gave every card its natural content height with nothing
to overflow against, so a card taller than the space this strip
actually has just had its bottom silently clipped by this
element's own overflow-y:hidden one property up — the strip was
doing the clipping .op-step was supposed to be doing itself. A
short card now gets empty space below its content instead, which
reads far better than a cut-off table. */
align-items: stretch;
/* True full-bleed, THEN a matching percentage padding put back —
not to restore the old inset, but to open peek room on both
sides of a centred card. That is the actual fix here: a card
used to be flex:0 0 100%, exactly the strip's own width, so
there was nowhere for a neighbour to be partly visible and
nothing on screen said "more of this scrolls" — every screen
just looked like a single static page. At 84% a sliver of the
card on each side is unavoidably in view before a visitor
touches anything, which is the whole ask.
-69.66px, not calc(-1 * var(--pa-container-pad, 24px)): that
formula assumed this strip sits directly inside a plain 24px-
padded .container, the same as .products-grid/.certs-grid/
.featured-products (whose own copy of this exact comment it was
adapted from) — but this strip's real parent is .op-card, whose
own padding is a DIFFERENT variable (--op-card-pad, 22px here)
AND which carries zoom:0.9. -24px under-cancelled both of those
at once, leaving the strip's edges about 41px short of the true
viewport edge on both sides — enough that neither the "current
card centred" nor the "neighbour peeking at the very edge" part
of this design actually held. -69.66px is the number that
measurably lands both edges exactly on the viewport's own (0 and
100vw), checked at 320px and 390px alike — a derived formula
would need to know exactly how zoom rescales an ancestor's own
margin, which isn't documented behaviour to build on, so this is
measured against the real rendered box instead, the same way
every other zoom-adjacent number on this page has been.
scroll-padding-inline matches, so the FIRST and LAST cards still
snap centred with the same peek either side as every card in the
middle, rather than snapping flush to the strip's own edge.
var(--op-peek-pad), not a flat 8%: a flat percentage only equals
the true peek space when the card's own width is ALSO a fixed
percentage of the strip, which is what 84% + 8% + 8% summing to
100% actually encoded — the whole thing was solved for that one
card width. .op-step is a fixed px width now (see its own
flex-basis, below), unrelated to any percentage of the strip, so
8% stopped being the right number the moment that changed: 8%
(~31px) was noticeably less than the ~75px this card width
actually needs on each side, which is exactly the gap that left
the browser unable to scroll far enough to ever centre the FIRST
or LAST card — it hit the start/end of the scrollable range
first and stopped short, off-centre by roughly that difference.
--op-peek-pad is published by the same script that sets
--op-heading-w (see index.html), measured directly against the
real rendered page rather than expressed as a calc() here: a
calc(100% - var(--op-heading-w)) version of this was tried first
and measured WRONG once this element's own -69.66px margin-inline
and .op-card's zoom:0.9 were both actually in play — "100%" was
not resolving against the width this element's own containing
block reports on its own. Measuring the real box directly sidesteps
needing to know why. */
margin-inline: -69.66px;
padding-inline: var(--op-peek-pad, 8%);
scroll-padding-inline: var(--op-peek-pad, 8%);
}
.op-panel,
.op-panel[hidden] {
display: contents;
}
/* ── Each step is a card you move THROUGH ──
A bordered card, same as any other on the site — no scale and no
fade on a card that isn't centred, asked for outright: a neighbour
peeking in from the side should read as a normal card sitting to
that side, not a smaller, faded preview of one. Swiping is what
brings it into focus and sends the current card off the opposite
side to peek in turn; the strip's own scroll handles that motion,
nothing here needs to fake it with a transform.
--op-prox is still written per card by the script at the bottom of
index.html — 1 when the card is centred, falling to 0 a full
card-width away — but only the shadow still reads it: the front
card casts a real lifted shadow, and the rest flatten toward the
slightest shadow a plain card resting on the page would have,
rather than dropping to nothing. The value is declared here as
well so a card still looks right before the first scroll event
(and if the script never runs at all, every card simply renders as
the front one). */
/* ── "STEP 1" above each card's title ──
The same eyebrow the tab selector puts above a tab's own label above
this breakpoint, restated per card now that the selector is gone —
asked for outright, "styled exactly how STEP [X] is in the tab
selector". Every value below is copied from .op-seg-step (font-size,
weight, tracking, uppercase, opacity) plus the colour .op-seg
resolves to for the SELECTED segment (--text-primary, not the
--text-muted an unselected one gets): every card down here is a card
you are actually looking at, so the "current" treatment is the one
that matches.
text-transform is what turns the markup's "Step 1" into STEP 1 —
same as the slider, which is also written in title case and set in
caps by this same property.
── The two gaps ──
Above it: nothing to set. This is now .op-step's FIRST child, so its
own top edge sits exactly where .op-step-title's used to — .op-step's
30px padding-top (below) and no margin of its own. That is the
"spaced the same way from the top the current title is" half.
Below it: .op-seg is a flex column with gap:3px between the step
number and the tab's label, and .op-step is a flex column with
gap:clamp(6px, 1vh, 10px) between all of ITS children. Flex gap
cannot be overridden for one pair, so the difference is taken back
as a negative margin: 3px minus whatever that clamp resolves to
leaves exactly 3px of real space between this and the title,
matching the slider, without disturbing the gap between the title
and the body copy under it. */
.op-step-num {
display: block;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.13em;
text-transform: uppercase;
opacity: 0.7;
color: var(--text-primary);
margin-bottom: calc(3px - clamp(6px, 1lvh, 10px));
}
/* ── More air under the card's own title ──
1.5x the space between .op-step-title and the body copy under it,
asked for outright. That space is .op-step's flex `gap`
(clamp(6px, 1vh, 10px) — 8.12px on a 812px-tall phone), and flex gap
applies to every pair of children at once: raising it here would
also push the body copy off the table below it, and the table off
its notes. So the extra half is added as a margin on the title
alone, the same device .op-step-num above uses to go the other way.
× 0.5, giving gap + gap/2 = 1.5 × gap, and written as the same
clamp() the gap itself is rather than the 4.06px it resolves to at
one viewport height — the two have to move together, since this is
specified as a multiple of that gap and not as a fixed distance.
The title is followed by .op-step-body on all six cards (checked),
so this only ever opens the one gap that was asked about. */
.op-step-title {
margin-bottom: calc(clamp(6px, 1lvh, 10px) * 0.5);
}
.op-step {
--op-prox: 1;
/* A fixed width, not a percentage of the strip — the rendered width
of the words "Your Order Process", published as --op-heading-w on
.op-card by the script at the bottom of index.html (see the
comment there), times 1.1. Matching the heading exactly was the
original request; the 10% was a later adjustment on top of it.
84% is kept as the fallback for the moment before that script
runs.
The peek padding that centres the FIRST and LAST card (see
.op-panels' --op-peek-pad below) is computed against this same
×1.1 width in index.html — the two have to move together, or
the centring this fixes would go stale again the same way the
84%→fixed-width change broke it the first time. */
flex: 0 0 calc(var(--op-heading-w, 84%) * 1.1);
scroll-snap-align: center;
min-width: 0;
box-sizing: border-box;
/* Left/right are 1.5x the base 18px ("spacing of the content... and
the left and right edges"), asked for outright and unchanged.
The VERTICAL pair is 20px lighter than it was (top 30→20, bottom
20→10), which takes exactly that much off every card in the strip.
The figure is not arbitrary: it is the 19.56px the second transit
disclaimer occupied before it was merged into the first (16.88px
of line plus the list's own 3px row gap, measured), rounded to 20.
Why padding rather than leaving the removal to do it: the strip is
align-items:stretch, so every card is as tall as the TALLEST, and
"Packing + Dispatch" was only tied for that job. With its extra
line gone it dropped to 417px — exactly level with "Browse Our
Catalog", which then pinned the strip at the same height. The
space the disclaimer freed was real but invisible, spent holding
the row level with a different card. Taking it off the padding
applies it to all six at once, which is what actually makes the
cards smaller. */
padding: 20px 27px 10px;
background: var(--bg-primary);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: 0 calc(2px + 2px * var(--op-prox)) calc(6px + 6px * var(--op-prox))
rgba(10, 10, 12, calc(0.03 + 0.05 * var(--op-prox)));
/* Short, and on the one property that actually still changes now
(shadow) — this rides a scroll, so anything longer reads as lag
rather than as easing. */
transition: box-shadow 0.18s ease-out;
/* visible, NOT auto — this used to be the card's own scrollbar, and
it is the thing being removed: on a real phone the longest card
(Packing + Dispatch) did not fit the one-screen budget the section
was held to, so its content scrolled INSIDE the card while the
page scrolled around it. A card is a fixed thing you swipe past,
not a second scroller nested in the first. Every card now takes
the height its own content needs (see .op-card's max-height and
.op-panels' align-items, both below/above) and the section is as
tall as the tallest card rather than as tall as one screen. */
overflow-y: visible;
}
/* transform/opacity dropped: .op-step no longer sets either, so
there's nothing left for reduced motion to cancel there — only
the shadow's own transition, which still ties to scroll position
and is worth freezing for the same reason every other
scroll-driven transition on this page is. */
@media (prefers-reduced-motion: reduce) {
.op-step { transition: none; }
}
/* The divider the 640px rule draws between stacked steps is a
same-panel device; side by side as cards there is nothing to
divide. margin-top and border-top only — NOT padding-top: every
.op-step now carries its own uniform 20px top padding as a card
(see .op-step above), and this selector matches the second step of
each original pair (Pay It Your Way, Packing + Dispatch, Arrival +
Aftercare). Zeroing padding-top here wiped that base padding out
from under exactly those three, so every second card in the strip
had its title sitting flush against the top edge instead of clear
of it like the other three. */
.op-panel .op-step + .op-step {
margin-top: 0;
border-top: none;
/* Restated at the card's own 30px (1.5x the original 20px, moving
with it above) rather than left to fall through to the 640px
rule's 22px, which was sized for a divider (see above) and has
no reason left to govern this once the divider is gone —
matching it here is what keeps every second card's title exactly
as clear of the top edge as the other three, rather than leaving
it a fixed 8px short. */
padding-top: 30px;
}
/* Every .op-link CTA (Browse the catalog, See the lab results,
Shipping & delivery, Returns & refunds, Leave a review) was
removed here, then centred as a button before that — both undone.
Back to plain text links, same underlined look as every width
above this tier, asked for outright: "bring back the text CTAs".
Leave a review specifically is removed again below, asked for
outright a second time — the other four stay as plain text links. */
.op-link.op-link--spaced { display: none; }
/* Browse Our Catalog and Arrival + Aftercare, trimmed — asked for
outright, "keep the essential information, just make more
efficient". Same full/short swap every other phone-tier copy
reduction on this page uses. */
.op-body-full { display: none; }
.op-body-short { display: inline; }
/* ── The section lands right at one screen of scroll ──
.op-bleed's own padding-top (base rule, --op-gap) is a DESKTOP
figure — ~0.149 of the visible height above the fixed chrome,
tuned to centre this band in roughly two screens' worth of space.
.hero is min-height:100vh, so without an override here that gap
stacks entirely AFTER one full screen of scroll: on a phone this
read as a blank gap before the section, not "the next thing
scrolling reveals" the way .research-banner--fold and the
featured-products grid already are. Zeroed so this band's own top
edge sits right at the one-viewport mark instead, asked for
outright. padding-bottom is untouched — nothing here was asked
about the space below it. */
.op-bleed {
padding-top: 0;
/* ── And half the space BELOW, to "Most Requested Compounds" ──
Asked for outright. The visible gap is not this padding on its own:
.research-banner--capped adds 24px of its own padding-top under it,
and its heading is absolutely positioned with bottom:0 inside a box
exactly ONE line tall (.research-banner-inner, height 32.8px × 1.02
— see the rules further down), so a two-line title spills its first
line 33.456px back UP into this gap. Measured top of the title to
bottom of the order-process card, the real space is therefore
--op-gap + 24px - 33.456px, i.e. --op-gap - 9.456px.
Halving THAT is what was asked, not halving this declaration: the
padding that leaves is --op-gap minus half the real gap, which
rearranges to (--op-gap + 9.456px) / 2.
── Resolved to a constant here, deliberately ──
--op-gap is a fraction of (100vh − the fixed chrome), so this
padding used to change with the viewport's HEIGHT: measured, it
moved from 48.6px at 700px tall to 59.9px at 852px. That made the
whole document below this band a second height-dependent term on
top of the hero's own svh floor, so any change in viewport height
re-laid-out everything under it — which on a phone is what
"the Your Order Process title moves down as I scroll, pushing the
content below it down too" actually is.
A phone has no use for the tracking anyway. The desktop rule this
overrides is centring a band in roughly two screens of space;
down here the section starts at the one-viewport mark (padding-top
is 0, just above) and this is simply the gap to the next heading.
57px is what the old expression resolved to at 812px tall — the
height it was originally tuned against — so the spacing is
unchanged on the phone it was designed for and merely stops
drifting on every other one. */
padding-bottom: 57px;
}
/* One screen for the whole thing — heading, description and the card
strip — so it can be centred on a phone and be complete. The strip
takes whatever the head does not, which is what makes this hold
regardless of how long the heading wraps. */
.op-card {
display: flex;
flex-direction: column;
/* Was 100dvh. The cap is gone, asked for outright: it is what forced
.op-step to carry its own scrollbar, and on a phone whose screen
was shorter than the longest card's content ("Packing + Dispatch")
the result was a card frame with a scrolling region inside it.
Nothing else here depended on the cap — the flex:1/min-height:0
chain below (.op-content, .op-panels) simply resolves against the
card's own content height instead of against one screen, and
.op-panels' align-items:stretch still gives every card in the
strip the same height as the tallest one, so the strip stays a row
of equal cards rather than becoming a ragged one. */
max-height: none;
/* No overflow property here any more — it was the actual cause of
the edge cards reading as cut off. .op-panels breaks out past
.op-card's own padding to reach the true screen edges (see its
margin-inline above), but overflow:hidden clips at .op-card's OWN
box regardless of what escapes it, chopping the peeking neighbour
off right at the old, narrower boundary. Setting only
overflow-y:hidden doesn't dodge this either — per spec, an axis
left at the visible default while the OTHER axis is anything
else computes to auto, not visible, so the X axis would still
clip (just with a phantom scrollbar instead of a border to blame
it on).
max-height:100dvh alone still does the real work of keeping this
section to one screen: everything under it is a flex:1;
min-height:0 chain (.op-content, .op-panels) that shrinks to
whatever room max-height leaves rather than pushing the card past
it. The vertical safety net that "overflow:hidden" was standing
in for still exists one level down — .op-panels keeps its own
overflow-y:hidden — so nothing here was actually relying on THIS
element clipping vertically once that's accounted for. */
}
/* margin-top: 0 cancels the base rule's clamp(30px, 3.9lvh, 48px),
which is sized for the desktop layout where .op-content follows
.op-card-head directly and that margin is the only thing setting
the gap under the slider.
It was zeroed here because the journey indicator sat between the
two at this tier and supplied the gap itself. That indicator is
gone, so .op-card-head's own margin-bottom is what separates the
heading from the strip now — one gap from one place, which is why
this stays at 0 rather than going back to the clamp and stacking a
second one on top of it. */
.op-content { flex: 1; min-height: 0; display: flex; margin-top: 0; }
.op-panels { flex: 1; min-height: 0; }
/* ── The disclaimer above "Most Popular", removed ──
Asked for outright. display:none on the whole line rather than just
its two spans — nothing else in .research-banner-inner needs it to
stay in flow once it's not rendering anything. */
.research-banner--capped .research-banner-text { display: none; }
/* ── "Most Popular" → "Most Requested Compounds" ──
The short form existed because the full sentence didn't fit a
phone at the size the title wants to be — asked for outright to
show the full title here anyway. */
.mega-full { display: inline; }
.mega-short { display: none; }
/* Flat 32.8px — .op-heading's own flat size across this whole tier
("Your Order Process"), asked for outright: "the font size of
... Your Order Process at all sizes in this range." Replaces the
≤640px rule's min(13.5vw, 62px) (up to 62px, nearly double this)
for every width down here, not just 641–768. line-height restated
too: the ≤640px rule's own 1.02 stopped applying above 640px once
font-size no longer came from that rule either, and the height
calc below assumes this exact value holds everywhere in ≤768. */
.research-banner--capped .process-mega-heading {
font-size: 32.8px;
line-height: 1.02;
}
/* Centred, reversing the left-alignment this carried — asked for
outright, and only at this tier: the base rule's left alignment
still governs every width above it. margin-inline:auto is what
actually centres the block (a max-width:92% box), text-align:center
what centres the two lines inside it; the base rule's own
margin-inline is auto already, but it is restated here because the
rule this replaces had pinned it to 0.
The wrap is untouched by this: the box keeps the same width it had
(see the absolute left/right further down, both zeroed to the same
value so centring is symmetric), and at 32.8px "Most Requested
Compounds" still breaks after "Requested" on every width in this
tier — the two-line shape and the type size are explicitly not part
of what changes here. */
.research-banner--capped .process-mega-heading {
text-align: center;
/* margin-inline stays 0 (the base rule's own value, restated here
because the rule this replaces had set it explicitly for the
left-aligned version). An auto margin cannot centre this element:
it is absolutely positioned with both left and right set below, so
the box's own position is already fully determined and an auto
margin resolves against an over-constrained equation rather than
centring anything. Equal left/right insets are what centre the
BOX; text-align:center is what centres the two lines inside it. */
margin-inline: 0;
}
/* ── Growing to two lines spills UPWARD, not down ──
The disclaimer above is gone, so .process-mega-heading is the only
thing left in .research-banner-inner — normal flow would still let
a second line push everything below it (the product grid) down by
exactly one more line's height, which is the thing being avoided:
"without pushing content around above it or below it."
.research-banner-inner is pinned to exactly one line's own height
(the flat 32.8px above × 1.02) and given a positioning context;
the heading is taken out of flow and bottom-anchored inside it. A
single line fills that box exactly as before. A second line
extends the heading upward past the box's own top edge instead of
the box growing to fit it — nothing downstream of
.research-banner-inner ever sees a size change, and nothing above
it moves either, since position:absolute took the heading out of
the flow that would have pushed on it. There is room for that
overflow because .research-banner--capped's own padding-top
(inherited from the shared .research-banner rule) sits directly
above this box, unclaimed by anything else.
overflow:visible on .research-banner--capped is the other half of
that: the shared .research-banner base rule sets overflow-x:auto
for the FOLD disclaimer's own benefit (a sentence that doesn't
wrap, elsewhere), and per spec a non-visible overflow-x forces
overflow-y to compute to auto too even though nothing set it —
auto establishes a scroll/clip container on BOTH axes, which is
what was clipping the heading's own upward spill (the screenshot:
the second line's ascenders sliced clean off). --capped's own text
always wraps rather than needing horizontal scroll protection, so
it doesn't need what the fold variant does, and overriding back to
visible here is what actually lets the overflow show. */
.research-banner--capped {
overflow: visible;
}
.research-banner-inner {
position: relative;
height: calc(32.8px * 1.02);
}
.research-banner--capped .process-mega-heading {
position: absolute;
/* Equal on both sides now that the title is centred (above). It was
left:24px / right:0 — matching the product grid's own left edge
(--grid-edge × 2) for a LEFT-aligned title, which is exactly the
alignment that has just been reversed. Left in place it would
offset the centre line by 12px, so the two lines would sit
centred on something that is neither the grid nor the screen.
24px on both sides keeps the grid's own inset as the box's
measure while making the centring symmetric.
width:auto is what lets those two insets actually decide the box.
The base rule pins width:100%, which with both left and right set
over-constrains the box — the browser then keeps `left`, ignores
`right`, and the box runs 18px past where the right inset asked it
to stop, putting its centre line 9px right of the screen's. Auto
solves for the width instead, so the box is exactly the 327px
between the two insets and its centre is the screen's. */
left: 24px;
right: 24px;
width: auto;
bottom: 0;
}
/* ── The footer is exactly one screen tall ──
Asked for outright, along with the two things that make it possible:
a smaller wordmark, and the black band ABOVE that wordmark as the
thing that absorbs whatever is left over on a given device.
min-height, not height: the footer's own contents (four link
columns, the legal block) have a natural height this cannot go
below, and a hard `height` would simply clip them — .footer already
carries overflow:hidden — on a screen too short to hold them. On any
screen with room to spare the two are the same thing.
box-sizing so the 24px/32px of padding below counts INSIDE the one
screen rather than adding a second band under it. */
.footer {
min-height: 100svh;
box-sizing: border-box;
/* Down from the 48px the ≤1024px rule sets. This is only the FLOOR
for the space above the wordmark — the real gap is whatever
.footer-brand-row's auto margin below collects, which is the
"play with the black spacing above the PURE AMINO logo for any
given device" half of the ask. On a tall phone that lands around
80px; on one with no slack at all it falls back to this. */
padding-top: 24px;
}
/* The one flexible thing in the column. .footer is display:flex;
flex-direction:column, so an auto margin on its FIRST child claims
every pixel of leftover height at once and puts it all above the
logo — the whole group is pushed to the bottom of the one-screen
box and the slack shows as black space at the top, which is exactly
what was asked for. With no slack it resolves to 0 and nothing
moves. */
.footer-brand-row { margin-top: auto; }
/* 180px, down from 300px. The wordmark is the one element here whose
size is free — the link columns and the legal text are all copy —
so shrinking it is what buys the headroom that makes the one-screen
fit reachable on a phone rather than only on a tall desktop window.
Height follows on its own: .footer-brand-img is width:100%;
height:auto, so the mark scales whole. */
.footer-brand { max-width: 180px; }
/* ══ The wordmark, on the page's own left edge ══
Asked for outright: aligned with the left edge of a product grid
item, and about 10% bigger.
12px, not the 4px of optical air this carried: .nav's own
padding-inline resolves to 12px across this whole tier (--nav-gutter,
from the ≤1024px rule — the max() that would otherwise widen it only
bites well above 768px), so 12 + 12 puts the mark's left edge on 24px
— exactly where a product card's does (.container's 24px padding,
which the grids cancel and put back as their own inset; see
.products-grid in this block).
24.2px is 22px × 1.1. Height only: .nav-logo-img is width:auto, so
the mark scales whole rather than being stretched. */
.nav-logo { padding-left: 12px; }
.nav-logo-img { height: 24.2px; }
/* ══ Cart line: the bin sits level with the stepper ══
.card-qty-selector carries margin-bottom:8px because on a product
CARD it stands directly above the Add to Cart button. In
.cart-line-meta there is nothing under it, and that margin was the
whole bug: the row is align-items:center, which centres each child's
MARGIN box, so a stepper whose margin box is 44px tall next to a
36px button ends up sitting 4px higher than it. Measured, not
guessed — stepper top 327.5 against the bin's 331.5.
Zeroing it here rather than on .card-qty-selector itself leaves the
product card, which does need it, alone. */
.cart-line-meta .cart-line-qty { margin-bottom: 0; }
/* ── Footer, restacked ──
Logo and description first at full width, then Shop and Help side
by side, then Legal across the bottom — all on one left edge. The
desktop columns right-align their text (so each column's own right
edge lines up); left here, because a two-up grid of right-aligned
columns on a phone puts the two headings at unrelated x positions
and reads as two unaligned lists rather than one block. */
.footer-top {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px 20px;
text-align: left;
}
.footer-brand-col { grid-column: 1 / -1; }
/* The last column (Legal) spans the full width under the other two
rather than leaving a hole beside itself.
:last-child, NOT :nth-of-type(3) — which is what this was and was
wrong: nth-of-type counts by ELEMENT type, and .footer-brand-col is
a sitting in the same row, so "the third div" was the SECOND
sitemap column. That put Help across the full width and left Shop
and Legal each alone on a half-width row: three stacked rows
instead of the two-up-then-one this is meant to be. */
.footer-col:last-child { grid-column: 1 / -1; }
.footer-col,
.footer-col * {
text-align: left;
align-items: flex-start;
}
.footer-bottom { text-align: left; }
}
/* ════════════════════════════════════════════════════════════
CART LINE — the stacked layout, ≤640px
------------------------------------------------------------
A separate query from the ≤768px block above, and deliberately: the
price only drops beneath the copy below 640px (see .cart-line's own
grid-column rule in the earlier 640px block). Between 641 and 768 the
line is still three columns with the price in its own right-hand one,
vertically centred and already aligned — putting these rules there
would break a layout that has nothing wrong with it.
Later in the file than the base .cart-line-price rule on purpose. That
rule sits AFTER the original ≤640px block, so at equal specificity it
already wins there (which is why that block's own align-items:
flex-start never took effect and the price has always rendered
right-aligned). Anything meant to actually change the price has to
come after it, not just be inside a narrower query.
════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
.cart-line-price {
/* Right edge on the control row's, instead of 9px past it out at the
container's edge — that overhang is the "not aligned with the
components above it". 160px is what .cart-line-meta's own contents
actually measure: the stepper's 108px (its ≤640px rule), the row's
16px gap, and the 36px remove button. The price column starts on
the same left edge as that row, so a matching width puts the two
right edges on one line.
Restating the three numbers is the cost of them living in three
different rules; they have to be changed together. */
width: calc(108px + 16px + 36px);
/* Right-aligned within that box — the base rule's own flex-end,
restated because it is the half of this that does the visible
work and should not be left to be inherited by accident. */
align-items: flex-end;
/* Was 10px on top of the grid's own 16px row gap, i.e. 26px of air
above a figure that then sat unattached to anything. The row gap
alone still gives the price room to read as its own thing —
thinner, but not crowded. */
margin-top: 0;
}
}
/* The short form of the "Most Popular" disclaimer — hidden by default,
swapped in by the phone tier above. Declared at top level (not inside
the query) so the default state exists at every width. */
.rb-tiny { display: none; }
/* ============================================================
CHECKOUT — the address fields
------------------------------------------------------------
All five are always on screen, and Street address is itself the
autocomplete input (js/places.js binds to [name=line1] when no
dedicated search box exists). The separate search field above them,
and the reveal-on-pick that hid them until it was used, are gone.
============================================================ */
/* display:contents, and it is load-bearing rather than cosmetic: the
five address fields are direct children of .form-grid's grid and are
placed by it (two-up, with .full spanning). Wrapping them in a real
box to toggle would make the WRAPPER the single grid item and stack
all five inside it at one column. contents removes the wrapper's own
box and leaves its children as the grid's items, exactly as they were
before the wrapper existed.
The [hidden] pair is required because display:contents overrides the
UA's `[hidden] { display: none }` — a class-plus-attribute selector
beats the bare class, so the attribute keeps working. */
.addr-fields { display: contents; }
/* The [hidden] pair is kept even though nothing sets it any more: the
fields are always open now (the separate search box and the
manual-entry link are gone), and display:contents would override the
UA's `[hidden] { display: none }` if anything ever did.
.addr-search-hint and .addr-manual-link went with the search box. */
.addr-fields[hidden] { display: none; }
/* ============================================================
TAP TARGETS
------------------------------------------------------------
Measured, not guessed: each control below was hit-tested with
elementFromPoint outward from its own centre, because several of them
already carry an invisible ::after that makes the real target bigger
than the element box. Only the ones whose ACTUAL hit area came in
under 44x44 are here.
── Why (pointer: coarse) and not a width breakpoint ──
This is a question about the input device, not the window. A touch
laptop at 1300px needs a finger-sized target and a mouse user at
375px does not, so keying it to width would fix it in the wrong place
twice. It also means none of this touches the desktop design.
44px is Apple's HIG minimum and WCAG 2.5.5's; 48 is Android's. 44 is
the floor used throughout.
Inline links inside prose are deliberately absent. WCAG 2.5.8 exempts
them, and padding a link inside a sentence to 44px either overlaps the
lines around it or forces the paragraph's leading open.
============================================================ */
@media (pointer: coarse) {
/* The primary calls to action, at 40px. min-height rather than height:
several of these carry two lines of label at the narrowest widths and
must still be able to grow. */
.hero-btn,
.btn-cart,
.select-native {
min-height: 44px;
}
/* The hamburger, at 41x40. Its three bars are absolutely positioned
against this box at top 0 / 8 / 16 — and the .active rule re-points
them to 7px to form the cross — so growing the box to 44x44 would
have moved every one of them and broken the animation. Extended past
it instead: 13px top and bottom takes 18 to 44, 9px each side takes
26 to 44, and not one bar coordinate changes. */
.nav-toggle::after {
content: '';
position: absolute;
inset: -13px -9px;
}
.nav-icon { min-width: 44px; min-height: 44px; }
/* The offer pill's dismiss X, at 31x30 the smallest real target on the
site. The disc is sized to look right against the pill's 48px depth
and should not grow, so the target is extended past it instead —
an inset pseudo-element. 7px each way turns 30 into 44.
It sits over the pill's own click area, which reopens the offer, so
the two overlap by exactly the 7px ring. That is the right way round:
a near-miss on the X reopens the card, which is undoable, where a
near-miss on the pill would dismiss the offer for good. */
.promo-pill-x::after {
content: '';
position: absolute;
inset: -7px;
}
}
/* ============================================================
FINISHING TOUCHES
============================================================ */
/* ── Reduced motion, globally ──
There are already a dozen scoped @media (prefers-reduced-motion)
blocks in this file, each switching off one component's own
transition. They are all still correct and none of them caught the
two things that move the most:
scroll-behavior:smooth on , which animates every in-page jump —
the skip link, the FAQ anchors, showPayError's scrollIntoView. For
someone with a vestibular disorder a full-page smooth scroll is the
single worst thing on a site, and it was the one thing not covered.
And any animation or transition added later, anywhere, which now
defaults to off under this setting rather than defaulting to on and
waiting for someone to notice.
0.01ms rather than 0: a real duration still fires transitionend and
animationend, so any script waiting on one of those to clean up
(js/promo.js's face swap, the nav's bar transition) still gets its
event and does not strand an element mid-state. `!important` because
this has to beat rules that are more specific by nature. */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ── A visible focus ring on everything ──
21 components already define their own :focus-visible, and those are
deliberate — they sit on dark grounds or inside tight boxes where the
default ring reads badly. This is the floor under the rest: anything
focusable that has never been given one gets a ring rather than
nothing, which is the state a keyboard user cannot recover from.
:focus-visible, not :focus — a mouse click on a button should not
leave a ring behind it. Declared before the component rules would be
wrong (they need to win); this sits at the end of the file, so the
ordering is handled by position rather than by specificity, and any
component rule at equal specificity still takes precedence... which
is why the selector list is kept to bare elements: a component rule
is always at least as specific as `button`. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--text-primary);
outline-offset: 2px;
/* The ring is drawn outside the box and can be clipped by an
overflow:hidden ancestor. A radius that follows the element's own
keeps it from looking like a stray rectangle where it does show. */
border-radius: inherit;
}
/* On the dark grounds the site uses — the offer strip, the promo card,
the order-process band — a near-black ring is invisible. */
.promo-bar a:focus-visible,
.promo-card a:focus-visible,
.promo-card button:focus-visible,
.gsi-preview a:focus-visible,
.gsi-preview button:focus-visible,
.cart-float-bar a:focus-visible,
.cart-float-bar button:focus-visible {
outline-color: #fff;
}
/* ── iOS stops zooming the page on every field ──
Mobile Safari auto-zooms when a text field smaller than 16px takes
focus, and it does NOT zoom back out afterwards. The visitor is left
on a page that is now wider than the window, panning sideways to read
it — which on a checkout form happens at the worst possible moment and
looks like the site is broken.
The site's fields are 15px, one pixel under the threshold. Raised to
16 for coarse pointers only, so the desktop type scale is untouched;
at 15 vs 16 the difference is invisible next to a form that stops
jumping.
16px is the floor, not a size: max() lets anything already larger
stay as it is. */
@media (pointer: coarse) {
input,
textarea,
select,
.field-input,
.select-native,
.promo-popup-input,
.search-field input,
.auth-field input,
.auth-field textarea {
font-size: max(16px, 1em);
}
}
/* ── Hover states that do not stick on touch ──
A tapped element keeps :hover on a touch device until something else
is tapped, so a card the visitor merely scrolled past can be left
looking active. Anything whose hover is purely decorative belongs
inside @media (hover: hover); this is the blunt correction for the
ones that are not, and it costs a mouse user nothing because the
query does not match them. */
@media (hover: none) {
.product-card:hover,
.cert-card:hover,
.pd-size:hover,
.addr-option:hover {
border-color: var(--border);
background: inherit;
}
}
/* ── Print ──
The one page anyone prints is an order: a receipt for an expense
claim or a lab's records. Everything that is navigation, decoration or
an offer is noise on paper and is removed; what is left is the order
itself, in black on white.
Backgrounds are not printed by default in any browser, so a white-on-
dark button prints as white-on-white — invisible. Forcing colour to
black is what stops the total disappearing. */
@media print {
.nav,
.promo-bar,
.footer,
.promo-dock,
.gsi-preview,
.cart-float-bar,
.pa-toast,
.skip-link,
.age-gate,
.research-banner,
.op-bleed,
.account-nav,
.btn-cart,
.hero-btn,
.admin-tab-new-btn {
display: none !important;
}
html, body {
background: #fff !important;
color: #000 !important;
}
.page { padding-top: 0; min-height: 0; }
/* A link's destination is lost on paper. Printed after the label for
the ones that point somewhere a reader could actually go — not for
in-page anchors, which name nothing useful. */
a[href^="http"]::after,
a[href^="mailto"]::after {
content: ' (' attr(href) ')';
font-size: 0.85em;
word-break: break-all;
}
/* Never split a line item or a total across two pages. */
.order-card,
.ledger-entry,
.summary-row,
.oc-step { break-inside: avoid; }
}
/* ── The product page's buy row, stacked ──
Below 768px the quantity selector and Add to Cart stop sharing a line.
Side by side they split a phone's width between a control that needs
three tap targets and a button that needs a readable label, and
neither got enough: the selector sat at its 38/48/38 minimum while the
button wrapped.
Full width each, in the column's own measure — .pd-info already
carries the container's padding, so `width: 100%` is exactly "the page
less the standard edge spacing" with nothing restated here.
The gap between them is unchanged. .pd-buy's flex `gap` is 12px, and
turning the row into a column hands the same 12px to the vertical
axis — the distance the two controls sat apart horizontally is now the
distance they sit apart vertically, which is what was asked for. */
@media (max-width: 768px) {
.pd-buy {
flex-direction: column;
align-items: stretch;
}
.pd-qty { flex: 0 0 auto; }
.pd-qty .qty {
display: grid;
width: 100%;
/* The two end buttons keep their 44px tap size; the middle track
takes everything left over, which is what makes the control span
the column instead of sitting at its content width. */
grid-template-columns: 44px 1fr 44px;
height: 44px;
}
.pd-buy .btn-cart {
flex: 0 0 auto;
width: 100%;
}
}
/* ============================================================
CHECKOUT — the payment gate and the folded summary
============================================================ */
/* ── Payment options, held shut until the declaration is ticked ──
The research-use statement now sits ABOVE these (js/checkout.js), and
until it is answered the options are dimmed and their radios are
genuinely disabled — not merely styled as such, because a keyboard
user tabs straight past pointer-events and a CSS-only gate is not one.
The note above them says why, and disappears the moment it stops
being true. Greying without a reason is the failure this avoids:
"not yet" is only useful with "because of what". */
.pay-methods-note {
margin: 0 0 12px;
font-size: 13px;
font-weight: 600;
color: var(--text-muted);
}
.pay-methods-note[hidden] { display: none; }
.pay-methods.is-gated {
opacity: 0.45;
pointer-events: none;
}
.pay-methods.is-gated .pay-method { cursor: default; }
/* Plainly unavailable rather than looking pressable and refusing. The
submit handler still runs every one of its own checks — an Enter key,
a late autofill and a hand-edited DOM all arrive there regardless. */
.btn-place-order:disabled {
opacity: 0.4;
cursor: not-allowed;
}
/* ── The folded order summary ──
Desktop keeps the sticky sidebar exactly as it was: the toggle is not
rendered and the body is always open. Everything here is the phone
arrangement.
Order -1 moves the summary above the form. The grid collapses to one
column at 1024px (see .checkout-layout in the responsive block), and
source order would otherwise put a full-width summary between the
customer and the first field they came to fill in. */
.summary-peek { display: none; }
@media (max-width: 768px) {
/* Half the 48px the grid gives every other pair — asked for outright.
Stacked, the summary and Send To are one thing above another rather
than two columns needing a gutter between them, and 48px read as a
hole. */
.checkout-layout { gap: 24px; }
.checkout-summary {
order: -1;
padding: 0;
/* The sticky offset belongs to a sidebar. As a band at the top of a
one-column page it would peel off and follow the scroll over the
form. */
position: static;
/* The same frame as every section of the form below it, asked for
outright — .checkout-section's own border, radius and shadow. The
shadow is the only one that differed: .cart-summary carries the
deeper --shadow-md, which is right for a panel floating beside the
page and too heavy for a bar sitting in the same stack as the
cards it matches. */
box-shadow: var(--shadow-sm);
}
.summary-peek {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
/* 28px on every side. The horizontal figure is .checkout-section's
own, which is what puts the bag on the same left edge as the
fields in Send To below — asked for outright, and the reason it is
stated as one number rather than the 14px/16px a bar would
otherwise want.
Top and bottom match it too, also asked for: an even inset all
round makes this read as a section of the form that happens to
hold one row, rather than as a strip bolted above it. */
padding: 28px;
border: none;
background: none;
font-family: inherit;
color: var(--text-primary);
text-align: left;
cursor: pointer;
}
.summary-peek-bag {
flex: 0 0 auto;
width: 22px;
height: 22px;
color: var(--text-secondary);
}
/* Price and count on one line, left-aligned against the bag —
asked for outright. baseline, not center: the two are different
sizes and aligning their boxes would leave the smaller one floating
off the larger one's midline. */
.summary-peek-text {
flex: 1 1 auto;
min-width: 0;
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 4px 8px;
}
.summary-peek-price {
display: flex;
align-items: baseline;
gap: 7px;
font-size: 16px;
font-weight: 800;
letter-spacing: -0.01em;
}
/* The pre-discount figure. Muted and lighter so the pair reads as
"was, now" at a glance rather than as two competing prices — the
one being charged is the one in full weight. */
.summary-peek-was {
font-size: 14px;
font-weight: 600;
color: var(--text-muted);
text-decoration-thickness: 1.5px;
}
.summary-peek-now { color: var(--text-primary); }
.summary-peek-count {
font-size: 13px;
font-weight: 600;
color: var(--text-secondary);
}
.summary-peek-chev {
flex: 0 0 auto;
width: 18px;
height: 18px;
color: var(--text-muted);
transition: transform var(--transition);
}
/* Points down when there is more to see, up when there is not. */
.checkout-summary:not(.is-folded) .summary-peek-chev { transform: rotate(180deg); }
/* The body itself. display:none rather than a height transition: the
contents are a variable-length list of line items, so any animated
height would be measured-then-set on every cart change, and the one
thing this bar must not do is take a moment to tell you the total. */
.checkout-summary.is-folded .summary-body { display: none; }
.summary-body {
/* Same 28px inset as the bar above it, so the rows line up with the
bag rather than sitting 12px inside it. */
padding: 18px 28px 24px;
border-top: 1px solid var(--border-soft);
}
/* The heading is what the folded bar already says. */
.summary-body > h2 { display: none; }
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
.summary-peek-chev { transition: none; }
}
/* ============================================================
TOUCH PRESS FEEDBACK
------------------------------------------------------------
What a tap felt like before this block: nothing, then a state change
some time later. Every control on the site was styled for a mouse —
:hover carried the whole "you are about to press this" conversation,
and a finger has no hover. Four things were wrong at once on a phone:
1. The browser's own grey flash was the ONLY press feedback, and it
is a rectangle that ignores the control's radius and fires on a
delay of the OS's choosing, not the page's.
2. :hover styles stick after a tap on touch, because the element
stays "hovered" until you touch something else — so a button you
pressed a minute ago is still lit.
3. Nothing acknowledged the press in the moment BETWEEN the finger
landing and the work finishing. On a slow connection that is the
whole interaction.
4. Transitions tuned for a cursor (0.2s each way) read as lag when
the thing being animated is under your finger.
The fix is one press language applied to every control, scoped to
pointers that cannot hover so nothing about the desktop experience
moves.
Why (hover: none) rather than a width query: this is about the INPUT,
not the screen. A touchscreen laptop at 1400px wants the press state;
a narrow window on a desktop with a mouse does not.
============================================================ */
@media (hover: none) {
/* The site's own press state replaces the OS one. Removing the
highlight WITHOUT putting something in its place would be a
regression, which is why these two live in the same block. */
a, button, [role="button"], label.pay-method, .op-seg,
.pd-size, .qty button, input[type="checkbox"], input[type="radio"] {
-webkit-tap-highlight-color: transparent;
}
/* ── The press itself ──
Scale, not colour. A colour change has to be invented per control
(each of these has a different ground), whereas a scale reads
identically on all of them and cannot clash with any of the state
colours already in use — sold out, pre-order, selected, disabled.
0.96 is deliberately just past the threshold of being noticed: big
enough to feel like the surface moved under the finger, small
enough that a full-width button does not visibly detach from the
layout around it.
transform-origin: center so a wide button compresses toward its
own middle rather than pulling away from one edge. */
.btn-cart:active,
.btn-primary:active,
.btn-ghost:active,
.btn-danger:active,
.hero-btn:active,
.promo-popup-submit:active,
.promo-popup-decline:active,
.summary-upsell-add:active,
.summary-upsell-yes:active,
.summary-upsell-no:active,
.admin-link-btn:active,
.op-link:active,
.pd-size:active,
.pay-method:active,
.op-seg:active {
transform: scale(0.96);
transform-origin: center;
}
/* Faster IN than OUT. The press has to feel instantaneous — anything
over ~80ms and the surface appears to lag the finger — while the
release can afford to settle, which is what stops the control
snapping back and reads as springy rather than mechanical.
Stated on :active for the in, and on the base for the out, because
a transition declared in one place cannot have two durations. */
.btn-cart, .btn-primary, .btn-ghost, .btn-danger, .hero-btn,
.promo-popup-submit, .promo-popup-decline,
.summary-upsell-add, .summary-upsell-yes, .summary-upsell-no,
.admin-link-btn, .op-link, .pd-size, .pay-method, .op-seg {
transition: transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1),
background 0.18s ease, color 0.18s ease,
border-color 0.18s ease, opacity 0.18s ease;
}
.btn-cart:active, .btn-primary:active, .btn-ghost:active,
.btn-danger:active, .hero-btn:active,
.promo-popup-submit:active, .promo-popup-decline:active,
.summary-upsell-add:active, .summary-upsell-yes:active,
.summary-upsell-no:active, .admin-link-btn:active, .op-link:active,
.pd-size:active, .pay-method:active, .op-seg:active {
transition-duration: 0.06s;
}
/* ── Nothing presses that cannot act ──
A disabled control that shrinks under the finger is telling the
customer it accepted a press it is going to ignore. This is the one
place the press language has to stay silent. */
.btn-cart[disabled]:active,
.btn-primary[disabled]:active,
.btn-ghost[disabled]:active,
.hero-btn[disabled]:active,
.promo-popup-submit[disabled]:active,
.pd-size[disabled]:active,
.btn-cart.is-added:active {
transform: none;
}
/* ── Sticky hover, cancelled ──
On touch, :hover latches until the next tap elsewhere, so a button
pressed a minute ago is still wearing its hover fill. These restate
the resting look at a specificity that beats the plain :hover rules
they undo, for the controls where that latch is most visible. */
.btn-cart:hover:not(:active):not(:disabled) { background: var(--cta); }
.hero-btn-primary:hover:not(:active) { background: var(--text-primary); }
.op-seg:hover:not([aria-selected="true"]):not(:active) { background: transparent; }
}
/* The press is motion, and motion is exactly what this setting asks to
be spared. The colour and opacity halves stay — they carry meaning,
not decoration. */
@media (hover: none) and (prefers-reduced-motion: reduce) {
.btn-cart:active, .btn-primary:active, .btn-ghost:active,
.btn-danger:active, .hero-btn:active,
.promo-popup-submit:active, .promo-popup-decline:active,
.summary-upsell-add:active, .summary-upsell-yes:active,
.summary-upsell-no:active, .admin-link-btn:active, .op-link:active,
.pd-size:active, .pay-method:active, .op-seg:active {
transform: none;
}
}
/* ============================================================
ORDER PROCESS — non-mobile widening and type
------------------------------------------------------------
Every rule here is inside min-width:769px, deliberately and without
exception: the phone tier rebuilds this section as a swipeable strip
of six cards with its own widths, type and padding, and none of it
should move. Editing the shared base rules instead would have reached
both tiers.
── The measure ──
The two columns as a GROUP now line up with the "Research Use Only"
band above them, asked for outright. Measured rather than guessed: at
1440px that band's text ink runs 228px → 1212px, i.e. 984px wide and
centred on 720 — which is the viewport's own midline, and the midline
.op-card is already centred on. So only the width changes; the group
stays put and both columns gain the same amount.
Working back through the box chain, in CSS pixels because .op-card
carries zoom:0.9 and everything measured on screen is 0.9 of what is
declared here:
.op-panels wanted 984 / 0.9 = 1093.33
.op-content padding 21px each side = 42
--op-inner-w 1093.33 + 42 = 1135.33
The column gap is untouched — clamp(28px, 4vw, 56px) as before — so
the extra width goes entirely to the content inside the two columns,
which is what was asked. .op-card keeps margin-inline:auto and
width:min(100%, …), so it still centres and still degrades to the
viewport on a narrow window rather than overflowing.
The tab selector above takes the same width for free: .op-slider is
sized by .op-content, so widening the card widens the track, the three
segments stay equal thirds of it, and --op-seg-inset is unchanged —
so each label keeps exactly the left inset it had.
============================================================ */
@media (min-width: 769px) {
.op-card {
--op-inner-w: 1135.33px;
}
/* ── One size for the whole panel ──
15.81px is .hero-subtitle's own size — the description under
"Peptides / Tested & Delivered" — which is the reference asked for.
The body copy, both kinds of table cell and the CTA link all take
it, so the panel reads as one voice instead of four sizes.
Nothing is emphasised or de-emphasised by SIZE any more. That work
moves entirely to weight and colour, below. */
.op-step-body,
.op-bulk,
.op-link {
font-size: 15.81px;
}
.op-bulk.op-pay-table th[scope="row"],
.op-bulk.op-pay-table td,
.op-bulk--rows th[scope="row"],
.op-bulk--rows td,
.op-bulk th,
.op-bulk td {
font-size: 15.81px;
}
/* ── The three levels, by weight and colour only ──
Audited across all three tables, which were not saying the same
thing the same way. A column header was 11px/600/secondary: shrunk
AND muted AND bolded at once, so it was being de-emphasised by two
devices and emphasised by a third. At one shared size that
contradiction has nowhere to hide, so each level now gets one clear
treatment and the same one in every table:
column header the quiet LABEL for a column 600, muted
row header the KEY the row is about 700, primary
data cell the ANSWER 400, primary
Reading down the first column answers "which case is mine"; reading
across answers "what applies to it". The weight ladder follows that
rather than the DOM order. */
.op-bulk th[scope="col"] {
font-weight: 600;
color: var(--text-muted);
}
.op-bulk.op-pay-table th[scope="row"],
.op-bulk--rows th[scope="row"] {
font-weight: 700;
color: var(--text-primary);
}
.op-bulk td {
font-weight: 400;
color: var(--text-primary);
}
/* ── Column positions, stated rather than left to the content ──
With the columns wider, `auto` layout was sizing each one to its
longest cell, so the second column of the two-column tables started
wherever "4 vials or more" happened to end. Fixed positions instead,
asked for outright: with two columns the second begins at the
halfway mark; with three, at half and three-quarters.
table-layout:fixed is what makes the percentages authoritative —
without it they are hints the auto algorithm may overrule when a
cell does not fit. */
.op-bulk { table-layout: fixed; }
.op-bulk--rows:not(.op-bulk--wide) th[scope="col"]:first-child,
.op-bulk--rows:not(.op-bulk--wide) th[scope="row"],
.op-pay-table th[scope="col"]:first-child,
.op-pay-table th[scope="row"] { width: 50%; }
/* The transit table is the three-column exception: 50 / 25 / 25 puts
the second column's left edge on the halfway mark and the third's on
three-quarters, which is the layout asked for. */
.op-bulk--wide th[scope="col"]:first-child,
.op-bulk--wide th[scope="row"] { width: 50%; }
.op-bulk--wide th[scope="col"]:nth-child(2),
.op-bulk--wide td:nth-of-type(1) { width: 25%; }
.op-bulk--wide th[scope="col"]:nth-child(3),
.op-bulk--wide td:nth-of-type(2) { width: 25%; }
/* Right-alignment removed. It was there to keep two narrow numeric
columns tidy against a wide first one, but a right-aligned column
starts wherever its longest value happens to begin — which directly
contradicts "the second is halfway along, the third three-quarters".
Left-aligned, each column begins exactly where its width puts it,
and tabular-nums (already on .op-bulk) keeps the figures in line. */
.op-bulk--wide td:not(:first-child),
.op-bulk--wide th:not(:first-child) { text-align: left; }
}
/* The pressed cascade tile — see the pointerdown handler in index.html.
Its job is to give the columns' stop a visible cause: the page is
navigating, and a tile that visibly took the press says so where a
frozen animation on its own just looks broken.
Darken plus a small sit-down, on the same brightness the hover state
already uses so the two read as one control getting more definite
rather than as two unrelated effects. */
.hero-orb-tile--pressed img { filter: brightness(0.8); }
.hero-orb-tile--pressed { transform: scale(0.94); }
.hero-orb-tile { transition: transform 0.12s cubic-bezier(0.22, 0.61, 0.36, 1); }
@media (prefers-reduced-motion: reduce) {
.hero-orb-tile--pressed { transform: none; }
}