/* Cobi Clean design system - tokens and components per the Cobi Web Design
   System (Clare Digital, 2026-09-10). Rules only below the THEME BRIDGE line;
   notes for every layer live in docs/custom-css-log.md. */

/* ---- 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;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* ---- Tokens ---- */
:root {
  /* Type steps (playground proposal, 10/21): 10 sizes for the whole site */
  --fs-xs: 0.75rem;                                    /* 12  eyebrows, tiny labels */
  --fs-meta: 0.8125rem;                                /* 13  meta, review names */
  --fs-small: 0.875rem;                                /* 14  fine print, card details */
  --fs-ui: 0.9375rem;                                  /* 15  buttons, nav, form text */
  --fs-body: 1rem;                                     /* 16  body */
  --fs-lead: 1.125rem;                                 /* 18  lead paragraphs, FAQ questions */
  --fs-title: clamp(1.25rem, 1.15rem + 0.4vw, 1.375rem);  /* 20-22  card titles, bands */
  --fs-subhead: clamp(1.5rem, 1.35rem + 0.6vw, 1.75rem);  /* 24-28  subheads */
  --fs-heading: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);    /* 28-44  section headlines */
  --fs-display: clamp(2.5rem, 1.6rem + 3.2vw, 3.75rem);   /* 40-60  hero, feature headlines */

  /* brand */
  --color-primary: #002d5b;
  --color-primary-dark: #001e3d;
  --color-secondary: #f7c85f;
  --color-accent: #ace3ef;
  --color-rosey: #f2cfb8;
  --color-sku: #009ecc;

  /* grounds */
  --color-bg: #ffffff;
  --color-bg-alt: #f9f6e5;
  --color-bg-dark: #002d5b;

  /* text */
  --color-text: #002d5b;
  --color-text-muted: #517090; /* solid, no opacity on text (was navy at 68%) */
  --color-text-muted-dark: #c2c9c6; /* solid light tone for meta text on navy */
  --color-text-light: #ffffff;

  /* utility */
  --color-border: #e5e7eb;
  --color-rule: rgba(0, 45, 91, 0.18);
  --color-rule-dark: rgba(249, 246, 229, 0.2);
  --color-success: #047857;
  --color-success-light: #56d167;
  --color-danger: #b91c1c;
  --parchment: #f8f7e0;
  --lime: #b0df00;
  --color-compare-green: #008000; /* live site's comparison-table marks */
  --color-compare-red: #ad0014;

  /* type */
  --font-heading: "fields", Fields, "Iowan Old Style", "Apple Garamond", Baskerville, "Times New Roman", serif;
  --font-body: "avenir-next-lt-pro", "Avenir Next", Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* layout */
  --max-width: 1200px;
  --max-width-narrow: 900px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --section-pad: clamp(3rem, 8vw, 6rem);
  --measure: 65ch;
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;

  /* shape */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* elevation */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

  /* aliases the theme bridge reads */
  --font-display: var(--font-heading);
  --font-condensed: var(--font-body);
  --color-line: var(--color-rule);
  --color-muted: var(--color-text-muted);
  --container-width: var(--max-width);
  --radius: var(--radius-md);
  --color-true-black: var(--color-primary); /* Change's focus/keyline token; Cobi never uses black */
  --thumb-rail: min(5.5vw, 4.5rem); /* width of the PDP's desktop thumbnail rail (L25) */
}

/* ---- Base ---- */
body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--color-text);
  background: var(--color-bg-alt);
  -webkit-font-smoothing: antialiased;
}
::selection {
  background: var(--color-accent);
  color: var(--color-primary);
}
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}
.on-dark :focus-visible {
  outline-color: var(--color-secondary);
}
a {
  text-underline-offset: 0.15em;
}
strong,
b {
  font-weight: 700;
}
p {
  max-width: var(--measure);
}

/* ---- Typography ---- */
h1,
h2 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: 0;
  text-transform: none;
  text-wrap: balance;
}
h3,
h4,
h5,
h6 {
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 1.25;
}
.display {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: 1.04;
  letter-spacing: 0;
  text-transform: none;
  text-wrap: balance;
}
.heading {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-heading);
  line-height: 1.12;
  letter-spacing: 0;
  text-transform: none;
  text-wrap: balance;
}
.heading--sm {
  font-size: var(--fs-subhead);
}
.quote {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-heading);
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
  text-wrap: balance;
}
.subheading {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-title);
  line-height: 1.3;
}
.eyebrow,
.kicker {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-meta);
  line-height: 1.3;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.lead {
  font-size: var(--fs-title);
  line-height: 1.5;
  max-width: var(--measure);
}
.small {
  font-size: var(--fs-small);
}
.muted {
  color: var(--color-text-muted);
}
.tabular {
  font-variant-numeric: tabular-nums;
}

/* ---- Layout ---- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow {
  max-width: var(--max-width-narrow);
}
.container--centered {
  text-align: center;
}
.section {
  padding-block: var(--section-pad);
}
.section--flush {
  padding-block: 0;
}
.section--tight {
  padding-block: calc(var(--section-pad) * 0.6);
}
.full-bleed {
  margin-inline: calc(50% - 50vw);
}
.section-head {
  display: grid;
  gap: var(--space-xs);
  justify-items: center;
  max-width: 44rem;
  margin: 0 auto var(--space-lg);
  text-align: center;
}
.section-head--left {
  justify-items: start;
  margin-inline: 0;
  text-align: left;
}
.section-head .lead {
  margin-top: var(--space-xs);
}
.grid {
  display: grid;
  gap: var(--space-md);
}
.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}
.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
.stack > * + * {
  margin-top: var(--space-sm);
}

/* ---- Grounds ---- */
.on-white,
.section--white {
  background: var(--color-bg);
  color: var(--color-text);
}
.on-cream,
.section--cream,
.section--tint {
  background: var(--color-bg-alt);
  color: var(--color-text);
}
.on-dark,
.section--navy {
  background: var(--color-bg-dark);
  color: var(--color-bg-alt);
}
.on-dark .eyebrow,
.section--navy .eyebrow {
  color: var(--color-accent);
}
.on-dark .muted {
  color: var(--color-text-muted-dark);
}
.on-dark ::selection {
  background: var(--color-secondary);
  color: var(--color-primary);
}
.sky-bar {
  border-top: 0.5rem solid var(--color-accent);
}
.hl {
  padding: 0 0.15em;
  background: var(--color-accent);
  color: var(--color-primary);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.punch {
  color: var(--color-secondary);
}
.strike {
  position: relative;
  display: inline-block;
}
.strike::after {
  content: "";
  position: absolute;
  left: -0.5em;
  right: -0.5em;
  top: 52%;
  height: 0.06em;
  background: currentColor;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 0;
  border-radius: var(--radius-full);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color 200ms ease,
    color 200ms ease,
    transform 200ms ease,
    box-shadow 200ms ease,
    filter 200ms ease;
}
.btn--primary {
  background: var(--color-primary);
  color: var(--color-text-light);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--color-primary-dark);
  color: var(--color-text-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.btn--secondary {
  background: var(--color-secondary);
  color: var(--color-primary);
}
.btn--secondary:hover,
.btn--secondary:focus-visible {
  color: var(--color-primary);
  filter: brightness(1.05);
  transform: translateY(-2px);
}
.btn--ghost {
  background: transparent;
  color: var(--color-primary);
  box-shadow: inset 0 0 0 1.5px currentColor;
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: var(--color-primary);
  color: var(--color-bg-alt);
  box-shadow: inset 0 0 0 1.5px var(--color-primary);
}
.on-dark .btn--primary {
  background: var(--color-bg-alt);
  color: var(--color-primary);
}
.on-dark .btn--primary:hover,
.on-dark .btn--primary:focus-visible {
  background: var(--color-bg);
  color: var(--color-primary);
}
.on-dark .btn--ghost {
  color: var(--color-bg-alt);
}
.on-dark .btn--ghost:hover,
.on-dark .btn--ghost:focus-visible {
  background: var(--color-bg-alt);
  color: var(--color-primary);
  box-shadow: inset 0 0 0 1.5px var(--color-bg-alt);
}
.btn--lg {
  padding: 1.125rem 2.5rem;
  font-size: var(--fs-lead);
}
.btn--sm {
  padding: 0.75rem 1.5rem;
  font-size: var(--fs-ui);
}
.btn--caps {
  font-size: var(--fs-small);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.btn--block {
  display: flex;
  width: 100%;
}
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.6;
  cursor: default;
  transform: none;
  box-shadow: none;
}
.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}
.btn-row--center {
  justify-content: center;
}

/* ---- Badges, chips, stars, check-dots ---- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.badge svg,
.badge img {
  flex: none;
  width: 1rem;
  height: 1rem;
}
.badge--gold {
  background: var(--color-secondary);
}
.badge--outline {
  background: transparent;
  box-shadow: inset 0 0 0 1px currentColor;
}
.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
}
.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.chip--on,
.chip[aria-pressed="true"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-bg-alt);
}
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.stars {
  color: var(--color-secondary);
  font-size: var(--fs-body);
  line-height: 1;
  letter-spacing: 0.08em;
}
.stars__empty {
  color: var(--color-rule);
}
.on-dark .stars__empty {
  color: var(--color-rule-dark);
}
.proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-ui);
}
.ticklist {
  display: grid;
  gap: 0.65rem;
}
.ticklist li {
  position: relative;
  padding-left: 2rem;
}
.ticklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--color-accent);
}
.ticklist li::after {
  content: "";
  position: absolute;
  left: 0.44rem;
  top: 0.32em;
  width: 0.32rem;
  height: 0.62rem;
  border: solid var(--color-primary);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ---- Cards ---- */
.card {
  padding: var(--space-md);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.on-cream .card,
.section--cream .card,
.section--tint .card {
  border: 0.5px solid var(--color-primary);
}
.on-dark .card,
.section--navy .card {
  background: var(--color-primary-dark);
  border: 0;
  color: var(--color-bg-alt);
}
.card__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-lead);
  line-height: 1.3;
}
.card__body {
  font-size: var(--fs-ui);
}
.card--icon {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: var(--space-sm);
  align-items: start;
}
.card__icon,
.benefit__icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-md);
  background: var(--color-accent);
}
.card__icon img,
.card__icon svg,
.benefit__icon img,
.benefit__icon svg {
  width: 2.1rem;
  height: 2.1rem;
}
.on-dark .card__icon,
.on-dark .benefit__icon {
  background: rgba(249, 246, 229, 0.1);
}

/* ---- Announcement + header ---- */
.announcement {
  background: var(--color-primary);
  color: var(--color-text-light);
  text-align: center;
}
.announcement p {
  max-width: none;
  margin: 0;
  padding-block: 0.55rem;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.announcement a {
  color: inherit;
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-bg);
  transition: box-shadow 0.2s ease;
}
.site-header[data-scrolled] {
  box-shadow: 0 1px 0 var(--color-rule), var(--shadow-sm);
}
.site-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-sm);
  min-height: 3.5rem;
  padding-block: 0.75rem;
}
.logo-link {
  display: inline-flex;
  color: var(--color-primary);
  text-decoration: none;
}
.logo {
  display: block;
  width: auto;
  height: 1.625rem;
}
.nav-toggle {
  position: relative;
  display: inline-grid;
  place-items: center;
  justify-self: start;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  background: none;
  border: 0;
  color: var(--color-primary);
  cursor: pointer;
}
.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform: translateX(-50%);
  transition:
    transform 0.2s ease,
    background-color 0.2s ease;
}
.nav-toggle__bar {
  top: 50%;
}
.nav-toggle__bar::before {
  top: -7px;
}
.nav-toggle__bar::after {
  top: 7px;
}
.nav-toggle.is-open .nav-toggle__bar,
.nav-toggle[aria-expanded="true"] .nav-toggle__bar {
  background: transparent;
}
.nav-toggle.is-open .nav-toggle__bar::before,
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before {
  transform: translateX(-50%) translateY(7px) rotate(45deg);
}
.nav-toggle.is-open .nav-toggle__bar::after,
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after {
  transform: translateX(-50%) translateY(-7px) rotate(-45deg);
}
.nav-actions {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: var(--space-sm);
}
.nav-icon {
  display: inline-flex;
  align-items: center;
  color: var(--color-primary);
}
.nav-icon svg {
  width: 1.5rem;
  height: 1.5rem;
}
.account-link {
  display: none;
}
.cart-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.6rem 0.95rem;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---- Hero ---- */
.hero {
  padding-block: clamp(2.5rem, 6vw, 5rem) var(--section-pad);
}
.hero__inner {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
}
.hero__copy {
  display: grid;
  gap: var(--space-sm);
  justify-items: start;
  text-align: left;
}
.hero__copy .lead {
  max-width: 36rem;
}
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem var(--space-sm);
  font-size: var(--fs-ui);
}
.hero__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-xl);
  background: var(--color-accent);
}
.hero__media img,
.hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__media--mark {
  display: grid;
  place-items: center;
}
.hero__media--mark img {
  width: 55%;
  height: auto;
  object-fit: contain;
}

/* ---- Product grid ---- */
.product-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.product-grid > li {
  display: grid;
}

/* ---- Benefits ---- */
.benefits__grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.benefit {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: var(--space-sm);
  align-items: start;
}
.benefit h3 {
  margin-bottom: 0.25rem;
  font-size: var(--fs-lead);
}
.benefit p {
  font-size: var(--fs-ui);
}

/* ---- Stats bar ---- */
.stats__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md) var(--space-sm);
  text-align: center;
}
.stat__num {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: 1;
  color: var(--color-secondary);
  font-variant-numeric: tabular-nums;
}
.stat__num small {
  font-size: 0.5em;
}
.stat__label {
  margin-top: 0.45rem;
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.stats__note {
  max-width: 44rem;
  margin: var(--space-lg) auto 0;
  font-size: var(--fs-small);
  text-align: center;
  color: var(--color-bg-alt);
}

/* ---- Reviews ---- */
.reviews__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 0.25rem;
  font-size: var(--fs-ui);
}
.reviews__grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.review {
  display: grid;
  gap: var(--space-xs);
  align-content: start;
  padding: var(--space-md);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.on-cream .review,
.section--cream .review,
.section--tint .review {
  border: 0.5px solid var(--color-primary);
}
.review blockquote {
  font-size: var(--fs-body);
  line-height: 1.5;
}
.review__author {
  margin-top: 0.25rem;
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.review__date {
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.swipe {
  display: flex;
  gap: var(--space-sm);
  overflow-x: auto;
  padding-bottom: var(--space-xs);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.swipe::-webkit-scrollbar {
  display: none;
}
.swipe > * {
  flex: 0 0 min(85%, 20rem);
  scroll-snap-align: start;
}

/* ---- Comparison ---- */
.compare-wrap {
  overflow-x: auto;
}
.compare {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: var(--fs-ui);
}
.compare th,
.compare td {
  padding: 0.8rem 0.75rem;
  border-bottom: 1px solid var(--color-rule);
  text-align: left;
  vertical-align: top;
}
.compare thead th {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.compare th:first-child {
  width: 40%;
}
.compare td:not(:first-child),
.compare thead th:not(:first-child) {
  text-align: center;
}
.compare .yes {
  color: var(--color-primary);
  font-weight: 700;
}
.compare .no {
  color: var(--color-danger);
  font-weight: 700;
}
.compare .is-us {
  background: rgba(172, 227, 239, 0.25);
}

/* ---- FAQ ---- */
.faq {
  border-top: 1px solid var(--color-primary);
}
.faq details {
  border-bottom: 1px solid var(--color-primary);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 1rem 0;
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  font-weight: 700;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "+";
  flex: none;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-primary);
  font-weight: 700;
}
.faq details[open] summary::after {
  content: "\2013";
}
.faq details > :not(summary) {
  max-width: var(--measure);
  padding: 0 0 1.1rem;
}
.on-dark .faq,
.on-dark .faq details {
  border-color: var(--color-rule-dark);
}

/* ---- Guarantee ---- */
.guarantee {
  display: grid;
  gap: 0.5rem;
  justify-items: center;
  margin-top: var(--space-xl);
  padding: var(--space-lg);
  border-radius: var(--radius-xl);
  background: var(--color-accent);
  color: var(--color-primary);
  text-align: center;
}
.guarantee .heading {
  font-size: var(--fs-heading);
}
.guarantee__subtext {
  font-size: var(--fs-ui);
}

/* ---- Partners ---- */
.partners {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-md) var(--space-lg);
}
.partners img {
  width: auto;
  height: 3.25rem;
}

/* ---- Story split ---- */
.story {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
}
.story__media {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-xl);
  background: var(--color-accent);
}
.story__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.story__media--mark {
  display: grid;
  place-items: center;
}
.story__media--mark img {
  width: 45%;
  height: auto;
  object-fit: contain;
}

/* ---- Email capture ---- */
.email-capture__inner {
  display: grid;
  gap: var(--space-sm);
  justify-items: center;
  max-width: 40rem;
  margin-inline: auto;
  text-align: center;
}
.signup-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  width: 100%;
  max-width: 32rem;
  margin-top: var(--space-xs);
}
.signup-form input[type="email"] {
  flex: 1 1 14rem;
  min-width: 0;
  padding: 0.95rem 1.25rem;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-full);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--fs-body);
}
.signup-form input[type="email"]:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}
.signup-form .btn {
  flex: 0 0 auto;
}
.field__hint {
  font-size: var(--fs-meta);
  color: var(--color-text-muted);
}
.on-dark .field__hint {
  color: var(--color-text-muted-dark);
}

/* ---- Footer ---- */
.site-footer {
  padding-block: var(--space-xl) var(--space-lg);
  background: var(--color-primary);
  color: var(--color-bg-alt);
}
.site-footer a {
  text-decoration: none;
}
.site-footer a:hover {
  text-decoration: underline;
}
.site-footer__hero {
  display: grid;
  gap: var(--space-sm);
  justify-items: start;
  padding-bottom: var(--space-lg);
}
.site-footer__wordmark {
  width: auto;
  height: 2.5rem;
  color: var(--color-bg-alt);
}
.site-footer__tagline {
  max-width: 28rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-subhead);
  line-height: 1.2;
}
.site-footer__inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg) var(--space-md);
  padding-block: var(--space-lg);
  border-top: 1px solid var(--color-rule-dark);
}
.site-footer .eyebrow {
  margin-bottom: var(--space-sm);
  color: var(--color-accent);
}
.footer-col ul {
  display: grid;
  gap: 0.6rem;
}
.footer-col a {
  font-size: var(--fs-ui);
}
.site-footer__bottom {
  display: grid;
  gap: var(--space-md);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-rule-dark);
}
.certs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem var(--space-md);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.certs li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.certs li::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--color-secondary);
}
.legal {
  font-size: var(--fs-meta);
  color: var(--color-text-muted-dark);
}

