/* styles.css */

/* ---- Reset ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}
ul {
  list-style: none;
  padding: 0;
}
a {
  color: inherit;
}

/* ---- Tokens (replace during dev) ---- */
:root {
  /* spacing scale */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;

  /* vertical rhythm - generous, "quiet luxury" breathing room */
  --section-pad: clamp(3.5rem, 9vw, 7.5rem);

  /* layout */
  --container-width: 1280px;
  --measure: 38rem; /* max line length for readable body text */
  --gutter: clamp(var(--space-sm), 5vw, var(--space-xl));
  --card-min: 240px; /* min product card width before grid reflows */
  --radius: 2px; /* minimal radius - restrained, not playful */

  /* color placeholders */
  --color-true-black: #000000;
  --color-bright-white: #ffffff;
  --color-cloud-white: #fcfbf6;

  --color-brown: #ba8d74;
  --color-tan: #ead4bc;
  --color-pink: #f8dfcf;

  /* semantic */
  --color-text: var(--color-true-black);
  --color-muted: #6f6b66;
  --color-line: #e5e1d8;

  /* type families */
  --font-body:
    Avenir, "Avenir Next", system-ui, -apple-system, "Segoe UI", Roboto,
    sans-serif;
  --font-display: lust, Lust, "Lust Display", Georgia, "Times New Roman", serif;
  --font-condensed: "Avenir Next Condensed", var(--font-body);
}

/* ---- Base ---- */
body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.0625rem);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bright-white);
  -webkit-font-smoothing: antialiased;
}

/* ---- Typography ---- */

/* Display = Lust. Lowercase, used sparingly, for the brand's signature
   moments only (hero + mission). */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: lowercase;
  line-height: 1.05;
  letter-spacing: -0.01em;
  font-size: clamp(2.25rem, 1.4rem + 4vw, 4.25rem);
}

/* Heading = Avenir, all caps, ~100 tracking, semi bold. The brand's
   workhorse header style - lighter on the page than Lust. */
.heading {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.15;
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.5rem);
}

/* Eyebrow / kicker = Avenir condensed caps, wide tracking, semi bold. */
.eyebrow {
  font-family: var(--font-condensed);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  font-size: 0.875rem;
}

.lead {
  max-width: var(--measure);
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
  color: var(--color-text);
}

p {
  max-width: var(--measure);
}

/* ---- Layout primitives ---- */

/* Centers contained content; full-bleed sections wrap this */
.container {
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Responsive product grid - reflows columns automatically, no media queries */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr));
  gap: var(--space-md);
}

/* Featured / cross-sell product rows - center the cards on wide screens
   instead of left-aligning them across auto-filled tracks. */
.product-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.product-grid > .product-card {
  flex: 1 1 16rem;
  max-width: 20rem;
}

.full-bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

.section {
  padding-block: var(--section-pad);
}

.section-head {
  text-align: center;
  margin-bottom: var(--space-lg);
}
.section-head--left {
  text-align: left;
}
.section-head__title {
  margin-top: var(--space-xs);
}
.section-head .eyebrow,
.section-head .lead {
  margin-inline: auto;
}
.section-head--left .eyebrow,
.section-head--left .lead {
  margin-inline: 0;
}

/* Generic 3-up grid */
.three-up {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-lg);
}

/* Accessible visually-hidden text */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Buttons ---- */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}
.btn {
  display: inline-block;
  font-family: var(--font-condensed);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  font-size: 0.875rem;
  padding: 0.9em 1.8em;
  border: 1px solid var(--color-true-black);
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}
.btn--primary {
  background: var(--color-true-black);
  color: var(--color-cloud-white);
}
.btn--primary:hover {
  background: #222;
}
.btn--ghost {
  background: transparent;
  color: var(--color-true-black);
}
.btn--ghost:hover {
  background: var(--color-true-black);
  color: var(--color-cloud-white);
}
.btn--block {
  display: block;
  width: 100%;
  text-align: center;
}

/* ---- Placeholder media (swap for real imagery) ---- */
.ph {
  display: grid;
  place-items: center;
  background: var(--color-cloud-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  font-style: italic;
  font-size: 0.875rem;
  text-align: center;
  padding: var(--space-sm);
}
.ph::after {
  content: attr(data-label);
}
.ph--portrait {
  aspect-ratio: 3 / 4;
}
.ph--landscape {
  aspect-ratio: 4 / 3;
}
.ph--square {
  aspect-ratio: 1 / 1;
}

/* ---- Logo (SVG wordmark as a plain <img>; tinted to cream for the dark
   footer with a filter. Reliable on file:// and every browser.) ---- */
.logo-link {
  display: inline-flex;
  justify-self: center; /* centers logo in the mobile nav grid; ignored in the desktop flex row */
}
.logo {
  width: clamp(7.5rem, 12vw, 10rem);
  height: auto;
}
.logo--footer {
  /* near-black artwork -> cream/white for the dark footer */
  filter: brightness(0) invert(1);
}

/* ---- Header / nav ---- */
.announcement {
  background: var(--color-true-black);
  color: var(--color-cloud-white);
}
.announcement p {
  max-width: none;
  text-align: center;
  font-family: var(--font-condensed);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.6875rem; /* small location - intentionally compact */
  padding-block: 0.6rem;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-bright-white);
}
.site-header[data-scrolled] .site-nav {
  border-bottom-color: var(--color-line);
}

/* Mobile-first: nav is a 3-column grid - toggle - centered logo - actions.
   The min-width block further down switches it to an inline row. */
.site-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-md);
  padding-block: var(--space-sm);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

/* Mobile: the menu is a full-width drop-down, hidden until toggled open */
.nav-menu {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  flex-direction: column;
  gap: 0;
  margin: 0;
  background: var(--color-bright-white);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  padding: var(--space-sm) var(--gutter);
  padding-left: var(--space-sm);
}
.nav-menu.is-open {
  display: flex;
}
.nav-menu li {
  padding-block: 0.5rem;
}
.nav-menu a {
  text-decoration: none;
  font-family: var(--font-condensed);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.875rem;
  font-weight: 700;
  padding-block: 0.25rem;
  border-bottom: 1px solid transparent;
}
.nav-menu a:hover {
  border-bottom-color: var(--color-true-black);
}

.cart-link {
  text-decoration: none;
  font-family: var(--font-condensed);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.875rem;
  font-weight: 700;
  white-space: nowrap;
}

/* Right-hand action cluster: account + cart */
.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  justify-self: end;
}
.nav-icon {
  display: inline-flex;
  align-items: center;
  color: var(--color-true-black);
}
.nav-icon svg {
  width: 1.4rem;
  height: 1.4rem;
}
/* Account icon lives in the action cluster on larger screens; on mobile it
   moves into the drop-down (.nav-menu__account) instead. */
.account-link {
  display: none;
}
.nav-menu__account {
  display: block;
}

/* Hamburger - shown by default (mobile), hidden on larger screens */
.nav-toggle {
  display: block;
  justify-self: start;
  width: 2.5rem;
  height: 2.5rem;
  background: none;
  border: 0;
  cursor: pointer;
  position: relative;
}
.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 22px;
  height: 1.5px;
  background: var(--color-true-black);
  transform: translateX(-50%);
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}
.nav-toggle__bar {
  top: 50%;
}
.nav-toggle__bar::before {
  top: -7px;
}
.nav-toggle__bar::after {
  top: 7px;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar {
  background: transparent;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before {
  transform: translateX(-50%) translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after {
  transform: translateX(-50%) translateY(-7px) rotate(-45deg);
}

/* ---- Hero ---- */
.hero {
  background: var(--color-cloud-white);
}
.hero__inner {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
  padding-block: var(--section-pad);
}
.hero__copy .lead {
  margin-top: var(--space-md);
}
.hero h1 {
  margin-top: var(--space-sm);
}

/* ---- Trust bar ---- */
.trust-bar {
  background: var(--color-bright-white);
  border-block: 1px solid var(--color-line);
}
.trust-bar__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-sm) var(--space-lg);
  padding-block: var(--space-md);
  font-family: var(--font-condensed);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.875rem;
}
.stars {
  letter-spacing: 0.1em;
}

/* ---- Benefit blocks ---- */
.benefits__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-lg);
}
.benefit {
  text-align: center;
}
.benefit__icon {
  display: inline-grid;
  grid-template: 100% / 100%;
  place-items: center;
  width: 5rem;
  height: 5rem;
  margin-bottom: var(--space-sm);
}
.benefit__icon svg,
.benefit__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Brand icon accents (Change 2026 kit) */
.icon-accent {
  display: block;
  width: 4.5rem;
  margin: 0 auto var(--space-sm);
}
.icon-accent img {
  width: 100%;
  height: auto;
  display: block;
}
.benefit h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: var(--space-xs);
}
.benefit p {
  margin-inline: auto;
}

/* ---- Product grid ---- */
.product-card a {
  text-decoration: none;
  display: block;
}
.product-card .ph {
  margin-bottom: var(--space-sm);
  transition: opacity 0.2s ease;
}
.product-card a:hover .ph {
  opacity: 0.85;
}
.product-card__name {
  font-size: 1.125rem;
  font-weight: 700;
}
.product-card__price {
  font-size: 0.9375rem;
}

/* ---- Mission ---- */
.mission {
  background: var(--color-cloud-white);
  padding-block: var(--section-pad);
}
.mission__inner {
  text-align: center;
}
.mission__statement {
  margin: var(--space-sm) auto var(--space-md);
  max-width: 18ch;
}
.mission__body {
  margin: 0 auto var(--space-lg);
  color: var(--color-muted);
}

/* ---- Reviews ---- */
.reviews__grid {
  display: grid;
  margin: auto;
  max-width: 70ch;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-lg);
}
.review blockquote {
  font-size: 1.0625rem;
  margin: var(--space-xs) 0;
}
.review__author {
  font-family: var(--font-condensed);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.875rem;
  color: var(--color-muted);
}

/* ---- Honest list (education / transparency) ---- */
.honest__inner {
  display: grid;
  gap: var(--space-lg);
}
.honest__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-lg);
}
.honest__col .eyebrow {
  display: block;
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--color-line);
}
.ticklist {
  display: grid;
  gap: 0.6rem;
}
.ticklist li {
  position: relative;
  padding-left: 1.6rem;
}
.ticklist li::before {
  content: "+";
  position: absolute;
  left: 0;
  font-weight: 700;
}
.ticklist--never li::before {
  content: "–";
  color: var(--color-muted);
}

/* ---- Email capture ---- */
.email-capture {
  background: var(--color-cloud-white);
  text-align: center;
}
.email-capture__inner > * {
  margin-inline: auto;
}
.email-capture .heading {
  margin: var(--space-xs) 0 var(--space-sm);
}
.signup-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs);
  margin-top: var(--space-md);
  max-width: 700px;
}
.signup-form input {
  font: inherit;
  padding: 0.9em 1.2em;
  border: 1px solid var(--color-true-black);
  border-radius: var(--radius);
  min-width: 16rem;
  background: var(--color-bright-white);
}
.signup-form input:focus-visible {
  outline: 2px solid var(--color-true-black);
  outline-offset: 2px;
}
.signup-form__done {
  font-family: var(--font-condensed);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
}

/* ============================================================
   SUB-PAGE COMPONENTS (product, cart, about)
   ============================================================ */

