@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap');
/* ============================================================================
   wb-header.css — the SINGLE source of truth for the site header.
   Linked by every page (the Jinja templates AND the standalone admin ops pages),
   and the markup is built once by app._site_header(). Colours use
   var(--token, <literal fallback>) so this sheet styles the header correctly on
   pages that define the design tokens (market/catalog/retailer/bottle.css) AND
   on pages that don't (the admin ops pages, my_whiskey). Header-only: the footer
   (.wb-footer*) and the Buddy rail (html.bd-rail-on …) live elsewhere.
   ========================================================================== */
.wb-header{
  /* Pin the brand palette to the header so it's identical on every page —
     including the admin dashboards, whose page theme sets a different --accent
     (blue). Scoped custom properties inherit to all header descendants. */
  --accent:#a8692a; --accent-2:#c0792f; --accent-bg:#f6e9d2; --accent-line:#e4c89c;
  --gold:#e0a23e; --ink:#33241A; --ink-soft:#5b4a39; --line:#e8ddc9; --card:#fffdf9;
  --burnt:#b8531f;
  position:sticky;top:0;z-index:50;
  background:rgba(247,239,227,.86);backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line)}
/* Title bar: three zones — logo (start) · centred AU locale pill · right
   cluster (search + nav + CTA). minmax(0,1fr) side tracks stay equal so the
   pill is truly page-centred; the search box shrinks rather than shoving it. */
.wb-header-in{max-width:none;margin:0;padding:.4rem 1rem;
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;gap:1rem}
.wb-brand{justify-self:start;display:inline-flex;align-items:center;gap:.55rem;text-decoration:none}
.wb-header-right{justify-self:end;display:flex;align-items:center;gap:.5rem;
  min-width:0;width:100%;justify-content:flex-end}