/* ---- Sticky add-to-cart ---- */
.atc-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-bg);
  border-top: 1px solid var(--color-rule);
  box-shadow: 0 -6px 20px rgba(0, 45, 91, 0.08);
}
.atc-bar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-block: 0.6rem;
}
.atc-bar__name {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1.3;
}
.atc-bar__meta {
  font-size: var(--fs-meta);
  color: var(--color-text-muted);
}
.atc-bar__price {
  margin-left: auto;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.atc-bar .btn {
  padding: 0.75rem 1.5rem;
  font-size: var(--fs-ui);
}

/* ---- Product detail shells ---- */
section.product {
  padding-block: var(--space-md) var(--section-pad);
}
.product__gallery img {
  border-radius: var(--radius-lg);
}
.buy-box {
  display: grid;
  gap: var(--space-sm);
}
.buy-box__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-heading);
  line-height: 1.1;
}
.buy-box__desc {
  font-size: var(--fs-body);
}
.buy-box__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.proof-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem var(--space-sm);
  font-size: var(--fs-ui);
}

/* ---- Placeholder media ---- */
.ph {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  background: var(--color-accent);
  color: var(--color-primary);
}
.ph--square {
  aspect-ratio: 1;
}
.ph--portrait {
  aspect-ratio: 4 / 5;
}
.ph--landscape {
  aspect-ratio: 16 / 9;
}
.ph--photo {
  background: var(--parchment);
}
.ph > img {
  width: 40%;
  height: auto;
}
.ph-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Utilities ---- */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.t-body {
  font-family: var(--font-body) !important;
}
.t-heading {
  font-family: var(--font-heading) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.t-400 {
  font-weight: 400 !important;
}
.t-600 {
  font-weight: 600 !important;
}
.t-700 {
  font-weight: 700 !important;
}
.t-upper:not(.t-heading) {
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
}
.t-case-none {
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.t-center {
  text-align: center !important;
}

/* ---- Larger screens ---- */
@media (min-width: 48rem) {
  .logo {
    height: 2rem;
  }
  .site-nav {
    display: flex;
    justify-content: space-between;
    gap: var(--space-lg);
    padding-block: 1rem;
  }
  .nav-toggle {
    display: none;
  }
  .account-link {
    display: inline-flex;
  }
  .card--icon,
  .benefit {
    grid-template-columns: 1fr;
  }
  .card--icon .card__icon,
  .benefit__icon {
    margin-bottom: var(--space-xs);
  }
  .stats__grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .swipe {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: var(--space-md);
    overflow: visible;
    padding-bottom: 0;
  }
  .swipe > * {
    flex: none;
  }
  .story {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
  }
  .story--flip .story__media {
    order: 2;
  }
  .site-footer__inner {
    grid-template-columns: repeat(4, 1fr);
  }
  .site-footer__bottom {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
}
@media (min-width: 60rem) {
  .hero__inner {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-xl);
  }
  .hero__media {
    aspect-ratio: 1;
  }
  .hero .btn--lg {
    min-width: 280px;
  }
}
@media (min-width: 64rem) {
  .logo {
    height: 2.25rem;
  }
}
@media (max-width: 47.9375rem) {
  .hero .btn--lg {
    width: 100%;
  }
}

/* ---- Print ---- */
@media print {
  .site-header,
  .announcement,
  .site-footer,
  .atc-bar {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
  }
}

/* ===== L00 | THEME BRIDGE - do not edit anything ABOVE this line ===== */
/* Below the bridge this file is rules-only. The notes for every layer
   (ids match the headers) live in docs/custom-css-log.md. */

html {
  overflow-x: clip;
}

body {
  padding-top: 0;
}

.body:has(.change-main) {
  margin-top: 0;
  margin-bottom: 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-bg);
  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-bg);
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
  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-primary);
  text-decoration: none;
  text-transform: uppercase;
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.14em;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s ease;
}

.site-nav .navPages-action:hover,
.site-nav .navPages-action:focus {
  color: var(--color-primary);
  border-bottom-color: var(--color-accent);
}

.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-rule);
  list-style: none;
}

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

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

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

.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-bg);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  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-body);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-radius: var(--radius-full);
}

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

/* ---- 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: var(--fs-title);
}

.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-body);
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.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.75rem;
  height: 2.75rem;
  margin: 0 var(--space-xs) var(--space-xs) 0;
  padding-inline: 1rem;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-full);
  background: none;
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  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-primary);
  border-color: var(--color-primary);
  color: var(--color-bg-alt);
}

.buy-form [data-product-attribute="set-rectangle"] .form-radio:focus-visible + .form-option {
  outline: 2px solid var(--color-primary);
  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-rule);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  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-primary);
  box-shadow: inset 0 0 0 1px var(--color-primary);
}

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

.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: 1.125rem 2.5rem;
  background: var(--color-primary);
  border: 0;
  border-radius: var(--radius-full);
  color: var(--color-text-light);
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  transition:
    background-color 200ms ease,
    transform 200ms ease,
    box-shadow 200ms ease;
}

.buy-form #form-action-addToCart:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

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

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

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

.change-main .breadcrumbs {
  margin: 0 0 var(--space-md);
  padding: 0;
  list-style: none;
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-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;
}

.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: var(--fs-heading);
  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: var(--fs-subhead);
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text);
}

h3.content-heading {
  font-size: var(--fs-title);
}

.breadcrumbs {
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  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-body);
  font-size: var(--fs-small);
  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-primary);
  box-shadow: none;
}

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

.button {
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  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-primary);
  border-color: var(--color-primary);
  color: var(--color-bg-alt);
}

.button--primary:hover,
.button--primary:focus {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-bg-alt);
}

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

.button:not(.button--primary):hover {
  background: var(--color-primary);
  color: var(--color-bg-alt);
}

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

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

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

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

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

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

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

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

.productGrid .card-figcaption-body .button,
.productGrid .card-figcaption-button {
  font-size: var(--fs-xs);
}

.productGrid .price,
.productGrid .card-text[data-test-info-type="price"] {
  font-size: var(--fs-ui);
  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-body);
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
  border-bottom: 1px solid var(--color-primary);
}

@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: var(--fs-lead);
  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: var(--fs-ui);
  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: var(--fs-small);
  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-body);
  font-size: var(--fs-meta);
  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-bg);
}

[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-primary);
  border-color: var(--color-primary);
}

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

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

.cart-total-label {
  font-family: var(--font-body);
  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-body);
  font-size: var(--fs-ui);
  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: var(--fs-lead);
  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: var(--fs-ui);
  color: var(--color-muted);
}

#previewModal .previewCart .productView-info {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.4rem;
  margin: 0.35rem 0 0;
  font-size: var(--fs-ui);
  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-bg-alt);
  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-body);
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
}

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

#previewModal .previewCartCheckout p[data-cart-quantity] {
  order: 2;
  margin: 0 0 var(--space-xs);
  font-size: var(--fs-small);
  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-body);
  font-size: var(--fs-small);
  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);
}

/* ===== 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;
}

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

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













.buy-form .form-field .form-label small {
  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-primary);
  border-color: var(--color-primary);
  color: var(--color-bg-alt);
}

.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: var(--fs-meta);
}
.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;
}

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

/* ---- Cards: block layout, room above for the flag ---- */


















/* ---- Busters: the terms directly under the CTA ---- */




.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 #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: var(--fs-small);
    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;
}

/* ===== 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-primary);
}
.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-primary);
  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: var(--fs-meta);
  line-height: 1.3;
  color: var(--color-primary);
}

/* ===== L22 | Cobi Clean fork (2026-09-10) - brand mapping for shared chrome ===== */

.page-heading,
.content-heading,
.account-heading,
.login-form legend,
.panel-title {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.page-heading {
  font-size: var(--fs-heading);
  line-height: 1.12;
  text-align: center;
}

.content-heading {
  font-size: var(--fs-subhead);
}

h3.content-heading {
  font-size: var(--fs-title);
}

.button,
.form-input,
.form-select {
  color: var(--color-primary);
}

.button {
  border-radius: var(--radius-full);
  letter-spacing: 0.1em;
}

.button--primary,
.button--primary:hover,
.button--primary:focus {
  color: var(--color-text-light);
}

.product-grid .card,
.productGrid .card {
  display: grid;
  grid-template-rows: auto 1fr;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.on-cream .product-grid .card,
.section--cream .productGrid .card {
  border: 0.5px solid var(--color-primary);
}

.product-grid .card-figure,
.productGrid .card-figure {
  margin: 0;
  padding: 0;
  background: var(--parchment);
}

.product-grid .card-figcaption,
.productGrid .card-figcaption {
  display: none;
}

.product-grid .card-body,
.productGrid .card-body {
  display: grid;
  gap: 0.35rem;
  padding: var(--space-sm) var(--space-md) var(--space-md);
  text-align: left;
}

.product-grid .card-title,
.productGrid .card-title {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.product-grid .card-title > a,
.productGrid .card-title > a {
  color: var(--color-primary);
  text-decoration: none;
}

.product-grid .card-text,
.productGrid .card-text {
  margin: 0;
  color: var(--color-primary);
}

.product-grid .card-text--brand,
.productGrid .card-text--brand,
.product-grid .card-text[data-test-info-type="brandName"],
.productGrid .card-text[data-test-info-type="brandName"] {
  display: none;
}

.product-grid .price,
.productGrid .price,
.product-grid .card-text[data-test-info-type="price"],
.productGrid .card-text[data-test-info-type="price"] {
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--color-primary);
}

.product-grid .price--rrp,
.productGrid .price--rrp {
  font-weight: 400;
  color: var(--color-text-muted);
}

.product-grid .card:hover .card-image,
.productGrid .card:hover .card-image {
  opacity: 0.92;
}

.site-footer .social-follow a {
  color: var(--color-bg-alt);
}

.site-footer .social-follow a:focus-visible {
  outline-color: var(--color-secondary);
}

.site-footer .legal-links a {
  color: var(--color-text-muted-dark);
}

.reviews--product .review__date {
  color: var(--color-text-muted);
}

[data-consent-manager-dialog] .cd-gpc-note {
  color: var(--color-primary);
}




.site-header {
  transition: box-shadow 0.2s ease, transform 0.25s ease;
}

@media (max-width: 640px) {
  .site-header.is-hidden {
    transform: translateY(-100%);
  }
}

.atc-bar {
  transform: translateY(100%);
  transition: transform 0.25s ease;
}

.atc-bar[hidden] {
  display: none;
}

.atc-bar.is-visible {
  transform: none;
}

body.atc-visible {
  padding-bottom: 4.5rem;
}

/* Restores Change's `.product__inner > * { min-width: 0 }`, dropped with the
   mockup half at the fork: without it the phone grid track sizes to the
   gallery's content and the image runs 664px wide at 390 (2026-09-29). */
.product .productView > * {
  min-width: 0;
}

/* ===== L24 | PDP gallery: swipe on phones (2026-09-18) ===== */

.product .gallery-swipe {
  position: absolute;
  inset: 0;
  display: flex;
}

.product .gallery-swipe__slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
}

.product .gallery-swipe__slide > a {
  display: block;
  height: 100%;
}

.product .gallery-swipe__slide + .gallery-swipe__slide {
  display: none;
}

@media (max-width: 800px) {
  .product .gallery-swipe {
    pointer-events: auto;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .product .gallery-swipe::-webkit-scrollbar {
    display: none;
  }

  .product .gallery-swipe:focus-visible {
    outline: 2px solid var(--color-true-black);
    outline-offset: 2px;
  }

  .product .gallery-swipe__slide {
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  .product .gallery-swipe__slide + .gallery-swipe__slide {
    display: block;
  }

  .product .gallery-swipe__slide > a {
    pointer-events: none;
  }
}

/* ===== L25 | PDP gallery: desktop thumbnail rail (2026-09-18) ===== */

@media (min-width: 1200px) {
  .product .productView-images {
    position: relative;
    padding-left: calc(var(--thumb-rail) + var(--space-sm));
  }

  .product .productView-thumbnails {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--thumb-rail);
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: min-content;
    margin: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: thin;
  }
}


/* ===== L27 | Account nav on phones (2026-09-21; scroll row superseded by L29) ===== */

/* Cornerstone hides the account sub-nav outright below its "medium"
   breakpoint (801px) and expects the hamburger to carry those links instead.
   MiniBC renders its own copy into that same hidden element, so on a phone a
   subscriber had no route to Subscriptions at all. The nav stays on the page
   at every width now. How it lays out below 801px is L29's job. */

@media (max-width: 800px) {
  .navBar--account {
    display: block;
    margin-bottom: var(--space-md);
  }

  /* The underline is a "medium"-and-up rule in Cornerstone, so the current
     page read the same as every other tab on a phone. */
  .navBar--account .navBar-item.is-active {
    border-bottom: 1px solid var(--color-text);
  }
}

/* Cornerstone prints the active tab in color("greys", "dark") at every width.
   No grey type: the active tab is black and carries the underline. */
.navBar--account .navBar-item.is-active > .navBar-action {
  color: var(--color-text);
}

/* ===== L28 | Account settings: password disclosure (2026-09-21) ===== */

/* Jay 9/21: "not sure why there is password, confirm password and current
   password". They are BigCommerce's in-place password change, rendered from
   forms.edit_account.fields alongside Email, and all three are optional -
   account.js only requires Current Password once something has been typed
   into Password. Nothing on the page said so. They now sit behind a closed
   <details>, following the FAQ pattern above (native, no JS, +/- marker). */

.passwordChange {
  margin-bottom: var(--space-md);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}

.passwordChange-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  font-family: var(--font-condensed);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
}

/* Safari still paints its own triangle without this, even with list-style. */
.passwordChange-summary::-webkit-details-marker {
  display: none;
}

.passwordChange-summary::after {
  content: "+";
  font-weight: 700;
}

.passwordChange[open] .passwordChange-summary::after {
  content: "\2013";
}

.passwordChange-summary:focus-visible {
  outline: 2px solid var(--color-true-black);
  outline-offset: 2px;
}

/* Black, not the muted grey the FAQ answers use - no grey type. */
.passwordChange-hint {
  margin: 0 0 var(--space-sm);
  color: var(--color-text);
}

/* The panel's last row otherwise sits flush against the bottom border. */
.passwordChange .form-row {
  padding-bottom: var(--space-xs);
}

/* ===== L29 | Account nav as a collapsed menu on phones (2026-09-22) ===== */

/* Jay 9/22, on the L27 scroll row: six items put roughly 40% of the nav
   off-screen, Sign out furthest right of all, and the active underline could
   be scrolled out of view so nothing looked selected. Below 801px the nav is
   now one row naming the current page; tapping it drops the rest down.
   change-account-nav.js inserts the button before the <nav> and toggles
   .accountNav-is-open on <body> - nothing inside the <nav> is touched,
   because MiniBC's copy of this nav is React-owned. Above 801px the button
   is display:none and the list shows unconditionally, so the desktop tab row
   is untouched and there is no state to unwind on resize. */

.accountNav-toggle {
  display: none;
}

@media (max-width: 800px) {
  .accountNav-toggle {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-sm);
    width: 100%;
    padding: var(--space-sm) 0;
    border: 0;
    border-top: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);
    background: none;
    font-family: var(--font-condensed);
    font-size: var(--fs-small);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text);
    text-align: left;
    cursor: pointer;
  }

  /* Same +/- marker as the FAQ and the L28 password disclosure. */
  .accountNav-toggle::after {
    content: "+";
    font-weight: 700;
  }

  .accountNav-is-open .accountNav-toggle::after {
    content: "\2013";
  }

  .accountNav-toggle:focus-visible {
    outline: 2px solid var(--color-true-black);
    outline-offset: 2px;
  }

  /* The button carries the bottom rule while the list is down, so the two
     read as one panel instead of two stacked boxes. */
  .accountNav-is-open .accountNav-toggle {
    border-bottom-color: transparent;
  }

  /* The list is the panel. Hidden until the body class opens it - note this
     wins over L27's .navBar--account { display: block }, which is on the
     <nav>, not on the <ul>. */
  .navBar--account .navBar-section {
    display: none;
    margin: 0;
    padding: 0 0 var(--space-sm);
    border-bottom: 1px solid var(--color-line);
    text-align: left;
  }

  .accountNav-is-open .navBar--account .navBar-section {
    display: block;
  }

  /* One full-width row per link, indented off the toggle above it. */
  .navBar--account .navBar-item {
    margin: 0;
    padding: 0;
  }

  .navBar--account .navBar-action {
    display: block;
    padding: var(--space-xs) 0 var(--space-xs) var(--space-sm);
  }

  /* The underline L27 puts on the active tab is a desktop idea; stacked, the
     current page is marked by weight and a rule down its left edge instead. */
  .navBar--account .navBar-item.is-active {
    border-bottom: 0;
  }

  .navBar--account .navBar-item.is-active .navBar-action {
    font-weight: 700;
    box-shadow: inset 2px 0 0 var(--color-text);
  }

  /* Sign out is a trailing action, not another section. Cornerstone's own
     divider for it is a border-left that only applies from "medium" up, so
     stacked it gets a rule above instead. */
  .navBar--account .navBar-item--separate {
    margin-top: var(--space-xs);
    padding-top: var(--space-xs);
    border-top: 1px solid var(--color-line);
  }
}

/* ===== C01 | Cobi: Shopify sections, PDP details, ingredients (2026-09-30) ===== */

/* Homepage media */
.hero__media--photo {
  aspect-ratio: 4 / 3;
}

.ph > .ph-img {
  width: 100%;
  height: 100%;
}

.benefit__icon--badge {
  width: 6rem;
  height: 6rem;
  border-radius: 0;
  background: none;
}

.benefit__icon--badge img {
  width: 100%;
  height: 100%;
}

.on-dark .benefit__icon--badge {
  background: none;
}

.benefits__grid--badges .benefit {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}

.benefits__grid--badges .benefit h3 {
  margin-top: 0;
}

/* Buy-box details (components/cobi/pdp-details.html) */
.buy-box__note {
  margin-top: var(--space-md);
}

.buy-box__note h3 {
  margin-bottom: 0.25rem;
  font-family: var(--font-heading);
  font-size: var(--fs-title);
  font-weight: 600;
}

