/* ==========================================================================
   ds.css — Leif List design system (2026-10-20)
   --------------------------------------------------------------------------
   Loaded LAST on every page (build/site-chrome.js keeps the <link> in place),
   so these rules win over the older per-page stylesheets. One definition of:
     1. tokens (and the old token names, remapped onto them)
     2. type scale
     3. rating badge         .product-score-pill / .ds-badge
     4. chip                 .ds-chip (+ the legacy chip classes)
     5. card                 .ds-card (+ the legacy card classes)
     6. page headers         .ds-band (browse) / .ds-readhead (read)
     7. accordion            .ds-accordion
     8. readable text        .ds-prose
     9. "On this page"       .ds-toc
    10. scroll reveal        (only animates under html.js; never hides content)
    11. header extras        Shop menu, icon buttons
   Colour comes ONLY from the tokens in section 1.
   ========================================================================== */

/* ---- 1. Tokens ---------------------------------------------------------- */
:root {
  --navy:    #16304D;
  --mustard: #F2C46D;
  --cream:   #F6F4EF;
  --ink:     #26241F;
  --muted:   #5E594F;
  --line:    #E4DED2;
  --well:    #F1ECE2;   /* photo well behind product images */
  --planet:  #2F6B45;
  --people:  #B5532F;
  --white:   #FFFFFF;
  --sky:     #E7EFF8;   /* pale blue: icon tiles, tinted bands */

  --navy-hover:    color-mix(in srgb, var(--navy) 86%, #000);
  --mustard-hover: color-mix(in srgb, var(--mustard) 88%, #000);
  --on-navy:       var(--cream);
  --on-navy-soft:  color-mix(in srgb, var(--cream) 78%, var(--navy));

  /* Rating badge */
  --tier-excellent: #1F5C3A;
  --tier-great:     #3E7D4F;
  --tier-good:      #2A6E6C;
  --tier-fair:      #8A5A10;
  --tier-poor:      #A63D2A;
  --tier-pending:   #E9E5DC;

  --radius-card: 16px;
  --radius-chip: 999px;
  --shadow-card: 0 1px 2px rgba(38, 36, 31, .05), 0 6px 18px rgba(38, 36, 31, .06);
  --shadow-card-hover: 0 2px 4px rgba(38, 36, 31, .06), 0 10px 26px rgba(38, 36, 31, .09);

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans:    "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* ---- Old names → the palette above. Older stylesheets keep working but
          can only reach these colours. Remove a line once nothing uses it. */
  --leif-canvas: var(--cream);
  --leif-surface: var(--white);
  --leif-text: var(--ink);
  --leif-text-secondary: var(--muted);
  --leif-text-muted: var(--muted);
  --leif-border: var(--line);
  --leif-score-green: var(--planet);
  --leif-score-green-tint: var(--well);
  --leif-action-clay: var(--navy);
  --leif-action-clay-dark: var(--navy);
  --leif-action-clay-tint: var(--well);
  --leif-action-blue: var(--navy);
  --leif-action-blue-dark: var(--navy-hover);
  --leif-ink: var(--navy);
  --leif-green-deep: var(--navy);
  --leif-cream: var(--well);
  --leif-ann-ink: var(--ink);
  --leif-gold: var(--mustard);
  --leif-gold-dark: var(--mustard-hover);
  --hero-eyebrow: var(--mustard);
  --hero-heading: var(--cream);
  --hero-subtext: var(--on-navy-soft);
  --hero-label: var(--on-navy-soft);
  --hero-decor: color-mix(in srgb, var(--navy) 80%, var(--white));
  --leif-search-bg: var(--white);
  --leif-search-border: var(--line);
  --leif-search-border-hover: var(--muted);
  --leif-search-border-focus: var(--navy);
  --leif-search-ring: color-mix(in srgb, var(--navy) 18%, transparent);
  --ed-box-border: var(--line);
  --ed-box-shadow: var(--shadow-card);
  --ed-tile-bg: var(--sky);
  --ed-tile-ink: var(--navy);
  --ed-tile-border: var(--line);
  --bg-page: var(--cream);
  --card-bg: var(--white);
  --card-border: var(--line);
  --text-primary: var(--ink);
  --text-secondary: var(--muted);
  --text-muted: var(--muted);
  --header-bg: var(--navy);
  --accent: var(--navy);
  --accent-light: var(--navy);
  --brand-green: var(--planet);
  --brand-dark: var(--navy);
  --brand-sage: var(--planet);
  --brand-100: var(--well);
  --border-color: var(--line);
  --env: var(--planet);
  --lab: var(--people);
  --sl-forest: var(--planet);
  --sl-muted: var(--muted);
  --sl-hairline: var(--line);
  --sl-navy-dark: var(--navy-hover);
  /* Collection tints are gone: every collection card is white. */
  --hp-tint-green: var(--white); --hp-tint-green-ink: var(--navy);
  --hp-tint-peach: var(--white); --hp-tint-peach-ink: var(--navy);
  --hp-tint-sand:  var(--white); --hp-tint-sand-ink:  var(--navy);
  --hp-tint-sky:   var(--white); --hp-tint-sky-ink:   var(--navy);
  /* Value chips: one look; meaning comes from the planet/people dot. */
  --value-organic-fg: var(--ink);      --value-organic-bg: var(--well);
  --value-cruelty-free-fg: var(--ink); --value-cruelty-free-bg: var(--well);
  --value-non-toxic-fg: var(--ink);    --value-non-toxic-bg: var(--well);
  --value-bpa-free-fg: var(--ink);     --value-bpa-free-bg: var(--well);
  --value-fair-trade-fg: var(--ink);   --value-fair-trade-bg: var(--well);
  --value-vegan-fg: var(--ink);        --value-vegan-bg: var(--well);
  --value-recyclable-fg: var(--ink);   --value-recyclable-bg: var(--well);
  --value-non-gmo-fg: var(--ink);      --value-non-gmo-bg: var(--well);
  --value-b-corp-fg: var(--ink);       --value-b-corp-bg: var(--well);
}

body { background: var(--cream); color: var(--ink); font-family: var(--font-sans); }

/* ---- 2. Type ------------------------------------------------------------ */
h1, h2, h3,
.section-title, .home-hero-title, .hp-banner-title, .page-title-section h1 {
  font-family: var(--font-display);
}
h1, .ds-h1 { font-size: clamp(2.25rem, 4vw, 3.5rem); line-height: 1.08; letter-spacing: -0.01em; }
h2, .ds-h2 { font-size: clamp(1.625rem, 2.5vw, 2.125rem); line-height: 1.15; letter-spacing: -0.005em; }
/* Section titles that are h2s keep the scale, not the old 22px. */
.featured-brands-section .section-title,
.top-products-header .section-title,
.hp-section .section-title { font-size: clamp(1.625rem, 2.5vw, 2.125rem); }

/* ---- 3. Rating badge -----------------------------------------------------
   Sentence case ("Excellent"), a leaf mark and an info tooltip, one solid
   colour per tier. No "est.", no glow, no dot, no LIKELY prefix. */
.product-score-pill,
.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 0;
  border-radius: var(--radius-chip);
  background: var(--tier-pending);
  color: var(--ink);
  box-shadow: none;
  backdrop-filter: none;
  opacity: 1;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  /* In normal flow by default; only a badge on a product photo floats. */
  position: static;
}
/* Two classes so the tier colour beats per-page pill backgrounds such as
   supplier.css's black `.product-card .product-score-pill`. */
.product-score-pill.product-score-pill--likely_excellent, .ds-badge--excellent { background: var(--tier-excellent); color: var(--white); }
.product-score-pill.product-score-pill--likely_great,     .ds-badge--great     { background: var(--tier-great);     color: var(--white); }
.product-score-pill.product-score-pill--likely_good,      .ds-badge--good      { background: var(--tier-good);      color: var(--white); }
.product-score-pill.product-score-pill--likely_fair,      .ds-badge--fair      { background: var(--tier-fair);      color: var(--white); }
.product-score-pill.product-score-pill--likely_poor,
.product-score-pill.product-score-pill--likely_very_bad,  .ds-badge--poor      { background: var(--tier-poor);      color: var(--white); }
.product-score-pill.product-score-pill--pending,          .ds-badge--pending   { background: var(--tier-pending);   color: var(--ink); }
/* Kill every old variant's glow, dash and gradient. */
.product-score-pill--likely_excellent,
.product-score-pill--likely_great,
.product-score-pill--estimate,
.product-score-pill--pending,
.product-score-pill--estimate.product-score-pill--likely_excellent,
.product-score-pill--estimate.product-score-pill--likely_great { box-shadow: none; border: 0; }
.score-pill-dot, .score-pill-sep, .score-pill-star { display: none; }
.score-pill-word { font-weight: 700; }
/* Leif Rating badge (2026-10-23): leaf mark + word + info icon, one button
   inside the class-carrying wrapper (utils/publishedTier.js, build/badge.js).
   The wrapper's padding moves onto the button so the whole pill is the
   target; the tooltip is utils/leif-badge.js. */
.product-score-pill.leif-badge { padding: 0; gap: 0; }
.leif-badge-body {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 24px; padding: 3px 8px 3px 7px; margin: 0;
  border: 0; border-radius: inherit; background: none; color: inherit;
  font: inherit; line-height: inherit; letter-spacing: inherit; cursor: help;
}
button.leif-badge-body:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; box-shadow: 0 0 0 4px var(--white); }
/* Leaf mark and info icon: CSS masks over currentColor, so each badge is a
   few bytes of markup (60 badges on a brand page). */
