/* ============================================================
   Sutherland CBD Redesign Comp, v8
   Full-store ecommerce comp: mega-menu nav + category strip,
   promo-led hero with real-packshot collage, 8-SKU product grid,
   color-blocked brand sections, newsletter + dense footer.
   Palette lifted off the Slap! packaging (near-black / gold /
   crimson / blue-raspberry). Labs live on the PDP + footer only.
   ============================================================ */

:root {
  /* Color tokens v5: green retired per Josh. Palette lifted straight off the
     Slap! packaging: near-black bag body, gold, crimson (collection bg
     #d33452), and blue-raspberry blue (#2d7e97 sampled from the blue bag). */
  --ink: #1a191f;          /* near-black: text, borders, shadows, header, dark bands */
  --coal: #0b0b0c;         /* footer black */
  --paper: #fcfaf6;        /* cream */
  --mint: #faf0cd;         /* pale gold section bg (testimonials) */
  --razz: #2d7e97;         /* blue raspberry (sampled from the Slap blue bag) */
  --razz-deep: #175b70;
  --slap: #d33452;         /* Slap! crimson */
  --slap-deep: #a82342;
  --chill: #d04d08;        /* Canna Chill orange (reserved) */
  --pink: #faf0cd;         /* testimonial block = pale gold */
  --acid: #fccc02;         /* gold (kept) */
  --pine: #043637;         /* Sutherland deep green, back for the big fields */
  --grape: #262b4e;        /* midnight navy (sleep block) */
  --leaf: #2d7e97;         /* salve block = blue raspberry */
  --line: rgba(26, 25, 31, 0.16);
  --line-inv: rgba(252, 250, 246, 0.22);
  --body: #4c4954;
  --body-inv: #cfccd8;

  --display: "Archivo Black", "Archivo", sans-serif;
  --sans: "Archivo", -apple-system, sans-serif;

  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.25rem;
  --space-5: clamp(2.75rem, 5vw, 3.25rem);
  --space-6: clamp(3.25rem, 6.5vw, 4.25rem);
  --wrap: 76rem;
  --radius: 16px;
  --header-h: 4.5rem;

  --pop-shadow: 9px 9px 0 var(--ink);
  --pop-border: 3.5px solid var(--ink);
}

/* ---------- Base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 9.5rem; }
body {
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem; }

h1, h2, h3 { line-height: 1.02; letter-spacing: -0.01em; }
.display { font-family: var(--display); text-transform: uppercase; }

.kicker {
  display: inline-block;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}
.kicker::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 5px;
  margin-top: 0.45rem;
  background: var(--slap);
}
.kicker.on-dark { color: var(--acid); }

.lead { font-size: 1.1875rem; max-width: 38rem; }
.section-head .lead { color: var(--body); }
.on-dark .lead { color: var(--body-inv); }

/* Buttons: chunky candy pills with hard shadows */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--display);
  font-size: 0.98rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 1rem 1.8rem;
  border-radius: 999px;
  border: var(--pop-border);
  box-shadow: 5px 5px 0 var(--ink);
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--ink); }
.btn:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--ink); }
.btn-slap { background: var(--slap); color: #fff; }
.btn-razz { background: var(--razz); color: #fff; }
.btn-gold { background: var(--acid); color: var(--ink); }
.btn-ghost { background: var(--paper); color: var(--ink); }
.on-dark .btn { border-color: var(--paper); box-shadow: 5px 5px 0 rgba(255, 246, 234, 0.35); }
.on-dark .btn:hover { box-shadow: 3px 3px 0 rgba(255, 246, 234, 0.35); }

.icon { width: 1.35rem; height: 1.35rem; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Sticker badges */
.sticker {
  display: inline-block;
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 0.95rem;
  background: var(--acid);
  color: var(--ink);
  border: var(--pop-border);
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  transform: rotate(-6deg);
  box-shadow: 4px 4px 0 rgba(26, 25, 31, 0.35);
}
.sticker--slap { background: var(--slap); color: #fff; transform: rotate(4deg); }

/* Full-bleed color blocks, mapped to the live site's own tile palette */
.block-salmon { background: var(--pine); color: var(--paper); } /* Slap! feature, pine so the bags pop */
.block-pink { background: var(--mint); color: var(--ink); }    /* testimonials */
.block-gold { background: var(--acid); color: var(--ink); }
.block-grape { background: var(--grape); color: var(--paper); } /* sleep feature */
.block-leaf { background: var(--leaf); color: var(--paper); }   /* salve feature */
.block-razz { background: var(--razz); color: var(--paper); }
.block-pine { background: var(--pine); color: var(--paper); }
.block-pine .lead { color: #cfe2da; }
.on-dark { background: var(--ink); color: var(--paper); }
.kicker.on-dark, .lead.on-dark, p.on-dark { background: transparent; }

/* Kicker bars + button treatment inside saturated blocks */
.block-salmon .kicker::after, .block-grape .kicker::after, .block-leaf .kicker::after { background: var(--acid); }
.block-salmon .lead, .block-grape .lead, .block-leaf .lead { color: inherit; }

/* A11y: skip link + focus states */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 200;
  background: var(--acid);
  color: var(--ink);
  font-weight: 700;
  padding: 0.7rem 1.2rem;
  border: var(--pop-border);
  border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--razz);
  outline-offset: 2px;
}

/* ---------- Announcement bar: scrolling promo marquee ---------- */
.announce {
  background: var(--acid);
  color: var(--ink);
  overflow: hidden;
  border-bottom: 3px solid var(--ink);
  padding: 0.6rem 0;
}
.announce-track {
  display: inline-flex;
  align-items: center;
  gap: 2.8rem;
  white-space: nowrap;
  padding-right: 2.8rem;
  animation: announce-scroll 26s linear infinite;
}
.announce-track span {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 0.92rem;
  letter-spacing: 0.05em;
}
.announce-track .hot { color: var(--slap-deep); }
.announce-track .star { color: var(--slap); font-size: 0.8rem; }
@keyframes announce-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .announce-track { animation: none; } }

/* ---------- Header / Nav: near-black, gold logo pops on it ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--ink);
  color: var(--paper);
  border-bottom: 3px solid var(--acid);
}
.nav-row { display: flex; align-items: center; gap: 1.5rem; height: var(--header-h); }
.logo { display: inline-flex; align-items: center; text-decoration: none; }
.logo img { height: 2.6rem; width: auto; display: block; }
.nav-links { display: flex; align-items: center; gap: 1.35rem; list-style: none; margin-left: auto; }
.nav-links a {
  text-decoration: none;
  font-weight: 700;
  font-size: 0.98rem;
  padding: 0.4rem 0.1rem;
  border-bottom: 3px solid transparent;
}
.nav-links a:hover { border-bottom-color: var(--acid); }
.nav-links a.is-active { border-bottom-color: #fff; }

.nav-cart { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; text-decoration: none; }
.nav-toggle { display: none; background: none; border: 0; color: #fff; }
.nav-toggle .icon { width: 1.7rem; height: 1.7rem; }

/* ---------- Dropdowns + mega menu ---------- */
.has-drop { position: static; }
.nav-drop-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: 0;
  color: inherit;
  font-weight: 700;
  font-size: 0.98rem;
  padding: 0.4rem 0.1rem;
  border-bottom: 3px solid transparent;
}
.nav-drop-btn .icon { width: 0.9rem; height: 0.9rem; transition: transform 0.15s ease; }
.has-drop:hover .nav-drop-btn, .has-drop.is-open .nav-drop-btn { border-bottom-color: var(--acid); }
.has-drop.is-open .nav-drop-btn .icon { transform: rotate(180deg); }

.drop {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--paper);
  color: var(--ink);
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  box-shadow: 0 18px 40px rgba(26, 25, 31, 0.25);
  z-index: 70;
}
.has-drop:hover .drop, .has-drop:focus-within .drop, .has-drop.is-open .drop { display: block; }
.drop-inner { display: grid; grid-template-columns: repeat(4, 1fr) 1.15fr; gap: 2rem; padding: 1.8rem 1.25rem 2rem; max-width: var(--wrap); margin: 0 auto; }
.drop-inner.slim { grid-template-columns: repeat(5, 1fr); }
.mega-col h5 {
  font-family: var(--display);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--slap-deep);
  margin-bottom: 0.7rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--ink);
}
.mega-col a { display: block; text-decoration: none; font-weight: 600; font-size: 0.92rem; padding: 0.28rem 0; color: var(--ink); }
.mega-col a:hover { color: var(--razz-deep); text-decoration: underline; text-underline-offset: 3px; }
.mega-col a small { display: block; color: var(--body); font-weight: 500; line-height: 1.35; }
.mega-feature {
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 12px;
  box-shadow: 5px 5px 0 var(--ink);
  padding: 1rem;
  text-align: center;
  align-self: start;
}
.mega-feature img { width: 100%; }
.mega-feature b { display: block; font-family: var(--display); text-transform: uppercase; font-size: 0.85rem; margin: 0.5rem 0 0.7rem; }
.mega-feature .btn { padding: 0.5rem 1rem; font-size: 0.75rem; box-shadow: 3px 3px 0 var(--ink); }