.pdp-icons {
  display: grid;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  list-style: none;
}

.pdp-icon {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  gap: var(--space-sm);
  align-items: start;
  font-size: var(--fs-ui);
}

.pdp-icon img {
  width: 1.75rem;
  height: 1.75rem;
}

.pdp-icon strong {
  display: block;
}

.buy-box__accordion {
  border-bottom: 1px solid var(--color-line);
}

.buy-box__note + .buy-box__accordion,
.pdp-icons + .buy-box__accordion {
  margin-top: var(--space-md);
  border-top: 1px solid var(--color-line);
}

.buy-box__accordion > 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__accordion > summary::-webkit-details-marker {
  display: none;
}

.buy-box__accordion > summary::after {
  content: "+";
  font-weight: 700;
}

.buy-box__accordion[open] > summary::after {
  content: "\2013";
}

.buy-box__accordion > p,
.buy-box__accordion > .ingredient-list,
.buy-box__accordion > .buds-ingredients {
  padding-bottom: var(--space-sm);
}

/* Ingredient list (components/cobi/generated/) */
.ingredient-list {
  display: grid;
}

.ingredient + .ingredient {
  border-top: 1px solid var(--color-line);
}

.ingredient__name {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 0.6rem 0;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.ingredient__name::-webkit-details-marker {
  display: none;
}

.ingredient__name::after {
  content: "+";
}

.ingredient[open] .ingredient__name::after {
  content: "\2013";
}

.ingredient__body {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--space-sm);
  align-items: start;
  padding-bottom: 0.75rem;
}

.ingredient__icon {
  width: 3rem;
  height: 3rem;
}

.ingredient__eco {
  font-style: italic;
}

.buds-ingredients {
  display: grid;
  gap: 0.75rem;
}

.buds-ingredients dt {
  font-weight: 700;
}

.buds-ingredients dt span {
  font-weight: 400;
}

.buds-ingredients dt span::before {
  content: "| ";
}

/* Comparison table (components/cobi/compare.html) */
.compare-section {
  padding-bottom: 0;
  background: var(--color-accent);
  color: var(--color-text);
}

.compare__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.compare__table {
  width: 100%;
  min-width: 36rem;
  max-width: 62rem;
  margin-inline: auto;
  border-collapse: collapse;
  text-align: center;
}

.compare__table th,
.compare__table td {
  padding: 0.75rem;
}

.compare__table tbody th,
.compare__table tbody td {
  border: 1px solid var(--color-primary);
}

.compare__table tbody th {
  border-left: 0;
}

.compare__table tbody td:last-child {
  border-right: 0;
}

.compare__table thead th {
  font-size: var(--fs-small);
  font-weight: 700;
  vertical-align: middle;
}

.compare__table tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--color-accent);
  font-family: var(--font-heading);
  font-weight: 400;
  text-align: left;
}

.compare__table .compare__cobi {
  border: 1px solid var(--color-primary);
  background: var(--color-bg-alt);
}

.compare__table .compare__cobi img {
  width: 7rem;
  height: auto;
  margin-inline: auto;
}

.compare__table .yes,
.compare__table .no {
  font-size: var(--fs-lead);
  font-weight: 700;
}

.compare__table .no,
.compare__table .compare__artificial {
  color: var(--color-compare-red);
}

.compare__table .compare__cobi .yes,
.compare__table .compare__cobi small {
  color: var(--color-compare-green);
}

.compare__table small {
  font-size: var(--fs-xs);
  font-weight: 700;
}

.compare__photo {
  display: block;
  width: 100%;
  height: auto;
  margin-top: var(--space-lg);
}

/* Feature rows (safe-sheets.html, buds-features.html) */
.safe__inner {
  display: grid;
  gap: var(--space-lg);
}

.safe__top {
  display: grid;
  gap: var(--space-md);
}

.safe__photo {
  width: min(100%, 36rem);
  height: auto;
  justify-self: end;
}

.feature-list {
  display: grid;
  gap: var(--space-md);
  max-width: 50rem;
  list-style: none;
}

.feature {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: var(--space-md);
  align-items: start;
}

.feature img {
  width: 3.5rem;
  height: 3.5rem;
}

.feature h3 {
  margin-top: 0;
  margin-bottom: 0.25rem;
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@media (min-width: 48rem) {
  .safe__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
  }

  .safe__top {
    align-content: center;
  }
}

/* Cotton field (growing.html) */
.growing__heading {
  max-width: 44rem;
  margin: 0 auto var(--space-lg);
  text-align: center;
  text-wrap: balance;
}

.growing__photo {
  display: block;
  width: 100%;
  max-width: 62rem;
  height: auto;
  margin-inline: auto;
  border-radius: var(--radius-xl);
}

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

/* Three-claim row (icon-trio.html) */
.icon-trio__grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  list-style: none;
  text-align: center;
}

.icon-trio__grid img {
  width: 4.5rem;
  height: 4.5rem;
  margin: 0 auto var(--space-sm);
}

.icon-trio__grid h3 {
  font-family: var(--font-heading);
  font-size: var(--fs-title);
  font-weight: 600;
  text-wrap: balance;
}

/* Pod vs Bud films (video-duo.html) */
.video-duo__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
  max-width: 44rem;
  margin-inline: auto;
}

.video-duo__item {
  display: grid;
  gap: var(--space-xs);
  margin: 0;
  text-align: center;
}

.video-duo__item figcaption {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: var(--fs-title);
  font-weight: 600;
}

.video-duo__item video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-lg);
  background: var(--color-accent);
  object-fit: cover;
}

/* Ingredients Web Page (pages/custom/page/cobi-ingredients.html) */
.ingredients-page__group {
  display: grid;
  gap: var(--space-sm);
  max-width: 44rem;
  margin: var(--space-xl) auto 0;
}

.ingredients-page__sub {
  font-weight: 700;
}

.ingredients-page .ingredient__body {
  grid-template-columns: 6rem 1fr;
  align-items: center;
}

.ingredients-page .ingredient__icon {
  width: 6rem;
  height: 6rem;
}

/* ===== C03 | Cobi: About page (2026-10-08) ===== */
.about-hero {
  position: relative;
  display: grid;
  min-height: clamp(28rem, 60vw, 40rem);
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}

.about-hero__img {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 45, 91, 0.5);
}

.about-hero__copy {
  display: grid;
  gap: var(--space-md);
  justify-items: center;
  padding-block: var(--section-pad);
  color: var(--color-text-light);
}

.about-hero__copy h1 {
  color: inherit;
}

.about-hero__copy .lead {
  max-width: 50rem;
}

.about-text {
  display: grid;
  gap: var(--space-sm);
  text-align: center;
}

.about-text__kicker {
  font-weight: 700;
}

.about-shop {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  max-width: 56rem;
  margin-inline: auto;
}

.about-shop__card {
  display: grid;
  gap: 0.25rem;
  text-align: center;
  text-decoration: none;
}

.about-shop__card img {
  width: 100%;
  height: auto;
  margin-bottom: var(--space-xs);
  border-radius: var(--radius-lg);
}

.about-shop__name {
  font-family: var(--font-heading);
  font-size: var(--fs-subhead);
  font-weight: 600;
}

.about-shop__card:hover .about-shop__name,
.about-shop__card:focus-visible .about-shop__name {
  text-decoration: underline;
}

.about-film iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--radius-lg);
}

/* ===== C04 | Mobile nav at every width; PDP buy section on white (2026-10-16) ===== */

section.product {
  background: var(--color-bg);
  box-shadow: 0 0 0 100vmax var(--color-bg);
  clip-path: inset(0 -100vmax);
}

@media (min-width: 48rem) {
  .site-nav {
    display: grid;
    gap: var(--space-sm);
  }

  .site-nav .mobileMenu-toggle {
    display: inline-grid;
  }

  .site-nav .navPages-container,
  .site-nav .navPages-container.is-open {
    position: absolute;
    display: none;
    background: var(--color-bg);
    border-top: 1px solid var(--color-rule);
    border-bottom: 1px solid var(--color-rule);
  }

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

  .site-nav .navPages {
    max-width: var(--max-width);
    margin-inline: auto;
    padding: var(--space-sm) var(--gutter);
    font-size: inherit;
  }

  .site-nav .navPages-list,
  .site-nav .navPages-item {
    display: block;
    float: none;
  }

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

/* ===== C05 | Margin utility (2026-10-16) ===== */

.m-auto {
  margin: auto;
}

/* ===== C06 | Cart count on the "Cart" line (2026-10-16) ===== */

.site-nav .cart-quantity {
  width: auto;
  height: auto;
}

/* ===== C07 | PDP quantity stepper (2026-10-16) ===== */

.buy-form .form-field--increments {
  display: block;
  margin-bottom: 0;
}

.buy-form .form-increment .button {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: var(--fs-title);
  line-height: 1;
}

.buy-form .form-increment .button .icon {
  display: none;
}

.buy-form .form-increment [data-action="dec"]::after {
  content: "\2212";
}

.buy-form .form-increment [data-action="inc"]::after {
  content: "+";
}

.buy-form .form-increment .button:hover,
.buy-form .form-increment .button:focus-visible {
  color: var(--color-primary);
  background: var(--color-bg-alt);
}

.buy-form .form-increment .button:first-child {
  border-radius: var(--radius-full) 0 0 var(--radius-full);
}

.buy-form .form-increment .button:last-child {
  border-radius: 0 var(--radius-full) var(--radius-full) 0;
}

.buy-form .form-input--incrementTotal {
  height: 2.75rem;
  padding: 0;
  background: none;
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 700;
}

/* ===== C08 | Content pages: page hero, FAQs, shipping, contact, cart (2026-10-19, playground proposal) ===== */

/* Stock BigCommerce buttons match the theme's .btn--primary */
.button--primary {
  padding: 1rem 2rem;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  background: var(--color-primary);
  border: 0;
  border-radius: var(--radius-full);
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.button--primary:hover,
.button--primary:focus-visible {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Shared page hero for text pages */
.page-hero {
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  text-align: center;
}
.page-hero__inner {
  display: grid;
  gap: var(--space-sm);
  justify-items: center;
}
.page-hero .lead {
  margin-inline: auto;
}
.page-hero .lead a {
  color: inherit;
}
.chip-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}
.chip {
  padding: 0.5rem 1.1rem;
  font-size: var(--fs-ui);
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-full);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.chip:hover,
.chip:focus-visible {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

/* Text-page body */
.info-page__body {
  display: grid;
  gap: var(--space-xl);
  padding-block: var(--space-xl) var(--section-pad);
}
.faq-group,
.policy {
  display: grid;
  gap: var(--space-sm);
  scroll-margin-top: 6rem;
}
.faq-group .heading,
.policy .heading {
  scroll-margin-top: 6rem;
}
.policy .subheading {
  margin-top: var(--space-sm);
}
.policy p,
.policy li {
  max-width: var(--measure);
}

/* Contact: form card */
.contact-form {
  display: grid;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-xl);
}
.contact-form .form-row--half {
  display: block;
  width: 100%;
  margin: 0;
}
.contact-form .form-field {
  width: 100%;
  max-width: none;
  margin-bottom: var(--space-sm);
  padding: 0;
}
.contact-form .form-label {
  font-weight: 700;
  color: var(--color-primary);
}
.contact-form .form-label small {
  font-weight: 400;
  color: var(--color-text-muted);
}
.contact-form .form-input {
  width: 100%;
  padding: 0.85rem 1rem;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-primary);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
}
.contact-form .form-input:focus {
  border-color: var(--color-primary);
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}
.contact-form .manual-captcha-input-container {
  display: grid;
  gap: var(--space-xs);
}
@media (min-width: 60rem) {
  .contact-form {
    padding: var(--space-xl);
  }
}

/* Cart: empty state */
.cart-empty {
  display: grid;
  gap: var(--space-sm);
  justify-items: center;
  max-width: 36rem;
  margin: var(--space-lg) auto var(--section-pad);
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
  background: var(--color-bg);
  border-radius: var(--radius-xl);
}
.cart-empty__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs);
  margin: var(--space-xs) 0 0;
  padding: 0;
  list-style: none;
}

.contact-form .form-field > .form-input,
.contact-form .form-row .form-field {
  margin-inline: 0;
}

/* ===== C09 | Home hero: rating eyebrow, big bleed photo, tagline band (2026-10-20, playground proposal) ===== */

/* Copy: tight eyebrow, then 16 / 24 steps */
.hero__copy {
  gap: 0;
}
.hero__copy > .display {
  margin-top: 0.5rem;
}
.hero__copy > .lead {
  margin-top: 1rem;
}
.hero__btns {
  margin-top: 1.5rem;
}
.hero__rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-ui);
  font-weight: 700;
}

/* Photo: no card, no rounding */
.hero__media,
.hero__media--photo {
  border-radius: 0;
  background: none;
}

/* Buttons: one row, equal width, at every size */
.hero__btns {
  flex-wrap: nowrap;
  gap: 0.75rem;
  width: 100%;
}
.hero__btns .btn {
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;
}

/* Tagline band under the hero */
.tagline-band {
  padding: 1.5rem var(--gutter);
  background: var(--color-primary);
  text-align: center;
}
.tagline-band__text {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-lead);
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}

/* Mobile: photo first, edge to edge */
@media (max-width: 63.9375rem) {
  .hero {
    padding-top: 0;
  }
  .hero__media {
    order: -1;
    margin-inline: calc(-1 * var(--gutter));
    aspect-ratio: 4 / 3;
  }
  .hero .btn--lg {
    width: auto;
    padding: 0.875rem 0.75rem;
    font-size: var(--fs-ui);
  }
}

@media (min-width: 48rem) {
  .tagline-band {
    padding-block: 2rem;
  }
  .tagline-band__text {
    font-size: var(--fs-title);
  }
}

/* Small tablets up: the stacked photo shows the whole 7:4 scene instead of a 4:3 crop */
@media (min-width: 40rem) and (max-width: 63.9375rem) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero__media {
    aspect-ratio: 7 / 4;
  }
}

/* Desktop (1024+): copy 40% of the site width on the container line; photo takes the rest,
   bleeding off the right edge and running top to bottom so it meets the tagline band */
@media (min-width: 64rem) {
  .hero {
    padding-block: 0;
  }
  .hero__inner {
    max-width: none;
    grid-template-columns: calc((min(100vw, var(--max-width)) - 2 * var(--gutter)) * 0.4) minmax(0, 1fr);
    gap: 3rem;
    align-items: stretch;
    padding-right: 0;
    padding-left: max(var(--gutter), calc((100vw - var(--max-width)) / 2 + var(--gutter)));
  }
  .hero__copy {
    align-content: center;
    padding-block: 3rem;
  }
  .hero__copy .lead {
    font-size: var(--fs-lead);
  }
  .hero__media,
  .hero__media--photo {
    aspect-ratio: auto;
    min-width: 0;
  }
  /* at least the photo's own 7:4 height; grows with the copy if that is taller */
  .hero__media::before {
    content: "";
    display: block;
    padding-top: 57.14%;
  }
  .hero__media img {
    position: absolute;
    inset: 0;
    object-position: center bottom;
  }
  .hero .display {
    font-size: var(--fs-heading);
  }
  .hero .btn--lg {
    min-width: 0;
    padding: 0.875rem 0.75rem;
    font-size: var(--fs-ui);
  }
}
@media (min-width: 75rem) {
  .hero .btn--lg {
    padding: 1rem;
    font-size: var(--fs-body);
  }
}
.nobr {
  white-space: nowrap;
}

/* Tagline band: true center on wide screens, +10px padding */
.tagline-band {
  padding-block: calc(1.5rem + 10px);
}
.tagline-band__text {
  max-width: none;
  margin-inline: auto;
}
@media (min-width: 48rem) {
  .tagline-band {
    padding-block: calc(2rem + 10px);
  }
}

/* Section after the band: ~20% less space above the heading */
/* Equal visible space band -> heading -> cards (~56px at desktop; measured from the
   letter tops/baseline, so the heading's own line box is netted out) */
.tagline-band + .section {
  padding-top: clamp(2.25rem, 4.5vw, 3.125rem);
}
.tagline-band + .section .section-head {
  margin-bottom: clamp(2.375rem, 4.7vw, 3.3125rem);
}
.tagline-band + .section .section-head .heading {
  margin: 0;
}

/* ===== C10 | Home product cards: filled card, rows line up, horizontal on mobile (2026-10-20, playground proposal) ===== */

.card__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-title);
  line-height: 1.2;
}

