/* THE STORE'S LOOK (owner decision 2026-10-12, direction C: "Bold landing, calm shop" with the
   landing's pictures). Every visitor gets it: public/index.html loads this file and the Roboto
   Condensed face with plain link tags, and its html tag carries data-look="bold". Every selector
   here starts with html[data-look="bold"], so that one attribute is the whole switch
   (test/look-default.test.js holds the rules below).
   - The landing (#page-gate), the age gate and the footer are the look's own poster surfaces: the
     yellow hero, the ruled paper and ink bands, the same by day and by night (as the preview the
     owner chose showed them).
   - The navigation band and the phone strip are white with ink text and a 2px ink rule by day
     (owner: the yellow background, "not on the navigation band"); by night they stay the store's
     night bars, so a night page is not lit by a white band (only their spacing tightens on the
     narrowest widths, so nothing runs past the screen's edge).
   - The shop and the product page keep their layout, rounded cards, ground and photos; codes,
     headings and prices take the condensed face, and by day the prices and links turn ink and
     the main buttons, the active filter and the selected size turn ink and banana yellow.
   - Everything else keeps the store's own look, except where a text colour sat under WCAG AA
     (4.5:1, 3:1 for large text): those fixes are listed in section 9 with their figures.
   It restyles; it never shows or hides content. It hides nothing at all: the fireflies' canvas
   and the hero's heartbeat, which the preview hid, are back. */

/* ── 1. Tokens ────────────────────────────────────────────────────────────────
   The look's own names on the root. The store's tokens are re-pointed on the poster surfaces
   only, so every rule built on them there follows; the aliases (--bg, --text, --yellow and the
   rest) are restated because each is computed where :root declares it. --yellow becomes ink and
   --fg-inverse yellow, so a yellow button there turns into an ink pill with yellow text. */
html[data-look="bold"] {
  --lb-yellow: #F5D800;
  --lb-yellow-light: #FFF27A;
  --lb-ink: #161616;
  --lb-ink-2: #3A3A36;
  --lb-paper: #F3F4F1;
  --lb-white: #FFFFFF;
  --lb-rule: 2px solid #161616;
  --lb-display: 'Roboto Condensed', 'Arial Narrow', sans-serif;
  --lb-body: 'Inter', system-ui, -apple-system, sans-serif;
  --lb-column: 1240px;
}
html[data-look="bold"] #page-gate,
html[data-look="bold"] .age-gate,
html[data-look="bold"][data-theme="day"] nav,
html[data-look="bold"][data-theme="day"] .mobile-strip {
  --bg-app: #F3F4F1;
  --bg-surface: #FFFFFF;
  --bg-surface-alt: #EAEBE5;
  --border-hairline: #767670;
  --border-soft: #4F4F49;
  --border-subtle-dark: #161616;
  --fg1: #161616;
  --fg2: #4F4F49;
  --fg3: #55554F;
  --fg-inverse: #F5D800;
  --brand: #161616;
  --brand-soft: rgba(245,216,0,0.30);
  --brand-text: #161616;
  --yellow: #161616;
  --accent: #161616;
  --price: #161616;
  --highlight: #161616;
  --highlight-soft: rgba(163,54,13,0.10);
  --highlight-text: #A3360D;
  --success: #17703D;
  --success-bg: rgba(23,112,61,0.10);
  --danger: #B42318;
  --danger-bg: rgba(180,35,24,0.10);
  --warning: #161616;
  --warning-bg: rgba(245,216,0,0.30);
  --shadow-1: none;
  --shadow-2: 6px 6px 0 #161616;
  --radius-04: 2px; --radius-06: 2px; --radius-08: 2px; --radius-10: 2px;
  --radius-12: 2px; --radius-16: 2px; --radius-20: 2px; --radius-32: 2px;
  --radius-40: 999px;
  --bg: #F3F4F1; --bg2: #FFFFFF; --bg3: #EAEBE5;
  --orange: #161616; --green: #17703D; --red: #B42318;
  --text: #161616; --muted: #4F4F49; --border: #767670;
}

/* The dark bands: the same tokens for light text on ink, scoped to each band. */
html[data-look="bold"] footer,
html[data-look="bold"] #page-gate > .gate-section:nth-child(3),
html[data-look="bold"] #page-gate > .gate-section:nth-child(6),
html[data-look="bold"] #page-gate .co-band {
  --bg-surface: #222220;
  --bg-surface-alt: #2C2C29;
  --border-hairline: #6B6B65;
  --border-soft: #8A8A83;
  --fg1: #F3F4F1;
  --fg2: #C8C8C0;
  --fg3: #B5B5AD;
  --fg-inverse: #161616;
  --brand: #F5D800;
  --brand-soft: rgba(245,216,0,0.14);
  --brand-text: #F5D800;
  --yellow: #F5D800;
  --accent: #F5D800;
  --price: #F5D800;
  --highlight: #F2A27E;
  --highlight-soft: rgba(242,162,126,0.12);
  --highlight-text: #F2A27E;
  --success: #7BC47F;
  --success-bg: rgba(123,196,127,0.14);
  --danger: #F08080;
  --danger-bg: rgba(240,128,128,0.14);
  --bg: #161616; --bg2: #222220; --bg3: #2C2C29;
  --orange: #F5D800; --green: #7BC47F; --red: #F08080;
  --text: #F3F4F1; --muted: #C8C8C0; --border: #6B6B65;
  color: #F3F4F1;
}

/* ── 2. Base type and focus ───────────────────────────────────────────────────
   The landing's paper ground runs to the footer: the page behind it takes the paper while the
   landing is the page in view (the shop and the other pages keep the store's ground). */
html[data-look="bold"] #page-gate {
  background: var(--lb-paper);
  color: var(--lb-ink);
  line-height: 1.6;
}
html[data-look="bold"] body:has(#page-gate.active) {
  background: var(--lb-paper);
}
/* A focus ring in the text colour, 3px, on every page: the store's 2px yellow ring measured 1.6:1
   on the day theme's white. */