.leif-badge-leaf, .leif-badge-info { display: inline-block; flex: none; background: currentColor; -webkit-mask: var(--leif-icon) center / contain no-repeat; mask: var(--leif-icon) center / contain no-repeat; }
.leif-badge-leaf { width: 11px; height: 11px; --leif-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.5 2.5C7 2.5 3 5.5 3 10c0 1.2.4 2.3 1 3.1l-1.4 1.4.7.7 1.4-1.4c.8.6 1.9 1 3.1 1 4.5 0 6.7-4 5.7-12.3zM5.6 11.7c1.3-2.5 3.3-4.4 5.6-5.6-1.9 1.6-3.6 3.4-4.8 6.4z'/%3E%3C/svg%3E"); }
.leif-badge-info { width: 12px; height: 12px; opacity: .85; --leif-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.6' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Cpath d='M8 7v4.2' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='4.9' r='1'/%3E%3C/svg%3E"); }
.leif-badge-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.leif-badge-tip {
  position: fixed; z-index: 10000; max-width: 260px; padding: 8px 11px;
  border-radius: 8px; background: var(--ink); color: var(--white);
  font: 500 13px/1.4 var(--font-sans); box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  pointer-events: none;
}
.leif-badge-tip[hidden] { display: none; }
/* Old markup still in a static file until it's regenerated: show it in
   sentence case at least. */
.score-pill-label { font-size: inherit; letter-spacing: 0; text-transform: none; opacity: 1; }
/* On a product photo the badge sits top-left on the image. */
.product-image-wrap .product-score-pill { position: absolute; top: 10px; left: 10px; bottom: auto; right: auto; z-index: 5; backdrop-filter: none; }
/* Supplier page: replacement cards keep the badge on the photo, bottom-left,
   and the header pill drops supplier.css's fixed 34px height. */
.suggested-image-wrap .product-score-pill { position: absolute; top: auto; bottom: 8px; left: 8px; right: auto; z-index: 5; }
.header-tier-pill.product-score-pill { height: auto; min-width: 0; align-self: center; }

/* Sub-score row (Environment / Labor / Compliance), the brand page's design,
   reusable: <ul class="ds-subscores"><li class="ds-subscore">… */
.ds-subscores { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ds-subscore {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--radius-chip);
  background: var(--white); font-size: 13.5px; color: var(--ink);
}
.ds-subscore strong { font-weight: 700; }

/* ---- 4. Chip ------------------------------------------------------------
   default / hover = navy border / selected = navy fill, optional count.
   Value chips carry a planet or people dot and no other colour. */
.ds-chip,
.value-bar-chip,
.hp-chip,
.values-nav-link,
.related-chip,
.sl-pill,
.category .filter-chip,
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 6px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-chip);
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none;
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease, color .12s ease;
}
.ds-chip:hover, .value-bar-chip:hover, .hp-chip:hover, .values-nav-link:hover,
.related-chip:hover, .sl-pill:hover, .filter-chip:hover {
  border-color: var(--navy);
  background: var(--white);
  color: var(--ink);
  transform: none;
}
.ds-chip[aria-pressed="true"], .ds-chip.is-selected, .ds-chip[aria-current],
.hp-chip[aria-pressed="true"],
.values-nav-link.active, .values-nav-link[aria-current],
.filter-chip.active, .filter-chip[aria-pressed="true"], .filter-chip.selected,
.sl-pill.is-active, .sl-pill[aria-pressed="true"] {
  border-color: var(--navy);
  background: var(--navy);
  color: var(--white);
}
.ds-chip:focus-visible, .value-bar-chip:focus-visible, .hp-chip:focus-visible,
.values-nav-link:focus-visible, .filter-chip:focus-visible, .sl-pill:focus-visible {
  outline: 2px solid var(--navy); outline-offset: 2px;
}
.ds-chip-count, .hp-chip span, .filter-chip .chip-count {
  font-weight: 500; opacity: .7;
}
/* Planet / people dot: value chips only. */
.ds-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--planet); }
.ds-dot--people { background: var(--people); }
.value-bar-chip .value-bar-icon,
.values-nav-link .value-bar-icon { display: none; }
.value-bar-chip::before,
.values-nav-link::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--planet);
}
.value-tone--fair-trade.value-bar-chip::before, .value-tone--b-corp.value-bar-chip::before,
.value-tone--fair-trade.values-nav-link::before, .value-tone--b-corp.values-nav-link::before { background: var(--people); }
/* Subcategory chips: drop the photo circle so every chip is the same chip. */
.filter-chip .chip-circle { display: none; }

