/* ═══════════════════════════════════════════════════════════════════
   Chrome — announce bar, header, quicknav, drawer, tab bar, FAB

   The furniture that never unmounts. Everything here is present on
   every route, so a change lands on all of them at once.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══ Announcement bar — a slider ═════════════════════════════════
   One slide at a time, leading with the Nerd Assistant. The track
   translates vertically; nothing is added or removed, so every slide
   stays in the DOM and stays crawlable (§9.10 rule 2).

   The bar is 14px, which is under the §9.2 body floor of 16px. That is
   deliberate and bounded: this is standing shop metadata sitting above
   the logo, the same register as the 12px icon captions §9.15 allows,
   and it is never the only place any of it is said — dispatch and the
   phone number are both repeated in the footer at full size.

   Contrast on --menu-bg-deep, computed:
     --menu-fg 14.50:1   --menu-fg-muted 6.81:1   --brand 9.00:1  */
.announce{background:var(--menu-bg-deep);color:var(--menu-fg-muted);
  font-size:.875rem;line-height:1.4}
.announce-viewport{
  max-width:var(--page);margin-inline:auto;padding-inline:var(--gutter);
  /* One slide tall. A fixed height is what makes the translate land on
     a slide boundary instead of halfway through one. */
  height:var(--announce-h);overflow:hidden;
}
.announce-track{
  display:flex;flex-direction:column;margin:0;padding:0;list-style:none;
  transition:transform .5s cubic-bezier(.4,0,.2,1);
}
.announce-slide{
  display:flex;align-items:center;gap:var(--sp-2);
  height:var(--announce-h);flex:0 0 var(--announce-h);
  min-width:0;
}
.announce-slide>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* §9.3 — the icon is matched to the text rather than shrunk to decoration. */
.announce-slide .ico{width:1.35em;height:1.35em;flex:none;color:var(--brand)}
/* The slide is `<b>heading</b> trailing sentence`. The pair reads by
   WEIGHT and colour here, not by size: --announce-h fixes the band at
   34px so the heading cannot grow, and 14px is already the floor the
   bar sits at (§9.2) so the trailing text must not shrink under it.
   The size is stated rather than inherited so nothing drifts. */
.announce-slide b{font-size:.875rem;color:var(--menu-fg);font-weight:600}
.announce a{color:var(--brand);font-weight:700}

/* The one control in the bar. It opens the Assistant panel; it is a real
   button, and it keeps the 44px target without making the band 44px tall
   by overflowing its own box — the band is a landmark, not a tap zone. */
.announce-cta{
  flex:none;margin-left:auto;position:relative;
  background:none;border:0;padding:0 var(--sp-1);
  font:inherit;font-weight:700;color:var(--brand);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;
}
.announce-cta::after{content:"";position:absolute;inset:-14px -8px;}
.announce-cta:hover{color:var(--menu-fg)}
.announce-cta:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:var(--r-sm)}

/* MOTION IS OPTIONAL, ALWAYS. Under prefers-reduced-motion the slider
   stops being a slider: the viewport opens up, the track lays out as a
   wrapping row and every promise is visible at once. JS checks the same
   query and never starts the timer, so nothing is left unreachable. */
@media (prefers-reduced-motion: reduce){
  .announce-viewport{height:auto}
  .announce-track{flex-direction:row;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);
    transform:none !important;transition:none}
  .announce-slide{height:auto;flex:0 1 auto;padding-block:6px}
  .announce-slide>span{white-space:normal}
  .announce-cta{margin-left:var(--sp-2)}
}

/* ── Header ─────────────────────────────────────────────────────── */
/* NOT STICKY ON A PHONE. Held at the top it was 160px of an 844px
   screen — logo row, search row and the amber band — kept there the
   whole way down a listing, 19% of the viewport spent on chrome that
   the customer had already read. What deserves that space on a listing
   is the toolbar, which is sticky instead (shop.css). Scrolling up
   brings this back, which is the gesture every phone user already has.
   From 768px the screen can afford it and it sticks again. */
.hdr{
  background:var(--surface);border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top, 0px);
}
/* TWO ROWS ON A PHONE: the logo alone, then menu and search.
   Grid rather than flex-wrap because the rows are a deliberate layout
   and not a consequence of one — `grid-column:1/-1` says "the logo owns
   its row" outright, where flex said it by arithmetic that any change
   to the other children could undo. */