html[data-look="bold"] a:focus-visible,
html[data-look="bold"] button:focus-visible,
html[data-look="bold"] input:focus-visible,
html[data-look="bold"] select:focus-visible,
html[data-look="bold"] summary:focus-visible,
html[data-look="bold"] [tabindex]:focus-visible {
  outline: 3px solid var(--fg1);
  outline-offset: 2px;
}

/* Headlines in the condensed face. */
html[data-look="bold"] #page-gate .hero-title,
html[data-look="bold"] .age-gate h2,
html[data-look="bold"] #page-gate .ln-home-title,
html[data-look="bold"] #page-gate .gate-section h2 {
  font-family: var(--lb-display) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  line-height: 0.95 !important;
}
html[data-look="bold"] #page-gate .ln-home-title,
html[data-look="bold"] #page-gate .gate-section h2 {
  font-size: clamp(36px, 5vw, 64px) !important;
  color: var(--fg1);
}

/* Small uppercase labels: Inter 600, wide tracking. */
html[data-look="bold"] #page-gate .gate-eyebrow,
html[data-look="bold"] #page-gate .ln-home-kicker,
html[data-look="bold"] #page-gate .hero-badge,
html[data-look="bold"] .age-gate-sub,
html[data-look="bold"] .footer-col h4 {
  font-family: var(--lb-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
html[data-look="bold"] #page-gate .gate-eyebrow,
html[data-look="bold"] #page-gate .ln-home-kicker,
html[data-look="bold"] .age-gate-sub {
  color: var(--fg2);
}

/* Links set in the old yellow are ink now, so they carry an underline to stand apart. */
html[data-look="bold"] #page-gate a[style*="color:var(--yellow)"] {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── 3. Buttons on the poster surfaces: one primary, one secondary ────────────
   Primary: an ink pill with yellow text. Secondary: transparent with a 2px ink border.
   The scale on hover is dropped on the landing; the age gate's own buttons keep theirs, so this
   file sets no transform on the gate at all. */
html[data-look="bold"] #page-gate .hero-cta,
html[data-look="bold"] .age-gate-confirm {
  background: var(--yellow);
  color: var(--fg-inverse);
  border: 2px solid var(--yellow);
  border-radius: 999px;
  min-height: 44px;
  font-family: var(--lb-body);
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: none;
}
html[data-look="bold"] #page-gate .hero-cta:hover,
html[data-look="bold"] .age-gate-confirm:hover:not(:disabled) {
  background: var(--lb-ink-2);
  border-color: var(--lb-ink-2);
}
html[data-look="bold"] #page-gate .hero-cta:hover {
  transform: none;
}
html[data-look="bold"] .age-gate-confirm:disabled {
  background: var(--yellow);
  border-color: var(--yellow);
}
html[data-look="bold"] #page-gate .ln-home-jump,
html[data-look="bold"] .age-gate-exit {
  background: transparent;
  color: var(--fg1);
  border: 2px solid var(--fg1);
  border-radius: 999px;
  min-height: 44px;
  font-family: var(--lb-body);
  font-weight: 600;
}
html[data-look="bold"] #page-gate .ln-home-jump:hover,
html[data-look="bold"] .age-gate-exit:hover {
  background: var(--brand-soft);
  color: var(--fg1);
  border-color: var(--fg1);
}
html[data-look="bold"] .age-gate-exit:hover {
  color: var(--danger);
  border-color: var(--danger);
}

/* ── 4. The navigation band and the phone strip ───────────────────────────────
   By day: white with ink text under a 2px ink rule (owner, 2026-10-11: the yellow background,
   "not on the navigation band"). By night: the store's own night bars, untouched. */
html[data-look="bold"][data-theme="day"] nav {
  background: var(--lb-white);
  border-bottom: var(--lb-rule);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-look="bold"][data-theme="day"] .nav-links a {
  color: var(--lb-ink);
  font-weight: 600;
  letter-spacing: 0.08em;
  border-radius: 999px;
}
html[data-look="bold"][data-theme="day"] .nav-links a:hover {
  color: var(--lb-yellow);
  background: var(--lb-ink);
}
/* The wordmark is a light outline that fades on a light ground: the store's day outline, without
   its soft lift. The age gate's yellow ground needs it by night too. */
html[data-look="bold"][data-theme="day"] .nav-logo img,
html[data-look="bold"] .age-gate-logo {
  filter:
    drop-shadow(1px 0 0 rgba(17,19,24,0.92))
    drop-shadow(-1px 0 0 rgba(17,19,24,0.92))
    drop-shadow(0 1px 0 rgba(17,19,24,0.92))
    drop-shadow(0 -1px 0 rgba(17,19,24,0.92));
}
html[data-look="bold"][data-theme="day"] .cart-btn {
  background: var(--yellow);
  color: var(--fg-inverse);
  border: 2px solid var(--yellow);
  border-radius: 999px;
  min-height: 44px;
  font-family: var(--lb-body);
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: none;
}
html[data-look="bold"][data-theme="day"] .cart-btn:hover {
  background: var(--lb-ink-2);
  border-color: var(--lb-ink-2);
  transform: none;
}
html[data-look="bold"][data-theme="day"] .cart-count {
  font-weight: 700;
}
/* The nav's sign-in button carries its look inline; these win over it by day only. Its display
   stays with the page's script. */
html[data-look="bold"][data-theme="day"] #navSignIn {
  background: var(--lb-ink) !important;
  color: var(--lb-yellow) !important;
  border: 2px solid var(--lb-ink) !important;
  border-radius: 999px !important;
  min-height: 44px;
  padding: 0 20px !important;
  font-family: var(--lb-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em;
}
html[data-look="bold"][data-theme="day"] #navSignIn:hover {
  background: var(--lb-ink-2) !important;
}
html[data-look="bold"][data-theme="day"] .nav-dropdown-btn {
  background: transparent;
  color: var(--fg1);
  border: 2px solid var(--fg1);
  border-radius: 999px;
  min-height: 44px;
  font-family: var(--lb-body);
  font-weight: 600;
}
html[data-look="bold"][data-theme="day"] .nav-dropdown-btn:hover {
  background: var(--brand-soft);
  color: var(--fg1);
  border-color: var(--fg1);
}
html[data-look="bold"][data-theme="day"] .nav-dropdown-menu {
  border: var(--lb-rule);
}
/* Between a phone and a wide screen the five links share the bar with two buttons: the buttons
   keep their label on one line and the links tighten. By night too: the store's own night bar
   ran its cart button 11px to 116px past the screen's edge between 641px and 700px. */