/* ---- 5. Card ------------------------------------------------------------
   White, 1px border, 16px radius, soft shadow. The navy offset ("pop") look
   is used only by the collection cards, Shop Local card and guide callouts
   (section 13). */
.ds-card,
.product-card,
.featured-brand-card,
.ed-theme .featured-brands-section--pop .featured-brand-card,
.score-step,
.ed-theme .featured-brands-section--pop .score-step,
.guide-card,
.faq-card,
.hp-col-card,
.hp-brand-card,
.hp-partner-card,
.hp-partners-strip,
.home-local-card,
.guide-callout,
.content-card,
.callout {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.featured-brand-card:hover,
.ed-theme .featured-brands-section--pop .featured-brand-card:hover,
.hp-col-card:hover, .hp-partners-strip:hover, .guide-card:hover {
  border-color: var(--navy);
  box-shadow: var(--shadow-card-hover);
  transform: none;
}
.hp-col-card, .hp-col-card .hp-col-title, .hp-col-card .hp-link, .hp-col-card .hp-eyebrow, .hp-col-card .hp-col-count { color: var(--navy); }
.product-card .product-image-wrap { background: var(--white); }

/* ---- 6. Page headers ----------------------------------------------------
   Browse: navy band, mustard eyebrow, Fraunces H1, short intro, chips below.
   Read:   cream header, eyebrow, H1, intro, optional byline/date.          */
.ds-band { background: var(--navy); color: var(--on-navy); }
.ds-band-inner { max-width: 1240px; margin: 0 auto; padding: clamp(28px, 5vw, 56px) clamp(16px, 4vw, 40px) clamp(24px, 4vw, 40px); }
.ds-eyebrow, .ds-band .ds-eyebrow {
  display: block; margin: 0 0 10px;
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--mustard);
}
.ds-readhead .ds-eyebrow { color: var(--people); }
.ds-band h1, .ds-band .ds-h1 { margin: 0 0 10px; color: var(--on-navy); font-weight: 600; }
.ds-band .ds-intro { margin: 0; max-width: 62ch; font-size: 17px; line-height: 1.55; color: var(--on-navy-soft); }
.ds-band .ds-crumb { display: inline-block; margin-bottom: 12px; font-size: 13.5px; font-weight: 600; color: var(--on-navy-soft); text-decoration: none; }
.ds-band .ds-crumb:hover { color: var(--on-navy); text-decoration: underline; }
.ds-band a:focus-visible { outline: 2px solid var(--mustard); outline-offset: 2px; }
.ds-band-chips { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.ds-band .ds-meta { margin: 12px 0 0; font-size: 14px; font-weight: 600; color: var(--on-navy-soft); }

.ds-readhead { background: var(--cream); border-bottom: 1px solid var(--line); }
.ds-readhead-inner { max-width: 1500px; margin: 0 auto; padding: clamp(28px, 5vw, 56px) clamp(16px, 4vw, 40px) clamp(20px, 3vw, 32px); }
.ds-readhead h1 { margin: 0 0 12px; color: var(--navy); font-weight: 600; max-width: 22ch; }
.ds-readhead .ds-intro { margin: 0; max-width: 68ch; font-size: 18px; line-height: 1.6; color: var(--muted); }
.ds-byline { margin: 14px 0 0; font-size: 14px; color: var(--muted); }

/* ---- 7. Accordion (FAQ) ------------------------------------------------- */
.ds-accordion { display: grid; gap: 10px; margin: 0; padding: 0; }
.ds-accordion details {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-card);
}
.ds-accordion summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 20px; cursor: pointer; list-style: none;
  font-family: var(--font-sans); font-size: 16px; font-weight: 700; color: var(--navy);
}
.ds-accordion summary::-webkit-details-marker { display: none; }
.ds-accordion summary::after {
  content: ""; flex: 0 0 auto; width: 10px; height: 10px;
  border-right: 2px solid var(--navy); border-bottom: 2px solid var(--navy);
  transform: rotate(45deg) translateY(-3px); transition: transform .15s ease;
}
.ds-accordion details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.ds-accordion summary:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; border-radius: var(--radius-card); }
.ds-accordion .ds-accordion-body { padding: 0 20px 18px; font-size: 15.5px; line-height: 1.6; color: var(--ink); max-width: 68ch; }
.ds-accordion .ds-accordion-body p { margin: 0 0 10px; }
.ds-accordion .ds-accordion-body p:last-child { margin-bottom: 0; }