.hdr-bar{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  align-items:center;gap:var(--sp-2);
  padding:var(--sp-2) var(--gutter);max-width:var(--page);margin-inline:auto;
}
.hdr-bar .brand{grid-column:1 / -1;justify-self:center}
.hdr-menu{grid-column:1}
.hdr-bar .hdr-search{grid-column:2}
/* Account and Cart are two of the five entries in the tab bar fixed to
   the bottom of this same screen (§9.1 — one UI, adapted). Shown in
   both places at once they were not twice as reachable, only twice as
   expensive. They return with the single-row header at 768px. */
.acct-btn,.cart-btn{display:none}
/* The real 1009×244 logo, on a white chip so the dark "shed" always
   reads regardless of theme (NS_Deck_JS sidebar-logo pattern). */
.brand{display:flex;align-items:center;min-width:0;margin-inline:auto;
  background:var(--logo-chip);border-radius:6px;padding:4px 8px}
.brand-logo{height:30px;width:auto;display:block}
.hdr-search{display:flex;flex:1 1 100%;min-width:0;order:1}
/* ── Captioned icon controls (§9.15) ────────────────────────────────
   A glyph with a word under it. 12px is the §9.2 floor and this is the
   one place it is right: the word is a label for the icon, not copy.
   The whole stack stays a ≥44px target. */
.hdr-btn{flex-direction:column;gap:1px;width:auto;min-width:var(--tap);
  min-height:var(--tap);padding-inline:var(--sp-1);border-radius:var(--r)}
.hdr-btn .ico{width:24px;height:24px}
.hdr-cap{font-size:.75rem;font-weight:600;line-height:1;letter-spacing:.01em}

/* Account and cart sit hard against the right edge of the page. The
   first of the trailing pair takes the slack; the rest sit tight to it. */
.cart-btn{order:0;margin-left:auto}
.cart-btn .count{
  position:absolute;top:2px;right:0;min-width:20px;height:20px;padding:0 5px;
  border-radius:var(--r-full);background:var(--red);color:var(--on-fill);
  font-size:.75rem;font-weight:700;display:flex;align-items:center;justify-content:center;
  font-variant-numeric:tabular-nums;
}
.cart-btn .count[hidden]{display:none}

/* ── Search ─────────────────────────────────────────────────────────
   The live site puts the magnifier in a dark square welded to the right
   end of the field, and that is what this follows. It departs from
   UI_UX §4.3's magnifier-PREFIX pattern deliberately: the reference the
   shop asked for has the control as a submit button, not decoration,
   and a search box with a real submit button is the better of the two
   for a customer who is not sure Enter will work. */
.search-wrap{display:flex;align-items:stretch;width:100%;min-width:0;
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  overflow:hidden}
.search-wrap:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-xlight)}
.search-wrap .field-in{flex:1 1 auto;min-width:0;border:0;border-radius:0;
  background:transparent;font-size:1rem}
.search-wrap .field-in:focus{outline:none;box-shadow:none}
.search-go{flex:0 0 auto;width:56px;min-height:var(--tap);
  display:flex;align-items:center;justify-content:center;
  background:var(--dark);color:var(--on-fill);border:0;cursor:pointer}
.search-go:hover{background:var(--dark-deep)}
.search-go:focus-visible{outline:2px solid var(--brand);outline-offset:-3px}
.search-go .ico{width:24px;height:24px}

/* ── The amber band ─────────────────────────────────────────────────
   Full-bleed, after the live site. Its text is the logo's charcoal, NOT
   white: white on #F8B030 measures 1.87:1 and fails WCAG outright,
   charcoal measures 7.73:1. Same band, readable (§9.2, §10.4).

   Measured, on --logo-ink #2B292B:
     --brand      #F8B030   7.73:1   the band
     --brand-dark #C7861A   4.71:1   the Categories block and link hover
   A third, darker amber was tried for hover and dropped: it took the ink
   to 3.42:1, below the body floor. The Categories block LIGHTENS on
   hover instead. */
/* DESKTOP ONLY. On a phone the band cost 48px of permanent chrome to
   restate what the drawer behind the burger already holds, and the
   strip beside it could only ever show three of eighteen ranges before
   running off the edge — a scroller nobody scrolled. The Categories
   block moved to the header's second row; the ranges are one tap
   further, in the drill-down that lists all of them. */
.navband{display:none;background:var(--brand);border-bottom:1px solid var(--brand-dark)}
.navband-in{max-width:var(--page);margin-inline:auto;
  display:flex;align-items:stretch;gap:var(--sp-2);min-width:0}