/* ---- Simple page heading band ---- */
.page-head {
  background: var(--color-cloud-white);
  text-align: center;
  padding-block: var(--section-pad);
}
.page-head .lead {
  margin: var(--space-sm) auto 0;
}

/* ---- Breadcrumb ---- */
.breadcrumb {
  padding-block: var(--space-md) 0;
  font-family: var(--font-condensed);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.875rem;
  color: var(--color-muted);
}
.breadcrumb a {
  text-decoration: none;
}
.breadcrumb a:hover {
  text-decoration: underline;
}

/* ---- Product detail ---- */
.product__inner {
  display: grid;
  gap: var(--space-lg);
  padding-block: 0 var(--section-pad);
}
.product__gallery {
  display: grid;
  gap: var(--space-sm);
}
.product__thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-xs);
}
.buy-box {
  align-self: start;
}
.buy-box__title {
  font-size: clamp(2rem, 1.6rem + 1.8vw, 3rem);
}
.buy-box__price {
  font-size: 1.25rem;
  margin-top: var(--space-xs);
}
.buy-box__desc {
  margin-top: var(--space-sm);
  color: var(--color-muted);
}
.field {
  margin-top: var(--space-md);
}
.field > label {
  display: block;
  margin-bottom: var(--space-xs);
  font-family: var(--font-condensed);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  font-size: 0.875rem;
}
.field select,
.field input {
  font: inherit;
  width: 100%;
  padding: 0.7em 1em;
  border: 1px solid var(--color-true-black);
  border-radius: var(--radius);
  background: var(--color-bright-white);
}
.buy-options {
  display: grid;
  gap: var(--space-xs);
}
.buy-option {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: var(--space-sm);
  cursor: pointer;
}
.buy-option:has(input:checked) {
  border-color: var(--color-true-black);
}
.buy-option__tag {
  margin-left: auto;
  font-family: var(--font-condensed);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.875rem;
}
.buy-box .btn {
  margin-top: var(--space-md);
}
.buy-box__trust {
  margin-top: var(--space-md);
  display: grid;
  gap: 0.4rem;
  font-size: 1rem;
  color: var(--color-muted);
}

/* ---- Pillars (5-up benefit detail) ---- */
.pillars {
  background: var(--color-cloud-white);
}
.pillars__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-lg);
}
.pillar {
  text-align: center;
}
.pillar__icon {
  display: inline-grid; /* span is inline by default - needs a layout box so
                           width/height apply and the SVG can't balloon */
  place-items: center;
  width: 5rem;
  height: 5rem;
  margin: 0 auto var(--space-sm);
}
.pillar__icon svg {
  width: 100%;
  height: 100%;
}
.pillar h3 {
  margin-bottom: var(--space-sm);
}
.pillar ul {
  list-style: none;
  display: grid;
  gap: 0.45rem;
  font-size: 0.9375rem;
  color: var(--color-muted);
}
.pillar__tag {
  display: block;
  margin-top: var(--space-sm);
}

/* ---- Sizing & milestones table ---- */
.sizing__table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.sizing__table caption {
  text-align: left;
  margin-bottom: var(--space-md);
}
.sizing__table th,
.sizing__table td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--color-line);
  vertical-align: top;
}
.sizing__table thead th {
  font-family: var(--font-condensed);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--color-muted);
}
.sizing__size {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
}
.sizing__stage {
  font-weight: 700;
}

/* ---- Cart ---- */
.cart__layout {
  display: grid;
  gap: var(--space-lg);
  padding-block: var(--space-lg) var(--section-pad);
}
.cart-item {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: var(--space-md);
  align-items: center;
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--color-line);
}
.cart-item .ph {
  width: 72px;
  aspect-ratio: 3 / 4;
  margin: 0;
  font-size: 0.6875rem;
}
.cart-item__name {
  font-weight: 700;
}
.cart-item__meta {
  font-size: 0.9375rem;
  color: var(--color-muted);
}
.cart-item__price {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.summary {
  align-self: start;
  background: var(--color-cloud-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: var(--space-lg);
}
.summary__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: 0.4rem;
}
.summary__total {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-line);
  font-weight: 700;
  font-size: 1.125rem;
}
.summary .btn {
  margin-top: var(--space-md);
}
.summary__note {
  margin-top: var(--space-sm);
  font-size: 0.875rem;
  color: var(--color-muted);
}

/* ---- Account (sign in / create) ---- */
.account-grid {
  display: grid;
  gap: var(--space-xl);
  max-width: 56rem;
  margin-inline: auto;
}
.account-card h2 {
  margin-bottom: var(--space-sm);
}
.account-card__hint {
  margin-top: var(--space-md);
  font-size: 0.9375rem;
  color: var(--color-muted);
}
.account-card__link {
  display: inline-block;
  margin-top: var(--space-sm);
  font-size: 0.9375rem;
}
@media (min-width: 48rem) {
  .account-grid {
    grid-template-columns: 1fr 1fr;
  }
  .account-card + .account-card {
    border-left: 1px solid var(--color-line);
    padding-left: var(--space-xl);
  }
}

/* ---- Footer ---- */
.site-footer {
  background: var(--color-true-black);
  color: var(--color-cloud-white);
  padding-block: var(--section-pad) var(--space-lg);
}
.site-footer__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-lg);
  padding-bottom: var(--space-lg);
}
.site-footer .eyebrow {
  color: var(--color-tan);
  margin-bottom: var(--space-sm);
}
.site-footer__tagline {
  color: var(--color-tan);
  font-style: italic;
  margin-top: var(--space-sm);
}
.footer-col ul {
  display: grid;
  gap: 0.6rem;
}
.footer-col a {
  text-decoration: none;
  font-size: 0.9375rem;
}
.footer-col a:hover {
  text-decoration: underline;
}
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.certs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  font-family: var(--font-condensed);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.6875rem; /* small location - footer fine print */
  color: var(--color-tan);
}
.legal {
  font-size: 0.8125rem; /* small location - footer fine print */
  color: var(--color-tan);
}

/* ---- Slide-out cart drawer (built by script.js; progressive enhancement -
   with JS off, the cart link simply navigates to the cart page) ---- */
.scroll-locked {
  overflow: hidden;
}
.cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
}
.cart-drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.cart-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(420px, 92vw);
  display: flex;
  flex-direction: column;
  background: var(--color-bright-white);
  transform: translateX(100%);
  transition: transform 0.25s ease;
}
.cart-drawer.is-open {
  pointer-events: auto;
}
.cart-drawer.is-open .cart-drawer__overlay {
  opacity: 1;
}
.cart-drawer.is-open .cart-drawer__panel {
  transform: translateX(0);
}
.cart-drawer__head,
.cart-drawer__foot {
  padding: var(--space-md) var(--space-lg);
}
.cart-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-line);
}
.cart-drawer__close {
  background: none;
  border: 0;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}
.cart-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding-inline: var(--space-lg);
}
.cart-drawer__foot {
  border-top: 1px solid var(--color-line);
}
.cart-drawer__viewcart {
  display: block;
  text-align: center;
  margin-top: var(--space-sm);
  font-family: var(--font-condensed);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.875rem;
}

/* ---- Larger screens (enhancements over the mobile-first base) ---- */
@media (min-width: 48rem) {
  /* Nav: inline row replaces the hamburger + drop-down */
  .site-nav {
    display: flex;
    justify-content: space-between;
  }
  .nav-toggle {
    display: none;
  }
  .nav-menu {
    display: flex;
    position: static;
    flex-direction: row;
    gap: clamp(var(--space-sm), 3vw, var(--space-lg));
    padding: 0;
    border: 0;
    background: none;
  }
  .nav-menu li {
    padding-block: 0;
  }
  .nav-menu__account {
    display: none;
  }
  .account-link {
    display: inline-flex;
  }

  .hero__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
  }
  .product__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
  }
}

@media (min-width: 56rem) {
  .cart__layout {
    grid-template-columns: 2fr 1fr;
    align-items: start;
  }
}

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

/* ============================================================
   V2 COMPONENTS - sections added from the ecom wireframe brief
   (problem -> answer -> rash -> pediatric team -> only choice ->
   offer -> FAQ - PDP compare / layers / sticky bar - team page)
   ============================================================ */

/* ---- Utilities ---- */
.section--tint {
  background: var(--color-cloud-white);
}
.stars {
  letter-spacing: 0.15em;
  white-space: nowrap;
}
.proof-row {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
  font-size: 0.875rem;
  color: var(--color-muted);
  flex-wrap: balance;
}
.spine-note {
  font-family: var(--font-condensed);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--color-muted);
}

/* ---- Chips (fiber row, review filters, trust rows) ---- */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs);
}
.chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-condensed);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  font-size: 0.8125rem;
  color: var(--color-muted);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  padding: 0.45em 1em;
}
.chip--on {
  border-color: var(--color-true-black);
  color: var(--color-true-black);
}

/* ---- Statement kicker (H2 close, Lust moment) ---- */
.kicker {
  text-align: center;
  margin-top: var(--space-lg);
}

/* ---- Split panel (H3: emotional + rational) ---- */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-lg);
}
.split figure {
  display: grid;
  gap: var(--space-sm);
}
.split figcaption h3 {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: var(--space-xs);
}
.split figcaption p {
  color: var(--color-muted);
}

/* ---- Duo image row (H4 before / why-different) ---- */
.duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

/* ---- Pull-quote bar (H4 proof, transparency promise) ---- */
.quote-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
  margin-top: var(--space-md);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-cloud-white);
  padding: var(--space-sm) var(--space-md);
}
.quote-bar blockquote {
  flex: 1;
  min-width: 16rem;
  font-style: italic;
}
.quote-bar .review__author {
  white-space: nowrap;
}

/* ---- Video placeholder + play badge ---- */
.video-ph {
  position: relative;
}
.video-ph .play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--color-bright-white);
  border: 1px solid var(--color-true-black);
  display: grid;
  place-items: center;
}
.video-ph .play::after {
  content: "";
  border-left: 0.8rem solid var(--color-true-black);
  border-top: 0.5rem solid transparent;
  border-bottom: 0.5rem solid transparent;
  margin-left: 0.2rem;
}

/* ---- Pediatric team band (H5 / P5) ---- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--space-md);
  margin-block: var(--space-lg);
}
.team-grid figure {
  display: grid;
  gap: var(--space-xs);
}
.team-grid figcaption {
  font-family: var(--font-condensed);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  font-size: 0.8125rem;
  color: var(--color-muted);
  text-align: center;
}
.team-cta {
  text-align: center;
}
.team-cta .lead {
  margin: 0 auto var(--space-md);
}

/* ---- Offer cards (H7) ---- */
.offer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-md);
  max-width: 56rem;
  margin-inline: auto;
}
.offer-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: var(--space-lg);
  background: var(--color-bright-white);
}
.offer-card--featured {
  border: 2px solid var(--color-true-black);
}
.badge {
  align-self: flex-start;
  font-family: var(--font-condensed);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  font-size: 0.6875rem;
  background: var(--color-true-black);
  color: var(--color-cloud-white);
  border-radius: 999px;
  padding: 0.35em 1em;
}
.offer-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
}
.offer-card .ticklist {
  margin-block: var(--space-xs);
}
.offer-card__price {
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: auto;
}
.offer-card__price small {
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--color-muted);
}