@media (min-width: 641px) and (max-width: 1100px) {
  html[data-look="bold"] .nav-links a {
    padding: 8px 10px;
    letter-spacing: 0.04em;
  }
  html[data-look="bold"][data-theme="day"] #navSignIn {
    padding: 0 14px !important;
  }
  html[data-look="bold"] #navSignIn {
    white-space: nowrap;
  }
  html[data-look="bold"] .cart-btn {
    padding: 0 14px;
    white-space: nowrap;
  }
}
/* Just above the phone layout the bar is tightest: the links shrink a step more, so the cart
   button ends inside the screen. */
@media (min-width: 641px) and (max-width: 820px) {
  html[data-look="bold"] .nav-links {
    gap: 0;
  }
  html[data-look="bold"] .nav-links a {
    padding: 8px 6px;
    font-size: 12px;
  }
  html[data-look="bold"] .cart-btn {
    padding: 0 12px;
  }
  /* By day, signed in, the account button joins the bar: the links and the cart lose their
     tracking and the account button narrows, so the cart ends inside the screen (it ran 1px to
     17px past it between 641px and 657px). */
  html[data-look="bold"][data-theme="day"] .nav-links a {
    letter-spacing: 0;
  }
  html[data-look="bold"][data-theme="day"] .nav-dropdown-btn {
    padding-left: 10px;
    padding-right: 10px;
  }
  html[data-look="bold"][data-theme="day"] .cart-btn {
    letter-spacing: 0;
  }
}
/* The narrowest phones: the strip's six labels (signed in) a step smaller, so the last one, SIGN
   OUT, ends inside the screen (it ran 32px past it at 320px, by day and by night). */
@media (max-width: 340px) {
  html[data-look="bold"] .mobile-strip button,
  html[data-look="bold"] .mobile-strip a {
    font-size: 11px;
    letter-spacing: 0;
    padding-left: 2px;
    padding-right: 2px;
  }
}
@media (max-width: 640px) {
  html[data-look="bold"][data-theme="day"] .cart-btn {
    height: 44px;
  }
  html[data-look="bold"][data-theme="day"] .mobile-strip {
    background: var(--lb-white);
    border-bottom: var(--lb-rule);
  }
  /* One fixed height (50px, two lines of label where a label wraps), so the shop's filter bar
     sticks flush under the strip: 56px of nav, 50px of strip and its 2px rule. */
  html[data-look="bold"][data-theme="day"] .mobile-strip button,
  html[data-look="bold"][data-theme="day"] .mobile-strip a {
    min-height: 50px;
    color: var(--lb-ink);
    font-weight: 600;
  }
  html[data-look="bold"][data-theme="day"] .filters {
    top: 108px;
  }
  html[data-look="bold"][data-theme="day"] .mobile-strip button:hover,
  html[data-look="bold"][data-theme="day"] .mobile-strip a:hover,
  html[data-look="bold"][data-theme="day"] .mobile-strip button.active {
    color: var(--lb-yellow);
    background: var(--lb-ink);
  }
}

/* ── 5. The hero, a yellow band, and its heartbeat ────────────────────────────
   THE HEARTBEAT ON THE YELLOW (owner, 2026-10-11: "change the heartbeat to the banana yellow
   theme and apply it to the whole background behind the top picture"; the preview hid it, the
   switch-on brings it back). The hero is solid banana yellow; its ::before is a wash of a lighter
   yellow over the whole box, pulsed by the store's own keyframes (heroHeartbeat by day, the calm
   heroBreath by night, from public/index.html), so the yellow's lightness beats. It sits behind
   the hero's content: the hero isolates its stacking and the wash takes z-index -1, so it paints
   over the hero's yellow and under its text, its buttons and the top picture, none of which it
   tints or covers. Ink on the wash reads 15.7:1 at its lightest and 12.7:1 on the plain yellow.
   Under reduced motion it holds still at the beat's resting strength. */
html[data-look="bold"] #page-gate .hero {
  background: var(--lb-yellow);
  border-bottom: var(--lb-rule);
  isolation: isolate;
}
html[data-look="bold"] #page-gate .hero::before {
  z-index: -1;
  background: var(--lb-yellow-light);
}
@media (prefers-reduced-motion: reduce) {
  html[data-look="bold"] #page-gate .hero::before {
    opacity: 0.4;
  }
}
html[data-look="bold"] #page-gate .hero-title {
  color: var(--lb-ink);
}
html[data-look="bold"] #page-gate .hero p {
  color: var(--lb-ink);
}
html[data-look="bold"] #page-gate .hero-badge {
  background: transparent;
  color: var(--lb-ink);
  border: var(--lb-rule);
  border-radius: 0;
  height: auto;
  min-height: 32px;
  padding: 5px 12px;
}
html[data-look="bold"] #page-gate .hero-chip {
  background: transparent;
  color: var(--fg1);
  border: 2px solid var(--fg1);
  border-radius: 0;
  height: auto;
  min-height: 32px;
  padding: 5px 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
html[data-look="bold"] #page-gate .hero-logo-band {
  border: var(--lb-rule);
  border-radius: 0;
  box-shadow: 8px 8px 0 var(--lb-ink);
}

/* The home page's hero: the headline beside the product photo on a wide screen, the photo under
   the buttons on a narrow one. The photo is the existing hero loop and its poster, in an ink
   frame with an offset shadow, in its own full colour (owner decision 2026-10-11: no duotone,
   tint, filter or blend on it; test/look-default.test.js holds that). */