/* ---- 8. Readable text --------------------------------------------------- */
.ds-prose p, .ds-prose li, .ds-prose blockquote, .ds-prose dd,
.ds-prose h2, .ds-prose h3, .ds-prose h4 { max-width: 68ch; }
.ds-prose p, .ds-prose li { font-size: 17px; line-height: 1.65; color: var(--ink); }
.ds-prose a { color: var(--navy); text-underline-offset: 3px; }

/* ---- 9. "On this page" (guide articles, desktop) ------------------------ */
.ds-toc { display: none; }
@media (min-width: 1100px) {
  .ds-has-toc { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 48px; align-items: start; }
  .ds-toc {
    display: block; position: sticky; top: calc(var(--leif-header-h, 72px) + 24px);
    padding: 18px 20px; background: var(--white); border: 1px solid var(--line);
    border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  }
  .ds-toc-title { margin: 0 0 10px; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
  .ds-toc ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
  .ds-toc a { font-size: 14px; line-height: 1.4; color: var(--navy); text-decoration: none; }
  .ds-toc a:hover, .ds-toc a[aria-current="true"] { text-decoration: underline; text-underline-offset: 3px; }
}

/* ---- 10. Scroll reveal -------------------------------------------------
   The slow fade-up (Logan, 2026-10-20): blocks start at low opacity and rise
   into view over .8s as you scroll. Still safe: the faded start state only
   exists under html.js (set by utils/scroll-reveal.js), and reduced motion
   turns it off entirely. */
.scroll-reveal { opacity: 1; transform: none; }
html.js .scroll-reveal:not(.is-revealed) { opacity: .08; transform: translateY(14px); }
html.js .scroll-reveal { transition: opacity .8s ease, transform .8s ease; }
@media (prefers-reduced-motion: reduce) {
  html.js .scroll-reveal, html.js .scroll-reveal:not(.is-revealed) { opacity: 1; transform: none; transition: none; }
}

/* ---- 11. Header extras -------------------------------------------------- */
.ds-nav-menu { position: relative; }
.ds-nav-menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.ds-nav-menu > summary::-webkit-details-marker { display: none; }
/* A real element: .ed-nav-link already uses ::after for the active underline. */
.ds-caret {
  display: inline-block; width: 6px; height: 6px; margin: 0 0 3px 6px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.ds-nav-menu[open] .ds-caret { transform: rotate(-135deg); margin-bottom: -1px; }
/* The dropdown: shop links, then "Shop by value" (all nine /values/ pages)
   in two columns. */
.ds-nav-menu-panel {
  position: absolute; top: calc(100% + 8px); left: -12px; z-index: 60;
  width: 360px; max-width: calc(100vw - 32px); padding: 8px;
  background: var(--white); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-card-hover);
}
.ds-nav-menu-list { margin: 0; padding: 0; list-style: none; }
.ds-nav-menu-heading {
  margin: 8px 12px 2px; padding-top: 10px; border-top: 1px solid var(--line);
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
}
.ds-nav-menu-list--values { display: grid; grid-template-columns: 1fr 1fr; }
/* Phone menu: the same value links behind a disclosure row. */
.mobile-menu-dropdown { max-height: calc(100vh - 90px); overflow-y: auto; }
.mobile-menu-values > summary { list-style: none; cursor: pointer; justify-content: space-between; }
.mobile-menu-values > summary::-webkit-details-marker { display: none; }
.mobile-menu-values[open] .ds-caret { transform: rotate(-135deg); }
.mobile-menu-values-list { margin: 0; padding: 0 0 4px 12px; list-style: none; }
/* Account rows lead the phone menu; one hairline under them (not above). */
.mobile-menu-dropdown .mobile-menu-auth { border-top: 0; margin-top: 0; padding-top: 12px; }
.mobile-menu-dropdown #mobileMenuSignIn, .mobile-menu-dropdown #mobileMenuSignOut { border-bottom: 1px solid #e5e7eb; margin-bottom: 4px; }
.ds-nav-menu-list a { display: block; padding: 8px 12px; border-radius: 8px; color: var(--ink); font-size: 14.5px; text-decoration: none; }
.ds-nav-menu-list a:hover { background: var(--well); }
.ds-nav-menu-list a:focus-visible { background: var(--well); outline: 2px solid var(--navy); outline-offset: -2px; }

/* ---- 12. Homepage ------------------------------------------------------- */
/* Phones/tablets: the three hero product cards become a sideways-scrolling row
   (they were hidden). Flat cards, no tilt/scale. */
@media (max-width: 900px) {
  .ed-theme .home-hero-cards {
    display: flex; gap: 12px; height: auto; max-width: none; width: auto;
    margin: 22px -18px 0; padding: 2px 18px 12px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .ed-theme .home-hero-cards::-webkit-scrollbar { display: none; }
  .ed-theme .home-hero-cards .hero-card,
  .ed-theme .home-hero-cards .hero-card:hover {
    position: relative; top: auto; left: auto;
    flex: 0 0 236px; width: 236px; margin: 0;
    transform: none; box-shadow: var(--shadow-card);
    scroll-snap-align: start;
  }
}

/* ---- 13. Card enforcement ------------------------------------------------
   The old "pop" look (2px navy rule + navy offset block) lived in several
   per-page stylesheets with selectors up to four classes deep. This layer
   has to win against all of them, so these few declarations use !important.
   The navy-block cards (collection cards, Shop Local, guide callouts) are
   deliberately not in this list; see the "pop" rule below. */
:root {
  --pop-shadow: var(--shadow-card);
  --pop-shadow-sm: var(--shadow-card);
  --pop-shadow-press: var(--shadow-card-hover);
}
.ed-theme .feature-item,
.ed-theme .content-card.mi-next,
.ed-theme .mi-table-wrap,
.ed-theme .legal-toc,
.ed-theme .cert,
.ed-theme .about-pop-card,
.ed-theme .sl-ed-quote,
.ed-theme .values-why-card,
.ed-theme .hp-pop {
  background: var(--white) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: var(--shadow-card) !important;
}
/* The navy-block ("pop") card: white face, 2px navy rule, solid navy block
   offset behind it. Used by the collection cards, the Shop Local card,
   guide callouts, the homepage's editorial cards (How we rate pair, the
   three steps, guide cards), featured-brand cards and the partner strip
   (Logan, 2026-10-20). Everything else is the plain card above. */
.ed-theme .hp-col-card,
.ed-theme .home-local-card,
.ed-theme .guide-check,
.ed-theme .guide-callout,
.ed-theme .featured-brand-card,
.ed-theme .featured-brands-section--pop .featured-brand-card,
.ed-theme .score-step,
.ed-theme .featured-brands-section--pop .score-step,
.ed-theme .hp-brand-card,
.ed-theme .hp-partners-strip {
  background: var(--white) !important;
  border: 2px solid var(--navy) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: 7px 7px 0 var(--navy) !important;
}
.ed-theme .hp-col-card:hover,
.ed-theme .home-local-card:hover,
.ed-theme a.featured-brand-card:hover,
.ed-theme .hp-partners-strip:hover { box-shadow: 4px 4px 0 var(--navy) !important; transform: translate(3px, 3px) !important; }
@media (max-width: 640px) {
  .ed-theme .hp-col-card, .ed-theme .home-local-card, .ed-theme .guide-check, .ed-theme .guide-callout,
  .ed-theme .featured-brand-card, .ed-theme .score-step, .ed-theme .hp-brand-card, .ed-theme .hp-partners-strip { box-shadow: 5px 5px 0 var(--navy) !important; }
}
/* Icon tiles and the About page's tinted band: pale blue again. */
.ed-theme .ed-card-icon, .ed-theme .about-card-icon { background: var(--sky); }
.ed-theme .about-band--tint { background: var(--sky); }

/* Value chips everywhere: no per-value icon, just the planet/people dot. */
.values-nav-link svg, .related-chip svg, .value-bar-chip svg { display: none; }
.related-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--planet); }
.related-chip.value-tone--fair-trade::before, .related-chip.value-tone--b-corp::before { background: var(--people); }