/* ---- FAQ (native details/summary - no JS) ---- */
.faq {
  max-width: 44rem;
  margin-inline: auto;
}
.faq details {
  border-bottom: 1px solid var(--color-line);
}
.faq 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;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "+";
  font-weight: 700;
}
.faq details[open] summary::after {
  content: "\2013";
}
.faq details p {
  padding-bottom: var(--space-sm);
  color: var(--color-muted);
}

/* ---- Comparison (P3: the category vs change) ---- */
.compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-md);
  max-width: 56rem;
  margin-inline: auto;
}
.compare__col {
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: var(--space-lg);
}
.compare__col--us {
  border: 2px solid var(--color-true-black);
}
.compare__col .eyebrow {
  display: block;
  margin-bottom: var(--space-sm);
}

/* ---- Layer diagram (P4: how it works) ---- */
.layers {
  display: grid;
  gap: var(--space-xs);
  max-width: 44rem;
  margin-inline: auto;
}
.layer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-cloud-white);
  padding: var(--space-sm) var(--space-md);
}
.layer__num {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin-right: var(--space-xs);
}
.layer__tag {
  font-family: var(--font-condensed);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--color-muted);
}

/* ---- Benefit stack (P2: five reasons, five seconds) ---- */
.benefit-stack {
  display: grid;
  gap: var(--space-sm);
  max-width: 44rem;
  margin-inline: auto;
}
.benefit-line {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.benefit-line .benefit__icon {
  width: 3.5rem;
  height: 3.5rem;
  margin: 0;
  flex: none;
}

/* ---- Size chips (P1: radio pills replace the select) ---- */
.size-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}
.size-chip {
  position: relative;
  cursor: pointer;
}
.size-chip input {
  position: absolute;
  opacity: 0;
  inset: 0;
}
.size-chip span {
  display: grid;
  place-items: center;
  min-width: 2.6rem;
  height: 2.6rem;
  padding-inline: 0.5rem;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.size-chip input:checked + span {
  background: var(--color-true-black);
  border-color: var(--color-true-black);
  color: var(--color-cloud-white);
}
.size-chip input:focus-visible + span {
  outline: 2px solid var(--color-true-black);
  outline-offset: 2px;
}
.field__hint {
  margin-top: var(--space-xs);
  font-size: 0.875rem;
  color: var(--color-muted);
}
.field__hint a {
  color: inherit;
}

/* ---- Add-on bar (wipes upsell on the sleeve) ---- */
.addon-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-sm);
  margin-top: var(--space-md);
  border: 1px dashed var(--color-line);
  border-radius: var(--radius);
  background: var(--color-cloud-white);
  padding: var(--space-sm) var(--space-md);
  font-size: 0.9375rem;
}
.addon-bar label {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-weight: 700;
  cursor: pointer;
}
.addon-bar .note {
  font-size: 0.8125rem;
  color: var(--color-muted);
}

/* ---- Sticky add-to-cart bar (P0 - CSS sticky, no JS) ---- */
.atc-bar {
  position: sticky;
  bottom: 0;
  z-index: 90;
  background: var(--color-bright-white);
  border-top: 1px solid var(--color-line);
}
.atc-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-md);
  padding-block: var(--space-xs);
}
.atc-bar__name {
  font-family: var(--font-display);
  text-transform: lowercase;
  font-size: 1.25rem;
}
.atc-bar__meta {
  font-family: var(--font-condensed);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.8125rem;
  color: var(--color-muted);
}
.atc-bar__price {
  font-weight: 700;
  margin-left: auto;
}
.atc-bar .btn {
  padding-block: 0.7em;
}

/* ---- Guarantee card (P7) ---- */
.guarantee {
  max-width: 36rem;
  margin: var(--space-lg) auto 0;
  text-align: center;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-cloud-white);
  padding: var(--space-lg);
}
.guarantee .heading {
  font-size: 1.25rem;
  margin-bottom: var(--space-xs);
}
.guarantee p {
  margin-inline: auto;
  color: var(--color-muted);
}
.guarantee .btn {
  margin-block: var(--space-md) var(--space-sm);
}

/* ---- Doctor cards (team page) ---- */
.doctor-list {
  display: grid;
  gap: var(--space-md);
  max-width: 56rem;
  margin-inline: auto;
}
.doctor-card {
  display: grid;
  gap: var(--space-md);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: var(--space-md);
  align-items: center;
}
@media (min-width: 40rem) {
  .doctor-card {
    grid-template-columns: minmax(180px, 240px) 1fr;
  }
}
.doctor-card .ph {
  aspect-ratio: 4 / 3;
  margin: 0;
}
.doctor-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
}
.doctor-card .credential {
  font-family: var(--font-condensed);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  font-size: 0.8125rem;
  color: var(--color-muted);
  margin-block: 0.15rem var(--space-xs);
}
.doctor-card blockquote {
  font-style: italic;
  color: var(--color-muted);
}

/* ---- Doctor headshot wall (team page - the roster without films) ----
   Mini cards: photo left, words right. Headshots are square transparent
   cutouts on a pink slab - contain + bottom-anchor, never crop. */
.doctor-wall {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
}
.doctor-wall li {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: start;
}
.doctor-wall .headshot {
  width: 88px;
  height: 88px;
  overflow: hidden;
  background: var(--color-pink);
  border-radius: var(--radius);
}
.doctor-wall .headshot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}
.doctor-wall h3 {
  font-family: var(--font-condensed);
  font-size: 0.9375rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 0;
  margin-bottom: 0.15rem;
}
.doctor-wall blockquote {
  font-size: 0.9375rem;
  line-height: 1.65;
}
@media (min-width: 40rem) {
  .doctor-wall li {
    grid-template-columns: 120px minmax(0, 1fr);
    gap: var(--space-md);
    align-items: center;
  }
  .doctor-wall .headshot {
    width: 120px;
    height: 120px;
  }
}
@media (min-width: 56.25rem) {
  .doctor-wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg) var(--space-xl);
  }
}

/* ---- Print ---- */
@media print {
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .site-header {
    position: static;
  }
  .atc-bar {
    display: none;
  }
  .offer-card,
  .compare__col,
  .doctor-card,
  .doctor-wall li,
  .review,
  .guarantee,
  .quote-bar {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .section {
    padding-block: var(--space-lg);
  }
  .faq details {
    /* print with all answers visible */
  }
}

/* Print: keep the desktop two-column hero + buy box (the print viewport
   falls just under the 48rem breakpoint) */
@media print {
  .hero__inner,
  .product__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
  }
  .site-nav {
    display: flex;
    justify-content: space-between;
  }
  .nav-toggle {
    display: none;
  }
  .nav-menu {
    display: flex;
    position: static;
    flex-direction: row;
    gap: var(--space-md);
    padding: 0;
    border: 0;
    background: none;
  }
  .nav-menu li {
    padding-block: 0;
  }
  .nav-menu__account {
    display: none;
  }
}

/* Print: fixed heights for placeholder media (aspect-ratio boxes
   misbehave when fragmented across pages) + keep cards whole */