.product-grid--shop {
  gap: 0.875rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.product-grid--shop .card {
  display: grid;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 16px;
}
.product-grid--shop .card .ph {
  border-radius: 0;
}
.product-grid--shop .ph-img {
  object-position: var(--pos, center);
}
.product-grid--shop .card__title,
.product-grid--shop .card__body {
  margin: 0;
}
.product-grid--shop .btn-row .btn {
  margin: 0;
}

/* Mobile: image left (square), copy + button right */
@media (max-width: 47.9375rem) {
  .product-grid--shop .card {
    grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: 1rem;
    align-items: start;
  }
  .product-grid--shop .card .ph {
    grid-row: 1 / -1;
    align-self: stretch;
    width: 100%;
    min-width: 0;
    min-height: 8.5rem;
    aspect-ratio: auto;
  }
  .product-grid--shop .card__title,
  .product-grid--shop .card__body {
    text-align: left !important;
  }
  .product-grid--shop .btn-row {
    justify-content: flex-start;
  }
  .product-grid--shop .card__title {
    padding-top: 1rem;
    padding-right: 1rem;
    font-size: var(--fs-lead);
    text-align: left;
  }
  .product-grid--shop .card__body {
    padding: 0.375rem 1rem 0 0;
    font-size: var(--fs-small);
    line-height: 1.4;
    text-align: left;
  }
  .product-grid--shop .btn-row {
    align-self: end;
    padding: 0.75rem 1rem 1rem 0;
  }
  .product-grid--shop .btn--sm {
    padding: 0.5rem 1rem;
    font-size: var(--fs-meta);
  }
}

/* Tablet + desktop: 3 across; image, title, body and button rows shared across cards (subgrid) */
@media (min-width: 48rem) {
  .product-grid--shop {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-md);
  }
  .product-grid--shop > li {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
  .product-grid--shop .card {
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: 0;
    padding-bottom: 1.5rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .product-grid--shop .card__title {
    padding: 1.5rem 1.5rem 0;
  }
  .product-grid--shop .card__body {
    padding: 0.5rem 1.5rem 0;
  }
  .product-grid--shop .btn-row {
    align-self: end;
    justify-content: center;
    padding: 1.5rem 1.5rem 0;
  }
}
@media (min-width: 48rem) and (hover: hover) {
  .product-grid--shop .card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px -10px rgba(0, 45, 91, 0.25);
  }
}

/* ===== C11 | Dryer PDP: "Works Twice" reuse section (2026-10-20, playground proposal; module from cobi-landers dryer-sheets-static-general) ===== */
.reuse {
  background: var(--color-accent);
}
.reuse__grid {
  display: grid;
  gap: var(--space-md);
}
.reuse__media {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-xl);
}
.reuse__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 40% 45%;
}
/* Text treatment follows the lander: sans headline, muted body */
.reuse__content .heading {
  margin: 0 0 1rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-heading);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.reuse__desc {
  margin: 0 0 1.75rem;
  font-size: var(--fs-lead);
  line-height: 1.65;
  color: var(--color-text);
}
.reuse__review {
  margin: 0 0 1.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--color-bg);
  border-radius: var(--radius-lg);
}
.reuse__review .stars {
  margin: 0 0 0.625rem;
  color: #c8960c;
  font-size: var(--fs-body);
}
.reuse__review blockquote {
  margin: 0 0 0.75rem;
  font-size: var(--fs-lead);
  line-height: 1.55;
  font-style: italic;
  color: var(--color-text);
}
.reuse__review figcaption {
  font-size: var(--fs-ui);
  font-weight: 700;
}
.reuse__review figcaption::before {
  content: "\2014\00a0";
}
.reuse__verified {
  margin-left: 0.25rem;
  font-size: var(--fs-small);
  font-weight: 400;
  color: #2e7451;
}
.reuse__verified::before {
  content: "\2713\00a0";
}
.reuse__more {
  padding-top: 1.25rem;
  border-top: 1px solid rgba(0, 45, 91, 0.15);
}
.reuse__more-label {
  margin: 0 0 0.875rem;
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.reuse__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.reuse__pills li {
  padding: 0.375rem 1rem;
  font-size: var(--fs-body);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 45, 91, 0.15);
  border-radius: var(--radius-full);
}
@media (min-width: 48rem) {
  .reuse__grid {
    grid-template-columns: minmax(0, 22.5rem) minmax(0, 1fr);
    gap: var(--space-xl);
    align-items: center;
    max-width: 62rem;
  }
  .reuse__media {
    aspect-ratio: 9 / 13;
  }
  .reuse__media img {
    object-position: 38% 35%;
  }
}

/* ===== C12 | Dryer PDP comparison table: lander style (2026-10-20, playground proposal; style from cobi-landers pet-hair compare, content unchanged) ===== */
.compare-section .section-head {
  max-width: 52rem;
  margin-bottom: var(--space-lg);
}
.compare-section .heading {
  font-size: var(--fs-heading);
}
.compare__table {
  max-width: 64rem;
  border-collapse: separate;
  border-spacing: 0;
}
.compare__table th,
.compare__table td {
  padding: 1.125rem 0.75rem;
}
.compare__table tbody th,
.compare__table tbody td,
.compare__table .compare__cobi {
  border: 0;
  border-bottom: 1px solid rgba(0, 45, 91, 0.15);
}
.compare__table thead td,
.compare__table thead th {
  border-bottom: 1px solid rgba(0, 45, 91, 0.15);
}
.compare__table thead th {
  padding-block: 1.5rem;
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.compare__table tbody th {
  padding-left: 1rem;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 700;
}
/* Cobi column: a light raised lane */
.compare__table .compare__cobi {
  background: rgba(255, 255, 255, 0.6);
}
.compare__table thead .compare__cobi {
  background: rgba(255, 255, 255, 0.85);
  border-radius: 16px 16px 0 0;
}
.compare__table tbody tr:last-child .compare__cobi {
  border-radius: 0 0 16px 16px;
}
/* Marks: filled circles. Cobi yes = green, others yes = grey, no = red */
.compare__table .yes,
.compare__table .no {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  color: #fff;
  font-size: var(--fs-lead);
  line-height: 1;
}
.compare__table .yes,
.compare__table .compare__artificial .yes {
  background-color: #9aa1ad;
  color: #fff;
}
.compare__table .compare__cobi .yes {
  background-color: #2e7451;
  color: #fff;
}
.compare__table .no {
  background-color: #b3261e;
  color: #fff;
}
.compare__table .no[aria-label="Unclear"] {
  background-color: #9aa1ad;
}
.compare__table small,
.compare__table .compare__cobi small,
.compare__table .compare__artificial small {
  display: block;
  margin-top: 0.375rem;
  font-size: var(--fs-small);
  font-weight: 400;
  color: var(--color-text);
}

/* C12 addendum: draw the marks as thin SVG strokes (lander style) instead of the ✔ ✘ text glyphs */
.compare__table .yes,
.compare__table .no:not([aria-label="Unclear"]) {
  width: 2.375rem;
  height: 2.375rem;
  font-size: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.125rem;
}
.compare__table .yes {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7'/%3E%3C/svg%3E");
}
.compare__table .no:not([aria-label="Unclear"]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}
.compare__table .no[aria-label="Unclear"] {
  width: 2.375rem;
  height: 2.375rem;
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  font-weight: 700;
}

/* ===== C13 | Home benefits band + review carousel (2026-10-20, playground proposal) ===== */

/* Benefits: no eyebrow, thin rule instead of the sky bar, Avenir statement, plain icons */
.benefits-band {
  padding-block: calc(var(--section-pad) * 0.75);
  border-block: 1px solid var(--color-primary);
}
@media (min-resolution: 2dppx) {
  .benefits-band {
    border-block-width: 0.5px;
  }
}
/* statement spans the same width as the icon row */
.benefits-band .section-head {
  max-width: none;
}
.benefits-band__statement {
  max-width: none;
  margin: 0 auto;
  text-wrap: balance;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-lead);
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  text-align: center;
}
.benefits-band .benefits__grid {
  margin: 0;
  padding: 0;
}
/* 4 icon columns from here: the icons sit centered in equal columns, so first icon's
   left edge to last icon's right edge = 75% of the row + 3/4 of one gap + one icon */
@media (min-width: 70rem) {
  .benefits-band .benefits-band__statement {
    max-width: calc(75% + 0.75 * var(--space-md) + 6rem);
    font-size: var(--fs-subhead);
    line-height: 1.4;
  }
}
@media (min-width: 48rem) {
  .benefits-band__statement {
    font-size: var(--fs-title);
  }
}

/* Reviews: one row, endless loop (assets/review-carousel.js) */
.review-carousel {
  position: relative;
}
.review-carousel__track {
  display: flex;
  gap: var(--space-sm);
  margin: 0;
  padding: 0 0 var(--space-xs);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.review-carousel__track::-webkit-scrollbar {
  display: none;
}
/* phones: one card with the next one peeking in */
.review-carousel__track > .review {
  flex: 0 0 85%;
  scroll-snap-align: start;
}
.review-carousel__arrow {
  display: none;
}
@media (min-width: 48rem) {
  .review-carousel__track {
    gap: var(--space-md);
  }
  .review-carousel__track > .review {
    flex-basis: calc((100% - 2 * var(--space-md)) / 3);
  }
  .review-carousel__arrow {
    position: absolute;
    top: 50%;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    color: var(--color-primary);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    box-shadow: 0 4px 12px -4px rgba(0, 45, 91, 0.25);
    cursor: pointer;
    transform: translateY(-50%);
  }
  .review-carousel__arrow svg {
    width: 1.25rem;
    height: 1.25rem;
  }
  .review-carousel__arrow:hover,
  .review-carousel__arrow:focus-visible {
    background: var(--color-bg-alt);
  }
  .review-carousel__arrow--prev {
    left: -1.375rem;
  }
  .review-carousel__arrow--next {
    right: -1.375rem;
  }
}

/* ===== C14 | Home waste band: live layout (art, text, button) replaces the stats grid (2026-10-20, playground proposal) ===== */
.waste-band {
  padding-block: calc(var(--section-pad) * 0.6);
}
.waste-band__row {
  display: grid;
  gap: var(--space-md);
  align-items: center;
  justify-items: center;
  text-align: center;
}
.waste-band__art {
  width: min(13rem, 60%);
  height: auto;
}
.waste-band__text {
  max-width: 34rem;
  margin: 0;
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--color-bg-alt);
}
/* the count-up number: yellow, digits fixed-width so the line doesn't jitter (assets/countup.js) */
.waste-band__num {
  display: inline-block;
  font-weight: 700;
  color: var(--color-secondary);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
@media (min-width: 64rem) {
  .waste-band__row {
    grid-template-columns: 14rem 1fr auto;
    gap: var(--space-xl);
    justify-items: start;
    text-align: left;
  }
  .waste-band__art {
    width: 100%;
  }
}

/* ===== C15 | Home benefits statement: Bold, +5px below on desktop (2026-10-20, playground proposal) ===== */
/* kit only loads Avenir Next 400 + 700, so 700 is the next weight that renders */
.benefits-band .benefits-band__statement {
  font-weight: 700;
}
@media (min-width: 64rem) {
  .benefits-band .benefits-band__statement {
    margin-bottom: 5px;
  }
}

/* ===== C16 | Home reviews: 20% less space above the heading (2026-10-20, playground proposal) ===== */
.section.reviews {
  padding-top: calc(var(--section-pad) * 0.8);
}

/* ===== C17 | Home benefits icon labels: one weight lighter, Avenir Next 700 to 400 (2026-10-20, playground proposal) ===== */
/* kit only loads Avenir Next 400 + 700, so 400 is the next weight down that renders */
.benefits-band .benefit h3 {
  font-weight: 400;
}

/* ===== C18 | Home round 7: partner logos, newsletter (quote moved to C19) (2026-10-20, playground proposal) ===== */

/* Partner logos: always one row; logos and gaps scale down on phones instead of wrapping */
.partners {
  flex-wrap: nowrap;
  gap: clamp(0.75rem, 3vw, 2.5rem);
}
.partners li {
  min-width: 0;
}
.partners img {
  height: clamp(1.5rem, 7vw, 3.25rem);
}

/* Newsletter: heading, then "Join the Cobi Crew" line, then form. 8px / 24px rhythm */
.email-capture__inner {
  gap: 0;
  max-width: 48rem;
}
.email-capture__heading {
  margin: 0;
}
.email-capture__text {
  margin: 0.5rem 0 0;
  font-size: var(--fs-body);
  font-weight: 400;
}
.email-capture .signup-form {
  margin-top: 1.5rem;
}
/* one line from 48rem up; below that the <br> breaks it after "Tips," */
@media (min-width: 48rem) {
  .email-capture__heading {
    white-space: nowrap;
  }
  .br-mobile {
    display: none;
  }
}

/* ===== C19 | Round 8: eyebrows out site-wide, PDP subtitle, FAQ (story rules retired by C22) (2026-10-20, playground proposal) ===== */
/* PDP subtitle under the product title (was an eyebrow above it) */
.product-subtitle {
  margin: 0.5rem 0 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-lead);
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text);
}

/* Home FAQ: space above the heading cut 20%, then another 20% */
.faq-band {
  padding-top: calc(var(--section-pad) * 0.64);
}


/* ===== C20 | Waste band equal padding, art nudge (2026-10-20, playground proposal) ===== */
/* same padding top and bottom: section top to art top = button bottom to section bottom on phones */
.waste-band {
  padding-block: calc(var(--section-pad) * 0.6 + 0.75rem);
}
@media (max-width: 47.99rem) {
  .waste-band {
    padding-block: calc(var(--section-pad) * 0.6 + 1.75rem);
  }
}
/* optical centering: the turtle and fish pull the eye right, so nudge the art ~10px left when it's centered */
@media (max-width: 63.99rem) {
  .waste-band__art {
    transform: translateX(-5%);
  }
}

/* ===== C22 | Home story as a video band (port of the Change theme's video-band; Cobi navy card) with white partner logos in the card (2026-10-20, playground proposal) ===== */
/* full bleed film with a frosted card; film attaches lazily (assets/ambient-video.js), poster under reduced motion */
.video-band {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 520px;
  padding: 4rem var(--gutter);
  overflow: hidden;
  background: var(--color-bg-dark);
}
.video-band__film {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, 0.18);
}
.video-band__card {
  width: 100%;
  max-width: 680px;
  padding: 32px;
  border-radius: 18px;
  background: rgba(0, 45, 91, 0.45);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #fff;
  text-align: center;
}
.video-band__rule {
  display: block;
  width: 56px;
  height: 1px;
  margin: 20px auto 18px;
  background: rgba(255, 255, 255, 0.6);
}
.video-band__heading {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-heading);
  line-height: 1.12;
  color: #fff;
}
.video-band__quote {
  max-width: 34rem;
  margin: 0.75rem auto 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: #fff;
}
.video-band .btn-row {
  margin-top: 1.5rem;
}
@media (min-width: 48rem) {
  .video-band {
    min-height: 640px;
  }
  .video-band__card {
    padding: 48px;
  }
  .video-band__quote {
    font-size: var(--fs-lead);
  }
}

/* No wordmark (the header and the quote already say Cobi). Rule + white partner logos sign off the card */
.video-band .video-band__rule {
  margin: 28px auto 22px;
}
.video-band__partners {
  margin: 0;
  padding: 0;
  list-style: none;
  gap: clamp(0.75rem, 3vw, 1.75rem);
}
.video-band__partners img {
  height: clamp(1.25rem, 5.75vw, 2rem);
  filter: brightness(0) invert(1);
}

/* ===== C23 | Home reviews: cards closer to the star line (2026-10-20, playground proposal) ===== */
.reviews .section-head {
  margin-bottom: 1.5rem;
}

/* ===== C24 | Home: video band button as a white outline (yellow stays with the one shop moment) (2026-10-20, playground proposal) ===== */
.video-band .btn--ghost {
  color: #fff;
  box-shadow: inset 0 0 0 1.5px #fff;
}
.video-band .btn--ghost:hover,
.video-band .btn--ghost:focus-visible {
  background: #fff;
  color: var(--color-primary);
  box-shadow: inset 0 0 0 1.5px #fff;
}

/* ===== C25 | Round 10: wider video card, logos +5%, drawn FAQ icons, newsletter flipped (2026-10-20, playground proposal) ===== */
/* Video card 820px wide; text stays about 560px, centered, so the extra width is side padding */
.video-band__card {
  max-width: 820px;
}
.video-band__card > * {
  max-width: 35rem;
  margin-inline: auto;
}
.video-band__partners img {
  height: clamp(1.3125rem, 6.04vw, 2.1rem);
}

/* FAQ +/-: two centered bars drawn in CSS (the en dash glyph sat off-center); the vertical bar drops when open */
.faq summary::after {
  content: "";
  background:
    linear-gradient(var(--color-primary), var(--color-primary)) center / 12px 2px no-repeat,
    linear-gradient(var(--color-primary), var(--color-primary)) center / 2px 12px no-repeat,
    var(--color-accent);
}
.faq details[open] summary::after {
  content: "";
  background:
    linear-gradient(var(--color-primary), var(--color-primary)) center / 12px 2px no-repeat,
    var(--color-accent);
}

/* Newsletter: "Join the Cobi Crew" headline, one line at every width; 18px line; form side by side (fits at 375) */
.email-capture__heading {
  white-space: nowrap;
}
.email-capture__text {
  font-size: var(--fs-lead);
}
.email-capture .signup-form {
  flex-wrap: nowrap;
  margin-inline: auto;
}
.email-capture .signup-form input[type="email"] {
  flex: 1 1 auto;
}

/* ===== C26 | Footer round 1: bigger wordmark, caps tagline, links flush, no dots, badge row (2026-10-20, playground proposal) ===== */
.site-footer__wordmark {
  height: 5.75rem; /* 2x, then +15% */
}
/* quiet sign-off, not a headline */
.site-footer__tagline {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-small);
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
/* the column heads separate the blocks, so no rule here */
.site-footer__inner {
  border-top: 0;
}
/* links on the same left edge as their column heads */
.site-footer .footer-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* one light color in every state (Bundle & Save was picking up a navy visited color); hover underlines */
.site-footer .footer-col a,
.site-footer .footer-col a:link,
.site-footer .footer-col a:visited,
.site-footer .footer-col a:hover,
.site-footer .footer-col a:focus-visible {
  color: var(--color-bg-alt);
}
.site-footer .footer-col a:hover,
.site-footer .footer-col a:focus-visible {
  text-decoration: underline;
}
.site-footer .legal-links a:visited {
  color: var(--color-text-muted-dark);
}

/* Badges: plain text, stacked on phones, 2x2 on tablets, one row edge to edge from 1120 (the four need ~1080 to fit).
   Legal gets its own line 24px below */
.certs {
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.certs li::before {
  content: none;
}
.site-footer__bottom {
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}
@media (min-width: 48rem) {
  .site-footer__bottom {
    align-items: start;
  }
  .certs {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: 0.6rem var(--space-xl);
  }
}
@media (min-width: 70rem) {
  .certs {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: var(--space-md);
  }
  .certs li {
    white-space: nowrap;
  }
}
/* with the first rule gone, tighten logo block to columns (80px to ~48px) */
.site-footer__hero {
  padding-bottom: 0.5rem;
}
/* the remaining rule spans the content edges, not the container padding */
.site-footer__bottom {
  position: relative;
  border-top: 0;
}
.site-footer__bottom::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: var(--gutter);
  height: 1px;
  background: var(--color-rule-dark);
}

/* ===== C27 | Footer round 2: phone spacing, smaller phone logo, badges one row from 1024 (2026-10-20, playground proposal) ===== */
.site-footer__wordmark {
  display: block;
}
.site-footer .footer-col a {
  text-decoration: none;
}
@media (max-width: 47.99rem) {
  .site-footer {
    padding-top: 2.5rem;
  }
  /* right edge stops at the LEARN column (~190px at 390) */
  .site-footer__wordmark {
    height: 3.9375rem;
  }
  .site-footer__hero {
    padding-bottom: 0;
  }
}
/* column heads had a 36px top margin from the base heading style: drops logo-to-heads to 48px desktop / 40px phones,
   and the phone row gap (Bundle & Save to HELP) to 40px */
.site-footer .footer-col h2 {
  margin-top: 0;
}
/* badges one row from 1024: slightly tighter tracking and gaps until 1120, where the full spacing fits */
@media (min-width: 64rem) and (max-width: 69.99rem) {
  .certs {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 1rem;
    letter-spacing: 0.08em;
  }
  .certs li {
    white-space: nowrap;
  }
}

