/** Shopify CDN: Minification failed

Line 1524:2 Unexpected "{"
Line 1524:3 Expected identifier but found "%"
Line 1524:69 Unexpected "("
Line 1524:208 Expected identifier but found "%"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:benefit-pairings (INDEX:3) */
/* PROVISIONAL: values replaced from LEGO-LOCK-REGISTER.md when this lego locks */
/*
  A MECHANICAL PORT of legos/L39-benefit-pairings/v3.html's own <style> block plus
  the base.css primitives it leans on (.om-section / .om-inner / .om-h2 /
  .om-h3-display / .om-display--lg / .om-caps / .om-body / .om-small / .om-soft /
  .om-num / .om-subhead / .om-frame / .om-frame--sm / .om-frame--lg /
  .om-frame--key / .om-ratio-1x1 / .om-slot / .om-slot--deep / .om-slot--inline /
  .om-thread-dot / .om-thread-dot--accent / .om-btn / .om-btn--block).
  Nothing was re-authored, re-spaced or re-scaled: only the var() NAMES changed,
  per .frontend-build/brand-tokens.md. A bound role points at the THEME variable;
  an unbound role points at assets/web-legos-provisional-tokens.css.

  DROPPED, with reason: the lego sets font-variation-settings: "wdth"
  var(--om-scale-width) on every Scale role. Scale VF is NOT served on the web
  rail (D-030) and the theme pins Bricolage to wdth=100 inside font-face.liquid,
  so the declaration would name a variable that exists nowhere. Same drop as
  need-story.

  COMPOSED, not invented: --om-hairline and --om-keyline have no width token in
  the theme layer (the spacing scale starts at 8px), so they are written out as
  1px / 1.5px against var(--line) / var(--ink) exactly as brand-tokens.md §6
  describes them. base.css records the same 1px literal "by necessity, not by
  shortcut".

  FAMILY: this is the Focus family PDP, so the lego's --om-species-* set resolves
  to the theme's Lion's Mane triad (--lm-dark / --lm-mid / --lm-light) per
  brand-tokens.md §2. The wash tier has no theme variable and comes from the
  provisional asset.

  BREAKPOINT DEVIATION, recorded not hidden: Dawn's real breakpoints are 750, 990
  and 1280 (D-011 v2). This section keeps the lego's NATIVE 768px, because the
  port spec §5 and adjudication 11 both carry 768 as DECIDED structure for L39
  and the 1.15/0.85 column ratio was measured on this composition at that width.
  768 is not one of the five verify viewports, so the reflow is asserted
  EXPLICITLY at 767/768 rather than assumed (contract, assertion 6).

  THE 375 ORDER IS A GRID AREA, NOT A FLEX `order`: the areas re-place the same
  three blocks at 768 without moving the DOM, so reading order and tab order stay
  source order at both widths. That is a contract, not a detail.

  NO SECTION-LEVEL max-width: the page frame lives at the LAYOUT
  (page-system.md). The inner uses the theme's own .page-width. The only
  max-widths here are the PROSE measure var(--bw-prose) and the lego's own two
  composition caps (the 420px open media, the 320px CTA column).
*/

.benefit-pairings {
  padding-block: var(--om-section-y);
  background: var(--cream);
}

.benefit-pairings__heading {
  font-family: var(--font-display);
  font-weight: var(--om-display-weight);
  letter-spacing: var(--om-display-tracking);
  font-size: var(--om-text-h2);
  line-height: var(--om-leading-snug);
  margin: 0;
}

/* The stage: three blocks, one column at 375. */
.benefit-pairings__stage {
  margin-top: var(--s4);
  display: grid;
  gap: var(--s4);
  grid-template-areas: "open" "doors" "offer";
}
.benefit-pairings__stage > * { min-width: 0; }

/* ---- the open door ------------------------------------------------------ */
/* Keylined Frame: top-right + bottom-left only (D-017 Option A), md tier. */
.benefit-pairings__open {
  grid-area: open;
  padding: var(--s3);
  border: 1.5px solid var(--ink);
  border-radius: 0 var(--om-frame-r-md) 0 var(--om-frame-r-md);
  overflow: hidden;
}

.benefit-pairings__open-label,
.benefit-pairings__row-label,
.benefit-pairings__tag-text,
.benefit-pairings__proposed {
  font-family: var(--font-utility);
  font-weight: var(--om-caps-weight);
  letter-spacing: var(--om-caps-tracking);
  text-transform: uppercase;
  font-size: var(--t-eyebrow);
  line-height: 1.2;
}

.benefit-pairings__open-label { color: var(--ink); margin: 0; }

.benefit-pairings__open-line {
  font-family: var(--font-read);
  font-size: var(--t-body);
  line-height: var(--om-leading-body);
  max-width: var(--bw-prose);
  color: var(--ink);
  margin: var(--s1) 0 0;
}

/* The PROPOSED chip, once on the page. Its exact styling is polish left to G3. */
.benefit-pairings__proposed {
  display: inline-block;
  margin-left: var(--s1);
  vertical-align: 0.15em;
  padding: 2px var(--s1);
  border: 1px solid var(--line);
  border-radius: var(--btr);
  color: var(--om-ink-soft-deep);
  background-color: var(--soft);
}

/* The open macro frame: lg tier, the family wash behind the reservation. */
.benefit-pairings__open-media {
  display: grid;
  place-items: center;
  text-align: center;
  aspect-ratio: 1 / 1;
  max-width: 420px;
  margin-top: var(--s3);
  padding: var(--s2);
  background-color: var(--om-species-wash);
  border: 1px dashed var(--line);
  border-radius: 0 var(--om-frame-r-lg) 0 var(--om-frame-r-lg);
  overflow: hidden;
}

.benefit-pairings__slot-label {
  font-family: var(--font-utility);
  font-size: var(--om-text-small);
  line-height: var(--om-leading-snug);
  color: var(--mute);
}

.benefit-pairings__open-name {
  font-family: var(--font-display);
  font-weight: var(--om-display-weight);
  letter-spacing: var(--om-display-tracking);
  font-size: var(--t-h2);
  line-height: var(--om-leading-tight);
  color: var(--ink);
  margin: var(--s3) 0 0;
}

/* The dot is drawn inside a FLEX row on purpose: a bare span dot outside a
   flex/grid row stays inline and its width/height never apply (round-4 trap). */
.benefit-pairings__open-tag {
  display: flex;
  align-items: center;
  gap: var(--s1);
  margin: var(--s1) 0 0;
  color: var(--om-ink-soft-deep);
}
.benefit-pairings__dot {
  width: var(--om-thread-dot);
  height: var(--om-thread-dot);
  border-radius: 50%;
  background: var(--orange);
  flex: none;
}

.benefit-pairings__open-reason,
.benefit-pairings__row-liner,
.benefit-pairings__row-reason,
.benefit-pairings__offer-reason {
  font-family: var(--font-read);
  max-width: var(--bw-prose);
  margin: 0;
}
.benefit-pairings__open-reason {
  font-size: var(--t-body);
  line-height: var(--om-leading-body);
  color: var(--mute);
  margin-top: var(--om-s3);
}

/* ---- the four closed doors --------------------------------------------- */
.benefit-pairings__doors { grid-area: doors; }

.benefit-pairings__door { border-top: 1px solid var(--line); }
.benefit-pairings__door:last-child { border-bottom: 1px solid var(--line); }

.benefit-pairings__summary {
  list-style: none;
  cursor: pointer;
  min-height: var(--om-tap);
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--om-marker-size);
  align-items: center;
  gap: var(--om-s3);
  padding-block: var(--s2);
}
.benefit-pairings__summary::-webkit-details-marker { display: none; }
.benefit-pairings__summary:hover .benefit-pairings__row-answer { color: var(--mute); }

.benefit-pairings__row-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s1) var(--om-s3);
}
.benefit-pairings__row-label { color: var(--om-ink-soft-deep); }
.benefit-pairings__row-answer {
  font-family: var(--font-display);
  font-weight: var(--om-display-weight);
  letter-spacing: var(--om-display-tracking);
  font-size: var(--om-text-h3);
  line-height: var(--om-leading-snug);
  color: var(--ink);
}

/* The fold mark: two hairlines, the vertical one folding away when the row
   opens. Its visual is polish left to G3. */
.benefit-pairings__mark {
  position: relative;
  width: var(--om-marker-size);
  height: var(--om-marker-size);
}
.benefit-pairings__mark::before,
.benefit-pairings__mark::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: var(--om-thread-w);
  background-color: var(--om-ink-soft-deep);
  transform: translateY(-50%);
}
.benefit-pairings__mark::after { transform: translateY(-50%) rotate(90deg); }
.benefit-pairings__door[open] > .benefit-pairings__summary .benefit-pairings__mark::after { opacity: 0; }

.benefit-pairings__panel {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--s2);
  align-items: start;
  padding-bottom: var(--s3);
}
.benefit-pairings__panel-copy { min-width: 0; }

/* The panel thumb is 96px at BOTH widths — fixed chrome, not page content that
   grows — so it takes the FIXED radius tier (the round-4 three-tier rule). On
   the fluid tier it measured 24px on a 96px box at 1440, a quarter of its own
   width. */
.benefit-pairings__media {
  aspect-ratio: 1 / 1;
  background-color: var(--soft);
  border: 1px dashed var(--line);
  border-radius: 0 var(--om-frame-r-sm-fixed) 0 var(--om-frame-r-sm-fixed);
  overflow: hidden;
}
.benefit-pairings__media--slot {
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--s1);
  font-family: var(--font-utility);
  font-size: var(--t-eyebrow);
  line-height: 1.25;
  color: var(--om-ink-soft-deep);
}

.benefit-pairings__row-liner {
  font-size: var(--om-text-small);
  line-height: var(--om-leading-body);
  color: var(--ink);
}
.benefit-pairings__row-reason {
  font-size: var(--om-text-small);
  line-height: var(--om-leading-body);
  color: var(--mute);
  margin-top: var(--s1);
}

/* The claims-library bracket. `clone` closes every wrap fragment: the default
   `slice` leaves middle fragments open and a long bracket reads as a
   strikethrough or a rendering fault (the round-4 L24/L25 fix). */
.benefit-pairings__reserve {
  display: inline;
  padding: 0 var(--s1);
  border: 1px dashed var(--line);
  color: var(--om-ink-soft-deep);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  max-width: 100%;
}

/* ---- the offer card, under the open door (L08's contract verbatim) ------ */
.benefit-pairings__offer {
  grid-area: offer;
  background-color: var(--soft);
  border: 1px solid var(--line);
  border-radius: 0 var(--om-frame-r-md) 0 var(--om-frame-r-md);
  overflow: hidden;
  padding: var(--s3);
  display: grid;
  gap: var(--s3);
}
.benefit-pairings__offer-copy {
  display: grid;
  gap: var(--om-s3);
  align-content: center;
  min-width: 0;
}
.benefit-pairings__offer-heading {
  font-family: var(--font-display);
  font-weight: var(--om-display-weight);
  letter-spacing: var(--om-display-tracking);
  font-size: var(--om-text-h3);
  line-height: var(--om-leading-snug);
  color: var(--om-ink-soft-deep);
  margin: 0;
}
.benefit-pairings__offer-reason {
  font-size: var(--t-body);
  line-height: var(--om-leading-body);
  color: var(--mute);
}
.benefit-pairings__offer-price {
  display: flex;
  gap: var(--om-s3);
  align-items: baseline;
  flex-wrap: wrap;
  margin: 0;
}
.benefit-pairings__offer-otp {
  font-family: var(--font-utility);
  font-weight: var(--om-subhead-weight);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  font-size: var(--om-text-h3);
  line-height: var(--om-leading-snug);
  color: var(--ink);
}
.benefit-pairings__offer-save {
  font-family: var(--font-read);
  font-size: var(--om-text-small);
  color: var(--mute);
}
.benefit-pairings__offer-actions { max-width: 320px; }

/* Brown/cream is the primary action (11.4:1). Orange never fills a button. */
.benefit-pairings__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s1);
  width: 100%;
  min-height: var(--om-tap);
  padding: 0 var(--s3);
  border: 1.5px solid var(--ink);
  border-radius: var(--btr);
  background: var(--brown);
  color: var(--cream);
  font-family: var(--font-utility);
  font-weight: var(--om-subhead-weight);
  letter-spacing: var(--om-subhead-tracking);
  font-size: var(--t-body);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--om-dur) var(--om-ease), border-color var(--om-dur) var(--om-ease);
}
.benefit-pairings__cta:hover {
  background: var(--om-brown-deep);
  border-color: var(--om-brown-deep);
}
.benefit-pairings__cta:active { transform: translateY(1px); }

/* The lego's NATIVE breakpoint. See the deviation note at the top of this block. */
@media (min-width: 768px) {
  .benefit-pairings__stage {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    grid-template-areas: "open doors" "offer doors";
    gap: var(--s4) var(--s5);
    align-items: start;
  }
  .benefit-pairings__open { padding: var(--s4); }
  /* The four closed doors start on the SAME line as the open door's first label,
     so the two columns begin together and the quiet space falls at the bottom
     right, beside the offer card. (Centring them was tried and measured worse:
     it left the top-right corner empty and the rows floated with nothing to
     align to.) */
  .benefit-pairings__doors { align-self: start; }
  .benefit-pairings__offer {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s3);
  }
}
/* END_SECTION:benefit-pairings */

/* START_SECTION:bundle-offer-homepage-strip (INDEX:7) */
.bohs {
    /* Brand World 2026 token binds (unit-home-build restyle, wi-2026-0933): the
       secondary-text + hairline + body face resolve from the G3 token layer the
       chrome build set; no raw hex/font where a token exists. */
    --bohs-muted: var(--mute);
    --bohs-line: var(--line);
    --bohs-font-body: var(--font-read);
    font-family: var(--bohs-font-body);
    /* ONE GUTTER, NOT TWO. The horizontal gutter is the theme's alone:
       .bohs__inner.page-width supplies 50px at >=750 and 15px below it, exactly
       like every neighbouring section, so this rule contributes VERTICAL padding
       only. (The prior 20px mobile inset stacked a SECOND gutter on top of the
       page-width 15px and started the strip at x=35 while the rest of the phone
       page starts at x=15 - removed for the same reason the PDP block was
       corrected under R-10.) */
    padding: 44px 0;
  }
  /* ONE CONTENT COLUMN, LEFT-ANCHORED CAP (2026-09-01). The heading, the card and
     the card's top hairline share a single left/right edge because they all live in
     .bohs__col; .bohs__inner.page-width supplies the theme's own gutter.

     WHY LEFT-ANCHORED AND CAPPED, rather than centred or full-bleed. This theme is
     full-bleed by design: assets/base.css comments out `max-width: var(--page-width)`
     on .page-width and forces max-width:100%, and has done so in the agency's repo
     since 2025-02-18 (bluestout/ommushroom 4f0655d), so settings.page_width (1200) is
     dead code and every section fills the window. That leaves three choices, and two
     of them were tried and rejected on real renders:

       CENTRED at 1340 (what shipped originally). The card sits inset from its own
       neighbours on any window past 1440, because 1340 is only the content column at
       exactly a 1440 viewport. Measured on live: card x=145 at a 1630 viewport while
       the header nav and "Shop Bundles" sat at x=50; x=350 at 2040; x=610 at 2560.
       It also read as growing under browser zoom, since zoom shrinks the CSS viewport
       and a 100%-width neighbour refits while a px cap does not.

       FULL-BLEED (shipped briefly on 2026-09-01, reverted the same day). Fixes the
       edge alignment but the composition is built for ~1340, so past that the card
       stops being a card and becomes a hollow band with the decision rail marooned at
       the far right. Rejected by the operator on sight.

       LEFT-ANCHORED at 1340 (this). The left edge always lands on the theme's gutter,
       so it agrees with every neighbour at every width; the composition never stretches
       past what it was designed for; and the slack falls on the right, where the white
       ground reads it as page margin rather than as a broken edge. Operator call: extra
       white on the right at the largest viewports is tolerable.

     A two-up split above ~1700 was comped and rejected the same day (two offers in one
     band looked bad). Nothing here changes at or below 1440, where the cap does not bind. */
  .bohs__col { max-width: 1340px; margin-left: 0; margin-right: auto; }
  .bohs .om.d1 { --om-d1-maxw: none; }
  /* THE BAND (Option C, approved 2026-08-24; edge treatment corrected under
     R-10, 2026-08-27). A full-bleed beige field with the skin's white card set
     into it. Both are theme tokens; the raw three-stop gradient the shipped
     card carried is deleted. Only cast for a skin that composes for the band -
     every other skin keeps the page's own ground, exactly as before.

     WHAT R-10 CHANGED, AND WHY. The band itself was already correct: measured
     on staging theme 190557258098 at 1440 it is x=0 w=1440, radius 0, no
     borders, which is exactly the idiom every other band in this theme uses
     (main-product #FBF8F4, species-spotlight #FBF8F4, testimonial #f1e7db -
     all `background` on an unconstrained section root, all radius 0, none
     bordered). Two things around it were not:

     1. DEPTH. 36px of vertical padding made this the shallowest band on the
        page while the white card inside it is 238px tall, so the beige read as
        a thin uneven frame around a white rectangle rather than as a field the
        card sits in. The theme's own bands run 57-64px (species-spotlight
        5.792rem/6.4rem, testimonial the same). 64px puts us on that rhythm.

     2. THE SEAM ABOVE. `subscribe-and-save-banner` sits directly above with
        `spacing_sections: 0`, and at >=1280 that section is CONTAINED, not
        full-bleed: `width: calc(100% - 12rem)` centres it 60px inboard each
        side. So a full-bleed band butting straight into it produced a hard
        step where the tan mass suddenly got 120px wider and the white shoulders
        above it stopped dead. `margin-top` converts that step into white air,
        which is what every other band on this page has above it. It is a margin
        rather than padding on purpose: padding would only have made the beige
        taller and kept the step. */
  /* The band is the soft cream field (--soft) so the white card reads against it;
     --color-primary-beige now repoints to the page ground (--cream), which would
     make the band invisible. (unit-home-build restyle, wi-2026-0933) */
  .bohs--band { background: var(--soft); margin-top: 28px; }
  /* MATCH THE PDP IN-SKIN HEADING (operator 2026-08-28: the homepage "Featured
     Bundle" line was too small and the wrong style; it needs to match the PDP).
     The PDP renders its heading INSIDE the grounded-ritual card as
     `.om.d1 .d1-hl.bub__heading`: font-family var(--om-serif-italic) with
     font-style:normal, weight 300, 2.875em / line-height 1.04 /
     letter-spacing -.004em / text-transform none / color forest, 20px bottom
     margin (mobile 1.875em, 14px bottom margin).
     Same face binding is critical: the theme ships each IvyPresto cut as its
     OWN family, all declared font-style:normal, so the italic face is reached
     by family (--bst-font-secondary-light-italic) and font-style MUST stay
     normal or the browser slants an already-slanted face.
     rem-based so the size matches the PDP heading's COMPUTED px regardless of
     what .bohs inherits: the theme root is 62.5% (1rem = 10px), the PDP base is
     1.6rem, so its 2.875em = 4.6rem = 46px desktop and 1.875em = 3rem = 30px
     mobile. This block is mobile-first (30px); the >=750 override below lifts it
     to 46px, exactly the PDP's two-step. */
  .bohs__heading {
    /* Display face + ink from the G3 token layer (unit-home-build restyle,
       wi-2026-0933). --font-display is Playfair Display; the stale IvyPresto /
       forest-green fallbacks are gone. */
    font-family: var(--font-display);
    font-style: normal; font-weight: 400; font-size: 3rem; line-height: 1.04;
    letter-spacing: -.004em; text-transform: none; margin: 0 0 14px;
    color: var(--ink);
  }
  .bohs--placeholder { border: 1px dashed var(--bohs-line); border-radius: 2px; padding: 16px; margin: 12px 0; }
  .bohs__hint { font-size: 12.5px; color: var(--bohs-muted); margin: 0; }
  @media (min-width: 750px) {
    .bohs { padding: var(--s6) 0; }
    .bohs--band { margin-top: 40px; }
    /* Desktop lift to the PDP heading's 2.875em on its 1.6rem base = 4.6rem
       (46px); bottom margin to the PDP's 20px. Below 750 the base rule holds
       the PDP mobile step (3rem / 14px). */
    .bohs__heading { font-size: 4.6rem; margin-bottom: 20px; }
  }

  /* ==========================================================================
     D-069 RESTYLE (home launch T2 round 1, approved 2026-09-29, wi-2026-1147).
     Source: om-mushrooms creative/web-legos/work/home-launch-assets-2026-09-29/
     t2/engine-d069.css, verbatim. Every rule is `.bohs ...`-scoped, so the PDP,
     cart and routine-board cards that share the grounded-ritual skin do not
     change. Only real theme tokens (assets/web-legos-provisional-tokens.css);
     the two literals with no token are the button's 1.5px border and 20px size.
     Sits AFTER the rules above on purpose: it overrides the old heading, band
     and column rules for this section.
     ========================================================================== */
  /* ---- section + container: match L58 v4 (cream page, 1280 content, section rhythm) ---- */
  .bohs { padding: var(--om-section-y) 0; }
  .bohs__inner.page-width { width: min(100% - 2 * var(--om-gutter), var(--om-content-max)); max-width: none; margin-inline: auto; padding-inline: 0; }
  .bohs .bohs__col { max-width: none; margin: 0; }

  /* ---- the card: cream-deep Frame + hairline. .bohs__col is the card so the label sits
     INSIDE it (as L58's does); .om.d1 / .d1-body dissolve so label, art, copy and rail
     become one grid that is re-ordered by area with no DOM change. ---- */
  .bohs .bohs__col {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "copy" "art" "rail";
    gap: var(--om-s5);
    align-items: start;
    background-color: var(--om-cream-deep);
    border: var(--om-hairline);
    border-radius: 0 var(--om-frame-r-xl) 0 var(--om-frame-r-xl);
    padding: var(--om-s5);
    overflow: hidden;
  }
  .bohs .om.d1, .bohs .om.d1 .d1-body { display: contents; }

  /* ---- label: small caps + BROWN Thread dot (D-069 item 4). Was the 46px serif heading. ---- */
  .bohs .bohs__heading {
    grid-area: head; margin: 0;
    display: flex; align-items: center; gap: var(--om-s2);
    font-family: var(--om-font-utility); font-variation-settings: "wdth" 100; font-style: normal;
    font-weight: var(--om-caps-weight); letter-spacing: var(--om-caps-tracking); text-transform: uppercase;
    font-size: var(--om-text-micro); line-height: 1.2;
    color: var(--om-ink-soft-deep);
  }
  .bohs .bohs__heading::before {
    content: ""; flex: none; width: var(--om-thread-dot); height: var(--om-thread-dot);
    border-radius: 50%; background: var(--om-brown);
  }

  /* ---- copy ---- */
  .bohs .om.d1 .d1-copy { grid-area: copy; max-width: none; display: grid; gap: var(--om-s4); align-content: start; }
  .bohs .om.d1 .d1-title {
    font-family: var(--om-font-display); font-weight: var(--om-display-weight); letter-spacing: var(--om-display-tracking);
    font-size: var(--om-text-h2); line-height: var(--om-leading-snug); color: var(--om-ink); margin: 0;
  }
  .bohs .om.d1 .why { font-family: var(--om-font-body); font-size: var(--om-text-body); line-height: var(--om-leading-body); color: var(--om-ink-soft-deep); max-width: var(--om-measure); margin: 0; }

  /* ---- media ---- */
  .bohs .om.d1 .art { grid-area: art; margin: 0; width: 100%; max-width: 340px; justify-self: center; }
  .bohs .om.d1 .stage img { filter: none; }   /* the drop shadow reads as a halo on cream-deep */

  /* ---- the rail: the one control column. No vertical hairline, no receipt plate. ---- */
  .bohs .om.d1 .d1-rail {
    grid-area: rail; display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch;
    gap: var(--om-s4); align-content: center; align-self: start;
    border: 0; padding: 0; margin: 0;
  }
  .bohs .om.d1 .d1-lbl { display: none; }   /* the "SIZE" label; the size reads as plain text */
  .bohs .om.d1 .chips { margin: 0; }
  .bohs .om.d1 .schip {
    flex: none; height: auto; line-height: 1.3; padding: 0; text-align: left;
    background: none; border: 0; box-shadow: none; border-radius: 0;
    font-family: var(--om-font-utility); font-variation-settings: "wdth" 100;
    font-size: var(--om-text-small); font-weight: 500; color: var(--om-ink-soft-deep);
  }
  .bohs .om.d1 .schip.sel { box-shadow: none; font-weight: 500; }
  .bohs .om.d1 .d1-money { background: none; border-radius: 0; padding: 0; margin: 0; }

  /* purchase-type pills: cream on cream-deep, Frame-shaped, brown keyline when selected */
  .bohs .om.d1 .d1-buymode { gap: var(--om-s2); margin: 0 0 var(--om-s2); }
  .bohs .om.d1 .d1-mode {
    background: var(--om-cream); border: var(--om-hairline);
    border-radius: 0 var(--om-frame-r-sm-fixed) 0 var(--om-frame-r-sm-fixed); padding: var(--om-s3);
  }
  .bohs .om.d1 .d1-mode.is-selected { border: var(--om-keyline); box-shadow: none; padding: calc(var(--om-s3) - 0.5px); }
  .bohs .om.d1 .d1-mode__k, .bohs .om.d1 .d1-mode__v { font-family: var(--om-font-utility); font-variation-settings: "wdth" 100; }
  .bohs .om.d1 .d1-mode__k { color: var(--om-ink-soft-deep); }
  .bohs .om.d1 .d1-mode.is-selected .d1-mode__k, .bohs .om.d1 .d1-mode__v { color: var(--om-brown); }
  .bohs .om.d1 .d1-mode:focus-within { outline: var(--om-focus-ring); outline-offset: var(--om-focus-offset); }

  /* the savings line: was Vital Orange. Orange is spent once per section, on the button. */
  .bohs .om.d1 .save {
    font-family: var(--om-font-utility); font-variation-settings: "wdth" 100;
    color: var(--om-ink-soft-deep); font-weight: var(--om-subhead-weight); font-size: var(--om-text-small);
    white-space: normal; margin: 0;
  }

  /* ---- THE BUTTON: base.css .om-btn (D-069 item 1) ---- */
  .bohs .om.d1 .btn.primary {
    display: inline-flex; align-items: center; justify-content: center; width: 100%;
    height: auto; min-height: 52px; padding: 0 var(--om-s4); white-space: nowrap;
    background: var(--om-orange); color: var(--om-cream);
    border: 1.5px solid var(--om-orange); border-radius: 0 var(--om-frame-r) 0 var(--om-frame-r);
    font-family: var(--om-font-utility); font-variation-settings: "wdth" 100;
    font-weight: 700; font-size: calc(1.25 * var(--om-rem)); letter-spacing: 0.02em; line-height: 1; text-transform: none;
    transition: background-color var(--om-dur) var(--om-ease), border-color var(--om-dur) var(--om-ease);
  }
  .bohs .om.d1 .btn.primary:hover { background: var(--om-orange-hover); border-color: var(--om-orange-hover); }
  .bohs .om.d1 .btn.primary:active { transform: translateY(1px); }
  .bohs .om.d1 .btn:focus-visible, .bohs .om.d1 .d1-see:focus-visible { outline: var(--om-focus-ring); outline-offset: var(--om-focus-offset); }

  /* the link under the button: brown, 44px tap, left-aligned like L58's links */
  .bohs .om.d1 .d1-seewrap { text-align: left; margin: 0; }
  .bohs .om.d1 .d1-see {
    display: inline-flex; align-items: center; min-height: var(--om-tap);
    font-family: var(--om-font-utility); font-variation-settings: "wdth" 100;
    font-size: var(--om-text-small); font-weight: 500; color: var(--om-brown);
  }

  /* ---- 750: media left, copy + rail stacked right ---- */
  @media (min-width: 750px) {
    .bohs .bohs__col {
      grid-template-columns: minmax(0, 0.58fr) minmax(0, 1fr);
      grid-template-areas: "art head" "art copy" "art rail";
      column-gap: var(--om-s6); padding: var(--om-s6); align-items: center;
    }
    .bohs .om.d1 .art { max-width: none; }
    .bohs .om.d1 .d1-rail { max-width: 340px; }
    .bohs .om.d1 .btn.primary { padding: 0 var(--om-s6); }
  }

  /* ---- 990: three columns: what is in the box / what it is / the control. The two 1fr spacer
     rows keep label + title + reason one group, centred against the bottles and the rail. ---- */
  @media (min-width: 990px) {
    .bohs .bohs__col {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(280px, 340px);
      grid-template-rows: 1fr auto auto 1fr;
      grid-template-areas: "art . rail" "art head rail" "art copy rail" "art . rail";
      column-gap: var(--om-s7); row-gap: 0;
    }
    .bohs .bohs__heading { margin-bottom: var(--om-s4); }
    .bohs .om.d1 .d1-rail { max-width: none; align-self: center; }
  }
  @media (min-width: 1280px) {
    .bohs .bohs__col { padding: var(--om-s7); grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr) minmax(280px, 340px); }
  }

  /* ==========================================================================
     ROUND 2 (approved 2026-09-29): the button carries the selected option, price
     on line one, the note on line two; the savings line sits directly under it.
     Source: t2/r2-delta.css. The markup is the skin's card_layout:
     'strip_sub_first' branch. The button keeps a fixed two-line box, so a toggle
     changes only its text, never the layout.
     ========================================================================== */
  /* button carries the selected option: price on line 1, cadence on line 2; savings sits directly under it */
  .bohs .om.d1 .btn.primary { flex-direction: column; gap: 4px; padding-block: 10px; white-space: normal; text-align: center; }
  .bohs .om.d1 .btn.primary [data-cta-label] { font-size: calc(1.25 * var(--om-rem)); line-height: 1.1; }
  .bohs .om.d1 .btn.primary [data-cta-sub] { font-size: var(--om-text-small); font-weight: 500; letter-spacing: 0; line-height: 1.1; opacity: .92; }
  .bohs .om.d1 .save { margin: 0; text-align: left; }
  .bohs .om.d1 .d1-mode:not(.is-selected) .d1-mode__v { color: var(--om-ink-soft-deep); font-weight: 500; }
  .bohs .om.d1 .ctarow .save { margin-top: var(--om-s2); }
/* END_SECTION:bundle-offer-homepage-strip */