@media print {
  .atc-bar {
    display: none !important;
  }
  .hero__media .ph--portrait {
    aspect-ratio: auto;
    height: 380px;
  }
  .product__gallery > .ph--square {
    aspect-ratio: auto;
    height: 300px;
  }
  .product__thumbs .ph--square {
    aspect-ratio: auto;
    height: 80px;
  }
  .product__inner,
  .buy-box,
  .buy-options,
  .team-grid figure,
  .layer,
  .faq details,
  .benefit-line,
  .sizing__table tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* Print: pin the multi-column grids to their desktop column counts
   so sections stay compact on paper */
@media print {
  .benefits__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .reviews__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .team-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .site-footer__inner {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
  }
  .site-footer,
  .review,
  .offer-card,
  .guarantee {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .section-head {
    break-after: avoid;
    page-break-after: avoid;
  }
}

/* Print: the buy box is taller than a page - let it flow (overrides
   the avoid above); keep eyebrow + title together instead */
@media print {
  .product__inner,
  .buy-box {
    break-inside: auto;
    page-break-inside: auto;
  }
  .section-head,
  .kicker {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* ============================================================
   LAYOUT GUARD - grid blowout fix.
   Aspect-ratio placeholder boxes (.ph) report a huge intrinsic
   min-content width inside 1fr grid tracks (1fr = minmax(auto,1fr)
   can't shrink below it), which inflated the PDP gallery column,
   crushed the buy box, and overflowed the section. Allow tracks
   and placeholders to shrink. (Same latent bug exists in the
   original assets/styles.css.)
   ============================================================ */
.ph {
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  overflow: hidden;
}
.hero__inner > *,
.product__inner > *,
.product__gallery,
.split figure,
.duo > *,
.team-grid figure,
.reviews__grid > * {
  min-width: 0;
}
.product__gallery {
  grid-template-columns: minmax(0, 1fr);
}
.product__thumbs {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (min-width: 48rem) {
  .hero__inner,
  .product__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* Buy box polish: radios inherit width:100% from `.field input` -
   pin them to their natural size, let the label text take the row,
   and keep gallery rows packed at the top instead of stretching. */
.product__gallery {
  align-content: start;
}
.buy-option input[type="radio"] {
  width: auto;
  flex: none;
  margin-top: 0.25em;
}
.buy-option > span:not(.buy-option__tag) {
  flex: 1;
}
.addon-bar input[type="checkbox"] {
  width: auto;
  flex: none;
}
input[type="radio"],
input[type="checkbox"] {
  accent-color: var(--color-true-black);
}

/* ---- Designed image blocks (static-ad-builder batch, 2026-08-20) ---- */
.img-block {
  margin: var(--space-lg) auto 0;
}
.img-block img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
}
.offer-card__media {
  margin: calc(var(--space-lg) * -1) calc(var(--space-lg) * -1) 0;
}
.offer-card__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius) var(--radius) 0 0;
}

/* ==========================================================================
   SITE-BUILD LAYER - verbatim copy of mockup/assets/build.css (2026-08-20
   design pass: real imagery, interactive timeline, swipeable offer media,
   mobile UX + PDP UX rounds). Re-sync from the mockup like styles.css above.
   ========================================================================== */

/* ============================================================
   SITE-BUILD LAYER - real imagery in the former placeholder slots.
   Keeps Jay's styles.css untouched; only styles .ph--photo slots.
   ============================================================ */

.ph--photo {
  padding: 0;
  border: none;
  background: none;
  overflow: hidden;
  font-style: normal;
}
.ph--photo::after {
  content: none;
}
.ph--photo .ph-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--radius);
}

/* Tim 8/20: hero H1 + "before now" kicker switch from Lust to Avenir bold,
   sentence case (per approved hero reference) */
.hero h1.display,
.kicker .display {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.015em;
  line-height: 1.12;
}

/* hero H1: heavier cut (Tim 8/20: "needs some love, bold it for now") */
.hero h1.display {
  font-weight: 900;
}

/* trust bar: stacked items (bold lead + small support) - first stab at the
   art direction Ray was going to do */
.trust-bar__list--stacked {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-sm) var(--space-lg);
  text-align: center;
}
.trust-bar__list--stacked li {
  display: grid;
  gap: 0.2rem;
  align-content: start;
}
.trust-bar__list--stacked strong {
  font-weight: 700;
}
.trust-bar__list--stacked span {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--color-muted, #777);
}

/* kicker demoted to a transition line (Tim 8/20: too big; bridge to the
   answer section, may still get yanked) */
.kicker--transition .display {
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
  font-weight: 700;
  letter-spacing: 0;
}
.kicker--transition {
  margin-top: var(--space-md);
}

/* SAP tooltip: dotted-underline term, definition bubble on hover/focus */
.tip {
  position: relative;
  border-bottom: 1.5px dotted currentColor;
  cursor: help;
}
.tip__bubble {
  position: absolute;
  bottom: calc(100% + 0.6rem);
  left: 50%;
  transform: translateX(-50%);
  width: min(20rem, 78vw);
  background: var(--color-true-black, #000);
  color: var(--color-cloud-white, #fffef6);
  font-size: 0.8rem;
  line-height: 1.5;
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius, 4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease;
  z-index: 10;
  text-align: left;
  font-weight: 400;
}
.tip__bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--color-true-black, #000);
}
.tip:hover .tip__bubble,
.tip:focus .tip__bubble,
.tip:focus-within .tip__bubble {
  opacity: 1;
  visibility: visible;
}

/* kicker: full width, centered */
.kicker {
  width: 100%;
  max-width: none;
  text-align: center;
}
.kicker .display {
  max-width: none;
  margin-inline: auto;
  text-align: center;
}

/* doctor video slots are 9:16 vertical (films are 720x1280) */
.video-ph[data-video] {
  aspect-ratio: 9 / 16 !important;
}
/* ...but the tushies-rejoice parents film is landscape - 8/27 (Jay):
   the review wall's slot was inheriting the vertical ratio and rendered
   absurdly tall. Same !important to out-rank the doctor rule above. */
.reviews__video.video-ph[data-video] {
  aspect-ratio: 16 / 9 !important;
}
.team-grid .video-ph[data-video] {
  width: 100%;
  max-width: 300px;
  margin-inline: auto;
}

/* click-to-play doctor videos */
.video-ph video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
  background: #000;
}
.video-ph {
  cursor: pointer;
}

/* ============================================================
   Homepage redesign pass, Tim + Jake call 8/20:
   interactive "Since 1961" timeline + swipeable offer media
   ============================================================ */

/* ---- Interactive timeline ---- */
.timeline {
  margin-top: var(--space-lg);
}
.timeline__rail {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-xs);
}
.timeline__line {
  position: absolute;
  top: 7px;
  left: 8px;
  right: 8px;
  height: 1.5px;
  background: var(--color-line);
}
.timeline__stop {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 0.55rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-condensed);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--color-muted);
}
.timeline__dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1.5px solid var(--color-muted);
  background: var(--color-bright-white);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.timeline__stop:hover .timeline__dot {
  border-color: var(--color-true-black);
}
.timeline__stop.is-active {
  color: var(--color-true-black);
}
.timeline__stop.is-active .timeline__dot {
  background: var(--color-true-black);
  border-color: var(--color-true-black);
  transform: scale(1.15);
}
.timeline__stop--change.is-active .timeline__dot {
  background: var(--color-brown);
  border-color: var(--color-brown);
}
.timeline__panels {
  margin-top: var(--space-md);
}
.timeline__panel {
  background: var(--color-cloud-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: var(--space-md) var(--space-lg);
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}
.timeline__panel h3 {
  font-size: 1.15rem;
  margin-bottom: 0.4rem;
}
.timeline__panel p {
  color: var(--color-muted);
  max-width: var(--measure);
  margin-inline: auto;
}
.timeline__panel.is-active {
  animation: tl-fade 0.25s ease;
}
@keyframes tl-fade {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 640px) {
  .timeline__rail {
    gap: 0.25rem;
  }
  .timeline__stop {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
  }
  .timeline__panel {
    padding: var(--space-sm) var(--space-md);
  }
}

/* Timeline stops: widen the touch target on all inputs (the 15px dot alone
   is far below the ~44px minimum a thumb needs) */
.timeline__stop {
  padding: 0 0.5rem 0.5rem;
  margin-bottom: -0.5rem;
  min-width: 44px;
  touch-action: manipulation;
}

/* ---- Swipeable offer-card media ---- */
.swipe {
  position: relative;
}
.swipe__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: var(--radius) var(--radius) 0 0;
}
.swipe__track::-webkit-scrollbar {
  display: none;
}
.swipe__track img {
  flex: 0 0 100%;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.swipe__dots {
  position: absolute;
  bottom: 0.6rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.4rem;
  z-index: 1;
}
.swipe__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: background 0.15s ease;
}
.swipe__dot.is-active {
  background: var(--color-true-black);
}

/* ============================================================
   Mobile UX pass (Tim, 8/20): top-down review fixes
   ============================================================ */

/* full-bleed sections use 100vw; clip any sub-pixel horizontal overflow
   without creating a scroll container (keeps position: sticky working) */
html,
body {
  overflow-x: clip;
}

/* in-page anchors (#why, #offer, #sizing, ...) land below the sticky
   header instead of underneath it */
[id] {
  scroll-margin-top: 5.5rem;
}

/* swipe dots: bigger tap targets without growing the visible dot */
.swipe__dot {
  position: relative;
}
.swipe__dot::before {
  content: "";
  position: absolute;
  inset: -8px;
}

/* SAP tooltip on small screens: an anchored bubble overflows the viewport
   edge mid-sentence, so it becomes a fixed card pinned above the thumb zone.
   .is-open is set by tap (site.js); hover/focus still work on desktop. */
.tip.is-open .tip__bubble {
  opacity: 1;
  visibility: visible;
}
@media (max-width: 640px) {
  .tip__bubble {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1.25rem;
    top: auto;
    width: auto;
    transform: none;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  }
  .tip__bubble::after {
    content: none;
  }
}

/* email capture: the input can't be wider than the phone */
.signup-form input {
  min-width: 0;
  flex: 1 1 16rem;
  max-width: 100%;
}

/* sizing & milestones: 4 columns don't fit a phone; each row becomes a
   stacked card (size badge left, stage/weight/description right) - no
   horizontal scroll, nothing clipped */
@media (max-width: 640px) {
  .sizing__table {
    display: block;
  }
  .sizing__table thead {
    display: none;
  }
  .sizing__table tbody {
    display: grid;
    gap: var(--space-sm);
  }
  .sizing__table tr {
    display: grid;
    grid-template-columns: 3.4rem 1fr;
    grid-template-areas:
      "size stage"
      "size weight"
      "size what";
    column-gap: var(--space-sm);
    row-gap: 0.15rem;
    align-items: start;
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    background: var(--color-bright-white);
    padding: var(--space-sm) var(--space-md);
  }
  .sizing__table td {
    display: block;
    border: none;
    padding: 0;
    min-width: 0;
  }
  .sizing__table td:nth-child(1) {
    grid-area: size;
    align-self: center;
  }
  .sizing__table td:nth-child(2) {
    grid-area: weight;
    font-family: var(--font-condensed);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.78rem;
    color: var(--color-muted);
  }
  .sizing__table td:nth-child(3) {
    grid-area: stage;
  }
  .sizing__table td:nth-child(4) {
    grid-area: what;
    font-size: 0.875rem;
    color: var(--color-muted);
    margin-top: 0.2rem;
  }
  .sizing__size {
    font-size: 2rem;
  }
}

/* sticky add-to-cart bar: on small screens drop the meta line so
   name + price + button hold one compact row */
@media (max-width: 640px) {
  .atc-bar__meta {
    display: none;
  }
  .atc-bar__inner {
    flex-wrap: nowrap;
    gap: var(--space-xs) var(--space-sm);
  }
  .atc-bar__name {
    font-size: 1.05rem;
  }
  .atc-bar__price {
    margin-left: 0;
    font-size: 0.9375rem;
    white-space: nowrap;
  }
  .atc-bar .btn {
    margin-left: auto;
    padding-inline: 1.1em;
  }
}

/* trust bar: support lines drop the condensed-caps treatment for quiet
   sentence-case body type - gives the row a scannable caps-lead /
   plain-support hierarchy instead of two tiers of small caps */
.trust-bar__list--stacked span {
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--color-muted);
}
@media (max-width: 640px) {
  /* 2x2 grid instead of a 4-deep centered stack */
  .trust-bar__list--stacked {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md) var(--space-sm);
    padding-block: var(--space-md);
  }
  .trust-bar__list--stacked li {
    gap: 0.25rem;
  }
  .trust-bar__list--stacked strong {
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    line-height: 1.4;
  }
  .trust-bar__list--stacked span {
    font-size: 0.78rem;
  }
}

/* mobile display type: long all-caps headlines + wide-tracked eyebrows
   turn into hard-to-read walls at phone width - tighten tracking, ease
   the size, balance the line breaks */
@media (max-width: 640px) {
  .section-head .eyebrow {
    letter-spacing: 0.12em;
    font-size: 0.8125rem;
    text-wrap: balance;
  }
  .section-head__title {
    font-size: 1.35rem;
    letter-spacing: 0.035em;
    line-height: 1.3;
    text-wrap: balance;
  }
}

/* tooltip bubble: always plain body type, even when the trigger sits
   inside condensed-caps contexts (the trust bar's `span` rule otherwise
   outranks .tip__bubble and shrinks/greys/tracks the bubble text) */
.tip .tip__bubble {
  font-family: var(--font-body);
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.8rem;
  color: var(--color-cloud-white, #fffef6);
}

/* doctor row (homepage + PDP reprise): swipe, don't stack, on phones -
   three stacked 9:16 films made the section a full-screen-tall scroll each.
   Edge peek of the next card signals the swipe; team PAGE keeps its
   stacked full profiles. */
@media (max-width: 640px) {
  .team-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    gap: var(--space-sm);
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .team-grid::-webkit-scrollbar {
    display: none;
  }
  .team-grid figure {
    flex: 0 0 70%;
    scroll-snap-align: start;
    min-width: 0;
  }
  .team-grid .video-ph[data-video] {
    max-width: none;
  }
}

/* timeline panels: reserve height so the section below doesn't jump
   as era cards of different lengths swap in */
@media (max-width: 640px) {
  .timeline__panels {
    min-height: 11rem;
  }
}

/* ============================================================
   PDP UX overhaul (Tim, 8/20 round 4)
   ============================================================ */

/* ---- Chrome diet: announcement holds one short line on phones ---- */
@media (max-width: 640px) {
  .announcement__more {
    display: none;
  }
}

/* ---- Chrome diet: header hides on scroll-down, returns on scroll-up.
   site.js sets .is-hidden on every viewport; the transform only applies
   on phones, so desktop keeps its always-on sticky header ---- */
.site-header {
  transition: transform 0.25s ease;
}
@media (max-width: 640px) {
  .site-header.is-hidden {
    transform: translateY(-100%);
  }
}

/* ---- Buy box: option cards restructured (title + price row, short
   support lines under it, Best-value tag on the subscription) ---- */
.buy-option__body {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}
.buy-option__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.buy-option__badge {
  font-family: var(--font-condensed);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.6875rem;
  background: var(--color-true-black);
  color: var(--color-cloud-white);
  padding: 0.25em 0.6em;
  border-radius: 2px;
}
.buy-option__line {
  display: block;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--color-muted);
}

/* ---- Sticky add-to-cart: fixed bar, off-canvas until site.js reveals it
   (only once the buy box's own button has scrolled off the top) ---- */