/* ===== C28 | Footer round 3: explicit logo width, more side inset on phones, divider under the badges (2026-10-20, playground proposal) ===== */
/* explicit width from the 1990:657 viewBox so Safari never sizes the SVG off its width attribute; keep the (R) unclipped */
.site-footer__wordmark {
  width: calc(5.75rem * 1990 / 657);
  max-width: 100%;
  overflow: visible;
}
@media (max-width: 47.99rem) {
  .site-footer__wordmark {
    height: 3.625rem;
    width: calc(3.625rem * 1990 / 657); /* right edge still on the LEARN column with the 32px inset */
  }
  /* everything in the footer sits 16px further in on phones (logo, columns, badges, legal, the rule) */
  .site-footer {
    --gutter: 2rem;
  }
}
/* +5px under the logo */
.site-footer__hero {
  padding-bottom: calc(0.5rem + 5px);
}
@media (max-width: 47.99rem) {
  .site-footer__hero {
    padding-bottom: 5px;
  }
}
/* rule under the badges, spaced like the one above them: 40px each side */
.site-footer__bottom {
  gap: 0;
}
.site-footer__legal {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-rule-dark);
}

/* ===== C29 | Footer legal row: copyright left / links right on desktop, links 2x2 on phones (2026-10-20, playground proposal) ===== */
/* one line would need ~9-10px text at phone widths (too small to read or tap), so phones get a 2x2 grid */
@media (max-width: 47.99rem) {
  .site-footer__legal {
    display: grid;
    gap: calc(var(--space-sm) + 5px); /* copyright to links: 16px + 5px */
  }
  .site-footer .legal-links {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: 0.6rem var(--space-lg);
  }
}
@media (min-width: 48rem) {
  .site-footer__legal {
    justify-content: space-between;
  }
}

/* ===== C30 | Dryer PDP: "See all ingredients" sheet from the pet-hair lander (button + dialog, grouped buckets, Unscented / Scented tabs) (2026-10-20, playground proposal) ===== */
.ingr-seeall {
  display: inline-block;
  margin-top: var(--space-sm);
  padding: 0.35rem 0.875rem;
  border: 0;
  border-radius: var(--radius-md);
  background: rgba(0, 158, 204, 0.15);
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}
.ingr-seeall:hover { background: rgba(0, 158, 204, 0.25); }
.ingr-modal + .buy-box__accordion {
  margin-top: var(--space-md);
  border-top: 1px solid var(--color-line);
}

/* Sheet: bottom sheet on phones, centered card from 768 */
.ingr-modal {
  width: 100%;
  max-width: 100%;
  height: 92vh;
  height: 92dvh;
  max-height: none;
  margin: auto 0 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: var(--color-bg);
  color: var(--color-text);
  overflow: hidden;
}
.ingr-modal::backdrop { background: rgba(0, 0, 0, 0.45); }
@media (min-width: 48rem) {
  .ingr-modal {
    max-width: 720px;
    height: 85vh;
    margin: auto;
    border-radius: var(--radius-xl);
  }
}
.ingr-modal__panel {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.ingr-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
}
.ingr-modal__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-subhead);
  font-weight: 400;
  color: var(--color-primary);
}
.ingr-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-primary);
  cursor: pointer;
}
.ingr-modal__close svg { width: 20px; height: 20px; }
.ingr-modal__tabs {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
  padding: 1rem 1.5rem 0.875rem;
}
.ingr-modal__tab {
  padding: 0.4rem 1rem;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-bg);
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.ingr-modal__tab[data-ingr-tab="unscented"][aria-pressed="true"] { background: var(--color-bg-alt); border-color: var(--color-primary); }
.ingr-modal__tab[data-ingr-tab="scented"][aria-pressed="true"] { background: var(--color-accent); border-color: var(--color-primary); }
.ingr-modal__body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-bottom: 2rem;
}
.ingr-modal[data-variant="unscented"] .ingr-bucket--scent { display: none; }

/* Buckets */
.ingr-buckets { margin-top: 1rem; border-top: 1px solid var(--color-border); }
.ingr-bucket { padding: 0.5rem 0; border-bottom: 1px solid var(--color-border); }
.ingr-bucket--scent { border-bottom: 0; }
.ingr-bucket__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.ingr-bucket__header::-webkit-details-marker { display: none; }
.ingr-bucket__label { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; }
.ingr-bucket__title { font-size: var(--fs-ui); font-weight: 700; color: var(--color-primary); }
.ingr-bucket__meta { font-size: var(--fs-xs); color: var(--color-text-muted); }
.ingr-bucket__tag {
  padding: 2px 7px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-text-light);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* +/- drawn as two bars, same as the FAQ (C25) */
.ingr-bucket__icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(var(--color-primary), var(--color-primary)) center / 12px 2px no-repeat,
    linear-gradient(var(--color-primary), var(--color-primary)) center / 2px 12px no-repeat;
}
.ingr-bucket[open] .ingr-bucket__icon {
  background: linear-gradient(var(--color-primary), var(--color-primary)) center / 12px 2px no-repeat;
}
.ingr-bucket__items {
  margin: 0;
  padding: 0 1.5rem 0.5rem;
  list-style: none;
}
.ingr-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0.5rem;
  border-bottom: 1px solid rgba(0, 45, 91, 0.08);
}
.ingr-item:last-child { border-bottom: 0; }
.ingr-item__img {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border: 0.5px solid var(--color-primary);
  border-radius: var(--radius-md);
  background: var(--color-bg-alt);
}
.ingr-bucket--scent .ingr-item__img { background: var(--color-accent); }
.ingr-item__img img { width: 48px; height: 48px; object-fit: contain; }
.ingr-item__text { flex: 1; min-width: 0; }
.ingr-item__text p { margin: 0; }
.ingr-item__name {
  margin-bottom: 0.2rem !important;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.ingr-item__for { font-size: var(--fs-meta); line-height: 1.4; color: var(--color-primary); }
.ingr-item__eco { font-size: var(--fs-xs); line-height: 1.4; color: var(--color-text-muted); }
.ingr-scent-note {
  padding: 0.75rem 0.5rem 0.25rem;
  font-size: var(--fs-meta);
  font-style: italic;
  color: var(--color-text-muted);
}

/* ===== C31 | Dryer PDP round 1: sticky gallery, buy box order (trust line, 2x2 benefits, 4 accordions, Ingredients first) (2026-10-20, playground proposal) ===== */
/* Gallery sticks under the header while the buy box scrolls; releases at the end of the product grid */
@media (min-width: 48rem) {
  /* Stencil base sets overflow: hidden on section.product, which kills sticky; clip crops the same without making a scroll box */
  section.container.product {
    overflow: clip;
  }
  .product .productView-images {
    position: sticky;
    top: calc(var(--header-h, 104px) + 24px);
    align-self: start;
  }
}

/* ~24px between groups: button > trust line > benefits > accordions */
.buy-box__trust {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 24px 0 0;
  font-family: var(--font-body);
  font-size: var(--fs-ui);
  font-weight: 400;
  color: var(--color-primary);
}
.buy-box__trust svg { flex-shrink: 0; }

.pdp-icons--grid {
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.25rem;
  margin: 24px 0 0;
  padding: 0;
}
.pdp-icons--grid .pdp-icon {
  grid-template-columns: 1.75rem 1fr;
  gap: 0.625rem;
  align-items: center;
  font-size: var(--fs-ui);
  font-weight: 700;
  line-height: 1.25;
}

.buy-box__accordions {
  margin-top: 24px;
  border-top: 1px solid var(--color-line);
}
.buy-box__accordions .buy-box__accordion > p,
.buy-box__accordions .buy-box__accordion > ul,
.buy-box__ingr {
  padding-bottom: var(--space-sm);
}
.buy-box__ingr p { margin: 0 0 0.75rem; font-size: var(--fs-ui); }
.buy-box__ingr-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: var(--fs-ui);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.buy-box__ingr-link:hover { text-decoration-thickness: 2px; }
.buy-box__list {
  margin: 0;
  padding-left: 1.25rem;
  list-style: disc;
  font-size: var(--fs-ui);
}
.buy-box__list li + li { margin-top: 0.375rem; }
.buy-box__accordions .buy-box__accordion > p { margin-top: 0; }
.buy-box__accordion > p + .buy-box__list { margin-top: -0.25rem; }
/* Visible playground placeholder: copy still to come */
.buy-box__placeholder {
  padding: 0.75rem 1rem !important;
  margin-bottom: var(--space-sm);
  border: 1px dashed var(--color-text-muted);
  border-radius: var(--radius-md);
  font-size: var(--fs-small);
  font-style: italic;
  color: var(--color-text-muted);
}

/* ===== C32 | Dryer PDP round 1b: benefit tiles open their text (+), Ingredients dropdown spacing (2026-10-20, playground proposal) ===== */
.pdp-benefits { margin-top: 24px; }
.pdp-benefits .pdp-icons--grid { margin-top: 0; }
.pdp-icons--grid .pdp-icon { display: block; }
.pdp-icon__btn {
  display: grid;
  grid-template-columns: 1.75rem 1fr 12px;
  gap: 0.625rem;
  align-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-primary);
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.pdp-icon__btn img { width: 1.75rem; height: 1.75rem; }
/* +/- drawn like the FAQ (C25) */
.pdp-icon__plus {
  width: 12px;
  height: 12px;
  background:
    linear-gradient(var(--color-primary), var(--color-primary)) center / 10px 2px no-repeat,
    linear-gradient(var(--color-primary), var(--color-primary)) center / 2px 10px no-repeat;
}
.pdp-icon__btn[aria-expanded="true"] .pdp-icon__plus {
  background: linear-gradient(var(--color-primary), var(--color-primary)) center / 10px 2px no-repeat;
}
.pdp-benefits__panel {
  margin-top: 1rem;
  padding: 0.875rem 1rem;
  border-radius: var(--radius-md);
  background: var(--color-bg-alt);
}
.pdp-benefits__text {
  margin: 0;
  font-size: var(--fs-ui);
  line-height: 1.5;
}

/* Ingredients dropdown: Signature Scent 24px below the sheet list (was 12), "Free of" 48px (double) */
.buy-box__ingr .buy-box__ingr-scent { margin-top: 1.5rem; }
.buy-box__ingr .buy-box__ingr-free { margin-top: 3rem; }

/* ===== C33 | Dryer PDP: benefit tile + panel read as one piece (open tile fills cream, panel opens right under its row, joined) (2026-10-20, playground proposal) ===== */
.pdp-benefits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 0.5rem;
  margin-inline: -0.625rem; /* tile padding hangs outside so icons stay on the content edge */
}
.pdp-benefits .pdp-icons--grid { display: contents; }
.pdp-benefits .pdp-icon {
  padding: 0.5rem 0.625rem;
  border-radius: var(--radius-md);
  transition: background-color 0.15s ease;
}
.pdp-benefits .pdp-icon:nth-child(1) { grid-area: 1 / 1; }
.pdp-benefits .pdp-icon:nth-child(2) { grid-area: 1 / 2; }
.pdp-benefits .pdp-icon:nth-child(3) { grid-area: 3 / 1; }
.pdp-benefits .pdp-icon:nth-child(4) { grid-area: 3 / 2; }
.pdp-benefits .pdp-icon:hover { background: rgba(249, 246, 229, 0.6); }

/* open tile: cream, square bottom so it runs into the panel */
.pdp-benefits[data-open="0"] .pdp-icon:nth-child(1),
.pdp-benefits[data-open="1"] .pdp-icon:nth-child(2),
.pdp-benefits[data-open="2"] .pdp-icon:nth-child(3),
.pdp-benefits[data-open="3"] .pdp-icon:nth-child(4) {
  background: var(--color-bg-alt);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.pdp-benefits .pdp-benefits__panel {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0 0 0.5rem;
  padding: 0.75rem 0.625rem 0.875rem;
  border-radius: var(--radius-md);
}
.pdp-benefits[data-open="2"] .pdp-benefits__panel,
.pdp-benefits[data-open="3"] .pdp-benefits__panel { grid-row: 4; margin: 0; }
/* square the corner under the open tile */
.pdp-benefits[data-open="0"] .pdp-benefits__panel,
.pdp-benefits[data-open="2"] .pdp-benefits__panel { border-top-left-radius: 0; }
.pdp-benefits[data-open="1"] .pdp-benefits__panel,
.pdp-benefits[data-open="3"] .pdp-benefits__panel { border-top-right-radius: 0; }

/* ===== C34 | Dryer PDP: benefit highlight + panel square, no rounding (2026-10-20, playground proposal) ===== */
.pdp-benefits .pdp-icon,
.pdp-benefits .pdp-benefits__panel,
.pdp-benefits[data-open] .pdp-icon:nth-child(n) { border-radius: 0; }

/* ===== C35 | Dryer PDP Ingredients dropdown: "Free of" caps label, tighter above, more room before the breakdown link (2026-10-20, playground proposal) ===== */
.buy-box__ingr .buy-box__ingr-free { margin: 12px 0 22px; }
.buy-box__ingr .buy-box__ingr-free p { margin: 0; color: var(--color-primary); }
.buy-box__ingr .buy-box__ingr-label {
  margin-bottom: 6px !important;
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ===== C36 | Dryer PDP round 2: Soft Sky open state on benefit tiles, roomier panel, Free of spacing; one drawn +/- for every accordion site-wide (2026-10-20, playground proposal) ===== */
:root {
  --acc-bar: linear-gradient(var(--color-primary), var(--color-primary));
  --acc-plus: var(--acc-bar) center / 12px 2px no-repeat, var(--acc-bar) center / 2px 12px no-repeat;
  --acc-minus: var(--acc-bar) center / 12px 2px no-repeat;
}

/* Benefit tiles: Soft Sky tint (#ACE3EF at ~25%) instead of cream */
.pdp-benefits .pdp-icon:hover { background: #f4fbfd; }
.pdp-benefits[data-open="0"] .pdp-icon:nth-child(1),
.pdp-benefits[data-open="1"] .pdp-icon:nth-child(2),
.pdp-benefits[data-open="2"] .pdp-icon:nth-child(3),
.pdp-benefits[data-open="3"] .pdp-icon:nth-child(4),
.pdp-benefits .pdp-benefits__panel { background: #eaf8fb; }
.pdp-benefits .pdp-benefits__panel { padding: 0.75rem 24px 24px; }

/* Ingredients dropdown: ~30px between Signature Scent and FREE OF: */
.buy-box__ingr .buy-box__ingr-free { margin-top: 30px; }

/* Shared accordion icon: the same 12px drawn bars everywhere (FAQ keeps its Soft Sky circle behind them) */
.buy-box__accordion > summary::after,
.ingredient__name::after,
.passwordChange-summary::after {
  content: "";
  flex: none;
  align-self: center;
  width: 12px;
  height: 12px;
  background: var(--acc-plus);
}
.buy-box__accordion[open] > summary::after,
.ingredient[open] .ingredient__name::after,
.passwordChange[open] .passwordChange-summary::after {
  content: "";
  background: var(--acc-minus);
}
.faq summary::after { content: ""; background: var(--acc-plus), var(--color-accent); }
.faq details[open] summary::after { content: ""; background: var(--acc-minus), var(--color-accent); }
.ingr-bucket__icon { width: 12px; height: 12px; background: var(--acc-plus); }
.ingr-bucket[open] .ingr-bucket__icon { background: var(--acc-minus); }
.pdp-icon__plus { background: var(--acc-plus); }
.pdp-icon__btn[aria-expanded="true"] .pdp-icon__plus { background: var(--acc-minus); }

/* ===== C37 | Dryer PDP round 3: comparison table spacing + smaller marks + square Cobi lane; Works Twice checklist, image top-aligned (2026-10-20, playground proposal) ===== */
/* Section: tight top like the other section heads, ~40px under the table (photo below it is gone) */
.compare-section {
  padding-top: calc(var(--section-pad) * 0.6);
  padding-bottom: 40px;
}
.compare-section .section-head .heading { margin-top: 0; } /* base h2 adds 36px, so visible space was 94px; now ~58px like the home section heads */
/* Cobi lane: square-ish, not a pill */
.compare__table thead .compare__cobi { border-radius: 4px 4px 0 0; }
.compare__table tbody tr:last-child .compare__cobi { border-radius: 0 0 4px 4px; }
/* Marks ~20% smaller (38px -> 30px) */
.compare__table .yes,
.compare__table .no,
.compare__table .no:not([aria-label="Unclear"]),
.compare__table .no[aria-label="Unclear"] {
  width: 1.875rem;
  height: 1.875rem;
}
.compare__table .yes,
.compare__table .no:not([aria-label="Unclear"]) { background-size: 0.9rem; }
.compare__table .no[aria-label="Unclear"] { font-size: var(--fs-ui); }
/* Desktop: taller rows (+8px), wider columns, use the container width */
@media (min-width: 64rem) {
  .compare__table { max-width: none; }
  .compare__table th,
  .compare__table td { padding: 1.375rem 1.5rem; }
  .compare__table tbody th { padding-left: 1.25rem; }
}

/* Works Twice: image top lines up with the heading on desktop */
@media (min-width: 48rem) {
  .reuse__grid { align-items: start; }
}
/* "third use" list: plain 2-column checklist (pills read as buttons) */
.reuse__checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.reuse__checks li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.4;
}
.reuse__checks li::before {
  content: "";
  flex: none;
  width: 1rem;
  height: 1rem;
  margin-top: 0.15rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23002d5b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ===== C38 | Buy box accordions (all PDPs): one bottom space, matched to "How to dispose" (~40px text to divider); "More ways" intro closer to its list (2026-10-20, playground proposal) ===== */
/* details.… :not(summary) outranks the C31 ".buy-box__accordions .buy-box__accordion > p / > ul" padding */
details.buy-box__accordion > :last-child:not(summary) {
  margin-bottom: 0;
  padding-bottom: 40px;
}
details.buy-box__accordion > :last-child:not(summary) > :last-child { margin-bottom: 0; }
/* intro paragraph to bullets: ~36px -> ~18px */
details.buy-box__accordion > p:has(+ .buy-box__list) {
  margin-bottom: 18px;
  padding-bottom: 0;
}
.buy-box__accordion > p + .buy-box__list { margin-top: 0; }

/* ===== C39 | Comparison table: the empty top-left cell stays put in solid Soft Sky, so headers slide under it on swipe (2026-10-20, playground proposal) ===== */
.compare__table thead td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--color-accent);
}

/* ===== C40 | Home video band: quote in Avenir Next Bold (kit has 400/700 only) with a touch more leading; more room above the button (2026-10-20, playground proposal) ===== */
.video-band__quote {
  margin-top: calc(0.75rem + 10px); /* 22px under the heading */
  font-weight: 700;
  line-height: 1.45;
}
.video-band .btn-row {
  margin-top: calc(2.25rem + 5px); /* 41px quote to button */
}

/* ===== C41 | Dryer PDP: cotton section rebuilt as a "seed to sheet" 3-photo strip from the 2024 harvest shoot (2026-10-20, playground proposal) ===== */
.seed-strip {
  padding-block: calc(var(--section-pad) * 0.6);
}
.seed-strip__head {
  max-width: 44rem;
  margin: 0 auto var(--space-lg);
  text-align: center;
}
.seed-strip__head .heading {
  margin: 0;
  font-weight: 600;
  text-wrap: balance;
}
.seed-strip__lede {
  margin: 0.5rem 0 0;
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  line-height: 1.5;
  text-wrap: pretty;
}
.seed-strip__photos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.seed-strip__photos img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-lg); /* 16px, same as the product cards */
}
/* per-photo crops: keep the harvesters, the boll on the spindle, the sun */
.seed-strip__photos li:nth-child(1) img { object-position: 45% 55%; }
.seed-strip__photos li:nth-child(3) img { object-position: 55% 50%; }
.seed-strip__partners {
  justify-content: center;
  margin-top: var(--space-lg);
}
/* Phones: swipe strip, next photo peeking, snaps to each photo, bleeds to the screen edge */
@media (max-width: 47.99rem) {
  .seed-strip__photos {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter, 1rem);
    margin-inline: calc(-1 * var(--gutter, 1rem));
    padding-inline: var(--gutter, 1rem);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .seed-strip__photos::-webkit-scrollbar { display: none; }
  .seed-strip__photos li { scroll-snap-align: start; }
}