html[data-look="bold"] #page-gate .hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  text-align: left !important;
  padding: 36px 16px 48px;
}
html[data-look="bold"] #page-gate .hero > .hero-badge {
  grid-row: 1;
  margin: 0 !important;
}
html[data-look="bold"] #page-gate .hero > .hero-title {
  grid-row: 2;
  font-size: clamp(56px, 8vw, 112px) !important;
  max-width: none !important;
  margin: 18px 0 0 !important;
}
html[data-look="bold"] #page-gate .hero-title span {
  display: inline-block;
  margin-top: 0.06em;
  padding: 0 0.08em 0.04em;
  line-height: 1;
  background: var(--lb-ink);
  color: var(--lb-yellow) !important;
}
html[data-look="bold"] #page-gate .hero > p {
  grid-row: 3;
  margin: 20px 0 0 !important;
  max-width: 36ch !important;
  font-size: clamp(18px, 1.7vw, 22px) !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}
html[data-look="bold"] #page-gate .hero > div:last-child {
  grid-row: 4;
  justify-content: flex-start !important;
  margin-top: 28px !important;
}
html[data-look="bold"] #page-gate .hero > .hero-loop-band {
  grid-row: 5;
  width: 100%;
  max-width: 100%;
  margin: 36px 0 0;
  aspect-ratio: 4 / 3;
}
html[data-look="bold"] #page-gate .hero-loop-band .hero-loop {
  object-position: 72% 50%;
}
@media (min-width: 600px) {
  html[data-look="bold"] #page-gate .hero {
    padding: 48px 32px 56px;
  }
  html[data-look="bold"] #page-gate .hero > .hero-loop-band {
    aspect-ratio: 16 / 9;
  }
}
@media (min-width: 900px) {
  html[data-look="bold"] #page-gate .hero {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    grid-template-rows: 1fr auto auto auto auto 1fr;
    column-gap: clamp(32px, 4vw, 64px);
    align-items: start;
    padding: clamp(48px, 6vw, 88px) max(32px, calc((100% - var(--lb-column)) / 2 + 32px));
  }
  html[data-look="bold"] #page-gate .hero > .hero-badge { grid-column: 1; grid-row: 2; }
  html[data-look="bold"] #page-gate .hero > .hero-title { grid-column: 1; grid-row: 3; }
  html[data-look="bold"] #page-gate .hero > p { grid-column: 1; grid-row: 4; }
  html[data-look="bold"] #page-gate .hero > div:last-child { grid-column: 1; grid-row: 5; }
  html[data-look="bold"] #page-gate .hero > .hero-loop-band {
    grid-column: 2;
    grid-row: 1 / 7;
    align-self: center;
    margin: 0;
    aspect-ratio: 1 / 1;
    box-shadow: 10px 10px 0 var(--lb-ink);
  }
}

/* ── 6. The home page's ruled grid ────────────────────────────────────────────
   Each section is a cell of one column framed by 2px ink rules; paper reading bands, ink
   emphasis bands (sections 3 and 6, the Colorado band), and yellow key bands (sections 5 and
   10). The child positions are pinned by test/look-default.test.js. */
