/* Mobile treatment for the designed pages.

   The design ships desktop measurements as inline styles on every element,
   so there is no class to hook — these rules match on the inline style
   itself and override it. That is unusual, and deliberate: it lets the
   desktop design stay exactly as drawn while the phone gets a layout that
   was never drawn for it.

   The rules are ordered defensively. First a global no-horizontal-overflow
   pass (nothing is worse on a phone than a page that slides sideways), then
   layout collapse, then type, then touch targets. Anything matching a
   specific inline style is a targeted repair and says what it repairs. */

/* ── everywhere, not just phones ─────────────────────────────────── */

/* The design's boxes carry padding AND width; without border-box those add
   up and push past the viewport. */
*, *::before, *::after { box-sizing: border-box; }

html, body { max-width: 100%; overflow-x: hidden; }

img, video, svg, iframe { max-width: 100%; height: auto; }

/* drawer (built by the runtime; the button is hidden ≥761px) */
#blh-menu-btn {
  display: none;
  border: 1px solid var(--color-text);
  background: transparent;
  font: 800 12px var(--font-heading);
  letter-spacing: .05em;
  padding: 10px 12px;
  min-height: 44px;
  cursor: pointer;
  align-items: center;
}
#blh-drawer { position: fixed; inset: 0; background: rgba(12, 14, 10, .5); z-index: 90; display: none; }
#blh-drawer.open { display: block; }
#blh-drawer nav {
  background: var(--color-bg);
  width: min(320px, 84vw);
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 18px;
  gap: 4px;
  overflow: auto;
}
#blh-drawer nav a {
  font: 800 15px var(--font-heading);
  letter-spacing: .04em;
  padding: 13px 8px;
  min-height: 44px;
  border-bottom: 1px solid var(--color-divider);
  display: flex;
  align-items: center;
}