.atc-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  margin: 0;
  transform: translateY(100%);
  transition: transform 0.25s ease;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.07);
}
.atc-bar.is-visible {
  transform: none;
}
/* while the bar is up, keep the last of the page readable above it */
body.atc-visible .site-footer {
  padding-bottom: 4.5rem;
}

/* ---- Honest comparison: designed graphic on desktop, native stacked
   columns on phones (the graphic's type is ~6px at 390px wide) ---- */
@media (min-width: 641px) {
  .compare--mobile {
    display: none;
  }
}
@media (max-width: 640px) {
  .compare-figure {
    display: none;
  }
  .compare--mobile .compare__col {
    padding: var(--space-md);
  }
  .compare__note {
    text-align: center;
    margin-top: var(--space-xs);
  }
}

/* ---- How it works: the three layer lines render as native text on
   phones only (the cutaway's annotations are illegible there) ---- */
@media (min-width: 641px) {
  .layers--mobile {
    display: none;
  }
}
@media (max-width: 640px) {
  .layers--mobile {
    margin-top: var(--space-md);
  }
}

/* ---- Reviews: swipe row on phones (edge peek, scroll-snap) instead of
   three stacked full-height cards ---- */
@media (max-width: 640px) {
  .reviews__grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    gap: var(--space-sm);
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .reviews__grid::-webkit-scrollbar {
    display: none;
  }
  .review {
    flex: 0 0 78%;
    scroll-snap-align: start;
    min-width: 0;
  }
  .review .ph--landscape {
    aspect-ratio: 16 / 10;
  }
}

/* the addon bar's own display:flex would beat the UA [hidden] rule */
.addon-bar[hidden] {
  display: none;
}

/* ---- How it works figures: annotated cutaway on desktop, clean photo on
   phones (the burned-in callouts are unreadable at 390px; the layer lines
   below carry them as text) ---- */
@media (max-width: 640px) {
  .works-figure--desktop {
    display: none;
  }
}
@media (min-width: 641px) {
  .works-figure--mobile {
    display: none;
  }
}

/* ---- Review filter chips are real buttons now ---- */
button.chip {
  background: none;
  cursor: pointer;
  touch-action: manipulation;
}
.review.is-filtered-out {
  display: none;
}

/* guarantee closes on reassurance, not a CTA (Tim 8/20) */
.guarantee__subtext {
  margin-top: var(--space-sm);
  font-size: 0.875rem;
  color: var(--color-muted);
}
/* ===== L00 | THEME BRIDGE - do not edit anything ABOVE this line ===== */
/* Below the bridge this file is rules-only. The notes for every layer
   (ids L00-L21 match the headers) live in docs/custom-css-log.md. */
:root {
  --font-body:
    "avenir-next-lt-pro", Avenir, system-ui, -apple-system, "Segoe UI",
    Roboto, sans-serif;
  --font-condensed: var(--font-body);
}

body {
  font-weight: 400;
}

.heading,
.eyebrow,
.btn,
.nav-menu a,
.cart-link,
.benefit h3,
.product-card__name,
.ticklist li::before,
.signup-form__done,
.field > label,
.sizing__table thead th,
.sizing__stage,
.cart-item__name,
.summary__total,
.spine-note,
.chip,
.split figcaption h3,
.team-grid figcaption,
.badge,
.offer-card h3,
.offer-card__price,
.faq summary,
.faq summary::after,
.layer__tag,
.size-chip span,
.addon-bar label,
.atc-bar__price,
.doctor-card h3,
.doctor-card .credential,
.timeline__stop {
  font-weight: 700;
}

.offer-card__price small,
.trust-bar__list--stacked span {
  font-weight: 400;
}

.hero h1.display {
  font-weight: 900;
}

/* ---- Page shell -------------------------------------------------------- */

html {
  overflow-x: clip;
}

body {
  padding-top: 0;
}

.body:has(.change-main) {
  margin-top: 0;
}

.body:has(.change-main) > .container:not(:has(*)) {
  display: none;
}

/* ---- Header ------------------------------------------------------------ */

.header.site-header {
  position: sticky;
  top: 0;
  width: 100%;
  height: auto;
  border-bottom: 0;
  background: var(--color-bright-white);
  z-index: 100;
}

.header.site-header.is-open {
  height: auto;
}

.site-header .site-nav {
  position: static;
}

.site-nav .header-logo {
  height: auto;
  margin: 0;
  font-size: inherit;
  text-align: center;
  justify-self: center;
}

.site-nav .header-logo__link {
  display: inline-flex;
}

.site-nav .mobileMenu-toggle {
  position: relative;
  left: auto;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  overflow: visible;
  font-size: 0;
  z-index: auto;
}

/* ---- Primary nav ------------------------------------------------------- */

.site-nav .navPages-container {
  position: absolute;
  top: 100%;
  bottom: auto;
  left: 0;
  right: 0;
  height: auto;
  background: var(--color-bright-white);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  z-index: 90;
}

.site-nav .navPages-container.is-open {
  display: block;
  padding-top: 0;
  max-height: 70vh;
  overflow-y: auto;
}

.site-nav .navPages {
  height: auto;
  padding: var(--space-sm) var(--gutter);
  background: none;
  overflow-y: visible;
}

.site-nav .navPages-list {
  margin: 0;
  list-style: none;
}

.site-nav .navPages-item {
  padding-block: 0.5rem;
}

.site-nav .navPages-action {
  display: inline-block;
  padding: 0.25rem 0;
  color: var(--color-text);
  text-decoration: none;
  text-transform: uppercase;
  font-family: var(--font-condensed);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  border-bottom: 1px solid transparent;
}

.site-nav .navPages-action:hover,
.site-nav .navPages-action:focus {
  color: var(--color-text);
  border-bottom-color: var(--color-true-black);
}

.site-nav .navPages-quickSearch,
.site-nav .navPages-item--currency,
.site-nav .navPages-action--storeCredit {
  display: none;
}

.site-nav .navPages-list--user {
  margin: 0;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-line);
  list-style: none;
}

/* ---- Nav actions (account + cart) -------------------------------------- */

.site-nav .cart-link {
  color: var(--color-text);
}

.site-nav .cart-link.navUser-item--cart__hidden-s {
  display: inline;
}

.site-nav .cart-quantity {
  display: inline;
  min-width: 0;
  padding: 0;
  background: none;
  border-radius: 0;
  color: inherit;
  font: inherit;
  line-height: inherit;
}

.site-nav .cart-quantity::before {
  content: "(";
}

.site-nav .cart-quantity::after {
  content: ")";
}

.site-nav .cart-quantity:empty::before,
.site-nav .cart-quantity:empty::after {
  content: none;
}

/* ---- Cart preview dropdown --------------------------------------------- */

#cart-preview-dropdown.dropdown-menu {
  position: absolute;
  max-width: min(24rem, calc(100vw - 2 * var(--space-sm)));
  width: 22rem;
  background: var(--color-bright-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgb(0 0 0 / 8%);
  z-index: 110;
}

#cart-preview-dropdown .previewCart {
  padding: var(--space-md);
}

#cart-preview-dropdown .previewCartAction-checkout .button,
#cart-preview-dropdown .previewCartAction-viewCart .button {
  width: 100%;
  margin: 0 0 var(--space-xs);
  font-family: var(--font-condensed);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-radius: var(--radius);
}

@media (min-width: 48rem) {
  .site-nav .mobileMenu-toggle {
    display: none;
  }

  .site-nav .navPages-container,
  .site-nav .navPages-container.is-open {
    position: static;
    display: block;
    height: auto;
    max-height: none;
    padding: 0;
    overflow: visible;
    background: none;
    border: 0;
  }

  .site-nav .navPages {
    padding: 0;
    text-align: left;
  }

  .site-nav .navPages-list {
    display: flex;
    gap: clamp(var(--space-sm), 3vw, var(--space-lg));
    float: none;
  }

  .site-nav .navPages-item {
    padding-block: 0;
  }

  .site-nav .navPages-list--user {
    display: none;
  }
}

/* ---- Section utilities -------------------------------------------------- */

.split--spaced {
  margin-top: var(--space-lg);
}

.honest__cols--spaced {
  margin-top: var(--space-xl);
}

.btn-row--center {
  justify-content: center;
}

.spine-note {
  margin-top: var(--space-sm);
}

.mission__coda {
  margin-top: var(--space-lg);
  margin-bottom: 0;
  font-style: italic;
}

.review__stars {
  margin-top: var(--space-xs);
}

.problem__close {
  margin-inline: auto;
  text-align: center;
}

.field__hint--centered {
  margin-top: var(--space-sm);
  text-align: center;
}

.chip-row--spaced {
  margin-bottom: var(--space-lg);
}

/* ---- Product detail page ------------------------------------------------ */

.product .productView {
  display: grid;
  gap: var(--space-lg);
  align-items: start;
}

.product .product__buy {
  display: grid;
  gap: var(--space-lg);
  align-content: start;
}

.product .product__buy > * {
  min-width: 0;
}

@media (min-width: 48rem) {
  .product .productView {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
  }

  .product .productView-images {
    grid-column: 1;
    grid-row: 1;
  }

  .product .product__buy {
    grid-column: 2;
    grid-row: 1;
    gap: var(--space-sm);
  }
}

.product .productView-images,
.product .productView-details {
  float: none;
  width: auto;
  padding: 0;
}

.product .productView-title {
  margin-top: var(--space-xs);
}

.product .productView-thumbnails {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-xs);
  margin: var(--space-xs) 0 0;
  list-style: none;
}

.product .productView-thumbnail {
  float: none;
  width: auto;
  padding: 0;
  margin: 0;
}

.buy-box .productView-info {
  display: none;
}

.buy-box .productView-price {
  margin: var(--space-xs) 0 0;
  font-size: 1.25rem;
}

.buy-box .productView-price .price-section {
  display: inline;
}

.buy-box .productView-rating {
  margin-top: var(--space-xs);
}

.product-data.buy-box > .productView-product {
  padding-bottom: var(--space-md);
}

/* ---- Buy form: Cornerstone options -> design controls ------------------- */

.buy-form [data-product-option-change] {
  display: grid;
  gap: var(--space-md);
}

.buy-form .form-field {
  margin: 0;
}

.buy-form .form-label,
.buy-form .form-label--alternate {
  display: block;
  margin-bottom: var(--space-xs);
  font-family: var(--font-condensed);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text);
}

.buy-form [data-product-attribute="set-rectangle"] .form-option-wrapper {
  display: inline-block;
}