html[data-look="bold"] #page-gate .gate-section {
  max-width: var(--lb-column);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 88px) clamp(16px, 4vw, 56px);
  background: var(--lb-paper);
  border: var(--lb-rule);
  border-top: 0;
}
html[data-look="bold"] #page-gate > .gate-section:nth-child(3),
html[data-look="bold"] #page-gate > .gate-section:nth-child(6) {
  background: var(--lb-ink);
}
html[data-look="bold"] #page-gate > .gate-section:nth-child(5),
html[data-look="bold"] #page-gate > .gate-section:nth-child(10) {
  background: var(--lb-yellow);
}
html[data-look="bold"] #page-gate > .gate-section:nth-child(8) {
  padding: 0;
}
/* Left-aligned reading, except the Colorado band and the join card, which stay centred. */
html[data-look="bold"] #page-gate > .gate-section:not(:nth-child(8)):not(:nth-child(10)),
html[data-look="bold"] #page-gate > .gate-section:not(:nth-child(8)):not(:nth-child(10)) [style*="text-align:center"],
html[data-look="bold"] #page-gate .ln-home-head {
  text-align: left !important;
}
html[data-look="bold"] #page-gate > .gate-section:not(:nth-child(8)):not(:nth-child(10)) p[style*="auto"],
html[data-look="bold"] #page-gate .ln-home-lede {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
html[data-look="bold"] #page-gate .gate-section .hero-trust {
  justify-content: flex-start !important;
}
html[data-look="bold"] #page-gate .gate-section h2 {
  margin-top: 12px !important;
  max-width: 19ch;
}
html[data-look="bold"] #page-gate .gate-section p {
  font-size: 17px !important;
  line-height: 1.6 !important;
}
html[data-look="bold"] #page-gate > .gate-section:nth-child(4) p + p {
  font-size: 14px !important;
}
html[data-look="bold"] #page-gate .gate-eyebrow {
  color: var(--fg2);
}
html[data-look="bold"] #page-gate .co-band .gate-eyebrow {
  color: var(--lb-yellow);
}
/* Headings on the ink bands are yellow. */
html[data-look="bold"] #page-gate > .gate-section:nth-child(3) h2,
html[data-look="bold"] #page-gate > .gate-section:nth-child(6) h2,
html[data-look="bold"] #page-gate > .gate-section:nth-child(6) [style*="font-size:clamp(20px"] {
  color: var(--lb-yellow) !important;
}
/* Section 3: the value paragraph and its chips, light on ink. */
html[data-look="bold"] #page-gate > .gate-section:nth-child(3) p {
  color: var(--fg1) !important;
  font-size: clamp(18px, 1.8vw, 22px) !important;
  font-weight: 500;
  max-width: 62ch !important;
}
html[data-look="bold"] #page-gate > .gate-section:nth-child(3) .hero-chip {
  color: var(--lb-yellow);
  border-color: var(--lb-yellow);
}
/* Section 6: the promise, in the condensed face, on ink. */
html[data-look="bold"] #page-gate > .gate-section:nth-child(6) > div {
  background: transparent !important;
  border: 0 !important;
  border-left: 4px solid var(--lb-yellow) !important;
  border-radius: 0 !important;
  padding: 4px 0 4px clamp(16px, 3vw, 32px) !important;
  text-align: left !important;
}
html[data-look="bold"] #page-gate > .gate-section:nth-child(6) [style*="font-size:clamp(20px"] {
  font-family: var(--lb-display);
  font-weight: 700 !important;
  font-size: clamp(36px, 5vw, 64px) !important;
  line-height: 0.95 !important;
  letter-spacing: -0.02em;
}
/* Research cards. */
html[data-look="bold"] #page-gate .ln-home-head {
  margin-bottom: 32px;
}
html[data-look="bold"] #page-gate .ln-home-grid {
  gap: 16px;
}
@media (min-width: 1024px) {
  html[data-look="bold"] #page-gate .ln-home-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
html[data-look="bold"] #page-gate .ln-home-card {
  background: var(--lb-white);
  border: var(--lb-rule);
  border-radius: 0;
  padding: 20px;
}
html[data-look="bold"] #page-gate .ln-home-card:hover {
  transform: none;
  border-color: var(--lb-ink);
  box-shadow: 6px 6px 0 var(--lb-ink);
}
html[data-look="bold"] #page-gate .ln-home-card-title {
  font-family: var(--lb-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin-top: 10px;
}
html[data-look="bold"] #page-gate .ln-home-card-text {
  font-size: 14px;
  line-height: 1.55;
  margin-top: 10px;
}
html[data-look="bold"] #page-gate .ln-home-foot {
  text-align: left;
  margin-top: 24px;
}
html[data-look="bold"] #page-gate .ln-home-all {
  color: var(--lb-ink);
  padding: 0;
}
/* Section 5: the pillars as white cards on yellow. */
html[data-look="bold"] #page-gate .trust-strip {
  padding: 0;
  margin-top: 32px;
  border-bottom: 0;
  gap: 16px;
}
html[data-look="bold"] #page-gate .trust-pillar {
  background: var(--lb-white);
  border: var(--lb-rule);
  border-radius: 0;
  padding: 24px;
}
html[data-look="bold"] #page-gate .trust-pillar strong {
  font-family: var(--lb-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.05;
  margin-bottom: 10px;
}
html[data-look="bold"] #page-gate .trust-pillar span {
  font-size: 14px;
  line-height: 1.6;
}
html[data-look="bold"] #page-gate > .gate-section:nth-child(5) p {
  color: var(--lb-ink) !important;
}
/* The Colorado band fills its cell. */
html[data-look="bold"] #page-gate .co-band {
  border: 0;
  border-radius: 0;
  padding: clamp(48px, 7vw, 96px) clamp(16px, 4vw, 56px);
}
html[data-look="bold"] #page-gate .gate-section .co-band h2 {
  font-size: clamp(32px, 4.4vw, 56px) !important;
  max-width: none;
}
/* FAQ. */
html[data-look="bold"] #page-gate details.faq-item {
  background: var(--lb-white);
  border: var(--lb-rule);
  border-radius: 0;
  margin-bottom: 12px;
}
html[data-look="bold"] #page-gate details.faq-item summary {
  font-size: 17px;
  font-weight: 600;
  min-height: 56px;
}
html[data-look="bold"] #page-gate details.faq-item summary::after {
  color: var(--lb-ink);
  font-weight: 700;
}
html[data-look="bold"] #page-gate details.faq-item .faq-answer {
  font-size: 15px;
  line-height: 1.65;
}
/* Section 10: the join card, white with an ink frame, on yellow. */
html[data-look="bold"] #page-gate #joinCard {
  background: var(--lb-white) !important;
  border: var(--lb-rule) !important;
  border-radius: 0 !important;
  box-shadow: 10px 10px 0 var(--lb-ink) !important;
}
html[data-look="bold"] #page-gate #joinCard h2 {
  font-size: clamp(30px, 3.4vw, 44px) !important;
  max-width: none;
}
html[data-look="bold"] #page-gate #joinCard p {
  font-size: 15px !important;
}
/* The research-use-only line closes the column, with its 64px gap below. The footage cell under
   it (2026-10-12) is a cell of its own, framed on all four sides (the fix round, 2026-10-13: the
   line stands alone and the footage reads as a separate cell, not one framed unit with it). */
html[data-look="bold"] #page-gate > p.footer-disclaimer {
  max-width: var(--lb-column) !important;
  margin: 0 auto 64px !important;
  padding: 28px clamp(16px, 4vw, 56px);
  background: var(--lb-paper);
  border: var(--lb-rule) !important;
  border-top: 0 !important;
  text-align: left !important;
  color: var(--fg2);
  font-size: 13px;
}

/* ── 7. The landing's pictures (direction C) ──────────────────────────────────
   Two cells take a picture beside their text: a drawn chromatogram beside "Verify what has been
   tested", captioned "Illustration, not a test result", and the Colorado photograph beside the
   Colorado band, a silent loop since 2026-10-12. Both are decorative (aria-hidden, empty alt or
   no text at all); the hero keeps its one vial loop. The footage cell (2026-10-12) closes the
   landing: a supplier's vial washing machine, clear empty vials on its star wheel, its caption and
   a smaller disclaimer under it. */
/* The certificates cell: the trace in a ruled white panel. On a phone it sits between the text
   and the button. */
