kept it from
spanning the container, and the header logo already links home): full
container width on desktop, full bleed through the gutters on phones. */
.site-footer__wordmark {
width: 100%;
height: auto;
}
@media (max-width: 640px) {
.site-footer__wordmark {
max-width: none; /* the base reset clamps svg to 100% — lift it to bleed */
width: calc(100% + var(--gutter) * 2);
margin-inline: calc(var(--gutter) * -1);
}
}
.site-footer__tagline {
font-style: normal;
font-size: clamp(1rem, 0.9rem + 0.7vw, 1.375rem);
}
/* ---- Sizing carousel (sizing-table-w-images.html, review p9, 2026-08-26).
Tinted header band + white body, like the answer section. Base render is
a native scrollable pack row (no JS); .is-enhanced (set by JS) switches to
the centered transform carousel: active pack scales up over its dimmed
neighbors, panel below swaps. Panels stack in one grid cell so the
section holds the height of the tallest panel — no jump on swap. ---- */
.size-carousel__band {
padding-block: var(--space-xl);
}
.size-carousel__band .section-head {
margin-bottom: 0;
}
.size-carousel__body {
padding-block: var(--space-xl) var(--section-pad);
}
.size-carousel__nav {
display: none; /* arrows are meaningless without the JS carousel */
justify-content: center;
gap: var(--space-xl);
margin-bottom: var(--space-sm);
}
.size-carousel__body.is-enhanced .size-carousel__nav {
display: flex;
}
.size-carousel__arrow {
background: none;
border: 0;
cursor: pointer;
font-family: var(--font-body);
font-size: 1.75rem;
line-height: 1;
padding: 0.15rem 0.85rem;
color: var(--color-true-black);
}
.size-carousel__arrow:hover {
opacity: 0.55;
}
.size-carousel__arrow:focus-visible {
outline: 2px solid var(--color-true-black);
outline-offset: 2px;
}
.size-carousel__viewport {
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.size-carousel__viewport::-webkit-scrollbar {
display: none;
}
.size-carousel__body.is-enhanced .size-carousel__viewport {
overflow: hidden;
}
.size-carousel__track {
position: relative; /* offsetParent for the frames — JS centering math */
display: flex;
align-items: center;
gap: var(--space-sm);
width: max-content;
margin: 0;
padding-block: var(--space-xl); /* headroom for the active scale-up (1.6x) */
transition: transform 0.35s ease;
}
.size-carousel__frame {
position: relative;
flex: 0 0 auto;
}
.size-carousel__frame.is-active {
z-index: 1; /* the active pack rides over its neighbors, per the mock */
}
.size-carousel__frame button {
display: block;
background: none;
border: 0;
padding: 0;
cursor: pointer;
width: clamp(8rem, 18vw, 13rem);
transition: transform 0.35s ease, opacity 0.35s ease;
}
.size-carousel__frame button img {
display: block;
width: 100%;
height: auto;
}
.size-carousel__frame button:focus-visible {
outline: 2px solid var(--color-true-black);
outline-offset: 2px;
}
.size-carousel__body.is-enhanced .size-carousel__frame button {
opacity: 0.5;
}
.size-carousel__body.is-enhanced .size-carousel__frame.is-active button {
transform: scale(1.6); /* 8/27 (Jay): was 1.35 — bigger zoom on the pick */
opacity: 1;
}
.size-carousel__panels {
display: grid;
margin: 0 auto;
max-width: 600px;
}
.size-carousel__panel {
grid-area: 1 / 1;
display: grid;
gap: var(--space-xs) var(--space-xl);
align-items: center;
width: 100%;
max-width: 44rem;
margin-inline: auto;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease;
}
.size-carousel__panel.is-active {
opacity: 1;
visibility: visible;
}
.size-carousel__stage {
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 1.375rem;
margin-top: var(--space-sm);
margin-bottom: 0;
}
.size-carousel__weight {
font-style: italic;
margin-bottom: var(--space-xs);
}
.size-carousel__milestones {
color: var(--color-muted);
margin-bottom: 0;
}
.size-carousel__child img {
width: clamp(10rem, 24vw, 15rem);
height: auto;
}
.size-carousel__ctas {
margin-top: var(--space-xs);
}
@media (min-width: 641px) {
.size-carousel__panel {
grid-template-columns: 1fr auto;
}
.size-carousel__ctas {
grid-column: 1 / -1;
}
}
@media (max-width: 640px) {
.size-carousel__panels {
padding: 0 10%; /* 8/27 (Jay): inset the panel text on phones */
}
.size-carousel__ctas {
display: grid;
gap: var(--space-xs);
}
.size-carousel__ctas .btn {
text-align: center;
}
}
/* ---- PDP title (review p8, 2026-08-26): ALL CAPS AVENIR with the 100
kerning — the Lust treatment moved up to the header wordmark, so the
title steps down from the old display scale. ---- */
.buy-box .productView-title {
font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
}
/* ---- Shopping section type (review p8: "NO GREY TYPE JUST BLACK") —
every muted line inside the buy section goes true black: description,
price, option support lines, hints, stock, trust list, rating row and
the breadcrumb trail above the gallery. ---- */
.product .buy-box__desc,
.product .buy-box__trust,
.product .buy-option__line,
.product .field__hint,
.product .form-field--stock,
.product .proof-row,
.product .price,
.change-main .breadcrumbs,
.change-main .breadcrumb {
color: var(--color-true-black);
}
/* ---- Storytelling comparison (storytelling.html, review p9 + "product
store telling section.pdf", 2026-08-26). Ambient film beside each list;
the conventional list is the black box with white writing. Mobile stacks
media-first; desktop flips row 2 so the lists meet in the middle. ---- */
.story__row {
display: grid;
}
.story__row + .story__row {
margin-top: var(--space-md);
}
.story__media {
position: relative;
aspect-ratio: 16 / 9;
background: var(--color-cloud-white); /* holds the space while film loads */
min-width: 0;
}
.story__media video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--radius);
}
.story__panel {
display: grid;
align-content: center;
gap: var(--space-sm);
padding: var(--space-lg);
border-radius: var(--radius);
min-width: 0;
}
.story__panel--dark {
background: var(--color-true-black);
color: var(--color-cloud-white);
}
.story__panel--dark .eyebrow {
color: var(--color-cloud-white);
}
.story__panel--dark .ticklist--never li::before {
color: rgba(252, 251, 246, 0.6);
}
.story__panel--light {
background: var(--color-cloud-white);
}
.story__note {
display: block;
margin-top: var(--space-md);
text-align: center;
}
@media (min-width: 48rem) {
.story__row {
grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
align-items: stretch;
}
.story__media {
aspect-ratio: auto;
min-height: 18rem;
}
.story__row--flip {
grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
}
.story__row--flip .story__media {
grid-column: 2;
grid-row: 1;
}
.story__row--flip .story__panel {
grid-column: 1;
grid-row: 1;
}
}
/* ============================================================
LAYER — 2026-08-27 · "How it works" rebuilt as native HTML
(product store telling section.pdf). The burned-in cutaway PNG
is retired: real photo + CSS number dots + text callouts. The
.works-figure--* / .layers--mobile rules above are dead — that
markup is gone from feature-callout.html.
============================================================ */
/* The square: photo shown as shot on its own grey-white backdrop
(no tint — Jay 2026-08-27), square-cropped inside a thin black
border so the dot percentages stay stable */
.works-diagram {
--works-gap: clamp(var(--space-lg), 6vw, 5.5rem);
margin-top: var(--space-lg);
}
.works-diagram__figure {
position: relative;
margin: 0;
border: 1px solid var(--color-true-black);
}
.works-diagram__figure img {
display: block;
width: 100%;
aspect-ratio: 1;
object-fit: cover;
}
/* Numbered dots — numerals always in Avenir (PDF note): white on
black circles, coordinates inline as % of the square crop */
.works-dot {
position: absolute;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: 50%;
background: var(--color-true-black);
color: var(--color-bright-white);
font-family: var(--font-body);
font-weight: 600;
font-size: 0.9375rem;
line-height: 1;
}
.works-callouts {
list-style: none;
margin: var(--space-md) 0 0;
padding: 0;
display: grid;
gap: var(--space-md);
}
.works-callout__num {
display: block;
font-family: var(--font-body);
font-weight: 600;
font-size: 0.75rem;
letter-spacing: 0.3em;
}
.works-callout__title {
font-family: var(--font-body);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 1.125rem;
margin: 0.25em 0 0.2em;
}
.works-callout__body {
margin: 0;
max-width: 24em;
}
.works-standards {
display: inline-block;
margin: var(--space-md) 0 0;
border: 1px solid var(--color-true-black);
border-radius: 8px;
padding: var(--space-sm) var(--space-md);
font-family: var(--font-condensed);
text-transform: uppercase;
letter-spacing: 0.14em;
font-weight: 600;
font-size: 0.8125rem;
text-align: center;
}
/* Desktop: photo left, callouts distributed down the square's
height, chip pinned at the bottom edge. Each callout grows a
horizontal leader stub that crosses the gap into the square —
the matching numbers do the rest of the connecting. */
@media (min-width: 48rem) {
.works-diagram {
display: grid;
grid-template-columns: minmax(0, 8fr) minmax(0, 5fr);
column-gap: var(--works-gap);
align-items: stretch;
}
.works-diagram__aside {
display: flex;
flex-direction: column;
padding-block: var(--space-sm);
}
.works-callouts {
margin-top: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: var(--space-md);
flex: 1;
}
.works-callout {
position: relative;
}
.works-callout::before {
content: "";
position: absolute;
top: 2.2rem; /* midline of the title row — nudge with the type */
right: 100%;
width: calc(var(--works-gap) + 2.5rem);
margin-right: var(--space-sm);
border-top: 1px solid var(--color-true-black);
}
.works-standards {
align-self: stretch;
margin-top: var(--space-lg);
}
}
/* ============================================================
LAYER — 2026-08-27 · Video pass: lazy loading + posters
(with the "How it works" layer above, same day's work).
============================================================ */
/* Tap-to-play slots: the poster now sits inside a plain link to the
film — the no-JS fallback; change-interactions.js intercepts the
click for inline playback. */
.video-ph .ph-link {
display: block;
height: 100%;
}
/* Storytelling films stay 16:9 on phones (base rule above). Desktop
(Jay 8/27, revised; 8/28 tablet fix): the film takes 60% of the row
and the panel 40%, flush at the seam — no column gap. 16:9 is the
media box's FLOOR, not a lock: a hard aspect-ratio made the stretched
box derive its width from the panel's height in the 768–1000px band
(where the list is taller than the film), overflowing its track and
burying the panel's left edge. The padding-ratio pseudo sets the same
16:9 minimum from the track width; a taller panel stretches the box
and the film center-crops via object-fit: cover. */
@media (min-width: 48rem) {
.story__row {
grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}
.story__row--flip {
grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
}
.story__media {
aspect-ratio: auto;
min-height: 0;
}
.story__media::before {
content: "";
display: block;
padding-top: 56.25%;
}
}
/* ============================================================
LAYER — 2026-08-27 · PDP gallery: thumbnail strip rework
(Jay): kill the dead space between thumbs, size them up, and
make the phone strip a single swipeable row.
============================================================ */
/* Cornerstone's grid-row clearfix (::before/::after, display: table)
becomes an anonymous item inside our grid/flex strip — it sat in
the first cell and indented the whole first row by one tile. */
.product .productView-thumbnails::before,
.product .productView-thumbnails::after {
content: none;
}
/* Desktop keeps the 4-up grid, but the tiles now fill their tracks:
Cornerstone's 75x67 inner link was what left the empty gutters
between thumbs. Square tiles, images center-cropped to fit. */
.product .productView-thumbnail-link {
box-sizing: border-box;
width: 100%;
max-width: none;
height: auto;
aspect-ratio: 1 / 1;
}
.product .productView-thumbnails img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Phones (below the PDP's own 48rem two-column break): one row you
can thumb through, snapping tile-by-tile. The partial tile peeking
in at the edge is the scroll cue, so the scrollbar stays hidden. */
@media (max-width: 47.9375rem) {
.product .productView-thumbnails {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x proximity;
scrollbar-width: none;
}
.product .productView-thumbnails::-webkit-scrollbar {
display: none;
}
.product .productView-thumbnail {
flex: 0 0 auto;
scroll-snap-align: start;
}
.product .productView-thumbnail-link {
width: 5.5rem; /* 88px square — up from Cornerstone's 75x67 */
}
}
/* Hero image (Jay 8/27): fill the gallery column. Cornerstone caps
.productView-img-container at product_size width (500px) and forces
its 500x659 portrait shape via the ::after padding-bottom hack — on
our square catalog imagery that left the box 172px narrower than the
column and letterboxed ~80px of dead space above and below the photo
(the same empty band that showed on phones). The design's PDP hero is
a square (.ph--square in the mockup): full column width, 1:1. */
.product .productView-img-container {
max-width: none;
aspect-ratio: 1 / 1;
}
.product .productView-img-container::after {
content: none; /* the padding-bottom shape; aspect-ratio owns it now */
}
/* Desktop split (Jay 8/27; revised 8/28): gallery takes 60% of the row,
buy box 40% — but only from 1100px up. Between the 48rem two-column
break and 1100px the buy column needs the room, so the theme bridge's
`.product .productView { 1fr 1fr }` keeps it 50/50 there. The compound
selector out-weighs the `.product__inner` rules above; the hero and
print keep their own 50/50. */
@media (min-width: 1100px) {
.product .productView.product__inner {
grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}
}
/* Section padding (Jay 8/27): both .container.product and .product__inner
closed the PDP with a full --section-pad, doubling the bottom gap to
~196px on desktop. The outer .product section owns the section spacing
(as everywhere else on the site); the inner grid contributes none. */
.product .productView.product__inner {
padding-block-end: 0;
}
/* Cornerstone's clearfix on .productView (::before/::after, display:
table) auto-places as anonymous grid items — they opened a phantom 0px
row plus a full row-gap under the columns (same mechanism as the
thumbnail-strip stagger). A grid needs no clearfix. */
.product .productView::before,
.product .productView::after {
content: none;
}
/* Stock 48px margin under the gallery section — the section pad owns
the closing gap now. */
.product .productView-images {
margin-bottom: 0;
}
/* ============================================================
LAYER — 2026-08-27 · Tom's final copy pass (homepage).
Copy itself lives in the templates; these are the three hooks
the pass introduced.
============================================================ */
/* "How it works" link at the bottom of the SAP tooltip bubble (hero
instance) — points down to the answer section so curious readers
self-select; everyone else keeps reading the hero. */
.tip__more {
display: block;
margin-top: 0.5rem;
color: inherit;
text-decoration: underline;
font-weight: 700;
}
/* Single-sleeve card: no bullets on purpose (Tom doesn't want to sell
it) — the one line goes bigger so the card doesn't read sparse. */
.offer-card__solo-line {
font-size: 1.25rem;
line-height: 1.5;
margin: 0 0 var(--space-sm);
}
/* "Discount shown at checkout." under the 50%-off line, both offer
boxes — quiet, so the math lands without shouting. */
.offer-card__checkout-note {
font-size: 0.8125rem;
color: var(--color-muted);
font-weight: 400;
}
/* ============================================================
LAYER — 2026-08-28 · Trust bar 2×2 at mid widths + mission 50/50
============================================================ */
/* ---- Trust bar: no more 3 + 1 (Jay 8/28). The base auto-fit grid
fits three 200px columns between ~700px and ~1000px and orphans
the fourth item bottom-left. Explicit columns instead: 2×2 up to
1024px (phones already had 2×2 in the 640px layer), 4 across only
once four columns genuinely fit. The 2×2 band is capped at 44rem
so the pairs don't drift to the edges of a wide tablet. ---- */
@media (min-width: 641px) and (max-width: 63.99rem) {
.trust-bar__list--stacked {
grid-template-columns: 1fr 1fr;
max-width: 44rem;
gap: var(--space-md) var(--space-lg);
}
}
@media (min-width: 64rem) {
.trust-bar__list--stacked {
grid-template-columns: repeat(4, 1fr);
}
}
/* ---- Mission 50/50 on desktop (Jay 8/28): parent-hug shot left, copy
right, flush at the seam like the storytelling rows (same 48rem
breakpoint). The image fills its half edge-to-edge and crops via
object-fit; the copy column hugs the seam and caps at half the
container so it lines up with the page grid on wide screens. Copy
goes left-aligned in the split (the centered stack stays on phones
and small tablets). ---- */
@media (min-width: 48rem) {
.mission {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: stretch;
padding-block: 0;
}
.mission__media {
position: relative;
margin: 0;
padding: 0;
max-width: none;
min-height: 30rem;
}
.mission__media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.mission__inner {
align-self: center;
max-width: calc(var(--container-width) / 2);
margin-inline: 0 auto;
padding-block: var(--section-pad);
padding-inline: var(--space-xl) var(--gutter);
text-align: left;
}
/* Scoped to .mission — the pediatric-team page reuses these classes in
its centered transparency section, and the bare selectors were
stripping that block's auto margins too (off-center text). */
.mission .mission__statement,
.mission .mission__body {
margin-inline: 0;
}
.mission .btn-row--center {
justify-content: flex-start;
}
}
/* ---- Section rhythm (Jay 8/28): the base --section-pad
clamp(3.5rem, 9vw, 7.5rem) is at least twice too generous. Halved
across the whole range — every section, the mission split and the
flush-top media offsets all read this one variable, so the override
lives here (the :root declaration is above the THEME BRIDGE line and
re-syncs from the mockup). ---- */
:root {
--section-pad: clamp(1.75rem, 4.5vw, 3.75rem);
}
/* ============================================================
2026-08-28 — PDP BUY BOX PASS (Jay)
Scope: .product__inner + .atc-bar only. Avenir-only type, title
price retired, Purchase Options follow the Count, sizing pop-out,
ingredients disclosure.
============================================================ */
/* ---- Avenir only in the buy flow: the sticky bar's product name drops the
Lust .display treatment for the kerned all-caps header style. (The
condensed token already resolves to the body face — see the type system
at the top of the bridge — so everything else in scope is Avenir.) ---- */
.atc-bar__name {
font-family: var(--font-body);
font-weight: 700;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 0.1em;
}
/* ---- Title price retired: the shopper reads the price off the purchase
option (subscription vs single sleeve). display:none, not removed — the
nodes stay live for product-details.js, and change-buy.js mirrors them
into the sticky bar. ---- */
.buy-box .productView-price {
display: none;
}
/* ---- Purchase Options follow the Count (change-buy.js): Sleeve locks the
select to One-Time Purchase and hides the field; Box shows the full
list. display:none keeps the select in the form submission (a disabled
select would drop attribute[...] from add-to-cart). ---- */
.buy-form .form-field--purchase-locked {
display: none;
}
/* ---- Sizing pop-out: the "Not sure?" hint opens a small size/weight table
in place (native details/summary; change-buy.js adds outside-click and
Esc close). ---- */
.size-hint {
position: relative;
}
/* The hint belongs to the Size chips above it — pull back the option
grid's --space-md gap so it sits a bare --space-xs under them (the gap
stays as-is between the real fields). Scoped to the options wrapper:
with JS off the hint renders after the options and keeps its normal
margin. */
.buy-form [data-product-option-change] .size-hint {
margin-top: calc(var(--space-xs) - var(--space-md));
}
.size-popout {
display: inline;
}
.size-popout summary {
display: inline;
cursor: pointer;
text-decoration: underline;
list-style: none;
}
.size-popout summary::-webkit-details-marker {
display: none;
}
.size-popout__panel {
position: absolute;
left: 0;
top: calc(100% + 0.4rem);
z-index: 20;
min-width: 15rem;
max-width: 100%;
max-height: min(60vh, 22rem);
overflow: auto;
padding: var(--space-sm);
background: var(--color-bright-white);
border: 1px solid var(--color-line);
border-radius: var(--radius);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}
/* 8/28: viewport-aware — change-buy.js flips the panel above the trigger
when there's more room up than down (e.g. the buy box scrolled near the
bottom edge); the max-height scroll above catches the truly tight
cases. */
.size-popout__panel--up {
top: auto;
bottom: calc(100% + 0.4rem);
box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.12);
}
.size-popout__table {
width: 100%;
border-collapse: collapse;
font-size: 0.875rem;
}
.size-popout__table th {
font-family: var(--font-condensed);
font-weight: 700;
font-size: 0.8125rem;
letter-spacing: 0.1em;
text-transform: uppercase;
text-align: left;
}
.size-popout__table th,
.size-popout__table td {
padding: 0.35rem 0.75rem 0.35rem 0;
border-bottom: 1px solid var(--color-line);
}
.size-popout__table tbody tr:last-child td {
border-bottom: 0;
}
/* ---- Ingredients disclosure (below the ATC follow-up line) — the FAQ's
native details/summary pattern at buy-box scale. ---- */
.buy-box__ingredients {
margin-top: var(--space-md);
border-block: 1px solid var(--color-line);
}
.buy-box__ingredients summary {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--space-sm);
padding: var(--space-sm) 0;
font-weight: 700;
cursor: pointer;
list-style: none;
}
.buy-box__ingredients summary::-webkit-details-marker {
display: none;
}
.buy-box__ingredients summary::after {
content: "+";
font-weight: 700;
}
.buy-box__ingredients[open] summary::after {
content: "\2013";
}
.buy-box__ingredients ul {
display: grid;
gap: 0.4rem;
padding-bottom: var(--space-sm);
list-style: none;
}
/* ---- Count → the mockup's stacked purchase-option cards. change-buy.js
tags the field .count-cards and decorates each label with the card body
(.buy-option__body/head/line, styled in the 8/25 layer above) plus a live
price tag. These rules override the pill treatment set-rectangle gets
from the bridge for THIS field only; with JS off the count stays plain
chips. ---- */
.buy-form .count-cards {
display: grid;
gap: var(--space-xs);
}
.buy-form .count-cards .form-option-wrapper {
display: block;
}
/* The subscription-capable box leads, like the mockup (visual order only —
DOM and submission order stay the catalog's). */
.buy-form .count-cards .form-option-wrapper.count-card--box {
order: -1;
}
/* 8/28: no "Count:" heading — the cards speak for themselves. The label
stays in the DOM (visually hidden, sr-only pattern) because the
radiogroup's aria-labelledby points at it and change-buy.js finds the
field by its text. Size keeps its visible label. */
.buy-form .count-cards > .form-label {
position: absolute;
width: 1px;
height: 1px;
margin: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
/* 8/28: "(Required)" clutter off every option label — the form still
enforces the requirement. */
.buy-form .form-field .form-label small {
display: none;
}
.buy-form .count-cards .form-option {
display: flex;
gap: var(--space-sm);
align-items: flex-start;
min-width: 0;
height: auto;
margin: 0;
padding: var(--space-sm);
border: 1px solid var(--color-line);
border-radius: var(--radius);
background: none;
font-family: var(--font-body);
font-size: 1rem;
font-weight: 400;
letter-spacing: normal;
text-transform: none;
text-align: left;
cursor: pointer;
}
.buy-form .count-cards .form-radio:checked + .form-option {
background: none;
border-color: var(--color-true-black);
color: inherit;
}
.buy-form .count-cards .form-radio:focus-visible + .form-option {
outline: 2px solid var(--color-true-black);
outline-offset: 2px;
}
.buy-form .count-cards .form-option-variant {
font-weight: 700;
}
.buy-form .count-cards .buy-option__tag {
margin-left: auto;
white-space: nowrap;
}
/* Pack-contents helper (change-buy.js fills it per selected size; blank
until a size is picked — collapse it so the card keeps its rhythm). */
.buy-form .count-cards .buy-option__line--contents {
color: var(--color-text);
}
.buy-form .count-cards .buy-option__line--contents:empty {
display: none;
}
/* ---- Add to cart, always rendered (8/28): the catalog currently answers
purchasable:false (pre-launch), which hides the whole wrapper — inline
on the server (can_purchase) and again on every option response from
product-details.js. The page needs the button and the sticky bar's
reveal observes it, so keep the wrapper in layout and let the button's
disabled state do the talking until Purchasability is switched on in
the product admin. ---- */
.buy-form .add-to-cart-wrapper {
display: block !important;
}
/* Cornerstone floats the button group beside a fixed-width wallet column;
the design's ATC is a full-width block with wallet buttons (if any)
stacked under it. */
.buy-form .add-to-cart-buttons {
float: none;
display: grid;
grid-template-columns: 1fr;
width: 100%;
padding: 0; /* Cornerstone's 10/12px side padding kept the button from the full column */
}
/* 8/28: the button reads full-strength black even while the catalog keeps
it disabled (pre-launch) — no washed-out state, and no Cornerstone
disabled styling bleeding through. */
.buy-form #form-action-addToCart:disabled {
opacity: 1;
background: var(--color-true-black);
border-color: var(--color-true-black);
color: var(--color-cloud-white);
}
/* The design's buy form has no quantity stepper; the hidden qty[] input
still submits its value (1). */
.buy-form .form-field--increments {
display: none;
}
/* ============================================================
2026-08-28 — SPACING AUDIT FIXES (Jay)
Root cause for most of these: Cornerstone base styles leaking
under the mockup-synced layer above the THEME BRIDGE line.
============================================================ */
/* Announcement bar (audit #1): Cornerstone's global p margin (1.5rem)
inflated the bar and left the text riding high over a dead bottom
band. The mockup spaces the bar with the p's own padding-block. */
.announcement p {
margin: 0;
}
/* Announcement copy on phones (audit #5): two deliberate lines instead of
the 8/20 chrome diet's clipped sentence (which wrapped anyway). One
sentence per line — the free-shipping span becomes the second line —
with tracking eased just enough (0.12em → 0.08em) that the offer line
holds one line at 375px. Very narrow phones may still wrap naturally. */
@media (max-width: 640px) {
.announcement p {
letter-spacing: 0.08em;
}
.announcement__more {
display: block;
}
}
/* Footer seam (audit #2): Cornerstone's .body wrapper carries
margin-bottom: 6rem, which on full-bleed brand pages rendered as a
bare white band between the last section and the footer.
Cornerstone-native pages (cart, account) keep their separation. */
.body:has(.change-main) {
margin-bottom: 0;
}
/* Buy box description (audit #3): the wrapper is a div now — the catalog
description ships its own s. Keep their book rhythm inside, but
drop the trailing Cornerstone margin so the gap to the count cards is
the section's own. */
.buy-box__desc > p:last-child {
margin-bottom: 0;
}
/* Centered bands (8/28, pediatric-team pass): .page-head and
.container--centered center their text, but a bare .eyebrow is still a
max-width
pinned to the container's left edge — its box needs
centering too, the same way .section-head already handles its own. */
.page-head .eyebrow,
.container--centered .eyebrow {
margin-inline: auto;
}
/* Mobile menu vs sticky header (8/28): Cornerstone scroll-locks the page
behind its full-screen menu with body { overflow: hidden } — but a body
with clipped overflow becomes the sticky header's containing scroll
box, so the header (and the drop-down anchored to it) snapped back to
the document top the moment the menu opened. Our menu is a small
drop-down, not a full-screen overlay; let the page keep scrolling
behind it. Pairs with preventScroll on the menu's focus trap in
mobile-menu-toggle.js. */
body.has-activeNavPages {
overflow: visible;
}
/* Sticky bar price (8/28): the span ships empty and change-buy.js fills it
only for a complete selection — the catalog base price is neither the
sleeve nor the box, so it must never show. Collapse the empty span so
the bar's gap doesn't leave a hole where the price would go — and hand
its margin-left:auto to the button so the CTA stays pinned right. */
.atc-bar__price:empty {
display: none;
}
.atc-bar__price:empty + .btn {
margin-left: auto;
}
/* Footer legal row (8/28): copyright line + Privacy Policy / Accessibility
links share the right-hand slot of .site-footer__bottom. Same fine-print
size as .legal; links underline on hover only, like the columns. */
.site-footer__legal {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--space-xs) var(--space-md);
}
.site-footer__legal .legal {
margin: 0;
}
.legal-links {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: var(--space-xs) var(--space-md);
margin: 0;
padding: 0;
font-size: 0.8125rem;
}
.legal-links a {
text-decoration: none;
}
.legal-links a:hover,
.legal-links a:focus-visible {
text-decoration: underline;
}
/* ==========================================================================
LAYER — 2026-08-31 · Launch-audit pass (items 09/14/18/19)
- Hero ![]()
now sits inside for the WebP srcset; display:contents
keeps the .ph aspect-box geometry exactly as before.
- Category listing polish: the two live categories hold 1–2 products, so
the sort/actionBar is noise and the hover-chrome card buttons go (the
card figure is already one big link). MSRP/rrp rows stay hidden even if
a bogus sale_price sneaks back into the catalog.
- Newsletter forms send no nl_first_name at all — live test 2026-08-31
showed the subscribe endpoint accepts a missing first name, so the old
hardcoded "bc" hidden input was simply removed.
========================================================================== */
.ph > picture {
display: contents;
}
#product-listing-container .actionBar {
display: none;
}
#product-listing-container .card-figcaption {
display: none;
}
#product-listing-container .productGrid {
justify-content: center;
}
.card .price-section[class*="rrp"] {
display: none !important;
}