.buy-form [data-product-attribute="set-rectangle"] .form-radio {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.buy-form [data-product-attribute="set-rectangle"] .form-option {
  display: grid;
  place-items: center;
  min-width: 2.6rem;
  height: 2.6rem;
  margin: 0 var(--space-xs) var(--space-xs) 0;
  padding-inline: 0.5rem;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: none;
  font-family: var(--font-condensed);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.buy-form [data-product-attribute="set-rectangle"] .form-option-variant {
  border: 0;
  padding: 0;
  min-width: 0;
  line-height: 1;
}

.buy-form [data-product-attribute="set-rectangle"] .form-radio:checked + .form-option {
  background: var(--color-true-black);
  border-color: var(--color-true-black);
  color: var(--color-cloud-white);
}

.buy-form [data-product-attribute="set-rectangle"] .form-radio:focus-visible + .form-option {
  outline: 2px solid var(--color-true-black);
  outline-offset: 2px;
}

.buy-form [data-product-attribute="set-radio"] {
  display: grid;
  gap: var(--space-xs);
}

.buy-form [data-product-attribute="set-radio"] > .form-label {
  grid-column: 1 / -1;
}

.buy-form [data-product-attribute="set-radio"] .form-radio {
  position: absolute;
  opacity: 0;
}

.buy-form [data-product-attribute="set-radio"] .form-radio + .form-label {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  margin: 0;
  padding: var(--space-sm);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
}

.buy-form [data-product-attribute="set-radio"] .form-radio:checked + .form-label {
  border-color: var(--color-true-black);
}

.buy-form .form-increment {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}

.buy-form .form-increment .button {
  margin: 0;
  border: 0;
  background: none;
}

.buy-form .form-input--incrementTotal {
  width: 3.5rem;
  border: 0;
  text-align: center;
}

.buy-form #form-action-addToCart {
  display: block;
  width: 100%;
  margin-top: var(--space-md);
  padding: 0.9em 1.8em;
  background: var(--color-true-black);
  border: 1px solid var(--color-true-black);
  border-radius: var(--radius);
  color: var(--color-cloud-white);
  font-family: var(--font-condensed);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.buy-form #form-action-addToCart:hover {
  background: #222;
}

.buy-form .form-field--stock {
  margin-top: var(--space-sm);
  font-size: 0.875rem;
  color: var(--color-muted);
}

.buy-form .add-to-cart-wallet-buttons {
  margin-top: var(--space-sm);
}

.change-main .atc-bar {
  z-index: 90;
}

.product {
  padding-block: var(--space-md) var(--section-pad);
}

.change-main .breadcrumbs {
  margin: 0 0 var(--space-md);
  padding: 0;
  list-style: none;
  font-family: var(--font-condensed);
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.change-main .breadcrumb {
  display: inline;
  padding: 0;
  font-size: inherit;
  letter-spacing: inherit;
}

.change-main .breadcrumb:not(:last-child)::after {
  content: " / ";
}

.change-main .breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.change-main .breadcrumb a:hover {
  text-decoration: underline;
}

/* ---- Pediatric team page ------------------------------------------------ */

.container--centered {
  text-align: center;
}

.lead--centered,
.mission__statement--centered,
.mission__body--centered {
  margin-inline: auto;
}

/* ===== L01 | Cornerstone-native surfaces (category, cart, search, account, auth) ===== */

/* ---- Shared page furniture --------------------------------------------- */

.page-heading {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-text);
}

.content-heading {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text);
}

h3.content-heading {
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
}

.breadcrumbs {
  padding: 0;
  font-family: var(--font-condensed);
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.breadcrumb {
  font-size: inherit;
  letter-spacing: inherit;
}

.breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.sidebarBlock-heading,
.accordion-title,
.page-sidebar .sidebarBlock-heading {
  font-family: var(--font-condensed);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* ---- Forms and buttons -------------------------------------------------- */

.form-input,
.form-select {
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  font-family: var(--font-body);
  color: var(--color-text);
}

.form-input:focus,
.form-select:focus {
  border-color: var(--color-true-black);
  box-shadow: none;
}

.form-label {
  font-family: var(--font-condensed);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text);
}

.button {
  border-radius: var(--radius);
  font-family: var(--font-condensed);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.button--primary {
  background: var(--color-true-black);
  border-color: var(--color-true-black);
  color: var(--color-cloud-white);
}

.button--primary:hover,
.button--primary:focus {
  background: #222;
  border-color: #222;
  color: var(--color-cloud-white);
}

.button:not(.button--primary) {
  background: transparent;
  border: 1px solid var(--color-true-black);
  color: var(--color-true-black);
}

.button:not(.button--primary):hover {
  background: var(--color-true-black);
  color: var(--color-cloud-white);
}

/* ---- Product cards (category, search, related) -------------------------- */

.card {
  margin-bottom: var(--space-lg);
  border: 0;
  background: none;
}

.card-figure {
  margin-bottom: var(--space-sm);
}

.card-image {
  transition: opacity 0.2s ease;
}

.card:hover .card-image {
  opacity: 0.85;
}

.card-title {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
}

.card-title > a {
  color: var(--color-text);
  text-decoration: none;
}

.card-text--brand,
.card-text[data-test-info-type="brandName"] {
  font-family: var(--font-condensed);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.card-figcaption-body .button,
.card-figcaption-button {
  font-size: 0.75rem;
}

.price,
.card-text[data-test-info-type="price"] {
  font-size: 0.9375rem;
  color: var(--color-muted);
}

.cart .cart-item {
  display: block;
  grid-template-columns: none;
  gap: 0;
  border-bottom: 1px solid var(--color-line);
}

@media (min-width: 801px) {
  .cart .cart-item {
    display: table-row;
  }
}

.cart-header-item {
  font-family: var(--font-condensed);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
  border-bottom: 1px solid var(--color-true-black);
}

@media (min-width: 801px) {
  .cart-header-item {
    padding: 0 var(--space-sm) var(--space-xs);
  }

  .cart-header-item:first-child {
    padding-left: 0;
  }

  .cart-item-figure {
    width: 8%;
    padding-left: 0;
  }

  .cart-item-block.cart-item-info {
    width: 13%;
  }

  .cart-header-quantity,
  .cart-item-block.cart-item-quantity {
    width: 16%;
  }

  .cart-item-block.cart-item-info:last-child {
    width: 14%;
  }
}

.cart {
  border-color: var(--color-line);
}

.cart-item-block {
  border-bottom: 0;
}

.cart-item-brand {
  display: none;
}

.cart-item-name {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  letter-spacing: normal;
  text-transform: none;
}

.cart-item-name > a {
  color: var(--color-text);
  font-weight: 700;
  text-decoration: none;
}

.cart-item-title .definitionList {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 0.4rem;
  row-gap: 0.2rem;
  margin: var(--space-xs) 0 0;
  font-size: 0.9375rem;
  color: var(--color-muted);
}

.cart-item-title .definitionList::before,
.cart-item-title .definitionList::after {
  content: none;
}

.cart-item-title .definitionList-key,
.cart-item-title .definitionList-value {
  margin: 0;
  font-weight: 400;
}

.cart-item-title a[data-item-edit] {
  font-size: 0.875rem;
  color: var(--color-muted);
  text-decoration: underline;
}

.cart-item-title a[data-item-edit]:hover {
  color: var(--color-text);
}

.cart-item-label {
  font-family: var(--font-condensed);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.cart-item-value {
  font-variant-numeric: tabular-nums;
}

.cart-item-discount,
.cart-item-value.price--discounted {
  color: var(--color-muted);
}

[data-cart] .form-increment {
  display: inline-flex;
  align-items: center;
  margin: 0;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-bright-white);
}

[data-cart] .form-increment .button--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2.25rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

[data-cart] .form-increment .form-input--incrementTotal {
  width: 2.5rem;
  height: 2.25rem;
  margin: 0;
  padding: 0;
  border: 0;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.cart-remove {
  background: none;
  border: 1px solid var(--color-line);
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0;
}

.cart-remove:hover {
  background: var(--color-true-black);
  border-color: var(--color-true-black);
}

.cart-remove:hover > svg {
  fill: var(--color-bright-white);
}

[data-cart-totals] .cart-totals {
  background: var(--color-cloud-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: var(--space-md);
}

.cart-total-label {
  font-family: var(--font-condensed);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

[data-cart-coupons] .cart-coupons {
  border-bottom: 0;
  padding-bottom: var(--space-xs);
}

.cart-coupon-link,
.cart-total-enhanced .cart-total-gift-certificate .cart-total-label a,
.cart-total-enhanced .cart-total-gift-certificate .cart-total-label button,
.cart-total-enhanced .cart-total-shipping-estimator .cart-total-label a,
.cart-total-enhanced .cart-total-shipping-estimator .cart-total-label button,
.cart-total-enhanced .cart-total-gift-certificate-list-item .cart-total-label a,
.cart-total-enhanced .cart-total-gift-certificate .gift-certificate-add,
.cart-total-enhanced .cart-total-gift-certificate .gift-certificate-cancel {
  color: var(--color-text);
  text-decoration: underline;
}

.cart-actions .button {
  display: block;
  float: none;
  width: 100%;
  margin: 0;
}

@media (min-width: 801px) {
  .cart-actions .button {
    float: right;
    width: 58.33333%;
  }
}

@media (min-width: 1261px) {
  .cart-actions .button {
    width: 41.66667%;
  }
}

#previewModal {
  width: min(44rem, 95%);
}

#previewModal .modal-header {
  padding: var(--space-md) var(--space-lg) 0;
}

#previewModal .modal-header-title {
  font-family: var(--font-condensed);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: left;
  margin: 0;
}

#previewModal .modal-body {
  padding: var(--space-md) var(--space-lg) var(--space-lg);
}

#previewModal .previewCart {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

#previewModal .previewCart::before,
#previewModal .previewCart::after,
#previewModal .previewCart .productView::before,
#previewModal .previewCart .productView::after,
#previewModal .previewCartCheckout::before,
#previewModal .previewCartCheckout::after,
#previewModal .previewCart .productView-info::before,
#previewModal .previewCart .productView-info::after {
  content: none;
}

#previewModal .previewCart .productView {
  order: 1;
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: var(--space-md);
  align-items: start;
  float: none;
  width: 100%;
  margin: 0;
  padding: 0;
}

#previewModal .previewCart .productView-image {
  float: none;
  display: block;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
}

#previewModal .previewCart .productView-image .productView-img-container {
  max-width: 100%;
}

#previewModal .previewCart .productView-image--cart {
  width: 100%;
  margin: 0;
}

#previewModal .previewCart .productView-details {
  float: none;
  width: auto;
  padding: 0;
}

#previewModal .previewCart .productView-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
}

#previewModal .previewCart .productView-brand {
  display: none;
}

#previewModal .previewCart .productView-price {
  margin-top: 0.25rem;
  font-size: 0.9375rem;
  color: var(--color-muted);
}

#previewModal .previewCart .productView-info {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.4rem;
  margin: 0.35rem 0 0;
  font-size: 0.9375rem;
  color: var(--color-muted);
}

#previewModal .previewCart .productView-info-name,
#previewModal .previewCart .productView-info-value {
  margin: 0;
  float: none;
  width: auto;
  font-weight: 400;
  text-transform: none;
}

#previewModal .previewCart .productView-info-name {
  display: inline-flex;
  white-space: nowrap;
}

#previewModal .previewCart .productView-info-name::after {
  content: ":";
}

#previewModal .previewCartCheckout {
  order: 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  float: none;
  width: 100%;
  background: var(--color-cloud-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: var(--space-md);
  text-align: center;
}

#previewModal .previewCartCheckout-subtotal {
  order: 1;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-sm);
  margin: 0 0 var(--space-xs);
  text-align: left;
  font-family: var(--font-condensed);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
}

#previewModal .previewCartCheckout-price {
  font-size: 1.25rem;
  color: var(--color-text);
  text-align: right;
}

#previewModal .previewCartCheckout p[data-cart-quantity] {
  order: 2;
  margin: 0 0 var(--space-xs);
  font-size: 0.875rem;
  color: var(--color-muted);
  text-align: left;
}

#previewModal .previewCartCheckout a[data-primary-checkout-now-action] {
  order: 3;
}