html[data-look="bold"] #page-gate > .gate-section:nth-child(7) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "text" "pic" "cta";
}
html[data-look="bold"] #page-gate > .gate-section:nth-child(7) > div:nth-child(1) {
  grid-area: text;
}
html[data-look="bold"] #page-gate > .gate-section:nth-child(7) > div:nth-child(2) {
  grid-area: cta;
}
html[data-look="bold"] #page-gate > .gate-section:nth-child(7) > .lb-science {
  grid-area: pic;
  margin: 28px 10px 36px 0;
  background: var(--lb-white);
  border: var(--lb-rule);
  box-shadow: 10px 10px 0 var(--lb-ink);
}
html[data-look="bold"] #page-gate .lb-science img {
  display: block;
  width: 100%;
  height: auto;
}
/* The caption says what the picture is: a drawing, not a result. */
html[data-look="bold"] #page-gate .lb-science-caption {
  padding: 8px 14px;
  border-top: var(--lb-rule);
  color: var(--fg2);
  font-family: var(--lb-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}
@media (min-width: 900px) {
  html[data-look="bold"] #page-gate > .gate-section:nth-child(7) {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-areas: "text pic" "cta pic";
    grid-template-rows: auto 1fr;
    column-gap: clamp(32px, 4.5vw, 72px);
    align-items: start;
  }
  html[data-look="bold"] #page-gate > .gate-section:nth-child(7) > .lb-science {
    align-self: center;
    margin: 0 10px 10px 0;
  }
}
/* The Colorado cell: the photograph large beside the existing band (its loop poster under the
   measured overlay, its text unchanged). Stacked on a phone, photograph first. Its ground is the
   photograph's average colour, shown until its poster arrives (2026-10-13). */
html[data-look="bold"] #page-gate > .gate-section:nth-child(8) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
html[data-look="bold"] #page-gate .lb-co-photo {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-bottom: var(--lb-rule);
  background: #5b5e5e;
}
html[data-look="bold"] #page-gate .lb-co-photo video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 45% 40%;
}
@media (min-width: 900px) {
  html[data-look="bold"] #page-gate > .gate-section:nth-child(8) {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    min-height: 640px;
  }
  html[data-look="bold"] #page-gate .lb-co-photo {
    aspect-ratio: auto;
    border-bottom: 0;
    border-right: var(--lb-rule);
  }
  html[data-look="bold"] #page-gate .co-band {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  html[data-look="bold"] #page-gate .gate-section .co-band h2 {
    font-size: clamp(32px, 3.2vw, 44px) !important;
  }
}
/* The footage cell (owner, 2026-10-11: "Use the videos"; its place in
   vault/Decisions/store-landing-loops-fireflies-2026-10-12.md): a cell of its own, ruled on all
   four sides, the loop full width at its own 1920 by 1070 shape on the washer poster's average
   colour until the poster arrives, then its caption on paper under a rule, and the owner's
   disclaimer under that in smaller type (2026-10-13). No text sits on the picture. */
html[data-look="bold"] #page-gate > .lb-footage {
  max-width: var(--lb-column);
  margin: 0 auto 64px;
  padding: 0;
  background: var(--lb-paper);
  border: var(--lb-rule);
}
html[data-look="bold"] #page-gate .lb-footage-media {
  position: relative;
  aspect-ratio: 1920 / 1070;
  overflow: hidden;
  background: #3e4c51;
}
html[data-look="bold"] #page-gate .lb-footage-loop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
html[data-look="bold"] #page-gate .lb-footage-caption {
  margin: 0;
  padding: 10px clamp(16px, 4vw, 56px);
  border-top: var(--lb-rule);
  color: var(--fg2);
  font-family: var(--lb-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}
html[data-look="bold"] #page-gate .lb-footage-note {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}

/* ── 8. The shop and the product page ─────────────────────────────────────────
   Today's layout, surfaces, radii and imagery. The condensed face for codes, headings and prices
   in both themes; by day, ink and banana yellow where the day theme used its clinical blue and its
   amber. By night the store's own night colours stay. */