/* ===== C42 | Cream meets white = thin navy divider (same hairline as the benefits band), every page; FAQ white, newsletter cream (2026-10-21, playground proposal) ===== */
:is(.on-white, .section--white) + :is(.on-cream, .section--cream):not(.benefits-band),
:is(.on-cream, .section--cream):not(.benefits-band) + :is(.on-white, .section--white) {
  border-top: 1px solid var(--color-primary);
}
@media (min-resolution: 2dppx) {
  :is(.on-white, .section--white) + :is(.on-cream, .section--cream):not(.benefits-band),
  :is(.on-cream, .section--cream):not(.benefits-band) + :is(.on-white, .section--white) {
    border-top-width: 0.5px;
  }
}
/* the buy box (white) is followed by an empty content region, not the next section directly */
[data-content-region="product_below_content"] + :is(.on-cream, .section--cream):not(.benefits-band) {
  border-top: 1px solid var(--color-primary);
}
@media (min-resolution: 2dppx) {
  [data-content-region="product_below_content"] + :is(.on-cream, .section--cream):not(.benefits-band) { border-top-width: 0.5px; }
}

/* ===== C43 | Home tagline band: +10px above and below the tagline (2026-10-21, playground proposal) ===== */
.tagline-band { padding-block: calc(1.5rem + 20px); }
@media (min-width: 48rem) {
  .tagline-band { padding-block: calc(2rem + 20px); }
}

/* ===== C44 | Dryer PDP round 4b: more space above the cotton section, 2-photo cotton strip, no last table rule; guarantee hierarchy (all PDPs) (2026-10-21, playground proposal) ===== */
.seed-strip { padding-top: calc(var(--section-pad) * 0.8); }
.seed-strip__photos--two { grid-template-columns: 3fr 2fr; }
.seed-strip__photos--two img { aspect-ratio: auto; height: 100%; min-height: 0; }
.seed-strip__photos--two li { aspect-ratio: auto; }
.seed-strip__photos--two li:nth-child(1) img { object-position: 45% 60%; }
.seed-strip__photos--two li:nth-child(2) img { object-position: 45% 55%; }
@media (min-width: 48rem) {
  .seed-strip__photos--two { height: clamp(20rem, 34vw, 27rem); }
}
@media (max-width: 47.99rem) {
  /* two photos: stack instead of swiping */
  .seed-strip__photos--two {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
  .seed-strip__photos--two img { aspect-ratio: 3 / 2; height: auto; }
}

/* Comparison table: no rule under the last row */
.compare__table tbody tr:last-child th,
.compare__table tbody tr:last-child td { border-bottom: 0; }

/* Guarantee: icon > heading > promise > fine print, clear steps between them; box stays Soft Sky, smaller corners */
.guarantee {
  gap: 0;
  padding: clamp(2.5rem, 5vw, 3.5rem) clamp(1.5rem, 5vw, 3rem);
  border-radius: var(--radius-lg);
}
.guarantee__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-primary);
}
.guarantee .heading {
  margin: 0;
  font-size: var(--fs-heading);
  line-height: 1.15;
}
.guarantee p {
  max-width: 34rem;
  margin: 14px 0 0;
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  line-height: 1.5;
  text-wrap: pretty;
}
.guarantee .guarantee__subtext {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 45, 91, 0.2);
  font-size: var(--fs-small);
  color: var(--color-primary);
}

/* ===== C45 | PDP FAQ: guarantee box removed (buy box trust line carries it); band evened to ~72px above the heading and below the button (2026-10-21, playground proposal) ===== */
.faq-band.full-bleed { padding-block: 72px; }
.faq-band.full-bleed .section-head .heading { margin-top: 0; }
@media (max-width: 47.99rem) {
  .faq-band.full-bleed { padding-block: 56px; }
}

/* ===== C46 | Cotton section: full site section padding above and below (was 0.8x / 0.6x) so it reads as its own band between the two sky sections (2026-10-21, playground proposal) ===== */
.seed-strip { padding-block: var(--section-pad); }
.seed-strip__partners { margin-bottom: 0; } /* base ul margin was adding 24px under the logos */

/* PDP spacing system (desktop): content sections 96px (cotton, Works Twice), bands 72px (comparison, benefits, FAQ), newsletter 58px.
   Comparison: 72 above the heading (heading margin already 0, C37) and 72 under the table */
.compare-section { padding-block: 72px; }
@media (max-width: 47.99rem) {
  .compare-section { padding-block: 56px; }
}

/* ===== C47 | No navy hairline where cream meets Soft Sky (Works Twice -> benefits band on the dryer PDP) (2026-10-21, playground proposal) ===== */
:is(.reuse, .compare-section) + .benefits-band { border-top: 0; }
.benefits-band + :is(.reuse, .compare-section) { border-top: 0; }
.benefits-band:has(+ :is(.reuse, .compare-section)) { border-bottom: 0; }

/* ===== C48 | The navy hairline only ever sits against white: the benefits band drops its own top/bottom rules and follows the C42 cream/white rule (2026-10-21, playground proposal) ===== */
.benefits-band { border-block: 0; }
:is(.on-white, .section--white) + .benefits-band,
.benefits-band + :is(.on-white, .section--white) {
  border-top: 1px solid var(--color-primary);
}
@media (min-resolution: 2dppx) {
  :is(.on-white, .section--white) + .benefits-band,
  .benefits-band + :is(.on-white, .section--white) { border-top-width: 0.5px; }
}

/* ===== C49 | Buds PDP: dryer PDP format (trust line, benefit tiles, Ingredients + breakdown sheet, pods vs Buds as the Soft Sky band under the buy box) (2026-10-21, playground proposal) ===== */
/* Made in USA line sits under the trust line, text aligned past the shield */
.buy-box__trust + .buy-box__note {
  margin: 8px 0 0;
  padding-left: 28px;
  font-family: var(--font-body);
  font-size: var(--fs-ui);
  line-height: 1.45;
  color: var(--color-primary);
}

/* Pods vs Buds films: Soft Sky band, same slot and rhythm as the dryer comparison */
.video-duo--band {
  background: var(--color-accent);
  padding-block: 72px;
}
.video-duo--band .section-head .heading { margin-top: 0; }
@media (max-width: 47.99rem) {
  .video-duo--band { padding-block: 56px; }
}

/* Ingredient sheet without groups or tabs: one list */
.ingr-modal--flat .ingr-bucket__items {
  margin-top: 1rem;
  padding-inline: 1.5rem;
}
.ingr-modal--flat .ingr-item__eco { margin-bottom: 0.25rem !important; }

/* ===== C50 | Buds PDP round 1: sentence-case feature titles; no mouse-click focus box on buy box accordions (2026-10-21, playground proposal) ===== */
/* Feature titles: Avenir Next Bold, sentence case, 16px (was 14px letter-spaced caps) */
.feature h3 {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.3;
}

/* Clicking an accordion left the browser focus box on the header; keyboard focus still shows */
.buy-box__accordion > summary:focus:not(:focus-visible) { outline: none; }

/* ===== C51 | Buds buy box tiles use the live icon-trio art (navy disc icons); their files carry wide padding, so scale the art up to the dryer tile size (2026-10-21, playground proposal) ===== */
.pdp-icons--trio .pdp-icon__btn img { transform: scale(1.4); }

/* ===== C52 | Buds "Tough on messes": heading larger at every width (40px phones to 64px desktop); feature icons lifted so the circle top meets the title cap height (2026-10-21, playground proposal) ===== */
.safe .safe__top .heading { font-size: var(--fs-display); line-height: 1.06; }

/* the circles sit ~7-8px down inside their 56px icon files; titles' caps start ~3.5px down */
.safe .feature img { margin-top: -4px; }
.safe .feature img[src*="icon-buds-gentle"] { margin-top: -5px; }

/* ===== C53 | Newsletter ("Join the Cobi Crew", home + 3 PDPs): left aligned on phones; desktop: text left + form right as one centered group, 64px apart; centered 768-1023 (2026-10-21, playground proposal) ===== */
@media (max-width: 47.99rem) {
  .email-capture__inner {
    justify-items: start;
    text-align: left;
  }
  .email-capture .signup-form { margin-inline: 0; }
}
@media (min-width: 64rem) {
  .email-capture__inner {
    grid-template-columns: auto minmax(0, 28rem);
    grid-template-rows: auto auto;
    justify-content: center; /* text + form sit together as one centered group */
    align-items: center;
    justify-items: start;
    column-gap: 64px;
    max-width: var(--max-width);
    text-align: left;
  }
  .email-capture__heading { grid-area: 1 / 1; align-self: end; }
  .email-capture__text { grid-area: 2 / 1; align-self: start; }
  .email-capture .signup-form {
    grid-area: 1 / 2 / 3 / 3;
    width: 100%;
    margin: 0;
    justify-self: end;
  }
}

/* ===== C54 | Bundle PDP: dryer/Buds format (trust line, 2x2 tiles, Ingredients / Suggested Use / How to dispose, one ingredient sheet for both products) (2026-10-21, playground proposal) ===== */
/* How to dispose holds two products: 16px between them, last one keeps the C38 40px */
details.buy-box__accordion > p:has(+ p) { padding-bottom: 0; margin-bottom: 16px; }

/* Buds rows in the sheet (no art): small gap under the source line, same as the Buds sheet */
.ingr-modal--bundle .ingr-item__eco + .ingr-item__for { margin-top: 0.25rem; }
/* no rule above the first group (the sheet header line is enough, same as the Buds sheet) */
.ingr-modal--bundle .ingr-buckets { border-top: 0; }


/* ===== C55 | Bundle PDP: live tagline band, then home's review carousel (Bundle + Buds reviews from live Judge.me) under the buy box; shelf comparison and icon trio tried and dropped (2026-10-21, playground proposal) ===== */
/* reviews under the band: the 72px band rhythm of the other PDPs (home's band -> shop spacing doesn't apply here) */
.tagline-band + .reviews { padding-block: 72px; }
@media (max-width: 47.99rem) {
  .tagline-band + .reviews { padding-block: 56px; }
}

/* ===== C56 | Basic page template (FAQ, Shipping & Returns, Contact; later Accessibility, Privacy, Terms): white page, one ~720px column, left-aligned header (title + intro + divider), Avenir caps subheads, home/PDP accordion (2026-10-21, playground proposal) ===== */
/* Stencil's 40px .body margin + an empty breadcrumb list's 24px margin put cream above the content */
.body:has(.info-page) { margin-top: 0; margin-bottom: 0; }
nav[aria-label="Breadcrumb"]:not(:has(li)) { display: none; }
/* text-page hero still used by Ingredients: centered title, 48px max */
.page-hero { padding-block: 56px; }
.page-hero .display { margin: 0; font-size: var(--fs-heading); line-height: 1.1; }
@media (max-width: 47.99rem) { .page-hero { padding-block: 40px; } }

.basic-page__wrap { background: var(--color-bg); }
.basic-page__col { max-width: calc(720px + 2 * var(--gutter)); }

.basic-page__head {
  padding-top: 64px;
  padding-bottom: 32px;
  text-align: left;
}
.basic-page__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-heading);
  line-height: 1.1;
  color: var(--color-primary);
}
.basic-page__intro {
  margin: 12px 0 0;
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--color-text);
}
.basic-page__intro a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 47.99rem) {
  .basic-page__head { padding-top: 40px; }
  .basic-page__title { font-size: var(--fs-heading); }
}

/* no divider (Jake 10/21): intro -> first subhead 77px (the old 32 + 40 + 5); 56px section breaks; room before the footer */
.basic-page__body { display: grid; gap: 56px; padding-block: 45px 96px; }
@media (max-width: 47.99rem) { .basic-page__body { padding-bottom: 72px; } }
.basic-page .faq-group { gap: 16px; }
/* subheads in Fields Semi Bold, a step under the title (caps Avenir got lost, Jake 10/21) */
.basic-page .faq-group > .heading {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-subhead);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-primary);
}
@media (max-width: 47.99rem) { .basic-page .faq-group > .heading { font-size: var(--fs-subhead); } }

/* accordion: home/PDP component; question Avenir Bold 16px, answer Avenir 16px / 1.6 */
.basic-page .faq summary { font-size: var(--fs-body); }
.basic-page .faq details > :not(summary) { font-size: var(--fs-body); line-height: 1.6; color: var(--color-text); }
/* contact form: fields sit in the column, no card */
.basic-page .contact-form { max-width: none; padding: 0; border: 0; border-radius: 0; background: none; }

/* focus ring on keyboard focus only, not after a click (every FAQ) */
.faq summary:focus:not(:focus-visible) { outline: none; }
.basic-page .contact-form .form-actions { margin: 0; text-align: left; }

/* Policy pages (Privacy, Terms, Accessibility) on the basic template: live text, Fields section heads like the FAQ subheads */
.policy-text { font-size: var(--fs-body); line-height: 1.6; color: var(--color-text); }
.policy-text > :first-child { margin-top: 0; }
.policy-text p, .policy-text ul { margin: 0 0 1rem; }
.policy-text ul { padding-left: 1.25rem; list-style: disc; }
.policy-text li + li { margin-top: 0.375rem; }
.policy-text h2 {
  margin: 56px 0 16px;
  font-family: var(--font-heading);
  font-size: var(--fs-subhead);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-primary);
}
.policy-text h3 {
  margin: 32px 0 8px;
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-primary);
}
@media (max-width: 47.99rem) { .policy-text h2 { font-size: var(--fs-subhead); margin-top: 48px; } }
.policy-text a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* privacy tables: two columns of lists, swipe on phones */
.policy-text table { display: block; overflow-x: auto; width: 100%; margin: 0 0 1.5rem; border-collapse: collapse; font-size: var(--fs-ui); }
.policy-text th, .policy-text td { min-width: 14rem; padding: 12px 16px 12px 0; border-bottom: 1px solid rgba(0, 45, 91, 0.2); text-align: left; vertical-align: top; }
.policy-text th { font-weight: 700; color: var(--color-primary); }
.policy-text td ul { margin: 0; }

/* ===== C57 | Ingredients page: basic page template + the dryer PDP ingredient sheet's tiles (C30) laid out open, grouped like the sheet; Buds as text rows (no Buds icons exist); "Free of" list from the buy box (2026-10-21, playground proposal) ===== */
.ingredients-page .ingr-section { display: grid; gap: 0; }
.ingr-section__title {
  margin: 0 0 12px;
  font-family: var(--font-heading);
  font-size: var(--fs-subhead);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-primary);
}
@media (max-width: 47.99rem) { .ingr-section__title { font-size: var(--fs-subhead); } }
.ingr-section__lead { margin: 0 0 8px; font-size: var(--fs-body); line-height: 1.6; color: var(--color-text); }

/* groups: caps label over a ruled list (sheet buckets, open) */
.ingr-group { margin-top: 32px; }
.ingr-group__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0, 45, 91, 0.2);
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--color-primary);
}
.ingr-group__tag {
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-text-light);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
}
.ingr-group__items { margin: 0; padding: 0; list-style: none; }
.ingredients-page .ingr-item {
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(0, 45, 91, 0.08);
}
.ingredients-page .ingr-item:last-child { border-bottom: 0; }
.ingredients-page .ingr-item__img { width: 72px; height: 72px; }
.ingredients-page .ingr-item__img img { width: 54px; height: 54px; }
.ingredients-page .ingr-item__name {
  margin-bottom: 4px !important;
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.ingredients-page .ingr-item__for { font-size: var(--fs-body); line-height: 1.5; }
.ingredients-page .ingr-item__eco,
.ingredients-page .ingr-item__src { margin-top: 2px; font-size: var(--fs-small); line-height: 1.5; color: var(--color-text-muted); }
.ingredients-page .ingr-item__src { margin: 0 0 4px; }
.ingredients-page .ingr-item--text { padding: 18px 0; }
.ingredients-page .ingr-scent-note { padding: 14px 0 2px; font-size: var(--fs-ui); }
/* scent tiles in Sunshine, like the sheet */
.ingredients-page .ingr-group--scent .ingr-item__img { background: var(--color-accent); }
.ingredients-page .ingr-group--scent .ingr-item { padding: 12px 0; }

/* Free of: same label as the buy box dropdown, in a Soft Sky box */
.ingr-free {
  margin-top: 32px;
  padding: 20px 24px;
  border-radius: var(--radius-md);
  background: #EAF8FB;
}
.ingr-free p { margin: 0; font-size: var(--fs-body); line-height: 1.6; color: var(--color-text); }
.ingr-free .ingr-free__label {
  margin-bottom: 6px;
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
}
@media (max-width: 47.99rem) {
  .ingredients-page .ingr-item { gap: 16px; }
  .ingredients-page .ingr-item__img { width: 60px; height: 60px; }
  .ingredients-page .ingr-item__img img { width: 44px; height: 44px; }
  .ingr-free { padding: 18px 20px; }
}

/* ===== C58 | About round 1b: hero overlay + text, Jay's "Transforming Industry" text section centered + Tom video placeholder, home 3-card shop (2026-10-21, playground proposal) ===== */
/* Overlay fix: photo and overlay were both z-index -1, and the photo comes later in the markup, so it painted over the overlay (bug in the theme too). Photo goes one layer down. */
.about-hero__img { z-index: -2; }
/* Hero: neutral dark overlay like live (keeps the photo's real color; navy flattened it): black 50% overall, ~70% behind the text */
.about-hero::before {
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0) 75%),
    rgba(0, 0, 0, 0.5);
}
.about-hero__copy { gap: 16px; }
.about-hero__copy .lead {
  max-width: 640px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: #fff;
}
@media (max-width: 47.99rem) {
  /* grows with the copy so the paragraph never runs off the photo */
  .about-hero { min-height: 0; }
  .about-hero__copy { padding-block: 72px; }
  .about-hero__copy .lead { font-size: var(--fs-body); }
}