/* START_SECTION:bundle-upsell-block (INDEX:8) */
/* The section is a thin wrapper; each skin snippet ships its own card styles
     (all bound to the theme's brand tokens). Only wrapper padding + the design-
     mode hint live here, bound to the theme tokens (never a re-declared hue). */
  .bub {
    --bub-white: var(--color-primary-white, #ffffff);
    --bub-muted: var(--color-text-secondary, #808080);
    --bub-line: #d8d4cb; /* LP-local hairline - matches bundle-whats-inside (brand-tokens.md) */
    --bub-font-body: var(--bst-font-primary, "TT Norms Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif);
    /* GUTTER = the theme's own page-width grid line, not a number of our own.
       Measured on the live PDP: .page-width is 1340 wide at x=50 on a 1440
       viewport and 1180 at x=50 at 1280. This section had been using 40 / 20,
       so the card's left edge missed the product title's left edge above it by
       exactly 10px at every width.

       MOBILE CORRECTED (R-10, 2026-08-27). The 30px above was measured off the
       wrong element (`.utility-bar__grid.page-width`, which carries its own
       30px). The PDP's real content column on a 390 phone starts at x=15:
       `.product__title` and `.product__info-wrapper` both measure x=15 w=360,
       and base.css sets `.page-width { padding: 0 1.5rem }` below 750px. So the
       module was sitting 15px inboard of everything above it on every phone,
       which is its own contribution to the "floating rectangle" read.

       VERTICAL AIR (R-10). 22/32px was too thin to separate the module from its
       neighbours by air alone; on white, air IS the separation, so the rhythm
       moves to the scale the theme's own banded sections use (57-64px). */
    padding: 36px 15px;
    font-family: var(--bub-font-body);
  }
  .bub__inner { max-width: 900px; margin: 0 auto; }
  .bub--empty .bub__inner { background: var(--bub-white); border: 1px dashed var(--bub-line); border-radius: 2px; padding: 16px 18px; }
  .bub__hint { font-size: 13px; color: var(--bub-muted); margin: 0; }
  @media (min-width: 750px) { .bub { padding: 56px 50px; } }
  /* The surface headline: kicker-styled callout framing why the box exists.
     Sized in rem directly (the theme root is 62.5%, so 1.28rem = 12.8px):
     tangerine caps like honest-math's COMPLETE-THE-BUNDLE kicker, so the
     callout reads as an offer flag above whichever skin is cast. */
  .bub__heading { font-size: 1.28rem; letter-spacing: .14em; text-transform: uppercase; color: var(--om-tangerine, #FF8F1C); font-weight: 700; margin: 0 0 10px; }
/* END_SECTION:bundle-upsell-block */

/* START_SECTION:calendar-weeks (INDEX:10) */
/* L44 V16's own <style>, under the family PDP's selector contract
   (assets/section-pdp-family.css, THE CASCADE CONTRACT). Breakpoint 990 (D-073). */
section.pdp-family-scope.lego-L44-v16 { color: var(--om-ink); }
section.pdp-family-scope.lego-L44-v16 .lay { display: grid; gap: var(--om-s7); align-items: center; }
section.pdp-family-scope.lego-L44-v16 .big { margin: 0; max-width: 22ch; text-wrap: balance; }
section.pdp-family-scope.lego-L44-v16 .big em { font-style: normal; color: var(--om-species-dark); }
section.pdp-family-scope.lego-L44-v16 .month { margin: 0; display: grid; gap: var(--om-s2); }
section.pdp-family-scope.lego-L44-v16 .row { display: grid; grid-template-columns: auto repeat(7, minmax(0, 1fr)); gap: var(--om-s2); align-items: center; }
section.pdp-family-scope.lego-L44-v16 .wk { padding-right: var(--om-s3); white-space: nowrap; color: var(--om-ink-soft); }
section.pdp-family-scope.lego-L44-v16 .day { position: relative; aspect-ratio: 1 / 1; border-radius: var(--om-control-r); }
section.pdp-family-scope.lego-L44-v16 .d1 { background: color-mix(in srgb, var(--om-species-light) 0%, var(--om-species-wash)); }
section.pdp-family-scope.lego-L44-v16 .d2 { background: color-mix(in srgb, var(--om-species-light) 11%, var(--om-species-wash)); }
section.pdp-family-scope.lego-L44-v16 .d3 { background: color-mix(in srgb, var(--om-species-light) 22%, var(--om-species-wash)); }
section.pdp-family-scope.lego-L44-v16 .d4 { background: color-mix(in srgb, var(--om-species-light) 33%, var(--om-species-wash)); }
section.pdp-family-scope.lego-L44-v16 .d5 { background: color-mix(in srgb, var(--om-species-light) 44%, var(--om-species-wash)); }
section.pdp-family-scope.lego-L44-v16 .d6 { background: color-mix(in srgb, var(--om-species-light) 56%, var(--om-species-wash)); }
section.pdp-family-scope.lego-L44-v16 .d7 { background: color-mix(in srgb, var(--om-species-light) 67%, var(--om-species-wash)); }
section.pdp-family-scope.lego-L44-v16 .d8 { background: color-mix(in srgb, var(--om-species-light) 78%, var(--om-species-wash)); }
section.pdp-family-scope.lego-L44-v16 .d9 { background: color-mix(in srgb, var(--om-species-light) 89%, var(--om-species-wash)); }
section.pdp-family-scope.lego-L44-v16 .d10 { background: color-mix(in srgb, var(--om-species-mid) 0%, var(--om-species-light)); }
section.pdp-family-scope.lego-L44-v16 .d11 { background: color-mix(in srgb, var(--om-species-mid) 11%, var(--om-species-light)); }
section.pdp-family-scope.lego-L44-v16 .d12 { background: color-mix(in srgb, var(--om-species-mid) 22%, var(--om-species-light)); }
section.pdp-family-scope.lego-L44-v16 .d13 { background: color-mix(in srgb, var(--om-species-mid) 33%, var(--om-species-light)); }
section.pdp-family-scope.lego-L44-v16 .d14 { background: color-mix(in srgb, var(--om-species-mid) 44%, var(--om-species-light)); }
section.pdp-family-scope.lego-L44-v16 .d15 { background: color-mix(in srgb, var(--om-species-mid) 56%, var(--om-species-light)); }
section.pdp-family-scope.lego-L44-v16 .d16 { background: color-mix(in srgb, var(--om-species-mid) 67%, var(--om-species-light)); }
section.pdp-family-scope.lego-L44-v16 .d17 { background: color-mix(in srgb, var(--om-species-mid) 78%, var(--om-species-light)); }
section.pdp-family-scope.lego-L44-v16 .d18 { background: color-mix(in srgb, var(--om-species-mid) 89%, var(--om-species-light)); }
section.pdp-family-scope.lego-L44-v16 .d19 { background: color-mix(in srgb, var(--om-species-dark) 0%, var(--om-species-mid)); }
section.pdp-family-scope.lego-L44-v16 .d20 { background: color-mix(in srgb, var(--om-species-dark) 11%, var(--om-species-mid)); }
section.pdp-family-scope.lego-L44-v16 .d21 { background: color-mix(in srgb, var(--om-species-dark) 22%, var(--om-species-mid)); }
section.pdp-family-scope.lego-L44-v16 .d22 { background: color-mix(in srgb, var(--om-species-dark) 33%, var(--om-species-mid)); }
section.pdp-family-scope.lego-L44-v16 .d23 { background: color-mix(in srgb, var(--om-species-dark) 44%, var(--om-species-mid)); }
section.pdp-family-scope.lego-L44-v16 .d24 { background: color-mix(in srgb, var(--om-species-dark) 56%, var(--om-species-mid)); }
section.pdp-family-scope.lego-L44-v16 .d25 { background: color-mix(in srgb, var(--om-species-dark) 67%, var(--om-species-mid)); }
section.pdp-family-scope.lego-L44-v16 .d26 { background: color-mix(in srgb, var(--om-species-dark) 78%, var(--om-species-mid)); }
section.pdp-family-scope.lego-L44-v16 .d27 { background: color-mix(in srgb, var(--om-species-dark) 89%, var(--om-species-mid)); }
section.pdp-family-scope.lego-L44-v16 .d28 { background: color-mix(in srgb, var(--om-species-dark) 100%, var(--om-species-mid)); }
@media (min-width: 990px) {
  section.pdp-family-scope.lego-L44-v16 .lay { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--om-s8); }
  section.pdp-family-scope.lego-L44-v16 .month, section.pdp-family-scope.lego-L44-v16 .row { gap: var(--om-s3); }
}
/* END_SECTION:calendar-weeks */

/* START_SECTION:cb-how-it-works (INDEX:17) */
section.cbhw .cbhw__h { display: grid; gap: var(--om-s1); justify-items: center; text-align: center; margin: 0 0 var(--om-s6); }
section.cbhw .cbhw__main, section.cbhw .cbhw__alt { font-size: var(--om-text-h2); line-height: var(--om-leading-snug); }
section.cbhw .cbhw__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--om-s6); --cbhw-dot: 2.25rem; }
section.cbhw .cbhw__card { position: relative; display: grid; gap: var(--om-s3); align-content: start; padding-left: calc(var(--cbhw-dot) + var(--om-s4)); }
section.cbhw .cbhw__dot { position: absolute; left: 0; top: 0; width: var(--cbhw-dot); height: var(--cbhw-dot); border-radius: 50%;
  display: grid; place-items: center; background: var(--om-species-mid); color: var(--om-cream); z-index: 1; }
/* the thread: a line from each dot down to the next (phone timeline) */
section.cbhw .cbhw__card:not(:last-child)::before { content: ""; position: absolute; left: calc(var(--cbhw-dot) / 2 - var(--om-thread-w, 2px) / 2);
  top: var(--cbhw-dot); height: calc(100% + var(--om-s6) - var(--cbhw-dot)); width: var(--om-thread-w, 2px); background: var(--om-species-mid); }
section.cbhw .cbhw__frame { aspect-ratio: 4 / 3; width: 100%; }
section.cbhw .cbhw__t { margin: 0; }
section.cbhw .cbhw__b { margin: 0; max-width: 40ch; }
@media (min-width: 750px) {
  section.cbhw .cbhw__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--om-s6); }
  section.cbhw .cbhw__card { padding-left: 0; padding-top: calc(var(--cbhw-dot) + var(--om-s4)); text-align: center; justify-items: center; }
  section.cbhw .cbhw__dot { left: 50%; transform: translateX(-50%); }
  /* the thread runs across: from each dot to the next column's dot */
  section.cbhw .cbhw__card:not(:last-child)::before { left: calc(50% + var(--cbhw-dot) / 2); top: calc(var(--cbhw-dot) / 2 - var(--om-thread-w, 2px) / 2);
    width: calc(100% + var(--om-s6) - var(--cbhw-dot)); height: var(--om-thread-w, 2px); }
  section.cbhw .cbhw__frame { aspect-ratio: 1 / 1; }
}
/* END_SECTION:cb-how-it-works */

/* START_SECTION:education-doors (INDEX:31) */
/* Selector contract: every rule is its lego selector plus `section.pdp-family-scope`
   (assets/section-pdp-family.css, THE CASCADE CONTRACT). A port of
   legos/L52-education-bar-directions/v6.html's scoped <style> (the rules that
   survive its own later overrides: the icon doors on brown), breakpoints on
   750 / 990 / 1280 (D-073). */
section.pdp-family-scope.lego-L52-v6 { background: var(--om-brown); color: var(--om-cream); padding-block: calc(var(--om-section-y) * 0.75); }
section.pdp-family-scope.lego-L52-v6 .row { display: grid; gap: var(--om-s6); align-items: center; }
section.pdp-family-scope.lego-L52-v6 .statement { margin: 0; text-align: center; text-wrap: balance; color: var(--om-cream); }
section.pdp-family-scope.lego-L52-v6 .doors { display: grid; gap: var(--om-s3); margin: 0; padding: 0; list-style: none; }
section.pdp-family-scope.lego-L52-v6 .door {
  display: flex; align-items: center; gap: var(--om-s3);
  width: 100%; min-height: var(--om-tap);
  padding: var(--om-s3) var(--om-s4) var(--om-s3) var(--om-s3);
  color: var(--om-cream); background: transparent; text-align: left; cursor: pointer;
  font-family: var(--om-font-utility); font-size: var(--om-text-body); line-height: var(--om-leading-snug);
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--om-cream) 55%, transparent);
  border-radius: 0 var(--om-frame-r-md-fixed) 0 var(--om-frame-r-md-fixed);
  transition: background-color var(--om-dur) var(--om-ease), border-color var(--om-dur) var(--om-ease);
}
section.pdp-family-scope.lego-L52-v6 .door:hover { background-color: color-mix(in srgb, var(--om-cream) 10%, transparent); border-color: var(--om-cream); }
section.pdp-family-scope.lego-L52-v6 .door:focus-visible { outline-offset: 3px; }
section.pdp-family-scope.lego-L52-v6 .door img { flex: 0 0 auto; width: var(--om-s7); height: var(--om-s7); margin-block: calc(-1 * var(--om-s2)); }
section.pdp-family-scope.lego-L52-v6 .door .label { flex: 1 1 auto; }
section.pdp-family-scope.lego-L52-v6 .door .arrow { flex: 0 0 auto; width: var(--om-s5); height: var(--om-s5); }
@media (min-width: 990px) {
  section.pdp-family-scope.lego-L52-v6 .row { grid-template-columns: max-content minmax(0, 1fr); gap: var(--om-s5); }
  section.pdp-family-scope.lego-L52-v6 .door .label { white-space: nowrap; }
  section.pdp-family-scope.lego-L52-v6 .statement { text-align: left; white-space: nowrap; }
  section.pdp-family-scope.lego-L52-v6 .doors { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--om-s4); }
  /* Bundle mode (design review 2026-09-30): "Trace these bottles" is longer
     than the equal 1fr track, so the nowrap label pushed the arrow outside the
     border at 1440. Each door sizes to its own label instead, and a label may
     wrap before it overflows on a narrow desktop. */
  section.pdp-family-scope.lego-L52-v6 .doors--fit { grid-auto-columns: auto; }
  section.pdp-family-scope.lego-L52-v6 .doors--fit .door .label { white-space: normal; text-wrap: balance; }
}
/* Bundle mode, 990-1279: the statement plus three content-sized doors do not
   fit on one row, so the doors take their own row under the statement. */
@media (min-width: 990px) and (max-width: 1279px) {
  section.pdp-family-scope.lego-L52-v6 .row:has(> .doors--fit) { grid-template-columns: minmax(0, 1fr); }
  section.pdp-family-scope.lego-L52-v6 .row:has(> .doors--fit) .statement { text-align: center; }
}
/* The report card (L50 V3 / L34 V1), carried unchanged; its panel is cream on the brown band. */
section.pdp-family-scope.lego-L52-v6 .om-modal { color: var(--om-ink); }
section.pdp-family-scope.lego-L52-v6 .om-modal-scrim[hidden] { display: none; }
section.pdp-family-scope.lego-L52-v6 dl, section.pdp-family-scope.lego-L52-v6 dd { margin: 0; }
section.pdp-family-scope.lego-L52-v6 .l50-head {
  padding: var(--om-s5) var(--om-s5) var(--om-s4);
  padding-right: calc(var(--om-s5) + var(--om-tap));
  border-bottom: 1px solid var(--om-line);
}
section.pdp-family-scope.lego-L52-v6 .l50-rec { display: grid; gap: var(--om-s4); align-items: start; }
@media (min-width: 750px) {
  section.pdp-family-scope.lego-L52-v6 .l50-head {
    padding: var(--om-s6) var(--om-s6) var(--om-s4);
    padding-right: calc(var(--om-s6) + var(--om-tap));
  }
  section.pdp-family-scope.lego-L52-v6 .l50-rec { grid-template-columns: 160px minmax(0, 1fr); column-gap: var(--om-s5); }
}
section.pdp-family-scope.lego-L52-v6 .l50-shot {
  position: relative; width: 160px; aspect-ratio: 1 / 1;
  background: var(--om-cream-deep);
  border-radius: 0 var(--om-frame-r-md-fixed) 0 var(--om-frame-r-md-fixed);
  overflow: hidden;
}
section.pdp-family-scope.lego-L52-v6 .l50-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
section.pdp-family-scope.lego-L52-v6 .l50-cells { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--om-s2); }
section.pdp-family-scope.lego-L52-v6 .l50-cell { display: contents; }
section.pdp-family-scope.lego-L52-v6 .l50-cells dt { padding-top: 0.18em; }
@media (min-width: 750px) {
  section.pdp-family-scope.lego-L52-v6 .l50-cells { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--om-s4); align-items: baseline; row-gap: var(--om-s5); }
}
/* Bundle mode (wi-2026-0939): one record per component, each headed by its
   name across the full row, a hairline between records. No single-product
   card has an h3 or a second record, so these match nothing there. */
section.pdp-family-scope.lego-L52-v6 .l50-rec > h3 { grid-column: 1 / -1; margin: 0; }
section.pdp-family-scope.lego-L52-v6 .l50-rec + .l50-rec { margin-top: var(--om-s5); padding-top: var(--om-s5); border-top: var(--om-hairline); }
section.pdp-family-scope.lego-L52-v6 .l50-source { margin-top: var(--om-s5); padding-top: var(--om-s4); border-top: 1px solid var(--om-line); }
/* END_SECTION:education-doors */

/* START_SECTION:fit-strip (INDEX:38) */
/* L19 V6's own <style>, verbatim in every declaration, under the family PDP's
   selector contract (assets/section-pdp-family.css, THE CASCADE CONTRACT).
   The rules that styled only the lego's Calm-family demonstration (the second
   instance, its review caption, its heading reservation) leave with it, as the
   composed page drops that instance. */
section.pdp-family-scope.lego-L19-v6 .measure { width: min(100%, var(--om-doc-max)); }
@media (min-width: 990px) {
  section.pdp-family-scope.lego-L19-v6 .measure { width: 100%; }
}
section.pdp-family-scope.lego-L19-v6 h2 { margin-bottom: var(--om-s5); }
section.pdp-family-scope.lego-L19-v6 .voices { display: grid; gap: var(--om-s5); grid-template-columns: 1fr; }
@media (min-width: 750px) {
  section.pdp-family-scope.lego-L19-v6 .voices { grid-template-columns: 1fr 1fr; gap: var(--om-s6); }
}
section.pdp-family-scope.lego-L19-v6 .voice { padding: var(--om-s5); border: 1px solid transparent; }
@media (min-width: 750px) {
  section.pdp-family-scope.lego-L19-v6 .voice { padding: var(--om-s6); }
}
@media (min-width: 990px) {
  section.pdp-family-scope.lego-L19-v6 .voice { padding: var(--om-s7); }
}
section.pdp-family-scope.lego-L19-v6 .voice--not { border-color: var(--om-line); }
section.pdp-family-scope.lego-L19-v6 .voice h3 { margin-bottom: var(--om-s4); }
section.pdp-family-scope.lego-L19-v6 .items > li { position: relative; padding-left: var(--om-s5); max-width: var(--om-measure); font-size: var(--om-text-lead); }
section.pdp-family-scope.lego-L19-v6 .items > li + li { margin-top: var(--om-s5); }
section.pdp-family-scope.lego-L19-v6 .items > li::before { content: ""; position: absolute; left: 0; background: var(--om-brown); }
section.pdp-family-scope.lego-L19-v6 .items--for > li::before { top: 0.6em; width: var(--om-thread-dot); height: var(--om-thread-dot); border-radius: 50%; }
section.pdp-family-scope.lego-L19-v6 .items--not > li::before { top: 0.78em; width: var(--om-s4); height: 2px; }
@media (min-width: 990px) {
  section.pdp-family-scope.lego-L19-v6 .items > li { font-size: var(--om-text-lead); }
}
section.pdp-family-scope.lego-L19-v6 .links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--om-s2); margin-top: var(--om-s5); font-size: var(--om-text-lead); }
section.pdp-family-scope.lego-L19-v6 .links a { display: inline-flex; align-items: center; min-height: var(--om-tap); max-width: 100%; }
/* END_SECTION:fit-strip */

/* START_SECTION:format-strip (INDEX:40) */
/* PROVISIONAL: values replaced from LEGO-LOCK-REGISTER.md when this lego locks */
/*
  A MECHANICAL PORT of legos/L26-formats-pairings/v1.html's own <style> block
  plus the base.css primitives its markup leans on (.om-section / .om-inner /
  .om-frame / .om-subhead / .om-small / .om-soft and the bare `a` rule). Nothing
  was re-authored, re-spaced or re-scaled: only the var() NAMES changed, per
  .frontend-build/brand-tokens.md. A bound role points at the THEME variable; an
  unbound role points at assets/web-legos-provisional-tokens.css.

  THE ANCHOR PRIMITIVE IS PORTED SCOPED, and it has to be: base.css's own `a`
  rule (color: inherit; text-decoration-color; text-underline-offset) lives in
  the LEGOS' base.css, not the theme's, and chrome owns the theme file. Left
  unported the theme paints this link user-agent blue — a hue the brand book does
  not have. That is batch 2's self-caught fit-strip lesson, applied up front. A
  link is a change of UNDERLINE, never of hue; this one's underline takes the
  species dark stop, which is the lego's own override of the primitive.

  DROPPED, with reason: font-variation-settings: "wdth" var(--om-scale-width) on
  the Scale role. Scale VF is NOT served on the web rail (D-030) and the theme
  pins Bricolage to wdth=100 inside font-face.liquid. Same drop as every section
  in this unit.

  THREE LITERALS KEPT, each with a reason, none invented:
    · 1.5px on the keyline — --om-keyline is "1.5px solid brown"; brand-tokens.md
      §6 records that the COLOUR binds but no border-WIDTH token exists. Every row
      carries the same border box with a transparent colour so the marked row
      never nudges the type; only the colour changes.
    · 1px on the row hairline — the same §6 reason, and base.css carries the same
      literal "by necessity, not by shortcut".
    · the 1.8em icon column and the 0.15em optical nudge — the lego's own
      untokenized values, listed as such in its CONTRACT under "Untokenized
      values (none is a colour or a face)". The icon reads at TEXT size, far
      under --om-glyph-sm's 32px, which at this scale would read as an
      illustration rather than as part of the sentence.

  ZERO VITAL ORANGE, measured by the lego as 0 elements on V1 and true here: the
  accent is never a "you are here" device. The current-row marker is the keyline.

  BREAKPOINT DEVIATION, recorded not hidden: Dawn's real breakpoints are 750, 990
  and 1280 (D-011 v2). This section keeps the lego's NATIVE 768px, because
  decision 14 and adjudication 11 name it DECIDED structure and say do not
  normalise it. 768 is not one of the five verify viewports, so the type step is
  asserted EXPLICITLY at 767/768 in the real-browser pass.
*/

.format-strip { padding-block: var(--om-section-y); }

/* ---- the strip ---------------------------------------------------------
   One field, three rows, hairlines between. Padding is deliberately tight
   because the whole point of the piece is how little room it takes.
   The Frame rounds top-right + bottom-left only (D-017 Option A), md tier. */
.format-strip__strip {
  list-style: none;
  margin: 0;
  padding-inline: 0;
  padding-block: var(--s1);
  background: var(--soft);
  border-radius: 0 var(--om-frame-r-md) 0 var(--om-frame-r-md);
  overflow: hidden;
}

.format-strip__fmt {
  /* the icon rides in its own narrow column rather than inside the text flow: an
     inline image taller than the line box inflates every first line, and the
     whole argument for this piece is the height it does NOT take (the lego
     measured 175px -> 148px at 375 for the same icon size) */
  display: grid;
  grid-template-columns: 1.8em 1fr;
  column-gap: var(--s1);
  align-items: start;
  padding: var(--om-s1) var(--s2);
  /* the same border box on every row so the marked row does not nudge the type */
  border-inline-start: 1.5px solid transparent;
}
.format-strip__fmt + .format-strip__fmt { border-top: 1px solid var(--line); }

/* THE ONE MARKER: the keyline on the row's leading edge plus the cream lift out
   of the cream-deep field. No orange — the accent is not a "you are here"
   device. The attribute is the structure; this is only its visual echo. */
.format-strip__fmt[aria-current="true"] {
  border-inline-start-color: var(--brown);
  background: var(--cream);
}

/* ---- the sentence ------------------------------------------------------
   The small step at the floor is what buys the height budget; it steps up to
   body size from 768 where there is room. The hanging indent keeps a wrapped
   second line aligned to the type rather than tucking it under the icon. */
.format-strip__line {
  margin: 0;
  font-family: var(--font-read);
  font-size: var(--om-text-small);
  line-height: var(--om-leading-snug);
  max-width: var(--bw-prose);
}
/* full ink on both halves, not ink-soft: the face change (Scale name, Acumin
   clause) does the separating, and this is the only sentence the strip has. */
.format-strip__name {
  font-family: var(--font-utility);
  font-weight: var(--om-subhead-weight);
  letter-spacing: var(--om-subhead-tracking);
  font-size: inherit;
  color: var(--ink);
}
.format-strip__for { color: var(--ink); }

/* The icon's own column, holding a labelled reservation rather than a picture:
   the three brand icons are real and approved but are not in this theme's
   assets/. Dashed, so it reads as reserved rather than as an empty tile, and
   NOT data-fpo — the asset is real, it just has not been delivered here. */
.format-strip__ico {
  width: 100%;
  aspect-ratio: 1 / 1;
  margin-top: 0.15em;
  border: 1px dashed var(--line);
  border-radius: var(--btr);
}

/* ---- the link line, outside the field ---------------------------------- */
.format-strip__link-line {
  margin: var(--om-s3) 0 0;
  max-width: var(--bw-prose);
  font-family: var(--font-read);
  font-size: var(--om-text-small);
  line-height: var(--om-leading-body);
  color: var(--mute);
}

/* base.css's anchor primitive, ported scoped. See the note at the top. */
.format-strip a {
  color: inherit;
  text-decoration-color: var(--mute);
  text-underline-offset: 0.15em;
}
.format-strip a:hover { text-decoration-color: var(--ink); }
/* NOTE the compound selector, and why it is not decoration: in the lego the
   primitive is the bare `a` (0,0,1) and the override is `.lego-L26-v1 .cmp-link`
   (0,2,0), so the override wins. SCOPING the primitive to `.format-strip a`
   makes it (0,1,1), which beats a lone `.format-strip__link` (0,1,0) and
   silently reverted this underline to --mute. Caught by the assertion below, not
   by eye. Qualifying the link with its own section restores the lego's
   relationship at (0,2,1). Any section porting a base.css primitive scoped has
   to re-check every override the primitive competes with. */
.format-strip a.format-strip__link {
  display: inline-block;
  padding-block: var(--s1);          /* the tap area, without a 44px box in a sentence */
  text-decoration-color: var(--lm-dark);
}

.format-strip__note {
  margin: var(--om-s3) 0 0;
  max-width: var(--bw-prose);
  font-family: var(--font-read);
  font-size: var(--om-text-small);
  line-height: var(--om-leading-body);
  color: var(--mute);
}

/* The lego's NATIVE breakpoint. See the deviation note at the top of this block. */
@media (min-width: 768px) {
  .format-strip__strip { padding-block: var(--om-s3); }
  .format-strip__fmt { padding: var(--s1) var(--s3); }
  .format-strip__line {
    font-size: var(--t-body);
    line-height: var(--om-leading-body);
  }
  .format-strip__link-line { margin-top: var(--s2); }
}
/* END_SECTION:format-strip */

/* START_SECTION:format-switcher (INDEX:41) */
/* Selector contract: every rule is its lego selector plus `section.pdp-family-scope`
   (assets/section-pdp-family.css, THE CASCADE CONTRACT), so the lego's own
   cascade holds against the primitives whatever order the links land in. */
/* A MECHANICAL PORT of legos/L48-family-compare-band/v3.html's scoped <style>,
   as carried into L45 v13. Only the var() names resolve differently. */
section.pdp-family-scope.lego-L48-v3 { font-family: var(--om-font-utility); }
section.pdp-family-scope.lego-L48-v3 {
  padding-block: var(--om-s6);
  border-top: 1px solid var(--om-line);
  border-bottom: 1px solid var(--om-line);
}
section.pdp-family-scope.lego-L48-v3 .row > * + * { margin-top: var(--om-s5); }
section.pdp-family-scope.lego-L48-v3 .lead { margin: 0; }
section.pdp-family-scope.lego-L48-v3 .act { margin: var(--om-s2) 0 0; }
section.pdp-family-scope.lego-L48-v3 .act a {
  display: inline-flex;
  align-items: center;
  min-height: var(--om-tap);
  max-width: 100%;
  color: var(--om-ink);
  font-size: var(--om-text-lead);
  text-decoration-thickness: from-font;
  text-underline-offset: 0.18em;
}
section.pdp-family-scope.lego-L48-v3 .act a:hover { color: var(--om-species-dark); }
section.pdp-family-scope.lego-L48-v3 .members {
  margin: 0;
  font-size: var(--om-text-small);
}
/* Hit area only (see the Liquid note): vertical padding on an inline link never
   changes its line box, so nothing visible moves. It runs DOWNWARD: measured at
   375 on the rendered candidate, the "Compare the family" link's 44px box ends
   3px above these names, and the section edge is 37px below them. 2px + the
   15px glyph box + 28px = 45px, touching neither. */
section.pdp-family-scope.lego-L48-v3 .members--tap a { padding-block: 2px 28px; }
@media (min-width: 750px) {
  section.pdp-family-scope.lego-L48-v3 {
    padding-block: var(--om-s7);
  }
  section.pdp-family-scope.lego-L48-v3 .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--om-s5) var(--om-s7);
  }
  section.pdp-family-scope.lego-L48-v3 .row > * + * { margin-top: 0; }
  section.pdp-family-scope.lego-L48-v3 .lead-block { max-width: var(--om-measure); }
}
/* END_SECTION:format-switcher */

/* START_SECTION:full-spectrum (INDEX:42) */
/* L43 V8's own <style>, verbatim in every declaration, under the family PDP's
   selector contract (assets/section-pdp-family.css, THE CASCADE CONTRACT). */
section.pdp-family-scope.lego-L43-v8 .figure { margin: 0; }
section.pdp-family-scope.lego-L43-v8 .plate { aspect-ratio: 4 / 5; }
section.pdp-family-scope.lego-L43-v8 .plate .om-cover { object-position: center; }
section.pdp-family-scope.lego-L43-v8 .quote { margin: 0; position: relative; z-index: 1; background: var(--om-cream); padding: var(--om-s5); }
section.pdp-family-scope.lego-L43-v8 .quote { margin-top: calc(-1 * var(--om-s8)); margin-inline: var(--om-s4); }
section.pdp-family-scope.lego-L43-v8 .quote > p { text-wrap: balance; }
section.pdp-family-scope.lego-L43-v8 .quote > p { color: var(--om-species-dark); }
section.pdp-family-scope.lego-L43-v8 .q-mark { display: flex; align-items: center; gap: var(--om-s2); margin-bottom: var(--om-s5); }
section.pdp-family-scope.lego-L43-v8 .q-mark::after { content: ""; display: block; width: var(--om-s7); border-top: var(--om-thread-w) solid var(--om-ink); }
section.pdp-family-scope.lego-L43-v8 .text { margin-top: var(--om-s7); }
section.pdp-family-scope.lego-L43-v8 .para { margin-top: var(--om-s5); }
section.pdp-family-scope.lego-L43-v8 .para { text-wrap: pretty; }
section.pdp-family-scope.lego-L43-v8 .para { max-width: calc((var(--om-measure) + var(--om-measure-short)) / 2); }
section.pdp-family-scope.lego-L43-v8 .foot-rule { margin-top: var(--om-s8); }
section.pdp-family-scope.lego-L43-v8 .foot { display: flex; flex-direction: column; align-items: flex-start; gap: var(--om-s4) 0; margin-top: var(--om-s5); }
section.pdp-family-scope.lego-L43-v8 .foot .sep { display: none; }
section.pdp-family-scope.lego-L43-v8 .foot-item { display: block; }
section.pdp-family-scope.lego-L43-v8 .foot-item > a { display: flex; align-items: center; min-height: var(--om-tap); }
@media (min-width: 750px) {
  section.pdp-family-scope.lego-L43-v8 .foot { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0 var(--om-s4); }
  section.pdp-family-scope.lego-L43-v8 .foot .sep { display: inline; }
  section.pdp-family-scope.lego-L43-v8 .foot-item { display: inline-flex; align-items: center; }
  section.pdp-family-scope.lego-L43-v8 .foot-item > a { display: inline-flex; }
}
@media (min-width: 990px) {
  section.pdp-family-scope.lego-L43-v8 .spread { font-size: var(--om-text-lead); display: grid; grid-template-columns: calc((var(--om-measure) + var(--om-measure-short)) / 2) minmax(0, 1fr); column-gap: var(--om-s5); }
  section.pdp-family-scope.lego-L43-v8 .figure { grid-column: 2; grid-row: 1; align-self: stretch; }
  section.pdp-family-scope.lego-L43-v8 .plate { width: 100%; aspect-ratio: 4 / 5; min-height: 100%; }
  section.pdp-family-scope.lego-L43-v8 .text { grid-column: 1; grid-row: 1; align-self: start; margin-top: 0; margin-bottom: calc(var(--om-s7) + var(--om-s5)); }
  section.pdp-family-scope.lego-L43-v8 .quote { grid-column: 1; grid-row: 2; width: calc(100% + var(--om-s5) + var(--om-s7)); margin: 0; margin-top: calc(-1 * var(--om-s7)); margin-inline: 0; padding: var(--om-s6); }
  section.pdp-family-scope.lego-L43-v8 .foot-rule { grid-column: 1 / -1; grid-row: 3; }
  section.pdp-family-scope.lego-L43-v8 .foot { grid-column: 1 / -1; grid-row: 4; }
}
@media (min-width: 1280px) {
  section.pdp-family-scope.lego-L43-v8 .spread { column-gap: var(--om-s6); }
  section.pdp-family-scope.lego-L43-v8 .plate { aspect-ratio: 7 / 8; }
  section.pdp-family-scope.lego-L43-v8 .text { align-self: center; margin-bottom: calc(var(--om-s9) + var(--om-s7)); }
  section.pdp-family-scope.lego-L43-v8 .quote { width: calc(100% + var(--om-s6) + var(--om-s9) + var(--om-s6)); margin-top: calc(-1 * (var(--om-s9) + var(--om-s6))); }
}
/* END_SECTION:full-spectrum */