html[data-look="bold"] .product-name {
  font-family: var(--lb-display);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
}
html[data-look="bold"] .product-price {
  font-family: var(--lb-display);
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
}
html[data-look="bold"] .product-price.tbd {
  font-family: var(--lb-body);
  font-size: 14px;
}
html[data-look="bold"] .product-category {
  letter-spacing: 0.1em;
}
html[data-look="bold"] .pd-title {
  font-family: var(--lb-display);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.02em;
}
html[data-look="bold"] .pd-price {
  font-family: var(--lb-display);
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
}
html[data-look="bold"] .pd-related-title,
html[data-look="bold"] .newsletter-section h2,
html[data-look="bold"] .sr-title {
  font-family: var(--lb-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
}
html[data-look="bold"] .pd-related-title {
  font-size: 36px;
}
html[data-look="bold"] .newsletter-section h2 {
  font-size: 40px;
}
html[data-look="bold"] .sr-title {
  font-size: 22px;
}
html[data-look="bold"] .sr-v {
  font-family: var(--lb-display);
  font-size: 20px;
  line-height: 1.1;
}
/* On a phone the three result tiles are about 80px wide: their values keep today's face and size
   there, so a word like "Confirmed" never breaks. */
@media (max-width: 480px) {
  html[data-look="bold"] .sr-v {
    font-family: var(--lb-body);
    font-size: 14px;
    line-height: 1.5;
  }
}
/* The structure drawing behind each vial is inert (opacity 0 since 2026-10-11: nothing reveals it
   any more), but its box, 110% of the photo and turned 8 degrees, reached 5px to 12px past the
   screen on the one-column grid between 540px and 600px wide. Its box now matches the photo's; it
   stays at the store's opacity 0. */
html[data-look="bold"] .product-img img.mol {
  inset: 0;
  width: 100%;
  height: 100%;
  transform: none;
}
/* By day: ink and banana yellow. */
html[data-look="bold"][data-theme="day"] #page-shop,
html[data-look="bold"][data-theme="day"] #page-product {
  --price: #161616;
  --accent: #161616;
  --brand-text: #161616;
  --highlight-text: #3A3A36;
  --yellow: #F5D800;
  --brand: #F5D800;
  --brand-soft: rgba(245,216,0,0.22);
}
html[data-look="bold"][data-theme="day"] .product-price,
html[data-look="bold"][data-theme="day"] .pd-title {
  color: #161616;
}
html[data-look="bold"][data-theme="day"] #page-shop .add-to-cart-btn,
html[data-look="bold"][data-theme="day"] #page-product .add-to-cart-btn,
html[data-look="bold"][data-theme="day"] .newsletter-form button {
  background: #161616;
  color: #F5D800;
}
html[data-look="bold"][data-theme="day"] #page-shop .add-to-cart-btn:hover,
html[data-look="bold"][data-theme="day"] #page-product .add-to-cart-btn:hover,
html[data-look="bold"][data-theme="day"] .newsletter-form button:hover {
  background: #3A3A36;
}
html[data-look="bold"][data-theme="day"] #page-shop .add-to-cart-btn:disabled,
html[data-look="bold"][data-theme="day"] #page-product .add-to-cart-btn:disabled {
  background: var(--bg-surface-alt);
  color: var(--fg2);
}
html[data-look="bold"][data-theme="day"] #page-shop .add-to-cart-btn.notify-btn,
html[data-look="bold"][data-theme="day"] #page-product .add-to-cart-btn.notify-btn {
  background: transparent;
  border: 2px solid #161616;
  color: #161616;
}
html[data-look="bold"][data-theme="day"] .filter-btn.active {
  background: #161616;
  border-color: #161616;
  color: #F5D800;
}
html[data-look="bold"][data-theme="day"] .filter-btn:hover:not(.active) {
  border-color: #161616;
  color: #161616;
}
html[data-look="bold"][data-theme="day"] .qty-btn:hover {
  background: #161616;
  color: #F5D800;
}
html[data-look="bold"][data-theme="day"] .pd-wait-btn {
  border: 2px solid #161616;
  color: #161616;
}
html[data-look="bold"][data-theme="day"] .pd-size:hover,
html[data-look="bold"][data-theme="day"] .pd-qty-btn:hover {
  border-color: #161616;
}
html[data-look="bold"][data-theme="day"] .pd-size[aria-pressed="true"] {
  background: #F5D800;
  border-color: #161616;
  box-shadow: inset 0 0 0 1px #161616;
}
html[data-look="bold"][data-theme="day"] .pd-size[aria-pressed="true"] .pd-size-sub {
  color: #161616;
}
/* An out-of-stock size is drawn at .55 opacity; ink on yellow would not read through it, so a
   selected one keeps the white tile and is marked by the ink edge alone. */
html[data-look="bold"][data-theme="day"] .pd-size.oos[aria-pressed="true"] {
  background: #FFFFFF;
}
/* Inline yellow links the day theme turns blue are ink here, so they carry an underline. */
html[data-look="bold"][data-theme="day"] #page-shop [style*="color:var(--yellow)"],
html[data-look="bold"][data-theme="day"] #page-product [style*="color:var(--yellow)"] {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── 9. Text colours lifted to WCAG AA ────────────────────────────────────────
   Every text run on every page was measured, by day and by night, at 1440 and 375 (the round's
   report, 2026-10-12). These are the ones the store's own look left under the floor; the figure
   before each fix is the store's own, the one after it this file's. Colours only: nothing here
   moves, sizes, shows or hides anything. */

/* The day green, #1f8f4e: 3.54:1 on its own tint (the in-stock tags, the blind-tested badge),
   3.8:1 on the certificate button and the result tiles ("Confirmed"), 4.12:1 bare on white (the
   purity line, "vetted", FREE). The look's darker green reads 5.3:1 or better on all of them. */
html[data-look="bold"][data-theme="day"] {
  --success: #17703D;
  --success-bg: rgba(23,112,61,0.10);
  --green: #17703D;
  /* The day red, #d64545, reads 4.38:1 on white (the phone strip's SIGN OUT, the error toasts,
     the form hints): the look's red reads 6.58:1. */
  --danger: #B42318;
  --danger-bg: rgba(180,35,24,0.10);
  --red: #B42318;
}
/* The out-of-stock tag's grey: 2.89:1 by day, 4.07:1 by night, on its grey tint. */
html[data-look="bold"][data-theme="day"] .tag-out-of-stock {
  color: #4F4F49;
}
html[data-look="bold"]:not([data-theme="day"]) .tag-out-of-stock {
  color: #A3A3A3;
}
/* The low-stock badge, navy on orange (4.43:1 by day): ink and yellow. */
html[data-look="bold"][data-theme="day"] .stock-badge.low-stock {
  background: #161616;
  color: #F5D800;
}
/* An out-of-stock size is drawn at .55 opacity. By day its label and price read 3.56:1 and
   2.23:1 through it: black on a white tile reads about 4.9:1 composited. By night the price line
   reads 2.41:1: the light text colour reads about 4.9:1. */
html[data-look="bold"][data-theme="day"] .pd-size.oos {
  background: #FFFFFF;
  color: #000000;
}
html[data-look="bold"][data-theme="day"] .pd-size.oos .pd-size-sub {
  color: #000000;
}
html[data-look="bold"]:not([data-theme="day"]) .pd-size.oos .pd-size-sub {
  color: var(--fg1);
}
/* Yellow words on the day theme's light grounds: the payment steps' numbers (1.37:1), the
   pending and processing order states (1.48:1), and the two checkout notices a script shows,
   whose inline colour the day theme's inline-yellow rule stops matching once the script writes
   their style (1.53:1). The day gold reads 5.2:1 or better on each. */
html[data-look="bold"][data-theme="day"] .pay-explainer-step span,
html[data-look="bold"][data-theme="day"] .status-pending_payment,
html[data-look="bold"][data-theme="day"] .status-processing {
  color: var(--brand-text);
}
/* The same yellow on the same light grounds (about 1.6:1), on surfaces that show in a later step
   or a rarer state: the sign-up form's "21 years of age or older", the information toast, the
   adding-to-an-order banner, the legal pages' draft notice, the order confirmation's title, order
   number and buttons, and a tracking link in the order history. */