.wb-brand:hover{text-decoration:none}
.wb-mark{width:30px;height:30px;border-radius:9px;display:block;
  box-shadow:0 1px 0 rgba(51,36,26,.04),0 2px 8px rgba(51,36,26,.10);
  border:1px solid var(--line,#e8ddc9)}
.wb-word{font-family:'Space Grotesk',var(--round,'Fredoka',ui-rounded,system-ui,sans-serif);
  font-weight:600;font-size:1.3rem;line-height:1;letter-spacing:-.035em;white-space:nowrap}
.wb-w{color:var(--ink,#33241A)}
.wb-b{background:linear-gradient(95deg,#e6b34d 0%,#e0954a 42%,#b8531f 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.wb-ai{font-weight:700;font-size:.4em;vertical-align:super;margin-left:.08em;letter-spacing:.04em;
  background:linear-gradient(95deg,#e6b34d 0%,#e0954a 42%,#b8531f 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 5px rgba(224,149,74,.45))}
.wb-word--onDark .wb-w{color:#fff}
.wb-flag{width:64px;height:auto;border-radius:5px;display:block;flex:none;
  transform:perspective(300px) rotateY(-14deg);transform-origin:left center;
  filter:drop-shadow(0 3px 8px rgba(51,36,26,.22))}
/* Centred AU locale pill — the deliberate Australian signal (replaces the small
   inline flag). Navy pill + framed flag + uppercase tagline. */
.wb-locale{justify-self:center;display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(177deg,#123163 0%,#0a2150 100%);
  border:1px solid rgba(255,255,255,.16);border-radius:999px;
  padding:7px 19px 7px 8px;white-space:nowrap;
  box-shadow:0 8px 22px rgba(8,24,60,.30),inset 0 1px 0 rgba(255,255,255,.16)}
/* flag + tagline group (wrapper lets the rail pages centre it over the content
   column independently of the banner width) */
.wb-locale-in{display:inline-flex;align-items:center;gap:12px}
/* ----------------------------------------------------------------------------
   Rail-page AU badge (EVERY page with the Buddy strip, not just the landing):
   the badge becomes a wide navy banner whose LEFT edge is bound to the rail's
   right edge and which fills to the Menu/CTA. Its flag+tagline are absolutely
   centred over the content column's centre — viewport-x (rail + 100vw)/2, i.e.
   (50vw - rail/2) into the banner, minus the flag+gap (27px) so the TEXT sits
   centred. References only the viewport + rail width (not the Menu/CTA), so it
   holds whether logged in or out and tracks the rail (--bd-rail-w). On the
   landing that centre coincides with the hero logo below.
   ---------------------------------------------------------------------------- */
@media (min-width:861px){
  html.bd-rail-on .wb-header-in{grid-template-columns:calc(var(--bd-rail-w, 312px) - 2rem) 1fr auto}
  html.bd-rail-on .wb-header .wb-locale{justify-self:stretch;width:auto;max-width:none;
    position:relative;min-height:35px}
  html.bd-rail-on .wb-header .wb-locale-in{position:absolute;top:50%;
    left:calc(50vw - var(--bd-rail-w, 312px) / 2 - 27px);transform:translate(-50%,-50%)}
}
/* below ~1180 the content centre sits too close to the Menu for the text to
   centre there without colliding, so hide the badge (wide-desktop element) */
@media (max-width:1180px){html.bd-rail-on .wb-header .wb-locale{display:none}}
.wb-locale-flag{display:block;width:42px;height:21px;border-radius:5px;
  box-shadow:0 1px 3px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.14)}
.wb-locale-txt{font-family:'Space Grotesk',var(--round,'Fredoka',ui-rounded,system-ui,sans-serif);
  font-weight:600;font-size:13.5px;letter-spacing:.16em;text-transform:uppercase;
  color:#eef2fb;white-space:nowrap}
.wb-nav{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap;
  font-family:'Space Grotesk',var(--round,'Fredoka',ui-rounded,system-ui,sans-serif);font-weight:500}
.wb-nav a{color:var(--ink-soft,#5b4a39);font-size:.96rem;padding:.4rem .7rem;border-radius:8px;
  text-decoration:none;transition:background .15s,color .15s}
.wb-nav a:hover{color:var(--accent,#a8692a);background:var(--accent-bg,#f6e9d2);text-decoration:none}
.wb-nav a.active{color:var(--accent,#a8692a);background:var(--accent-bg,#f6e9d2)}
/* Public nav: a single ☰ dropdown at EVERY width — one tidy menu holding the
   public links and, for admins, the ops links (folded in by app._site_header),
   so the user sees everything applicable to them in one list. There is no inline
   desktop link row; .wb-nav-links is the hidden inline copy from the markup.
   (History: the desktop row was briefly built by making the <details> itself
   display:contents to single-source the markup, but browsers don't reliably
   flatten display:contents on <details> — it collapsed the desktop nav into a
   hidden vertical stack. The single ☰ sidesteps that entirely.) */
.wb-nav-links{display:none}
.wb-menu{position:relative;display:inline-block}
.wb-menu-pop{display:none}
.wb-menu-btn{display:inline-flex;align-items:center;gap:10px;cursor:pointer;list-style:none;
  background:rgba(255,255,255,.6);border:1px solid rgba(184,83,31,.22);
  border-radius:11px;padding:9px 13px;box-shadow:0 2px 8px rgba(40,24,8,.06);
  transition:background .15s,border-color .15s}
.wb-menu-btn::-webkit-details-marker{display:none}
.wb-menu-burger{display:flex;flex-direction:column;gap:4px}
.wb-menu-burger span{width:18px;height:2px;border-radius:2px;background:var(--burnt,#b8531f)}
.wb-menu-burger span:nth-child(2){width:14px}
.wb-menu-label{font-family:'Space Grotesk',var(--round,'Fredoka',ui-rounded,system-ui,sans-serif);
  font-weight:600;font-size:13px;letter-spacing:.04em;color:var(--ink,#33241A)}
.wb-menu[open] .wb-menu-btn{background:var(--accent,#a8692a);border-color:var(--accent,#a8692a)}
.wb-menu[open] .wb-menu-burger span{background:#fff}
.wb-menu[open] .wb-menu-label{color:#fff}
.wb-menu[open] .wb-menu-pop{display:flex;flex-direction:column;gap:.1rem;
  position:absolute;top:calc(100% + .4rem);right:0;min-width:190px;
  background:var(--card,#fffdf9);border:1px solid var(--line,#e8ddc9);border-radius:12px;
  box-shadow:0 16px 38px rgba(51,36,26,.20);padding:.3rem;z-index:60}
.wb-menu-pop a{display:block}
@media (max-width:560px){
  .wb-word{font-size:1.25rem}
}
/* On the two search-bearing headers (catalog/market) the right cluster also
   holds the search box; below ~1100px the shrinking search crowds the centred
   pill, so drop the pill there only. Non-search headers keep it down to 860. */
@media (max-width:1100px){
  .wb-header-in:has(.wb-search) .wb-locale{display:none}
}

/* header Buddy entry + early-access pill (the "✦ Buddy" preview opener) */
.wb-nav-buddy{display:inline-flex;align-items:center;gap:.3rem;
  font-family:'Space Grotesk',var(--round,'Fredoka',ui-rounded,system-ui,sans-serif);font-weight:600;
  color:#fff !important;background:linear-gradient(135deg,var(--accent,#a8692a),var(--gold,#e0a23e));
  padding:.42rem .8rem !important;border-radius:999px !important;margin-left:.2rem;text-decoration:none}
.wb-nav-buddy:hover{filter:brightness(1.05);text-decoration:none}
.wb-nav-buddy .bd-spark{font-size:.85em;opacity:.9}
.wb-cta-access{display:inline-flex;align-items:center;
  font-family:'Space Grotesk',var(--round,'Fredoka',ui-rounded,system-ui,sans-serif);font-weight:600;font-size:.92rem;
  color:var(--accent,#a8692a) !important;border:1px solid var(--accent-line,#e4c89c);border-radius:999px;
  padding:.4rem .85rem !important;margin-left:.5rem;white-space:nowrap;text-decoration:none}
.wb-cta-access:hover{background:var(--accent-bg,#f6e9d2);text-decoration:none}
@media (max-width:760px){.wb-cta-access{display:none}}

/* Admin dropdown styling — kept for reference, but the standalone pill is now
   hidden at every width: admin ops links are folded into the single ☰ menu
   instead (see .wb-menu-admin + app._site_header). Role-gated in the markup. */
.wb-admin-menu{display:none}
.wb-admin-link{display:inline-block;cursor:pointer;list-style:none;
  color:var(--accent,#a8692a);border:1px solid var(--accent-line,#e4c89c);background:var(--accent-bg,#f6e9d2);
  font-weight:600;font-size:.96rem;padding:.4rem .7rem;border-radius:8px;
  transition:background .15s,color .15s}
.wb-admin-link::-webkit-details-marker{display:none}
.wb-admin-link::after{content:"▾";margin-left:.35rem;font-size:.8em}
.wb-admin-menu[open] .wb-admin-link,.wb-admin-link:hover{background:var(--accent,#a8692a);color:#fff;border-color:var(--accent,#a8692a)}
.wb-admin-pop{position:absolute;top:calc(100% + .4rem);right:0;min-width:180px;
  background:var(--card,#fffdf9);border:1px solid var(--line,#e8ddc9);border-radius:12px;
  box-shadow:0 16px 38px rgba(51,36,26,.20);padding:.3rem;z-index:60;
  display:flex;flex-direction:column;gap:.1rem}
.wb-admin-pop a{display:block;padding:.5rem .7rem;border-radius:8px;
  color:var(--ink,#33241A);font-size:.92rem;text-decoration:none;white-space:nowrap}
.wb-admin-pop a:hover{background:var(--accent-bg,#f6e9d2);color:var(--accent,#a8692a);text-decoration:none}
/* Admin ops links folded into the single ☰ menu (markup: app._site_header):
   hidden until the menu is open, then shown under a divider beneath the public
   links — at every width, so admins get one combined list. */
.wb-menu-admin{display:none}
.wb-menu[open] .wb-menu-admin{display:block;
  border-top:1px solid var(--line,#e8ddc9);margin-top:.25rem;padding-top:.25rem}

/* ============================================================================
   Price-alert bell (ROADMAP #18) — logged-in only. Light card dropdown matching
   .wb-menu-pop / .wb-admin-pop; the badge is a small burnt-orange count. The
   bell + list are populated by static/js/wb-alerts.js (GET /v2/api/me/alerts).
   ========================================================================== */
.wb-bell{position:relative;display:inline-flex}
.wb-bell-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;padding:0;line-height:0;border-radius:9px;cursor:pointer;
  background:transparent;border:1px solid var(--line,#e8ddc9);color:var(--ink-soft,#5b4a39);
  transition:background .15s,color .15s}
.wb-bell-btn:hover{color:var(--accent,#a8692a);background:var(--accent-bg,#f6e9d2)}
.wb-bell-ico{display:block}
.wb-bell-badge{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;
  border-radius:9px;background:var(--burnt,#b8531f);color:#fff;
  font:600 11px/17px 'Space Grotesk',ui-rounded,system-ui,sans-serif;text-align:center;
  box-shadow:0 0 0 2px var(--card,#fffdf9)}
.wb-bell-pop{position:absolute;top:calc(100% + 8px);right:0;width:min(340px,92vw);
  max-height:min(440px,70vh);overflow-y:auto;z-index:1200;padding:.5rem;
  background:var(--card,#fffdf9);border:1px solid var(--line,#e8ddc9);border-radius:12px;
  box-shadow:0 16px 38px rgba(51,36,26,.20)}
.wb-bell-head{padding:.35rem .5rem .5rem;margin-bottom:.35rem;
  border-bottom:1px solid var(--line,#e8ddc9);color:var(--ink,#33241A);
  font:600 .95rem 'Space Grotesk',ui-rounded,system-ui,sans-serif}
.wb-bell-empty{padding:.6rem .5rem;line-height:1.45;color:var(--ink-soft,#5b4a39);font-size:.88rem}
.wb-bell-item{padding:.5rem;border-radius:9px}
.wb-bell-item+.wb-bell-item{margin-top:.15rem;border-top:1px solid var(--line,#f0e7d6)}
.wb-bell-item.is-unread{background:var(--accent-bg,#f6e9d2)}
.wb-bell-name{color:var(--ink,#33241A);font:600 .92rem 'Space Grotesk',ui-rounded,system-ui,sans-serif}
.wb-bell-meta{margin-top:.15rem;color:var(--ink-soft,#5b4a39);font-size:.84rem}
.wb-bell-foot{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin-top:.3rem}
.wb-bell-link{color:var(--accent,#a8692a);font-size:.82rem;font-weight:600;text-decoration:none}
.wb-bell-link:hover{text-decoration:underline}
.wb-bell-when{white-space:nowrap;color:var(--ink-soft,#8c7a62);font-size:.78rem}

/* ============================================================================
   Header slim-down (<=860px). This matches the Buddy rail's bottom-bar breakpoint
   (wb-buddy.css @860): below it the rail re-shows the header search + ✦ Buddy
   pill, so brand + AU flag + search + Buddy pill + ☰ + Admin pill no longer fit
   one row and the right-side pills stack into a tall column (~128px). Collapse to
   a single ~56px row: drop the decorative flag and the header Buddy pill (Buddy
   lives in the bottom Buddy bar at this size), and fold the Admin links into the
   ☰ menu so the standalone Admin pill no longer overflows. The search box is kept.
   ========================================================================== */
@media (max-width:860px){
  /* decorative flag — wider screens keep it */
  .wb-header .wb-flag{display:none}
  /* the centred locale pill drops here too (like the flag): the compact mobile
     header reverts to a single flex row, brand left + controls right */
  .wb-header .wb-locale{display:none}
  /* header Buddy pill is redundant here (bottom Buddy bar covers it); the
     rail forces it visible (wb-buddy.css), so out-specify that here */
  html.bd-rail-on .wb-header .wb-nav-buddy,.wb-nav-buddy{display:none}
  /* one row, no wrapping — out of the 3-zone desktop grid */
  .wb-header-in{display:flex;flex-wrap:nowrap;gap:.5rem;justify-content:space-between}
  .wb-header-right{width:auto;flex:1 1 auto}
  .wb-nav{flex-wrap:nowrap}
}