/* ---- 14. Read pages ------------------------------------------------------
   Methodology, How scoring works, Guides, guide articles, FAQ, About:
   the existing .page-title-section takes the read-header look (cream,
   eyebrow, H1, intro, byline). */
.ed-theme .page-title-section {
  text-align: left;
  margin: 0 0 28px;
  padding: clamp(24px, 4vw, 48px) 0 clamp(18px, 3vw, 28px);
  background: none;
  border-bottom: 1px solid var(--line);
}
.ed-theme .page-title-section h1 { margin: 0 0 12px; color: var(--navy); font-weight: 600; max-width: 24ch; }
.ed-theme .page-title-section .subtitle { margin: 0; max-width: 68ch; font-size: 18px; line-height: 1.6; color: var(--muted); }
.ed-theme .page-title-section .ds-eyebrow,
.ed-theme .page-title-section .guide-kicker { color: var(--people); margin: 0 0 10px; }
.ed-theme .ds-byline, .ed-theme .page-title-section .guide-meta { margin: 14px 0 0; font-size: 14px; color: var(--muted); }
.ed-theme .ds-readhead + .about-main,
.ed-theme .ds-readhead + main { padding-top: 8px; }
/* About: the photo column is gone, so the story runs full width. */
.ed-theme .about-why { display: block; }
/* Readable measure inside cards/flow layouts too. */
.ed-theme .ds-prose .content-card p,
.ed-theme .ds-prose .content-card li,
.ed-theme .ds-prose .guide-body p,
.ed-theme .ds-prose .guide-body li,
.ed-theme .ds-prose .about-band p { max-width: 68ch; }
.ed-theme .guide-body { max-width: none; }
.ed-theme .ds-has-toc > .guide-body { min-width: 0; }