#previewModal .previewCartCheckout-additionalCheckoutButtons {
  order: 4;
}

#previewModal .previewCartCheckout > a.button:not(.button--primary) {
  order: 5;
}

#previewModal .previewCartCheckout a[data-reveal-close] {
  order: 6;
  width: auto;
  margin: var(--space-xs) auto 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-muted);
  font-family: var(--font-condensed);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: underline;
}

#previewModal .previewCartCheckout a[data-reveal-close]:hover {
  color: var(--color-text);
  background: none;
}

/* ---- Account and auth --------------------------------------------------- */

.account-heading,
.login-form legend,
.panel-title {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.panel,
.account-list-item,
.login-row .login-form {
  border-color: var(--color-line);
}

.site-footer__spine {
  margin-top: var(--space-xs);
  color: var(--color-tan);
}

/* ===== L02 | 2026-08-25 edits - "Website Edits Review" (Desktop/website change launch Aug 2026) ===== */

/* ---- Trust bar icons (Jake's set, one per item, above the copy) ---- */
.trust-bar__icon {
  display: block;
  width: 2.75rem;
  height: auto;
  margin: 0 auto var(--space-xs);
}

@media (max-width: 640px) {
  .trust-bar__icon {
    width: 2.25rem;
  }
}

.site-footer {
  background: #eecdb5;
  color: var(--color-true-black);
}

.site-footer .logo--footer {
  filter: none;
}

.site-footer .eyebrow,
.site-footer__tagline,
.site-footer__spine,
.site-footer .certs,
.site-footer .legal,
.site-footer a {
  color: var(--color-true-black);
}

.site-footer__bottom {
  border-top: 1px solid rgba(0, 0, 0, 0.15);
}

.product .productView-image, .productView-img-container {
  margin: 0;
}

/* ===== L03 | 2026-08-26 edits - "Website Edits Review" round 2 (homepage build-out) ===== */

.header-logo__link .logo {
  width: clamp(11rem, 24vw, 28rem);
}

.answer__band {
  padding-block: var(--space-xl);
}
.answer__band .section-head {
  margin-bottom: 0;
}
.answer__body {
  max-width: 52rem;
  margin-inline: auto;
  padding-block: var(--space-xl) var(--section-pad);
}
.answer__points {
  display: grid;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
  text-align: center;
}
.answer__point {
  background: var(--color-cloud-white);
  padding: var(--space-lg);
  border-radius: var(--radius);
}
.answer__point h3 {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: var(--space-xs);
}
.answer__point p {
  color: var(--color-muted);
  margin-inline: auto;
}

.an__grid {
  display: grid;
  gap: var(--space-lg);
}
.an__lists {
  display: grid;
  gap: var(--space-lg);
  align-content: center;
}
@media (min-width: 48rem) {
  .an__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-xl);
    align-items: center;
  }
  .an__lists {
    grid-column: 1;
    grid-row: 1;
  }
  .an__media {
    grid-column: 2;
    grid-row: 1;
  }
}

.img-compare {
  --pos: 50%;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  aspect-ratio: 4 / 3;
  background: #e7e1d6;
  border-radius: var(--radius);
  overflow: hidden;
}
.img-compare__half {
  margin: 0;
  min-width: 0;
  min-height: 0;

  position: relative;
}
.img-compare__half img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.img-compare__line,
.img-compare__range {
  display: none;
}
.img-compare.is-enhanced {
  display: block;
}
.img-compare.is-enhanced .img-compare__half {
  position: absolute;
  inset: 0;

  background: #e7e1d6;
}
.img-compare.is-enhanced .img-compare__half--always {
  z-index: 1;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.img-compare.is-enhanced .img-compare__line,
.img-compare.is-enhanced .img-compare__range {
  display: block;
}
.img-compare__label {
  position: absolute;

  top: var(--space-sm);
  font-style: italic;
  font-size: 0.9375rem;
  letter-spacing: 0.3em;
  pointer-events: none;
}
.img-compare__label--always {
  left: var(--space-md);
}
.img-compare__label--never {
  right: var(--space-md);
}
.img-compare__line {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  transform: translateX(-50%);
  background: var(--color-true-black);
  pointer-events: none;
}
.img-compare__handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--color-bright-white);
  border: 1px solid var(--color-true-black);
  font-size: 0.9375rem;
  line-height: 1;
  white-space: nowrap;
  color: var(--color-true-black);
}
.img-compare__range {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}
.img-compare:has(.img-compare__range:focus-visible) {
  outline: 2px solid var(--color-true-black);
  outline-offset: 2px;
}

.rash__grid {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
}
.rash__grid .section-head {
  margin-bottom: 0;
}
.rash__copy {
  background: var(--color-cloud-white);
  padding: var(--space-lg);
  border-radius: var(--radius);
}
.rash__media img {
  width: 100%;
  height: auto;
}
@media (min-width: 48rem) {
  .rash__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-xl);
  }
}

.heading--kerned {
  letter-spacing: 0.1em;
}

/* ---- Subscription block (review p5) ---- */
.sub-home__grid {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
}
.sub-home__title {
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.875rem);
  margin-block: var(--space-sm) var(--space-md);
}
.sub-home__media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}
.sub-home__offer {
  display: grid;
  gap: var(--space-md);
  align-content: center;
}
.sub-home__offer .offer-card__price {
  margin-top: 0;
}
@media (min-width: 48rem) {
  .sub-home__grid {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--space-xl);
  }
}

.doc-rotator {
  display: grid;
  margin-top: var(--space-md);
}
.doc-rotator__item {
  grid-area: 1 / 1;
  max-width: var(--measure);
  font-size: 0.9375rem;
  font-style: italic;
  color: var(--color-muted);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease;
}
.doc-rotator__item.is-active {
  opacity: 1;
  visibility: visible;
}
.doc-rotator__author {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--font-condensed);
  font-style: normal;
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.reviews__video {
  max-width: 52rem;
  aspect-ratio: 16 / 9;
  margin: 0 auto var(--space-lg);
}

.mission__media {
  margin-top: calc(var(--section-pad) * -1);
  margin-bottom: var(--space-xl);
}
.mission__media img {
  display: block;
  width: 100%;
  height: auto;
}
@media (min-width: 641px) {
  .mission__media {
    max-width: var(--container-width);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
}

.logo,
.site-footer__wordmark {
  color: #231f20;
}

.trust-bar__list--stacked {
  align-items: start;
}
.trust-bar__icon {
  width: 2.75rem;
  height: 2.75rem;
  object-fit: contain;
}
@media (max-width: 640px) {
  .trust-bar__icon {
    width: 2.25rem;
    height: 2.25rem;
  }
}

.site-footer__hero {
  padding-bottom: var(--space-xl);
}

.site-footer__wordmark {
  width: 100%;
  height: auto;
}
@media (max-width: 640px) {
  .site-footer__wordmark {
    max-width: none;
    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);
}

.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;
  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;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: max-content;
  margin: 0;
  padding-block: var(--space-xl);
  transition: transform 0.35s ease;
}
.size-carousel__frame {
  position: relative;
  flex: 0 0 auto;
}
.size-carousel__frame.is-active {
  z-index: 1;
}
.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);
  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%;
  }
  .size-carousel__ctas {
    display: grid;
    gap: var(--space-xs);
  }
  .size-carousel__ctas .btn {
    text-align: center;
  }
}

.buy-box .productView-title {
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
}

.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);
}

.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);
  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;
  }
}

/* ===== L04 | LAYER - 2026-08-27 - "How it works" rebuilt as native HTML ===== */

.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;
}

.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: 700;
  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: 700;
  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: 700;
  font-size: 0.8125rem;
  text-align: center;
}

@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;
    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);
  }
}

/* ===== L05 | LAYER - 2026-08-27 - Video pass: lazy loading + posters ===== */

.video-ph .ph-link {
  display: block;
  height: 100%;
}

@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%;
  }
}

/* ===== L06 | LAYER - 2026-08-27 - PDP gallery: thumbnail strip rework ===== */

.product .productView-thumbnails::before,
.product .productView-thumbnails::after {
  content: none;
}

.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;
}

@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;
  }
}

.product .productView-img-container {
  max-width: none;
  aspect-ratio: 1 / 1;
}

.product .productView-img-container::after {
  content: none;
}

@media (min-width: 1100px) {
  .product .productView.product__inner {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }
}

.product .productView.product__inner {
  padding-block-end: 0;
}

.product .productView::before,
.product .productView::after {
  content: none;
}

.product .productView-images {
  margin-bottom: 0;
}

/* ===== L07 | LAYER - 2026-08-27 - Tom's final copy pass (homepage) ===== */

.tip__more {
  display: block;
  margin-top: 0.5rem;
  color: inherit;
  text-decoration: underline;
  font-weight: 700;
}

.offer-card__solo-line {
  font-size: 1.25rem;
  line-height: 1.5;
  margin: 0 0 var(--space-sm);
}

.offer-card__checkout-note {
  font-size: 0.8125rem;
  color: var(--color-muted);
  font-weight: 400;
}

/* ===== L08 | LAYER - 2026-08-28 - Trust bar 2x2 at mid widths + mission 50/50 ===== */

@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);
  }
}

@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;
  }

  .mission .mission__statement,
  .mission .mission__body {
    margin-inline: 0;
  }
  .mission .btn-row--center {
    justify-content: flex-start;
  }
}

:root {
  --section-pad: clamp(1.75rem, 4.5vw, 3.75rem);
}

/* ===== L09 | 2026-08-28 - PDP BUY BOX PASS (Jay) ===== */

.atc-bar__name {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.buy-box .productView-price {
  display: none;
}

.buy-form .form-field--purchase-locked {
  display: none;
}

.size-hint {
  position: relative;
}

.buy-form [data-product-option-change] .size-hint {
  margin-top: calc(var(--space-xs) - var(--space-md));
}

.size-popout {
  display: inline;
}

.size-popout {
  display: inline-block;
  vertical-align: baseline;
}

.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);
}

.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;
}

.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;
}

.buy-form .count-cards {
  display: grid;
  gap: var(--space-xs);
}

.buy-form .count-cards .form-option-wrapper {
  display: block;
}

.buy-form .count-cards .form-option-wrapper.count-card--box {
  order: -1;
}

.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;
}

.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;
}

.buy-form .count-cards .buy-option__line--contents {
  color: var(--color-text);
}

.buy-form .count-cards .buy-option__line--contents:empty {
  display: none;
}

.buy-form .add-to-cart-wrapper {
  display: block !important;
}

.buy-form .add-to-cart-buttons {
  float: none;
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  padding: 0;
}

.buy-form #form-action-addToCart:disabled {
  opacity: 1;
  background: var(--color-true-black);
  border-color: var(--color-true-black);
  color: var(--color-cloud-white);
}

.buy-form .form-field--increments {
  display: none;
}

/* ===== L10 | 2026-08-28 - SPACING AUDIT FIXES (Jay) ===== */

.announcement p {
  margin: 0;
}

@media (max-width: 640px) {
  .announcement p {
    letter-spacing: 0.08em;
  }

  .announcement__more {
    display: block;
  }
}

.body:has(.change-main) {
  margin-bottom: 0;
}

.buy-box__desc > p:last-child {
  margin-bottom: 0;
}

.page-head .eyebrow,
.container--centered .eyebrow {
  margin-inline: auto;
}