/* Transforming Industry, Honoring Earth: plain cream text section, everything centered on one 640px column (Jay's version had the paragraph shifted left under a centered heading), then a 16:9 placeholder for Tom's video */
.about-ee__inner {
  display: grid;
  justify-items: center;
  gap: 16px;
  max-width: calc(720px + 2 * var(--gutter));
  text-align: center;
}
.about-ee .heading { margin: 0; }
/* Everyone's Earth logo under the heading, navy as drawn (#12284b) */
.about-ee__logo { display: block; width: min(240px, 70%); height: auto; margin-block: 14px 8px; }
@media (max-width: 47.99rem) { .about-ee__logo { width: min(228px, 66.5%); margin-top: 9px; } }
/* Tom video placeholder: full bleed, flush with the bottom of the cream section */
.about-ee { padding-bottom: 0; overflow-x: clip; }
.about-ee .video-placeholder {
  width: 100vw;
  max-width: none;
  margin-top: 40px;
  margin-inline: calc(50% - 50vw);
  border-radius: 0;
}
.about-ee p {
  max-width: 640px;
  margin: 0;
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--color-text);
}
.video-placeholder {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-top: 24px;
  border-radius: var(--radius-lg);
  background: var(--color-primary);
  color: #fff;
}
.video-placeholder__play {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='%23fff'/%3E%3C/svg%3E") 55% 50% / 32px no-repeat;
  box-shadow: inset 0 0 0 1.5px #fff;
}
.video-placeholder__label { font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }

/* Shop: home's card component; heading spacing as on home (~56px visible above and below) */
.about-shop-band {
  padding-top: clamp(2.25rem, 4.5vw, 3.125rem);
}
.about-shop-band .section-head {
  margin-bottom: clamp(2.375rem, 4.7vw, 3.3125rem);
}
.about-shop-band .section-head .heading { margin: 0; }

/* ===== C59 | Ingredients page round 2: each product is a collapsible (starts open; title row with the FAQ +/- circle and a rule above, so the two products read as a pair), Buds list attached under its title like the dryer groups, "Free of" box in a light red tint (2026-10-21, playground proposal) ===== */
.ingredients-page .basic-page__body { gap: 24px; }
.ingr-product__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0 16px;
  border-top: 1px solid rgba(0, 45, 91, 0.2);
  cursor: pointer;
  list-style: none;
}
.ingr-product__head::-webkit-details-marker { display: none; }
.ingr-product__head .ingr-section__title { margin: 0; }
.ingr-product__icon {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--acc-plus), var(--color-accent);
}
.ingr-product[open] .ingr-product__icon { background: var(--acc-minus), var(--color-accent); }
.ingr-product__head:focus { outline: none; }
.ingr-product__head:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; }
.ingr-product > .ingr-section__lead { margin: 0; }
/* open product: 40px before the next product's rule */
.ingr-product[open] { padding-bottom: 16px; }

/* Buds: list starts right under the title on a rule, like the dryer groups */
.ingr-group--buds { margin-top: 0; } /* no rule above the first Bud (Jake, 2b); the item rules separate the rest */

/* Free of: light red tint + red label = "not in here" (compare table red #ad0014) */
.ingr-free { background: #FBEEEF; }
.ingr-free .ingr-free__label { color: var(--color-compare-red); }
/* C59b: no rule above the first product (two rules stacked on first view, Jake); intro to "Cotton Dryer Sheets" stays ~77px like the FAQ subheads. Tiles top-aligned with the ingredient name (centered tiles floated beside 2-3 line text) */
.ingredients-page .ingr-section:first-child .ingr-product__head { padding-top: 0; border-top: 0; }
.ingredients-page .ingr-item { align-items: flex-start; }

/* ===== C60 | FAQ look matched on every page (home, 3 PDPs, FAQ / Shipping / Contact): no rule above the first question; question 17px and answer line-height as home everywhere (basic pages had 16px / 1.6) (2026-10-21, playground proposal) ===== */
.faq { border-top: 0; }
.basic-page .faq summary { font-size: var(--fs-lead); }
.basic-page .faq details > :not(summary) { line-height: 1.55; }

/* ===== C61 | Home hero, desktop only: cream behind the copy column (photo still bleeds right); mobile/tablet stay white (2026-10-21, playground proposal) ===== */
@media (min-width: 64rem) {
  .hero.on-white { background: var(--color-bg-alt); }
}
/* C61b: hero second button = white fill + navy outline (the plain outline disappeared into the cream; Soft Sky fill read a little low/heavy); navy fill on hover like the ghost. All sizes so it doesn't change style between phone and desktop */
.hero__btns .btn--ghost {
  background: #fff;
  color: var(--color-primary);
  box-shadow: inset 0 0 0 1.5px var(--color-primary);
}
.hero__btns .btn--ghost:hover,
.hero__btns .btn--ghost:focus-visible {
  background: var(--color-primary);
  color: var(--color-bg-alt);
  transform: translateY(-2px);
}

/* C61c: rating eyebrow sits 5px further above the headline (8px -> 13px), all sizes */
.hero__copy > .display { margin-top: calc(0.5rem + 5px); }

/* C61d: desktop hero taller: photo box 3:2 instead of the photo's own 7:4 (~14% taller). The photo has no extra height, so this trims ~7% off each side; the products sit 15-83% across, so nothing is cut */
@media (min-width: 64rem) {
  .hero__media::before { padding-top: 66.67%; }
  .hero__media img { object-position: center bottom; }
}

/* ===== C62 | Review carousel arrows: out of the cards, a centered pair under the row (they sat over the first/last card's text on desktop). Same component on the Bundle PDP (2026-10-21, playground proposal) ===== */
@media (min-width: 48rem) {
  .review-carousel {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px 12px;
  }
  .review-carousel__track { flex: 0 0 100%; }
  .review-carousel__arrow,
  .review-carousel__arrow--prev,
  .review-carousel__arrow--next {
    position: static;
    transform: none;
    box-shadow: none;
  }
}

/* ===== C63 | Review carousel on phones: starts centered, one card peeking on each side (endless loop, so there's always a neighbor); row runs edge to edge past the gutter (2026-10-21, playground proposal) ===== */
@media (max-width: 47.99rem) {
  .review-carousel__track {
    margin-inline: calc(-1 * var(--gutter));
  }
  .review-carousel__track > .review {
    flex-basis: 80%;
    scroll-snap-align: center;
  }
}

/* ===== C64 | Home reviews, desktop: 20px more under the arrows (Bundle PDP's band-follow spacing left alone) (2026-10-21, playground proposal) ===== */
@media (min-width: 64rem) {
  .section.reviews:not(.tagline-band + .reviews) {
    padding-bottom: calc(var(--section-pad) + 20px);
  }
}
/* C64b: phones, 10px more under the reviews */
@media (max-width: 47.99rem) {
  .section.reviews:not(.tagline-band + .reviews) {
    padding-bottom: calc(var(--section-pad) + 10px);
  }
}

/* ===== C65 | Home hero, desktop: 20px more under the buttons and the section 20px taller. Copy gets 20px more bottom padding and the photo box 20px more height, so it works whichever column sets the height (2026-10-21, playground proposal) ===== */
@media (min-width: 64rem) {
  .hero__copy { padding-bottom: calc(3rem + 20px); }
  .hero__media::before { padding-top: calc(66.67% + 20px); }
}

/* ===== C66 | Create Account on the basic page template (white, 720px column, left title + intro with a Sign in link); fields in one column with logical pairs side by side on tablet+ (Password / Confirm, First / Last, Company / Phone, Country / State). DOM order unchanged, so tab order matches (2026-10-21, playground proposal) ===== */
.create-account-page .account.account--fixed { width: auto; max-width: none; margin: 0; padding: 0; border: 0; background: none; }
.create-account-page .account-body { width: auto; margin: 0; padding: 0; }
.create-account-page .form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin: 0;
}
.create-account-page .form-row > .form-field {
  width: auto;
  margin: 0;
  padding: 0;
}
.create-account-page .form-input,
.create-account-page select { width: 100%; }
@media (min-width: 48rem) {
  .create-account-page .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .create-account-page .form-row > .form-field { grid-column: 1 / -1; }
  .create-account-page .form-row > :is([data-type="Password"], [data-type="ConfirmPassword"], [data-type="FirstName"], [data-type="LastName"], [data-type="CompanyName"], [data-type="Phone"], [data-type="Country"], [data-type="State"], [data-type="Zip"]) {
    grid-column: auto;
  }
}
.create-account-page .g-recaptcha { margin-top: 32px; }
.create-account-page .form-actions { margin: 24px 0 0; text-align: left; }

/* ===== C67 | Sign In on the basic page template (same as Create Account / Contact): form full column width, Sign In button + "Forgot your password?" on one row; New Customer below on a hairline with a Fields subhead, navy checks and an outline Create Account button (2026-10-21, playground proposal) ===== */
.sign-in-page .login-form { display: grid; gap: 20px; max-width: none; margin: 0; }
.sign-in-page .login-form .form-field { margin: 0; }
.sign-in-page .login-form .form-input { width: 100%; }
.sign-in-page .login-form .form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin: 8px 0 0;
  text-align: left;
}
.sign-in-page .forgot-password {
  margin: 0;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sign-in-page .new-customer {
  display: grid;
  justify-items: start;
  gap: 12px;
  width: auto;
  margin: 0;
  padding-top: 56px;
  border-top: 1px solid rgba(0, 45, 91, 0.2);
}
.sign-in-page .new-customer__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-subhead);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-primary);
}
@media (max-width: 47.99rem) { .sign-in-page .new-customer__title { font-size: var(--fs-subhead); } }
.sign-in-page .new-customer-intro { margin: 0; font-size: var(--fs-body); line-height: 1.6; color: var(--color-text); }
.sign-in-page .new-customer-fact-list { display: grid; gap: 8px; margin: 4px 0 12px; padding: 0; list-style: none; }
.sign-in-page .new-customer-fact {
  position: relative;
  padding-left: 28px;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--color-text);
}
.sign-in-page .new-customer-fact::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23002d5b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* C67b: Cornerstone's .login wrapper margin (cream strip under the header), fixed 360px form and side paddings */
.login:has(.sign-in-page) { max-width: none; margin-block: 0; }
.sign-in-page .login-form { width: auto; padding: 0; }
.sign-in-page .login-form .form-actions > * { margin: 0; }
.sign-in-page .new-customer { padding-inline: 0; }
.sign-in-page .login-form .form-actions::before, .sign-in-page .login-form .form-actions::after { content: none; }

/* ===== C68 | Sign In + Create Account: intro -> Email Address 25% tighter (77px -> 58px), all sizes (2026-10-21, playground proposal) ===== */
:is(.sign-in-page, .create-account-page) .basic-page__body { padding-top: 26px; }

/* ===== C69 | Reset Password on the basic page template (same as Sign In / Create Account): h1 (stock page used an h2), one-line intro, full-width email, reCAPTCHA, Reset Password + "Back to Sign In" on one row (2026-10-21, playground proposal) ===== */
.reset-password-page .basic-page__body { padding-top: 26px; }
.reset-password-page .forgot-password-form { display: grid; justify-items: start; gap: 24px; max-width: none; margin: 0; }
.reset-password-page .form-field { width: 100%; margin: 0; }
.reset-password-page .form-input { width: 100%; }
.reset-password-page .form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin: 0;
}
.reset-password-page .form-actions::before,
.reset-password-page .form-actions::after { content: none; }
.reset-password-page .form-actions > * { margin: 0; }
.reset-password-page .back-to-sign-in {
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ===== C70 | Benefits band on phones: all 4 in one row, icons + labels scale with the screen, 15px more above and below (home + 3 PDPs) (2026-10-21, playground proposal) ===== */
@media (max-width: 47.99rem) {
  .benefits-band {
    padding-block: calc(var(--section-pad) * 0.75 + 15px);
  }
  .benefits-band .benefits__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
  }
  .benefits-band .benefit {
    row-gap: 0;
  }
  .benefits-band .benefit__icon--badge {
    width: clamp(3rem, 15vw, 4rem);
    height: clamp(3rem, 15vw, 4rem);
    margin-bottom: 0.375rem;
  }
  .benefits-band .benefit h3 {
    font-size: var(--fs-small);
    line-height: 1.3;
  }
}

/* ===== C71 | Cart (empty) on the basic page template (same as Sign In / Contact): left title + intro with the free shipping line, shop buttons in a row under the divider; old centered card (C08) off (2026-10-21, playground proposal) ===== */
.basic-page .cart-empty {
  display: block;
  max-width: none;
  margin: 0;
  padding-inline: 0;
  text-align: left;
  background: none;
  border-radius: 0;
}
.basic-page .cart-empty__links {
  justify-self: stretch;
  width: 100%;
  justify-content: flex-start;
  gap: calc(var(--space-xs) + 25px); /* 33px */
  margin: 0;
}
/* three equal choices: same outline button (keeps C71's padding from .basic-page__body: 45px above, 96px / 72px phones below) */
.basic-page .cart-empty__links .btn {
  min-width: 13rem;
}


/* ===== C72 | Dryer PDP cotton photos on phones: swipe instead of stack (photo 85% wide, the next one peeks, snaps, bleeds to the screen edge), 4:3 (2026-10-21, playground proposal) ===== */
@media (max-width: 47.99rem) {
  .seed-strip__photos--two {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 85%;
    overflow-x: auto;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
  }
  .seed-strip__photos--two img { aspect-ratio: 4 / 3; }
}

/* ===== C73 | FAQ +/-: Soft Sky circle off, plain drawn plus like the other accordions (Jay review 2026-10-21, playground proposal) ===== */
.faq summary::after { background: var(--acc-plus); border-radius: 0; width: 12px; height: 12px; }
.faq details[open] summary::after { background: var(--acc-minus); }

/* ===== C74 | Dryer PDP cotton section: one clean field photo (harvesters cropped out), full container width; the farmer + harvesters photo is off (Jay review 2026-10-21, playground proposal) ===== */
.seed-strip__photos--one { grid-template-columns: 1fr; }
.seed-strip__photos--one img { aspect-ratio: 2 / 1; object-position: 50% 40%; }
@media (min-width: 48rem) {
  .seed-strip__photos--one img { aspect-ratio: auto; height: clamp(18rem, 30vw, 25rem); }
}
@media (max-width: 47.99rem) {
  .seed-strip__photos--one { grid-auto-flow: row; overflow: visible; margin-inline: 0; padding-inline: 0; }
  .seed-strip__photos--one img { aspect-ratio: 3 / 2; }
}


/* ===== C75 | PDP round 3 (dryer, Buds, Bundle): benefit tiles out of the buy box into their own row under the product; Ingredients is one accordion level (caps group labels + one-line ingredients, Free of, link to the Ingredients page); one type scale for the buy box accordions (2026-10-21, playground proposal) ===== */
/* Benefits row: 4 across on desktop, 2x2 on phones, no accordions */
.pdp-benefit-row__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pdp-benefit {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.pdp-benefit img { width: 40px; height: 40px; object-fit: contain; }
.pdp-benefit__title {
  margin: 12px 0 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);   /* 16 */
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-primary);
}
.pdp-benefit__text {
  margin: 4px 0 0;
  max-width: 16rem;
  font-family: var(--font-body);
  font-size: var(--fs-ui);     /* 15 */
  font-weight: 400;
  line-height: 1.45;
  color: var(--color-primary);
}
@media (max-width: 47.99rem) {
  .pdp-benefit-row__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
}
/* the Buds trio art carries wide padding (C51 scaled it up in the tiles) */
.pdp-benefit img[src*="icon-hypoallergenic"],
.pdp-benefit img[src*="icon-no-nasties"],
.pdp-benefit img[src*="icon-cruelty-free-vegan"] { transform: scale(1.4); }

/* Accordion type scale: title 18 bold; inside the panel, labels 12 caps and body 15 */
.buy-box__accordion > summary { font-size: var(--fs-lead); font-weight: 700; }
.buy-box__accordion > p,
.buy-box__accordion .buy-box__list,
.buy-box__accordion .buy-box__list li { font-size: var(--fs-ui); }
/* panel bottom ~24px on every accordion (was 40, Ingredients ~80) */
details.buy-box__accordion > :last-child:not(summary) { padding-bottom: 24px; }