/* ---- 15. Browse pages ----------------------------------------------------
   Category, values, Shop Local: their existing navy bands get the browse
   template's eyebrow and type; chips sit under the band. */
.ed-theme .subcategory-hero-title, .ed-theme .values-hero h1 { font-family: var(--font-display); font-weight: 600; }
.ed-theme .subcategory-hero .ds-eyebrow { margin-bottom: 8px; }
.ds-under-band { margin: 18px 0 6px; }
.ds-under-band.filter-chips, .ds-under-band .filter-chips { display: flex; flex-wrap: wrap; gap: 8px; background: none; padding: 0; }
/* category/theme-category.css still styles .ed-theme .filter-chip for the old
   navy hero (cream text + border), which outranks section 4 and leaves the
   chips cream-on-cream under the band. Restate the section-4 chip here. */
.ed-theme .ds-under-band .filter-chip, .ds-under-band .filter-chip {
  padding: 6px 14px; border-color: var(--line); background: var(--white);
  color: var(--ink); font-size: 14px; font-weight: 600;
}
.ed-theme .ds-under-band .filter-chip:hover, .ds-under-band .filter-chip:hover {
  border-color: var(--navy); background: var(--white); color: var(--ink);
}
.ed-theme .ds-under-band .filter-chip.active, .ds-under-band .filter-chip.active {
  border-color: var(--navy); background: var(--navy); color: var(--white);
}
.ed-theme .ds-under-band .filter-chip:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.ed-theme .subcategory-hero-eyebrow, .ed-theme .subcategory-hero .ds-eyebrow {
  display: block; margin: 0 0 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mustard);
}
@media (max-width: 640px) {
  .ds-under-band.filter-chips, .ds-under-band .filter-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  /* theme-category.css bleeds the row 16px past the gutter; pad it back in. */
  .ed-theme .ds-under-band.filter-chips { padding: 0 40px 4px 16px; }
}