body.has-activeNavPages {
  overflow: visible;
}

.atc-bar__price:empty {
  display: none;
}
.atc-bar__price:empty + .btn {
  margin-left: auto;
}

.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;
}

/* ===== L11 | LAYER - 2026-08-31 - Launch-audit pass (items 09/14/18/19) ===== */
.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;
}

/* ===== L12 | LAYER - 2026-09-01 - Out-of-stock option values (Jay) ===== */
.buy-form [data-product-attribute] .is-out-of-stock {
  display: none !important;
}

/* ===== L13 | LAYER - 2026-09-01 - Proposed buy box (Jay, proposedbuybox.html) ===== */

/* ---- Cards: block layout, room above for the flag ---- */
.buy-form .count-cards {
  gap: 10px;
  padding-top: 9px;
}

.buy-form .count-cards .form-option {
  position: relative;
  display: block;
  padding: 14px 14px 12px;
  border-radius: 0;
  font-size: 1rem;
  line-height: 1.45;
  text-align: left;

  justify-items: stretch;
  color: var(--color-true-black);
  overflow: visible;
}

.buy-form .count-cards .form-radio:checked + .form-option {
  border-color: var(--color-true-black);
  box-shadow: inset 0 0 0 2px var(--color-true-black);
}

.buy-form .count-cards .buy-option__body {
  display: block;
}

.buy-form .count-cards .buy-option__flag {
  position: absolute;
  top: -9px;
  left: 12px;
  padding: 3px 8px;
  background: var(--color-true-black);
  color: var(--color-cloud-white);
  font-family: var(--font-body);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.5;
}

.buy-form .count-cards .buy-option__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.buy-form .count-cards .buy-option__name {
  font-weight: 900;
  font-size: 0.98rem;
}

.buy-form .count-cards .buy-option__price {
  font-weight: 900;
  font-size: 1.05rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.buy-form .count-cards .buy-option__was {
  margin-right: 6px;
  font-weight: 400;
  font-size: 0.85rem;
  text-decoration: line-through;
}

.buy-form .count-cards .buy-option__was:empty {
  display: none;
}

.buy-form .count-cards .buy-option__qty,
.buy-form .count-cards .buy-option__ppd,
.buy-form .count-cards .buy-option__fine {
  display: block;
  color: var(--color-true-black);
}

.buy-form .count-cards .buy-option__qty {
  margin-top: 3px;
  font-size: 0.85rem;
}

.buy-form .count-cards .buy-option__ppd {
  margin-top: 4px;
  font-size: 0.82rem;
}

.buy-form .count-cards .buy-option__ppd strong,
.buy-form .count-cards .buy-option__qty strong {
  font-weight: 900;
}

.buy-form .count-cards .buy-option__ppd:empty {
  display: none;
}

.buy-form .count-cards .buy-option__fine {
  margin-top: 5px;
  font-size: 0.74rem;
  line-height: 1.45;
}

.buy-form .form-field--purchase-cadence > .form-label,
.buy-form .form-field--purchase-cadence select {
  display: none;
}

.buy-form .buy-cadence {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.5;
  text-align: left;
  color: var(--color-true-black);
}

/* ---- Busters: the terms directly under the CTA ---- */
.buy-box__busters {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.buy-box__busters li {
  position: relative;
  padding: 7px 0 7px 22px;
  border-bottom: 1px solid var(--color-line);
  font-size: 0.8rem;
  line-height: 1.5;
  text-align: left;
  color: var(--color-true-black);
}

.buy-box__busters li::before {
  content: "+";
  position: absolute;
  left: 4px;
  font-weight: 900;
}

.buy-box__busters li:last-child {
  border-bottom: none;
}

.atc-bar .btn {
  white-space: nowrap;
}

.buy-form .add-to-cart-wallet-buttons {
  margin-top: 0;
}
.buy-form .add-to-cart-wallet-buttons > * {
  margin-top: 14px;
}

@media (max-width: 640px) {
  .product__buy {
    padding-inline: 0.75rem;
  }

  .product .product__buy {
    row-gap: 0;
  }

  .buy-box__form .productView-options {
    text-align: left;
  }

  .buy-form .size-hint {
    font-size: 0.75rem;
  }

  .buy-form .form-field--purchase-cadence {
    margin-top: calc(10px - var(--space-md));
  }
  .buy-form #form-action-addToCart {
    margin-top: 14px;
  }
  .buy-form .add-to-cart-buttons {
    margin-bottom: 0;
  }
}

@media (max-width: 800px) {
  [data-cart] .page-heading {
    margin-bottom: var(--space-md);
  }

  .cart-list {
    border-top-color: var(--color-line);
  }

  .cart .cart-item {
    position: relative;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    column-gap: var(--space-sm);
    row-gap: 0;
    align-items: start;
    padding: var(--space-md) 0;
  }

  .cart .cart-item::before,
  .cart .cart-item::after {
    content: none;
  }

  .cart .cart-item-figure {
    grid-column: 1;
    grid-row: 1;
    float: none;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
  }

  .cart .cart-item-image {
    width: 100%;
    height: auto;
    max-width: 100%;
  }

  .cart .cart-item-title {
    grid-column: 2;
    grid-row: 1;
    display: block;
    height: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .cart .cart-item-name {
    display: block;
    padding-right: 2.25rem;
  }

  .cart .cart-item-title .definitionList {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.875rem;
    line-height: 1.5;
  }

  .cart .cart-item-title .definitionList-key,
  .cart .cart-item-title .definitionList-value {
    display: inline;
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
  }

  .cart .cart-item-title .definitionList-value {
    display: inline-block;
    max-width: 100%;
  }

  .cart .cart-item-title .definitionList-key:not(:first-child)::before {
    content: "\A";
    white-space: pre;
  }

  .cart .cart-item-title a[data-item-edit] {
    display: inline-block;
    margin-top: 0.375rem;
  }

  .cart .cart-item-block.cart-item-info {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    float: none;
    clear: none;
    width: auto;
    min-height: 2rem;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .cart .cart-item-title + .cart-item-info {
    margin-top: var(--space-xs);
  }

  .cart .cart-item-info .cart-item-label {
    display: block;
    float: none;
    width: auto;
    margin: 0 auto 0 0;
    padding: 0;
    text-align: left;
    line-height: 1.5;
  }

  .cart .cart-item-info .cart-item-value {
    padding: 0;
  }

  .cart .cart-item-quantity .cart-item-backorder-message,
  .cart .cart-item-quantity .cart-item-option-stock {
    flex-basis: 100%;
    margin-left: 0;
    text-align: left;
  }

  .cart .cart-remove {
    position: absolute;
    top: var(--space-md);
    right: 0;
    float: none;
    width: 1.75rem;
    height: 1.75rem;
    margin: 0;
    padding: 0.375rem;
  }

  [data-cart-coupons] .cart-coupons {
    padding-bottom: 0.75rem;
  }

  [data-cart-totals] .cart-totals {
    padding: var(--space-sm);
  }

  [data-cart-totals] .cart-total {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    column-gap: var(--space-sm);
  }

  [data-cart-totals] .cart-total::before,
  [data-cart-totals] .cart-total::after {
    content: none;
  }

  [data-cart-totals] .cart-totals .cart-total .cart-total-label,
  [data-cart-totals] .cart-totals .cart-total .cart-total-value {
    float: none;
    width: auto;
    max-width: none;
  }

  [data-cart-totals] .cart-totals .cart-total .cart-total-label {
    flex: 0 1 auto;
    min-width: 0;
    text-align: left;
  }

  [data-cart-totals] .cart-totals .cart-total .cart-total-value {
    flex: 1 1 0;
    min-width: 0;
    text-align: right;
  }

  [data-cart-totals] .cart-total > :not(.cart-total-label):not(.cart-total-value) {
    flex: 1 1 100%;
  }
}

@media (max-width: 360px) {
  .cart .cart-item {
    grid-template-columns: 64px minmax(0, 1fr);
    column-gap: 0.75rem;
  }
}

/* ===== L14 | Brand markup in a Web Page (FAQ moved to the page editor, 2026-09-02) ===== */

.body:has(.page-content .page-head) .breadcrumbs,
.page:has(.page-head) .page-heading {
  display: none;
}

.body:has(.page-content .page-head) {
  margin-top: 0;
  margin-bottom: 0;
}

.page-content:has(.page-head) {
  width: 100%;
}

.page-content .section:not(.full-bleed) > .container {
  max-width: none;
  padding-inline: 0;
}

.page-content > p:empty {
  display: none;
}

/* ===== L15 | NO MUTED TYPE, SITE-WIDE (2026-09-03, Jay's instruction) ===== */
:root {
  --color-muted: var(--color-text);
}

.timeline__dot {
  border-color: #6f6b66;
}

.story__panel--dark .ticklist--never li::before {
  color: var(--color-cloud-white);
}

/* ===== L16 | Doctor credentials on the wall (pediatric-team.html, 2026-09-03) ===== */
.doctor-wall .credential {
  font-family: var(--font-condensed);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  font-size: 0.75rem;
  margin-block: 0 var(--space-xs);
}

/* ===== L17 | Typekit family name (2026-09-04, while unblocking the kit CSS for the 9/2 SEO audit) ===== */
:root {
  --font-body:
    "avenir-lt-pro", "avenir-next-lt-pro", Avenir, system-ui, -apple-system,
    "Segoe UI", Roboto, sans-serif;
}

/* ===== L18 | Product reviews wall (2026-09-04) ===== */
.reviews--product .review__quote {
  white-space: pre-line;
}
.reviews--product .stars__empty {
  color: var(--color-line);
}
.reviews--product .review__date {
  font-weight: 400;
}
.reviews--product .review__date::before {
  content: "·";
  margin-inline: 0.5em;
}
.reviews--product .pagination {
  margin-top: var(--space-lg);
  text-align: center;
}
.reviews--product .pagination-list {
  display: inline-flex;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ===== L19 | Footer social links (2026-09-08) ===== */
.footer-col .social-follow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  padding: 0;
  list-style: none;
}
.footer-col .social-follow a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--color-true-black);
}
.footer-col .social-follow a::before {
  content: "";
  position: absolute;
  inset: -0.625rem;
}
.social-follow__icon {
  width: 1.5rem;
  height: 1.5rem;
}
.footer-col .social-follow a:hover .social-follow__icon {
  opacity: 0.6;
}
.footer-col .social-follow a:focus-visible {
  outline: 2px solid var(--color-true-black);
  outline-offset: 4px;
}

/* ===== L20 | Consent posture (2026-09-10) ===== */
#consent-manager-update-banner {
  display: none !important;
}
[data-consent-manager-dialog] .cd-gpc-note {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.3;
  color: #000000;
}

/* ===== L21 | Type utilities (2026-09-10) ===== */
.t-body { font-family: var(--font-body) !important; }
.t-display {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  text-transform: lowercase !important;
}
.t-400 { font-weight: 400 !important; }
.t-700 { font-weight: 700 !important; }
.t-900 { font-weight: 900 !important; }
.t-display.t-700,
.t-display.t-900 { font-weight: 400 !important; }
.t-upper { text-transform: uppercase !important; }
.t-lower { text-transform: lowercase !important; }
.t-case-none { text-transform: none !important; }
.t-display.t-upper,
.t-display.t-case-none { text-transform: lowercase !important; }