@media (max-width: 860px) {
  /* ── 1. nothing may exceed the viewport ───────────────────────── */

  /* Any grid whose tracks are wider than a phone becomes one column.
     minmax(540px…) on the cart and minmax(320px…) on wide bands are the
     worst offenders — they force a horizontal scrollbar on every page
     they appear on. */
  [style*="grid-template-columns:repeat(auto-fit,minmax(540px"],
  [style*="grid-template-columns:repeat(auto-fit,minmax(340px"],
  [style*="grid-template-columns:repeat(auto-fit,minmax(320px"],
  [style*="grid-template-columns:repeat(auto-fit,minmax(300px"],
  [style*="grid-template-columns:repeat(auto-fit,minmax(280px"],
  [style*="grid-template-columns:repeat(auto-fill,minmax(230px"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:200px 1fr"],
  [style*="grid-template-columns:260px 1fr"],
  [style*="grid-template-columns:1fr 380px"],
  [style*="grid-template-columns:1fr 420px"] {
    grid-template-columns: 1fr !important;
  }

  /* Product/card grids: two across is the most a 390px screen reads well,
     and a single column wastes the width. */
  [style*="grid-template-columns:repeat(auto-fit,minmax(260px"],
  [style*="grid-template-columns:repeat(auto-fit,minmax(250px"],
  [style*="grid-template-columns:repeat(auto-fit,minmax(240px"],
  [style*="grid-template-columns:repeat(auto-fit,minmax(230px"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  [style*="grid-template-columns:repeat(auto-fit,minmax(200px"],
  [style*="grid-template-columns:repeat(auto-fit,minmax(190px"],
  [style*="grid-template-columns:repeat(auto-fit,minmax(160px"],
  [style*="grid-template-columns:repeat(auto-fit,minmax(150px"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Grid and flex children default to min-width:auto, which refuses to
     shrink below their content — the usual cause of a stubborn sideways
     scroll even after the columns collapse. */
  [style*="display:grid"] > *, [style*="display:flex"] > * { min-width: 0; }

  /* Fixed pixel widths inside the content column */
  [style*="width:540px"], [style*="width:640px"], [style*="width:660px"],
  [style*="width:700px"], [style*="width:720px"], [style*="width:760px"],
  [style*="width:780px"], [style*="width:800px"], [style*="width:820px"],
  [style*="width:960px"] { width: auto !important; max-width: 100% !important; }

  /* long unbroken strings (SKUs, batch codes, urls) */
  h1, h2, h3, p, li, td, a { overflow-wrap: anywhere; }

  /* ── 1b. the hero ─────────────────────────────────────────────── */
  /* The category strip is pinned inside the hero (position:absolute;
     bottom:0) as four columns. Collapsing it to one column made it four
     rows tall, and being absolute it grew UPWARDS over the headline —
     the overlap that made the homepage unreadable. Two columns keeps it
     inside its band. */
  [style*="bottom:0"][style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    font-size: 12px !important;
  }
  [style*="bottom:0"][style*="grid-template-columns:repeat(4,1fr)"] > * {
    padding: 10px 12px !important;
  }
  /* the headline block is centred over the full hero height, so it needs
     to be told the bottom band is occupied */
  [style*="max-width:760px"][style*="pointer-events:none"] {
    padding-bottom: 150px !important;
    justify-content: flex-start !important;
    padding-top: 26px !important;
  }
  /* …and the hero needs the room for both */
  div[style*="height:540px"] { height: 520px !important; }

  /* other 4-up bands (not pinned) go two across */
  [style*="grid-template-columns:repeat(4,1fr)"]:not([style*="bottom:0"]) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* ── 2. header ────────────────────────────────────────────────── */
  [data-blh-nav] {
    grid-template-columns: auto 1fr auto !important;
    gap: 10px !important;
    padding: 8px 14px !important;
  }
  /* The runtime inserts the MENU button as the nav's FIRST child, so
     `div:first-child` stopped matching the links and they were never
     hidden — the nav wrapped onto three rows and pushed CART onto a
     fourth. nth-of-type counts divs only, so it finds the links whether
     or not a button sits in front of them. */
  [data-blh-nav] > div:nth-of-type(1) { display: none !important; }
  [data-blh-nav] img[alt*="look for the bear"] { height: 44px !important; }
  [data-blh-nav] > div:last-child a:not([href*="cart"]) { display: none !important; }
  #blh-menu-btn { display: inline-flex !important; }

  /* the sticky header must not eat a third of a short screen */
  [style*="position:sticky"][style*="top:0"] { padding-top: 8px !important; padding-bottom: 8px !important; }

  /* ── 3. type scale ────────────────────────────────────────────── */
  h1[style*="font-size:76px"] { font-size: 34px !important; line-height: 1.05 !important; }
  h1[style*="font-size:52px"] { font-size: 30px !important; line-height: 1.08 !important; }
  h1[style*="font-size:38px"] { font-size: 26px !important; line-height: 1.1 !important; }
  h2[style*="font-size:56px"] { font-size: 28px !important; line-height: 1.1 !important; }
  h2[style*="font-size:40px"] { font-size: 25px !important; }
  h2[style*="font-size:34px"] { font-size: 23px !important; }
  h2[style*="font-size:30px"] { font-size: 22px !important; }
  h3[style*="font-size:26px"], h3[style*="font-size:24px"] { font-size: 19px !important; }

  /* letter-spacing tuned for 70px type is unreadable at 30 */
  h1[style*="letter-spacing:-.04em"], h2[style*="letter-spacing:-.04em"] { letter-spacing: -.02em !important; }

  /* body copy never below 15px — iOS zooms the page on focus under 16 */
  p, li { font-size: max(15px, 1em); }
  input, select, textarea { font-size: 16px !important; }

  /* ── 4. gutters ───────────────────────────────────────────────── */
  [style*="padding:44px 32px"], [style*="padding:48px 32px"], [style*="padding:40px 32px"],
  [style*="padding:56px 32px"], [style*="padding:26px 32px"], [style*="padding:20px 32px"],
  [style*="padding:16px 24px"], [style*="padding:22px 24px"], [style*="padding:8px 32px"],
  [style*="padding:32px"], [style*="padding:36px 32px"], [style*="padding:64px 32px"],
  [style*="padding:72px 32px"], [style*="padding:80px 32px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  [style*="padding:0 32px"] { padding-left: 16px !important; padding-right: 16px !important; }
  /* vertical rhythm: 56–80px bands are a lot of scrolling on a phone */
  [style*="padding:72px 32px"], [style*="padding:80px 32px"] { padding-top: 40px !important; padding-bottom: 40px !important; }
  [style*="padding:56px 32px"], [style*="padding:64px 32px"] { padding-top: 34px !important; padding-bottom: 34px !important; }

  /* ── 5. other tall bands ──────────────────────────────────────── */
  div[style*="height:480px"] { height: 340px !important; }
  div[style*="height:420px"] { height: 300px !important; }

  /* ── 6. touch targets ─────────────────────────────────────────── */
  .filt, .filton, .stOff, .stOn, .packOn, .packOff,
  .addbtn, .ghostbtn, .pdf, .tog,
  button, [role="button"] { min-height: 44px !important; }
  a[style*="padding:17px"], a[style*="padding:16px"] { min-height: 44px; display: inline-flex; align-items: center; }

  /* filter/chip rows scroll sideways INSIDE their own strip rather than
     wrapping into a wall or widening the page */
  [data-blh-chips], [style*="display:flex"][style*="gap:8px"][style*="flex-wrap:wrap"] {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  [data-blh-chips]::-webkit-scrollbar { display: none; }

  /* ── 7. PDP ───────────────────────────────────────────────────── */
  /* buy action within thumb reach */
  [data-blh-buyrow] {
    position: sticky !important;
    bottom: 0;
    background: var(--color-bg);
    padding: 10px 0;
    z-index: 40;
    border-top: 2px solid var(--color-divider);
  }
  /* gallery thumbs: four across is fine, but not at 84px each */
  [style*="grid-template-columns:repeat(auto-fit,minmax(84px"] {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  /* ── 8. tables (lab results) ──────────────────────────────────── */
  /* a COA table has more columns than a phone has room for; let the table
     scroll in place instead of stretching the page */
  table { display: block; overflow-x: auto; white-space: nowrap; max-width: 100%; }

  /* ── 9. footer ────────────────────────────────────────────────── */
  [style*="grid-template-columns:repeat(auto-fit,minmax(180px"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px !important;
  }
}

/* very small phones (≤380px): one column everywhere, nothing side by side —
   except the hero's pinned strip, which grows upward over the headline if it
   gains rows, and the gallery thumbs, which are meant to sit in a row. */
@media (max-width: 380px) {
  [style*="grid-template-columns:repeat"]:not([style*="bottom:0"]):not([style*="minmax(84px"]) {
    grid-template-columns: 1fr !important;
  }
  h1[style*="font-size:76px"], h1[style*="font-size:52px"] { font-size: 27px !important; }
}