/* Category strip under the header (Joy Organics secondary-nav pattern) */
.catbar { background: var(--paper); border-top: 3px solid var(--acid); }
.catbar-inner { display: flex; flex-wrap: wrap; gap: 0.1rem; }
.catbar a {
  text-decoration: none;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--ink);
  padding: 0.6rem 0.85rem;
  border-bottom: 3px solid transparent;
}
.catbar a:hover { border-bottom-color: var(--slap); }
.catbar a.hot { color: var(--slap-deep); }

/* ---------- Hero: promo-led, whole-shelf collage on Slap crimson ---------- */
.hero-slap {
  position: relative;
  background: var(--pine);
  color: #fff;
  border-bottom: 3px solid var(--ink);
  overflow: hidden;
}
.hero-slap-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 2rem;
  align-items: center;
}
.hero-copy { padding: 4.5rem 0; }

/* Hero: halftone texture straight off the Slap bag art */
.hero-slap::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(252, 250, 246, 0.09) 1.6px, transparent 1.6px);
  background-size: 20px 20px;
  pointer-events: none;
}
.hero-slap .wrap { position: relative; z-index: 1; }

/* Hero mosaic: one comic panel, full-bleed product cells, no floating cards */
.hero-mosaic-wrap { position: relative; align-self: center; margin: 3.5rem 0; }
.hero-mosaic-wrap .sticker { position: absolute; top: -1rem; left: -1.1rem; z-index: 2; }
.hero-mosaic {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1.2fr 1fr;
  gap: 3.5px;
  background: var(--ink);
  border: var(--pop-border);
  border-radius: var(--radius);
  box-shadow: 10px 10px 0 var(--ink);
  overflow: hidden;
}
.hero-mosaic a { display: block; overflow: hidden; background: #fff; }
.hero-mosaic a:hover img { transform: scale(1.04); }
.hero-mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s ease; }
.hero-mosaic .m-wide { grid-column: span 2; }
.hero-seo {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--acid);
  margin-bottom: 1.1rem;
}
.hero-h2 {
  font-family: var(--display);
  font-size: clamp(3rem, 7vw, 5.4rem);
  text-transform: uppercase;
  margin-bottom: 1.2rem;
  max-width: 12ch;
}
.hero-h2 em { font-style: normal; color: var(--acid); }
.hero-sub { font-size: 1.25rem; color: #cfe2da; margin-bottom: 2rem; max-width: 30rem; font-weight: 600; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 1rem; }

/* Trust strip: full-width gold band directly under the hero CTA */
.trust-strip { background: var(--acid); border-bottom: 3px solid var(--ink); }
.trust-row { display: grid; grid-template-columns: repeat(4, 1fr); }
.trust-item {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  padding: 1.15rem 1.25rem;
  border-left: 3px solid var(--ink);
  text-decoration: none;
  color: var(--ink);
}
.trust-item:first-child { border-left: 0; }
.trust-item .icon { width: 1.7rem; height: 1.7rem; margin-top: 0.1rem; stroke-width: 2.2; }
.trust-item b { display: block; font-size: 0.98rem; line-height: 1.25; text-transform: uppercase; letter-spacing: 0.02em; }
.trust-item small { display: block; font-size: 0.82rem; line-height: 1.35; margin-top: 0.2rem; font-weight: 600; }
a.trust-item:hover { background: rgba(255, 246, 234, 0.4); }

/* ---------- Marquee strip ---------- */
.marquee {
  background: var(--pine);
  color: var(--paper);
  border-bottom: 3px solid var(--ink);
  border-top: 3px solid var(--ink);
  padding: 0.9rem 0;
  overflow: hidden;
  white-space: nowrap;
}
.marquee-track {
  display: inline-flex;
  align-items: center;
  gap: 2.6rem;
  white-space: nowrap;
  padding-right: 2.6rem;
  animation: announce-scroll 30s linear infinite;
}
.marquee span {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 1.15rem;
  letter-spacing: 0.06em;
}
.marquee .star { color: var(--acid); font-size: 0.85rem; }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ---------- Generic sections ---------- */
.section { padding: var(--space-6) 0; }
.section-head { max-width: 46rem; margin-bottom: var(--space-4); }
.section-head h2 {
  font-family: var(--display);
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}

/* ---------- Shop by Solution ---------- */
.solution-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 1.4rem; }
.solution-grid--six { grid-template-columns: repeat(12, 1fr); gap: 1.1rem; }
.solution-card {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  border: var(--pop-border);
  border-radius: var(--radius);
  box-shadow: 7px 7px 0 var(--ink);
  overflow: hidden;
  text-decoration: none;
  background: #fff;
  color: #fff;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.solution-card:hover { transform: translate(3px, 3px); box-shadow: 4px 4px 0 var(--ink); }
.solution-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.solution-card.pack img { object-fit: contain; padding: 7%; }
.solution-label {
  margin-top: auto;
  background: var(--ink);
  color: #fff;
  padding: 0.75rem 1rem 0.85rem;
  border-top: 3px solid var(--ink);
  min-height: 6.6rem;
}
.solution-label b { font-family: var(--display); text-transform: uppercase; font-size: 1.02rem; display: block; }
.solution-label small { font-size: 0.82rem; font-weight: 600; color: var(--body-inv); }

/* ---------- Product grid (live /product-category/thc-gummies/ density) ---------- */
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 5px 5px 0 var(--ink);
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.product-card:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--ink); }
.product-card .shot { aspect-ratio: 1 / 1; background: #fff; display: flex; align-items: center; justify-content: center; border-bottom: 2.5px solid var(--ink); overflow: hidden; }
.product-card .shot img { width: 100%; height: 100%; object-fit: contain; padding: 7%; transition: transform 0.25s ease; }
.product-card:hover .shot img { transform: scale(1.05); }
.sale-badge {
  position: absolute;
  top: 0.8rem; left: 0.8rem;
  z-index: 2;
  font-family: var(--display);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--acid);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  transform: rotate(-5deg);
  box-shadow: 2.5px 2.5px 0 var(--ink);
}
.sale-badge--red { background: var(--slap); color: #fff; }
.product-card .info { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.95rem 1rem 1.1rem; flex: 1; }
.product-card .stars { color: #d9a600; font-size: 0.85rem; letter-spacing: 0.08em; }
.product-card .name { font-weight: 700; font-size: 0.95rem; line-height: 1.3; min-height: 2.6em; }
.product-card .prices { display: flex; align-items: baseline; gap: 0.5rem; margin-top: auto; }
.product-card .prices del { color: var(--body); font-size: 0.9rem; font-weight: 600; }
.product-card .prices b { font-family: var(--display); font-size: 1.15rem; }
.product-card .btn { justify-content: center; margin-top: 0.7rem; padding: 0.6rem 1rem; font-size: 0.8rem; box-shadow: 3px 3px 0 var(--ink); }

/* Trio of packshots inside a feature block */
.pack-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; }
.pack-trio img { border: var(--pop-border); border-radius: 12px; box-shadow: 6px 6px 0 var(--ink); background: #fff; width: 100%; }

/* Canna Chill feature block (their orange) */
.block-chill { background: var(--chill); color: #fff; }
.block-chill .kicker::after { background: var(--acid); }
.block-chill .lead { color: inherit; }

/* Brand wall: the whole house, one standard */
.brand-wall { display: flex; flex-wrap: wrap; gap: 0.7rem 1rem; }
.brand-wall span {
  font-family: var(--display);
  text-transform: uppercase;
  color: var(--ink);
  font-size: clamp(1.05rem, 2vw, 1.5rem);
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: 10px;
  box-shadow: 4px 4px 0 var(--ink);
  padding: 0.55rem 1rem;
}
.brand-wall span:nth-child(odd) { transform: rotate(-1.2deg); }
.brand-wall span:nth-child(3n) { background: var(--acid); }
.brand-wall span:nth-child(4n) { background: #fff; }

/* ---------- Feature blocks: one loud color block per hero product ---------- */
.feature-block { border-top: 3px solid var(--ink); }
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  align-items: center;
  padding: var(--space-5) 0;
}
.feature-row.flip .feature-media { order: 2; }
.feature-media { position: relative; }
.feature-media img { border: var(--pop-border); border-radius: var(--radius); box-shadow: var(--pop-shadow); }
.feature-media .sticker { position: absolute; top: -1.1rem; right: -0.6rem; z-index: 2; }
.feature-copy h3 { font-family: var(--display); font-size: clamp(2rem, 3.8vw, 3rem); text-transform: uppercase; margin-bottom: 1rem; }
.feature-copy .lead { font-weight: 600; }
.feature-copy .specs { list-style: none; margin: 1.2rem 0 1.7rem; }
.feature-copy .specs li { display: flex; align-items: center; gap: 0.6rem; font-weight: 700; font-size: 1rem; padding: 0.33rem 0; }
.feature-copy .specs .icon { width: 1.2rem; height: 1.2rem; stroke-width: 3; }
.coa-inline-link { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Batch lookup band (stays ink: the trust anchor) ---------- */
.lab-band { position: relative; overflow: hidden; border-top: 3px solid var(--ink); }
.lab-band-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-5); align-items: center; }
.lab-band img { border: 3px solid var(--paper); border-radius: var(--radius); box-shadow: 9px 9px 0 var(--acid); }
.coa-explainer {
  font-size: 1.05rem;
  color: var(--body-inv);
  border-left: 5px solid var(--acid);
  padding-left: 1rem;
  margin: 1.2rem 0 1.6rem;
  max-width: 34rem;
}
.lookup-form { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.lookup-form input {
  flex: 1 1 14rem;
  font: inherit;
  font-weight: 700;
  padding: 0.95rem 1.25rem;
  border-radius: 999px;
  border: 3px solid var(--paper);
  background: transparent;
  color: var(--paper);
  letter-spacing: 0.04em;
}
.lookup-form input::placeholder { color: rgba(216, 208, 234, 0.7); font-weight: 500; }
.lookup-form input:focus { outline: none; border-color: var(--acid); }
.lab-band .stat-row { display: flex; gap: 2.4rem; margin-top: 2rem; }
.stat b { font-family: var(--display); font-size: 1.9rem; display: block; color: var(--acid); }
.stat small { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--body-inv); font-weight: 600; }

/* ---------- Story band: pine halftone, real numbers, location cards ---------- */
.story-band {
  background-color: var(--pine);
  background-image: radial-gradient(rgba(252, 250, 246, 0.08) 1.6px, transparent 1.6px);
  background-size: 20px 20px;
  color: var(--paper);
  border-top: 3px solid var(--ink);
}
.story-stats { display: flex; gap: 2.6rem; flex-wrap: wrap; margin: 1.5rem 0 2rem; }
.story-stats b { font-family: var(--display); font-size: 2.1rem; color: var(--acid); display: block; line-height: 1; }
.story-stats small { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: #cfe2da; }
.loc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.loc-card {
  background: var(--paper);
  color: var(--ink);
  border: var(--pop-border);
  border-radius: var(--radius);
  box-shadow: 6px 6px 0 var(--ink);
  padding: 1.4rem 1.5rem;
}
.loc-card b { font-family: var(--display); text-transform: uppercase; font-size: 0.98rem; display: block; margin-bottom: 0.4rem; }
.loc-card p { color: var(--body); font-size: 0.92rem; font-weight: 500; line-height: 1.5; }
.loc-card .hrs { display: block; margin-top: 0.5rem; font-weight: 700; font-size: 0.82rem; color: var(--razz-deep); }
.story-cta { display: flex; align-items: center; gap: 1.2rem; margin-top: 2rem; flex-wrap: wrap; }

/* Scroll reveal (reduced-motion safe) */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- Testimonials: bubblegum block ---------- */
.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.quote-card {
  position: relative;
  background: var(--paper);
  border: var(--pop-border);
  border-radius: var(--radius);
  box-shadow: 7px 7px 0 var(--ink);
  padding: 2rem 1.6rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.quote-card::before {
  content: "\201C";
  position: absolute;
  top: -0.4rem;
  right: 1rem;
  font-family: var(--display);
  font-size: 4.6rem;
  line-height: 1;
  color: var(--acid);
  -webkit-text-stroke: 2px var(--ink);
}
.quote-card:nth-child(odd) { transform: rotate(-0.7deg); }
.quote-card:nth-child(even) { transform: rotate(0.7deg); }
.quote-stars { color: #d9a600; letter-spacing: 0.1em; font-size: 1.1rem; }
.quote-card p { color: var(--ink); font-size: 1rem; font-weight: 500; }
.quote-card footer { font-family: var(--display); text-transform: uppercase; font-size: 0.8rem; margin-top: auto; }
.quote-card footer small { display: block; font-family: var(--sans); font-weight: 600; color: var(--body); text-transform: none; }

/* ---------- Story / locations ---------- */
.story-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-5); align-items: center; }
.story-grid > img { border: var(--pop-border); border-radius: var(--radius); box-shadow: var(--pop-shadow); }
.loc-list { list-style: none; margin-top: 1.4rem; display: grid; gap: 0.9rem; }
.loc-list li { display: flex; gap: 0.8rem; align-items: flex-start; }
.loc-list .icon { color: var(--slap); margin-top: 0.2rem; }
.loc-list b { display: block; }
.loc-list small { color: var(--body); font-weight: 500; }

/* ---------- PDP ---------- */
.crumbs { font-size: 0.85rem; color: var(--body); padding: 1.1rem 0 0; font-weight: 600; }
.pdp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--space-5);
  padding: var(--space-4) 0 var(--space-5);
  align-items: start;
}
.pdp-gallery { position: sticky; top: calc(var(--header-h) + 1rem); }
.pdp-main-img { border: var(--pop-border); border-radius: var(--radius); box-shadow: var(--pop-shadow); overflow: hidden; margin-bottom: 1.1rem; }
.pdp-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8rem; }
.pdp-thumbs button { border: 2.5px solid var(--line); border-radius: 10px; overflow: hidden; padding: 0; background: #fff; }
.pdp-thumbs button img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }
.pdp-thumbs button.is-active { border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }

.pdp-title { font-family: var(--display); font-size: clamp(2.1rem, 3.6vw, 3rem); text-transform: uppercase; margin: 0.4rem 0 0.6rem; }
.pdp-tagline { font-size: 1.15rem; color: var(--body); margin-bottom: 1.2rem; font-weight: 500; }
.pdp-chips { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-bottom: 1.6rem; }
.chip {
  font-family: var(--display);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 2.5px solid var(--ink);
  border-radius: 8px;
  padding: 0.32rem 0.65rem;
  background: var(--paper);
  box-shadow: 2.5px 2.5px 0 var(--ink);
}

.opt-label { font-family: var(--display); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.07em; margin: 1.2rem 0 0.6rem; }
.opt-row { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.opt {
  border: 2.5px solid var(--line);
  background: #fff;
  border-radius: 12px;
  padding: 0.65rem 1.1rem;
  font-weight: 700;
}
.opt.is-active { border-color: var(--ink); background: var(--acid); box-shadow: 3px 3px 0 var(--ink); }
.opt small { display: block; font-weight: 600; font-size: 0.78rem; color: var(--body); }

.buy-box { margin-top: 1.5rem; display: flex; align-items: center; gap: 1.1rem; }
.qty { display: inline-flex; align-items: center; border: 2.5px solid var(--ink); border-radius: 999px; background: #fff; overflow: hidden; flex: none; }
.qty button { border: 0; background: none; font-family: var(--display); font-size: 1rem; width: 2.4rem; height: 2.7rem; }
.qty button:hover { background: var(--acid); }
.qty output { min-width: 2rem; text-align: center; font-weight: 700; }
.buy-box .price { font-family: var(--display); font-size: 2rem; }
.buy-box .price small { display: block; font-family: var(--sans); font-size: 0.78rem; font-weight: 700; color: var(--body); }
.buy-box .btn { flex: 1; justify-content: center; font-size: 1.05rem; padding: 1.1rem 1.5rem; }

.pdp-coa-note {
  margin-top: 1.25rem;
  border: 2.5px dashed var(--ink);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  font-size: 0.95rem;
  background: #fff;
}
.pdp-coa-note a { font-weight: 700; color: var(--razz-deep); }
.pdp-coa-note .batch { font-weight: 700; letter-spacing: 0.06em; }

.inside {
  margin-top: 1.5rem;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius);
  border: var(--pop-border);
  box-shadow: 7px 7px 0 var(--razz);
  padding: 1.4rem 1.5rem;
}
.inside h3 { font-family: var(--display); text-transform: uppercase; font-size: 1.05rem; margin-bottom: 0.9rem; color: var(--acid); }
.inside-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.inside-grid b { font-family: var(--display); font-size: 1.5rem; display: block; }
.inside-grid small { font-size: 0.8rem; color: var(--body-inv); line-height: 1.35; display: block; font-weight: 600; }

/* PDP tabs */
.pdp-tabs { border-top: 3px solid var(--ink); padding: var(--space-5) 0; background: #fff; }
.tab-rail { display: flex; flex-wrap: wrap; gap: 0.5rem; border-bottom: 3px solid var(--ink); margin-bottom: 1.8rem; }
.tab-btn {
  background: none;
  border: 0;
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  padding: 0.85rem 1.1rem;
  border-bottom: 5px solid transparent;
  margin-bottom: -3px;
  color: var(--body);
}
.tab-btn.is-active { color: var(--ink); border-bottom-color: var(--slap); }
.tab-panel { display: none; max-width: 46rem; }
.tab-panel.is-active { display: block; }
.tab-panel h3 { font-size: 1.25rem; margin: 1.3rem 0 0.5rem; }
.tab-panel p, .tab-panel li { color: var(--body); }
.tab-panel ul { padding-left: 1.2rem; margin: 0.6rem 0; }

.line-switch { display: flex; gap: 0.6rem; margin: 1.2rem 0 1.2rem; }
.line-switch button {
  border: 2.5px solid var(--ink);
  background: #fff;
  border-radius: 10px;
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 0.78rem;
  padding: 0.5rem 0.95rem;
}
.line-switch button.is-active { background: var(--ink); color: var(--acid); box-shadow: 3px 3px 0 var(--acid); }
.line-panel { display: none; background: var(--paper); border: var(--pop-border); border-radius: var(--radius); box-shadow: 6px 6px 0 var(--ink); padding: 1.3rem 1.4rem; }
.line-panel.is-active { display: block; }
.line-panel h4 { margin-bottom: 0.5rem; text-transform: uppercase; font-size: 0.95rem; letter-spacing: 0.04em; }

.test-list { list-style: none; padding: 0 !important; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1.2rem; margin-top: 0.8rem !important; }
.test-list li { display: flex; gap: 0.55rem; align-items: center; font-weight: 700; color: var(--ink) !important; }
.test-list .icon { width: 1.1rem; height: 1.1rem; color: var(--leaf); stroke-width: 3; }

/* Sticky purchase bar (Charlotte's Web pattern, pins above the header) */
.sticky-buy {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 80;
  background: #fff;
  border-bottom: 3px solid var(--ink);
  transform: translateY(-110%);
  transition: transform 0.25s ease;
}
.sticky-buy.is-visible { transform: translateY(0); }
.sticky-buy-row { display: flex; align-items: center; gap: 1rem; padding: 0.55rem 0; }
.sticky-buy img { width: 3rem; height: 3rem; border-radius: 8px; border: 2px solid var(--ink); object-fit: cover; }
.sticky-buy b { font-size: 0.98rem; line-height: 1.25; display: block; }
.sticky-buy small { color: var(--body); font-size: 0.8rem; font-weight: 600; }
.sticky-buy select {
  font: inherit; font-weight: 700; font-size: 0.9rem;
  padding: 0.5rem 0.7rem; border-radius: 8px; border: 2.5px solid var(--ink);
  background: #fff;
}
.sticky-buy .price { font-family: var(--display); font-size: 1.2rem; margin-left: auto; }
.sticky-buy .btn { padding: 0.6rem 1.3rem; font-size: 0.85rem; box-shadow: 3px 3px 0 var(--ink); }

/* ---------- Lab Reports page ---------- */
.lab-hero { background: var(--pine); color: var(--paper); padding: var(--space-5) 0 7rem; border-bottom: 3px solid var(--ink); }
.lab-hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-5); align-items: center; }
.lab-hero img { border: var(--pop-border); border-radius: var(--radius); box-shadow: 9px 9px 0 var(--ink); }
.lab-hero h1 { font-family: var(--display); font-size: clamp(2.6rem, 5vw, 4rem); text-transform: uppercase; margin-bottom: 1rem; }
.lab-hero .coa-explainer { color: #f1ecff; border-left-color: var(--acid); }
.lab-hero .stat b { color: var(--acid); }
.lab-hero .stat small { color: #d9ceff; }

.lookup-panel {
  background: #fff;
  border: var(--pop-border);
  border-radius: var(--radius);
  box-shadow: var(--pop-shadow);
  padding: 2rem;
  margin-top: -4.2rem;
  position: relative;
  z-index: 5;
}
.lookup-panel .lookup-form input { background: var(--paper); color: var(--ink); border-color: var(--ink); }
.lookup-panel .lookup-form input:focus { border-color: var(--razz); }
.try-lots { margin-top: 1rem; font-size: 0.88rem; color: var(--body); font-weight: 600; }
.try-lots button {
  border: 2px solid var(--ink);
  background: var(--paper);
  border-radius: 8px;
  font-family: var(--display);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  padding: 0.3rem 0.65rem;
  margin: 0 0.3rem 0.35rem 0;
  box-shadow: 2px 2px 0 var(--ink);
}
.try-lots button:hover { background: var(--acid); }

.result-list { margin-top: 1.5rem; display: grid; gap: 0.9rem; }
.result-card {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  border: 2.5px solid var(--ink);
  border-radius: 12px;
  box-shadow: 4px 4px 0 var(--ink);
  padding: 1rem 1.2rem;
  background: var(--paper);
}
.result-card .icon { width: 1.9rem; height: 1.9rem; color: var(--leaf); flex: none; }
.result-card b { display: block; line-height: 1.3; }
.result-card small { color: var(--body); display: block; font-size: 0.85rem; font-weight: 600; }
.result-card .btn { margin-left: auto; padding: 0.55rem 1.05rem; font-size: 0.75rem; flex: none; box-shadow: 3px 3px 0 var(--ink); }
.result-empty { color: var(--body); font-size: 0.95rem; padding: 0.8rem 0.2rem; font-weight: 600; }

.brand-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.brand-card {
  border: var(--pop-border);
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 6px 6px 0 var(--ink);
  padding: 1.4rem 1.5rem;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.brand-card:hover { transform: translate(3px, 3px); box-shadow: 3px 3px 0 var(--ink); }
.brand-card b { font-family: var(--display); text-transform: uppercase; font-size: 1.05rem; display: block; margin-bottom: 0.3rem; }
.brand-card small { color: var(--body); font-weight: 600; }
.brand-card .count { display: inline-block; margin-top: 0.7rem; font-family: var(--display); font-size: 0.78rem; color: var(--razz-deep); }

.howto-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.howto-card { background: var(--paper); color: var(--ink); border: var(--pop-border); border-radius: var(--radius); box-shadow: 7px 7px 0 var(--slap); padding: 1.6rem; }
.howto-card .step { font-family: var(--display); font-size: 1.7rem; color: var(--slap); display: block; margin-bottom: 0.6rem; }
.howto-card b { display: block; margin-bottom: 0.4rem; font-size: 1.05rem; text-transform: uppercase; }
.howto-card p { color: var(--body); font-size: 0.95rem; font-weight: 500; }

/* ---------- Age gate (21+, session-scoped) ---------- */
.agegate {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(4, 54, 55, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
}
.agegate-card {
  background: var(--paper);
  border: var(--pop-border);
  border-radius: var(--radius);
  box-shadow: var(--pop-shadow);
  max-width: 27rem;
  width: 100%;
  text-align: center;
  padding: 2.4rem 2rem 2.2rem;
}
.agegate-card .big {
  font-family: var(--display);
  font-size: 3.4rem;
  line-height: 1;
  color: var(--pine);
  display: block;
  margin-bottom: 0.6rem;
}
.agegate-card p { color: var(--body); font-weight: 500; margin-bottom: 1.4rem; }
.agegate-card .row { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; }

/* ---------- Dose guide ladder ---------- */
.dose-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.dose-card {
  background: #fff;
  border: var(--pop-border);
  border-radius: var(--radius);
  box-shadow: 6px 6px 0 var(--ink);
  padding: 1.5rem 1.4rem 1.4rem;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.dose-card:hover { transform: translate(3px, 3px); box-shadow: 3px 3px 0 var(--ink); }
.dose-card .mg { font-family: var(--display); font-size: 2.6rem; line-height: 1; color: var(--pine); }
.dose-card .mg small { font-size: 1rem; letter-spacing: 0.04em; }
.dose-card b { font-family: var(--display); text-transform: uppercase; font-size: 0.95rem; margin: 0.55rem 0 0.3rem; }
.dose-card p { color: var(--body); font-size: 0.9rem; font-weight: 500; line-height: 1.45; }
.dose-card .who { margin-top: 0.65rem; font-size: 0.82rem; font-weight: 700; color: var(--razz-deep); }

/* ---------- PDP conversion stack ---------- */
.promo-note {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--acid);
  border: 2.5px solid var(--ink);
  border-radius: 10px;
  padding: 0.65rem 1rem;
  margin-top: 1.25rem;
  font-weight: 700;
  font-size: 0.93rem;
}
.promo-note .star { color: var(--slap-deep); }
.reassure { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin-top: 1rem; padding: 0; }
.reassure li { display: flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; font-weight: 600; color: var(--body); }
.reassure .icon { width: 1rem; height: 1rem; color: var(--razz); stroke-width: 3; }

.tag-best {
  display: inline-block;
  width: max-content;
  font-family: var(--display);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--acid);
  border: 2px solid var(--ink);
  border-radius: 5px;
  padding: 0.16rem 0.5rem;
  margin-bottom: 0.2rem;
  color: var(--ink);
}

/* ---------- Category page ---------- */
.cat-hero {
  background-color: var(--pine);
  background-image: radial-gradient(rgba(252, 250, 246, 0.08) 1.6px, transparent 1.6px);
  background-size: 20px 20px;
  color: var(--paper);
  border-bottom: 3px solid var(--ink);
  padding: 3rem 0 3.4rem;
}
.cat-hero .crumbs a { color: inherit; }
.cat-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.6rem;
}
.filter-chips { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.fchip {
  border: 2.5px solid var(--ink);
  background: #fff;
  border-radius: 999px;
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  padding: 0.5rem 1.05rem;
  box-shadow: 3px 3px 0 var(--ink);
}
.fchip span { color: var(--body); font-family: var(--sans); font-weight: 700; }
.fchip:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--ink); }
.fchip.is-active { background: var(--ink); color: var(--acid); }
.fchip.is-active span { color: var(--paper); }
.sortbox { font-weight: 700; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 0.6rem; }
.sortbox select {
  font: inherit; font-weight: 700; font-size: 0.9rem;
  border: 2.5px solid var(--ink); border-radius: 10px;
  padding: 0.5rem 0.8rem; background: #fff;
  box-shadow: 3px 3px 0 var(--ink);
}
.product-card.is-hidden { display: none; }
.cat-note {
  margin-top: 2rem;
  border: 2.5px dashed var(--ink);
  border-radius: var(--radius);
  background: #fff;
  padding: 1rem 1.3rem;
  font-weight: 600;
  font-size: 0.95rem;
}

/* ---------- Search overlay ---------- */
.search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 54, 55, 0.7);
  z-index: 105;
  display: none;
  padding: 6rem 1rem 2rem;
}
body.search-open .search-overlay { display: block; }
body.search-open { overflow: hidden; }
.search-panel {
  max-width: 38rem;
  margin: 0 auto;
  background: var(--paper);
  border: var(--pop-border);
  border-radius: var(--radius);
  box-shadow: var(--pop-shadow);
  overflow: hidden;
}
.search-row { display: flex; align-items: center; gap: 0.7rem; padding: 1rem 1.2rem; border-bottom: 3px solid var(--ink); background: #fff; }
.search-row .icon { flex: none; color: var(--body); }
.search-row input { flex: 1; border: 0; font: inherit; font-weight: 600; font-size: 1.05rem; background: none; }
.search-row input:focus { outline: none; }
.search-hint { font-size: 0.75rem; font-weight: 700; color: var(--body); border: 1.5px solid var(--line); border-radius: 6px; padding: 0.15rem 0.5rem; }
.search-results { max-height: 55vh; overflow-y: auto; padding: 0.6rem; display: grid; gap: 0.4rem; }
.search-item {
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  gap: 0.9rem;
  align-items: center;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  text-decoration: none;
}
.search-item:hover, .search-item.is-active { background: var(--mint); }
.search-item img { width: 3rem; height: 3rem; object-fit: contain; background: #fff; border: 1.5px solid var(--line); border-radius: 8px; }
.search-item b { font-size: 0.9rem; line-height: 1.3; display: block; }
.search-item small { color: var(--body); font-weight: 600; font-size: 0.78rem; }
.search-item .sp { font-family: var(--display); font-size: 0.9rem; }
.search-empty { padding: 1.4rem; text-align: center; color: var(--body); font-weight: 600; }
.nav-search { background: none; border: 0; color: inherit; display: inline-flex; align-items: center; }
.nav-search .icon { width: 1.25rem; height: 1.25rem; }

/* ---------- FAQ accordion ---------- */
.faq-list { max-width: 46rem; display: grid; gap: 0.9rem; }
.faq-item {
  background: #fff;
  border: var(--pop-border);
  border-radius: var(--radius);
  box-shadow: 5px 5px 0 var(--ink);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 0.98rem;
  padding: 1.05rem 1.3rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: var(--display);
  font-size: 1.4rem;
  color: var(--slap);
  flex: none;
  line-height: 1;
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item .faq-a { padding: 0 1.3rem 1.2rem; color: var(--body); font-weight: 500; }
.faq-item .faq-a a { font-weight: 700; color: var(--razz-deep); }

/* ---------- Mini-cart drawer ---------- */
.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 54, 55, 0.6);
  z-index: 110;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.cart-open .cart-overlay { opacity: 1; pointer-events: auto; }
.cart-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(26rem, 92vw);
  background: var(--paper);
  z-index: 111;
  border-left: 3.5px solid var(--ink);
  display: flex;
  flex-direction: column;
  transform: translateX(105%);
  transition: transform 0.25s ease;
}
.cart-open .cart-drawer { transform: none; }
.cart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.3rem;
  background: var(--ink);
  color: var(--paper);
}
.cart-head b { font-family: var(--display); text-transform: uppercase; font-size: 1.05rem; }
.cart-close { background: none; border: 0; color: var(--paper); display: inline-flex; }
.cart-close .icon { width: 1.4rem; height: 1.4rem; }
.cart-items { flex: 1; overflow-y: auto; padding: 1.1rem 1.3rem; display: grid; gap: 1rem; align-content: start; }
.cart-empty { color: var(--body); font-weight: 600; text-align: center; padding: 2.5rem 1rem; }
.cart-item { display: grid; grid-template-columns: 3.6rem 1fr auto; gap: 0.9rem; align-items: center; border: 2px solid var(--line); border-radius: 12px; padding: 0.7rem; background: #fff; }
.cart-item img { width: 3.6rem; height: 3.6rem; object-fit: contain; background: #fff; border-radius: 8px; border: 1.5px solid var(--line); }
.cart-item b { font-size: 0.85rem; line-height: 1.3; display: block; }
.cart-item .ci-price { font-family: var(--display); font-size: 0.9rem; }
.cart-item .qty { transform: scale(0.82); transform-origin: left center; margin-top: 0.3rem; }
.cart-item .ci-remove { background: none; border: 0; color: var(--body); font-size: 0.75rem; font-weight: 700; text-decoration: underline; }
.b2g2 {
  margin: 0 1.3rem;
  border: 2.5px dashed var(--ink);
  border-radius: 12px;
  background: var(--mint);
  padding: 0.8rem 1rem;
  font-size: 0.87rem;
  font-weight: 700;
}
.b2g2 .bar { height: 0.55rem; background: #fff; border: 2px solid var(--ink); border-radius: 999px; margin-top: 0.5rem; overflow: hidden; }
.b2g2 .bar span { display: block; height: 100%; background: var(--slap); transition: width 0.25s ease; }
.b2g2.unlocked { background: var(--acid); }
.cart-foot { padding: 1.1rem 1.3rem 1.3rem; border-top: 3px solid var(--ink); display: grid; gap: 0.8rem; }
.cart-foot .row { display: flex; justify-content: space-between; font-weight: 700; }
.cart-foot .row b { font-family: var(--display); font-size: 1.2rem; }
.cart-foot small { color: var(--body); font-weight: 600; }
.cart-checkout { width: 100%; justify-content: center; }
.cart-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: var(--acid);
  color: var(--ink);
  font-family: var(--display);
  font-size: 0.7rem;
  margin-left: 0.2rem;
}
body.cart-open { overflow: hidden; }

/* ---------- Newsletter band ---------- */
.newsletter {
  background-color: var(--pine);
  background-image: radial-gradient(rgba(252, 250, 246, 0.08) 1.6px, transparent 1.6px);
  background-size: 20px 20px;
  color: var(--paper);
  border-top: 3px solid var(--ink);
}
.newsletter-inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 2rem; align-items: center; padding: 2.6rem 0; }
.newsletter h2 { font-family: var(--display); text-transform: uppercase; font-size: clamp(1.6rem, 3vw, 2.3rem); }
.newsletter p { color: #cfe2da; font-weight: 600; margin-top: 0.4rem; }
.newsletter-form { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.newsletter-form input {
  flex: 1 1 14rem;
  font: inherit;
  font-weight: 600;
  padding: 0.95rem 1.25rem;
  border-radius: 999px;
  border: var(--pop-border);
  background: #fff;
  color: var(--ink);
}
.newsletter-form input:focus { outline: 3px solid var(--acid); }
.newsletter-thanks { font-family: var(--display); text-transform: uppercase; font-size: 1.05rem; }

/* ---------- Footer ---------- */
.site-footer {
  background-color: var(--coal);
  background-image: radial-gradient(rgba(252, 204, 2, 0.06) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  color: var(--paper);
  padding: var(--space-5) 0 var(--space-3);
  border-top: 3px solid var(--acid);
}

/* Footer signature: giant outlined brand type */
.footer-hero {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line-inv);
  margin-top: var(--space-4);
  padding: 3.2rem 0 1.6rem;
  text-align: center;
}
.footer-hero .giant {
  font-family: var(--display);
  text-transform: uppercase;
  line-height: 0.98;
  font-size: clamp(3rem, 8.5vw, 7rem);
  color: transparent;
  -webkit-text-stroke: 2px rgba(252, 250, 246, 0.32);
  paint-order: stroke fill;
}
.footer-hero .giant em { font-style: normal; color: var(--acid); -webkit-text-stroke: 0; }
.footer-hero .sticker { position: absolute; top: 1.4rem; right: 3%; font-size: 0.8rem; }
.to-top {
  position: absolute;
  top: 1.6rem;
  left: 3%;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--display);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--body-inv);
  border: 2px solid var(--body-inv);
  border-radius: 999px;
  padding: 0.45rem 0.95rem;
}
.to-top:hover { color: var(--acid); border-color: var(--acid); }
.to-top .icon { width: 0.85rem; height: 0.85rem; stroke-width: 3; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 0.85fr 0.85fr 0.95fr 1.35fr; gap: 2.2rem; margin-bottom: var(--space-4); }
.footer-grid h4 { font-family: var(--display); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--acid); margin-bottom: 0.9rem; }
.footer-grid ul { list-style: none; display: grid; gap: 0.45rem; }
.footer-grid a { color: var(--body-inv); text-decoration: none; font-size: 0.93rem; font-weight: 600; }
.footer-grid a:hover { color: var(--acid); }
.footer-grid p { color: var(--body-inv); font-size: 0.93rem; }
.social-row { display: flex; gap: 0.7rem; margin-top: 1.1rem; }
.social-row a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem; height: 2.5rem;
  border: 2px solid var(--body-inv);
  border-radius: 999px;
  color: var(--paper);
}
.social-row a:hover { border-color: var(--acid); background: var(--acid); color: var(--ink); }
.pay-chips { display: flex; gap: 0.45rem; margin-top: 1.1rem; flex-wrap: wrap; }
.pay-chips span {
  font-family: var(--display);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  border: 1.5px solid var(--body-inv);
  border-radius: 5px;
  padding: 0.28rem 0.5rem;
  color: var(--body-inv);
}
.foot-loc { display: grid; gap: 0.85rem; }
.foot-loc b { display: block; font-size: 0.93rem; }
.foot-loc small { color: var(--body-inv); font-size: 0.83rem; line-height: 1.4; display: block; }
.foot-phone {
  display: inline-flex;
  margin-top: 0.9rem;
  font-family: var(--display);
  font-size: 1.05rem;
  color: var(--acid) !important;
}
.legal { border-top: 1px solid var(--line-inv); padding-top: 1.4rem; font-size: 0.78rem; color: var(--body-inv); display: grid; gap: 0.55rem; }
.legal .row { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* ---------- Responsive ---------- */
@media (max-width: 60rem) {
  .hero-slap-grid { grid-template-columns: 1fr; gap: 0; }
  .hero-copy { padding: 3.5rem 0 1.5rem; }
  .hero-mosaic-wrap { margin: 0.5rem 0 2.5rem; }
  .hero-h2 { font-size: clamp(2.6rem, 11vw, 3.6rem); }

  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .product-card .name { font-size: 0.88rem; }

  .trust-row { grid-template-columns: 1fr 1fr; }
  .trust-item { border-left: 0; border-top: 3px solid var(--ink); }
  .trust-item:nth-child(even) { border-left: 3px solid var(--ink); }
  .trust-item:nth-child(-n+2) { border-top: 0; }

  .solution-grid { grid-template-columns: repeat(2, 1fr); }
  .solution-card { grid-column: span 1; }
  .feature-row, .lab-band-grid, .story-grid, .pdp-grid, .lab-hero-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .feature-row.flip .feature-media { order: 0; }
  .quote-grid, .brand-grid, .howto-grid, .loc-cards { grid-template-columns: 1fr; }
  .story-stats { gap: 1.6rem; }
  .dose-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .pdp-gallery { position: static; }

  .nav-links {
    display: none;
    position: absolute;
    top: var(--header-h);
    left: 0; right: 0;
    background: var(--ink);
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem 1.25rem 1.4rem;
    border-bottom: 3px solid var(--acid);
    gap: 0.9rem;
  }
  .nav-links.is-open { display: flex; }
  .nav-toggle { display: block; margin-left: auto; }
  .nav-cart { margin-left: 0; }

  /* Mobile: dropdowns become accordions inside the sheet */
  .has-drop { position: relative; width: 100%; }
  .has-drop:hover .drop { display: none; }
  .has-drop.is-open .drop { display: block; }
  .drop { position: static; box-shadow: none; border-bottom: 0; background: transparent; color: var(--paper); }
  .drop-inner, .drop-inner.slim { grid-template-columns: 1fr; gap: 1rem; padding: 0.8rem 0 0.4rem 0.8rem; max-width: none; }
  .mega-col h5 { color: var(--acid); border-bottom-color: var(--line-inv); }
  .mega-col a { color: var(--paper); }
  .mega-col a small { color: var(--body-inv); }
  .mega-feature { display: none; }
  .catbar { display: none; }

  .feature-media .sticker { right: 0.5rem; top: -0.9rem; }
  .sticky-buy { top: auto; bottom: 0; transform: translateY(110%); border-top: 3px solid var(--ink); border-bottom: 0; }
  .sticky-buy.is-visible { transform: translateY(0); }
  .sticky-buy img, .sticky-buy small, .sticky-buy select { display: none; }
  .inside-grid { grid-template-columns: 1fr; }
  .test-list { grid-template-columns: 1fr; }
  .lookup-panel { margin-top: 1.5rem; padding: 1.4rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.8rem; }
  .newsletter-inner { grid-template-columns: 1fr; gap: 1.2rem; padding: 2.2rem 0; }
  .footer-hero .sticker, .to-top { position: static; display: inline-flex; margin: 0 0.5rem 1.2rem; transform: none; }
  .lab-band .stat-row { flex-wrap: wrap; gap: 1.2rem; }
}