/* ---- 16. Shop Local: the founding-partner card ------------------------- */
.sl-your-shop {
  display: flex; align-items: center; justify-content: center; min-height: 260px;
  padding: 24px; text-decoration: none; color: var(--ink);
  border: 1.5px dashed var(--navy) !important; background: var(--white);
}
.sl-your-shop:hover { border-style: solid !important; }
.sl-your-shop-body { display: flex; flex-direction: column; gap: 8px; text-align: center; max-width: 26ch; }
.sl-your-shop-title { font-family: var(--font-display); font-size: 24px; font-weight: 600; color: var(--navy); }
.sl-your-shop-text { font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.sl-your-shop-cta { margin-top: 4px; font-size: 14.5px; font-weight: 700; color: var(--navy); }
.sl-your-shop .ds-eyebrow { margin: 0; color: var(--people); }

/* ---- 17. Brand pages: identity block stays on the cream page (the navy
   band was removed 2026-10-21 at Logan's request; back to the original
   supplier-page header). */

/* ---- 18. Header icons: one colour on every page ------------------------- */
.ed-theme .brand-header .mobile-menu-btn,
.ed-theme .brand-header .ed-icon-btn,
.ed-theme .brand-header .ed-avatar { color: var(--muted); background: transparent; }
.ed-theme .brand-header .mobile-menu-btn:hover,
.ed-theme .brand-header .ed-icon-btn:hover,
.ed-theme .brand-header .ed-avatar:hover { color: var(--navy); }
.ed-theme .brand-header .ed-avatar { background: var(--well); }
/* The offset block is for the featured card only — not buttons or tabs. */
:root { --pop-shadow-ctl: none; }
/* Phones: the heart stays in the header (account lives in the menu). */
@media (max-width: 880px) {
  .ed-theme .brand-header .ed-actions #cartBtn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; }
  .ed-theme .brand-header .ed-actions { gap: 2px; }
}

/* ---- 19. Shop Local landing: band eyebrow + link chips ------------------ */
.ed-theme .sl-hero .sl-eyebrow { color: var(--mustard); font-weight: 700; letter-spacing: .12em; }
.sl-chips--links a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 14px;
  border: 1.5px solid var(--line); border-radius: var(--radius-chip); background: var(--white);
  color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none;
}
.sl-chips--links a:hover { border-color: var(--navy); }

/* ---- 20. Browse band wave ------------------------------------------------
   The same cream wave the category / values / About bands end in
   (styles/theme.css), on the .ds-band used by the collection and partner
   pages. Extra bottom padding keeps the wave off the band's text. */