.navband-cats{flex:0 0 auto;display:flex;align-items:center;gap:var(--sp-2);
  min-height:var(--tap);padding-inline:var(--gutter);
  color:var(--logo-ink);font-weight:800;font-size:1rem;
  background:var(--brand-dark);cursor:pointer}
.navband-cats .bars{width:24px;height:24px}
.navband-cats .chev{width:20px;height:20px;transition:transform .18s ease}
.navband-cats[aria-expanded="true"] .chev{transform:rotate(180deg)}
.navband-cats:hover{background:var(--brand)}
.navband-cats:focus-visible{outline:2px solid var(--logo-ink);outline-offset:-3px}

.navband-links{display:flex;align-items:stretch;gap:0;min-width:0;
  overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
  -webkit-overflow-scrolling:touch}
.navband-links::-webkit-scrollbar{display:none}
.navband-links a{flex:0 0 auto;display:flex;align-items:center;
  min-height:var(--tap);padding-inline:var(--sp-3);white-space:nowrap;
  color:var(--logo-ink);font-weight:700;font-size:.9375rem}
.navband-links a:hover{background:var(--brand-dark)}
.navband-links a:focus-visible{outline:2px solid var(--logo-ink);outline-offset:-3px}
.navband-links a[aria-current="page"]{background:var(--brand-dark);
  box-shadow:inset 0 -3px 0 var(--logo-ink)}
/* The two non-category entries keep their glyphs. §9.3 — beside a 15px
   label the icon runs at least as large as the text. */
.navband-links a .ico{width:20px;height:20px;margin-right:var(--sp-1);flex:0 0 auto}
.navband-links a.is-sale{font-weight:800}

/* ── Main / tab-bar clearance ───────────────────────────────────── */
.main{min-height:60vh;
  padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + var(--sp-4))}
.main:focus{outline:none}


/* ── Mobile tab bar ─────────────────────────────────────────────── */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-sticky);
  display:flex;background:var(--surface);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom, 0px)}
.tabbar a,.tabbar button{flex:1 1 0;min-width:0;height:var(--tabbar-h);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-size:.75rem;font-weight:600;color:var(--ink-3)}
.tabbar .ico{width:26px;height:26px}          /* §9.3 */
.tabbar [aria-current="page"]{color:var(--brand-ink)}

/* ── WhatsApp FAB ───────────────────────────────────────────────── */
.wa-fab{position:fixed;z-index:var(--z-fab);
  right:calc(var(--sp-3) + env(safe-area-inset-right, 0px));
  bottom:calc(var(--tabbar-h) + var(--sp-3) + env(safe-area-inset-bottom, 0px));
  width:54px;height:54px;border-radius:var(--r-full);
  background:var(--whatsapp);color:var(--on-fill);box-shadow:var(--shadow-lg);
  display:flex;align-items:center;justify-content:center}
.wa-glyph{width:29px;height:29px;fill:currentColor;stroke:none}


/* ═══ ≥768 — tab bar retires, header goes single-row ════════════ */
@media (min-width:768px){
  .tabbar{display:none}
  .main{padding-bottom:var(--sp-10)}
  .hdr{position:sticky;top:0;z-index:var(--z-sticky)}
  .navband{display:block}
  .hdr-menu{display:none}          /* the band carries Categories here */
  .acct-btn,.cart-btn{display:flex}
  .wa-fab{bottom:calc(var(--sp-5) + env(safe-area-inset-bottom, 0px));
    right:calc(var(--sp-5) + env(safe-area-inset-right, 0px));width:58px;height:58px}
  /* One row, never two: flex-basis 0 lets the search absorb the slack
     instead of pushing itself onto a second line (it was doing that,
     making the header 126px instead of ~64px). */
  .hdr-bar{display:flex;align-items:center;gap:var(--sp-4);
    padding-block:var(--sp-2);flex-wrap:nowrap}
  .brand{margin-inline:0}
  .hdr-bar .brand{justify-self:auto}
  .brand-logo{height:38px}
  .hdr-search{order:0;flex:1 1 0;min-width:0;max-width:640px}
  .navband-in{padding-inline:0}
  .navband-links{gap:0}
  .navband-links a{padding-inline:var(--sp-3)}
  .acct-btn{margin-left:auto}
  .cart-btn{order:0;margin-left:0}
  /* Desktop has room for the whole promise, so nothing truncates. */
  .announce-slide>span{white-space:normal}
}