/* Ingredients panel */
.buy-box__ingr--list .ingr-group + .ingr-group { margin-top: 16px; }
.buy-box__ingr .ingr-group__label {
  margin: 0 0 6px;
  font-family: var(--font-body);
  font-size: var(--fs-xs);     /* 12 */
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.ingr-group__note { font-weight: 400; letter-spacing: 0; text-transform: none; }
.ingr-group__list { margin: 0; padding: 0; list-style: none; }
.ingr-group__list li,
.buy-box__ingr .ingr-group__text {
  margin: 0;
  font-size: var(--fs-ui);     /* 15 */
  line-height: 1.4;
  color: var(--color-primary);
}
.ingr-group__list li + li { margin-top: 4px; }
.buy-box__ingr--list .buy-box__ingr-link { display: inline-block; margin-top: 20px; }
/* Benefits row as a cream band with its own tight padding (full section padding on white stacked under the product's bottom space and read as one long gap) */
.pdp-benefit-row { padding-block: 56px; }
@media (max-width: 47.99rem) {
  .pdp-benefit-row { padding-block: 40px; }
}

/* ===== C76 | Home + 3 PDPs: "Grown from the earth" benefits band on navy, one component everywhere (home: moved from above the waste band to between FAQ and email so two navy bands never stack). The badge art is a navy disc with gold marks, so on navy the disc gets a faint cream ring to hold its shape (2026-10-21, playground proposal) ===== */
.on-dark.benefits-band .benefits-band__statement,
.on-dark.benefits-band .benefit h3 { color: inherit; }


/* ===== C77 | Home hero, desktop: the copy sits centered in the cream panel instead of on the container line (it was hugging the photo: ~200px of cream on its left, 48px on its right). The cream column is the old left padding + copy + gap, so the photo keeps the same width, height and crop (2026-10-21, playground proposal) ===== */
@media (min-width: 64rem) {
  .hero__inner {
    grid-template-columns: calc(max(var(--gutter), (100vw - var(--max-width)) / 2 + var(--gutter)) + (min(100vw, var(--max-width)) - 2 * var(--gutter)) * 0.4 + 3rem) minmax(0, 1fr);
    gap: 0;
    padding-left: 0;
  }
  .hero__copy {
    width: 100%;
    max-width: calc((min(100vw, var(--max-width)) - 2 * var(--gutter)) * 0.4);
    margin-inline: auto;
  }
}

/* ===== C78 | Header logo on phones: 26px -> 39px tall (50% bigger; was reading tiny next to the Cart pill) (2026-10-21, playground proposal) ===== */
@media (max-width: 47.99rem) {
  .logo { height: 2.4375rem; }
}

/* ===== C79 | Benefit row on phones: one column of left-aligned rows (icon left, title + line beside it) instead of a centered 2x2; half-width centered columns wrapped every title and left the lines ragged (2026-10-21, playground proposal) ===== */
@media (max-width: 47.99rem) {
  .pdp-benefit-row__list { grid-template-columns: 1fr; gap: 20px; }
  .pdp-benefit {
    display: grid;
    grid-template-columns: 40px 1fr;
    column-gap: 16px;
    align-items: start;
    text-align: left;
  }
  .pdp-benefit img { grid-row: 1 / span 2; }
  .pdp-benefit__title { margin-top: 0; align-self: end; }
  .pdp-benefit__text { max-width: none; margin-top: 2px; }
}

/* ===== C80 | Ingredients panel with icons (Jay 10/21): each ingredient is a row, 40px icon tile + name (15 bold) over its job (14); still one accordion level, group labels in 12 caps; no "full breakdown" link. Buds has no ingredient art, so its rows are text only. Scent tiles keep the Soft Sky tint (2026-10-21, playground proposal) ===== */
.buy-box__ingr--list .ingr-group + .ingr-group { margin-top: 20px; }
.buy-box__ingr .ingr-group__label { margin-bottom: 10px; }
.ingr-group__list li + li { margin-top: 10px; }
.ingr-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
}
.ingr-row--text { grid-template-columns: minmax(0, 1fr); }
.ingr-row__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0.5px solid var(--color-primary);
  border-radius: 8px;
  background: var(--color-bg-alt);
}
.ingr-group--scent .ingr-row__icon { background: var(--color-accent); }
.ingr-row__icon img { width: 30px; height: 30px; object-fit: contain; }
.ingr-row__text { display: grid; gap: 1px; min-width: 0; }
.ingr-row__name {
  font-size: var(--fs-ui);       /* 15 */
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-primary);
}
.ingr-row__for {
  font-size: 0.875rem;           /* 14 */
  font-weight: 400;
  line-height: 1.35;
  color: var(--color-primary);
}

/* ===== C81 | Bundle Ingredients: one entry per product (name, one-line summary, "See ingredients" to its section on the Ingredients page) instead of every ingredient; scales as SKUs are added (2026-10-21, playground proposal) ===== */
.ingr-products li + li {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}
.ingr-row__link {
  justify-self: start;
  margin-top: 6px;
  font-size: var(--fs-ui);
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ingr-row__link:hover { text-decoration-thickness: 2px; }

/* ===== C82 | Benefits band on navy (home + 3 PDPs): Sunshine glyphs straight on the navy, no disc or ring (C76 ring removed); glyph files cropped so all four match; 60px desktop / 48px phones, 16px to the label; labels cream, regular (2026-10-21, playground proposal) ===== */
.on-dark.benefits-band .benefit__icon--badge {
  width: 60px;
  height: 60px;
  margin: 0 auto 16px;
}
.on-dark.benefits-band .benefit__icon--badge img { width: 100%; height: 100%; object-fit: contain; }
.on-dark.benefits-band .benefit { row-gap: 0; }
.on-dark.benefits-band .benefit h3 { font-weight: 400; color: var(--color-bg-alt); }
@media (max-width: 47.99rem) {
  .on-dark.benefits-band .benefit__icon--badge { width: 48px; height: 48px; margin-bottom: 12px; }
}

/* ===== C83 | Bundle tagline band: the three sentences rise in one after another (0.5s each, 180ms apart) the first time the band scrolls into view; stagger.js arms it, so no JS or reduced motion just shows the line (2026-10-21, playground proposal) ===== */
[data-stagger-armed] > span {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
[data-stagger-armed].is-in > span { opacity: 1; transform: none; }
[data-stagger-armed].is-in > span:nth-child(2) { transition-delay: 0.18s; }
[data-stagger-armed].is-in > span:nth-child(3) { transition-delay: 0.36s; }

/* ===== C84 | QA pass fixes: (a) desktop PDPs, the product section's 96px bottom padding + the row's own padding read as one long white gap under the buy box (120px accordion to cream); 48px now, so it's 72px like phones. (b) Navy benefits band on phones: 2x2 instead of 4 across (C70) now the discs are gone; at 4 across "Made for what matters most." broke into 4 lines (2026-10-21, playground proposal) ===== */
@media (min-width: 48rem) {
  section.container.product { padding-bottom: 48px; }
}
@media (max-width: 47.99rem) {
  .on-dark.benefits-band .benefits__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 16px;
  }
  .on-dark.benefits-band .benefit h3 { font-size: var(--fs-ui); }
}

/* ===== C85 | About: Tom video placeholder removed (Tim 10/21: old language, no video; About redesign is post-launch). The cream section gets its bottom padding back (it was 0 so the video sat flush) (2026-10-21, playground proposal) ===== */
.about-ee { padding-bottom: var(--section-pad); }

/* ===== C86 | Quantity tiers (dryer + Buds buy box): the stepper and the empty BigCommerce bulk-pricing block become one picklist, 5 rows (1-5 boxes/bags), total on the right with the per-box price under it, a Soft Sky "Save 10%" pill on the multi-packs; picked row gets a navy rule + cream. Prices are the live site's (Jay 10/21, playground proposal) ===== */
.qty-tiers { min-width: 0; margin: 0; padding: 0; border: 0; }
.qty-tiers > legend { float: none; width: auto; padding: 0; }
.qty-tiers__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.qty-tiers__radio { position: absolute; opacity: 0; width: 1px; height: 1px; }
.qty-tiers__opt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  min-height: 52px;
  padding: 8px 14px;
  border: 1px solid var(--color-rule);
  border-radius: 10px;
  background: var(--color-bg);
  font-family: var(--font-body);
  font-size: var(--fs-ui);
  line-height: 1.25;
  color: var(--color-primary);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.qty-tiers__opt:hover { border-color: var(--color-primary); }
.qty-tiers__left { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.qty-tiers__qty { font-weight: 700; }
.qty-tiers__save {
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.qty-tiers__right { display: grid; justify-items: end; gap: 1px; text-align: right; }
.qty-tiers__total { font-weight: 700; }
.qty-tiers__each { font-size: var(--fs-meta); color: var(--color-text-muted); }
.qty-tiers__radio:checked + .qty-tiers__opt {
  border-color: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--color-primary);
  background: var(--color-bg-alt);
}
.qty-tiers__radio:focus-visible + .qty-tiers__opt { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ===== C87 | About: three new sections between the Everyone's Earth intro and the shop band. "We show our work" (white: three proof figures + cotton partner logos), the navy "Grown from the earth" band (same component as home + PDPs), and a founder block (cream: Tom-as-a-kid photo, his quote, one line on why). Order stays navy / cream / white / navy / cream / white (2026-10-21, playground proposal) ===== */
.about-proof__lede {
  max-width: 36rem;
  margin: 0.75rem auto 0;
  font-size: var(--fs-lead);
  line-height: 1.5;
  text-align: center;
  text-wrap: pretty;
}
.about-proof__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 40px;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
.about-proof__num {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: 1;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}
.about-proof__num small { font-size: 0.5em; }
.about-proof__num--code { font-size: var(--fs-heading); letter-spacing: 0.02em; }
.about-proof__title {
  margin: 12px 0 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-primary);
}
.about-proof__text {
  max-width: 20rem;
  margin: 6px auto 0;
  font-size: var(--fs-ui);
  line-height: 1.5;
  color: var(--color-primary);
}
.about-proof__partners { justify-content: center; margin-top: var(--space-lg); }
@media (max-width: 47.99rem) {
  .about-proof__grid { grid-template-columns: 1fr; gap: 28px; }
}

.about-founder__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px;
  align-items: center;
}
.about-founder__media { margin: 0; }
.about-founder__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}
.about-founder__caption {
  margin: 10px 0 0;
  font-size: var(--fs-meta);
  color: var(--color-text-muted);
  text-align: center;
}
.about-founder .heading { margin: 0; }
.about-founder__quote {
  margin: 20px 0 0;
  padding: 0;
  border: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-subhead);
  line-height: 1.35;
  color: var(--color-primary);
  text-wrap: pretty;
}
.about-founder__name {
  margin: 14px 0 0;
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.about-founder__text {
  max-width: 34rem;
  margin: 20px 0 0;
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--color-text);
}
@media (max-width: 47.99rem) {
  .about-founder__grid { grid-template-columns: 1fr; gap: 28px; }
  .about-founder__media { max-width: 22rem; margin-inline: auto; }
}
/* all three figures share one line box, so the titles under them line up even though "ASTM D6400" is set smaller */
.about-proof__num { display: flex; align-items: flex-end; justify-content: center; min-height: var(--fs-display); }
/* 20px more between the Scent picker and Quantity */
.buy-form .qty-tiers { margin-top: 20px; }

/* ===== C88 | About rethink (Jake 10/22): hero lead trimmed, intro is laundry only, "We show our work" becomes a seed-to-compost timeline (4 steps, disc icons, a fact under each) and replaces both the three proof figures ("3 ingredients" was wrong: the sheet lists 15) and the navy band (same 4 icons twice). Founder block: eyebrow + new heading, story before the quote, caption in white over the photo, bottom left. Order now dark hero / cream / white / cream / white (2026-10-22, playground proposal) ===== */
.about-life__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
/* thin navy line running through the icon centers */
.about-life__steps::before {
  content: "";
  position: absolute;
  top: 36px;
  left: 12.5%;
  right: 12.5%;
  height: 1px;
  background: var(--color-primary);
  opacity: 0.25;
}
.about-life__step { position: relative; text-align: center; }
.about-life__icon {
  position: relative;
  display: block;
  width: 72px;
  height: 72px;
  margin: 0 auto;
  background: var(--color-bg, #fff);
  border-radius: 50%;
  box-shadow: 0 0 0 10px var(--color-bg, #fff);
}
.about-life__label { margin: 20px 0 0; color: var(--color-text-muted); }
.about-life__title {
  margin: 6px 0 0;
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-primary);
}
.about-life__text {
  max-width: 17rem;
  margin: 8px auto 0;
  font-size: var(--fs-ui);
  line-height: 1.55;
  color: var(--color-primary);
  text-wrap: pretty;
}
.about-life .about-proof__partners { margin-top: 56px; }
.about-life__cta { justify-content: center; margin-top: 32px; }
@media (max-width: 63.99rem) {
  .about-life__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
  .about-life__steps::before { display: none; }
}
/* phones: a vertical timeline, icon left, line running down through the icons */
@media (max-width: 47.99rem) {
  .about-life__steps { grid-template-columns: 1fr; gap: 28px; }
  .about-life__steps::before { display: block; top: 28px; bottom: 28px; left: 27px; right: auto; width: 1px; height: auto; }
  .about-life__step { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start; text-align: left; }
  .about-life__icon { width: 56px; height: 56px; margin: 0; box-shadow: 0 0 0 6px var(--color-bg, #fff); }
  .about-life__label { margin-top: 2px; }
  .about-life__text { max-width: none; margin-left: 0; }
}

/* Founder: caption over the photo, white, bottom left, on a soft dark fade */
.about-founder__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; }
.about-founder__media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 40%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
  pointer-events: none;
}
.about-founder__caption {
  position: absolute;
  left: 20px;
  bottom: 18px;
  z-index: 1;
  margin: 0;
  font-size: var(--fs-small);
  font-weight: 700;
  color: #fff;
  text-align: left;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.about-founder__eyebrow { margin: 0 0 10px; color: var(--color-text-muted); }
.about-founder__text { margin-top: 16px; }
.about-founder__quote {
  margin-top: 28px;
  padding-left: 20px;
  border-left: 3px solid var(--color-primary);
  font-size: var(--fs-title);
}

/* ===== C89 | PDP round 4 (dryer, Buds, Bundle). Quantity tiers (dryer + Buds; Bundle has none): the save pill drops the Soft Sky fill (read as "scented only") for a navy 1px outline on no fill, Demi instead of Bold; 13px from the box count (was 8); hierarchy is box count 16 bold > total 15 bold > pill 12. Benefit row: "Why you'll love them" title, the white gap above the cream cut (product bottom 24px), more padding inside the band. Phone layout option behind ?benefits=swipe: white cards, 78% wide, swipe like the cotton photos (2026-10-21, playground proposal) ===== */
.qty-tiers__left { gap: 8px 13px; }
.qty-tiers__qty { font-size: var(--fs-body); }
.qty-tiers__save {
  padding: 1px 8px;
  border: 1px solid var(--color-primary);
  background: transparent;
  font-weight: 600;
  line-height: 1.4;
}

/* Benefit row: its own section, not a tail on the accordions */
section.container.product { padding-bottom: 24px; }
.pdp-benefit-row { padding-block: 72px; }
.pdp-benefit-row__head { margin-bottom: 40px; }
@media (max-width: 47.99rem) {
  section.container.product { padding-bottom: 8px; }
  .pdp-benefit-row { padding-block: 56px; }
  /* list is left aligned on phones, so the title is too */
  .pdp-benefit-row__head { justify-items: start; margin-bottom: 28px; text-align: left; }
  .pdp-benefit-row__list { gap: 24px; }
}

/* Option (phones, ?benefits=swipe): one row of white cards, the next one peeks */
@media (max-width: 47.99rem) {
  .pdp-benefit-row--swipe .pdp-benefit-row__list {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .pdp-benefit-row--swipe .pdp-benefit-row__list::-webkit-scrollbar { display: none; }
  .pdp-benefit-row--swipe .pdp-benefit {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    scroll-snap-align: start;
  }
  .pdp-benefit-row--swipe .pdp-benefit__title { margin-top: 14px; }
  .pdp-benefit-row--swipe .pdp-benefit__text { margin-top: 4px; }
}

/* ===== C90 | PDP prices (Jay 10/27): sale price as on the Shopify site, a crossed-off "was" price before the price, no MSRP / Was: / Now: / (You save) rows from Cornerstone (Bundle sale price $41.60 from $52.00). Quantity tiers: total + crossed-off full-price total, "You save $x" under it in place of the per-box price ===== */
.buy-box .productView-price .rrp-price--withoutTax,
.buy-box .productView-price .rrp-price--withTax,
.buy-box .productView-price .price-section--saving,
.buy-box .productView-price .price-now-label,
.buy-box .productView-price .non-sale-price--withoutTax > span:first-child,
.buy-box .productView-price .non-sale-price--withTax > span:first-child { display: none !important; }
.buy-box .productView-price .price--non-sale {
  margin-right: 10px;
  color: var(--color-text-muted);
  font-weight: 400;
  text-decoration: line-through;
}
.qty-tiers__prices { display: flex; align-items: baseline; gap: 8px; }
.qty-tiers__was { font-size: var(--fs-small); color: var(--color-text-muted); }
.qty-tiers__saved { font-size: var(--fs-meta); color: var(--color-text-muted); }

/* ===== C91 | PDP thumbnails (Jake 10/28, preference): the product photos have rounded corners baked in, but Cornerstone's thumbnail border is square, so a rounded photo sat in a square frame. The border now takes the photos' rounding (8px), and the photo inside is rounded to match (8px less the 1px border + 2px padding) so square-cornered photos (the white pouch shots) read the same. Dryer, Buds, Bundle ===== */
.product .productView-thumbnail-link {
  border-radius: var(--radius-md);
}
.product .productView-thumbnails img {
  border-radius: calc(var(--radius-md) - 3px);
}

/* ===== C92 | PDP "Why you'll love them" (Jake 10/28, preference): the heading takes the full section-heading size like the other PDP sections (pdp-benefit-row.html drops heading--sm; was --fs-subhead). Desktop icons 10% bigger (40 -> 44px; phones stay 40). The Buds snowflake's art fills only ~69% of its box, so it read smaller than the others; scaled up to match. Dryer, Buds, Bundle ===== */
@media (min-width: 48rem) {
  .pdp-benefit img { width: 44px; height: 44px; }
}
.pdp-benefit img[src*="icon-buds-any-temp"] { transform: scale(1.45); }

/* ===== C93 | Ingredients page +/- (Jake 10/28): the product toggles kept the Soft Sky circle after C73 took it off the FAQ, so they now match every other accordion: plain drawn plus/minus, 12px, no circle ===== */
.ingr-product__icon {
  width: 12px;
  height: 12px;
  border-radius: 0;
  background: var(--acc-plus);
}
.ingr-product[open] .ingr-product__icon { background: var(--acc-minus); }

/* ===== C94 | "Why you'll love them" spacing (Jake 10/28): the base h2 margin (36px) sat on top of the band's 72px padding, so the gap above the heading was 108 against 72 under the text. Heading margin zeroed like the other section heads, and the band tightened: 64 above and below (phones 48), 36 between heading and icons (phones 24) ===== */
.pdp-benefit-row .heading { margin: 0; }
.pdp-benefit-row { padding-block: 64px; }
.pdp-benefit-row__head { margin-bottom: 36px; }
@media (max-width: 47.99rem) {
  .pdp-benefit-row { padding-block: 48px; }
  .pdp-benefit-row__head { margin-bottom: 24px; }
}