.ed-theme .ds-band { position: relative; }
.ed-theme .ds-band .ds-band-inner { padding-bottom: calc(clamp(24px, 4vw, 40px) + var(--leif-wave-h, 40px)); }
.ed-theme .ds-band::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: var(--leif-wave-h, 40px);
  background: var(--cream);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0 38C240 6 480 6 720 30s480 34 720 0V64H0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0 38C240 6 480 6 720 30s480 34 720 0V64H0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  pointer-events: none;
}

/* ---- 21. Product card (2026-10-23) --------------------------------------
   One card on every listing (utils/productCard.js, static twin build/card.js):
   heart · ONE link (photo + short name → supplier page) · badge over the
   photo but outside the link · price · tags · "Why this rating →".
   No store button: the retailer link lives on the supplier page only. */
.product-card .leif-card-link {
  display: flex; flex-direction: column;
  color: var(--ink); text-decoration: none;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}
.product-card .leif-card-link .product-image-wrap { display: block; position: relative; }
.product-card .leif-card-link .product-title {
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0; padding: 12px 14px 0;
  min-height: 0;
  font-family: var(--font-sans); font-size: 15px; font-weight: 600; line-height: 1.3;
  color: var(--ink);
}
.product-card .leif-card-link:hover .product-title { color: var(--navy); text-decoration: underline; }
.product-card .leif-card-link:focus-visible {
  outline: 3px solid var(--navy); outline-offset: -3px;
}
.product-card .leif-card-badge {
  position: absolute; top: 10px; left: 10px; z-index: 5;
  max-width: calc(100% - 64px);
}
.product-card .leif-card-badge .product-score-pill { position: static; }
.product-card .product-info { padding-top: 6px; gap: 6px; }
.product-card .product-price { font-size: 14px; font-weight: 500; color: var(--ink); }
.product-card .why-rating-link {
  display: inline-flex; align-items: center; min-height: 24px;
  margin-top: auto; font-size: 13px; color: var(--planet);
}
.product-card .why-rating-link:focus-visible,
.product-heart-btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
/* The card is a group, not a control; only its link, heart and badge take focus. */
.product-card:focus { outline: none; }
@media (max-width: 640px) {
  .product-card .leif-card-link .product-title { font-size: 14px; padding: 10px 10px 0; }
}

/* Short line above product listings: what a Leif Rating is. */
.leif-rating-note {
  margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: var(--muted);
}
.leif-rating-note a { color: var(--navy); font-weight: 600; }

/* ---- 22. Focus ----------------------------------------------------------
   One visible focus ring for every interactive element that has no better
   one of its own (WCAG 2.4.7 / 2.4.11). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}
.toolbar-select:focus-visible, .fp-select:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.ed-footer :where(a, button):focus-visible,
.hp-sl :where(a, button):focus-visible { outline-color: var(--mustard); }

/* ---- 23. Footer (build/partials/footer.html) ----------------------------
   Four link columns; text at AA contrast on navy (the old 50–62% white
   measured below 4.5:1 for the small print). */
.ed-theme .ed-footer .footer-tagline,
.ed-theme .ed-footer .footer-links a { color: rgba(255, 255, 255, .82); }
.ed-theme .ed-footer-bottom .affiliate-disclosure { color: rgba(255, 255, 255, .78); font-size: 12.5px; line-height: 1.55; max-width: 90ch; }
.ed-theme .ed-footer .footer-col-title { font-size: 13px; line-height: 1.3; }
.ed-theme .ed-footer-columns { flex-wrap: wrap; gap: 32px 48px; }
@media (max-width: 640px) {
  .ed-theme .ed-footer-inner { padding: 36px 16px 20px; }
  .ed-theme .ed-footer-bottom { padding: 16px 16px 24px; }
  .ed-theme .ed-footer-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  .ed-theme .ed-footer .footer-links a { display: inline-block; padding: 3px 0; }
}

/* Screen-reader-only text (e.g. "(opens in a new tab)" after "Shop at … ↗"). */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- 24. Category chip bar: pale-blue pills (2026-10-23) ----------------
   A light --sky fill (the How we rate icon tiles' blue) so the pills read as
   buttons against the white bar without adding a new colour; the selected
   category stays navy, the strongest thing in the row. */
.ed-theme .category-nav-link {
  background: var(--sky);
  border-color: color-mix(in srgb, var(--navy) 14%, var(--sky));
  color: var(--navy);
}
.ed-theme .category-nav-link:hover {
  background: color-mix(in srgb, var(--navy) 10%, var(--sky));
  border-color: color-mix(in srgb, var(--navy) 30%, var(--sky));
  color: var(--navy);
}
.ed-theme .category-nav-link .cat-nav-icon,
.ed-theme .category-nav-link:hover .cat-nav-icon { color: var(--navy); }
.ed-theme .category-nav-link.active { background: var(--navy); border-color: var(--navy); color: var(--white); }
.ed-theme .category-nav-link.active .cat-nav-icon { color: var(--white); }