html[data-look="bold"][data-theme="day"] .age-check-row span strong,
html[data-look="bold"][data-theme="day"] .toast.info,
html[data-look="bold"][data-theme="day"] .add-order-banner,
html[data-look="bold"][data-theme="day"] .legal-draft-notice,
html[data-look="bold"][data-theme="day"] .confirm-title,
html[data-look="bold"][data-theme="day"] .order-id-display,
html[data-look="bold"][data-theme="day"] .copy-btn,
html[data-look="bold"][data-theme="day"] .btn-add-items {
  color: var(--brand-text);
}
html[data-look="bold"][data-theme="day"] .order-card-tracking a {
  color: var(--accent);
}
html[data-look="bold"][data-theme="day"] #tierLimitNotice,
html[data-look="bold"][data-theme="day"] #adultSignatureNotice {
  color: var(--brand-text) !important;
}
/* The research account card is dark in both themes, but by day its text took the day theme's
   dark ink (1:1 to 2.62:1). Its own light text tokens, both themes (the night grey was 4.29:1 on
   the "New" badge). */
html[data-look="bold"] .ras-card {
  --fg1: #F3F4F1;
  --fg2: #C8C8C0;
  --text: #F3F4F1;
  --muted: #C8C8C0;
}
/* The night grey on tinted grounds: the selected shipping option (4.1:1), the About page's green
   tiles (4.49:1), the order-status note on the tracking page (4.3:1) and the close button of the
   adding-to-an-order banner (4.14:1). One step lighter there. */
html[data-look="bold"]:not([data-theme="day"]) .shipping-opt.selected,
html[data-look="bold"]:not([data-theme="day"]) #page-about,
html[data-look="bold"]:not([data-theme="day"]) #trackResult,
html[data-look="bold"]:not([data-theme="day"]) .add-order-banner {
  --fg2: #A0A0B0;
  --muted: #A0A0B0;
}
/* The promo code field's placeholder, the browser's own grey: 4.25:1 by day, 3.26:1 by night. */
html[data-look="bold"] #promoCodeInput::placeholder {
  color: var(--fg2);
  opacity: 1;
}
/* White on the store orange (3.71:1, both themes): the cart's checkout button, PLACE ORDER, the
   sign-in form's button, and the payment step's COMPLETE PAYMENT. The orange one step deeper
   reads 5.18:1. */
html[data-look="bold"] .checkout-btn,
html[data-look="bold"] .submit-btn,
html[data-look="bold"] .btn-done {
  background: #C2410C;
}
/* The light red, inline: the checkout's returns notice (3.44:1 by day, 4.1:1 by night on its
   tint), the Shipping and Refunds page's notice (3.03:1 by day), the shipping-restriction warning
   a script shows, and the promo code's error line (4.38:1 by night). The darker red by day and
   the look's light red by night read at AA on each. */
html[data-look="bold"][data-theme="day"] #checkoutModal div[style*="color:#ef4444"],
html[data-look="bold"][data-theme="day"] #page-shipping-policy p[style*="color:#ef4444"],
html[data-look="bold"][data-theme="day"] #shippingRestrictionWarning,
html[data-look="bold"][data-theme="day"] #promoMsg[style*="239, 68, 68"] {
  color: #B42318 !important;
}
html[data-look="bold"]:not([data-theme="day"]) #checkoutModal div[style*="color:#ef4444"],
html[data-look="bold"]:not([data-theme="day"]) #shippingRestrictionWarning,
html[data-look="bold"]:not([data-theme="day"]) #promoMsg[style*="239, 68, 68"] {
  color: #F08080 !important;
}
/* The promo code's purple, inline (about 2.7:1 on the day theme's white): a darker violet. */
html[data-look="bold"][data-theme="day"] #coDiscRow span,
html[data-look="bold"][data-theme="day"] #promoMsg[style*="167, 139, 250"] {
  color: #5B21B6 !important;
}
/* The forgotten-password confirmation, inline night green on the day theme's white, and the
   suggested-address button's near-black on the day green: the day green, and white on it. */
html[data-look="bold"][data-theme="day"] #authForgotSuccess {
  color: var(--success) !important;
  border-color: var(--success) !important;
}
html[data-look="bold"][data-theme="day"] #addrIssueUseBtn {
  color: #FFFFFF !important;
}

/* ── 10. Age gate: a white card in an ink frame on yellow, by day and by night ── */
html[data-look="bold"] .age-gate {
  background: var(--lb-yellow);
}
html[data-look="bold"] .age-gate-box {
  background: var(--lb-white);
  border: var(--lb-rule);
  border-radius: 0;
  box-shadow: 10px 10px 0 var(--lb-ink);
}
html[data-look="bold"] .age-gate h2 {
  font-size: clamp(28px, 6.4vw, 36px);
  color: var(--lb-ink);
}
html[data-look="bold"] .age-gate-question {
  color: var(--lb-ink);
}
html[data-look="bold"] .age-gate-note {
  color: var(--fg2);
}
/* The frame and the condensed heading add about 15px to the box. On a short screen the logo gives
   that back, so the box is never taller than the store's own and its buttons stay in view
   without scrolling wherever they do today. */
@media (max-height: 700px) {
  html[data-look="bold"] .age-gate-logo {
    height: 56px;
  }
}

/* ── 11. Footer: an ink band, by day and by night ─────────────────────────────── */
html[data-look="bold"] footer {
  background: var(--lb-ink);
  border-top: var(--lb-rule);
  padding-bottom: 96px;
}
html[data-look="bold"] .footer-col h4 {
  color: var(--lb-yellow);
}
html[data-look="bold"] .footer-col a:hover {
  color: var(--lb-yellow);
}
html[data-look="bold"] footer img {
  filter: none;
}
html[data-look="bold"] .footer-disclaimer {
  border-top-color: var(--border-hairline);
}