/* START_SECTION:home-recently-viewed (INDEX:46) */
.hrv {
    /* Bind to the theme's existing brand tokens — never a raw hue. */
    --hrv-forest: var(--color-primary-forest, #284734);
    --hrv-beige: var(--color-primary-beige, #F1E7DB);
    --hrv-white: var(--color-primary-white, #ffffff);
    --hrv-ink: var(--color-text-main, #232323);
    --hrv-muted: var(--color-text-secondary, #808080);
    --hrv-line: #d8d4cb; /* LP-local hairline (brand-tokens.md) */
    --hrv-font-display: var(--bst-font-secondary, "IvyPresto Headline", Georgia, serif);
    --hrv-font-body: var(--bst-font-primary, "TT Norms Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif);
    font-family: var(--hrv-font-body);
    color: var(--hrv-ink);
  }
  .hrv__heading {
    font-family: var(--hrv-font-display);
    font-weight: 300;
    font-size: 26px;
    line-height: 1.15;
    text-align: center;
    color: var(--hrv-ink);
    margin: 0 0 20px;
  }
  .hrv__grid {
    display: grid;
    grid-template-columns: repeat(var(--hrv-cols-mobile, 2), minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
  }
  .hrv__cell { margin: 0; }
  .hrv__card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-decoration: none;
    color: inherit;
    background: var(--hrv-white);
    border: 1px solid var(--hrv-line);
    border-radius: 2px; /* locked brand interactive radius */
    padding: 12px;
    height: 100%;
  }
  .hrv__media {
    display: block;
    aspect-ratio: 1 / 1;
    background: var(--hrv-beige);
    border-radius: 2px;
    overflow: hidden;
  }
  .hrv__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }
  .hrv__img--placeholder { display: grid; place-items: center; }
  .hrv__placeholder-svg { width: 60%; height: 60%; opacity: 0.5; }
  .hrv__title {
    font-size: 14px;
    line-height: 1.35;
    font-weight: 600;
    color: var(--hrv-ink);
  }
  .hrv__price {
    font-size: 13.5px;
    color: var(--hrv-muted);
  }
  .hrv__cell--hint { grid-column: 1 / -1; }
  .hrv__hint {
    font-size: 13px;
    color: var(--hrv-muted);
    border: 1px dashed var(--hrv-line);
    border-radius: 2px;
    padding: 12px;
    margin: 0;
  }
  @media (min-width: 750px) {
    .hrv__grid {
      grid-template-columns: repeat(var(--hrv-cols-desktop, 4), minmax(0, 1fr));
      gap: 24px;
    }
    .hrv__heading { font-size: 32px; margin-bottom: 28px; }
  }
/* END_SECTION:home-recently-viewed */

/* START_SECTION:lp-announcement-strip (INDEX:57) */
/* ==========================================================================
     A2 "editorial-bold" styling for the announcement strip.
     Source of craft: nate/.../styled/phase-1/announcement-strip.html.
     Direction (operator 2026-05-30): the strip is a TANGERINE TINT bar with
     FOREST ink — deliberately NOT forest-on-forest and NOT the #FF8F1C CTA
     orange — so it reads as page CHROME that pops on scroll, distinct from the
     forest hero/buy-box surfaces below it.
     ========================================================================== */
  .lp-announce {
    /* Brand BASE tokens: map to theme vars with a hex fallback so the strip
       follows the theme palette but never breaks if a var is absent (B's pattern).
       All vars are scoped to this section root class — nothing leaks to :root. */
    --lp-forest: var(--color-primary-forest, #284734);
    --lp-tangerine: var(--color-primary-tangerine, #FF8F1C);
    --lp-beige: var(--color-primary-beige, #F1E7DB);

    /* DERIVED tints/shades (ADR-9 — computed derivatives of tangerine, allowed
       as literal hex). The TINT is the bar surface; the shades drive dismiss
       state hierarchy. */
    --lp-tangerine-tint-20: #FFB66B;  /* lighten ~20% — the bar surface */
    --lp-tangerine-shade-10: #E6810F; /* darken 10% — dismiss hover */
    --lp-tangerine-shade-20: #CC7308; /* darken 20% — dismiss pressed */

    /* Editorial faces: display for the offer emphasis, body for the message.
       Mapped to theme font vars with the locked Bex stack as fallback. */
    --lp-font-display: var(--bst-font-secondary, "IvyPresto Headline", Georgia, "Times New Roman", serif);
    --lp-font-body: var(--font-body-family, "TT Norms Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif);

    position: sticky; top: 0; z-index: 10;
    /* Full-bleed: break out of the #MainContent 1240px frame so the bar spans
       the FULL browser width (operator 2026-06-22, template-level change). 100vw
       + symmetric negative margins; paired with body{overflow-x:clip} in
       lp.liquid to absorb scrollbar-width jitter WITHOUT breaking position:sticky
       (clip, unlike hidden, doesn't create a scroll container). */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    display: flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 40px; padding: 8px 48px 8px 16px; /* right padding reserves the dismiss tap target */

    /* Tangerine TINT surface (#FFB66B), forest ink. Forest on #FFB66B = 5.96:1
       (passes WCAG AA 4.5:1). This is the operator-locked banner color. */
    background: var(--lp-tangerine-tint-20);
    color: var(--lp-forest);

    /* Letter-spacing carries the editorial polish (a small-caps feel without
       shrinking the type). TT Norms Pro holds tracking well. */
    font-family: var(--lp-font-body);
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0.012em;
    text-align: center;
  }

  /* Dismissed state — toggled by lp-page.js (user closed it, or a remembered
     session). Hides the chrome <aside> only; the served first-paint HTML always
     contains the data-lp message (SP-4 spirit — never display:none the message). */
  .lp-announce.lp-announce--dismissed { display: none; }

  .lp-announce__msg {
    display: inline-block;
    line-height: 1.35;
  }
  /* The offer term sits in the display face (italic) so the value beat lands on
     the FACE, not on a color shift — the Magic Mind editorial-weight move,
     translated to a single-line chrome bar. Stays forest ink on the tint. */
  .lp-announce__msg b {
    font-family: var(--lp-font-display);
    font-weight: 500;   /* IvyPresto display 500 = the "editorial-medium" weight */
    font-style: italic;
    font-size: 15px;
    letter-spacing: 0;
    color: var(--lp-forest);
  }

  /* Dismiss control — real <button>, 44x44 tap target, inside the strip's
     reserved right padding. State hierarchy via tangerine shades (ADR-9). */
  .lp-announce__dismiss {
    position: absolute; right: 0; top: 0;
    min-height: 44px; min-width: 44px; padding: 0 14px;
    background: transparent; color: var(--lp-forest);
    border: 0; font: inherit; font-size: 20px; line-height: 1; cursor: pointer;
    /* Motion kept under the 200ms budget (D8). */
    transition: background-color 160ms ease, color 160ms ease;
  }
  .lp-announce__dismiss:hover { background: var(--lp-tangerine-shade-10); }
  .lp-announce__dismiss:active { background: var(--lp-tangerine-shade-20); }
  .lp-announce__dismiss:focus-visible {
    /* Forest focus ring reads reliably against the tangerine tint. */
    outline: 2px solid var(--lp-forest);
    outline-offset: -3px;
  }

  /* Respect reduced motion: drop the state transition when the user opts out. */
  @media (prefers-reduced-motion: reduce) {
    .lp-announce__dismiss { transition: none; }
  }

  /* Desktop expansion — single 750px breakpoint, mobile-first (D35). */
  @media (min-width: 750px) {
    .lp-announce { font-size: 14px; min-height: 42px; letter-spacing: 0.018em; }
    .lp-announce__msg b { font-size: 16px; }
  }
/* END_SECTION:lp-announcement-strip */

/* START_SECTION:lp-buy-box (INDEX:58) */
.lp-buybox {
    /* base brand tokens — inherit the live theme palette, hex fallback keeps the section standalone-renderable */
    --lp-forest: var(--color-primary-forest, #284734);
    --lp-tangerine: var(--color-primary-tangerine, #FF8F1C);
    --lp-beige: var(--color-primary-beige, #F1E7DB);
    --lp-white: var(--color-primary-white, #ffffff);
    --lp-ink: var(--color-text-main, #232323);
    /* A1 neutrals (no theme token) */
    --lp-muted: #6f6b62;
    --lp-line: #d8d4cb;
    /* derived tints/shades (ADR-9, literal — computed derivatives of the base tokens) */
    --lp-forest-shade-10: #243F2F;     /* opt hover border */
    --lp-forest-tint-30: #E9EFE9;      /* selected purchase-type fill (pale forest) */
    --lp-beige-shade-10: #D9CFC1;      /* cadence rules */
    --lp-tangerine-tint-30: #FFC18E;   /* closing kicker ink (on forest) */
    --lp-tangerine-tint-85: #FCEFE0;   /* selected plan-card fill (pale peach, subtle) */
    --lp-tangerine-shade-10: #E6810F;  /* ATC hover */
    --lp-tangerine-shade-20: #CC7308;  /* ATC active */
    --lp-font-display: var(--bst-font-secondary, "IvyPresto Headline", Georgia, serif);
    --lp-font-body: var(--bst-font-primary, "TT Norms Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif);
    padding: 36px 18px 48px;
    background: var(--lp-beige);
    color: var(--lp-ink);
    font-family: var(--lp-font-body);
  }
  /* Closing instance — forest field, reverse-contrast (Magic Mind dark-section-on-close). */
  .lp-buybox--slot-closing { background: var(--lp-forest); }

  /* Closing kicker — quiet uppercase line above the h2 (editorial print kicker). Closing only. */
  .lp-buybox__kicker { text-align: center; font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--lp-tangerine-tint-30); margin: 0 0 14px; }

  .lp-buybox__h2 { font-family: var(--lp-font-display); font-weight: 300; font-size: 30px; line-height: 1.08; letter-spacing: -0.005em; text-align: center; margin: 0 0 22px; color: var(--lp-ink); }
  .lp-buybox__h2 em { font-style: italic; color: var(--lp-forest); }
  .lp-buybox--slot-closing .lp-buybox__h2 { color: var(--lp-beige); font-size: 28px; margin-bottom: 12px; }
  .lp-buybox--slot-closing .lp-buybox__h2 em { color: var(--lp-tangerine); }

  .lp-buybox__grid { display: flex; flex-direction: column; gap: 22px; margin: 0; }
  /* slot-main: product image + panel are ONE flush card filling the frame — no white gap. */
  .lp-buybox--slot-main .lp-buybox__grid { gap: 0; border: 1px solid var(--lp-line); border-radius: 6px; overflow: hidden; background: var(--lp-white); }
  .lp-buybox--slot-main .lp-buybox__media { border: none; border-radius: 0; }
  .lp-buybox--slot-main .lp-buybox__panel { border: none; border-radius: 0; }
  .lp-buybox--slot-closing .lp-buybox__grid { max-width: 640px; gap: 20px; margin: 0 auto; }   /* center the condensed closing panel in the forest band */

  .lp-buybox__media { background: var(--lp-white); border: 1px solid var(--lp-line); border-radius: 4px; min-height: 220px; display: flex; align-items: center; justify-content: center; color: var(--lp-muted); font-size: 12px; overflow: hidden; }
  .lp-buybox__media-img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .lp-buybox__media-ph { color: var(--lp-muted); font-size: 12px; }

  .lp-buybox__panel { background: var(--lp-white); border: 1px solid var(--lp-line); border-radius: 4px; padding: 26px 22px; }
  /* Center buy-box content when there's no image beside it: the closing instance (all widths)
     and the main instance on mobile (image stacks above). Skio + the welcome checklist stay
     left-aligned; the ATC is full-width. Desktop main reverts to left (image sits beside it). */
  .lp-buybox__panel { text-align: center; }
  .lp-buybox__perday { justify-content: center; }
  .lp-buybox__skio, .lp-buybox__welcome { text-align: left; }

  .lp-buybox__name { font-family: var(--lp-font-display); font-weight: 300; font-size: 20px; line-height: 1.15; margin: 0 0 6px; color: var(--lp-ink); text-align: left; }
  .lp-buybox__name .adapt { color: var(--lp-muted); font-family: var(--lp-font-body); font-size: 11.5px; letter-spacing: 0.02em; display: block; margin-top: 4px; }

  .lp-buybox__rating { display: flex; align-items: center; gap: 8px; margin: 8px 0 18px; min-height: 18px; }
  .lp-buybox__stars { color: var(--lp-tangerine); font-size: 15px; letter-spacing: 2px; line-height: 1; }
  .lp-buybox__rating-count { color: var(--lp-muted); font-size: 13px; }

  /* (Static LP purchase-type radios + their control-label/opt styles removed 2026-06-01 —
     Skio owns the purchase selector now; O-002 reconciliation.) */

  /* Skio zone — Skio's plan picker + purchase + cadence selector render here; LP only frames the spacing (Decision 9). */
  .lp-buybox__skio { margin: 8px 0 18px; }

  /* Welcome-kit slot — tangerine left rail marks it as the load-bearing offer panel (Olipop move).
     A <ul> from C renders as a checked stack; a plain line renders as-is. data-lp markup unchanged. */
  .lp-buybox__welcome { background: var(--lp-beige); border-left: 4px solid var(--lp-tangerine); border-radius: 0 4px 4px 0; padding: 14px 16px; font-size: 13.5px; line-height: 1.55; margin: 0 0 18px; color: var(--lp-ink); }
  .lp-buybox__welcome ul { margin: 0; padding: 0 0 0 4px; list-style: none; }
  .lp-buybox__welcome li { position: relative; padding-left: 22px; margin: 6px 0; }
  .lp-buybox__welcome li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--lp-forest); font-weight: 700; }

  /* (LP cadence container + note removed 2026-06-01 — Skio renders the cadence selector; OQ-B-1.) */

  /* Per-day comparison anchor (Magic Mind): display-italic number + body comparison phrase. */
  .lp-buybox__perday { display: flex; align-items: baseline; gap: 10px; font-size: 13.5px; color: var(--lp-muted); margin: 0 0 20px; padding: 4px 0; }
  .lp-buybox__perday strong { font-family: var(--lp-font-display); font-style: italic; font-weight: 300; font-size: 22px; color: var(--lp-forest); line-height: 1; }

  /* ATC — REUSED theme button (snippets/buy-buttons.liquid: .product-form__submit), styled brand-locked
     HERE because section-main-product.css (where the theme's button + price-in-button styles live) is not
     loaded on the LP layout. Tangerine fill + forest ink (4.51:1 AA; matches the live OM button, operator
     2026-05-30), forest accent rule animating to full width on hover. The price rides INSIDE the button
     (.product-form__submit--price) exactly like the PDP; Skio rewrites .product-form__submit--current-price. */
  .lp-buybox__buy { margin: 8px 0 0; }
  .lp-buybox .product-form { display: block; }
  .lp-buybox .product-form__submit { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; width: 100%; min-height: 52px; padding: 16px; margin: 0; background: var(--lp-tangerine); color: var(--lp-forest); border: 1px solid var(--lp-tangerine); border-radius: 2px; font-family: inherit; font-weight: 600; font-size: 16px; letter-spacing: 0.02em; cursor: pointer; position: relative; transition: background-color 160ms ease, transform 160ms ease; }
  .lp-buybox .product-form__submit::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 50%; height: 3px; background: var(--lp-forest); transition: width 200ms ease; }
  .lp-buybox .product-form__submit:hover { background: var(--lp-tangerine-shade-10); }
  .lp-buybox .product-form__submit:hover::after { width: 100%; }
  .lp-buybox .product-form__submit:active { background: var(--lp-tangerine-shade-20); transform: translateY(1px); }
  .lp-buybox .product-form__submit:focus-visible { outline: 2px solid var(--lp-forest); outline-offset: 3px; }
  .lp-buybox .product-form__submit[disabled] { opacity: 0.6; cursor: not-allowed; }
  .lp-buybox .product-form__submit--price { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
  .lp-buybox .product-form__submit--compare-price { text-decoration: line-through; opacity: 0.7; font-weight: 500; }
  .lp-buybox .product-form__submit .loading__spinner { display: none; }
  .lp-buybox .product-form__submit.loading .loading__spinner { display: inline-flex; }
  /* Closing instance: the accent rule + focus ring shift to beige so they read against the forest band. */
  .lp-buybox--slot-closing .product-form__submit::after { background: var(--lp-beige); }
  .lp-buybox--slot-closing .product-form__submit:focus-visible { outline-color: var(--lp-beige); }
  /* Error wrapper + reassurance/trademark copy under the button (rendered by buy-buttons.liquid). */
  .lp-buybox .product-form__error-message-wrapper { display: flex; gap: 6px; align-items: center; color: #b3261e; font-size: 13px; margin: 0 0 10px; }
  .lp-buybox .product-form__error-message-wrapper[hidden] { display: none; }
  .lp-buybox .buy-button-discount-callout { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 12px 0 0; font-size: 13px; color: var(--lp-forest); font-weight: 600; }
  .lp-buybox .buy-button-text-below { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 12px 0 0; font-size: 12px; letter-spacing: 0.02em; color: var(--lp-muted); }
  .lp-buybox .buy-button-text-below p { margin: 0; }
  .lp-buybox .buy-button-text-below svg, .lp-buybox .buy-button-discount-callout svg { width: 16px; height: 16px; }
  .lp-buybox .trademark-text { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 10px 0 0; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lp-muted); }
  .lp-buybox .trademark-text svg { width: 14px; height: 14px; }
  .lp-buybox--slot-closing .buy-button-text-below, .lp-buybox--slot-closing .trademark-text { color: var(--lp-beige); opacity: 0.85; }

  /* Guarantee — MAIN: quiet microcopy under the ATC. */
  .lp-buybox__guarantee { text-align: center; font-size: 12px; letter-spacing: 0.04em; color: var(--lp-muted); margin: 16px 0 0; }
  /* Guarantee — CLOSING: standalone risk-reversal callout (tangerine rail + display heading), BEFORE the ATC (F-001). */
  .lp-buybox--slot-closing .lp-buybox__guarantee { background: var(--lp-beige); border-left: 4px solid var(--lp-tangerine); border-radius: 0 4px 4px 0; padding: 16px 18px; margin: 0 0 18px; text-align: left; font-size: 13.5px; letter-spacing: 0; color: var(--lp-ink); line-height: 1.5; }
  .lp-buybox--slot-closing .lp-buybox__guarantee strong { display: block; font-family: var(--lp-font-display); font-style: italic; font-weight: 300; font-size: 18px; color: var(--lp-forest); margin-bottom: 6px; line-height: 1.15; }

  /* ===== Custom size + plan selector (2026-06-18; replaces the Skio shadow-DOM widget) =====
     One DOM, two skins: plan-cards (light, default) + bold-forest (dark field) switch via the
     lp_style modifier class. Selected state = tangerine border + tint; tokens bound to --lp-* only. */
  .lp-buybox__sizelabel { font-family: var(--lp-font-body); text-transform: uppercase; letter-spacing: 0.14em; font-size: 10px; color: var(--lp-muted); margin: 2px 0 8px; text-align: left; }
  .lp-buybox__sizes { display: flex; gap: 8px; margin: 0 0 16px; }
  .lp-buybox__size { flex: 1; position: relative; min-height: 46px; padding: 12px 8px; border: 1.5px solid var(--lp-line); border-radius: 6px; background: var(--lp-white); font-family: var(--lp-font-body); font-weight: 600; font-size: 13.5px; color: var(--lp-ink); cursor: pointer; transition: border-color 160ms ease, background-color 160ms ease; }
  .lp-buybox__size.is-sel { border-color: var(--lp-forest); background: var(--lp-forest-tint-30); }
  .lp-buybox__size:focus-visible { outline: 2px solid var(--lp-forest); outline-offset: 2px; }
  .lp-buybox__size-tag { position: absolute; top: -9px; right: 8px; background: var(--lp-tangerine); color: var(--lp-forest); font-size: 8.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 7px; border-radius: 99px; }

  .lp-buybox__plans { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin: 6px 0 14px; }
  .lp-buybox__plan { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; padding: 18px 12px 16px; border: 2px solid var(--lp-line); border-radius: 8px; background: var(--lp-white); cursor: pointer; font-family: var(--lp-font-body); color: var(--lp-ink); transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease; }
  .lp-buybox__plan-ribbon { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--lp-forest); color: var(--lp-beige); font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; border-radius: 99px; white-space: nowrap; }
  .lp-buybox__plan-lab { font-weight: 700; font-size: 13px; }
  .lp-buybox__plan-badge { display: none; }  /* the ribbon already states the saving in card view */
  .lp-buybox__plan-price { font-family: var(--lp-font-display); font-weight: 300; font-size: 27px; line-height: 1; margin: 6px 0 1px; color: var(--lp-ink); }
  .lp-buybox__plan-sub { font-size: 11px; color: var(--lp-muted); }
  .lp-buybox__plan-ship { margin-top: 9px; font-size: 11px; }
  .lp-buybox__plan-ship--free { background: var(--lp-forest); color: var(--lp-beige); font-weight: 700; letter-spacing: 0.02em; padding: 5px 11px; border-radius: 99px; }
  .lp-buybox__plan-ship--paid { color: var(--lp-muted); font-weight: 500; margin-top: 11px; }
  .lp-buybox__plan.is-sel { border-color: var(--lp-tangerine); background: var(--lp-tangerine-tint-85); box-shadow: 0 6px 16px -12px rgba(255,143,28,0.45); }
  .lp-buybox__plan:focus-visible { outline: 2px solid var(--lp-forest); outline-offset: 2px; }

  .lp-buybox__freq { display: flex; align-items: center; justify-content: space-between; border: 1.5px solid var(--lp-line); border-radius: 6px; padding: 13px 15px; font-size: 12.5px; color: var(--lp-ink); margin: 0 0 16px; }
  .lp-buybox__freq b { font-weight: 700; }
  .lp-buybox__freq-caret { color: var(--lp-muted); font-size: 11px; }

  /* Trust row — one small reassurance line under the ATC (matches the comp). */
  .lp-buybox__trust { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 18px; margin: 14px 0 0; font-size: 11.5px; color: var(--lp-muted); }
  .lp-buybox__trust span { display: inline-flex; align-items: center; gap: 5px; }
  {%- comment -%} Light-beige trust text is ONLY for the forest skin (readable on forest). slot-closing renders on a WHITE card now, so it must keep the dark muted default — beige-on-white was unreadable. {%- endcomment -%}
  .lp-buybox--bold-forest .lp-buybox__trust { color: rgba(241,231,219,0.72); }

  /* ---- BOLD-FOREST skin: forest field, beige type (lp_style = bold-forest) ---- */
  .lp-buybox--bold-forest { background: var(--lp-forest); }
  .lp-buybox--bold-forest .lp-buybox__h2 { color: var(--lp-beige); }
  .lp-buybox--bold-forest .lp-buybox__h2 em { color: var(--lp-tangerine); }
  .lp-buybox--bold-forest .lp-buybox__name,
  .lp-buybox--bold-forest .lp-buybox__sizelabel { color: var(--lp-beige); }
  .lp-buybox--bold-forest .lp-buybox__size { background: rgba(241,231,219,0.06); border-color: rgba(241,231,219,0.22); color: var(--lp-beige); }
  .lp-buybox--bold-forest .lp-buybox__size.is-sel { background: var(--lp-beige); border-color: var(--lp-tangerine); color: var(--lp-forest); }
  .lp-buybox--bold-forest .lp-buybox__plan { background: rgba(241,231,219,0.06); border-color: rgba(241,231,219,0.22); color: var(--lp-beige); }
  .lp-buybox--bold-forest .lp-buybox__plan-price { color: #fff; }
  .lp-buybox--bold-forest .lp-buybox__plan-sub { color: rgba(241,231,219,0.7); }
  .lp-buybox--bold-forest .lp-buybox__plan.is-sel { background: var(--lp-beige); border-color: var(--lp-tangerine); }
  .lp-buybox--bold-forest .lp-buybox__plan.is-sel .lp-buybox__plan-lab,
  .lp-buybox--bold-forest .lp-buybox__plan.is-sel .lp-buybox__plan-price { color: var(--lp-forest); }
  .lp-buybox--bold-forest .lp-buybox__plan.is-sel .lp-buybox__plan-sub { color: #5b6b5e; }
  .lp-buybox--bold-forest .lp-buybox__freq { background: rgba(241,231,219,0.06); border-color: rgba(241,231,219,0.22); color: var(--lp-beige); }

  /* Respect reduced motion. */
  @media (prefers-reduced-motion: reduce) {
    .lp-buybox .product-form__submit, .lp-buybox .product-form__submit::after,
    .lp-buybox__size, .lp-buybox__plan { transition: none; }
    .lp-buybox .product-form__submit:active { transform: none; }
  }

  /* ===== Desktop expansion — single 750px breakpoint (D35) ===== */
  @media (min-width: 750px) {
    .lp-buybox { padding: 80px 48px; }
    .lp-buybox--slot-closing { padding: 72px 48px; }
    .lp-buybox__h2 { font-size: 44px; margin-bottom: 36px; letter-spacing: -0.012em; }
    .lp-buybox--slot-closing .lp-buybox__h2 { font-size: 40px; margin-bottom: 16px; }
    .lp-buybox__kicker { font-size: 12px; letter-spacing: 0.18em; margin-bottom: 18px; }
    .lp-buybox__grid { flex-direction: row; align-items: flex-start; gap: 48px; }
    .lp-buybox__media { flex: 1 1 45%; min-height: 420px; }
    .lp-buybox__panel { flex: 1 1 55%; padding: 32px; }
    .lp-buybox--slot-main .lp-buybox__panel { text-align: left; }
    .lp-buybox--slot-main .lp-buybox__perday { justify-content: flex-start; }
    .lp-buybox__name { font-size: 24px; }
    .lp-buybox--slot-closing .lp-buybox__name { font-size: 22px; }
    /* Closing is condensed: a single centered panel (no media zone). */
    .lp-buybox--slot-closing .lp-buybox__grid { max-width: 640px; }
  }
/* END_SECTION:lp-buy-box */

/* START_SECTION:lp-closing-cta (INDEX:59) */
.lp-close {
    --lp-forest: var(--color-primary-forest, #284734);
    --lp-tangerine: var(--color-primary-tangerine, #FF8F1C);
    --lp-beige: var(--color-primary-beige, #F1E7DB);
    --lp-cream-soft: #E5DECE;          /* meta line on forest (ADR-9 neutral) */
    --lp-tangerine-tint-30: #FFC18E;   /* kicker on forest (ADR-9 tangerine tint) */
    --lp-tangerine-shade-10: #E6810F;  /* CTA hover (ADR-9) */
    --lp-tangerine-shade-20: #CC7308;  /* CTA active (ADR-9) */
    --lp-font-display: var(--bst-font-secondary, "IvyPresto Headline", Georgia, serif);
    --lp-font-body: var(--bst-font-primary, "TT Norms Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif);
    background: var(--lp-forest);
    color: var(--lp-beige);
    font-family: var(--lp-font-body);
    padding: 48px 24px;
  }
  .lp-close__inner { max-width: 640px; margin: 0 auto; text-align: center; }
  .lp-close__kicker { font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--lp-tangerine-tint-30); margin: 0 0 14px; }
  /* The locked brand line, display face; the second word leans italic (the editorial beat). */
  .lp-close__h2 {
    font-family: var(--lp-font-display); font-weight: 300;
    font-size: 34px; line-height: 1.05; letter-spacing: -0.01em;
    margin: 0 0 12px; color: var(--lp-beige);
  }
  .lp-close__h2 em { font-style: italic; color: var(--lp-tangerine); }
  .lp-close__meta { font-size: 13px; letter-spacing: 0.02em; color: var(--lp-cream-soft); margin: 0 0 24px; }
  /* CTA — the single closing action. Tangerine fill + forest ink, identical to the hero + buy-box ATC. */
  .lp-close__cta {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 52px; min-width: 44px; padding: 15px 34px;
    background: var(--lp-tangerine); color: var(--lp-forest);
    font: inherit; font-weight: 600; font-size: 16px; letter-spacing: 0.015em;
    text-decoration: none; border: 1px solid var(--lp-tangerine); border-radius: 2px;
    position: relative; transition: background-color 160ms ease, transform 160ms ease;
  }
  /* Accent rule beneath the CTA, beige so it reads on the forest field; grows on hover (the house move). */
  .lp-close__cta::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 50%; height: 3px; background: var(--lp-beige); transition: width 200ms ease; }
  .lp-close__cta:hover { background: var(--lp-tangerine-shade-10); }
  .lp-close__cta:hover::after { width: 100%; }
  .lp-close__cta:active { background: var(--lp-tangerine-shade-20); transform: translateY(1px); }
  .lp-close__cta:focus-visible { outline: 2px solid var(--lp-beige); outline-offset: 3px; }
  @media (prefers-reduced-motion: reduce) {
    .lp-close__cta, .lp-close__cta::after { transition: none; }
    .lp-close__cta:active { transform: none; }
  }
  /* ===== Desktop expansion — single 750px breakpoint (D35) ===== */
  @media (min-width: 750px) {
    .lp-close { padding: 64px 48px; }
    .lp-close__h2 { font-size: 46px; margin-bottom: 14px; }
    .lp-close__meta { font-size: 14px; margin-bottom: 28px; }
  }
/* END_SECTION:lp-closing-cta */

/* START_SECTION:lp-comparison (INDEX:60) */
.lp-comp {
    --lp-forest: var(--color-primary-forest, #284734);
    --lp-beige: var(--color-primary-beige, #F1E7DB);
    --lp-white: var(--color-primary-white, #ffffff);
    --lp-ink: var(--color-text-main, #232323);
    --lp-body: #3a372f;
    --lp-muted: #6f6b62;
    --lp-line: #d8d4cb;
    --lp-forest-soft: #E9EFE9;   /* pale forest tint for the "us" column (ADR-9) */
    --lp-font-display: var(--bst-font-secondary, "IvyPresto Headline", Georgia, serif);
    --lp-font-body: var(--bst-font-primary, "TT Norms Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif);
    background: var(--lp-white);
    color: var(--lp-ink);
    font-family: var(--lp-font-body);
    padding: 48px 24px;
  }
  .lp-comp__head { text-align: center; max-width: 640px; margin: 0 auto; }
  .lp-comp__h2 {
    font-family: var(--lp-font-display); font-weight: 300;
    font-size: 30px; line-height: 1.12; letter-spacing: -0.005em;
    margin: 0 0 14px; color: var(--lp-ink);
  }
  .lp-comp__lead { font-size: 16px; line-height: 1.6; color: var(--lp-body); margin: 0 auto 0; max-width: 540px; }
  .lp-comp__footnote { font-size: 12px; line-height: 1.5; color: var(--lp-muted); text-align: center; max-width: 900px; margin: 14px auto 0; }
  .lp-comp__wrap { max-width: 900px; margin: 32px auto 0; overflow-x: auto; }
  /* table-layout:fixed makes the table honor width:100% and WRAP inside its columns
     instead of forcing a min-content floor that pushes the whole page frame wider
     than the mobile viewport (the colgroup sets the proportions). */
  .lp-comp__table { width: 100%; table-layout: fixed; border-collapse: collapse; border: 1px solid var(--lp-line); border-radius: 6px; overflow: hidden; }
  .lp-comp__col-label { width: 37%; }
  .lp-comp__col-v { width: 21%; }
  .lp-comp__vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .lp-comp__table th, .lp-comp__table td {
    padding: 12px 8px; text-align: center; font-size: 13px;
    border-bottom: 1px solid var(--lp-line); vertical-align: middle;
    overflow-wrap: break-word;
  }
  .lp-comp__table tbody tr:last-child th, .lp-comp__table tbody tr:last-child td { border-bottom: none; }
  /* Row labels — left, on a beige rail. */
  .lp-comp__table tbody th[scope="row"] {
    text-align: left; font-weight: 600; color: var(--lp-ink);
    background: var(--lp-beige); font-size: 12.5px; width: 38%;
  }
  /* Column heads — forest field; the "us" head is the brighter forest. */
  .lp-comp__table thead th {
    background: var(--lp-ink, #232323); color: #f6f3ec;
    font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; padding: 12px 6px;
  }
  .lp-comp__table thead th.lp-comp__us { background: var(--lp-forest); }
  /* The "us" body cells — pale forest highlight. */
  .lp-comp__table td.lp-comp__us { background: var(--lp-forest-soft); color: var(--lp-forest); font-weight: 600; }
  .lp-comp__table td.lp-comp__us b { font-family: var(--lp-font-display); font-weight: 300; font-size: 17px; }
  .lp-comp__yes { color: var(--lp-forest); font-weight: 700; font-size: 15px; }
  .lp-comp__no { color: #b8b3a5; }
  .lp-comp__table tbody td { color: var(--lp-muted); }
  /* ===== Desktop expansion — single 750px breakpoint (D35) ===== */
  @media (min-width: 750px) {
    .lp-comp { padding: 76px 48px; }
    .lp-comp__h2 { font-size: 40px; letter-spacing: -0.012em; margin-bottom: 16px; }
    .lp-comp__lead { font-size: 17.5px; }
    .lp-comp__wrap { margin-top: 44px; }
    .lp-comp__table th, .lp-comp__table td { padding: 16px 14px; font-size: 14px; }
    .lp-comp__table thead th { font-size: 12px; letter-spacing: 0.06em; }
    .lp-comp__table tbody th[scope="row"] { font-size: 14px; }
    .lp-comp__table td.lp-comp__us b { font-size: 19px; }
  }
/* END_SECTION:lp-comparison */

/* START_SECTION:lp-difference (INDEX:61) */
.lp-diff {
    --lp-forest: var(--color-primary-forest, #284734);
    --lp-beige: var(--color-primary-beige, #F1E7DB);
    --lp-white: var(--color-primary-white, #ffffff);
    --lp-ink: var(--color-text-main, #232323);
    --lp-body: #3a372f;          /* warm body ink (ADR-9 neutral) */
    --lp-line: #d8d4cb;          /* hairline (no theme token) */
    --lp-font-display: var(--bst-font-secondary, "IvyPresto Headline", Georgia, serif);
    --lp-font-body: var(--bst-font-primary, "TT Norms Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif);
    background: var(--lp-white);
    color: var(--lp-ink);
    font-family: var(--lp-font-body);
    padding: 48px 24px;
  }
  .lp-diff__head { text-align: center; max-width: 640px; margin: 0 auto; }
  .lp-diff__h2 {
    font-family: var(--lp-font-display); font-weight: 300;
    font-size: 30px; line-height: 1.12; letter-spacing: -0.005em;
    margin: 0 0 14px; color: var(--lp-ink);
  }
  .lp-diff__lead { font-size: 16px; line-height: 1.6; color: var(--lp-body); margin: 0 auto; max-width: 560px; }
  .lp-diff__grid {
    list-style: none; margin: 32px 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
  }
  .lp-diff__card {
    background: var(--lp-beige); border: 1px solid var(--lp-line); border-radius: 6px;
    padding: 26px 20px; text-align: center;
    display: flex; flex-direction: column; align-items: center;
  }
  /* Forest line-glyph — same visual language as the trust-strip seal, ties the bands together. */
  .lp-diff__icon { color: var(--lp-forest); margin-bottom: 14px; display: inline-flex; }
  .lp-diff__card-title {
    font-family: var(--lp-font-display); font-weight: 300;
    font-size: 18px; line-height: 1.22; margin: 0 0 8px; color: var(--lp-ink);
  }
  .lp-diff__card-body { font-size: 13.5px; line-height: 1.55; color: var(--lp-body); margin: 0; }
  /* ===== Desktop expansion — single 750px breakpoint (D35) ===== */
  @media (min-width: 750px) {
    .lp-diff { padding: 76px 48px; }
    .lp-diff__h2 { font-size: 40px; letter-spacing: -0.012em; margin-bottom: 16px; }
    .lp-diff__lead { font-size: 17.5px; }
    .lp-diff__grid { grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 44px; }
    .lp-diff__card { padding: 30px 22px; }
    .lp-diff__card-title { font-size: 19px; }
  }
/* END_SECTION:lp-difference */

/* START_SECTION:lp-faq (INDEX:62) */
.lp-faq {
    --lp-forest: var(--color-primary-forest, #284734);
    --lp-white: var(--color-primary-white, #ffffff);
    --lp-ink: var(--color-text-main, #232323);
    --lp-body: #3a372f;
    --lp-line: #d8d4cb;
    --lp-font-display: var(--bst-font-secondary, "IvyPresto Headline", Georgia, serif);
    --lp-font-body: var(--bst-font-primary, "TT Norms Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif);
    background: var(--lp-white);
    color: var(--lp-ink);
    font-family: var(--lp-font-body);
    padding: 48px 24px;
  }
  .lp-faq__head { text-align: center; max-width: 640px; margin: 0 auto; }
  .lp-faq__h2 {
    font-family: var(--lp-font-display); font-weight: 300;
    font-size: 30px; line-height: 1.12; letter-spacing: -0.005em;
    margin: 0; color: var(--lp-ink);
  }
  .lp-faq__list { max-width: 720px; margin: 30px auto 0; }
  .lp-faq__item { border-bottom: 1px solid var(--lp-line); padding: 4px 0; }
  .lp-faq__item:first-child { border-top: 1px solid var(--lp-line); }
  .lp-faq__q {
    list-style: none; cursor: pointer; padding: 18px 4px;
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    font-size: 16px; font-weight: 600; color: var(--lp-ink);
  }
  .lp-faq__q::-webkit-details-marker { display: none; }
  /* +/− affordance in forest (display weight), flips on open. */
  .lp-faq__q::after { content: "+"; font-family: var(--lp-font-display); font-weight: 300; font-size: 24px; color: var(--lp-forest); line-height: 1; flex: 0 0 auto; }
  .lp-faq__item[open] .lp-faq__q::after { content: "−"; }
  .lp-faq__a { padding: 0 4px 18px; }
  .lp-faq__a p { margin: 0; font-size: 14.5px; line-height: 1.62; color: var(--lp-body); max-width: 60ch; }
  /* ===== Desktop expansion — single 750px breakpoint (D35) ===== */
  @media (min-width: 750px) {
    .lp-faq { padding: 76px 48px; }
    .lp-faq__h2 { font-size: 40px; letter-spacing: -0.012em; }
    .lp-faq__list { margin-top: 40px; }
    .lp-faq__q { font-size: 17px; padding: 20px 4px; }
  }
/* END_SECTION:lp-faq */

/* START_SECTION:lp-founder-video (INDEX:63) */
.lp-video {
    --lp-forest: var(--color-primary-forest, #284734);
    --lp-beige: var(--color-primary-beige, #F1E7DB);
    --lp-white: var(--color-primary-white, #ffffff);
    --lp-ink: var(--color-text-main, #232323);
    --lp-forest-deep: #1a2820;   /* poster gradient stop (ADR-9 forest shade) */
    --lp-font-display: var(--bst-font-secondary, "IvyPresto Headline", Georgia, serif);
    --lp-font-body: var(--bst-font-primary, "TT Norms Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif);
    background: var(--lp-white);
    color: var(--lp-ink);
    font-family: var(--lp-font-body);
    padding: 48px 24px;
  }
  .lp-video__head { text-align: center; max-width: 640px; margin: 0 auto; }
  .lp-video__h2 {
    font-family: var(--lp-font-display); font-weight: 300;
    font-size: 30px; line-height: 1.12; letter-spacing: -0.005em;
    margin: 0; color: var(--lp-ink);
  }
  .lp-video__frame-wrap { display: flex; justify-content: center; margin-top: 30px; }
  .lp-video__frame {
    position: relative; display: flex; align-items: center; justify-content: center;
    width: 100%; max-width: 760px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden;
    text-decoration: none; background: var(--lp-forest);
  }
  .lp-video__frame--ph { background: linear-gradient(135deg, var(--lp-forest) 0%, var(--lp-forest-deep) 100%); }
  .lp-video__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  /* Play button — beige disc, forest glyph, nudged for optical center. */
  .lp-video__play {
    position: relative; z-index: 1;
    width: 74px; height: 74px; border-radius: 50%;
    background: rgba(241,231,219,0.95); color: var(--lp-forest);
    display: flex; align-items: center; justify-content: center; padding-left: 4px;
    transition: transform 160ms ease, background-color 160ms ease;
  }
  .lp-video__frame:hover .lp-video__play { transform: scale(1.06); background: var(--lp-beige); }
  .lp-video__frame:focus-visible { outline: 2px solid var(--lp-forest); outline-offset: 3px; }
  .lp-video__caption {
    position: absolute; bottom: 14px; left: 16px; z-index: 1;
    color: var(--lp-beige); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
    text-shadow: 0 1px 3px rgba(0,0,0,0.35);
  }
  @media (prefers-reduced-motion: reduce) {
    .lp-video__play, .lp-video__frame:hover .lp-video__play { transition: none; transform: none; }
  }
  /* ===== Desktop expansion — single 750px breakpoint (D35) ===== */
  @media (min-width: 750px) {
    .lp-video { padding: 76px 48px; }
    .lp-video__h2 { font-size: 40px; letter-spacing: -0.012em; }
    .lp-video__frame-wrap { margin-top: 40px; }
    .lp-video__play { width: 84px; height: 84px; }
  }
/* END_SECTION:lp-founder-video */

/* START_SECTION:lp-grow-story (INDEX:64) */
.lp-grow {
    --lp-forest: var(--color-primary-forest, #284734);
    --lp-beige: var(--color-primary-beige, #F1E7DB);
    --lp-ink: var(--color-text-main, #232323);
    --lp-body: #3a372f;
    --lp-line: #d8d4cb;
    --lp-forest-deep: #1a2820;   /* gradient stop (ADR-9 forest shade) */
    --lp-sage: #5b6f4a;          /* gradient stop (ADR-9 forest tint) */
    --lp-font-display: var(--bst-font-secondary, "IvyPresto Headline", Georgia, serif);
    --lp-font-body: var(--bst-font-primary, "TT Norms Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif);
    background: var(--lp-beige);
    color: var(--lp-ink);
    font-family: var(--lp-font-body);
  }
  /* Two-column split filling the frame — image bleeds to the edge, no inner max-width. */
  .lp-grow__grid { display: grid; grid-template-columns: 1fr; }
  .lp-grow__media { width: 100%; min-height: 280px; }
  .lp-grow__img { display: block; width: 100%; height: 100%; min-height: 280px; object-fit: cover; }
  /* Styled fallback — forest field evoking the grow rooms, with a quiet location caption. */
  .lp-grow__img--ph {
    background: linear-gradient(135deg, #3d5a42 0%, var(--lp-forest) 42%, var(--lp-sage) 100%);
    display: flex; align-items: flex-end; padding: 22px;
  }
  .lp-grow__ph-label {
    font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.6);
  }
  .lp-grow__copy { padding: 44px 24px; }
  .lp-grow__eyebrow { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lp-forest); margin: 0 0 14px; }
  .lp-grow__h2 {
    font-family: var(--lp-font-display); font-weight: 300;
    font-size: 30px; line-height: 1.1; letter-spacing: -0.005em;
    margin: 0 0 18px; color: var(--lp-ink); text-align: left;
  }
  .lp-grow__body p { font-size: 15px; line-height: 1.7; color: var(--lp-body); margin: 0 0 16px; max-width: 52ch; }
  .lp-grow__body p:last-child { margin-bottom: 0; }
  /* Quiet text link — forest, underlined, secondary action (page-system action rule). */
  .lp-grow__link {
    display: inline-block; margin-top: 18px; font-size: 13px; font-weight: 600;
    letter-spacing: 0.02em; color: var(--lp-forest); text-decoration: underline; text-underline-offset: 3px;
    min-height: 44px; line-height: 44px;
  }
  .lp-grow__link:focus-visible { outline: 2px solid var(--lp-forest); outline-offset: 3px; }
  /* ===== Desktop expansion — single 750px breakpoint (D35) ===== */
  @media (min-width: 750px) {
    .lp-grow__grid { grid-template-columns: 1fr 1fr; align-items: stretch; min-height: 520px; }
    .lp-grow__media { min-height: 100%; }
    .lp-grow__img, .lp-grow__img--ph { min-height: 100%; }
    .lp-grow__copy { padding: 72px 56px; display: flex; flex-direction: column; justify-content: center; }
    .lp-grow__h2 { font-size: 38px; margin-bottom: 20px; letter-spacing: -0.012em; }
  }
/* END_SECTION:lp-grow-story */

/* START_SECTION:lp-guarantee (INDEX:65) */
.lp-guar {
    --lp-forest: var(--color-primary-forest, #284734);
    --lp-forest-soft: #E9EFE9;   /* pale forest tint surface (ADR-9 — tint of forest, no new hue) */
    --lp-forest-body: #2c4030;   /* body ink on forest-soft (ADR-9 forest tint) */
    --lp-font-display: var(--bst-font-secondary, "IvyPresto Headline", Georgia, serif);
    --lp-font-body: var(--bst-font-primary, "TT Norms Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif);
    background: var(--lp-forest-soft);
    color: var(--lp-forest);
    font-family: var(--lp-font-body);
    padding: 48px 24px;
  }
  .lp-guar__inner { max-width: 640px; margin: 0 auto; text-align: center; }
  .lp-guar__h2 {
    font-family: var(--lp-font-display); font-weight: 300;
    font-size: 30px; line-height: 1.12; letter-spacing: -0.005em;
    margin: 0 0 16px; color: var(--lp-forest);
  }
  .lp-guar__lead { font-size: 16px; line-height: 1.66; color: var(--lp-forest-body); margin: 0 auto; max-width: 540px; }
  .lp-guar__meta { margin: 22px 0 0; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lp-forest); }
  /* ===== Desktop expansion — single 750px breakpoint (D35) ===== */
  @media (min-width: 750px) {
    .lp-guar { padding: 72px 48px; }
    .lp-guar__h2 { font-size: 40px; letter-spacing: -0.012em; margin-bottom: 18px; }
    .lp-guar__lead { font-size: 17.5px; }
  }
/* END_SECTION:lp-guarantee */

/* START_SECTION:lp-hero (INDEX:66) */
.lp-hero {
    /* base brand tokens — inherit the live theme palette, hex fallback keeps the section standalone-renderable */
    --lp-forest: var(--color-primary-forest, #284734);
    --lp-tangerine: var(--color-primary-tangerine, #FF8F1C);
    --lp-beige: var(--color-primary-beige, #F1E7DB);
    --lp-white: var(--color-primary-white, #ffffff);
    --lp-ink: var(--color-text-main, #232323);
    /* A1 neutrals (no theme token) */
    --lp-muted: #6f6b62;
    --lp-line: #d8d4cb;
    /* derived tints/shades (ADR-9, literal — computed derivatives of the base tokens) */
    --lp-tangerine-shade-10: #E6810F;  /* CTA hover */
    --lp-tangerine-shade-20: #CC7308;  /* CTA active */
    --lp-beige-shade-10: #D9CFC1;      /* softer rule above the stat strip */
    --lp-font-display: var(--bst-font-secondary, "IvyPresto Headline", Georgia, serif);
    /* Body = brand TT Norms Pro (--bst-font-primary). NOT --font-body-family: that resolves to the
       theme's Dawn body-font setting (Assistant), which drifted the subhead off-brand (caught by verify 2026-06-02). */
    --lp-font-body: var(--bst-font-primary, "TT Norms Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif);
    display: flex;
    flex-direction: column;
    background: var(--lp-white);
    color: var(--lp-ink);
    font-family: var(--lp-font-body);
  }
  .lp-hero__media { width: 100%; }
  /* Height cap keeps the LCP image compact so the headline + CTA stay above the fold on mobile. */
  .lp-hero__img {
    display: block; width: 100%; height: 220px; object-fit: cover;
    background: var(--lp-beige); border-bottom: 1px solid var(--lp-line);
  }
  /* Editorial-bold rhythm: generous side padding + breathing room around the headline (AG1 whitespace move). */
  .lp-hero__copy { padding: 32px 20px 28px; max-width: 38ch; }
  /* The h1 carries the editorial weight. Italic on the brand-promise em is the Magic Mind move —
     the FACE change creates the beat, not a color shift on the whole line. */
  .lp-hero__h1 {
    font-family: var(--lp-font-display); font-weight: 500;
    font-size: 34px; line-height: 1.05; letter-spacing: -0.005em;
    margin: 0 0 16px; color: var(--lp-ink);
  }
  .lp-hero__h1 em { font-style: italic; color: var(--lp-forest); }
  .lp-hero__sub {
    font-size: 16.5px; line-height: 1.55; color: #3a372f;
    margin: 0 0 24px; max-width: 52ch;       /* extra space before the CTA — editorial pacing */
  }
  /* Soft CTA — the only hero CTA. Tangerine fill + forest ink (4.51:1 AA; matches the live OM button,
     operator 2026-05-30). Tangerine border, forest accent rule beneath. Tap target >=44x44 (ADR-6). */
  .lp-hero__cta {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 48px; min-width: 44px; padding: 14px 26px;
    background: var(--lp-tangerine); color: var(--lp-forest);
    font: inherit; font-weight: 600; font-size: 15px; letter-spacing: 0.015em;
    text-decoration: none; border: 1px solid var(--lp-tangerine); border-radius: 2px;
    position: relative;
    transition: background-color 160ms ease, transform 160ms ease;
  }
  /* Accent rule beneath the CTA, ½ width, forest so it stays visible on the tangerine button;
     animates to full width on hover (editorial "rule under headline" move). */
  .lp-hero__cta::after {
    content: ""; position: absolute; left: 0; bottom: -6px;
    width: 50%; height: 3px; background: var(--lp-forest);
    transition: width 200ms ease;
  }
  .lp-hero__cta:hover { background: var(--lp-tangerine-shade-10); }
  .lp-hero__cta:hover::after { width: 100%; }
  .lp-hero__cta:active { background: var(--lp-tangerine-shade-20); transform: translateY(1px); }
  .lp-hero__cta:focus-visible { outline: 2px solid var(--lp-forest); outline-offset: 3px; }
  /* Stat strip — 2x2 mobile, 1x4 desktop. Quiet pull-out facts under a thin rule (AG1 understated-stat move). */
  .lp-hero__stats {
    list-style: none; margin: 28px 0 0; padding: 18px 0 0;
    border-top: 1px solid var(--lp-beige-shade-10);
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 14px;
  }
  .lp-hero__stat { font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lp-muted); text-align: center; }
  .lp-hero__stat-value {
    display: block; font-family: var(--lp-font-display); font-weight: 500;
    font-size: 24px; line-height: 1; margin-bottom: 4px;
    letter-spacing: 0; text-transform: none; color: var(--lp-ink);
  }
  /* Respect reduced motion: no transitions, no animated underline. */
  @media (prefers-reduced-motion: reduce) {
    .lp-hero__cta, .lp-hero__cta::after { transition: none; }
    .lp-hero__cta:active { transform: none; }
  }
  /* ===== Desktop expansion — single 750px breakpoint (D35) ===== */
  @media (min-width: 750px) {
    .lp-hero { flex-direction: row; align-items: stretch; }
    .lp-hero__media { order: 2; flex: 1 1 45%; min-width: 0; }
    .lp-hero__img { height: 100%; min-height: 460px; border-bottom: none; border-left: 1px solid var(--lp-line); }
    .lp-hero__copy {
      order: 1; flex: 1 1 55%; min-width: 0; padding: 72px 56px 56px; max-width: none;
      display: flex; flex-direction: column; justify-content: center;
    }
    .lp-hero__h1 { font-size: 56px; letter-spacing: -0.012em; margin-bottom: 20px; }
    .lp-hero__sub { font-size: 18px; margin-bottom: 28px; }
    /* Even distribution across the copy column — equal gaps between each stat. */
    /* Always a 2x2 grid on desktop (two on top, two on bottom). Capped width + the
       space-between columns keep the block pulled toward the left/center instead of
       stretching the four stats edge-to-edge across a wide copy column (operator 2026-06-24). */
    .lp-hero__stats { display: grid; grid-template-columns: repeat(2, max-content); justify-content: space-between; gap: 30px 16px; max-width: 420px; margin-top: 36px; padding-top: 22px; }
    .lp-hero__stat { flex: 0 0 auto; }
    .lp-hero__stat-value { font-size: 28px; }
  }
/* END_SECTION:lp-hero */

/* START_SECTION:lp-how-it-works (INDEX:67) */
.lp-how {
    --lp-forest: var(--color-primary-forest, #284734);
    --lp-white: var(--color-primary-white, #ffffff);
    --lp-ink: var(--color-text-main, #232323);
    --lp-body: #3a372f;
    --lp-muted: #6f6b62;
    --lp-line: #d8d4cb;
    --lp-font-display: var(--bst-font-secondary, "IvyPresto Headline", Georgia, serif);
    --lp-font-body: var(--bst-font-primary, "TT Norms Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif);
    background: var(--lp-white);
    color: var(--lp-ink);
    font-family: var(--lp-font-body);
    padding: 48px 24px;
  }
  .lp-how__head { text-align: center; max-width: 640px; margin: 0 auto; }
  .lp-how__h2 {
    font-family: var(--lp-font-display); font-weight: 300;
    font-size: 30px; line-height: 1.12; letter-spacing: -0.005em;
    margin: 0 0 14px; color: var(--lp-ink);
  }
  .lp-how__lead { font-size: 16px; line-height: 1.6; color: var(--lp-body); margin: 0 auto; max-width: 540px; }
  .lp-how__steps {
    list-style: none; margin: 36px 0 0; padding: 0;
    display: grid; grid-template-columns: 1fr; gap: 30px;
  }
  .lp-how__step { text-align: center; }
  /* The display number IS the icon — forest, light, large (editorial beat). */
  .lp-how__num {
    display: inline-block; font-family: var(--lp-font-display); font-weight: 300;
    font-size: 44px; line-height: 1; color: var(--lp-forest); margin-bottom: 10px;
  }
  .lp-how__step-title {
    font-family: var(--lp-font-display); font-weight: 300;
    font-size: 24px; line-height: 1.1; margin: 0 0 7px; color: var(--lp-ink);
  }
  .lp-how__step-caption { font-size: 14px; line-height: 1.55; color: var(--lp-muted); margin: 0 auto; max-width: 30ch; }
  /* ===== Desktop expansion — single 750px breakpoint (D35) ===== */
  @media (min-width: 750px) {
    .lp-how { padding: 76px 48px; }
    .lp-how__h2 { font-size: 40px; letter-spacing: -0.012em; margin-bottom: 16px; }
    .lp-how__lead { font-size: 17.5px; }
    .lp-how__steps { grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 48px; }
    .lp-how__num { font-size: 52px; }
    .lp-how__step-title { font-size: 26px; }
  }
/* END_SECTION:lp-how-it-works */

/* START_SECTION:lp-mushrooms (INDEX:68) */
.lp-shrooms {
    --lp-forest: var(--color-primary-forest, #284734);
    --lp-white: var(--color-primary-white, #ffffff);
    --lp-ink: var(--color-text-main, #232323);
    --lp-body: #3a372f;
    --lp-muted: #6f6b62;
    --lp-line: #d8d4cb;
    --lp-font-display: var(--bst-font-secondary, "IvyPresto Headline", Georgia, serif);
    --lp-font-body: var(--bst-font-primary, "TT Norms Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif);
    background: var(--lp-white);
    color: var(--lp-ink);
    font-family: var(--lp-font-body);
    padding: 48px 24px;
  }
  .lp-shrooms__head { text-align: center; max-width: 640px; margin: 0 auto; }
  .lp-shrooms__h2 {
    font-family: var(--lp-font-display); font-weight: 300;
    font-size: 30px; line-height: 1.12; letter-spacing: -0.005em;
    margin: 0 0 14px; color: var(--lp-ink);
  }
  .lp-shrooms__lead { font-size: 16px; line-height: 1.6; color: var(--lp-body); margin: 0 auto; max-width: 560px; }
  .lp-shrooms__grid {
    list-style: none; margin: 32px 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
  }
  .lp-shrooms__bucket {
    background: var(--lp-white); border: 1px solid var(--lp-line); border-radius: 6px;
    padding: 24px 20px;
  }
  .lp-shrooms__icon { color: var(--lp-forest); display: inline-flex; margin-bottom: 10px; }
  /* Benefit — the card's lead. Display face, forest, sized up so it carries the card now that
     the icon is gone (operator 2026-06-22 "make the benefit more prominent"). */
  .lp-shrooms__bucket-title {
    font-family: var(--lp-font-display); font-weight: 300;
    font-size: 24px; line-height: 1.08; margin: 0 0 4px; color: var(--lp-forest);
  }
  /* Mushroom name — paired tight under the benefit and given real weight so the species reads
     as clearly as the job it does (operator 2026-06-22 "make the name more prominent"). */
  .lp-shrooms__species { font-size: 15px; line-height: 1.5; font-weight: 600; color: var(--lp-ink); margin: 0 0 12px; }
  .lp-shrooms__species b { font-weight: 600; }
  .lp-shrooms__why { font-size: 13px; line-height: 1.6; color: var(--lp-muted); margin: 0; }
  /* ===== Desktop expansion — single 750px breakpoint (D35) ===== */
  @media (min-width: 750px) {
    .lp-shrooms { padding: 76px 48px; }
    .lp-shrooms__h2 { font-size: 40px; letter-spacing: -0.012em; margin-bottom: 16px; }
    .lp-shrooms__lead { font-size: 17.5px; }
    .lp-shrooms__grid { grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 44px; }
    .lp-shrooms__bucket-title { font-size: 26px; }
    .lp-shrooms__species { font-size: 15.5px; }
  }
/* END_SECTION:lp-mushrooms */

/* START_SECTION:lp-problem-framing (INDEX:69) */
.lp-problem {
    --lp-forest: var(--color-primary-forest, #284734);
    --lp-tangerine: var(--color-primary-tangerine, #FF8F1C);
    --lp-beige: var(--color-primary-beige, #F1E7DB);
    --lp-cream-soft: #E5DECE;   /* body text on forest — softened beige (ADR-9 neutral) */
    --lp-font-display: var(--bst-font-secondary, "IvyPresto Headline", Georgia, serif);
    --lp-font-body: var(--bst-font-primary, "TT Norms Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif);
    background: var(--lp-forest);
    color: var(--lp-beige);
    font-family: var(--lp-font-body);
    padding: 48px 24px;
  }
  /* Centered reading column INSIDE the full-width forest band (the band fills the frame; the text
     is the only thing constrained, for line length). */
  .lp-problem__inner { max-width: 820px; margin: 0 auto; text-align: center; }
  .lp-problem__h2 {
    font-family: var(--lp-font-display); font-weight: 300;
    /* Default section-h2 size, matching the "Ten mushrooms…" h2 (operator 2026-06-23 —
       reverting the 06-22 +35% bump). */
    font-size: 30px; line-height: 1.12; letter-spacing: -0.005em;
    margin: 0 0 18px; color: var(--lp-beige);
  }
  .lp-problem__lead {
    font-size: 16px; line-height: 1.68; color: var(--lp-cream-soft);
    margin: 0 auto; max-width: 780px;
  }
  /* Emphasis — the diagnosis, kept in its own block with a line break but at BODY size
     (operator 2026-06-23). Full beige + medium weight keep it distinct without making it larger
     than the lead above it. */
  .lp-problem__emphasis {
    font-family: var(--lp-font-body); font-weight: 500;
    font-size: 16px; line-height: 1.68; color: var(--lp-beige);
    margin: 22px auto 0; max-width: 780px;
  }
  /* Transition — body face, tangerine, NOT italic; just slightly larger than the body copy so it
     reads as a calm answer rather than a display punchline (operator 2026-06-23). */
  .lp-problem__transition {
    font-family: var(--lp-font-body); font-style: normal; font-weight: 400;
    font-size: 19px; line-height: 1.4; color: var(--lp-tangerine);
    margin: 26px 0 0;
  }
  /* ===== Desktop expansion — single 750px breakpoint (D35) ===== */
  @media (min-width: 750px) {
    .lp-problem { padding: 76px 48px; }
    .lp-problem__h2 { font-size: 40px; margin-bottom: 22px; letter-spacing: -0.012em; }
    .lp-problem__lead { font-size: 17.5px; }
    .lp-problem__emphasis { font-size: 17.5px; }
    .lp-problem__transition { font-size: 21px; margin-top: 30px; }
  }
/* END_SECTION:lp-problem-framing */

/* START_SECTION:lp-proof (INDEX:70) */
.lp-proof {
    --lp-forest: var(--color-primary-forest, #284734);
    --lp-tangerine: var(--color-primary-tangerine, #FF8F1C);
    --lp-beige: var(--color-primary-beige, #F1E7DB);
    --lp-white: var(--color-primary-white, #ffffff);
    --lp-ink: var(--color-text-main, #232323);
    --lp-body: #3a372f;
    --lp-muted: #6f6b62;
    --lp-line: #d8d4cb;
    --lp-star: #c4853c;          /* warm review star (ADR-9 tangerine shade) */
    --lp-forest-soft: #E9EFE9;
    --lp-font-display: var(--bst-font-secondary, "IvyPresto Headline", Georgia, serif);
    --lp-font-body: var(--bst-font-primary, "TT Norms Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif);
    background: var(--lp-white);
    color: var(--lp-ink);
    font-family: var(--lp-font-body);
    padding: 48px 24px;
  }
  .lp-proof__head { text-align: center; max-width: 680px; margin: 0 auto; }
  .lp-proof__h2 {
    font-family: var(--lp-font-display); font-weight: 300;
    font-size: 30px; line-height: 1.12; letter-spacing: -0.005em;
    margin: 0; color: var(--lp-ink);
  }
  /* Expert tier. */
  .lp-proof__experts { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 32px 0 36px; }
  .lp-proof__expert { background: var(--lp-beige); border-left: 3px solid var(--lp-forest); border-radius: 0 6px 6px 0; padding: 26px 24px; margin: 0; }
  .lp-proof__role { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lp-forest); margin: 0 0 12px; }
  .lp-proof__quote { font-family: var(--lp-font-display); font-style: italic; font-weight: 300; font-size: 18px; line-height: 1.42; margin: 0 0 14px; color: var(--lp-ink); }
  .lp-proof__who { font-size: 13px; color: var(--lp-ink); }
  .lp-proof__who b { display: block; font-weight: 600; }
  .lp-proof__who span { color: var(--lp-muted); font-size: 12px; }
  /* Review tier. */
  .lp-proof__reviews { margin-top: 4px; }
  .lp-proof__agg { text-align: center; font-size: 14px; color: var(--lp-ink); margin: 0 0 18px; }
  .lp-proof__stars { color: var(--lp-star); letter-spacing: 0.08em; }
  .lp-proof__agg .lp-proof__stars { margin-right: 8px; font-size: 15px; }
  .lp-proof__review-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 14px; }
  .lp-proof__review { background: var(--lp-white); border: 1px solid var(--lp-line); border-radius: 6px; padding: 22px; }
  .lp-proof__review .lp-proof__stars { font-size: 12px; display: block; margin-bottom: 10px; }
  .lp-proof__review-body { font-family: var(--lp-font-display); font-style: italic; font-weight: 300; font-size: 16px; line-height: 1.5; margin: 0 0 14px; color: var(--lp-ink); }
  .lp-proof__attr { font-size: 12px; color: var(--lp-muted); margin: 0; }
  .lp-proof__attr b { color: var(--lp-ink); font-weight: 600; }
  .lp-proof__verified { background: var(--lp-forest-soft); color: var(--lp-forest); padding: 1px 7px; border-radius: 2px; font-size: 10px; letter-spacing: 0.04em; margin-left: 6px; }
  /* Optional micro line under the review grid — small, muted, centered. */
  .lp-proof__micro { font-size: 12px; color: inherit; opacity: 0.7; margin-top: 14px; text-align: center; }
  /* ===== Desktop expansion — single 750px breakpoint (D35) ===== */
  @media (min-width: 750px) {
    .lp-proof { padding: 76px 48px; }
    .lp-proof__h2 { font-size: 40px; letter-spacing: -0.012em; }
    .lp-proof__experts { grid-template-columns: 1fr 1fr; gap: 24px; margin: 44px 0 40px; }
    .lp-proof__quote { font-size: 19px; }
    .lp-proof__review-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  }
/* END_SECTION:lp-proof */

/* START_SECTION:lp-science-story (INDEX:71) */
.lp-sci {
    --lp-forest: var(--color-primary-forest, #284734);
    --lp-tangerine: var(--color-primary-tangerine, #FF8F1C);
    --lp-beige: var(--color-primary-beige, #F1E7DB);
    --lp-cream-soft: #E5DECE;    /* body on forest (ADR-9 neutral) */
    --lp-amber: #b8975e;         /* radial fallback stop (ADR-9 warm neutral) */
    --lp-amber-deep: #3a2818;    /* radial fallback stop */
    --lp-font-display: var(--bst-font-secondary, "IvyPresto Headline", Georgia, serif);
    --lp-font-body: var(--bst-font-primary, "TT Norms Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif);
    background: var(--lp-forest);
    color: var(--lp-beige);
    font-family: var(--lp-font-body);
  }
  .lp-sci__grid { display: grid; grid-template-columns: 1fr; }
  /* Mobile: image leads (order 1), copy follows. Desktop overrides to copy-left. */
  .lp-sci__media { order: 1; width: 100%; min-height: 260px; }
  .lp-sci__copy { order: 2; padding: 44px 24px; }
  .lp-sci__eyebrow { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #c4d4c8; margin: 0 0 14px; }
  .lp-sci__h2 {
    font-family: var(--lp-font-display); font-weight: 300;
    font-size: 30px; line-height: 1.1; letter-spacing: -0.005em;
    margin: 0 0 18px; color: var(--lp-beige); text-align: left;
  }
  .lp-sci__p { font-size: 15px; line-height: 1.7; color: var(--lp-cream-soft); margin: 0 0 20px; max-width: 52ch; }
  /* Pull-stat — display number + caption with a cream left rule (the v2 callout). */
  .lp-sci__pullstat { border-left: 2px solid var(--lp-beige); padding: 8px 0 8px 18px; margin: 0 0 20px; max-width: 380px; }
  .lp-sci__pullstat-value { display: block; font-family: var(--lp-font-display); font-weight: 300; font-size: 30px; line-height: 1.1; color: #ffffff; margin-bottom: 4px; }
  /* Label given real weight + brightness so "beta glucans per serving" reads as a claim,
     not a caption (operator 2026-06-23). */
  .lp-sci__pullstat-label { font-size: 15px; font-weight: 500; letter-spacing: 0.04em; color: rgba(241,231,219,0.95); }
  .lp-sci__link {
    display: inline-block; margin-top: 4px; font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
    color: var(--lp-beige); text-decoration: underline; text-underline-offset: 3px;
    min-height: 44px; line-height: 44px;
  }
  .lp-sci__link:focus-visible { outline: 2px solid var(--lp-beige); outline-offset: 3px; }
  .lp-sci__img { display: block; width: 100%; height: 100%; min-height: 260px; object-fit: cover; }
  /* Warm radial fallback with a faint concentric ring (evokes the studied compound, not a literal claim). */
  .lp-sci__img--ph {
    background: radial-gradient(circle at 45% 42%, #d9c690 0%, var(--lp-amber) 38%, var(--lp-amber-deep) 100%);
    display: flex; align-items: center; justify-content: center; min-height: 260px;
  }
  .lp-sci__ring { width: 180px; height: 180px; border: 1px solid rgba(255,255,255,0.28); border-radius: 50%; position: relative; }
  .lp-sci__ring::before, .lp-sci__ring::after { content: ""; position: absolute; inset: 28px; border: 1px solid rgba(255,255,255,0.2); border-radius: 50%; }
  .lp-sci__ring::after { inset: 56px; }
  /* ===== Desktop expansion — single 750px breakpoint (D35) ===== */
  @media (min-width: 750px) {
    .lp-sci__grid { grid-template-columns: 1fr 1fr; align-items: stretch; min-height: 520px; }
    .lp-sci__copy { order: 1; padding: 72px 56px; display: flex; flex-direction: column; justify-content: center; }
    .lp-sci__media { order: 2; min-height: 100%; }
    .lp-sci__img, .lp-sci__img--ph { min-height: 100%; }
    .lp-sci__h2 { font-size: 38px; margin-bottom: 20px; letter-spacing: -0.012em; }
    .lp-sci__pullstat-value { font-size: 34px; }
    .lp-sci__pullstat-label { font-size: 16px; }
  }
/* END_SECTION:lp-science-story */

/* START_SECTION:lp-sticky-buy-bar (INDEX:72) */
.lp-sticky {
    --lp-forest: var(--color-primary-forest, #284734);
    --lp-tangerine: var(--color-primary-tangerine, #FF8F1C);
    --lp-beige: var(--color-primary-beige, #F1E7DB);
    --lp-white: #ffffff;
    --lp-ink: var(--color-text-main, #232323);
    --lp-muted: #6f6b62;
    --lp-line: #d8d4cb;
    --lp-tangerine-shade-10: #E6810F;
    --lp-tangerine-shade-20: #CC7308;

    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    /* Right padding reserves clearance for the bottom-right customer-service chat
       widget (~64px) so the CTA never sits under it. */
    padding: 10px 84px 10px 16px;
    min-height: 68px;
    background: var(--lp-white); border-top: 1px solid var(--lp-line);
    box-shadow: 0 -4px 12px rgba(0,0,0,0.06);
    /* First-paint: present in DOM, slid off-screen + transparent (SP-4). */
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
    pointer-events: none;
  }
  .lp-sticky.lp-sticky--revealed {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  /* Price column — discounted price (body weight) + discount badge, with the
     purchase-type label dropping to a small uppercase muted line. */
  .lp-sticky__price { flex: 1 1 auto; min-width: 0; line-height: 1.2; }
  .lp-sticky__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .lp-sticky__amt { font-size: 16px; font-weight: 700; color: var(--lp-ink); }
  .lp-sticky__badge {
    background: var(--lp-forest); color: var(--lp-beige);
    font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    padding: 2px 7px; border-radius: 99px; white-space: nowrap;
  }
  .lp-sticky__sub {
    color: var(--lp-muted); font-size: 11px;
    letter-spacing: 0.06em; text-transform: uppercase;
    display: block; margin-top: 2px;
  }

  /* The bar's product-form is layout-transparent (it's just a wrapper around the CTA). */
  .lp-sticky__form, .lp-sticky__form-el { display: contents; }

  /* Sticky CTA — the visual hit: tangerine fill + FOREST ink (4.51:1 AA). */
  .lp-sticky__cta {
    flex: 0 0 auto; min-height: 48px; min-width: 44px; padding: 14px 22px;
    background: var(--lp-tangerine); color: var(--lp-forest);
    border: 1px solid var(--lp-tangerine); border-radius: 2px;
    font: inherit; font-weight: 600; font-size: 15px; letter-spacing: 0.018em;
    cursor: pointer; position: relative; white-space: nowrap;
    transition: background-color 0.16s ease, transform 0.16s ease;
  }
  .lp-sticky__cta::after {
    content: ""; position: absolute; left: 0; bottom: -5px;
    width: 50%; height: 2px; background: var(--lp-forest);
    transition: width 0.2s ease;
  }
  .lp-sticky__cta:hover { background: var(--lp-tangerine-shade-10); }
  .lp-sticky__cta:hover::after { width: 100%; }
  .lp-sticky__cta:active { background: var(--lp-tangerine-shade-20); transform: translateY(1px); }
  .lp-sticky__cta:focus-visible { outline: 2px solid var(--lp-forest); outline-offset: 3px; }
  .lp-sticky__cta[disabled] { opacity: 0.6; cursor: not-allowed; }

  @media (prefers-reduced-motion: reduce) {
    .lp-sticky, .lp-sticky__cta, .lp-sticky__cta::after { transition: none; }
    .lp-sticky__cta:active { transform: none; }
  }

  @media (min-width: 750px) {
    /* Desktop: float as a panel ABOVE the bottom-right CS widget (was bottom:20px,
       which collided with it). Lifted to bottom:96px; normal right padding. */
    .lp-sticky {
      max-width: 460px; left: auto; right: 20px; bottom: 96px;
      padding: 14px 20px;
      border: 1px solid var(--lp-line); border-radius: 6px;
      box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    }
    .lp-sticky__cta { font-size: 16px; }
  }
/* END_SECTION:lp-sticky-buy-bar */

/* START_SECTION:lp-trust-strip (INDEX:73) */
.lp-trust {
    --lp-forest: var(--color-primary-forest, #284734);
    --lp-beige: var(--color-primary-beige, #F1E7DB);
    --lp-line: #d8d4cb;
    --lp-font-body: var(--bst-font-primary, "TT Norms Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif);
    background: var(--lp-beige);
    border-top: 1px solid var(--lp-line);
    border-bottom: 1px solid var(--lp-line);
    font-family: var(--lp-font-body);
  }
  .lp-trust__items {
    list-style: none; margin: 0; padding: 20px 48px;
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: 14px 30px;
  }
  .lp-trust__item { display: flex; align-items: center; gap: 9px; }
  /* Forest checkmark medallion — gives the cert visual weight so it pops. */
  .lp-trust__seal {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--lp-forest); color: var(--lp-beige); flex: 0 0 auto;
  }
  .lp-trust__badge { width: 34px; height: 34px; object-fit: contain; flex: 0 0 auto; }
  /* Bold forest label — not tiny muted gray. */
  .lp-trust__label {
    font-size: 13px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--lp-forest); white-space: nowrap;
  }
  /* ===== Desktop: evenly distributed single row ===== */
  @media (min-width: 750px) {
    .lp-trust__items { flex-wrap: wrap; justify-content: space-between; gap: 14px 20px; padding: 22px 48px; }
  }
/* END_SECTION:lp-trust-strip */

/* START_SECTION:need-story (INDEX:104) */
/* L20 V5's own <style>, verbatim in every declaration, under the family PDP's
   selector contract (assets/section-pdp-family.css, THE CASCADE CONTRACT). */
section.pdp-family-scope.lego-L20-v5 .head { max-width: var(--om-measure); }
section.pdp-family-scope.lego-L20-v5 .head > * + * { margin-top: var(--om-s4); }
section.pdp-family-scope.lego-L20-v5 .wrap { display: grid; gap: var(--om-s6); margin-top: var(--om-s6); --moment-gap: var(--om-s6); }
section.pdp-family-scope.lego-L20-v5 .figure { margin: 0; }
section.pdp-family-scope.lego-L20-v5 .figure .om-cover { object-position: center bottom; }
section.pdp-family-scope.lego-L20-v5 .moments { padding-left: 0; }
section.pdp-family-scope.lego-L20-v5 .moments > li { position: relative; display: flex; align-items: flex-start; gap: var(--om-s5); }
section.pdp-family-scope.lego-L20-v5 .moments > li + li { margin-top: var(--moment-gap); }
section.pdp-family-scope.lego-L20-v5 .moments .om-thread-dot { margin-top: var(--om-s2); }
section.pdp-family-scope.lego-L20-v5 .moments > li:not(:last-child)::before { content: ""; position: absolute; left: calc(var(--om-thread-dot) / 2 - var(--om-thread-w) / 2); top: calc(var(--om-s2) + var(--om-thread-dot) / 2); height: calc(100% + var(--moment-gap)); width: var(--om-thread-w); background: var(--om-species-mid); }
section.pdp-family-scope.lego-L20-v5 .moment-copy h3 { margin-bottom: var(--om-s2); }
@media (min-width: 900px) {
  section.pdp-family-scope.lego-L20-v5 .wrap { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: var(--om-s8); align-items: center; margin-top: var(--om-s7); --moment-gap: var(--om-s7); }
}
/* END_SECTION:need-story */

/* START_SECTION:om-links-out (INDEX:108) */
.om-lego section.lego-L72-v1 .row { display: grid; gap: var(--om-s5); }
@media (min-width: 750px) {
  .om-lego section.lego-L72-v1 .row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.om-lego section.lego-L72-v1 .door {
  display: flex; align-items: center; gap: var(--om-s5); padding: var(--om-s6);
  text-decoration: none; color: var(--om-ink); background-color: var(--om-cream);
}
.om-lego section.lego-L72-v1 .door:hover { background-color: var(--om-cream-deep); }
.om-lego section.lego-L72-v1 .door:focus-visible { outline: var(--om-focus-ring); outline-offset: var(--om-focus-offset); }
.om-lego section.lego-L72-v1 .door img { flex: 0 0 auto; width: var(--om-s8); height: var(--om-s8); }
.om-lego section.lego-L72-v1 .body { flex: 1 1 auto; min-width: 0; display: grid; gap: var(--om-s1); }
.om-lego section.lego-L72-v1 .line { color: var(--om-ink-soft-deep); }
.om-lego section.lego-L72-v1 .go { display: inline-flex; align-items: center; gap: var(--om-s1); margin-top: var(--om-s1); }
.om-lego section.lego-L72-v1 .go svg { width: var(--om-s4); height: var(--om-s4); }
/* END_SECTION:om-links-out */

/* START_SECTION:om-standard (INDEX:112) */
/* L42 V16's own rules (creative/web-legos/legos/L42-om-standard-steps/v16.html),
   re-rooted from `.lego-l42-v16` to `section.pdp-family-scope.lego-l42-v16`
   per this file's own convention. `30rem` ported to
   `calc(30 * var(--om-rem))` — the theme root is 10px, not 16px
   (web-legos-provisional-tokens.css `--om-rem`). */
section.pdp-family-scope.lego-l42-v16 .heading { margin: 0; }
section.pdp-family-scope.lego-l42-v16 .lead { margin: var(--om-s4) 0 0; }
section.pdp-family-scope.lego-l42-v16 .chapters { list-style: none; margin: var(--om-s7) 0 0; padding: 0; display: grid; gap: var(--om-s7); }
section.pdp-family-scope.lego-l42-v16 .pic { margin: 0; position: relative; aspect-ratio: 4 / 3; }
section.pdp-family-scope.lego-l42-v16 .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--l42-pos, 50% 50%); }
section.pdp-family-scope.lego-l42-v16 .ch--grown     { --l42-pos: 72% 40%; }
section.pdp-family-scope.lego-l42-v16 .ch--harvested { --l42-pos: 50% 45%; }
section.pdp-family-scope.lego-l42-v16 .ch--tested    { --l42-pos: 62% 55%; }
section.pdp-family-scope.lego-l42-v16 .card { position: relative; background: var(--om-cream); margin: calc(-1 * var(--om-s8)) var(--om-s4) 0; padding: var(--om-s5); }
section.pdp-family-scope.lego-l42-v16 .num { display: block; color: var(--om-ink-soft-deep); font-size: var(--om-text-h3); margin: 0 0 var(--om-s2); }
section.pdp-family-scope.lego-l42-v16 .step-head { margin: 0 0 var(--om-s3); }
section.pdp-family-scope.lego-l42-v16 .step-body { margin: 0; }
/* Photo-less chapter (wi-2026-1128/1129, see header comment): no negative
   overlap margin and no side inset to pull toward — the card is the whole
   chapter. */
section.pdp-family-scope.lego-l42-v16 .ch--no-photo .card { margin: 0; }
@media (min-width: 990px) {
  section.pdp-family-scope.lego-l42-v16 .chapters { gap: var(--om-s8); margin-top: var(--om-s8); }
  section.pdp-family-scope.lego-l42-v16 .ch { position: relative; }
  section.pdp-family-scope.lego-l42-v16 .pic { aspect-ratio: 21 / 9; }
  section.pdp-family-scope.lego-l42-v16 .pic + .card {
    position: absolute; top: 50%; transform: translateY(-50%);
    margin: 0; width: min(40%, calc(30 * var(--om-rem))); padding: var(--om-s7) var(--om-s6);
    left: var(--om-s7);
  }
  section.pdp-family-scope.lego-l42-v16 .ch:nth-child(even) .pic + .card { left: auto; right: var(--om-s7); }
  section.pdp-family-scope.lego-l42-v16 .ch--grown     { --l42-pos: 50% 40%; }
  section.pdp-family-scope.lego-l42-v16 .ch--harvested { --l42-pos: 30% 45%; }
  section.pdp-family-scope.lego-l42-v16 .ch--tested    { --l42-pos: 70% 55%; }
  /* No .pic sibling to overlay, so .pic + .card above never matches here:
     the card stays static in-flow, full width — spans the photo's column
     instead of floating as a narrow absolutely-positioned box with nothing
     to anchor to. */
  section.pdp-family-scope.lego-l42-v16 .ch--no-photo .card { width: 100%; padding: var(--om-s7) var(--om-s6); }
}
/* END_SECTION:om-standard */

/* START_SECTION:pdp-buy-box (INDEX:117) */
/* Selector contract: every rule is its lego selector plus `section.pdp-family-scope`
   (assets/section-pdp-family.css, THE CASCADE CONTRACT), so the lego's own
   cascade holds against the primitives whatever order the links land in. */
/*
  A MECHANICAL PORT of legos/L46-sub-first-buybox/v6.html's own scoped <style>,
  as carried into L45 v13. Nothing was re-authored, re-spaced or re-scaled; the
  var() names resolve through assets/section-pdp-family.css.

  D-081 (2026-09-30): the gallery's own rules (.slides/.stage/.thumbs/.nav —
  the former UNIT_DEVIATION note about the 107%/-48.71% first-panel bbox lives
  there now) moved OUT of this file and into the shared
  assets/pdp-gallery.css, loaded by snippets/pdp-gallery.liquid. Nothing here
  targets `.gallery`'s children any more; `.wrap`'s two-column track still
  needs `.gallery`/`.panel` as its direct grid items, which is why `.gallery`
  stays a plain wrapper div in the markup above.
*/
section.pdp-family-scope.lego-L46-v6 { --l46-deal: var(--om-text-h2); --l46-anchor: var(--om-text-h3); }
section.pdp-family-scope.lego-L46-v6 .crumb { margin-bottom: var(--om-s5); }
section.pdp-family-scope.lego-L46-v6 .crumb a { text-decoration-thickness: 1px; }
section.pdp-family-scope.lego-L46-v6 .wrap { display: grid; gap: var(--om-s6); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 990px) {
  section.pdp-family-scope.lego-L46-v6 .wrap { gap: var(--om-s7); grid-template-columns: 55fr 45fr; }
}

/* ---- Buy panel: a ledger, not a card ------------------------------------ */
section.pdp-family-scope.lego-L46-v6 .panel > * + * { margin-top: var(--om-s4); }
section.pdp-family-scope.lego-L46-v6 .panel > .rule { margin-block: var(--om-s5); }
section.pdp-family-scope.lego-L46-v6 h1 { margin-bottom: var(--om-s2); }
section.pdp-family-scope.lego-L46-v6 .rating { display: flex; align-items: baseline; gap: var(--om-s2); flex-wrap: wrap; }
section.pdp-family-scope.lego-L46-v6 .claims { display: grid; gap: var(--om-s3); max-width: var(--om-measure); }
section.pdp-family-scope.lego-L46-v6 .claims li { display: grid; grid-template-columns: var(--om-thread-dot) 1fr; gap: var(--om-s3); align-items: start; }
section.pdp-family-scope.lego-L46-v6 .claims .om-thread-dot { margin-top: 0.55em; }
section.pdp-family-scope.lego-L46-v6 .l46-field > * + * { margin-top: var(--om-s3); }
section.pdp-family-scope.lego-L46-v6 .fieldlabel { display: block; }
section.pdp-family-scope.lego-L46-v6 .switch { display: flex; gap: var(--om-s2); flex-wrap: wrap; }
section.pdp-family-scope.lego-L46-v6 .switch a { text-decoration: none; }
section.pdp-family-scope.lego-L46-v6 .sizes { display: flex; gap: var(--om-s4); flex-wrap: wrap; align-items: center; }
section.pdp-family-scope.lego-L46-v6 .sizes label { display: inline-flex; align-items: center; gap: var(--om-s2); cursor: pointer; }
section.pdp-family-scope.lego-L46-v6 .sizes label > span { display: inline-flex; align-items: center; min-height: var(--om-tap); }

/* ---- Purchase options: the FIXED small radius. Controls do not breathe. - */
section.pdp-family-scope.lego-L46-v6 .options { display: grid; gap: var(--om-s3); }
section.pdp-family-scope.lego-L46-v6 .om-opt {
  display: grid; grid-template-columns: auto 1fr; gap: var(--om-s3);
  padding: var(--om-s4); background-color: var(--om-cream); cursor: pointer;
  border: var(--om-hairline);
  border-radius: 0 var(--om-frame-r-sm-fixed) 0 var(--om-frame-r-sm-fixed);
  transition: border-color var(--om-dur) var(--om-ease), background-color var(--om-dur) var(--om-ease);
}
section.pdp-family-scope.lego-L46-v6 .om-opt:hover { background-color: var(--om-cream-deep); }
section.pdp-family-scope.lego-L46-v6 .om-opt:has(input:checked) { border: var(--om-keyline); background-color: var(--om-cream-deep); }
section.pdp-family-scope.lego-L46-v6 .om-opt input { margin-top: 0.15em; }
section.pdp-family-scope.lego-L46-v6 .opt-body > * + * { margin-top: var(--om-s2); }
section.pdp-family-scope.lego-L46-v6 .opt-head { display: flex; align-items: baseline; gap: var(--om-s3); flex-wrap: wrap; }
section.pdp-family-scope.lego-L46-v6 .om-opt--once .opt-price { font-size: var(--l46-anchor); }
section.pdp-family-scope.lego-L46-v6 [data-sub-price-slot] {
  display: block; text-align: left; font-size: var(--l46-deal);
  line-height: 1.15; color: var(--om-ink);
}
/* THE VERIFY PASS CAUGHT THIS: the lego sets `display: block` on the price
   node, which OUTRANKS the browser's own `[hidden] { display: none }`, so with
   JavaScript off the empty node would still take a line. The node is empty in
   first paint either way (the rail is intact), but `hidden` has to mean hidden.
   Same for the savings pair. */
section.pdp-family-scope.lego-L46-v6 [data-sub-price-slot][hidden],
section.pdp-family-scope.lego-L46-v6 [data-sub-saving-slot][hidden] { display: none; }
section.pdp-family-scope.lego-L46-v6 .sub-pct { font-size: var(--om-text-body); color: var(--om-ink-soft-deep); }
section.pdp-family-scope.lego-L46-v6 .savings { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--om-s2); row-gap: var(--om-s1); }
section.pdp-family-scope.lego-L46-v6 .savings .pair { display: inline-flex; align-items: baseline; gap: var(--om-s2); }
section.pdp-family-scope.lego-L46-v6 .tag {
  display: inline-flex; align-items: center; padding: 0 var(--om-s2);
  min-height: calc(var(--om-tap) / 2);
  border: var(--om-hairline);
  border-radius: 0 var(--om-frame-r-sm-fixed) 0 var(--om-frame-r-sm-fixed);
  background-color: var(--om-cream); color: var(--om-ink-soft-deep);
}
section.pdp-family-scope.lego-L46-v6 .reserved { display: grid; gap: var(--om-s2); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
section.pdp-family-scope.lego-L46-v6 .offer {
  display: block; padding: var(--om-s3);
  border: var(--om-hairline);
  border-radius: 0 var(--om-frame-r-sm-fixed) 0 var(--om-frame-r-sm-fixed);
  background-color: var(--om-cream); color: var(--om-ink-soft-deep);
}
section.pdp-family-scope.lego-L46-v6 .buy > * + * { margin-top: var(--om-s3); }
/* B2B guard / add errors (wi-2026-0939): the script-created error line under
   the button. Empty = zero height and zero margin, so a normal shopper's
   layout is unchanged; it stays in the accessibility tree so role=alert text
   written into it is announced. */
section.pdp-family-scope.lego-L46-v6 .atc-error { color: var(--om-ink); font-weight: var(--om-subhead-weight); }
section.pdp-family-scope.lego-L46-v6 .atc-error:empty { margin: 0; }
section.pdp-family-scope.lego-L46-v6 .express { min-height: var(--om-tap); border-radius: 0 var(--om-frame-r-sm-fixed) 0 var(--om-frame-r-sm-fixed); }
section.pdp-family-scope.lego-L46-v6 .express-form { margin: var(--om-s3) 0 0; }
section.pdp-family-scope.lego-L46-v6 .om-opt .om-small.om-soft { font-size: var(--om-text-body); }
section.pdp-family-scope.lego-L46-v6 .guarantee { display: block; font-size: var(--om-text-lead); text-wrap: balance; }
/* A row hidden by the script (no plan for this size, wi-2026-1186) must not be re-shown by .om-opt's display. */
section.pdp-family-scope.lego-L46-v6 .om-opt[hidden] { display: none; }
section.pdp-family-scope.lego-L46-v6 .ships-note { margin: 0 0 var(--om-s3); color: var(--om-ink); }
/* wi-2026-1199 (Nate pin 2026-09-30): the ship date sits ON the size chip and as a framed line under the price, so it is unmissable. */
section.pdp-family-scope.lego-L46-v6 .sizes label > span.ship-tag { min-height: 0; padding: var(--om-s1) var(--om-s2); border: 1px solid var(--om-ink); border-radius: var(--om-frame-r-sm-fixed); color: var(--om-ink); white-space: nowrap; }
section.pdp-family-scope.lego-L46-v6 .ships-note { padding: var(--om-s2) var(--om-s3); border: 1px solid var(--om-ink); border-radius: var(--om-frame-r-sm-fixed); background: var(--om-cream); }
section.pdp-family-scope.lego-L46-v6 .vet-note { margin: var(--om-s3) 0 0; text-wrap: balance; }

/* TAP TARGETS (D-014: 44px at 375; wi-2026-0937, 2026-09-23). HIT AREA ONLY:
   nothing below moves or resizes anything visible (D-060, the design is locked).
   An inline link takes vertical padding, because an inline box's padding never
   changes its line box; a horizontal pad is cancelled by an equal negative
   margin. A block control takes a transparent ::after that reaches 44px. The
   rendered-page scan also checks that no enlarged area overlaps a neighbour. */
section.pdp-family-scope.lego-L46-v6 .crumb a { padding-block: 15px; padding-inline: 3px; margin-inline: -3px; }
/* Mostly downward: "More payment options" sits 16px above this line and its own
   hit area takes 9px of that gap (scan, 2026-09-23: 13px each way overlapped it). */
section.pdp-family-scope.lego-L46-v6 .guarantee a { padding-block: 6px 20px; }
section.pdp-family-scope.lego-L46-v6 .shopify-payment-button__more-options { position: relative; }
section.pdp-family-scope.lego-L46-v6 .shopify-payment-button__more-options::after {
  content: ""; position: absolute; left: 0; right: 0;
  top: min(0px, calc(50% - var(--om-tap) / 2)); bottom: min(0px, calc(50% - var(--om-tap) / 2));
}
/* END_SECTION:pdp-buy-box */

/* START_SECTION:pdp-faq (INDEX:119) */
/* L10 V5's own <style>, verbatim in every declaration, under the family PDP's
   selector contract (assets/section-pdp-family.css, THE CASCADE CONTRACT). */
section.pdp-family-scope.lego-L10-v5 { background: var(--om-cream-deep); }
section.pdp-family-scope.lego-L10-v5 .l10-head { margin-bottom: var(--om-s6); }
section.pdp-family-scope.lego-L10-v5 .l10-cards { display: grid; gap: var(--om-s5); }
section.pdp-family-scope.lego-L10-v5 .l10-item { background: var(--om-cream); }
section.pdp-family-scope.l10 summary { list-style: none; cursor: pointer; display: flex; gap: var(--om-s4); align-items: center; justify-content: space-between; min-height: var(--om-tap); padding: var(--om-s5) var(--om-s5) var(--om-s4); }
section.pdp-family-scope.l10 summary::-webkit-details-marker { display: none; }
section.pdp-family-scope.l10 summary:hover .l10-q { color: var(--om-ink-soft); }
section.pdp-family-scope.l10 .l10-q { margin: 0; flex: 1 1 auto; transition: color var(--om-dur) var(--om-ease); }
section.pdp-family-scope.l10 .l10-a { max-width: var(--om-measure); padding: 0 var(--om-s5) var(--om-s5); }
section.pdp-family-scope.l10 .l10-mark { position: relative; flex: none; width: var(--om-marker-size); height: var(--om-marker-size); }
section.pdp-family-scope.l10 .l10-mark::before,
section.pdp-family-scope.l10 .l10-mark::after { content: ""; position: absolute; inset: 0; margin: auto; background: var(--om-ink-soft); border-radius: 1px; }
section.pdp-family-scope.l10 .l10-mark::before { width: 100%; height: 2px; }
section.pdp-family-scope.l10 .l10-mark::after { width: 2px; height: 100%; transform: scaleY(1); transform-origin: center; transition: transform var(--om-dur) var(--om-ease), opacity var(--om-dur) var(--om-ease); }
section.pdp-family-scope.l10 details[open] > summary .l10-mark::after { transform: scaleY(0); opacity: 0; }
@media (min-width: 750px) {
  section.pdp-family-scope.lego-L10-v5 .l10-cards { grid-template-columns: 1fr 1fr; gap: var(--om-s5) var(--om-s6); }
  section.pdp-family-scope.lego-L10-v5 .l10-item { height: 100%; }
  section.pdp-family-scope.lego-L10-v5 .l10-item::details-content { content-visibility: visible; display: block; }
  section.pdp-family-scope.lego-L10-v5 summary { cursor: default; pointer-events: none; }
  section.pdp-family-scope.lego-L10-v5 .l10-mark { display: none; }
}
/* END_SECTION:pdp-faq */

/* START_SECTION:pdp-sticky-atc (INDEX:120) */
/* L12 V4's own <style>, under the family PDP's selector contract
   (assets/section-pdp-family.css). The desktop panel sits under the sticky
   site header: its top is set from the header's height by the script, and it
   stacks just below the header (z 39 vs the header's 40). */
section.pdp-family-scope.lego-L12-v4 { font-family: var(--om-font-utility); color: var(--om-ink); padding: 0; }
section.pdp-family-scope.lego-L12-v4 .bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 38;
  background: var(--om-cream); box-shadow: var(--om-shadow-bar);
  padding: var(--om-s3) 0 calc(var(--om-s3) + env(safe-area-inset-bottom, 0px));
  transform: translateY(0); transition: transform var(--om-dur) var(--om-ease);
}
section.pdp-family-scope.lego-L12-v4 .bar[hidden] { display: block; transform: translateY(110%); visibility: hidden; }
section.pdp-family-scope.lego-L12-v4 .bar-row { display: flex; align-items: center; gap: var(--om-s3); }
section.pdp-family-scope.lego-L12-v4 .summary { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; margin: 0; }
section.pdp-family-scope.lego-L12-v4 .summary .line1 { font-size: var(--om-text-small); color: var(--om-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
section.pdp-family-scope.lego-L12-v4 .summary .line2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* wi-2026-1199: the pre-order ship tag on the bar's first line (script-created, ships_on sizes only). */
section.pdp-family-scope.lego-L12-v4 .summary .ship-tag { display: inline-block; margin-left: var(--om-s2); padding: 0 var(--om-s2); border: 1px solid var(--om-ink); border-radius: var(--om-frame-r-sm-fixed); color: var(--om-ink); white-space: nowrap; }
section.pdp-family-scope.lego-L12-v4 .summary .ship-tag[hidden] { display: none; }
section.pdp-family-scope.lego-L12-v4 .open { flex: 0 0 auto; min-height: var(--om-tap); padding-inline: var(--om-s4); }
section.pdp-family-scope.lego-L12-v4 .scrim { position: fixed; inset: 0; z-index: 41; background: color-mix(in srgb, var(--om-ink) 45%, transparent); }
section.pdp-family-scope.lego-L12-v4 .scrim[hidden] { display: none; }
section.pdp-family-scope.lego-L12-v4 .panel {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 42;
  max-height: 88vh; overflow-y: auto; background: var(--om-cream);
  border-radius: 0 var(--om-frame-r-lg-fixed, var(--om-frame-r-md-fixed)) 0 0;
  padding: var(--om-s3) 0 calc(var(--om-s5) + env(safe-area-inset-bottom, 0px));
}
section.pdp-family-scope.lego-L12-v4 .panel[hidden] { display: none; }
section.pdp-family-scope.lego-L12-v4 .p-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--om-s4); }
section.pdp-family-scope.lego-L12-v4 .grab { justify-self: center; width: var(--om-s7); height: 4px; border-radius: 2px; background: var(--om-line); }
section.pdp-family-scope.lego-L12-v4 .p-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--om-s3); }
section.pdp-family-scope.lego-L12-v4 .p-head h2 { margin: 0; }
section.pdp-family-scope.lego-L12-v4 .close { min-width: var(--om-tap); min-height: var(--om-tap); border: 0; background: none; color: var(--om-ink); font-size: var(--om-text-h3); cursor: pointer; }
section.pdp-family-scope.lego-L12-v4 .format { display: flex; gap: var(--om-s3); align-items: baseline; font-size: var(--om-text-small); margin: 0; }
section.pdp-family-scope.lego-L12-v4 .format a { color: var(--om-ink); }
section.pdp-family-scope.lego-L12-v4 .label { margin: 0 0 var(--om-s2); }
section.pdp-family-scope.lego-L12-v4 .chips { display: flex; gap: var(--om-s2); flex-wrap: nowrap; }
section.pdp-family-scope.lego-L12-v4 .chip {
  display: inline-flex; align-items: center; gap: var(--om-s2);
  min-height: var(--om-tap); padding: 0 var(--om-s3); flex: 1 1 0; white-space: nowrap; min-width: 0;
  border: var(--om-keyline); border-radius: 0 var(--om-frame-r-md-fixed) 0 var(--om-frame-r-md-fixed);
  background: var(--om-cream); cursor: pointer;
}
section.pdp-family-scope.lego-L12-v4 .chip:has(input:checked) { border-color: var(--om-brown); background: var(--om-cream-deep); }
section.pdp-family-scope.lego-L12-v4 .opts { display: grid; gap: var(--om-s3); }
section.pdp-family-scope.lego-L12-v4 .opt {
  display: grid; grid-template-columns: auto 1fr; gap: var(--om-s1) var(--om-s3); align-items: start;
  padding: var(--om-s4); cursor: pointer; min-width: 0;
  border: var(--om-keyline); border-radius: 0 var(--om-frame-r-md-fixed) 0 var(--om-frame-r-md-fixed);
  background: var(--om-cream);
}
section.pdp-family-scope.lego-L12-v4 .opt:has(input:checked) { border-color: var(--om-brown); background: var(--om-cream-deep); }
section.pdp-family-scope.lego-L12-v4 .opt input { margin-top: 2px; }
section.pdp-family-scope.lego-L12-v4 .opt .o-head { display: flex; align-items: baseline; gap: var(--om-s3); flex-wrap: wrap; }
section.pdp-family-scope.lego-L12-v4 .opt .o-note { grid-column: 2; }
section.pdp-family-scope.lego-L12-v4 .opt .o-note:empty { display: none; }
section.pdp-family-scope.lego-L12-v4 .atc { width: 100%; }
section.pdp-family-scope.lego-L12-v4 .fine { margin: 0; text-align: center; }
/* B2B guard / add errors (wi-2026-0939): the script-created error line after the
   add button. Empty, it is taken out of flow (no grid track, no gap), so a
   normal shopper's layout is unchanged; it stays in the accessibility tree so
   role=alert text written into it is announced. */
section.pdp-family-scope.lego-L12-v4 .atc-error { margin: 0; color: var(--om-ink); font-weight: var(--om-subhead-weight); }
section.pdp-family-scope.lego-L12-v4 .atc-error:empty { position: absolute; }
@media (min-width: 990px) {
  section.pdp-family-scope.lego-L12-v4 .bar, section.pdp-family-scope.lego-L12-v4 .scrim { display: none !important; }
  section.pdp-family-scope.lego-L12-v4 .panel {
    top: var(--l12-top, 0px); bottom: auto; z-index: 39; max-height: none; overflow: visible;
    border-radius: 0; box-shadow: 0 1px 0 var(--om-line); padding: var(--om-s3) 0;
    display: block; transition: transform var(--om-dur) var(--om-ease);
  }
  section.pdp-family-scope.lego-L12-v4 .panel[hidden] { display: block; transform: translateY(calc(-110% - var(--l12-top, 0px))); visibility: hidden; }
  section.pdp-family-scope.lego-L12-v4 .p-inner { display: flex; align-items: center; gap: var(--om-s4); }
  section.pdp-family-scope.lego-L12-v4 .grab, section.pdp-family-scope.lego-L12-v4 .close,
  section.pdp-family-scope.lego-L12-v4 .o-note, section.pdp-family-scope.lego-L12-v4 .fine,
  section.pdp-family-scope.lego-L12-v4 .label, section.pdp-family-scope.lego-L12-v4 .format { display: none; }
  /* D-079 fix (wi-2026-0939): the one-row desktop bar needs title + size chips +
     the two plan options + the button, which is wider than the 1280 content
     column (measured 1329 at 1440: Add to cart ended 48 past the header's content
     edge). The container was never the problem (it matches the header exactly);
     nothing in the row could shrink. The product title is the one piece that can
     go: it shrinks FIRST (flex-shrink weight) and ellipsizes, so the choices, the
     prices and the button keep their full width and never overlap. */
  section.pdp-family-scope.lego-L12-v4 .p-head { flex: 0 1000 auto; min-width: 0; }
  section.pdp-family-scope.lego-L12-v4 .p-head h2 { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  section.pdp-family-scope.lego-L12-v4 .chip { flex: 0 0 auto; }
  section.pdp-family-scope.lego-L12-v4 .opts { display: flex; gap: var(--om-s2); }
  section.pdp-family-scope.lego-L12-v4 .opt { display: flex; align-items: center; padding: 0 var(--om-s3); min-height: var(--om-tap); }
  section.pdp-family-scope.lego-L12-v4 .opt .o-head { flex-wrap: nowrap; white-space: nowrap; }
  section.pdp-family-scope.lego-L12-v4 .grow { flex: 1 1 auto; }
  section.pdp-family-scope.lego-L12-v4 .atc { width: auto; flex: 0 0 auto; }
  /* the desktop bar is one row: the error line drops just below it */
  section.pdp-family-scope.lego-L12-v4 .atc-error:not(:empty) {
    position: absolute; top: 100%; left: 0; right: 0;
    padding: var(--om-s2) var(--om-gutter); background: var(--om-cream);
    box-shadow: 0 1px 0 var(--om-line); text-align: center;
  }
}
/* END_SECTION:pdp-sticky-atc */

/* START_SECTION:product-understanding (INDEX:124) */
section.pdp-family-scope.pet-feeding .pet-feeding__lede { margin-top: var(--om-s3); max-width: 52ch; }
section.pdp-family-scope.pet-feeding .pet-feeding__table { width: 100%; max-width: 32rem; margin-top: var(--om-s4); border-collapse: collapse; }
section.pdp-family-scope.pet-feeding .pet-feeding__table th, section.pdp-family-scope.pet-feeding .pet-feeding__table td { text-align: left; padding: var(--om-s2) 0; border-bottom: 1px solid var(--om-line); font-weight: inherit; }
section.pdp-family-scope.pet-feeding .pet-feeding__table thead th { font-weight: 600; }
section.pdp-family-scope.pet-feeding .pet-feeding__note { margin-top: var(--om-s3); }
/* L38 V2's own <style>, verbatim in every declaration, under the family PDP's
   selector contract (assets/section-pdp-family.css, THE CASCADE CONTRACT). */
section.pdp-family-scope.lego-L38-v2 .split { display: grid; gap: var(--om-s5); grid-template-columns: 1fr; grid-template-areas: "names" "media" "ledger"; }
section.pdp-family-scope.lego-L38-v2 .names { grid-area: names; display: grid; gap: var(--om-s3); justify-items: start; min-width: 0; }
section.pdp-family-scope.lego-L38-v2 .name { font-size: var(--om-text-h2); line-height: var(--om-leading-snug); max-width: 100%; }
section.pdp-family-scope.lego-L38-v2 .figure { grid-area: media; background: var(--om-cream-deep); }
section.pdp-family-scope.lego-L38-v2 .figure img { padding: var(--om-s5); }
/* v14 glue (build_v14.py): a real photograph fills the Frame edge to edge */
section.pdp-family-scope.lego-L38-v2 .figure { position: relative; overflow: hidden; }
section.pdp-family-scope.lego-L38-v2 .figure img.om-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; padding: 0; }
section.pdp-family-scope.lego-L38-v2 .ledger { grid-area: ledger; --om-thread-gap: var(--om-s6); }
section.pdp-family-scope.lego-L38-v2 .ledger > li > .row { display: grid; gap: var(--om-s2); min-width: 0; }
section.pdp-family-scope.lego-L38-v2 .ledger p { max-width: 52ch; }
@media (min-width: 750px) {
  section.pdp-family-scope.lego-L38-v2 .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "media names" "media ledger"; gap: var(--om-s6); align-items: start; }
}
@media (min-width: 990px) {
  section.pdp-family-scope.lego-L38-v2 .split { gap: var(--om-s7); }
  section.pdp-family-scope.lego-L38-v2 .ledger { --om-thread-gap: var(--om-s7); }
}
/* END_SECTION:product-understanding */

/* START_SECTION:quiz-entry-band (INDEX:127) */
.qeb { border-bottom: 1px solid var(--line); }
  .qeb__inner { padding-top: var(--s5); padding-bottom: var(--s5); }
  .qeb__band {
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: var(--btr) 0 var(--btr) 0;
    padding: var(--s4);
  }
  .qeb__heading { font-size: var(--t-h2); line-height: 1.12; color: var(--ink); margin: 0 0 var(--s2); }
  .qeb__lede {
    font-family: var(--font-read);
    font-size: var(--t-body);
    color: var(--mute);
    max-width: var(--bw-prose);
    margin: 0 0 var(--s3);
  }
  .qeb__steps { display: grid; grid-template-columns: 1fr; gap: var(--s3); margin-bottom: var(--s3); }
  .qeb-step__q {
    font-family: var(--font-utility);
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--ink);
    margin: 0 0 var(--s1);
  }
  .qeb-step__choices { display: flex; flex-wrap: wrap; gap: var(--s1); }
  .qeb-choice {
    font: inherit;
    font-family: var(--font-read);
    font-size: 0.875rem;
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 4px var(--s2);
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--mute);
    border-radius: 999px;
    cursor: pointer;
    transition: border-color 0.12s ease, color 0.12s ease, background-color 0.12s ease;
  }
  .qeb-choice:hover { border-color: var(--orange); }
  .qeb-choice:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  .qeb-choice[aria-pressed="true"] {
    border-color: var(--orange);
    background: var(--card);
    color: var(--ink);
    font-weight: 700;
  }

  .qeb-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--s5);
    padding: 12px var(--s3);
    background: var(--orange);
    color: var(--cream);
    font-family: var(--font-utility);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.02em;
    text-decoration: none;
    border: 0;
    border-radius: var(--btr) 0 var(--btr) 0;
    cursor: pointer;
    transition: background-color 0.15s ease;
  }
  .qeb-cta:hover { background: var(--orange-shade); }
  .qeb-cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

  @media (min-width: 750px) {
    .qeb__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) var(--s4); }
  }
/* END_SECTION:quiz-entry-band */

/* START_SECTION:review-trust-strip (INDEX:131) */
/* Selector contract: every rule is its lego selector plus `section.pdp-family-scope`
   (assets/section-pdp-family.css, THE CASCADE CONTRACT), so the lego's own
   cascade holds against the primitives whatever order the links land in. */
/* A MECHANICAL PORT of legos/L49-review-trust-strip/v5.html's scoped <style>,
   as carried into L45 v13. Only the var() names resolve differently. */
section.pdp-family-scope.lego-L49-v5 { padding-block: var(--om-s6); }
section.pdp-family-scope.lego-L49-v5 .row { display: grid; grid-template-columns: 1fr; gap: var(--om-s5); }
section.pdp-family-scope.lego-L49-v5 .stars {
  margin: 0;
  font-size: calc(var(--om-text-lead) * 1.25);
}
section.pdp-family-scope.lego-L49-v5 .quote { margin: var(--om-s4) 0 0; }
section.pdp-family-scope.lego-L49-v5 .quote p {
  font-family: var(--om-font-display);
  font-weight: var(--om-display-weight);
  letter-spacing: var(--om-display-tracking);
  line-height: var(--om-leading-snug);
  font-size: calc(var(--om-text-h3) * 1.0833);
}
section.pdp-family-scope.lego-L49-v5 .attrib {
  margin: var(--om-s5) 0 0;
  line-height: var(--om-leading-snug);
}
section.pdp-family-scope.lego-L49-v5 .who {
  display: block;
  font-family: var(--om-font-utility);
  font-size: var(--om-text-lead);
}
section.pdp-family-scope.lego-L49-v5 .role { display: block; font-size: var(--om-text-body); margin-top: var(--om-s2); }
section.pdp-family-scope.lego-L49-v5 .unit + .unit { border-top: 1px solid var(--om-line); padding-top: var(--om-s5); }
@media (min-width: 990px) {
  section.pdp-family-scope.lego-L49-v5 { padding-block: var(--om-s7); }
  section.pdp-family-scope.lego-L49-v5 .row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--om-s7); }
  section.pdp-family-scope.lego-L49-v5 .stars { font-size: calc(var(--om-text-lead) * 1.4); }
  section.pdp-family-scope.lego-L49-v5 .unit + .unit {
    border-top: 0;
    padding-top: 0;
    border-left: 1px solid var(--om-line);
    padding-left: var(--om-s7);
  }
}
/* END_SECTION:review-trust-strip */

/* START_SECTION:review-widget-mount (INDEX:132) */
/* L09 V5's section frame and widget shell. The lego's rules for the mock's
   inner anatomy are not ported: that DOM is Yotpo's, styled in Yotpo's editor.
   The root is deliberately outside `.pdp-family-scope` (see the header), so
   these rules bind the tokens directly, with the lego's own values. */
section.lego-L09-v5 { padding-block: var(--om-section-y); }
section.lego-L09-v5 .l09-inner { width: min(100% - 2 * var(--om-gutter), var(--om-content-max)); margin-inline: auto; }
section.lego-L09-v5 .l09-inner > * + * { margin-top: var(--om-s6); }
section.lego-L09-v5 .yotpo {
  background: var(--om-cream);
  padding: var(--om-s5);
  border: var(--om-hairline);
  border-radius: 0 var(--om-frame-r-md) 0 var(--om-frame-r-md);
  overflow: hidden;
}
@media (min-width: 990px) {
  section.lego-L09-v5 .yotpo { padding: var(--om-s7); }
}

/* TAP TARGETS (D-014: 44px at 375; wi-2026-0937, 2026-09-23). Yotpo draws its
   own controls at 13-43px. Each gets a transparent ::after that reaches 44px
   on the short side(s) and is centred on the control, so the visible widget is
   untouched. None of these controls uses ::after itself (checked on the
   rendered candidate 2026-09-23); re-check after a Yotpo widget update. */
.lego-L09-v5 .yotpo :is(
  .ugc-storefront-widgets-tabs-container__tab, .yotpo-icon-btn, .yotpo-new-review-btn,
  .yotpo-icon-button, .yotpo-smart-topics-see-more-label,
  .yotpo-reviews-pagination-item, .yotpo-review-votes-icons) { position: relative; }
.lego-L09-v5 .yotpo :is(
  .ugc-storefront-widgets-tabs-container__tab, .yotpo-icon-btn, .yotpo-new-review-btn,
  .yotpo-icon-button, .yotpo-smart-topics-see-more-label,
  .yotpo-reviews-pagination-item, .yotpo-review-votes-icons)::after {
  content: ""; position: absolute;
  top: min(0px, calc(50% - var(--om-tap) / 2)); bottom: min(0px, calc(50% - var(--om-tap) / 2));
  left: min(0px, calc(50% - var(--om-tap) / 2)); right: min(0px, calc(50% - var(--om-tap) / 2));
}
/* The helpful / not-helpful pair sits 35px apart, so centred 44px areas would
   overlap by 9px and a thumb could vote the wrong way. Each grows AWAY from the
   other instead: helpful to the left, not-helpful to the right. */
.lego-L09-v5 .yotpo .yotpo-review-votes-icons[aria-label="This review was helpful"]::after {
  left: calc(100% - var(--om-tap)); right: 0;
}
.lego-L09-v5 .yotpo .yotpo-review-votes-icons[aria-label="This review was not helpful"]::after {
  left: 0; right: calc(100% - var(--om-tap));
}
/* ==========================================================================
   THE YOTPO SKIN (wi-2026-0937, 2026-09-28; o7 verify found the widget
   unskinned: #284734 fill buttons, an unreadable "See reviews summary" button
   (grey text on green), orange bars, 10-14px type). Yotpo's editor-side CSS is
   still owed; until then the theme skins Yotpo's own DOM to L09 v5 here,
   scoped to this section's wrapper so no other Yotpo surface is touched.
   Nothing is hidden: every rule changes ink, face, size or border only.
   1. Yotpo's colour/face variables are set INLINE on the widget root, so they
      are overridden with !important (a stylesheet !important beats an inline
      normal declaration). Everything that reads them follows.
   2. Faces: Moret for the score + review titles, Scale (wdth token) for
      labels/buttons/names, Acumin for reading text. Sizes from the tokens.
   3. Buttons become the page's brown OUTLINE secondary (one orange primary per
      screen stays the buy box's).
   Selectors are Yotpo Reviews Widget 3.0 class names read off the rendered
   candidate 2026-09-28; re-check after a Yotpo widget update.
   ========================================================================== */
section.lego-L09-v5 .yotpo [style*="--primary-color"],
section.lego-L09-v5 .yotpo .yotpo-reviews-main-widget,
section.lego-L09-v5 .yotpo .yotpo-questions-and-answers {
  --primary-color: var(--om-brown) !important;
  --text-color: var(--om-ink) !important;
  --stars-color: var(--om-brown) !important;
  --yotpo-stars-orange: var(--om-brown) !important;
  --primary-font-family: var(--om-font-utility) !important;
  --secondary-font-family: var(--om-font-body) !important;
  --empty-state-button-color: var(--om-brown) !important;
  --product-custom-questions-color: var(--om-brown) !important;
  --yotpo-black: var(--om-ink) !important;
  --yotpo-primary-text-black: var(--om-ink) !important;
  --yotpo-separator-line-grey: var(--om-line) !important;
  --yotpo-b2b-light-grey: var(--om-line) !important;
  --yotpo-card-accent: var(--om-ink-soft) !important;
  color: var(--om-ink);
  font-family: var(--om-font-body);
}

/* ---- Reading text: Acumin, body size, ink -------------------------------- */
section.lego-L09-v5 .yotpo :is(
  .yotpo-read-more-text, .yotpo-review-content, .yotpo-text-container,
  .yotpo-bottom-line-basic-text, .yotpo-header-summary) {
  font-family: var(--om-font-body) !important;
  font-size: var(--om-text-body) !important;
  line-height: var(--om-leading-body) !important;
  color: var(--om-ink) !important;
}
section.lego-L09-v5 .yotpo :is(
  .yotpo-review-date, .yotpo-date-format, .yotpo-review-votes-text,
  .yotpo-review-votes-number, .yotpo-star-distribution-value,
  .yotpo-star-distribution-index) {
  font-family: var(--om-font-body) !important;
  font-size: var(--om-text-small) !important;
  color: var(--om-ink-soft-deep) !important;
}

/* ---- Headings: Moret ------------------------------------------------------ */
section.lego-L09-v5 .yotpo .yotpo-bottom-line-score {
  font-family: var(--om-font-display) !important;
  font-size: var(--om-text-display-lg) !important;
  line-height: var(--om-leading-tight) !important;
  font-weight: 400 !important;
  color: var(--om-ink) !important;
}
section.lego-L09-v5 .yotpo .yotpo-review-title {
  font-family: var(--om-font-display) !important;
  font-size: var(--om-text-h3) !important;
  line-height: var(--om-leading-snug) !important;
  font-weight: 400 !important;
  text-transform: none !important;
  color: var(--om-ink) !important;
}

/* ---- Labels: Scale at the token width ------------------------------------- */
section.lego-L09-v5 .yotpo :is(
  .ugc-storefront-widgets-tabs-container__tab, .yotpo-reviewer-name,
  .yotpo-reviewer-verified-buyer-text, .yotpo-media-gallery-headline,
  .yotpo-smart-topics-headline, .yotpo-smart-topic-filter,
  .yotpo-smart-topics-see-more-label, .yotpo-dropdown-closable,
  .yotpo-dropdown-base, .yotpo-selected-value, .yotpo-dropdown-option-label,
  .yotpo-reviews-pagination-item, .yotpo-bottom-line-text) {
  font-family: var(--om-font-utility) !important;
  font-variation-settings: "wdth" var(--om-scale-width) !important;
  font-stretch: 100% !important;
  font-weight: var(--om-subhead-weight) !important;
  letter-spacing: var(--om-subhead-tracking) !important;
  color: var(--om-ink) !important;
}
section.lego-L09-v5 .yotpo :is(.yotpo-reviewer-name, .ugc-storefront-widgets-tabs-container__tab.selected) {
  font-size: var(--om-text-body) !important;
}
section.lego-L09-v5 .yotpo :is(
  .yotpo-reviewer-verified-buyer-text, .yotpo-media-gallery-headline,
  .yotpo-smart-topics-headline, .yotpo-smart-topic-filter,
  .yotpo-smart-topics-see-more-label, .yotpo-dropdown-closable,
  .yotpo-dropdown-base, .yotpo-selected-value, .yotpo-dropdown-option-label,
  .yotpo-reviews-pagination-item) {
  font-size: var(--om-text-small) !important;
}
section.lego-L09-v5 .yotpo .yotpo-reviewer-verified-buyer-text { color: var(--om-ink-soft-deep) !important; }

/* ---- Buttons: brown outline secondary ------------------------------------- */
section.lego-L09-v5 .yotpo :is(
  .yotpo-new-review-btn, .yotpo-icon-btn.yotpo-color-fill-btn,
  .yotpo-question-btn, .yotpo-ask-question-btn-s) {
  background: color-mix(in srgb, var(--om-cream) 70%, transparent) !important;
  border: var(--om-keyline) !important;
  border-radius: 0 var(--om-frame-r) 0 var(--om-frame-r) !important;
  color: var(--om-ink) !important;
  min-height: var(--om-tap) !important;
  padding-inline: var(--om-s5) !important;
  font-family: var(--om-font-utility) !important;
  font-variation-settings: "wdth" var(--om-scale-width) !important;
  font-weight: var(--om-caps-weight) !important;
  letter-spacing: var(--om-caps-tracking) !important;
  text-transform: uppercase !important;
  font-size: var(--om-text-micro) !important;
  box-shadow: none !important;
}
section.lego-L09-v5 .yotpo :is(
  .yotpo-new-review-btn, .yotpo-icon-btn.yotpo-color-fill-btn,
  .yotpo-question-btn, .yotpo-ask-question-btn-s):hover {
  background: var(--om-cream-deep) !important;
}
section.lego-L09-v5 .yotpo .yotpo-icon-btn.yotpo-color-fill-btn :is(.yotpo-button-icon-text, span, div) {
  color: var(--om-ink) !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
}
section.lego-L09-v5 .yotpo .yotpo-icon-btn.yotpo-color-fill-btn svg { color: var(--om-ink) !important; }
section.lego-L09-v5 .yotpo .yotpo-icon-btn.yotpo-color-fill-btn svg [fill]:not([fill="none"]) { fill: var(--om-ink) !important; }
section.lego-L09-v5 .yotpo .yotpo-icon-btn.yotpo-color-fill-btn svg [stroke]:not([stroke="none"]) { stroke: var(--om-ink) !important; }

/* ---- Histogram + rules + chips + sort + pagination ------------------------ */
section.lego-L09-v5 .yotpo .yotpo-progress-bar {
  background: var(--om-cream-deep) !important;
  border-radius: var(--om-control-r) !important;
}
section.lego-L09-v5 .yotpo .yotpo-progress-bar-score { background: var(--om-brown) !important; }
section.lego-L09-v5 .yotpo :is(
  .ugc-storefront-widgets-tabs-container, .yotpo-filters-container-inner,
  .yotpo-header-container, .yotpo-review-votes-wrapper, .yotpo-vertical-border) {
  border-color: var(--om-line) !important;
}
section.lego-L09-v5 .yotpo .ugc-storefront-widgets-tabs-container__tab.selected { border-bottom-color: var(--om-brown) !important; }
section.lego-L09-v5 .yotpo .yotpo-smart-topic-filter {
  background: var(--om-cream-deep) !important;
  border-color: var(--om-line) !important;
}
section.lego-L09-v5 .yotpo .yotpo-dropdown-content-wrapper { background: var(--om-cream) !important; border-color: var(--om-line) !important; }
section.lego-L09-v5 .yotpo .yotpo-dropdown-option--focus { background: var(--om-cream-deep) !important; }
section.lego-L09-v5 .yotpo .yotpo-dropdown-option--focus :is(.yotpo-dropdown-option-label, svg) { color: var(--om-ink) !important; fill: var(--om-ink) !important; }
section.lego-L09-v5 .yotpo .yotpo-reviews-pagination-item { color: var(--om-ink-soft-deep) !important; }
section.lego-L09-v5 .yotpo .yotpo-reviews-pagination-item.selected { color: var(--om-ink) !important; }
section.lego-L09-v5 .yotpo .yotpo-pagination-icon { fill: var(--om-ink-soft-deep) !important; }
section.lego-L09-v5 .yotpo .yotpo-review + .yotpo-review,
section.lego-L09-v5 .yotpo .yotpo-review-border-dashed { border-color: var(--om-line) !important; }
/* END_SECTION:review-widget-mount */

/* START_SECTION:ritual-band (INDEX:134) */
/* Transparent band: inherits the Fresh Cream page ground, no color-scheme slab. */
  .rb { border-bottom: 1px solid var(--line); }
  .rb__inner { padding-top: var(--s5); padding-bottom: var(--s5); }
  .rb__heading {
    font-size: var(--t-h2);
    line-height: 1.12;
    color: var(--ink);
    margin: 0 0 var(--s2);
  }
  .rb__lede {
    font-family: var(--font-read);
    font-size: var(--t-body);
    line-height: 1.5;
    color: var(--mute);
    max-width: var(--bw-prose);
    margin: 0 0 var(--s4);
  }
  .rb__lede > :first-child { margin-top: 0; }
  .rb__lede > :last-child { margin-bottom: 0; }
  .rb__eyebrow {
    font-family: var(--font-utility);
    font-size: var(--t-eyebrow);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mute);
    margin: 0 0 var(--s2);
  }
  .rb__aisles {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s1) var(--s2);
  }
  /* Each aisle is a bordered pill link — a real route, keyboard-operable. */
  .rb__aisle {
    display: inline-flex;
    align-items: center;
    min-height: var(--s5);
    padding: 4px var(--s3);
    border: 1px solid var(--line);
    border-radius: var(--btr) 0 var(--btr) 0;
    background: var(--card);
    color: var(--ink);
    font-family: var(--font-utility);
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: border-color 0.12s ease, color 0.12s ease;
  }
  .rb__aisle:hover { border-color: var(--orange); color: var(--orange); }
  .rb__aisle:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* END_SECTION:ritual-band */

/* START_SECTION:routine-board (INDEX:135) */
/* Selector contract: every rule is its lego selector plus `section.pdp-family-scope`
   (assets/section-pdp-family.css, THE CASCADE CONTRACT), so the lego's own
   cascade holds against the primitives whatever order the links land in. */
/* A MECHANICAL PORT of legos/L51-bundle-section/v7.html's scoped <style>, as
   carried into L45 v13. Only the var() names resolve differently.
   V7 is the 375 rebuild: below 750 the board is ONE Frame carrying the ground,
   the hairline and the radius, the rows give up their own Frames and are
   separated by hairlines, a vertical Thread runs down a left rail, and the lit
   row is a family-light FILL (a halo inside a clipping Frame cannot render). */
section.pdp-family-scope.lego-L51-v7 .day {
  margin-top: var(--om-s6);
  display: grid;
  gap: 0;
  background-color: var(--om-cream-deep);
  border: var(--om-hairline);
  border-radius: 0 var(--om-frame-r-md) 0 0;
  overflow: hidden;
}
section.pdp-family-scope.lego-L51-v7 .moment {
  position: relative;
  z-index: 1;
  background-color: transparent;
  border-radius: 0;
  overflow: visible;
  padding: var(--om-s4) var(--om-s4) var(--om-s4) var(--om-s5);
  display: grid;
  grid-template-columns: var(--shot-w) minmax(0, 1fr);
  grid-template-areas:
    "shot name"
    "shot role"
    "shot buy";
  column-gap: var(--om-s4);
  row-gap: var(--om-s2);
  align-items: start;
  --shot-w: calc(var(--om-s9) - var(--om-s2));
  --shot-h: calc(var(--om-s9) - var(--om-s2));
}
section.pdp-family-scope.lego-L51-v7 .moment + .moment { border-top: var(--om-hairline); }
section.pdp-family-scope.lego-L51-v7 .moment-name .om-thread-dot {
  position: absolute;
  left: var(--om-s2);
  top: calc(var(--om-s4) + var(--om-s6) / 2 - var(--om-thread-dot) / 2);
}
section.pdp-family-scope.lego-L51-v7 .moment:not(:last-of-type)::before {
  content: "";
  position: absolute;
  left: calc(var(--om-s2) + var(--om-thread-dot) / 2 - var(--om-thread-w) / 2);
  top: calc(var(--om-s4) + var(--om-s6) / 2);
  height: calc(100% + var(--om-thread-w) / 2);
  width: var(--om-thread-w);
  background-color: var(--om-species-mid);
  z-index: 0;
}
section.pdp-family-scope.lego-L51-v7 .moment--here {
  background-color: var(--om-species-light);
  box-shadow: none;
}
section.pdp-family-scope.lego-L51-v7 .moment-name {
  grid-area: name;
  display: flex;
  align-items: center;
  gap: var(--om-s2);
  min-height: var(--om-s6);
  color: var(--om-ink);
}
section.pdp-family-scope.lego-L51-v7 .moment-role { grid-area: role; color: var(--om-ink-soft-deep); }
section.pdp-family-scope.lego-L51-v7 .shot {
  grid-area: shot;
  position: relative;
  height: var(--shot-h);
}
section.pdp-family-scope.lego-L51-v7 .shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1.25);
}
section.pdp-family-scope.lego-L51-v7 .buy {
  grid-area: buy;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--om-s2) var(--om-s4);
  margin-top: 0;
}
section.pdp-family-scope.lego-L51-v7 .buy-name { color: var(--om-ink); }
section.pdp-family-scope.lego-L51-v7 .buy-price { color: var(--om-ink); }
section.pdp-family-scope.lego-L51-v7 .buy-tag { color: var(--om-ink-soft-deep); }
section.pdp-family-scope.lego-L51-v7 .offer {
  margin-top: 0;
  background-color: var(--om-species-wash);
  border: var(--om-hairline);
  border-top: 0;
  border-radius: 0 0 0 var(--om-frame-r-md);
  padding: var(--om-s5);
  display: grid;
  gap: var(--om-s4);
  align-items: center;
}
section.pdp-family-scope.lego-L51-v7 .offer-head { color: var(--om-ink); }
section.pdp-family-scope.lego-L51-v7 .offer-reason { margin-top: var(--om-s2); }
section.pdp-family-scope.lego-L51-v7 .offer-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--om-s2) var(--om-s4);
}
section.pdp-family-scope.lego-L51-v7 .offer-now { color: var(--om-ink); font-size: var(--om-text-h3); }
section.pdp-family-scope.lego-L51-v7 .offer-was { text-decoration: line-through; }
section.pdp-family-scope.lego-L51-v7 .offer-save { margin-top: var(--om-s2); }
section.pdp-family-scope.lego-L51-v7 .offer-act { display: grid; }
section.pdp-family-scope.lego-L51-v7 .buy-name { text-decoration: none; }
section.pdp-family-scope.lego-L51-v7 .alt-offer { margin-top: var(--om-s2); }
section.pdp-family-scope.lego-L51-v7 .alt-offer a {
  display: inline-flex;
  align-items: center;
  min-height: var(--om-tap);
  color: var(--om-ink-soft-deep);
}
@media (min-width: 750px) {
  section.pdp-family-scope.lego-L51-v7 .day {
    position: relative;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--om-s5);
    align-items: stretch;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
  }
  section.pdp-family-scope.lego-L51-v7 .day::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--om-s5) + var(--om-s6) / 2);
    height: var(--om-thread-w);
    background-color: var(--om-line);
    transform: translateY(-50%);
    z-index: 0;
  }
  section.pdp-family-scope.lego-L51-v7 .moment {
    padding: var(--om-s5);
    background-color: var(--om-cream-deep);
    border-radius: 0 var(--om-frame-r-md) 0 var(--om-frame-r-md);
    overflow: hidden;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "name" "shot" "role" "buy";
    row-gap: var(--om-s4);
    --shot-w: auto;
    --shot-h: calc(var(--om-s9) + var(--om-s8));
  }
  section.pdp-family-scope.lego-L51-v7 .moment + .moment { border-top: 0; }
  section.pdp-family-scope.lego-L51-v7 .moment:not(:last-of-type)::before { content: none; }
  section.pdp-family-scope.lego-L51-v7 .moment-name .om-thread-dot { position: static; }
  section.pdp-family-scope.lego-L51-v7 .buy { margin-top: 0; }
  section.pdp-family-scope.lego-L51-v7 .moment--here {
    background-color: var(--om-cream-deep);
    --glow-near: var(--om-s4);
    --glow-far:  var(--om-s5);
    box-shadow:
      0 0 var(--glow-near) color-mix(in srgb, var(--om-species-mid) 84%, transparent),
      0 0 var(--glow-far)  color-mix(in srgb, var(--om-species-mid) 50%, transparent);
  }
  section.pdp-family-scope.lego-L51-v7 .offer {
    margin-top: var(--om-s5);
    gap: var(--om-s5);
    border: var(--om-hairline);
    border-radius: 0 var(--om-frame-r-md) 0 var(--om-frame-r-md);
  }
}
@media (min-width: 990px) {
  section.pdp-family-scope.lego-L51-v7 .offer {
    grid-template-columns: minmax(0, 1fr) auto auto;
    column-gap: var(--om-s7);
    padding: var(--om-s6);
  }
  section.pdp-family-scope.lego-L51-v7 .offer-act { min-width: calc(var(--om-s9) * 3); }
}
/* END_SECTION:routine-board */

/* START_SECTION:slideshow (INDEX:138) */
.home-hero { border-bottom: 1px solid var(--line); }
  .home-hero__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s4);
    align-items: center;
    padding-top: var(--s5);
    padding-bottom: var(--s5);
  }
  .home-hero__eyebrow {
    font-family: var(--font-utility);
    font-size: var(--t-eyebrow);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mute);
    margin: 0 0 var(--s2);
  }
  .home-hero__title {
    font-size: var(--t-h1);
    line-height: 1.08;
    margin: 0 0 var(--s3);
    color: var(--ink);
  }
  .home-hero__lede {
    font-family: var(--font-read);
    font-size: var(--t-body);
    line-height: 1.5;
    color: var(--mute);
    max-width: var(--bw-prose);
    margin: 0;
  }
  .home-hero__lede > :first-child { margin-top: 0; }
  .home-hero__lede > :last-child { margin-bottom: 0; }
  .home-hero__ctas { margin-top: var(--s4); }

  /* Primary CTA — Vital Orange fill, Fresh Cream label, utility face, the
     D-017 Frame (matches the chrome build's header/cart/footer CTAs). */
  .home-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--s5);
    padding: 12px var(--s3);
    background: var(--orange);
    color: var(--cream);
    font-family: var(--font-utility);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.02em;
    text-decoration: none;
    border: 0;
    border-radius: var(--btr) 0 var(--btr) 0;
    cursor: pointer;
    transition: background-color 0.15s ease;
  }
  .home-cta:hover { background: var(--orange-shade); }
  .home-cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

  /* D-018 hero ratios: 4:5 mobile, 3:2 desktop (the switch rides the 750 layout move). */
  .home-hero__media { min-width: 0; }
  .home-hero__img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--btr) 0 var(--btr) 0;
    background: var(--soft);
  }
  /* Empty-image slot: a flat, labelled token block — never demo art (increment 2). */
  .home-hero__ph {
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 4 / 5;
    padding: var(--s3);
    border: 1px solid var(--line);
    border-radius: var(--btr) 0 var(--btr) 0;
    background: var(--soft);
  }
  .home-hero__ph-label {
    font-family: var(--font-utility);
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    text-align: center;
    color: var(--mute);
  }

  @media (min-width: 750px) {
    .home-hero__inner { grid-template-columns: 1.1fr 1fr; gap: var(--s5); }
    .home-hero__img,
    .home-hero__ph { aspect-ratio: 3 / 2; }
    .home-hero__img--mobile { display: none; }
    .home-hero__img--desktop { display: block; }
  }
  @media (max-width: 749px) {
    .home-hero__img--desktop { display: none; }
  }
/* END_SECTION:slideshow */

/* START_SECTION:testimonial (INDEX:141) */
.rv { border-bottom: 1px solid var(--line); }
  .rv__inner { padding-top: var(--s5); padding-bottom: var(--s5); }
  .rv__heading { font-size: var(--t-h2); line-height: 1.12; color: var(--ink); margin: 0 0 var(--s3); }
  .rv__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s2);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .rv-card {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    min-width: 0;
    padding: var(--s3);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--btr) 0 var(--btr) 0;
  }
  .rv-card__fam {
    font-family: var(--font-utility);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mute);
    margin: 0;
  }
  .rv-card__quote {
    font-family: var(--font-read);
    font-size: 1rem;
    line-height: 1.45;
    color: var(--ink);
    margin: 0;
    quotes: "\201C" "\201D";
  }
  .rv-card__quote::before { content: open-quote; }
  .rv-card__quote::after { content: close-quote; }
  .rv-card__stars { letter-spacing: 2px; font-size: 0.875rem; line-height: 1; margin-top: auto; }
  .rv-card__star--full { color: var(--orange); }
  .rv-card__star--open { color: var(--line); }
  .rv__footnote {
    font-family: var(--font-read);
    font-size: 0.8125rem;
    color: var(--mute);
    margin: var(--s3) 0 0;
    max-width: var(--bw-prose);
  }
  @media (min-width: 990px) {
    .rv__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
  }
/* END_SECTION:testimonial */

/* START_SECTION:traceability (INDEX:144) */
/* PROVISIONAL: values replaced from LEGO-LOCK-REGISTER.md when this lego locks */
/*
  A MECHANICAL PORT of legos/L34-traceability-modal/v1.html's own <style> block
  plus the base.css primitives its markup leans on (.om-modal-scrim / .om-modal /
  .om-modal-body / .om-modal-close / .om-sr-only / .om-thread-dot / .om-slot /
  .om-slot--inline / .om-caps / .om-small / .om-subhead / .om-display--lg /
  .om-soft), and the TWO grid fixes the wireframe found while rendering it.
  Nothing was re-authored, re-spaced or re-scaled: only the var() NAMES changed,
  per .frontend-build/brand-tokens.md. A bound role points at the THEME variable;
  an unbound role points at assets/web-legos-provisional-tokens.css.

  THE MODAL IS CHROME, so every corner in it is a FIXED radius tier, never the
  fluid one. tokens.css states the rule: contained page content takes the fluid
  tier, a bleeding Frame takes --om-frame-r-band, and "controls and fixed-width
  chrome (a 420px drawer, a modal, a button)" take -*-fixed. Nothing inside the
  panel breathes at a different rate from the box it sits in.

  ONE DELIBERATELY GLOBAL RULE, recorded rather than hidden: the scroll lock has
  to set overflow on <html>, which cannot be scoped to the section. It is
  declared on a section-namespaced class nothing else uses, and it is the only
  rule in this file outside the .traceability scope.

  NOT CARRIED, per port spec section 7: .l45-trigger-seat (max-width: 280px) and
  the trigger's own margin-left: auto. Both were cosmetic fixes for L34's
  two-column PDP stand-in, where the trigger had to dodge the open 720px panel.
  This section's trigger is left-aligned and capped at the wireframe's own 420px.
  Also not carried: the comp's PDP stand-in and "static copy for review" blocks,
  which are render.mjs devices, not lego structure.

  DROPPED, with reason: font-variation-settings: "wdth" var(--om-scale-width) on
  every Scale role. Scale VF is NOT served on the web rail (D-030) and the theme
  pins Bricolage to wdth=100 inside font-face.liquid. Same drop as every section
  in this unit.

  LITERALS KEPT, each with a reason, none invented:
    · 1px hairlines and 1px dashed reservations — brand-tokens.md section 6
      records that no border-width token exists and that base.css carries the
      same literal "by necessity, not by shortcut".
    · 56px thumb, 160px shot, 420px trigger cap, 720px panel, 85vh panel height,
      0.18em dt nudge — the lego's and the wireframe's own fixed-chrome
      measurements. All PROVISIONAL.

  BREAKPOINT DEVIATION, recorded not hidden: Dawn's real breakpoints are 750,
  990 and 1280 (D-011 v2). This section keeps L34's NATIVE 600 and 768, because
  decision 14 and adjudication 11 name a lego-native breakpoint DECIDED
  structure and say do not normalise it. Neither is a verify viewport, so both
  flips are asserted explicitly at 599/600 and 767/768 in the real-browser pass.
*/

.traceability { padding-block: var(--om-section-y); }
.traceability dl,
.traceability dd { margin: 0; }

/* ---- THE TRIGGER: a Frame-sm card that opens the report card --------------
   A real <button>, over the 44px floor by construction (the thumb alone is
   56px). Frame-sm, and the FIXED radius: it is a control. */
.traceability__trigger {
  display: flex;
  align-items: center;
  gap: var(--om-s3);
  width: 100%;
  max-width: 420px;
  min-height: var(--om-tap);
  padding: var(--om-s3);
  border: 1px solid var(--line);
  border-radius: 0 var(--om-frame-r-sm-fixed) 0 var(--om-frame-r-sm-fixed);
  background: var(--cream);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.traceability__trigger:hover { border-color: var(--brown); }
.traceability__trigger:focus-visible { outline: var(--om-focus-ring); outline-offset: 2px; }

/* The reservation standing in for the species macro. .om-slot's own quiet
   field: a reviewer sees the SLOT, not a fake photo. */
.traceability__thumb {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  flex: none;
  overflow: hidden;
  padding: var(--om-s1);
  border-radius: 0 var(--om-frame-r-sm-fixed) 0 var(--om-frame-r-sm-fixed);
  border: 1px dashed var(--line);
  background: var(--soft);
}
.traceability__thumb-label {
  font-family: var(--font-utility);
  font-size: var(--t-eyebrow);
  line-height: 1.2;
  text-align: center;
  color: var(--mute);
  overflow-wrap: anywhere;
}

.traceability__trigger-text { display: grid; gap: var(--om-s1); min-width: 0; }
/* .om-subhead--sm: the utility face at body size. */
.traceability__trigger-label {
  font-family: var(--font-utility);
  font-weight: var(--om-subhead-weight);
  letter-spacing: var(--om-subhead-tracking);
  font-size: var(--t-body);
  line-height: var(--om-leading-snug);
  color: var(--ink);
}
/* .om-caps + .om-soft: the PROPOSED marker. */
.traceability__proposed {
  display: inline-block;
  font-family: var(--font-utility);
  font-weight: var(--om-caps-weight);
  letter-spacing: var(--om-caps-tracking);
  text-transform: uppercase;
  font-size: var(--t-eyebrow);
  line-height: 1.2;
  color: var(--mute);
}

/* .om-thread-dot + .om-thread-dot--accent: the ONE accent in this section. */
.traceability__dot {
  width: var(--om-thread-dot);
  height: var(--om-thread-dot);
  flex: none;
  margin-left: auto;
  border-radius: 50%;
  background: var(--orange);
}

/* ---- THE SCRIM: the fixed overlay, and the click-to-close surface ---------
   .om-modal-scrim, ported. The scrim carries the hidden attribute, so the
   panel inside it leaves the accessibility tree with it. */
.traceability__scrim {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(var(--ink-rgb), 0.6);
  display: grid;
  place-items: center;
  padding: var(--om-s5);
}
.traceability__scrim[hidden] { display: none; }

/* .om-modal, ported. 720px of fixed-width chrome, the LARGE fixed corner. */
.traceability__modal {
  position: relative;
  width: 100%;
  max-width: 720px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  background: var(--cream);
  color: var(--ink);
  border-radius: 0 var(--om-frame-r-lg-fixed) 0 var(--om-frame-r-lg-fixed);
  overflow: hidden;
}

/* .om-modal-close, ported. A real button with an accessible name, at the tap
   size by construction. */
.traceability__close {
  position: absolute;
  top: var(--s2);
  right: var(--s2);
  width: var(--om-tap);
  height: var(--om-tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--ink);
  border-radius: var(--btr);
  background: var(--brown);
  color: var(--cream);
  font-size: var(--om-text-h3);
  line-height: 1;
  cursor: pointer;
}
.traceability__close:hover { background: var(--om-brown-deep); }
.traceability__close:focus-visible { outline: var(--om-focus-ring); outline-offset: 2px; }

/* .om-sr-only, ported: this unit's own copy, since chrome's base.css is not
   ours to add to. */
.traceability__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- THE PANEL'S HEAD (does not scroll; only the body does) -------------- */
.traceability__head {
  padding: var(--s4) var(--s4) var(--s2);
  /* clear of the close control */
  padding-right: calc(var(--s4) + var(--om-tap));
  border-bottom: 1px solid var(--line);
}
/* critic rework (NOTES.md deviation 5): the caps eyebrow above the title was an
   eyebrow label and was removed — the trigger already carries the words, so the
   head is the title alone. Do not add it back. */
.traceability__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--om-display-weight);
  letter-spacing: var(--om-display-tracking);
  line-height: var(--om-leading-tight);
  font-size: var(--t-h2);
}

/* ---- THE REPORT-CARD ROW -------------------------------------------------
   .om-modal-body, ported: only the BODY scrolls, and only vertically. A modal
   that scrolls sideways is the 375 side-scroll rule broken inside a box where
   nobody looks for it. */
.traceability__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s2);
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--s4);
}

.traceability__shot {
  margin: 0;
  min-width: 0;
  display: grid;
  place-items: center;
  width: 160px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  padding: var(--s2);
  border: 1px dashed var(--line);
  border-radius: 0 var(--om-frame-r-md-fixed) 0 var(--om-frame-r-md-fixed);
  background: var(--soft);
}
.traceability__shot-label {
  font-family: var(--font-utility);
  font-size: var(--t-eyebrow);
  line-height: 1.35;
  text-align: center;
  color: var(--mute);
  overflow-wrap: anywhere;
}

/* D18's blanket sentence. .om-small on the reading face. */
.traceability__blanket {
  margin: 0;
  font-family: var(--font-read);
  font-weight: var(--om-body-weight);
  font-size: var(--om-text-small);
  line-height: var(--om-leading-body);
  letter-spacing: var(--om-body-tracking);
  color: var(--ink);
}

/* `display: contents` lets dt and dd land in the dl's own tracks, so the head
   column and the value column line up across all three cells. */
.traceability__cells {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--s1);
  margin: 0;
  min-width: 0;
}
.traceability__cell { display: contents; }
/* .om-caps + .om-soft on the heads. */
.traceability__cells dt {
  font-family: var(--font-utility);
  font-weight: var(--om-caps-weight);
  letter-spacing: var(--om-caps-tracking);
  text-transform: uppercase;
  font-size: var(--t-eyebrow);
  line-height: 1.2;
  color: var(--mute);
  /* Scale caps sit optically low beside Acumin */
  padding-top: 0.18em;
}
.traceability__cells dd {
  font-family: var(--font-read);
  font-weight: var(--om-body-weight);
  font-size: var(--om-text-small);
  line-height: var(--om-leading-body);
  letter-spacing: var(--om-body-tracking);
  color: var(--ink);
  margin: 0 0 var(--om-s1);
  min-width: 0;
}

/* .om-slot--inline, the claims-library bracket. box-decoration-break: clone is
   the round-4 L24/L25 fix: the default `slice` leaves middle fragments open and
   a long wrapping bracket reads as a strikethrough or a rendering fault. The
   bracket left-aligns with the values it sits among (.om-slot centres). */
.traceability__slot {
  display: inline;
  padding: 0 var(--s1);
  border: 1px dashed var(--line);
  background: var(--soft);
  color: var(--mute);
  font-family: var(--font-utility);
  font-size: var(--om-text-small);
  text-align: left;
  max-width: 100%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* The Master Blend prototype note and the page's open-decision note: reviewer
   notes, not sanctioned copy, set quiet and small. */
.traceability__note,
.traceability__open-note {
  margin: 0;
  font-family: var(--font-read);
  font-size: var(--om-text-small);
  line-height: var(--om-leading-body);
  color: var(--mute);
}
.traceability__open-note { margin-top: var(--s3); max-width: var(--om-measure-short); }

.traceability__source {
  margin: var(--s3) 0 0;
  padding-top: var(--s2);
  border-top: 1px solid var(--line);
  font-family: var(--font-read);
  font-size: var(--om-text-small);
  line-height: var(--om-leading-body);
  color: var(--mute);
}

/* THE SCROLL LOCK. The one rule in this file outside the .traceability scope,
   because overflow has to be set on <html> and cannot be scoped to a section.
   The class name is this section's own and nothing else uses it. */
html.traceability-modal-open { overflow: hidden; }

/* L34's NATIVE 600. See the deviation note at the top of this block.
   max-content, NOT auto: `auto` let the dt column absorb the free space when
   the dl was squeezed, leaving the dd an 81px sliver its text overflowed out of
   (it read "California-"). The dt column now sizes to its longest head and the
   dd takes every remaining pixel, with min-width: 0 above so it wraps instead
   of pushing the row wider than its container. */
@media (min-width: 600px) {
  .traceability__cells {
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: var(--s2);
    row-gap: var(--om-s3);
    align-items: baseline;
  }
  .traceability__cells dd { margin-bottom: 0; }
}

/* L34's NATIVE 768. The body has FIVE children (figure, the blanket line, the
   cells, the Master Blend note, the source line), so a bare two-column template
   let them AUTO-FLOW: the photo took col 1 row 1 and the cells wrapped back
   into that same 160px column, which is what made a dd overlap the photo and
   the row below it. Every child is placed EXPLICITLY — the figure spans the
   rows it needs in col 1, everything textual stays in col 2 — so nothing ever
   shares a cell with the figure. */
@media (min-width: 768px) {
  .traceability__body {
    grid-template-columns: 160px minmax(0, 1fr);
    column-gap: var(--s3);
    align-items: start;
    padding: var(--s4) var(--s4) var(--s4);
  }
  .traceability__body > .traceability__shot   { grid-column: 1; grid-row: 1 / span 4; }
  .traceability__body > .traceability__blanket { grid-column: 2; grid-row: 1; }
  .traceability__body > .traceability__cells  { grid-column: 2; grid-row: 2; }
  .traceability__body > .traceability__note   { grid-column: 2; grid-row: 3; }
  .traceability__body > .traceability__source { grid-column: 2; grid-row: 4; }
  .traceability__head {
    padding: var(--s4) var(--s4) var(--s2);
    padding-right: calc(var(--s4) + var(--om-tap));
  }
}

/* Below 768 the panel is a full-width sheet inside the scrim's own gutter, with
   the smaller fixed corner (base.css's own max-width: 767px block). */
@media (max-width: 767px) {
  .traceability__scrim { padding: var(--s2); }
  .traceability__modal {
    max-width: none;
    border-radius: 0 var(--om-frame-r-md-fixed) 0 var(--om-frame-r-md-fixed);
  }
  .traceability__body { padding: var(--s3); }
  .traceability__head {
    padding: var(--s3) var(--s3) var(--s2);
    padding-right: calc(var(--s3) + var(--om-tap));
  }
}

/* No transitions are declared on purpose: prefers-reduced-motion is honoured by
   having nothing to reduce, and a modal that animates has one more thing to get
   wrong (base.css states the same). */
/* END_SECTION:traceability */

/* START_SECTION:true-benefits (INDEX:145) */
.tb { border-bottom: 1px solid var(--line); background: var(--card); }
  .tb__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2) var(--s5);
    padding-top: var(--s4);
    padding-bottom: var(--s4);
  }
  .tb__rating { display: inline-flex; align-items: center; gap: var(--s2); }
  .tb__stars { display: inline-flex; letter-spacing: 2px; font-size: 1.125rem; line-height: 1; }
  .tb__star--full { color: var(--orange); }
  .tb__star--open { color: var(--line); }
  .tb__num {
    font-family: var(--font-read);
    font-size: 0.9375rem;
    color: var(--mute);
  }
  .tb__marks {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s1) var(--s2);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .tb__mark {
    display: inline-flex;
    align-items: center;
    min-height: var(--s3);
    padding: 4px var(--s2);
    border: 1px solid var(--line);
    border-radius: var(--btr) 0 var(--btr) 0;
    background: var(--soft);
    font-family: var(--font-utility);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink);
  }
/* END_SECTION:true-benefits */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:bundle-offer-skin-grounded-ritual (INDEX:166) */
/* Type-scale base: the theme's html root is 62.5% (theme.liquid), so 1.6rem
     = 16px, the root the approved comps were authored against. Every inner
     font-size is em, scaling from THIS base, so the skin renders at comp-
     intended sizes on every device (2026-08-07 mobile-legibility fix).
     Structural dimensions (control heights, gutters, gaps) stay in px because
     they are matched to MEASURED buy-box controls, not to the type scale. */
  .om.d1 { font-size: 1.6rem;
    --om-forest: var(--color-primary-forest, #284734);
    --om-tangerine: var(--color-primary-tangerine, #FF8F1C);
    --om-beige: var(--color-primary-beige, #F1E7DB);
    --om-ink: var(--color-text-main, #232323);
    --om-muted: var(--color-text-secondary, #808080);
    --om-white: var(--color-primary-white, #ffffff);
    --om-line: #d8d4cb; --om-radius: 2px;
    --om-serif: var(--bst-font-secondary, "IvyPresto Headline", Georgia, serif);
    /* THE THEME SHIPS EACH IVYPRESTO CUT AS ITS OWN FAMILY, and every one of
       them is declared font-style:normal (snippets/font-face.liquid). So
       `font-style: italic` on --bst-font-secondary does NOT reach the real
       IvyPresto italic: it slants the REGULAR cut synthetically, which is why
       the deployed headline measured the same advance width italic as roman
       while the approved comp (which loaded IVYPRESTO_HEADLINE_LIGHT and
       _LIGHT_ITALIC directly) did not. Binding the two display lines to the
       theme's own light / light-italic tokens gets the comp's actual faces
       through the theme's variables, and they must stay font-style:normal or
       the browser slants an already-slanted face. */
    --om-serif-light: var(--bst-font-secondary-light, "IvyPresto Headline Light", Georgia, serif);
    --om-serif-italic: var(--bst-font-secondary-light-italic, "IvyPresto Headline Light Italic", Georgia, serif);
    --om-sans: var(--bst-font-primary, "TT Norms Pro", -apple-system, sans-serif);
    /* THE BOTTLE STAGE crop. The hero artwork is a 2048x2048 canvas whose
       bottles occupy only an inset alpha box, so object-fit:contain spends a
       third of the frame on empty canvas. These three numbers map a chosen
       crop window onto the frame instead:
         crop window x 150..1910 (w 1760), y 370..1885 (h 1515) in canvas px
         img width  = 2048 / 1760          = 116.364%
         img left   = -150 / 1760          = -8.523%
         img top    = -370 / 1515          = -24.422%   (top % is of frame H)
       WHY A UNION WINDOW AND NOT THE COMP'S EXACT ONE: the comp measured a
       single artwork (foundational-focus, alpha box 192,410 to 1867,1794) and
       hard-coded it. Measured against a second live hero (foundational-energy,
       301,429 to 1748,1843) that same window CLIPS the bottle bases by ~45px.
       Fourteen offers carry a hero and they are not one artwork. So the window
       is the union of the measured boxes plus ~2% padding for the artworks
       that could not be re-measured (their CDN URLs currently 404 - reported
       separately; that is a config/asset defect, not a theme one). Cost of the
       safety: the bottles land ~4% shorter than the comp's 347px. Tighten
       these three numbers the day every hero is re-measured. */
    --d1-crop-ratio: 1760 / 1515;
    --d1-crop-w: 116.364%;
    --d1-crop-x: -8.523%;
    --d1-crop-y: -24.422%;
    /* ---- GROUND: the page's own white, not a beige plate -------------------
       R-10 (2026-08-27). This card used to paint a flat `--om-beige` field
       inset by the section's 50px gutter, with a 2px radius. On the real PDP
       that is the ONLY inset colour field on the page, and it read to the
       operator as "a broken page and a broken asset". Measured on staging
       theme 190557258098, 1440 viewport:
         body                       #ffffff
         main-product (directly ABOVE)   #FBF8F4  full-bleed  x=0  w=1440
         THIS MODULE                     #F1E7DB  INSET       x=50 w=1340  r=2px
         icons (directly BELOW)          white
         species-spotlight               #FBF8F4  full-bleed  x=0  w=1440
       Every other tinted field on this page is full-bleed with radius 0 and no
       border; ours was the one exception. Brand beige #F1E7DB does not appear
       anywhere on the PDP above the FAQ block, so the module was also speaking
       a colour the top of this page does not use.
       The module is a SECONDARY offer sitting mid-page under the buy box, not
       a chapter of the page, so it does not take a chapter's band. It takes the
       page's ground and a hairline, and its structure is carried by the rules
       the approved Option A composition already had. Beige survives with a job:
       the receipt plate behind the money (see .d1-money). */
    background: transparent; border-radius: 0;
    border-top: 1px solid var(--om-line);
    padding: 36px 0 0; font-family: var(--om-sans); color: var(--om-ink);
    line-height: 1.55;
    /* LEFT-ANCHORED CAP (2026-09-01). The card caps at 1340 and hugs the LEFT edge
       of whatever content box it is given: `.bub` on the PDP, the bare page in the
       fixture harness and bundle-skin-preview. On the homepage it is nested inside
       `.bohs__col`, which owns the cap for that surface, so the section sets
       `--om-d1-maxw: none` and the card fills that column rather than capping twice.

       Centring was wrong on a theme that is full-bleed everywhere (the card read as
       inset from its own neighbours on any window past 1440) and so was dropping the
       cap entirely (this composition is built for ~1340 and hollows out past it, with
       the decision rail marooned at the far right). Left-anchored keeps the edge
       agreement without stretching the composition. The homepage strip's own note
       carries the measurements behind both rejected options. */
    max-width: var(--om-d1-maxw, 1340px); margin-inline: 0 auto;
  }

  /* ---- the headline, inside the card ------------------------------------
     A serif italic at a size and case the buy-box title (20px/700/uppercase)
     never uses, so it changes register instead of competing with it. The
     specificity here deliberately beats the section's .bub__heading rule: the
     class is kept on the node so any selector bound to it still matches, but
     Option A does not want its tangerine uppercase treatment. */
  .om.d1 .d1-hl.bub__heading { font-family: var(--om-serif-italic); font-style: normal;
    font-weight: 300; font-size: 2.875em; line-height: 1.04; letter-spacing: -.004em;
    text-transform: none; color: var(--om-forest); margin: 0 0 20px; }
  .om.d1 .d1-rule { height: 1px; background: var(--om-line); border: 0; margin: 0; }

  /* ---- the three zones ---------------------------------------------------
     Bottles, argument, decision. One bottom baseline, on the product grid's
     own logic. The rail is a DEFINED PANEL: it stretches to the height the
     bottles set and carries a hairline on its leading edge, so the air around
     it reads as a margin rather than as a hole. */
  /* DESKTOP composition (governs >=1100; the 750-1099 band and mobile below both
     override it). The three tracks are now FLEXIBLE instead of fixed 420/340: the
     bottle stage and the decision rail may shrink from the approved widths down to
     320/300 before the mid band takes over, and the gap scales with the viewport,
     so the layout breathes across 1100-1340+ (and at browser zoom, which grows the
     effective width) rather than cramping the argument or wrapping the Subscribe &
     Save pills. minmax(0,1fr) on the middle keeps the copy from ever overflowing.
     At the 1340 cap this resolves to the approved 420 | 1fr | 340 look. */
  .om.d1 .d1-body { display: grid;
    grid-template-columns: minmax(320px, 420px) minmax(0, 1fr) minmax(300px, 340px);
    gap: clamp(24px, 2.8vw, 48px); align-items: center; padding-top: 28px; }
  .om.d1.d1--noart .d1-body { grid-template-columns: minmax(0, 1fr) minmax(300px, 340px); }
  /* 40 of the 54 compiled offers carry no hero, so this is the COMMON case,
     not an edge one. Without the stage the argument column runs ~870px wide
     and the offer line sets at about 105 characters, well past a comfortable
     measure; the cap holds it near the width the comp gives it. */
  .om.d1.d1--noart .d1-copy { max-width: 62ch; }
  .om.d1 .d1-rail { align-self: stretch; display: flex; flex-direction: column;
    justify-content: center; border-left: 1px solid var(--om-line); padding-left: 40px; }

  /* ---- the bottle stage -------------------------------------------------- */
  .om.d1 .stage { overflow: hidden; position: relative; width: 100%; aspect-ratio: var(--d1-crop-ratio); }
  .om.d1 .stage img { position: absolute; display: block; max-width: none;
    pointer-events: none; width: var(--d1-crop-w); height: auto;
    left: var(--d1-crop-x); top: var(--d1-crop-y);
    filter: drop-shadow(0 16px 24px rgba(40, 71, 52, 0.16)); }

  /* ---- the argument ------------------------------------------------------ */
  .om.d1 .d1-title { font-family: var(--om-serif-light); font-style: normal; font-weight: 300;
    font-size: 1.875em; line-height: 1.12; margin: 0 0 10px; }
  .om.d1 .why { font-size: 1.0625em; line-height: 1.55; color: var(--om-ink); margin: 0; }
  .om.d1 .tagline { font-family: var(--om-serif-italic); font-style: normal; color: var(--om-forest);
    font-size: .95em; margin: 8px 0 0; }

  /* ---- the decision rail ------------------------------------------------- */
  .om.d1 .d1-lbl { font-weight: 700; font-size: .71875em; letter-spacing: .14em;
    text-transform: uppercase; color: var(--om-muted); margin: 0 0 8px; }
  /* The comp shows the buy box's two-up size selector. The compiled payload
     carries ONE size. It used to render as a SOLID forest chip capped at 200px,
     so a lone chip would not read as a second forest button stacked on the CTA.
     Operator direction (2026-08-28): make it FULL WIDTH and OUTLINED instead of
     solid green, so the only solid dark-green element on the card is the
     "Upgrade to the bundle" button (solid green on both was diluting the
     button's impact). An outlined chip can safely fill the rail, and it mirrors
     the One-time / Subscribe pills below (.d1-mode / .d1-mode.is-selected):
     white fill, forest edge, forest text, forest inset shadow on the selected
     one. `flex: 1 1 0` fills the rail with the single chip and splits it evenly
     the day the compiler emits a second size, so no rule has to change then. */
  .om.d1 .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
  .om.d1 .schip { flex: 1 1 0; height: 42px; line-height: 40px;
    padding: 0 6px; text-align: center; font-size: .875em; font-weight: 500;
    background: var(--om-white); color: var(--om-forest);
    border: 1px solid var(--om-forest); border-radius: var(--om-radius); }
  .om.d1 .schip.sel { box-shadow: inset 0 0 0 1px var(--om-forest); font-weight: 600; }
  /* THE RECEIPT PLATE. The one place beige survives on this surface now that
     the module sits on the page's white. It is small, it is interior, and it
     marks the money, which is the only thing on the rail a shopper compares. */
  .om.d1 .d1-money { background: var(--om-beige); border-radius: var(--om-radius);
    padding: 14px 16px; margin: 0 0 16px; }
  .om.d1 .pricerow { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px;
    margin: 0 0 5px; }
  .om.d1 .from { font-size: 1.5em; font-weight: 700; line-height: 1; }
  .om.d1 .subnote { font-size: .9375em; color: var(--om-muted); }
  /* PURCHASE-TYPE TOGGLE (sub-eligible cards only). Two white pills on the beige
     receipt plate, each a real radio label carrying its own server-rendered price
     so the sub price is correct even before the accept JS runs. The selected pill
     takes a forest edge, mirroring the size chip's forest-selected language one
     level down. It adds NO tangerine, so Add to cart above keeps the page's only
     tangerine action and .save stays the card's one tangerine mark. */
  .om.d1 .d1-buymode { display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    margin: 0 0 6px; }
  .om.d1 .d1-mode { position: relative; display: flex; flex-direction: column;
    gap: 3px; padding: 8px 10px; cursor: pointer; background: var(--om-white);
    border: 1px solid var(--om-line); border-radius: var(--om-radius); }
  .om.d1 .d1-mode input { position: absolute; opacity: 0; width: 0; height: 0;
    margin: 0; }
  .om.d1 .d1-mode.is-selected { border-color: var(--om-forest);
    box-shadow: inset 0 0 0 1px var(--om-forest); }
  .om.d1 .d1-mode__k { font-size: .75em; font-weight: 600; letter-spacing: .01em;
    color: var(--om-muted); }
  .om.d1 .d1-mode.is-selected .d1-mode__k { color: var(--om-forest); }
  .om.d1 .d1-mode__v { font-size: 1.0625em; font-weight: 700; line-height: 1;
    color: var(--om-ink); }
  .om.d1 .d1-mode:focus-within { outline: 2px solid var(--om-forest);
    outline-offset: 2px; }
  /* the card's ONE tangerine mark; Add to cart above keeps the page's only
     tangerine ACTION, so this stays a figure and never a control. */
  .om.d1 .save { font-size: .8125em; font-weight: 700; color: var(--om-tangerine);
    white-space: nowrap; margin: 0; }
  /* Same height, size, case and tracking as the measured Add to cart bar
     (47px / 13px / uppercase / 1px), forest instead of tangerine so it reads
     as the same KIND of control, one level down. */
  .om.d1 .btn { display: block; width: 100%; height: 48px; cursor: pointer;
    font-family: inherit; font-size: .8125em; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; border: 0; border-radius: var(--om-radius); }
  .om.d1 .btn.primary { background: var(--om-forest); color: var(--om-white); }
  .om.d1 .d1-seewrap { text-align: center; margin: 12px 0 0; }
  .om.d1 .d1-see { display: inline-block; font-size: .8125em; font-weight: 500;
    color: var(--om-forest); text-decoration: underline; text-underline-offset: 3px; }
  .om.d1 .btn:focus-visible, .om.d1 .d1-see:focus-visible {
    outline: 2px solid var(--om-forest); outline-offset: 2px; }

  /* ---- mid desktop -------------------------------------------------------
     The module now sits on the section's own gutter (the theme page grid), so
     the horizontal padding here is zero at every width; only the vertical
     rhythm changes. Below ~1100px a 420px stage plus a 340px rail leaves the
     argument too narrow to set two lines, so both flanks give ground before
     the layout breaks. */
  @media (min-width: 750px) and (max-width: 1099px) {
    .om.d1 { padding-top: 28px; }
    /* Three fixed flanks cannot hold a readable measure here: at 990 a 420 stage
       plus a 340 rail leaves the argument ~130px. So the bottle lifts to its own
       full-width row on top and the argument + decision rail sit beneath it as a
       comfortable 2-col that never cramps the copy or wraps the pills. The rail
       stays BESIDE the copy, so it keeps its vertical hairline unchanged. */
    .om.d1 .d1-body {
      grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
      grid-template-areas: "art art" "copy rail";
      gap: 24px 32px; align-items: start; }
    .om.d1 .art { grid-area: art; max-width: 440px; }
    .om.d1 .d1-copy { grid-area: copy; }
    .om.d1 .d1-rail { grid-area: rail; padding-left: 24px; }
    /* The no-art card (40 of 54 offers) is already a copy | rail 2-col; it just
       drops the empty bottle row and keeps the flexible rail. */
    .om.d1.d1--noart .d1-body {
      grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
      grid-template-areas: "copy rail"; }
  }

  /* ---- MOBILE (390 intent, Option A) -------------------------------------
     A DESIGNED phone layout, not a squeeze. The shipped rule kept a two-column
     96px art slot at 390px, which left the copy ~208px wide and wrapped the
     title to four lines. Here the hero takes its own full-width band and
     everything else is one stack on one left edge. */
  @media (max-width: 749px) {
    .om.d1 { padding: 24px 0 0; }
    .om.d1 .d1-hl.bub__heading { font-size: 1.875em; margin-bottom: 14px; }
    .om.d1 .d1-body { display: block; padding-top: 18px; }
    .om.d1 .art { margin-bottom: 20px; }
    .om.d1 .d1-title { font-size: 1.5em; margin-bottom: 8px; }
    .om.d1 .why { font-size: 1em; }
    /* On white with the stack broken to one column, the rail loses its vertical
       hairline and would float. It takes a horizontal one instead, the same
       move the homepage skin already makes at this breakpoint. */
    .om.d1 .d1-rail { display: block; border-left: 0; padding-left: 0;
      margin-top: 20px; border-top: 1px solid var(--om-line); padding-top: 20px; }
    .om.d1 .chips { margin-bottom: 14px; }
  }
/* END_SNIPPET:bundle-offer-skin-grounded-ritual */

/* START_SNIPPET:bundle-offer-skin-honest-math (INDEX:167) */
/* Type-scale base: the theme's html root is 62.5% (theme.liquid), so 1.6rem
     = 16px, the root the approved comps were authored against. Every inner
     font-size is em, scaling from THIS base, so the skin renders at comp-
     intended sizes on every device (2026-08-07 mobile-legibility fix). */
  .om.d3 { font-size: 1.6rem;
    --om-forest: var(--color-primary-forest, #284734);
    --om-tangerine: var(--color-primary-tangerine, #FF8F1C);
    --om-beige: var(--color-primary-beige, #F1E7DB);
    --om-ink: var(--color-text-main, #232323);
    --om-muted: var(--color-text-secondary, #808080);
    --om-line: #d8d4cb; --om-radius: 2px;
    --om-serif: var(--bst-font-secondary, "IvyPresto Headline", Georgia, serif);
    --om-sans: var(--bst-font-primary, "TT Norms Pro", -apple-system, sans-serif);
    display: block; max-width: 520px; padding: 16px 18px; background: #fff;
    border: 1px solid var(--om-ink); border-radius: var(--om-radius);
    font-family: var(--om-sans); color: var(--om-ink); font-variant-numeric: tabular-nums;
  }
  .om.d3 .kicker { font-size: .66em; letter-spacing: .14em; text-transform: uppercase; color: var(--om-tangerine); font-weight: 700; margin: 0 0 4px; }
  .om.d3 .eyebrow { font-size: .66em; letter-spacing: .14em; text-transform: uppercase; color: var(--om-forest); font-weight: 600; margin: 0 0 6px; }
  .om.d3 .d3-title { font-family: var(--om-serif); font-weight: 300; font-size: 1.1em; line-height: 1.2; margin: 0 0 6px; }
  .om.d3 .why { font-family: var(--om-serif); font-style: italic; font-size: .9em; line-height: 1.5; color: var(--om-muted); margin: 0 0 10px; }
  .om.d3 .receipt { width: 100%; border-collapse: collapse; margin: 0 0 8px; }
  .om.d3 .receipt td { padding: 6px 0; border-bottom: 1px solid var(--om-line); font-size: .9em; }
  .om.d3 .receipt td:last-child { text-align: right; }
  .om.d3 .receipt tr.strike td { color: var(--om-muted); }
  .om.d3 .receipt tr.strike td:last-child { text-decoration: line-through; }
  .om.d3 .receipt tr.total td { font-weight: 700; border-bottom: none; }
  .om.d3 .receipt tr.total td:last-child { color: var(--om-forest); }
  /* The lifted total. Reproduces the old <tr class="total"> exactly: same
     .9em, same 6px 0 padding, bold label, forest amount, no bottom rule. */
  .om.d3 .d3-price { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0; margin: 0 0 8px; font-size: .9em; font-weight: 700; }
  .om.d3 .d3-price .amt { color: var(--om-forest); }
  .om.d3 .save { background: var(--om-beige); border-radius: var(--om-radius); padding: 6px 10px; font-size: .85em; margin: 0 0 6px; }
  .om.d3 .save b { color: var(--om-tangerine); }
  .om.d3 .perserv { font-size: .82em; color: var(--om-muted); margin: 0 0 12px; }
  .om.d3 .btn.primary { display: block; width: 100%; background: var(--om-forest); color: #fff; border: 1px solid var(--om-forest); border-radius: var(--om-radius); padding: 10px 16px; font-size: .9em; cursor: pointer; }
  /* Media slot: collapses to nothing when the offer carries no hero image, so
     an unresolved image costs zero height (no reserved box, no layout shift). */
  .om.d3 .d3-media:empty { display: none; }
  .om.d3 .d3-media img { width: 64px; height: 64px; object-fit: contain; display: block; margin: 0 0 8px; }
  .om.d3 .buc__freeship { font-size: .82em; color: var(--om-forest); margin: 8px 0 0; }
  .om.d3 .ctarow { display: flex; flex-direction: column; gap: 6px; }
  .om.d3 .d3-dismiss { background: none; border: none; padding: 2px 0; cursor: pointer; font-family: var(--om-sans); font-size: 12px; color: var(--om-muted); text-decoration: underline; text-underline-offset: 2px; }
  .om.d3 .d3-error { font-size: 12.5px; color: #b3261e; margin: 6px 0 0; }

  /* ── MOBILE HIERARCHY (wi-2026-0644) ─────────────────────────────────────
     At phone width the receipt is the WRONG first thing to read: the shopper
     needs to know what this is, what it looks like, what it costs, and how to
     take it. So the card becomes a flex column and `order` re-sequences it to
     title -> thumb -> price -> CTA, demoting the receipt detail, the savings
     bar and the per-day line BELOW the CTA. Nothing is hidden or JS-gated:
     every element still renders at first paint, only the order changes.
     CTA is full-width at a 44px tap target (the reviewed mobile button rule). */
  @media (max-width: 749px) {
    .om.d3 { display: flex; flex-direction: column; }
    .om.d3 .kicker    { order: 1; }
    .om.d3 .eyebrow   { order: 2; }
    .om.d3 .d3-title  { order: 3; }
    .om.d3 .why       { order: 4; }
    .om.d3 .d3-media  { order: 5; }
    .om.d3 .d3-price  { order: 6; }
    .om.d3 .ctarow    { order: 7; margin: 0 0 12px; }
    .om.d3 .receipt   { order: 8; }
    .om.d3 .save      { order: 9; }
    .om.d3 .perserv   { order: 10; }
    .om.d3 .buc__freeship { order: 11; }
    .om.d3 .d3-error  { order: 12; }
    .om.d3 .d3-media img { width: 88px; height: 88px; }
    .om.d3 .d3-price { font-size: 1em; }
    .om.d3 .btn.primary { width: 100%; min-height: 44px; padding: 12px 16px; font-size: .95em; }
    .om.d3 .d3-dismiss { min-height: 44px; }
  }
/* END_SNIPPET:bundle-offer-skin-honest-math */

/* START_SNIPPET:bundle-offer-skin-living-stack (INDEX:168) */
/* Type-scale base: the theme's html root is 62.5% (theme.liquid), so 1.6rem
     = 16px, the root the approved comps were authored against. Every inner
     font-size is em, scaling from THIS base, so the skin renders at comp-
     intended sizes on every device (2026-08-07 mobile-legibility fix).
     STRUCTURAL dimensions (stage widths, card padding, gutters, gaps) stay in
     px because they are matched to a MEASURED composition, not to the type
     scale: the 200px left padding IS the clearance the break-out needs, and it
     must not move when a shopper changes their browser font size. */
  .om.d5 { font-size: 1.6rem;
    --om-forest: var(--color-primary-forest, #284734);
    --om-tangerine: var(--color-primary-tangerine, #FF8F1C);
    --om-beige: var(--color-primary-beige, #F1E7DB);
    --om-ink: var(--color-text-main, #232323);
    --om-muted: var(--color-text-secondary, #808080);
    --om-white: var(--color-primary-white, #ffffff);
    /* LP-local hairline: DESIGN.md's line colour has no theme token. */
    --om-line: #d8d4cb;
    --om-radius: 2px;
    --om-serif: var(--bst-font-secondary, "IvyPresto Headline", Georgia, serif);
    /* THE THEME SHIPS EACH IVYPRESTO CUT AS ITS OWN FAMILY, and every one of
       them is declared font-style:normal (snippets/font-face.liquid). So
       `font-style: italic` on --bst-font-secondary does NOT reach the real
       IvyPresto italic: it slants the REGULAR cut synthetically, which measures
       the same advance width as roman and reads visibly wrong beside the comp.
       Bind the two display lines to the theme's own light / light-italic
       tokens, and they must stay font-style:normal or the browser slants an
       already-slanted face. (The bef8c98 lesson, learned on the PDP card.) */
    --om-serif-light: var(--bst-font-secondary-light, "IvyPresto Headline Light", Georgia, serif);
    --om-serif-italic: var(--bst-font-secondary-light-italic, "IvyPresto Headline Light Italic", Georgia, serif);
    --om-sans: var(--bst-font-primary, "TT Norms Pro", -apple-system, BlinkMacSystemFont, Arial, sans-serif);
    /* THE BOTTLE STAGE crop. The hero artwork is a 2048x2048 canvas whose
       bottles occupy only an inset alpha box, so object-fit:contain spends a
       third of the frame on empty canvas. These map a chosen crop window onto
       the frame instead:
         crop window x 150..1910 (w 1760), y 370..1885 (h 1515) in canvas px
         img width  = 2048 / 1760 = 116.364%
         img left   = -150 / 1760 =  -8.523%
         img top    = -370 / 1515 = -24.422%   (top % is of frame H)
       This is the SAME union window the PDP card uses, deliberately: it is the
       union of the measured alpha boxes across the live heroes plus ~2%
       padding, because the fourteen offers that carry art are not one artwork
       and the comp's single hard-coded window clips a second hero's bases by
       ~45px. One artwork, one window, one place to tighten the day every hero
       is re-measured. A 400px stage renders 344 tall at this ratio. */
    --d5-crop-ratio: 1760 / 1515;
    --d5-crop-w: 116.364%;
    --d5-crop-x: -8.523%;
    --d5-crop-y: -24.422%;
    display: block; font-family: var(--om-sans); color: var(--om-ink);
    line-height: 1.55; text-align: left;
  }

  /* ---- the band, the card and the break-out ------------------------------
     The break-out is taken OUT OF FLOW, so the wrapper would collapse to the
     card's own height and let the bottles spill past the band's edge.
     min-height holds it open to the stage's real height plus breathing room,
     and the card centres inside it. */
  .om.d5 .stagewrap { position: relative; min-height: 344px; display: flex;
    flex-direction: column; justify-content: center; }
  .om.d5 .plate { position: relative; background: var(--om-white);
    border-radius: var(--om-radius); margin-left: 260px;
    padding: 30px 40px 30px 200px; }
  .om.d5 .breakout { position: absolute; left: 0; top: 50%;
    transform: translateY(-50%); width: 400px; z-index: 2; }
  .om.d5 .stage { position: relative; width: 100%; aspect-ratio: var(--d5-crop-ratio); }
  .om.d5 .stage .d5-img { position: absolute; display: block; max-width: none;
    pointer-events: none; width: var(--d5-crop-w); height: auto;
    left: var(--d5-crop-x); top: var(--d5-crop-y);
    filter: drop-shadow(0 16px 24px rgba(40, 71, 52, 0.16)); }

  /* NO ART is the common case (40 of 54 compiled offers). With no stage to
     clear, the card drops the break-out's indent entirely rather than render a
     large empty gutter, and the band closes up to the card's own height. */
  .om.d5[data-art="false"] .stagewrap { min-height: 0; display: block; }
  .om.d5[data-art="false"] .plate { margin-left: 0; padding: 30px 40px; }

  /* ---- the card's two zones ----------------------------------------------
     Argument left, decision behind a hairline right - the same panel logic as
     the approved PDP card. The rail is a DEFINED PANEL: it stretches to the
     height the copy sets and carries a hairline on its leading edge, so the
     air around it reads as a margin rather than as a hole. */
  .om.d5 .cbody { display: grid; grid-template-columns: minmax(0, 1fr) 320px;
    gap: 44px; align-items: center; }
  .om.d5 .rail { align-self: stretch; display: flex; flex-direction: column;
    justify-content: center; border-left: 1px solid var(--om-line);
    padding-left: 36px; }

  /* ---- the argument ------------------------------------------------------
     text-wrap:balance keeps the wrapped headline from dropping a one-word last
     line. Browsers without it fall back to a normal wrap, which is what the
     comp did before, so it degrades to no worse than today. */
  .om.d5 .hl { font-family: var(--om-serif-italic); font-style: normal;
    font-weight: 300; font-size: 2.5em; line-height: 1.06; letter-spacing: -.004em;
    text-transform: none; color: var(--om-forest); margin: 0 0 12px;
    text-wrap: balance; }
  .om.d5 .why { font-size: 1.125em; line-height: 1.5; color: var(--om-ink);
    margin: 0 0 14px; max-width: 44ch; }
  .om.d5 .namerow { display: flex; align-items: baseline; gap: 12px;
    flex-wrap: wrap; margin: 0; }
  /* The need state survives here as a LABEL on the bundle name, never as a
     floating pill with nothing to attach to. */
  .om.d5 .pill { display: inline-block; background: var(--om-forest);
    color: var(--om-white); font-size: .65625em; font-weight: 700;
    letter-spacing: .13em; text-transform: uppercase; border-radius: 999px;
    padding: 4px 11px; }
  .om.d5 .name { font-family: var(--om-serif-light); font-style: normal;
    font-weight: 300; font-size: 1.625em; line-height: 1.14; color: var(--om-ink); }

  /* ---- the decision rail ------------------------------------------------- */
  .om.d5 .lbl { font-weight: 700; font-size: .71875em; letter-spacing: .14em;
    text-transform: uppercase; color: var(--om-muted); margin: 0 0 8px; }
  .om.d5 .price { display: flex; align-items: baseline; flex-wrap: wrap;
    margin: 0 0 5px; }
  .om.d5 .tot { font-weight: 700; font-size: 1.5em; line-height: 1; color: var(--om-ink); }
  .om.d5 .dot { color: var(--om-line); padding: 0 6px; }
  .om.d5 .subp { font-size: .9375em; color: var(--om-muted); }
  /* The ONE accent on the screen (brand-lock: one accent action per screen). */
  .om.d5 .sav { display: block; font-weight: 700; font-size: .8125em;
    color: var(--om-tangerine); white-space: nowrap; margin: 0 0 16px; }
  .om.d5 .ctarow { margin: 0; }
  /* 48px tall, matching the measured homepage button bar (45px primary, 47px
     secondary), filled forest instead of tangerine so it reads one level below
     the page's own Shop All. */
  .om.d5 .cta { appearance: none; display: block; width: 100%; height: 48px;
    cursor: pointer; font-family: inherit; font-size: .8125em; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; border: 0;
    border-radius: var(--om-radius); background: var(--om-forest);
    color: var(--om-white); white-space: nowrap; }
  .om.d5 .seewrap { text-align: center; margin: 12px 0 0; }
  .om.d5 .see { display: inline-block; font-size: .8125em; font-weight: 500;
    color: var(--om-forest); text-decoration: underline; text-underline-offset: 3px; }
  .om.d5 .cta:focus-visible,
  .om.d5 .see:focus-visible { outline: 2px solid var(--om-forest); outline-offset: 2px; }

  /* ── MOBILE ───────────────────────────────────────────────────────────────
     There is no horizontal room for a left break-out at 390, so the move
     ROTATES rather than being dropped: the bottles stand up out of the card's
     TOP edge. A 230px stage is 198 tall here; the card starts 100 down and
     takes 106px of top padding, so the bottles overlap its top edge by ~98 and
     stand 100 clear of it, and the headline clears them.
     The offset is PADDING on the wrapper, not a top margin on the card: a top
     margin collapses straight through the wrapper and drags the positioned
     break-out down with it, which puts the bottles on top of the headline. */
  @media (max-width: 749px) {
    .om.d5 .stagewrap { min-height: 0; display: block; padding-top: 100px; }
    .om.d5 .breakout { left: 50%; top: 0; transform: translateX(-50%); width: 230px; }
    .om.d5 .plate { margin-left: 0; padding: 106px 20px 22px; }
    .om.d5[data-art="false"] .stagewrap { padding-top: 0; }
    .om.d5[data-art="false"] .plate { padding: 22px 20px; }
    .om.d5 .cbody { display: block; }
    .om.d5 .hl { font-size: 1.6875em; margin-bottom: 10px; }
    .om.d5 .why { font-size: 1em; margin-bottom: 14px; max-width: none; }
    .om.d5 .name { font-size: 1.3125em; }
    .om.d5 .rail { display: block; border-left: 0; padding-left: 0;
      margin-top: 16px; border-top: 1px solid var(--om-line); padding-top: 16px; }
  }
/* END_SNIPPET:bundle-offer-skin-living-stack */

/* START_SNIPPET:bundle-offer-skin-quiet-concierge (INDEX:169) */
/* Type-scale base: the theme's html root is 62.5% (theme.liquid), so 1.6rem
     = 16px, the root the approved comps were authored against. Every inner
     font-size is em, scaling from THIS base, so the skin renders at comp-
     intended sizes on every device (2026-08-07 mobile-legibility fix). */
  .om.d4 { font-size: 1.6rem;
    --om-forest: var(--color-primary-forest, #284734);
    --om-ink: var(--color-text-main, #232323);
    --om-muted: var(--color-text-secondary, #808080);
    --om-serif: var(--bst-font-secondary, "IvyPresto Headline", Georgia, serif);
    --om-sans: var(--bst-font-primary, "TT Norms Pro", -apple-system, sans-serif);
    display: flex; gap: 16px; align-items: center; max-width: 520px;
    background: transparent; padding: 14px 0; margin: 0;
    border-top: 1px solid var(--om-ink); border-bottom: 1px solid var(--om-ink);
    font-family: var(--om-sans); color: var(--om-ink);
  }
  .om.d4 .d4-img { width: 72px; height: 72px; object-fit: contain; display: block; flex: 0 0 72px; }
  .om.d4 .body { flex: 1 1 auto; min-width: 0; }
  .om.d4 .eyebrow { font-size: .66em; letter-spacing: .14em; text-transform: uppercase; color: var(--om-forest); font-weight: 600; margin: 0 0 6px; }
  .om.d4 .line { font-family: var(--om-serif); font-style: italic; font-size: 1em; line-height: 1.45; margin: 0 0 8px; }
  .om.d4 .act { display: flex; gap: 10px; align-items: baseline; }
  .om.d4 .ghosttxt { background: none; border: none; padding: 0; color: var(--om-forest); text-decoration: underline; text-underline-offset: 2px; font-size: .9em; }
  .om.d4 .pr { font-size: .8em; color: var(--om-muted); }

  /* ── MOBILE (wi-2026-0644) ───────────────────────────────────────────────
     The ghost text link becomes a real quiet button: bordered, full-width,
     44px tap height, no fill and no accent hue, so the strip keeps its voice
     while the ask stops being a 0.9em underline the thumb has to hunt for.
     The strip itself stacks so the copy is not squeezed beside the thumb. */
  @media (max-width: 749px) {
    .om.d4 { gap: 12px; align-items: flex-start; }
    .om.d4 .d4-img { width: 56px; height: 56px; flex: 0 0 56px; }
    .om.d4 .act { flex-direction: column; align-items: stretch; gap: 8px; }
    .om.d4 .ghosttxt {
      display: flex; align-items: center; justify-content: center;
      width: 100%; min-height: 44px; padding: 12px 16px;
      border: 1px solid var(--om-forest); border-radius: 2px;
      text-decoration: none; font-size: .95em;
    }
    .om.d4 .pr { text-align: center; }
  }
/* END_SNIPPET:bundle-offer-skin-quiet-concierge */

/* START_SNIPPET:bundle-offer-skin-routine-board (INDEX:170) */
/* Type-scale base: the theme's html root is 62.5% (theme.liquid), so 1.6rem
     = 16px, the root the approved comps were authored against. Every inner
     font-size is em, scaling from THIS base, so the skin renders at comp-
     intended sizes on every device (2026-08-07 mobile-legibility fix). */
  .om.d2 { font-size: 1.6rem;
    --om-forest: var(--color-primary-forest, #284734);
    --om-tangerine: var(--color-primary-tangerine, #FF8F1C);
    --om-ink: var(--color-text-main, #232323);
    --om-muted: var(--color-text-secondary, #808080);
    --om-line: #d8d4cb; --om-radius: 2px;
    --om-sans: var(--bst-font-primary, "TT Norms Pro", -apple-system, sans-serif);
    display: block; max-width: 520px; padding: 18px; background: #fff;
    border: 1px solid var(--om-line); border-radius: var(--om-radius);
    font-family: var(--om-sans); color: var(--om-ink);
  }
  .om.d2 .eyebrow { font-size: .66em; letter-spacing: .14em; text-transform: uppercase; color: var(--om-forest); font-weight: 600; margin: 0 0 10px; }
  /* The board title uses the skin's own sans (this skin declares no serif var);
     weight and colour carry the emphasis instead. */
  .om.d2 .btitle { font-size: 1.15em; font-weight: 600;
    color: var(--om-forest); margin: 0 0 10px; line-height: 1.2; }
  .om.d2 .board { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 14px; }
  .om.d2 .slot { border: 1px solid var(--om-line); border-radius: var(--om-radius); padding: 12px; text-align: center; }
  .om.d2 .slot .t { font-size: .7em; letter-spacing: .1em; text-transform: uppercase; color: var(--om-muted); margin: 0 0 6px; }
  .om.d2 .slot .n { font-size: .85em; }
  .om.d2 .slot.gap { border-style: dashed; border-color: var(--om-tangerine); background: #FFF9F1; }
  .om.d2 .slot.candidate .n { color: var(--om-ink); font-weight: 600; }
  .om.d2 .slot.candidate .btn { margin-top: 8px; }
  .om.d2 .cands { display: flex; flex-direction: column; }
  .om.d2 .cand { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-top: 1px solid var(--om-line); }
  .om.d2 .cw { font-size: .88em; }
  .om.d2 .btn { border: 1px solid var(--om-forest); background: transparent; color: var(--om-forest); border-radius: var(--om-radius); padding: 6px 12px; font-size: .82em; cursor: pointer; }
  /* The ONE primary ask reads as filled; the demoted candidates stay outline. */
  .om.d2 .btn.primary { background: var(--om-forest); color: #fff; }
  /* Slot thumb: present only when the compiled slot resolved an image, so a
     board with no imagery is the same board without an extra row of nothing. */
  .om.d2 .slot .sthumb { width: 48px; height: 48px; object-fit: contain; display: block; margin: 0 auto 6px; }
  /* The lead candidate carries the OFFER's own thumb beside the primary ask. */
  .om.d2 .cand .cthumb { width: 48px; height: 48px; object-fit: contain; display: block; flex: 0 0 48px; }

  /* ── MOBILE (wi-2026-0644) ───────────────────────────────────────────────
     Phone reading order: the board (what is covered, what is open), then ONE
     primary ask, then the demoted candidates. The candidate row stops being a
     squeezed left-text/right-button flex (which gave the button ~90px) and
     stacks, so the primary CTA gets a full-width 44px tap target and the
     demoted ones stay compact but tappable. */
  @media (max-width: 749px) {
    .om.d2 { padding: 14px; }
    .om.d2 .board { gap: 8px; }
    .om.d2 .slot { padding: 10px 8px; }
    .om.d2 .slot .sthumb { width: 40px; height: 40px; }
    .om.d2 .cand { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 0; }
    .om.d2 .cand .btn { width: 100%; min-height: 44px; padding: 12px 16px; font-size: .88em; }
    .om.d2 .slot.candidate .btn { width: 100%; min-height: 44px; padding: 10px 8px; }
  }
/* END_SNIPPET:bundle-offer-skin-routine-board */

/* START_SNIPPET:bundle-savings-callout (INDEX:172) */
.bundle-savings {
    /* Bind to the theme's existing brand tokens — never a raw hue. */
    --bs-tangerine: var(--color-primary-tangerine, #FF8F1C);
    --bs-forest: var(--color-primary-forest, #284734);
    --bs-muted: var(--color-text-secondary, #808080);
    --bs-font-body: var(--bst-font-primary, "TT Norms Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif);
    font-family: var(--bs-font-body);
    margin: 8px 0 4px;
  }
  .bundle-savings__flag {
    display: inline-block;
    font-size: 14px;
    line-height: 1.4;
    color: var(--bs-forest);
  }
  .bundle-savings__amount {
    color: var(--bs-tangerine);
    font-weight: 700;
  }
  .bundle-savings--empty .bundle-savings__hint {
    display: block;
    font-size: 12px;
    color: var(--bs-muted);
    border: 1px dashed #d8d4cb;
    border-radius: 2px;
    padding: 8px 10px;
  }
/* END_SNIPPET:bundle-savings-callout */

/* START_SNIPPET:bundle-upsell-card (INDEX:176) */
.buc {
    /* Bind to the theme's existing brand tokens - never re-declare a hue. */
    --buc-muted: var(--color-text-secondary, #808080);
    --buc-font-body: var(--bst-font-primary, "TT Norms Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif);
    display: block;
    font-family: var(--buc-font-body);
  }
  .buc[hidden] { display: none; }
  .buc__mount { margin: 12px 0; }
  /* The visible card DOM + its styles come from the cast skin snippet
     (bundle-offer-skin-*.liquid). The JS clone template above keeps the legacy
     hooks the swap/accept state machine fills. */
  .buc__dismiss {
    background: none; border: none; padding: 2px 0; cursor: pointer;
    font-family: var(--buc-font-body); font-size: 12px;
    color: var(--buc-muted);
    text-decoration: underline; text-underline-offset: 2px;
  }
  .buc__error { font-size: 12.5px; color: #b3261e; margin: 6px 0 0; }
  .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* END_SNIPPET:bundle-upsell-card */