/* ============================================================
   Wandering Casks — cream-first re-engineered build
   Master Brand & Site Framework V2 · single file · real URLs
   Pages: Home · Discover · Bottle Detail · Guide · Cocktails ·
          Regions · My Bar · Log In · Sign Up
   ============================================================
   Locked visual system (Step 3 — DECIDED):
   Theme     cream-first #F7F2EA (never dark-first)
   Near-black #1A1A1A — nav bar text, footer, primary buttons/text
   Accent    terracotta #C1531F — CTAs, active filters, badges,
             link hovers ONLY. Never a full background.
   Headlines Fraunces 700 (wordmark, H1/H2)
   Body/UI   DM Sans
   Bottle & distillery names: DM Sans (NOT Fraunces) — avoids
   font-mimicry/trademark risk when showing third-party names.
   ============================================================ */
:root {
  --cream: #f7f2ea;         /* page background */
  --card: #ffffff;          /* cards */
  --card-line: #e3dccc;     /* card borders */
  --ink: #1a1a1a;           /* near-black text */
  --sub: #555555;           /* secondary text */
  --faint: #888888;         /* tertiary text */
  --terracotta: #c1531f;    /* accent — never a full background */
  --link: #a5672f;
  --link-hover: #7d4e22;
  --rust: #a5432b;          /* tagline / tier badge text */
  --avail-bg: #f0e6da;      /* availability badge */
  --avail-tx: #8a5a17;
  --tier-bg: #f3e2de;       /* discovery tier badge */
  --tier-tx: #a5432b;
  --flex-bg: #e6e0d3;       /* "flexible" cocktail badge */
  --flex-tx: #5a5340;
  --ok: #4d7a52;
  --err: #b3432e;
  --radius: 12px;
  --wrap: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }

body { overflow-x: hidden; margin: 0; background: var(--cream); color: var(--ink);
  font-family: 'DM Sans', sans-serif; font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: 'Fraunces', serif; color: var(--ink); margin: 0; }
h1 { font-size: 34px; font-weight: 700; line-height: 1.15; }
h2 { font-size: 22px; font-weight: 700; }
h3 { font-size: 17px; font-weight: 700; }
p { margin: 0; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible {
  outline: 2px solid var(--terracotta); outline-offset: 2px; border-radius: 4px;
}
img { max-width: 100%; display: block; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 32px; }
@media (max-width: 640px) { .wrap { padding: 0 18px; } }
.hidden { display: none !important; }
.muted { color: var(--faint); }
.sub { color: var(--sub); }

/* ---------- header / nav ---------- */
header.site {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
  /* dark bar matching the footer, bleeding to the viewport edges */
  background: var(--ink);
  margin: 0 calc(50% - 50vw) 10px;
  padding: 18px calc(50vw - 50%);
}
.brand { display: flex; flex-direction: column; }
.brand a.mark { display: flex; align-items: center; gap: 10px; color: var(--cream); }
/* Wordmark set to match the Wandering Casks logo lockup: heavy Fraunces,
   all caps, generous letterspacing. No droplet, no tagline. */
.brand .wordmark {
  font-family: 'Fraunces', serif; font-weight: 700; font-size: 21px;
  text-transform: uppercase; letter-spacing: .10em; white-space: nowrap;
}
nav.main { display: flex; gap: 26px; align-items: center; font: 600 13px 'DM Sans'; flex-wrap: wrap; }
nav.main a { color: #cfc8ba; padding-bottom: 3px; border-bottom: 2px solid transparent; }
nav.main a:hover { color: var(--cream); }
nav.main a.active { color: var(--cream); border-bottom-color: var(--terracotta); }
nav.main .auth-links { display: flex; gap: 10px; margin-left: 6px; }
/* Auth buttons inside the nav: terracotta to match the tagline; full borders (not the link underline) */
nav.main .auth-links a.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 14px; line-height: 1.2; white-space: nowrap;
  background: var(--terracotta); color: var(--cream);
  border: 1px solid var(--terracotta); border-radius: 8px;
}
nav.main .auth-links a.btn:hover { color: var(--cream); background: #a5451a; border-color: #a5451a; }
nav.main .auth-links a.btn.ghost { background: transparent; color: var(--terracotta); border-color: var(--terracotta); }
nav.main .auth-links a.btn.ghost:hover { color: #e9b28e; background: rgba(193,83,31,.14); border-color: #e9b28e; }
nav.main .link-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 14px; line-height: 1.2; white-space: nowrap;
  background: transparent; color: var(--terracotta);
  border: 1px solid var(--terracotta); border-radius: 8px;
  font: 700 13px 'DM Sans'; cursor: pointer;
}
nav.main .link-btn:hover { color: #e9b28e; background: rgba(193,83,31,.14); border-color: #e9b28e; }
/* My Bar dropdown (desktop) */
.nav-dd { position: relative; display: inline-flex; align-items: center; }
.nav-dd .nav-dd-parent { display: inline-flex; align-items: center; gap: 4px; }
.nav-dd .nav-dd-caret { transition: transform .16s ease; opacity: .8; }
.nav-dd:hover .nav-dd-caret, .nav-dd:focus-within .nav-dd-caret { transform: rotate(180deg); }
.nav-dd .nav-dd-menu {
  position: absolute; top: calc(100% + 8px); left: -12px; z-index: 330;
  min-width: 168px; display: none; flex-direction: column; padding: 6px;
  background: var(--card); border: 1px solid var(--card-line); border-radius: 12px;
  box-shadow: 0 12px 34px rgba(26,26,26,.20);
}
.nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu { display: flex; }
.nav-dd .nav-dd-menu::before { content: ""; position: absolute; top: -8px; left: 0; right: 0; height: 8px; }
.nav-dd .nav-dd-menu a {
  color: var(--ink); border-bottom: none; border-radius: 8px; padding: 9px 12px;
  font: 600 13px 'DM Sans'; white-space: nowrap;
}
.nav-dd .nav-dd-menu a:hover { background: #f2ece0; color: var(--ink); }
.nav-dd .nav-dd-menu a.active { color: var(--terracotta); background: #f7f0e6; }

/* ---------- mobile nav (hamburger) ---------- */
.nav-toggle { display: none; }
.mobile-menu { display: none; }
@media (max-width: 860px) {
  nav.main { display: none; }
  /* Mobile browser / installed PWA: the whole dark bar sticks to the top,
     instead of just a lone floating hamburger. Its black also fills the
     status-bar (notch) safe area, so the very top of the screen reads black
     up by the clock and battery. */
  header.site {
    position: -webkit-sticky; position: sticky; top: 0; z-index: 250;
    padding-top: calc(16px + env(safe-area-inset-top, 0px));
    padding-bottom: 16px;
    padding-right: calc(50vw - 50%);
    margin-bottom: 12px;
  }
  /* Hamburger now rides inside the sticky bar rather than floating free. */
  .nav-toggle {
    display: flex; position: static; z-index: auto;
    width: 40px; height: 40px; align-items: center; justify-content: center;
    background: transparent; color: var(--cream); border: 0;
    border-radius: 10px; cursor: pointer; box-shadow: none;
    margin: -8px -6px -8px 0;
  }
  .nav-toggle svg { display: block; width: 20px; height: 20px; }
  .mobile-menu { position: fixed; inset: 0; z-index: 210; }
  .mobile-menu[hidden] { display: none; }
  body.menu-open .mobile-menu { display: block; }
  body.menu-open { overflow: hidden; }
  .mobile-menu .scrim { position: absolute; inset: 0; background: rgba(26,26,26,.45); }
  .mobile-menu .panel {
    position: absolute; top: 0; right: 0; height: 100%; width: min(320px, 84vw);
    background: var(--cream); border-left: 1px solid var(--card-line);
    padding: 78px 26px 26px; display: flex; flex-direction: column; overflow: auto;
  }
  .mobile-menu .mhead { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
  .mobile-menu .mhead .wordmark { font: 700 17px 'Fraunces'; color: var(--ink); text-transform: uppercase; letter-spacing: .10em; }
  .mobile-menu a.mlink {
    font: 600 16px 'DM Sans'; color: var(--ink);
    padding: 13px 2px; border-bottom: 1px solid var(--card-line);
  }
  .mobile-menu a.mlink.active { color: var(--terracotta); }
  .mobile-menu a.mlink.mlink-sub { padding-left: 18px; font-size: 15px; color: var(--sub); }
  .mobile-menu a.mlink.mlink-sub::before { content: "\21b3"; margin-right: 8px; color: var(--faint); }
  .mobile-menu .mauth { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
  .mobile-menu .mauth .btn { text-align: center; }
  /* The drawer sits behind the persistent sticky bar; its own wordmark is now
     redundant with the bar above it, and its top padding clears that bar. */
  .mobile-menu .mhead { display: none; }
  .mobile-menu .panel {
    padding-top: calc(66px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(26px + env(safe-area-inset-bottom, 0px));
  }
  /* Paint the home-indicator safe area at the very bottom black to match the
     bar up top. Zero-height (invisible) on devices without a bottom inset. */
  body::after {
    content: ""; position: fixed; left: 0; right: 0; bottom: 0;
    height: env(safe-area-inset-bottom, 0px);
    background: transparent; z-index: 240; pointer-events: none;
  }
  /* Keep the footer's legal text clear of that black bottom strip. */
  footer.site { padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
}
.btn {
  display: inline-block; background: var(--ink); color: var(--cream);
  font: 700 13px 'DM Sans'; padding: 12px 20px; border-radius: 8px;
  border: 1px solid var(--ink); cursor: pointer;
  /* keep <a> and <button> buttons identical in height everywhere */
  box-sizing: border-box; line-height: 1.25; vertical-align: middle;
  text-align: center; text-decoration: none; -webkit-appearance: none; appearance: none;
}
.btn:hover { background: #000; color: var(--cream); }
.btn.ghost { background: transparent; color: var(--ink); }
/* Site search (header + mobile menu) */
.wc-search { position: relative; }
nav.main .wc-search input { width: 170px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22);
  color: var(--cream); border-radius: 18px; padding: 7px 13px; font: 500 13px 'DM Sans'; transition: width .18s ease; }
nav.main .wc-search input::placeholder { color: rgba(247,242,234,.55); }
nav.main .wc-search input:focus { width: 230px; outline: 2px solid var(--terracotta); background: rgba(255,255,255,.12); }
.mobile-menu .wc-search { margin: 4px 0 10px; }
.mobile-menu .wc-search input { width: 100%; background: #fff; border: 1px solid var(--card-line); color: var(--ink);
  border-radius: 10px; padding: 11px 13px; font: 500 15px 'DM Sans'; }
.wc-search-results { position: absolute; top: calc(100% + 6px); right: 0; min-width: 290px; max-width: 92vw; z-index: 320;
  background: #fff; border: 1px solid var(--card-line); border-radius: 12px; box-shadow: 0 12px 34px rgba(26,26,26,.18); overflow: hidden; }
.mobile-menu .wc-search-results { position: static; margin-top: 8px; box-shadow: none; }
/* Specificity note: this dropdown lives inside <nav class="main">, which has
   its own "nav.main a { color: #cfc8ba; }" rule for the pale top-bar links.
   That rule (0,1,2) outranks a plain ".wc-search-results a" (0,1,1), so the
   result names were inheriting the washed-out header color (and the bold name,
   having no color of its own, washed out worst). Qualifying with ".wc-search"
   lifts these above it — the same fix already applied to the alert popup — so
   the text reads dark like the bell-alert rows regardless of where it nests. */
.wc-search .wc-search-results a { display: flex; gap: 10px; align-items: center; padding: 10px 13px; color: var(--ink);
  border-bottom: 1px solid var(--card-line); font: 500 14px 'DM Sans'; }
.wc-search .wc-search-results a:last-child { border-bottom: none; }
.wc-search .wc-search-results a:hover, .wc-search .wc-search-results a:focus { background: #f7f2ea; }
.wc-search .wc-search-results a b { color: var(--ink); }
.wc-search .wc-search-results a small { display: block; color: #777; font-size: 12px; line-height: 1.35; }
.wc-sr-kind { flex-shrink: 0; font: 700 10px 'DM Sans'; letter-spacing: .06em; text-transform: uppercase;
  color: var(--terracotta); border: 1px solid var(--card-line); border-radius: 999px; padding: 3px 8px; background: #f7f2ea; }

/* ---- Search icon in the header + full-width search bar under it ----
   The field is intentionally NOT in nav.main: that nav wraps to a second row
   once there are enough links, which used to push the search field (and the
   page) down a line. The header now carries just this compact icon (mirroring
   the alert-bell button), and the field lives in the full-width bar below. */
.wc-search-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; border-radius: 999px; cursor: pointer;
  background: none; border: none; color: #c1531f;
  -webkit-appearance: none; appearance: none;
  transition: color .15s ease, background .15s ease; }
.wc-search-toggle:hover, .wc-search-toggle:focus-visible { color: var(--cream); background: rgba(255,255,255,.1); }
.wc-search-toggle svg { display: block; }

#wc-searchbar-host:empty { display: none; }
.wc-searchbar { margin: 2px 0 20px; }
.wc-searchbar[hidden] { display: none; }
.wc-searchbar-inner {
  position: relative; display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--card-line); border-radius: 16px;
  padding: 15px 18px; box-shadow: 0 10px 30px rgba(26,26,26,.08); }
.wc-searchbar-inner .wc-searchbar-icon { flex-shrink: 0; width: 21px; height: 21px; color: #8a8175; }
.wc-searchbar-inner input {
  flex: 1 1 auto; min-width: 0; border: none; outline: none; background: transparent;
  font: 500 17px 'DM Sans'; color: var(--ink); padding: 0; }
.wc-searchbar-inner input::placeholder { color: #9a9182; }
.wc-searchbar-inner input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.wc-searchbar-hint { flex-shrink: 0; color: #9a9182; font: 500 13px 'DM Sans'; white-space: nowrap; }
.wc-searchbar-hint kbd {
  display: inline-block; min-width: 16px; text-align: center; padding: 1px 6px; margin: 0 1px;
  font: 600 12px 'DM Sans'; color: #6f6656; background: #f2ece0; border: 1px solid var(--card-line);
  border-radius: 6px; box-shadow: 0 1px 0 var(--card-line); }
.wc-searchbar-clear {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border: none; background: none; cursor: pointer;
  color: #9a9182; border-radius: 999px; -webkit-appearance: none; appearance: none; }
.wc-searchbar-clear:hover { color: var(--ink); background: #f2ece0; }
/* Full-width results dropdown — overrides the compact nav dropdown’s right-aligned,
   min-width positioning so it spans the whole bar. */
.wc-searchbar .wc-search-results {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; width: auto; min-width: 0; max-width: none; }
@media (max-width: 560px){ .wc-searchbar-hint { display: none; } }

/* Alert bell (header + mobile menu) — reactions received + new followers */
.wc-alerts { position: relative; display: inline-flex; align-items: center; margin: 0 2px; }
.wc-alerts-btn { position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; background: none; border: none; border-radius: 999px;
  color: #c1531f; cursor: pointer; -webkit-appearance: none; appearance: none; }
.wc-alerts-btn:hover, .wc-alerts-btn:focus-visible { color: var(--cream); background: rgba(255,255,255,.1); }
.wc-alerts-pill { position: absolute; top: 1px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center; border-radius: 999px;
  background: var(--terracotta); color: #fff; font: 700 10px 'DM Sans'; line-height: 1; box-shadow: 0 0 0 2px var(--ink); }
.wc-alerts-panel { position: absolute; top: calc(100% + 6px); right: 0; width: 320px; max-width: 92vw; z-index: 320;
  background: #fff; border: 1px solid var(--card-line); border-radius: 12px; box-shadow: 0 12px 34px rgba(26,26,26,.18); overflow: hidden; }
.wc-alerts-head { padding: 12px 14px; font: 700 13px 'DM Sans'; color: var(--ink); border-bottom: 1px solid var(--card-line); }
.wc-alerts-list { max-height: 340px; overflow-y: auto; }
/* Specificity note: the alert popup lives inside <nav class="main">, and
   that nav already has its own "nav.main a { color: #cfc8ba; }" rule for
   the top-level links (pale, meant to sit on the dark header bar). That
   rule outranks a plain ".wc-alert-item" selector, which is why this text
   was washing out even outside of :hover. Qualifying with ".wc-alerts-list"
   pushes this above it regardless of where the popup happens to be nested. */
.wc-alerts-list .wc-alert-item { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; color: var(--ink);
  border-bottom: 1px solid var(--card-line); font: 500 13.5px 'DM Sans'; }
.wc-alerts-list .wc-alert-item:last-child { border-bottom: none; }
.wc-alerts-list .wc-alert-item:hover { background: #f7f2ea; }
.wc-alerts-list .wc-alert-text { margin: 0; color: var(--ink); }
.wc-alerts-list .wc-alert-item b { color: var(--ink); }
.wc-alerts-list .wc-alert-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.wc-alerts-list .wc-alert-item small { color: #999; font-size: 12px; }
.wc-alerts-list .wc-alert-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.wc-alert-action { font: 700 12px 'DM Sans'; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--terracotta); background: var(--terracotta); color: #fff; -webkit-appearance: none; appearance: none; }
.wc-alert-action:hover { background: #a5451a; border-color: #a5451a; }
.wc-alert-action.ghost { background: transparent; color: var(--ink); border-color: var(--card-line); }
.wc-alert-action.ghost:hover { background: #f7f2ea; border-color: #cfc3af; }
.wc-alert-empty { margin: 0; padding: 16px 14px; font: 500 13px 'DM Sans'; color: #7a725f; }
.mobile-menu .wc-alerts { display: flex; width: 100%; margin: 4px 0; }
.mobile-menu .wc-alerts-btn { width: auto; height: auto; justify-content: flex-start; gap: 8px; padding: 10px 2px;
  color: var(--ink); border-radius: 0; }
.mobile-menu .wc-alerts-btn::before { content: "Alerts"; order: 2; font: 600 14px 'DM Sans'; }
.mobile-menu .wc-alerts-btn svg { order: 1; }
.mobile-menu .wc-alerts-pill { position: static; order: 3; margin-left: 2px; }

/* Mobile "Alerts" pop-up (openAlertsModal()) — same card family as the
   review/report pop-ups (.rev-modal-overlay/.rev-modal), just with the
   alert list's own padding replacing the modal's default padding so
   rows can run edge-to-edge with dividers, like the desktop dropdown. */
.wc-alerts-modal { padding: 18px 0 6px; max-width: 420px; }
.wc-alerts-modal > div:first-child { padding: 0 18px 14px; }
.wc-alerts-modal-list { max-height: 68vh; overflow-y: auto; }

.btn.aidan { background: var(--terracotta); color: var(--cream); border-color: var(--terracotta); }
.btn.aidan:hover { background: #a5451a; border-color: #a5451a; color: var(--cream); }
.btn.gift-cta { background: var(--terracotta); color: var(--cream); border-color: var(--terracotta); }
.btn.gift-cta:hover { background: #a5451a; border-color: #a5451a; color: var(--cream); }
.btn.ghost:hover { background: rgba(26,26,26,.06); color: var(--ink); }
.btn.sm { padding: 8px 14px; font-size: 12.5px; }
.btn.full { width: 100%; text-align: center; }
.link-btn { background: none; border: none; padding: 0; font: 700 12.5px 'DM Sans'; color: var(--link); cursor: pointer; }
.link-btn:hover { color: var(--link-hover); }

/* ---------- pills, badges, cards ---------- */
.pill {
  border: 1px solid var(--card-line); background: var(--card); border-radius: 20px;
  padding: 8px 16px; font: 600 12.5px 'DM Sans'; color: var(--ink); cursor: pointer;
}
.pill:hover, .pill:focus, .pill:active { border-color: var(--terracotta); color: var(--ink); }
.pill-active, .pill-active:hover, .pill-active:focus, .pill-active:active {
  background: var(--ink); color: var(--cream); border-color: var(--ink); }
.pill-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }

/* ---------- Cocktails filter bar (type pills / mobile dropdown + flexible toggle) ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ck-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 28px; }
.ck-filter .pill-row { margin-bottom: 0; }
.ck-type-select-wrap { display: none; }               /* dropdown is mobile-only */
.ck-type-select {
  font: 600 13px 'DM Sans'; color: var(--ink); background: var(--card);
  border: 1px solid var(--card-line); border-radius: 12px;
  padding: 10px 34px 10px 14px; width: 100%; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.ck-type-select:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 2px; }
/* Additive "flexible classics" toggle — accent (terracotta) when on, to read
   as a modifier distinct from the ink-filled single-select type pills. */
.ck-flex-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--card-line); background: var(--card); border-radius: 20px;
  padding: 7px 14px 7px 11px; font: 600 12.5px 'DM Sans'; color: var(--ink);
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.ck-flex-toggle:hover, .ck-flex-toggle:focus-visible { border-color: var(--terracotta); }
.ck-flex-toggle .ck-box {
  width: 17px; height: 17px; border-radius: 5px; flex: none;
  border: 1.5px solid var(--card-line); background: var(--card);
  display: inline-flex; align-items: center; justify-content: center; color: transparent;
}
.ck-flex-toggle.on { background: var(--terracotta); border-color: var(--terracotta); color: #fff; }
.ck-flex-toggle.on .ck-box { background: #fff; border-color: #fff; color: var(--terracotta); }
.ck-flex-toggle.is-disabled { opacity: .45; pointer-events: none; }
@media (max-width: 640px) {
  .ck-filter { flex-direction: column; align-items: stretch; gap: 12px; }
  .ck-type-pills { display: none; }                   /* hide pills, show dropdown */
  .ck-type-select-wrap { display: block; }
  .ck-flex-toggle { justify-content: center; }
}
.badge {
  display: inline-block; font: 700 10.5px 'DM Sans'; padding: 3px 9px;
  border-radius: 20px; letter-spacing: .02em;
}
.badge-avail { background: var(--avail-bg); color: var(--avail-tx); }
.badge-tier  { background: var(--tier-bg);  color: var(--tier-tx); }
.badge-flex  { background: var(--flex-bg);  color: var(--flex-tx); }
.card {
  background: var(--card); border: 1px solid var(--card-line); border-radius: var(--radius);
  padding: 18px; display: flex; flex-direction: column; gap: 10px;
}
/* ---- My Bar shelf cards: personal rating + tasting note prompts ---- */
.shelf-card-rating, .shelf-card-note { display: flex; align-items: center; }
.shelf-card-rating .shelf-rate-btn, .shelf-card-note .shelf-note-btn { text-align: left; }
.shelf-rate-edit { font-weight: 500; color: var(--faint); margin-left: 4px; text-transform: none; letter-spacing: 0; }
.shelf-note-text { font-weight: 500; font-style: italic; color: var(--ink); white-space: normal; }

/* ---- Settings section (My Bar page, below Wishlist) ---- */
.mybar-settings-section { margin-top: 12px; }

/* ---- "Only your top 15 show on your public profile" note ---- */
.mybar-shelf-note { font-size: 13.5px; color: var(--sub); margin: 6px 0 0; max-width: 640px; }
.mybar-shelf-note a { font-weight: 600; }

/* ---- On my shelf cards: drag/tap-to-rank + shelf-position badge ---- */
.mybar-shelf-card { position: relative; }
.mybar-shelf-card[draggable="true"] { cursor: grab; }
.mybar-shelf-card[draggable="true"]:active { cursor: grabbing; }
.mybar-shelf-card.mb2-dragging { opacity: .4; }
.mybar-rank-badge {
  position: absolute; bottom: 14px; right: 14px; z-index: 2;
  font: 700 11px 'DM Sans'; background: var(--terracotta); color: #fff;
  min-width: 24px; height: 22px; padding: 0 6px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.mybar-rank-badge.off-shelf { background: var(--card-line); color: var(--faint); }
.mybar-move-mini { display: flex; gap: 6px; }
.mybar-mv {
  width: 30px; height: 26px; border: 1px solid var(--card-line);
  background: var(--cream); color: var(--ink); border-radius: 6px;
  font: 700 11px/1 'DM Sans'; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.mybar-mv:disabled { opacity: .3; cursor: default; }
.mybar-mv:active { background: var(--terracotta); color: #fff; border-color: var(--terracotta); }

/* ---- Stats strip ---- */
.mybar-stats {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font: 500 14px 'DM Sans'; color: var(--sub); margin: 14px 0 0;
}
.mybar-stats b { color: var(--ink); font-weight: 700; }
.mybar-stats span[aria-hidden] { color: var(--card-line); }

/* ---- Top Shelf: one featured, manually-picked bottle above the grid.
   Split panel — moody photo + scrim on the left, editorial info on the
   right. Fixed height keeps the tile's footprint the same regardless of
   name/note length, so it never grows the page. ---- */
.top-shelf-card2 {
  display: flex; align-items: stretch; overflow: hidden;
  border: 1px solid var(--card-line); border-radius: var(--radius);
  margin: 20px 0 24px; height: 176px; background: var(--card);
  box-shadow: 0 1px 2px rgba(26,20,12,.06);
}
.ts-photo {
  flex: 0 0 34%; position: relative; min-width: 0;
  background-color: #241a10; background-size: cover; background-position: center;
}
.ts-photo-scrim {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 14px; text-align: left;
  background: linear-gradient(115deg, rgba(20,13,7,.85) 25%, rgba(20,13,7,.4) 65%, rgba(20,13,7,.05) 100%);
}
.ts-eyebrow-pill {
  display: inline-flex; align-items: center; background: var(--terracotta); color: #fff;
  font: 700 10.5px 'DM Sans'; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px; flex: none;
}
.ts-featured-label { color: #fff; font: 600 12.5px 'DM Sans'; }
.ts-star {
  margin-top: auto; width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.65); color: #fff; font-size: 13px;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.ts-info {
  flex: 1; min-width: 0; padding: 16px 22px; display: flex; flex-direction: column;
  justify-content: center; gap: 6px;
}
.ts-meta-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ts-cat-pill {
  display: inline-flex; background: var(--terracotta); color: #fff;
  font: 700 10.5px 'DM Sans'; letter-spacing: .05em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; flex: none;
}
.ts-region { font: 700 11.5px 'DM Sans'; letter-spacing: .04em; text-transform: uppercase; color: var(--rust); }
.ts-name {
  font-family: 'Fraunces', serif; font-weight: 700; color: var(--ink); line-height: 1.15;
  font-size: clamp(18px, 2vw, 24px); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ts-flavor {
  font-family: 'Fraunces', serif; font-style: italic; font-size: 14.5px; color: var(--link);
  margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ts-actions { display: flex; align-items: center; gap: 14px; margin-top: 4px; flex-wrap: wrap; }
.ts-actions .shelf-note-btn { font-size: 12.5px; }
.ts-view-btn { background: var(--terracotta); border-color: var(--terracotta); }
.ts-view-btn:hover { background: var(--rust); border-color: var(--rust); }
.ts-divider { width: 1px; height: 15px; background: var(--card-line); flex: none; }
.top-shelf-empty2 .ts-info { padding: 18px 22px; }
@media (max-width: 640px) {
  .top-shelf-card2 { flex-direction: column; height: auto; }
  .ts-photo { flex: none; height: 130px; }
  .ts-info { padding: 14px 16px 18px; }
  .ts-name { -webkit-line-clamp: 3; }
}
.grid { display: grid; gap: 18px; }
.grid.bottles  { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.grid.cocktails{ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.grid.next     { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.cat-eyebrow { font: 700 10.5px 'DM Sans'; letter-spacing: .05em; text-transform: uppercase; color: var(--link); }
/* Bottle & distillery names — DM Sans per brand framework (legal) */
.bottle-name { font: 700 17px 'DM Sans'; color: var(--ink); line-height: 1.25; }
.learn { font: 700 12px 'DM Sans'; color: var(--rust); }
.learn:hover { color: var(--terracotta); }
/* "See all …" on family cards: solid rust pill (matches the card's left edge) with white text */
.learn-pill {
  align-self: flex-start;              /* pill hugs its text instead of stretching full width */
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--rust); color: #fff;
  padding: 7px 14px; border-radius: 999px;
  transition: background .15s ease;
}
.learn-pill:hover { background: var(--terracotta); color: #fff; }

/* Family collection cards use their category accent while keeping white text. */
.flagship-tile .learn-pill { background: var(--family-color, var(--rust)); color: #fff; }
.flagship-tile .learn-pill:hover { background: var(--family-color, var(--rust)); color: #fff; filter: brightness(.92); }
/* Equal-height card rows: names, sub-text, pills, and links line up across a row */
.grid.bottles .learn, .grid.cocktails .cactions { margin-top: auto; }
/* ---------- quick "add to My Bar" on bottle tiles (Discover & Regions) ---------- */
.bottle-tile { position: relative; }
/* Family / flagship cards sit a couple shades darker so they read as
   entry points into a brand, not just another bottle in the grid. */
/* ---- Family collection cards ----
   Reads as a STACK of bottles, not a single one. The layered look is drawn
   with box-shadows (which add no layout height), and a small margin-bottom
   reserves room so the stack's bottom edge lines up with the bottle tiles in
   the same row — the cards stay exactly the same height. */
.bottle-tile.flagship-tile {
  background: #fcf8f1; border-color: #e6ddca;
  border-left: 3px solid var(--family-color, var(--rust));
  margin-bottom: 8px;
  box-shadow:
    3px 3px 0 0 #f6efe2, 3px 3px 0 1px #e7dfcb,
    6px 6px 0 0 #f1e8d6, 6px 6px 0 1px #e7dfcb;
}
/* Top banner that labels the card as a family + shows the family size */
.family-banner {
  margin: -18px -18px 2px;
  padding: 8px 14px 8px 12px;
  background: #f4e3d2; border-bottom: 1px solid #ecdcc6;
  border-radius: var(--radius) var(--radius) 0 0;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.family-banner-label {
  display: inline-flex; align-items: center; gap: 6px;
  font: 700 10.5px 'DM Sans'; letter-spacing: .06em; text-transform: uppercase; color: var(--rust);
}
.family-banner-label svg { display: block; flex: none; }
.family-badge {
  flex: none; background: var(--family-color, var(--rust)); color: #fff;
  font: 700 11px 'DM Sans'; line-height: 1; padding: 4px 10px;
  border-radius: 999px; white-space: nowrap;
}
/* Three little bottle shapes that replace the single thumbnail (56x56, same
   footprint as .img-slot.thumb so the name/eyebrow line up with bottle tiles) */
.family-bottles { position: relative; width: 56px; height: 56px; flex: none; display: flex; align-items: center; justify-content: center; }
.family-bottles svg { height: 100%; width: auto; display: block; }

/* ---- "How the cards work" explainer (Discover intro) ---- */
.card-guide {
  background: var(--card); border: 1px solid var(--card-line); border-radius: var(--radius);
  padding: 12px 16px; margin: 2px 0 4px;
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 0; row-gap: 8px; align-items: start;
}
.card-guide > p.cg-intro { grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--sub); }
.card-guide-row { display: flex; gap: 12px; align-items: flex-start; padding-right: 20px; }
.card-guide-row + .card-guide-row { border-left: 1px solid var(--card-line); padding-right: 0; padding-left: 20px; }
.card-guide-row p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink); }
.card-guide-row p .cg-lead { color: var(--rust); }
/* the little card pictures that sit inline beside each explanation */
.mini-tile {
  width: 118px; flex: none; position: relative; background: var(--card);
  border: 1px solid var(--card-line); border-radius: 8px; padding: 8px;
}
.mini-tile .m-plus {
  position: absolute; top: 6px; right: 6px; width: 15px; height: 15px; border-radius: 50%;
  border: 1px solid var(--card-line); color: var(--link); font: 700 11px 'DM Sans';
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.mini-tile .m-top { display: flex; gap: 6px; align-items: flex-start; padding-right: 16px; }
.mini-tile .m-thumb {
  width: 22px; height: 22px; flex: none; border-radius: 4px; border: 1px dashed #cfc4ad;
  background: repeating-linear-gradient(45deg,#efe8db,#efe8db 5px,#f4eee2 5px,#f4eee2 10px);
}
.mini-tile .m-eyebrow { height: 4px; width: 30px; border-radius: 2px; background: #e7cdae; }
.mini-tile .m-name { height: 6px; width: 44px; border-radius: 3px; background: #c9bfa6; margin-top: 4px; }
.mini-tile .m-line { height: 4px; border-radius: 2px; background: #ece4d3; margin-top: 7px; }
.mini-tile .m-line.short { width: 62%; }
.mini-tile .m-tags { display: flex; gap: 4px; margin-top: 7px; }
.mini-tile .m-tag { height: 8px; width: 30px; border-radius: 999px; background: var(--avail-bg); }
.mini-tile .m-learn { height: 5px; width: 42px; border-radius: 2px; background: var(--rust); margin-top: 7px; }
/* family variant: stacked shadow, rust edge, banner, bottle cluster */
.mini-tile.mini-family {
  background: #fcf8f1; border-color: #e6ddca; border-left: 2px solid var(--rust); padding-top: 0;
  box-shadow: 2px 2px 0 0 #f6efe2, 2px 2px 0 1px #e7dfcb, 4px 4px 0 0 #f1e8d6, 4px 4px 0 1px #e7dfcb;
}
.mini-tile.mini-family .m-banner {
  margin: 0 -8px 7px; padding: 5px 8px; background: #f4e3d2; border-bottom: 1px solid #ecdcc6;
  border-radius: 6px 6px 0 0; display: flex; align-items: center; justify-content: space-between; gap: 6px;
}
.mini-tile.mini-family .m-banner b { font: 700 7.5px 'DM Sans'; letter-spacing: .05em; color: var(--rust); }
.mini-tile.mini-family .m-badge {
  background: var(--rust); color: #fff; font: 700 8px 'DM Sans'; line-height: 1;
  padding: 2px 6px; border-radius: 999px;
}
.mini-tile.mini-family .m-cluster { position: relative; width: 26px; height: 22px; flex: none; }
.mini-tile.mini-family .m-cluster i { position: absolute; border-radius: 2px; background: #e4d3bc; border: 1px solid #d3bf9f; }
.mini-tile.mini-family .m-cluster i:nth-child(1) { left: 0;   top: 3px; width: 7px;  height: 16px; }
.mini-tile.mini-family .m-cluster i:nth-child(2) { left: 9px;  top: 1px; width: 8px;  height: 20px; background: #efe0cb; border-color: #d8c4a2; }
.mini-tile.mini-family .m-cluster i:nth-child(3) { left: 19px; top: 3px; width: 7px;  height: 16px; }
@media (max-width: 640px) {
  .card-guide { grid-template-columns: 1fr; }
  .card-guide-row { padding-right: 0; }
  .card-guide-row + .card-guide-row { border-left: 0; padding-left: 0; border-top: 1px solid var(--card-line); padding-top: 8px; }
}
@media (max-width: 400px) {
  .card-guide-row { flex-direction: column; gap: 8px; }
}
.bar-add {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%; padding: 0;
  border: 1px solid var(--card-line); background: var(--card); color: var(--link);
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
  cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.05);
  transition: background .15s, color .15s, border-color .15s, transform .08s;
}
.bar-add svg { display: block; width: 15px; height: 15px; }
.bar-add:hover { border-color: var(--link); background: #faf5ec; }
.bar-add:active { transform: scale(.9); }
.bar-add:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.bar-add.saved { background: var(--link); border-color: var(--link); color: #fff; }
.bar-add.saved:hover { background: var(--link-hover); border-color: var(--link-hover); }
.bar-add.busy { opacity: .55; pointer-events: none; }
/* transient confirmation toast for quick-add */
.wc-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 12px);
  background: var(--ink); color: #fff; font: 600 13.5px 'DM Sans', sans-serif;
  padding: 10px 16px; border-radius: 999px; box-shadow: 0 6px 20px rgba(0,0,0,.18);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 1000;
  max-width: calc(100vw - 32px); text-align: center;
}
.wc-toast.show { opacity: 1; transform: translate(-50%, 0); }
.wc-toast.err { background: var(--err); }
@media (min-width: 640px) {
  .grid.bottles .bottle-name { min-height: 2.5em; }   /* always reserve two lines */
  .grid.bottles .bshort     { min-height: 3em; }      /* two lines @ 1.5 */
  .grid.cocktails .cname    { min-height: 2.4em; }    /* always reserve two lines */
  .grid.cocktails .cdesc    { min-height: 4.5em; }    /* three lines @ 1.5 */
  .grid.cocktails .cing     { min-height: 4.2em; }
  .grid.cocktails .cuse     { min-height: 3.2em; }
}

/* ---------- page intro ---------- */
.page-head { padding: 14px 0 18px; }
.page-head h1 { margin: 0 0 6px; }
.page-head p { font-size: 15px; color: var(--sub); max-width: none; margin: 0 0 10px; }

/* ---------- bottle detail ---------- */
.crumb { font: 13px 'DM Sans'; color: var(--faint); margin-bottom: 18px; }
/* cocktail detail */
.cocktail-detail { display: grid; grid-template-columns: 340px 1fr; gap: 34px; align-items: start; margin-bottom: 30px; }
@media (max-width: 800px) { .cocktail-detail { grid-template-columns: 1fr; } }
.img-slot.cd-photo { width: 100%; aspect-ratio: 4 / 5; border-radius: var(--radius); }
.cd-ing { list-style: none; margin: 0 0 22px; padding: 0; max-width: 480px; }
.cd-ing li { display: flex; justify-content: space-between; gap: 14px; padding: 9px 2px; border-bottom: 1px solid var(--card-line); font: 14px 'DM Sans'; color: var(--ink); }
.cd-ing li .amt { color: var(--sub); white-space: nowrap; }
/* store finder */
.stores-page-head { padding-bottom: 16px; }
.stores-page-head h1 { font-size: clamp(28px, 4vw, 34px); }
.stores-page-head p { max-width: 880px; color: var(--sub); }
.stores-note {
  display: flex; align-items: center; gap: 10px;
  background: #f5f0e6; border: 1px solid var(--card-line); border-radius: 12px;
  padding: 13px 16px; margin-bottom: 16px; font-size: 14px; color: var(--sub);
}
.store-spin { width: 15px; height: 15px; flex: none; border: 2px solid var(--card-line); border-top-color: var(--terracotta); border-radius: 50%; animation: wc-spin .8s linear infinite; }
@keyframes wc-spin { to { transform: rotate(360deg); } }
.stores-manual {
  width: 100%; background: #f5f0e6; border: 1px solid var(--card-line);
  border-radius: 14px; padding: 18px; margin-bottom: 16px;
}
.stores-manual p { font-size: 14px; color: var(--sub); margin-bottom: 10px; }
.manual-row { display: flex; gap: 10px; flex-wrap: wrap; }
.manual-row input { flex: 1; min-width: 200px; background: #fff; border: 1px solid var(--card-line); border-radius: 8px; padding: 10px 12px; font: 14.5px 'DM Sans'; color: var(--ink); }
.manual-row input:focus { outline: none; border-color: var(--terracotta); }

.stores-address-card {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: #f5f0e6; border: 1px solid var(--card-line); border-radius: 14px;
  padding: 14px 16px; margin: 2px 0 18px;
}
.stores-address-copy { display: flex; flex-direction: column; min-width: 0; }
.stores-address-copy span { font: 600 11px 'DM Sans'; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-bottom: 2px; }
.stores-address-copy strong { font: 700 14px 'DM Sans'; color: var(--ink); line-height: 1.35; }
.stores-location-actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: flex-end; color: var(--faint); }
.stores-location-actions .link-btn { white-space: nowrap; }

.stores-tabs {
  display: flex; align-items: flex-end; gap: 26px; border-bottom: 1px solid var(--card-line);
  margin-bottom: 14px;
}
.stores-tabs[hidden] { display: none; }
.stores-tab {
  appearance: none; border: 0; border-bottom: 3px solid transparent; background: transparent;
  color: var(--sub); cursor: pointer; padding: 10px 1px 9px; margin-bottom: -1px;
  font: 700 14px 'DM Sans'; text-align: left;
}
.stores-tab span { color: inherit; font-weight: 600; }
.stores-tab:hover { color: var(--terracotta); }
.stores-tab.active { color: #a15c2c; border-bottom-color: #a15c2c; }

.store-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.store-card {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  text-align: left; background: #fff; border: 1px solid #e3ddce; border-radius: 10px;
  padding: 14px 16px; cursor: pointer; font-family: inherit; transition: border-color .14s ease, transform .14s ease;
}
.store-card:hover { border-color: #b97747; transform: translateY(-1px); }
.store-card-copy { display: flex; flex-direction: column; min-width: 0; }
.store-card-copy strong { font: 700 14.5px 'DM Sans'; color: var(--ink); line-height: 1.35; }
.store-address { margin-top: 4px; font: 500 12.5px 'DM Sans'; color: #7a7164; line-height: 1.4; }
.store-card-meta { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.store-dist { font: 700 11.5px 'DM Sans'; color: var(--faint); white-space: nowrap; }
.store-badge {
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  font: 800 9.5px 'DM Sans'; letter-spacing: .06em; text-transform: uppercase;
  background: #f1e4cb; color: #8b5a2b; border-radius: 5px; padding: 4px 7px;
}
.store-badge.grocery { background: #efe8db; color: #735f41; }
.store-badge.independent { background: #f1e4cb; color: #8b5a2b; }
.stores-tab-note { margin: 0 0 30px; color: #6e6659; font-size: 13px; line-height: 1.5; font-style: italic; }
.stores-empty { background: #fff; border: 1px solid #e3ddce; border-radius: 10px; padding: 17px; color: var(--sub); font-size: 14px; }

.shop-list-strip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--card); border: 1px solid var(--card-line); border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; font-size: 13.5px; }
.shop-chip { background: #f0e6da; color: #8a5a17; border-radius: 20px; padding: 3px 11px; font: 600 12px 'DM Sans'; }
.sd-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 18px; }
@media (max-width: 720px) { .sd-grid { grid-template-columns: 1fr; } }
.sd-card { background: var(--card); border: 1px solid var(--card-line); border-radius: var(--radius); padding: 20px; }
.sd-card h3 { font: 700 11.5px 'DM Sans'; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin-bottom: 6px; }
.hours-table { border-collapse: collapse; width: 100%; font-size: 14px; }
.hours-table td { padding: 6px 12px 6px 0; border-bottom: 1px solid var(--card-line); vertical-align: top; }
.hours-table tr:last-child td { border-bottom: none; }

@media (max-width: 640px) {
  .stores-address-card { align-items: flex-start; flex-direction: column; gap: 10px; }
  .stores-location-actions { justify-content: flex-start; }
  .stores-tabs { gap: 20px; }
  .stores-tab { font-size: 13px; }
  .store-card { align-items: flex-start; gap: 12px; padding: 13px 14px; }
  .store-card-copy strong { font-size: 14px; }
  .store-card-meta { max-width: 45%; }
  .store-badge { white-space: normal; text-align: center; line-height: 1.25; }
}

/* cocktail lightbox (Cocktails page thumbnails) */
.lightbox { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(26,26,26,.62); }
.lightbox .inner { max-width: 620px; width: 100%; background: var(--card); border: 1px solid var(--card-line); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.lightbox .img-slot { width: 100%; aspect-ratio: 4 / 5; max-height: 70vh; }
.lightbox .bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.lightbox .bar span { font: 700 19px 'Fraunces'; color: var(--ink); }
.lightbox .bar .btns { display: flex; gap: 8px; }
.lightbox-thumb { background: none; border: none; padding: 0; cursor: zoom-in; border-radius: 10px; }
.detail-top { display: grid; grid-template-columns: 220px 1fr; gap: 36px; align-items: start; margin-bottom: 40px; }
.bottle-art { background: var(--card); border: 1px solid var(--card-line); border-radius: var(--radius); padding: 0; overflow: hidden; display: flex; justify-content: center; }
/* Let the photo fill the whole card. The card itself now provides the border
   and rounded corners (and clips them), so the inner image slot drops its own
   border/radius/padding and runs edge-to-edge instead of floating in white. */
.bottle-art .lightbox-thumb { width: 100%; border-radius: 0; }
.bottle-art .img-slot.cd-photo { border-radius: 0; }
.bottle-art .img-slot.cd-photo.filled, .bottle-art .img-slot.cd-photo:has(img) { border: none; }
.detail-name { font: 700 36px 'DM Sans'; line-height: 1.1; margin: 4px 0 6px; }
.facts-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 40px; }
.fact { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--card-line); font-size: 13.5px; }
.fact span:first-child { color: var(--faint); flex: none; }
.fact span:last-child { font-weight: 700; text-align: right; }
@media (max-width: 800px) { .detail-top, .facts-cols { grid-template-columns: 1fr; } .bottle-art { max-width: 260px; } }

/* ---------- crowdsourced pricing (pilot) ---------- */
.wc-price {
  background: var(--card); border: 1px solid var(--card-line);
  border-radius: var(--radius); padding: 16px 18px; margin-bottom: 40px;
}
.wc-price h2 {
  font: 700 11.5px 'DM Sans'; letter-spacing: .08em; text-transform: uppercase;
  color: var(--faint); margin: 0 0 12px;
}
.wc-price-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.wc-price-row .grow { flex: 1 1 auto; }
.wc-price-row-submit { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--card-line); }
.wc-price-ico { flex: none; display: flex; color: var(--faint); }
.wc-price-ico.ok { color: var(--ok); }
.wc-price-line { font-size: 14px; color: var(--sub); }
.wc-price-amount { font: 700 24px 'Fraunces', serif; color: var(--ink); line-height: 1.05; }
.wc-price-amount small { font: 600 13px 'DM Sans'; color: var(--sub); margin-left: 6px; }
.wc-price.aging .wc-price-amount { color: var(--sub); }
.wc-price.aging .wc-price-amount small { color: var(--faint); }
.wc-price-sub { font-size: 12.5px; color: var(--faint); margin-top: 5px; }
.wc-price-field {
  display: inline-flex; align-items: center; gap: 6px; background: #fff;
  border: 1px solid var(--card-line); border-radius: 8px; padding: 0 12px;
}
.wc-price-field:focus-within { border-color: var(--terracotta); }
.wc-price-field > span { font: 700 15px 'DM Sans'; color: var(--faint); }
.wc-price-field input {
  width: 96px; border: none; outline: none; background: none;
  padding: 11px 0; font: 600 15px 'DM Sans'; color: var(--ink);
}
.wc-price-metro {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 12px; font-size: 12.5px; color: var(--faint);
}
.wc-price-metro input {
  background: #fff; border: 1px solid var(--card-line); border-radius: 8px;
  padding: 8px 11px; font: 500 13.5px 'DM Sans'; color: var(--ink); min-width: 190px;
}
.wc-price-metro input:focus { outline: none; border-color: var(--terracotta); }
.wc-price-confirm {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border-top: 1px solid var(--card-line); margin-top: 14px; padding-top: 14px;
}
.wc-price-ok { font: 600 14.5px 'DM Sans'; color: var(--ok); }
.wc-price-area { display: inline-block; margin-top: 2px; }

/* ---- community spotlight (Discovery Hub) ---- */
.wc-spot-slot { margin: 0 0 28px; }
.wc-spot {
  position: relative; background: var(--card);
  border: 1px solid var(--card-line); border-radius: var(--radius);
  padding: 22px 24px; overflow: hidden;
}
.wc-spot-card { box-shadow: 0 18px 40px -28px rgba(0,0,0,0.28); }
.wc-spot-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.wc-spot-badge {
  font: 600 11px 'DM Sans'; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tier-tx); background: var(--tier-bg);
  padding: 4px 10px; border-radius: 999px;
}
.wc-spot-dist { font-size: 12.5px; color: var(--faint); white-space: nowrap; }
.wc-spot-name { font: 700 24px 'Fraunces', serif; color: var(--ink); margin: 0 0 8px; line-height: 1.12; }
.wc-spot-blurb { font-size: 14.5px; line-height: 1.6; color: var(--sub); margin: 0 0 18px; }
.wc-spot-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding-top: 16px; border-top: 1px solid var(--card-line);
}
.wc-spot-addr { font-size: 12.5px; color: var(--faint); line-height: 1.5; }

/* prompt + empty share a centered, calmer layout */
.wc-spot-prompt, .wc-spot-empty, .wc-spot-skel {
  display: flex; align-items: center; gap: 18px;
  border-style: dashed;
}
.wc-spot-skel { justify-content: flex-start; color: var(--sub); }
.wc-spot-copy { flex: 1; min-width: 0; }
.wc-spot-eyebrow {
  display: inline-block; font: 600 10.5px 'DM Sans'; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 6px;
}
.wc-spot-prompt h3, .wc-spot-empty h3 { font: 700 20px 'Fraunces', serif; color: var(--ink); margin: 0 0 6px; }
.wc-spot-prompt p, .wc-spot-empty p { font-size: 13.5px; line-height: 1.55; color: var(--sub); margin: 0 0 14px; max-width: 460px; }

/* concentric proximity rings — a quiet nod to "near you", in terracotta */
.wc-spot-rings { position: relative; width: 52px; height: 52px; flex: none; }
.wc-spot-rings span {
  position: absolute; inset: 0; border: 1.5px solid var(--terracotta);
  border-radius: 50%; opacity: .28;
}
.wc-spot-rings span:nth-child(2) { inset: 9px; opacity: .5; }
.wc-spot-rings span:nth-child(3) { inset: 18px; opacity: 1; background: var(--terracotta); border: none; }

@media (max-width: 560px) {
  .wc-spot-foot { flex-direction: column; align-items: flex-start; }
  .wc-spot-foot .btn { width: 100%; text-align: center; }
  .wc-spot-prompt, .wc-spot-empty { flex-direction: column; text-align: center; }
  .wc-spot-rings { margin: 0 auto; }
}


/* ---- store picker ("where'd you buy it?") ---- */
.wc-store { border-top: 1px solid var(--card-line); margin-top: 14px; padding-top: 14px; }
.wc-store-head { font-size: 12.5px; color: var(--sub); margin-bottom: 8px; }
.wc-store-opt {
  font: 600 10.5px 'DM Sans'; letter-spacing: .05em; text-transform: uppercase;
  color: var(--faint); border: 1px solid var(--card-line); border-radius: 999px;
  padding: 1px 7px; margin-left: 6px;
}
.wc-store-search { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wc-store-search input {
  flex: 1 1 200px; min-width: 180px; background: #fff;
  border: 1px solid var(--card-line); border-radius: 8px;
  padding: 9px 11px; font: 500 13.5px 'DM Sans'; color: var(--ink);
}
.wc-store-search input:focus { outline: none; border-color: var(--terracotta); }
.wc-store-results { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.wc-store-note { font-size: 12.5px; color: var(--faint); margin: 4px 0; }
.wc-store-opt-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left; background: #fff; cursor: pointer;
  border: 1px solid var(--card-line); border-radius: 8px; padding: 9px 12px;
  transition: border-color .15s ease, background .15s ease;
}
.wc-store-opt-row:hover { border-color: var(--terracotta); background: var(--cream); }
.wc-store-opt-copy { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wc-store-opt-copy strong { font: 600 14px 'DM Sans'; color: var(--ink); }
.wc-store-opt-copy span { font-size: 12px; color: var(--faint); }
.wc-store-dist { flex: none; font: 500 12px 'DM Sans'; color: var(--sub); }
.wc-store-chosen {
  display: flex; align-items: center; gap: 10px;
  background: var(--cream); border: 1px solid var(--card-line);
  border-radius: 8px; padding: 10px 12px;
}
.wc-store-ico { flex: none; display: flex; color: var(--terracotta); }
.wc-store-chosen-copy { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }
.wc-store-chosen-copy strong { font: 600 14px 'DM Sans'; color: var(--ink); }
.wc-store-chosen-copy span { font-size: 12px; color: var(--faint); }

/* ---- rate this store (in the price form, once a store is chosen) ---- */
.wc-store-rate {
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--card-line);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.wc-store-rate-label { font-size: 12.5px; color: var(--sub); }
.wc-store-rate .stars { display: inline-flex; gap: 2px; }
.wc-store-rate .star {
  background: none; border: none; cursor: pointer; padding: 0;
  font-size: 19px; line-height: 1; color: var(--card-line);
  transition: color .12s ease, transform .12s ease;
}
.wc-store-rate .star.on { color: var(--terracotta); }
.wc-store-rate .star:hover:not(:disabled) { transform: scale(1.12); }
.wc-store-rate .star:disabled { cursor: default; opacity: .6; }
.wc-store-rate-note { font-size: 11.5px; color: var(--ok); }

/* ---- average rating row on the spotlight card ---- */
.wc-spot-rating { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--sub); margin: 0 0 10px; }
.wc-spot-rating .stars.static { font-size: 14px; }
.wc-spot-rating b { color: var(--ink); }

@media (max-width: 560px) {
  .wc-price-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .wc-price-row .grow { display: none; }
  .wc-price-row .btn, .wc-price-row .btn.sm { width: 100%; text-align: center; }
  .wc-store-search input { flex-basis: 100%; }
}

/* ---------- image slots (photos added later) ---------- */
.img-slot {
  background: repeating-linear-gradient(45deg, #efe8db, #efe8db 10px, #f4eee2 10px, #f4eee2 20px);
  border: 1px dashed #cfc4ad; border-radius: 16px; display: flex; align-items: center;
  justify-content: center; text-align: center; color: #9a8d72; font: 500 12px 'DM Sans';
  padding: 12px; overflow: hidden;
}
.img-slot img { width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: inherit; }
.img-slot.filled, .img-slot:has(img) { padding: 0; border: 1px solid var(--card-line); background: #efe8db; }
.img-slot.bottle-glyph { padding: 4px; border-style: solid; }
.img-slot.hero { width: 100%; aspect-ratio: 16 / 6; }
.img-slot.thumb { width: 56px; height: 56px; flex: none; border-radius: 10px; }
.img-slot.modal-img { width: 100%; aspect-ratio: 4 / 3; }
.img-slot.mb2-photo { width: 34px; height: 50px; border-radius: 5px; border-width: 1px; }
@media (max-width: 640px) { .img-slot.hero { aspect-ratio: 16 / 9; } }

/* ---------- guide ---------- */
.guide-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 16px 0 36px; }
.guide-cards .card { padding: 22px; }
.tri-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 16px 0 36px; }
@media (max-width: 800px) { .guide-cards, .tri-cards { grid-template-columns: 1fr; } }
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 12px; }
.chip {
  border: 1px solid var(--card-line); background: var(--card); border-radius: 20px;
  padding: 6px 14px; font: 600 12.5px 'DM Sans'; color: var(--ink); cursor: pointer;
}
.chip.on { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.step-list { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.step-list .row { display: flex; gap: 14px; align-items: flex-start; }
.step-list .num {
  flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--ink);
  color: var(--cream); font: 700 12px 'DM Sans'; display: flex; align-items: center; justify-content: center;
}
.label-mini {
  border: 1px solid var(--card-line); border-radius: 8px; padding: 10px; width: 86px; flex: none;
  display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center;
}
.label-mini span { font: 700 8.5px 'DM Sans'; letter-spacing: .04em; padding: 2px 6px; border-radius: 4px; }

/* ---------- landing ---------- */
.hero { padding: 44px 0 34px; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 40px;
  align-items: stretch;
}
.hero-grid > * { min-width: 0; }
.hero-left { display: flex; flex-direction: column; }
.hero-slides {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 100%;
  justify-self: stretch;
  align-self: stretch;
  border-radius: var(--radius);
  overflow: hidden;
  background: #efe8db;
  border: 1px solid var(--card-line);
}
@media (max-width: 800px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  /* On smaller screens the columns stack. Restore a predictable responsive
     photo ratio while keeping the slideshow flush with both content edges. */
  .hero-slides {
    aspect-ratio: 4 / 3;
    min-height: 56vw;
    width: 100%;
    align-self: start;
    justify-self: stretch;
  }
}
.hero-slides .slide { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; }
.hero-slides .slide.on { opacity: 1; }
.hero-slides .slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
/* "plain" slides carry no caption text and no gray scrim — the artwork stands alone.
   contain + matching backdrop keeps the full lockup visible without cropping. */
.hero-slides .slide.plain img { object-fit: cover; object-position: center; background: #1a1a1a; }
.hero-slides .cap {
  position: absolute; inset: 0; pointer-events: none;
  display: flex; align-items: center;
  padding-left: clamp(18px, 4%, 34px); padding-right: 50%;
  color: #fff; font: 700 clamp(20px, 2.6vw, 30px)/1.25 'Fraunces', serif;
  letter-spacing: .01em; text-shadow: 0 1px 10px rgba(0,0,0,.45);
  background: linear-gradient(90deg,
    rgba(70,70,70,.72) 0%,
    rgba(70,70,70,.52) 26%,
    rgba(70,70,70,.26) 40%,
    rgba(70,70,70,0) 52%);
}
.hero-dots { position: absolute; top: 12px; right: 14px; display: flex; gap: 6px; }
.hero-dots button { width: 9px; height: 9px; border-radius: 50%; border: none; background: rgba(255,255,255,.55); cursor: pointer; padding: 0; }
.hero-dots button.on { background: #fff; }
.hero h1 { font-size: clamp(34px, 5.4vw, 52px); margin-bottom: 10px; }
.hero .tag { font-family: 'Fraunces', serif; font-weight: 600; font-size: 19px; color: var(--rust); margin-bottom: 14px; }
.hero p.lede { color: var(--sub); font-size: 16px; margin-bottom: 22px; }
.hero .ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.entry-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin: 26px 0 44px; }
.entry-cards .card { padding: 22px; gap: 8px; }
.entry-cards .card a.learn { margin-top: 4px; }
/* Keep Discovering: three equal-height columns on desktop. */
.keep-discovering-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}
/* ==========================================================
   Keep Discovering Cards
   ========================================================== */

.keep-discovering-cards{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px;
    align-items:stretch;
}

.keep-discovering-cards .card {
    min-height: 145px;
    height: 100%;
}
.keep-discovering-cards .card .learn {
  margin-top: auto;           /* keeps each CTA aligned along the bottom */
}
/* Icon + title row for the Keep Discovering cards */
.kd-title { display: flex; align-items: center; gap: 9px; }
.kd-icon { display: inline-flex; flex: none; color: var(--rust); }
.kd-icon svg { display: block; }
@media (max-width: 900px) {
  .keep-discovering-cards {
    grid-template-columns: 1fr;
  }
  .keep-discovering-cards .card {
    min-height: 0;
  }
}
/* ---------- auth ---------- */
.auth-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; padding: 30px 0 60px; }
@media (max-width: 900px) { .auth-layout { grid-template-columns: 1fr; } }
.auth-card { background: var(--card); border: 1px solid var(--card-line); border-radius: var(--radius); padding: 28px; max-width: 460px; }
.auth-card h2 { margin-bottom: 4px; }
.auth-card .lede { color: var(--sub); font-size: 14px; margin-bottom: 18px; }
.field { margin-bottom: 14px; }
.field label { display: block; font: 600 12.5px 'DM Sans'; margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; border: 1px solid var(--card-line); border-radius: 8px; background: #fff;
  padding: 11px 12px; font: 400 14px 'DM Sans'; color: var(--ink);
}
.field textarea { resize: vertical; min-height: 58px; line-height: 1.5; }
.dob-row { display: grid; grid-template-columns: 1.3fr 1fr 1.1fr; gap: 10px; }
.form-msg { display: none; border-radius: 8px; padding: 10px 12px; font-size: 13.5px; margin-top: 12px; }
.form-msg.ok { display: block; background: rgba(77,122,82,.1); color: var(--ok); border: 1px solid rgba(77,122,82,.35); }
.form-msg.err { display: block; background: rgba(179,67,46,.08); color: var(--err); border: 1px solid rgba(179,67,46,.3); }
.legal-line { font-size: 12.5px; color: var(--faint); margin-top: 12px; }
.age-note { color: var(--faint); font-size: 12.5px; margin-top: 22px; }

/* ---------- my bar ---------- */
.bar-tabs { display: flex; gap: 10px; margin-bottom: 22px; }
.bar-item { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.bar-item .info { display: flex; flex-direction: column; gap: 3px; }
.empty-state {
  background: var(--card); border: 1px dashed var(--card-line); border-radius: var(--radius);
  padding: 34px; text-align: center; color: var(--sub);
}

/* ---------- my bar: view toggle + sort ---------- */
.mybar-controls {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 20px 0 -6px; font-size: 13px; color: var(--sub);
}
.mybar-controls label { font: 600 12.5px 'DM Sans'; color: var(--faint); }
.mybar-controls select {
  border: 1px solid var(--card-line); border-radius: 8px; background: #fff;
  padding: 8px 11px; font: 500 13.5px 'DM Sans'; color: var(--ink); cursor: pointer;
}
.mybar-controls select:focus { outline: none; border-color: var(--terracotta); }
.mybar-count { color: var(--faint); font-size: 12.5px; }

/* ---------- my bar 2 (ranked shelf) ---------- */
.mb2-wall {
  position: relative; border-radius: 18px; overflow: hidden;
  box-shadow: 0 8px 30px rgba(0,0,0,.25); aspect-ratio: 1654 / 951;
  background: #2a1d12 url('/assets/images/bar-shelf-background.png') center/cover no-repeat; margin: 4px 0 6px;
}
.mb2-row {
  position: absolute; left: 8%; width: 54%;
  display: flex; gap: 14px; align-items: flex-end; justify-content: space-between; padding: 0 18px;
}
.mb2-row-0 { bottom: 67.5%; }
.mb2-row-1 { bottom: 47.2%; }
.mb2-row-2 { bottom: 25.8%; }
.mb2-slot {
  position: relative; cursor: grab; display: flex; flex-direction: column;
  align-items: center; gap: 3px; min-width: 46px;
  filter: drop-shadow(0 6px 6px rgba(0,0,0,.4)); transition: transform .15s ease;
}
.mb2-slot:active { cursor: grabbing; }
.mb2-slot.mb2-dragging { opacity: .35; }
.mb2-empty {
  min-width: 46px; min-height: 46px; border: 1px dashed rgba(255,255,255,.4);
  border-radius: 8px; opacity: .3; cursor: default; justify-content: center;
  filter: none;
}
.mb2-bottle { color: #efe2c8; filter: drop-shadow(0 0 2px rgba(255,255,255,.5)); }
.mb2-name {
  font: 700 9px 'DM Sans'; color: #1a1a1a; background: rgba(255,255,255,.85);
  padding: 1px 5px; border-radius: 4px; white-space: nowrap; text-align: center;
  line-height: 1.3; max-width: 82px; overflow: hidden; text-overflow: ellipsis;
  border-bottom: none;
}
.mb2-name:hover { color: #1a1a1a; background: #fff; }
.mb2-rank {
  position: absolute; top: -8px; left: -8px; z-index: 2;
  font: 700 9px 'DM Sans'; background: var(--terracotta); color: #fff;
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.mb2-empty .mb2-rank { background: rgba(255,255,255,.4); color: #2a1d12; box-shadow: none; }
/* Tap-to-rank controls: desktop reorders by drag, so these stay hidden there. */
.mb2-move { display: none; }
.mb2-mv {
  width: 26px; height: 22px; border: 1px solid rgba(255,255,255,.35);
  background: rgba(26,26,26,.72); color: #f7f2ea; border-radius: 6px;
  font: 700 11px/1 'DM Sans'; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.mb2-mv:disabled { opacity: .3; cursor: default; }
.mb2-mv:active { background: var(--terracotta); }
.mb2-help { font-size: 13px; color: var(--sub); margin: 4px 0 0; max-width: 640px; }
@media (max-width: 640px) {
  /* Phone layout: the wide desktop image would crush the shelf to a very short strip,
     forcing tiny labels. So on phones we stop using it as the layout
     driver — we stack three CSS-drawn wood shelves that grow to fit, and fade
     the painted art in behind as texture. Bottles get bigger; names wrap. */
  .mb2-wall {
    aspect-ratio: auto; background: #2a1d12;
    display: flex; flex-direction: column; gap: 14px;
    padding: 14px 12px calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .mb2-wall::before {
    content: ""; position: absolute; inset: 0;
    background: url('/assets/images/bar-shelf-background.png') center/cover no-repeat;
    opacity: .16; pointer-events: none;
  }
  .mb2-row {
    position: static; left: auto; bottom: auto; width: auto; z-index: 1;
    gap: 6px; padding: 10px 8px 14px; min-height: 74px;
    align-items: flex-end; flex-wrap: nowrap; justify-content: flex-start;
    background: linear-gradient(#5c3d22, #3d2714); border-radius: 9px;
    box-shadow: inset 0 -7px 0 rgba(0,0,0,.32), 0 3px 9px rgba(0,0,0,.32);
  }
  .mb2-slot, .mb2-empty { flex: 1 1 0; min-width: 0; }
  .mb2-slot { filter: drop-shadow(0 4px 4px rgba(0,0,0,.4)); }
  .mb2-empty { min-height: 58px; }
  .mb2-bottle { width: 30px; height: 48px; }
  .mb2-name {
    font-size: 10px; line-height: 1.15; white-space: normal; max-width: 100%;
    padding: 1px 4px; display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
  }
  .mb2-rank { min-width: 18px; height: 18px; font-size: 10px; top: -7px; left: -7px; }
  .mb2-move { display: flex; gap: 4px; margin-top: 4px; }
  .mb2-mv { width: 26px; height: 24px; font-size: 12px; }
}

/* ---------- legal (Terms of Service / Privacy Policy) ---------- */
.legal-doc {
  background: var(--card); border: 1px solid var(--card-line); border-radius: var(--radius);
  padding: 28px 30px; max-width: 760px; margin: 6px 0 40px;
}
.legal-doc-title { font-size: 22px; margin: 0 0 4px; }
.legal-doc .legal-updated { font-size: 13px; color: var(--faint); margin: 0 0 20px; }
.legal-doc h3 { font-size: 16px; margin: 26px 0 8px; }
.legal-doc h3:first-of-type { margin-top: 22px; }
.legal-doc p { font-size: 14px; line-height: 1.65; color: var(--sub); margin: 0 0 12px; max-width: none; }
.legal-doc p b { color: var(--ink); }
.legal-doc ul { margin: 0 0 12px; padding-left: 22px; }
.legal-doc ul ul { margin: 8px 0 0; }
.legal-doc li { font-size: 14px; line-height: 1.6; color: var(--sub); margin-bottom: 8px; }
.legal-doc a { font-weight: 600; }
.legal-doc .legal-disclaimer {
  background: var(--cream); border: 1px solid var(--card-line); border-radius: 8px;
  padding: 14px 16px; font-size: 12.5px; line-height: 1.7; letter-spacing: .01em;
}
.legal-doc .legal-address { font-size: 14px; line-height: 1.7; color: var(--sub); margin: 0; }
.legal-doc .legal-address a { color: var(--link); }

/* ---------- about ---------- */
.about-doc {
  background: var(--card); border: 1px solid var(--card-line); border-radius: var(--radius);
  padding: 28px 30px; max-width: 760px; margin: 6px 0 28px;
}
.about-doc p { font-size: 15px; line-height: 1.7; color: var(--sub); margin: 0 0 14px; max-width: none; }
.about-doc p:last-child { margin-bottom: 0; }
.about-person + .about-person { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--card-line); }
.about-name {
  font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 15px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--rust);
  margin: 0 0 10px;
}
.about-social { display: flex; gap: 12px; margin-top: 14px; }
.about-social-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  color: var(--rust); border: 1px solid var(--card-line); background: var(--cream);
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.about-social-link:hover { color: #fff; background: var(--rust); border-color: var(--rust); }

/* ---------- beta feedback page ---------- */
.fb-guide { background: var(--card); border: 1px solid var(--card-line); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 22px; max-width: 640px; }
.fb-guide h2 { margin: 0 0 4px; font-size: 16px; }
.fb-guide p.lead { font-size: 13.5px; color: var(--sub); margin: 0; }
.fb-guide ol { margin: 12px 0 0; padding-left: 22px; }
.fb-guide li { margin-bottom: 9px; font-size: 14px; color: var(--sub); }
.fb-guide li b { color: var(--ink); }
.fb-card { background: var(--card); border: 1px solid var(--card-line); border-radius: var(--radius); padding: 22px; max-width: 640px; }
.fb-req { color: var(--terracotta); font-weight: 700; }
.fb-starline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 2px 0 4px; }
.fb-starline .stars-word { font: 600 13.5px 'DM Sans'; color: var(--terracotta); }
.fb-dim { opacity: .4; }
.fb-anon { display: flex; align-items: flex-start; gap: 9px; margin: 2px 0 18px; font-size: 13.5px; color: var(--sub); cursor: pointer; }
.fb-anon input[type=checkbox] { width: auto; margin: 3px 0 0; flex: none; }

/* ---------- age gate ---------- */
#age-gate {
  position: fixed; inset: 0; z-index: 600; background: rgba(26,26,26,.55);
  align-items: center; justify-content: center; padding: 20px;
  display: none; /* inert by default so it can never trap clicks when closed */
}
#age-gate.is-open { display: flex; }
#age-gate .panel { background: var(--card); border-radius: 16px; padding: 30px; max-width: 440px; width: 100%; border: 1px solid var(--card-line); }
#age-gate .mark-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
/* Matches the nav header's .brand .wordmark styling (heavy Fraunces, all caps, letterspaced) */
#age-gate .mark-row .wordmark {
  font-family: 'Fraunces', serif; font-weight: 700; font-size: 21px;
  text-transform: uppercase; letter-spacing: .10em; white-space: nowrap; color: var(--ink);
}
#age-gate .tag { font: 400 11.5px 'DM Sans'; color: var(--rust); margin-bottom: 16px; }
#age-gate .welcome-note { color: var(--rust); font-size: 12.5px; margin-top: 22px; line-height: 1.5; }
#age-gate .welcome-note a { color: var(--rust); text-decoration: underline; }
#age-gate .age-note { margin-top: 8px; }

/* ---------- footer (verbatim legal text — do not edit) ---------- */
footer.site {
  background: var(--ink); color: var(--cream); padding: 28px 32px;
  font: 12px 'DM Sans'; line-height: 1.6; margin-top: 56px;
}
footer.site .inner { max-width: var(--wrap); margin: 0 auto; }
footer.site p.disc { margin: 0 0 6px; color: #ccc; }
footer.site p.own { margin: 0; color: #999; }
footer.site nav { margin-bottom: 14px; display: flex; gap: 18px; flex-wrap: wrap; }
footer.site nav a { color: var(--cream); font-weight: 600; }
footer.site nav a:hover { color: #e9b28e; }

.section-title { border-bottom: 1px solid var(--card-line); padding-bottom: 8px; margin: 34px 0 16px; }
.setup-notice { background: #fff6ec; border: 1px solid #ecd9bd; border-radius: 10px; padding: 14px 16px; margin: 20px 0; font-size: 13.5px; }

/* ---------- My Account: section groups ---------- */
/* Small uppercase label above each group of cards on My Account (Account,
   Public profile, Followers, etc.) — lighter than .section-title so it
   doesn't compete with each card's own heading. */
.acct-kicker {
  font: 700 11px 'DM Sans'; letter-spacing: .08em; text-transform: uppercase;
  color: var(--rust); margin: 34px 0 12px;
}
.acct-kicker:first-of-type { margin-top: 8px; }
.acct-kicker.acct-kicker-danger { color: var(--err); margin-top: 22px; }
/* Delete-account card: same shape as other account cards, tinted to read as "careful here" */
.card-danger { border-color: rgba(179,67,46,.35) !important; background: rgba(179,67,46,.05) !important; }
.btn.danger { background: var(--err); color: var(--cream); border-color: var(--err); }
.btn.danger:hover { background: #8f3524; border-color: #8f3524; color: var(--cream); }
.btn.danger:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Featured Add-Ons page ---------- */
/* Three-up on desktop, two-up on tablet, one per row on phones. */
.grid.addons { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
@media (max-width: 1024px) { .grid.addons { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .grid.addons { grid-template-columns: 1fr; } }

/* Vertical tile: photo on top fading gently into white, then title, blurb, and a
   full-width button. Cards stretch to equal height in a row (grid stretch), the
   body flexes to fill, and the button is pinned to the bottom so buttons align. */
.addon-card {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  border: 1px solid var(--card-line); border-radius: var(--radius); background: var(--card);
}
.addon-media { position: relative; width: 100%; aspect-ratio: 16 / 10; flex: none; background: var(--cream); }
.addon-photo { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.addon-bg-empty { background: radial-gradient(120% 120% at 50% 30%, #efe7d8 0%, #e7dcc8 60%, #dccdb2 100%); }
/* Slight fade at the bottom of the photo into the card. */
.addon-scrim { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 74%, var(--card) 100%); }

.addon-body {
  flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 14px 18px 16px;
}
.addon-name { font: 700 20px 'Fraunces', serif; color: var(--ink); line-height: 1.2; margin: 0; }
.addon-blurb { font-size: 13.5px; line-height: 1.5; color: var(--sub); margin: 0; }

/* Full-width Amazon button — kept as-is (our own blue, gently rounded, not a
   pill). margin-top:auto pins it to the bottom for row alignment. */
.btn.addon-amazon-btn {
  width: 100%; text-align: center; margin-top: auto;
  background: #1565a6; color: var(--cream); border-color: #1565a6; }
.btn.addon-amazon-btn:hover { background: #10517f; border-color: #10517f; color: var(--cream); }
.addon-section-head { border-bottom: 1px solid var(--card-line); padding-bottom: 8px; margin: 34px 0 16px;
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.addon-section-head h2 { font: 700 22px 'Fraunces', serif; color: var(--ink); margin: 0; }
.addon-section-head .note { font: 400 14px 'DM Sans'; color: var(--faint); }

/* Terracotta call-to-action banner (bottom of Discover & Cocktails) */
.addons-cta { text-align: center; background: var(--card); border: 1px solid var(--card-line);
  border-radius: var(--radius); padding: 30px 24px; margin: 44px 0 10px; }
.addons-cta p { font-size: 15px; color: var(--sub); max-width: 560px; margin: 0 auto 18px; line-height: 1.5; }
.btn.addons-cta-btn { background: var(--terracotta); color: var(--cream); border-color: var(--terracotta); }
.btn.addons-cta-btn:hover { background: #a5451a; border-color: #a5451a; color: var(--cream); }

/* ---------- landing "How to explore": steps + logo side by side ---------- */
.explore-wrap { display: flex; gap: 44px; align-items: center; }
.explore-wrap .step-list { flex: 1; min-width: 0; }
.explore-logo { flex: 0 0 auto; width: 320px; max-width: 40%; }
.explore-logo img { width: 100%; height: auto; display: block; }
@media (max-width: 800px) {
  .explore-wrap { flex-direction: column; align-items: stretch; gap: 8px; }
  .explore-logo { width: 100%; max-width: 320px; margin: 6px auto 4px; }
}

/* ---------- mobile "add to home screen" floating button (bottom-left, opposite Aidan) ---------- */
.wc-install-fab { position: fixed; left: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 480; display: none; }
.wc-install-fab.show { display: block; }
.wc-install-fab .wc-fab-btn { position: relative; width: 56px; height: 56px; border-radius: 15px; background: #A5432B; border: none; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(26,26,26,.22); transition: transform .16s ease; }
.wc-install-fab .wc-fab-btn:hover { transform: translateY(-2px); }
.wc-install-fab .wc-fab-btn:focus-visible { outline: 3px solid #A5432B; outline-offset: 4px; }
.wc-install-fab .wc-fab-btn svg { width: 28px; height: 28px; display: block; }
.wc-install-fab .wc-fab-x { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border-radius: 50%; background: #1a1a1a; color: #fff; border: 2px solid #f7f2ea; font: 700 12px/1 'DM Sans', sans-serif; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; z-index: 1; }
.wc-install-fab .wc-fab-x:focus-visible { outline: 2px solid #A5432B; outline-offset: 2px; }
.wc-install-pop-wrap { position: fixed; inset: 0; z-index: 350; display: none; align-items: center; justify-content: center; padding: 22px; background: rgba(26,26,26,.55); }
.wc-install-pop-wrap.show { display: flex; }
.wc-install-pop { background: var(--card); border: 1px solid var(--card-line); border-radius: var(--radius); max-width: 380px; width: 100%; padding: 24px 22px; box-shadow: 0 18px 50px rgba(0,0,0,.25); }
.wc-install-pop h3 { font-family: 'Fraunces', serif; font-size: 21px; margin: 0 0 8px; color: var(--ink); }
.wc-install-pop p { font-size: 13.5px; color: #444; margin: 0 0 12px; line-height: 1.5; }
.wc-install-pop ol { margin: 0 0 14px; padding-left: 20px; font-size: 13.5px; color: #444; line-height: 1.6; }
.wc-install-pop .wc-ip-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.wc-install-pop .wc-ip-later { background: transparent; border: 1px solid var(--card-line); color: var(--ink); border-radius: 8px; padding: 9px 14px; font: 600 13px 'DM Sans', sans-serif; cursor: pointer; }
.wc-install-pop .wc-ip-never { background: none; border: none; color: #8a8378; font: 500 12px 'DM Sans', sans-serif; cursor: pointer; text-decoration: underline; margin-top: 12px; padding: 0; }

/* ============================================================
   CHOOSE YOUR JOURNEY  (home page, sits above the ticker)
   Two photo choice-cards, side by side. Picking one fades the
   other out and expands the chosen card to the full section
   width, revealing its content panel underneath. The trailing
   arrow-circle on the chosen card turns into a close (X).
   Every colour + font is pulled from the site tokens so this
   section matches the rest of the page exactly.
   ============================================================ */
.jrn { margin: /*34*/ 25px 0 6px; }

/* ---- Choice row: two photo buttons ---- */
.jrn-choice { display: flex; gap: 18px; margin-bottom: 4px; }
.jrn-opt { position: relative; flex: 1 1 0; min-width: 0; height: 98.8px;
  border: none; border-radius: var(--radius); overflow: hidden; cursor: pointer; padding: 0;
  text-align: left; font: inherit; opacity: 1;
  transition: flex-grow .4s ease, flex-basis .4s ease, opacity .3s ease, margin .4s ease; }
.jrn-choice[data-picked] .jrn-opt { flex-grow: 0; flex-basis: 0; opacity: 0; margin: 0; pointer-events: none; }
.jrn-choice[data-picked="guided"] .jrn-opt-guided,
.jrn-choice[data-picked="wander"] .jrn-opt-wander { flex-grow: 1; flex-basis: 100%; opacity: 1; pointer-events: auto; }
.jrn-opt-bg { position: absolute; inset: 0; background-size: cover; background-position: center 30%; }
.jrn-opt-wander .jrn-opt-bg { background-image: linear-gradient(135deg, #2c2019, #17130f); }
.jrn-opt-glyph { position: absolute; right: -18px; bottom: -22px; width: 160px; height: 160px; color: rgba(255,255,255,.07); }
.jrn-opt-scrim { position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,8,6,.88) 0%, rgba(10,8,6,.74) 48%, rgba(10,8,6,.32) 100%); }
.jrn-opt-body { position: relative; height: 100%; display: flex; align-items: center; gap: 14px; padding: 18px 66px 18px 20px; }
.jrn-opt-ico { flex: none; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--terracotta); color: #fff; }
.jrn-opt-wander .jrn-opt-ico { background: #fff; color: var(--ink); }
.jrn-opt-ico svg { width: 20px; height: 20px; }
.jrn-opt-text { color: #fff; min-width: 0; }
.jrn-opt-title { display: block; font-family: 'Fraunces', serif; font-weight: 700; font-size: 19px; }
.jrn-opt-sub { display: block; font: 400 13px 'DM Sans', sans-serif; color: rgba(255,255,255,.8); margin-top: 4px; line-height: 1.4; max-width: 360px; }
.jrn-opt-arrow { position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--terracotta); color: #fff; transition: filter .15s ease; }
.jrn-opt-wander .jrn-opt-arrow { background: #fff; color: var(--ink); }
.jrn-opt-arrow svg { width: 17px; height: 17px; position: absolute; }
.jrn-opt-arrow .jrn-x { opacity: 0; transform: rotate(-45deg); transition: opacity .15s ease, transform .2s ease; }
.jrn-opt-arrow .jrn-go { opacity: 1; transition: opacity .15s ease; }
.jrn-opt.chosen .jrn-opt-arrow .jrn-go { opacity: 0; }
.jrn-opt.chosen .jrn-opt-arrow .jrn-x { opacity: 1; transform: rotate(0deg); }
.jrn-opt:hover .jrn-opt-arrow { filter: brightness(1.08); }
.jrn-opt:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 2px; }

/* Mobile: stack the two journey choices vertically so each card uses the
   full content width. The picked-card overrides preserve the expand/close
   interaction without leaving an empty collapsed row. */
@media (max-width: 640px) {
  .jrn-choice {
    flex-direction: column;
    gap: 14px;
  }
  .jrn-opt {
    flex: 0 0 auto;
    width: 100%;
    height: 109.2px;
  }
  .jrn-choice[data-picked] .jrn-opt {
    flex: 0 0 0;
    height: 0;
    min-height: 0;
  }
  .jrn-choice[data-picked="guided"] .jrn-opt-guided,
  .jrn-choice[data-picked="wander"] .jrn-opt-wander {
    flex: 0 0 auto;
    width: 100%;
    height: 109.2px;
  }
  .jrn-opt-body {
    padding: 18px 64px 18px 18px;
  }
}

/* ---- Revealed content ---- */
.jrn-reveal { display: none; }
.jrn-reveal.on { display: block; margin-top: 22px; animation: jrnFade .3s ease; }
.jrn-panel { display: none; }
.jrn-panel.on { display: block; animation: jrnFade .25s ease; }
@keyframes jrnFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Rust CTA button at the bottom of each journey panel — matches the
   "Need a Gift Idea?" button (base .btn font/size), left-aligned. */
.jrn-cta-row { display: flex; justify-content: flex-start; margin: 28px 0 8px; }
.jrn-cta-btn { background: var(--rust); border-color: var(--rust); color: var(--cream); }
.jrn-cta-btn:hover, .jrn-cta-btn:focus { background: var(--terracotta); border-color: var(--terracotta); color: var(--cream); }

/* placeholder for the sections we'll fill in later */
.jrn-empty { border: 1px dashed var(--card-line); border-radius: var(--radius);
  padding: 40px 20px; text-align: center; color: var(--faint);
  background: rgba(255,255,255,.4); font-size: 14px; }

/* ---- Know your styles: compact seven-card guide ---- */
.style-guide-intro {
  max-width: 900px;
  margin: -2px 0 18px;
  color: var(--sub);
  font-size: 14px;
  line-height: 1.65;
}
.style-guide-intro p { margin: 0; }
.style-guide-intro strong { color: var(--ink); font-weight: 700; }
.style-guide-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 36px;
}
.style-guide-card {
  min-width: 0;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: 16px;
  box-shadow: 0 7px 20px rgba(25,16,9,.06);
  transition: transform .18s ease, box-shadow .18s ease;
}
.style-guide-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(25,16,9,.1);
}
.style-guide-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 8.7;
  overflow: hidden;
  background: #2b211b;
}
.style-guide-photo::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 34%;
  background: linear-gradient(to bottom, rgba(25,16,9,0), rgba(25,16,9,.16));
  pointer-events: none;
}
.style-guide-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.style-guide-card:hover .style-guide-photo img { transform: scale(1.025); }
.style-guide-body { padding: 14px 15px 16px; }
.style-guide-kicker {
  color: var(--terracotta);
  font: 700 11px/1.3 'DM Sans', sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.style-guide-body h3 {
  margin: 0;
  color: var(--ink);
  font: 700 17px/1.2 'Fraunces', serif;
}
.style-guide-notes {
  margin-top: 8px;
  color: #6d4b3b;
  font: 700 11.5px/1.35 'DM Sans', sans-serif;
  letter-spacing: .015em;
}
.style-guide-notes span { color: var(--terracotta); padding: 0 2px; }
.style-guide-body p {
  margin: 9px 0 0;
  color: var(--sub);
  font-size: 12.5px;
  line-height: 1.5;
}
@media (max-width: 1050px) {
  .style-guide-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .style-guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
@media (max-width: 520px) {
  .style-guide-intro { font-size: 13.5px; line-height: 1.58; }
  .style-guide-grid { grid-template-columns: 1fr; }
  .style-guide-card { display: grid; grid-template-columns: 42% minmax(0, 1fr); }
  .style-guide-photo { aspect-ratio: auto; min-height: 180px; height: 100%; }
  .style-guide-body { padding: 13px 13px 14px; }
  .style-guide-body h3 { font-size: 16px; }
  .style-guide-body p { font-size: 12px; }
}

/* ---- How to Taste interactive walkthrough ---- */
.taste-layout {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 18px;
  align-items: stretch;
  margin: 0 0 34px;
}

.taste-photo {
  min-width: 0;
  height: 430px;
  border: 1px solid var(--card-line);
  border-radius: 18px;
  overflow: hidden;
  background: #2a211b;
}

.taste-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% center;
  display: block;
}

.taste-card {
  min-width: 0;
  height: 430px;                 /* locked so no step can resize the panel */
  background: #fbf8f2;
  border: 1px solid #ded3c0;
  border-radius: 18px;
  padding: 30px 34px 28px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(26,26,26,.02);
}

.taste-progress-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  flex: 0 0 auto;
}

.taste-progress-track {
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: #e5ded1;
}

.taste-progress-fill {
  height: 100%;
  width: 25%;
  border-radius: inherit;
  background: var(--terracotta);
  transition: width .28s ease;
}

.taste-step-count {
  white-space: nowrap;
  font: 700 16px 'DM Sans', sans-serif;
  color: var(--sub);
  letter-spacing: .01em;
}

/* Fixed content grid: icon, title and description always occupy the same space. */
.taste-content {
  height: 270px;
  flex: 0 0 270px;
  display: grid;
  grid-template-rows: 78px 66px 92px;
  justify-items: center;
  align-content: center;
  text-align: center;
  padding: 14px 12px 10px;
  overflow: hidden;
}

.taste-icon {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  background: #f2e1d3;
  color: var(--terracotta);
  margin: 0;
}

.taste-icon svg {
  width: 35px;
  height: 35px;
  display: block;
}

.taste-title {
  width: 100%;
  max-width: 650px;
  height: 66px;                  /* same title space on all four steps */
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 clamp(24px, 2.05vw, 30px)/1.08 'Fraunces', serif;
  color: var(--ink);
  text-align: center;
  overflow: hidden;
}

.taste-body {
  width: 100%;
  max-width: 620px;
  height: 92px;                  /* same descriptor space on all four steps */
  margin: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  color: var(--sub);
  font: 400 14px/1.42 'DM Sans', sans-serif !important;
  text-align: center;
  overflow: hidden;
}

/* Smooth fade + slide whenever the content changes. */
.taste-content.taste-step-animate {
  animation: tasteStepIn .30s ease both;
}

@keyframes tasteStepIn {
  from {
    opacity: 0;
    transform: translateX(14px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.taste-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  flex: 0 0 auto;
}

.taste-btn {
  min-width: 118px;
  min-height: 48px;
  border-radius: 999px;
  padding: 12px 22px;
  border: 1px solid var(--card-line);
  background: #fff;
  color: var(--ink);
  font: 700 14px 'DM Sans', sans-serif;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .08s ease;
}

.taste-btn:hover:not(:disabled) {
  border-color: #cfc3af;
  background: #f8f3ea;
}

.taste-btn:active:not(:disabled) {
  transform: translateY(1px);
}

.taste-btn.next {
  border-color: var(--terracotta);
  background: var(--terracotta);
  color: #fff;
}

.taste-btn.next:hover:not(:disabled) {
  background: #a5451a;
  border-color: #a5451a;
}

.taste-btn:disabled {
  cursor: default;
  opacity: .38;
}

.taste-btn:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
}

@media (max-width: 800px) {
  .taste-layout {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .taste-photo {
    height: clamp(230px, 62vw, 360px);
  }

  .taste-photo img {
    object-position: 55% center;
  }

  .taste-card {
    height: 420px;
    padding: 24px 22px 22px;
  }

  .taste-content {
    height: 272px;
    flex-basis: 272px;
    grid-template-rows: 74px 68px 94px;
    padding: 12px 4px 8px;
  }

  .taste-title {
    height: 68px;
    font-size: 27px;
  }

  .taste-body {
    height: 94px;
    font-size: 13.5px !important;
    line-height: 1.4 !important;
  }
}

@media (max-width: 480px) {
  .taste-progress-row {
    gap: 12px;
  }

  .taste-step-count {
    font-size: 14px;
  }

  .taste-card {
    height: 405px;
    padding: 20px 18px;
    border-radius: 16px;
  }

  .taste-content {
    height: 258px;
    flex-basis: 258px;
    grid-template-rows: 66px 68px 94px;
    padding: 10px 0 6px;
  }

  .taste-icon {
    width: 60px;
    height: 60px;
  }

  .taste-icon svg {
    width: 30px;
    height: 30px;
  }

  .taste-title {
    height: 68px;
    font-size: 24px;
    line-height: 1.08;
  }

  .taste-body {
    height: 94px;
    max-width: 100%;
    font-size: 13px !important;
    line-height: 1.38 !important;
  }

  .taste-btn {
    min-width: 104px;
    min-height: 46px;
    padding: 11px 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .taste-content.taste-step-animate {
    animation: none;
  }
}

/* ---- Quick Cocktails flip cards ---- */
.qc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.qc-card {
  perspective: 1500px;
  height: 360px;
  min-height: 360px;
  max-height: 360px;
  cursor: pointer;
}
.qc-inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100%;
  max-height: 100%;
  transition: transform .55s cubic-bezier(.2,.7,.2,1);
  transform-style: preserve-3d;
}
.qc-card:hover .qc-inner, .qc-card.flipped .qc-inner { transform: rotateY(180deg); }
.qc-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  max-height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  overflow: hidden;
}

/* front: photo occupies ~55% of the fixed-height card, then fades softly into cream */
.qc-front { background: var(--cream); border: 1px solid var(--card-line); }
.qc-photo-wrap { position: relative; height: 198px; flex: none; overflow: hidden;
  background: linear-gradient(160deg, #4a463f, #33302b); }
.qc-photo-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.qc-photo-wrap .qc-emoji { position: absolute; top: 44%; left: 50%; transform: translate(-50%, -50%); font-size: 32px; line-height: 1; }
.qc-photo-wrap .qc-soon { position: absolute; top: 60%; left: 50%; transform: translate(-50%, -50%);
  font: 700 11px 'DM Sans', sans-serif; letter-spacing: .09em; color: #cfc8ba; text-transform: uppercase; white-space: nowrap; }
.qc-photo-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 58px; pointer-events: none;
  background: linear-gradient(180deg, rgba(247,242,234,0) 0%, rgba(247,242,234,.42) 52%, var(--cream) 100%); }
.qc-front-body { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 0 22px 16px; }
.qc-front-body .qc-name {
  display: inline-flex; align-items: center; justify-content: center;
  width: auto; max-width: calc(100% - 18px);
  margin: -22px 0 10px; padding: 8px 18px;
  background: var(--rust); color: #fff;
  border-radius: 999px; line-height: 1.15;
  box-shadow: 0 2px 7px rgba(26,26,26,.10);
}
.qc-front-body .qc-desc { max-width: 235px; }

.qc-name { font-family: 'Fraunces', serif; font-weight: 700; font-size: 22px; line-height: 1.25; }
.qc-desc { color: var(--sub); font-size: 14px; line-height: 1.5; }
.qc-hint { margin-top: auto; padding-top: 14px; font: 700 13px 'DM Sans', sans-serif; color: var(--terracotta); }

.qc-divider { display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 0 0 14px; color: var(--terracotta); font-size: 11px; }
.qc-divider::before, .qc-divider::after { content: ""; width: 34px; height: 1px; background: var(--card-line); }

/* back */
.qc-back { position: relative; background: var(--ink); border: 1px solid var(--terracotta); padding: 26px 24px 22px;
  transform: rotateY(180deg); color: var(--cream); height: 100%; }
.qc-back .qc-name { color: var(--cream); text-align: center; margin: 0 0 14px; }
.qc-back .qc-divider::before, .qc-back .qc-divider::after { background: rgba(255,255,255,.25); }
.qc-glass { position: absolute; left: -18px; bottom: -16px; width: 155px; height: 165px; color: rgba(255,255,255,.07); pointer-events: none; }
.qc-ing { position: relative; z-index: 1; list-style: none; margin: 2px 0 0; padding: 0; }
.qc-ing li { position: relative; padding-left: 18px; font-size: 14.5px; color: #e7e2d8; line-height: 1.4; margin: 11px 0; }
.qc-ing li::before { content: ""; position: absolute; left: 0; top: .5em; width: 6px; height: 6px; border-radius: 50%; background: var(--terracotta); }
.qc-cta { position: relative; z-index: 1; margin-top: auto; padding-top: 16px; text-align: center; }
.qc-cta a { font: 700 13px 'DM Sans', sans-serif; color: var(--terracotta); }
.qc-cta a:hover { color: #fff; }

/* ---- Wandering: filter form ---- */
.jrn-filter { background: var(--card); border: 1px solid var(--card-line); border-radius: var(--radius); padding: 20px 22px; }
.jrn-filter h3 { font-family: 'Fraunces', serif; font-size: 18px; margin: 0 0 4px; }
.jrn-filter-sub { color: var(--sub); font-size: 13.5px; margin: 0 0 16px; }
.jrn-filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.jrn-filter .field { margin: 0; }
.jrn-filter-actions { margin-top: 18px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

/* ---- Browse by category ---- */
.bcat { margin-top: 30px; }
.bcat-head { border-bottom: 1px solid var(--card-line); padding-bottom: 8px; margin-bottom: 0; }
.bcat-head h3 { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 700; margin: 0; }
.bcat-sub { color: var(--sub); font-size: 14px; margin: 10px 0 18px; }
.bcat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.bcat-card { display: flex; align-items: center; gap: 14px; background: var(--card);
  border: 1px solid var(--card-line); border-radius: var(--radius); padding: 16px 18px;
  transition: border-color .15s ease, transform .15s ease; }
.bcat-card:hover { border-color: var(--terracotta); transform: translateY(-1px); }
.bcat-photo { flex: none; width: 78px; height: 68px; border-radius: 13px; overflow: hidden; background: var(--cream-2); box-shadow: inset 0 0 0 1px rgba(25,16,9,.08); }
.bcat-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 46%; transition: transform .2s ease; }
.bcat-card:hover .bcat-photo img { transform: scale(1.035); }
.bcat-txt { display: flex; flex-direction: column; min-width: 0; }
.bcat-name { font: 700 16px 'DM Sans', sans-serif; color: var(--ink); line-height: 1.2; }
.bcat-count { color: var(--faint); font-size: 13.5px; margin-top: 2px; }
@media (max-width: 560px) {
  .bcat-card { padding: 13px 14px; }
  .bcat-photo { width: 72px; height: 64px; }
}

/* ---------- Discovery Hub: photo category tiles ---------- */
.cat-tile-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin: 4px 0 28px; }
@media (max-width: 900px) { .cat-tile-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cat-tile-grid { grid-template-columns: 1fr; } }
.cat-tile {
  display: block; border-radius: var(--radius); overflow: hidden;
  background: var(--card); border: 1px solid var(--card-line);
  transition: transform .15s, box-shadow .15s;
}
.cat-tile:hover, .cat-tile:focus-visible { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(26,26,26,.14); }
.cat-tile-active { border-color: var(--terracotta); box-shadow: 0 0 0 2px var(--terracotta) inset; }
.cat-tile-disabled { cursor: default; }
.cat-tile-disabled:hover { transform: none; box-shadow: none; }
.cat-tile-img-wrap { position: relative; display: block; overflow: hidden; }
.cat-tile-img { display: block; width: 100%; aspect-ratio: 4 / 3; background-size: cover; background-position: center; background-color: #e7ddc9; }
.cat-tile-img-wrap::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(to bottom, rgba(255,255,255,0), #fff); pointer-events: none; }
.cat-tile-disabled .cat-tile-img { filter: saturate(.75) brightness(1.02); }
.cat-tile-count-pill { position: absolute; top: 10px; right: 10px; font: 700 11px 'DM Sans'; background: rgba(23,19,15,.72); color: #fff; padding: 4px 11px; border-radius: 999px; z-index: 2; letter-spacing: .3px; }
.cat-tile-body { padding: 14px 14px 18px; text-align: center; }
.cat-tile-name { display: block; font: 700 19px 'Fraunces', serif; color: var(--ink); line-height: 1.15; margin-bottom: 10px; }
.cat-tile-explore { display: block; font: 600 12.5px 'DM Sans'; color: var(--terracotta); text-align: center; }
.cat-tile-explore:hover { text-decoration: underline; }
.cat-tile-btn-soon { display: inline-block; font: 700 12.5px 'DM Sans'; padding: 8px 22px; border-radius: 999px; background: transparent; color: var(--terracotta); border: 0px solid var(--terracotta); opacity: .75; }

/* Discovery Hub: "browse everything" link under the category tiles */
.hub-browse-all { text-align: center; margin: 4px 0 34px; }
.hub-browse-all-link { display: inline-flex; align-items: center; gap: 7px; font: 700 14.5px 'DM Sans'; color: var(--terracotta); transition: color .15s; }
.hub-browse-all-link:hover, .hub-browse-all-link:focus-visible { color: var(--rust); }
.hub-browse-all-arrow { flex: none; transition: transform .15s; }
.hub-browse-all-link:hover .hub-browse-all-arrow, .hub-browse-all-link:focus-visible .hub-browse-all-arrow { transform: translateX(3px); }

/* ---------- Discovery Hub: dark-brown Filters card ---------- */
.disco-filters { background: linear-gradient(135deg, #2c2019, #17130f); border-radius: var(--radius);
  padding: 22px 24px; margin: 4px 0 28px; }
.disco-filters h3 { font-family: 'Fraunces', serif; font-size: 19px; font-weight: 700; color: #f7f2ea; margin: 0 0 6px; }
.disco-filters .df-rule { width: 46px; height: 3px; background: var(--terracotta); border: none; margin: 0 0 12px; border-radius: 2px; }
.disco-filters .df-sub { color: rgba(247,242,234,.72); font-size: 13.5px; margin: 0 0 18px; }
.disco-filters .jrn-filter-grid { margin-bottom: 0; }
.disco-filters .field label { color: #f7f2ea; }
.disco-filters .field select { border: none; }
.disco-filters .df-actions { margin-top: 18px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.disco-filters .df-clear { color: rgba(247,242,234,.78); font: 600 13px 'DM Sans'; }
.disco-filters .df-clear:hover { color: #fff; }

/* Starter-bottle category intro */
.starter-edu { margin: 0 0 22px; }
.starter-edu-toggle { width:100%; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:16px 18px; border:1.5px solid var(--terracotta); border-radius:14px; background:transparent; color:var(--ink); font:700 15px 'DM Sans'; text-align:left; cursor:pointer; }
.starter-edu-toggle .starter-edu-action { color:var(--terracotta); white-space:nowrap; }
.starter-edu-panel { position:relative; margin-top:10px; padding:20px; border:1px solid var(--line); border-radius:14px; background:#fff; display:grid; grid-template-columns:minmax(190px,270px) 1fr; gap:24px; align-items:center; }
.starter-edu-panel[hidden] { display:none; }
.starter-edu-img { width:100%; aspect-ratio:4/5; border-radius:10px; background-size:cover; background-position:center; background-color:var(--cream-2); }
.starter-edu-visual { position:relative; z-index:2; width:100%; aspect-ratio:4/5; border-radius:10px; overflow:hidden; background-color:var(--cream-2); }
.starter-edu-visual .starter-edu-img { position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; border-radius:0; }
/* The clickable hotspot remains comfortably large, while its visible UI is a small discovery dot. */
.starter-hotspot { position:absolute; z-index:3; appearance:none; -webkit-appearance:none; border:0; border-radius:9px; background:transparent; cursor:pointer; outline-offset:2px; }
.starter-hotspot::before { content:""; position:absolute; inset:0; border:1.5px solid transparent; border-radius:8px; background:rgba(227,155,45,0); box-shadow:0 0 0 rgba(227,155,45,0); transition:border-color .22s ease,background .22s ease,box-shadow .22s ease; pointer-events:none; }
.starter-hotspot::after { content:""; position:absolute; left:50%; top:50%; width:11px; height:11px; transform:translate(-50%,-50%); border-radius:50%; background:#e39b2d; border:2px solid rgba(255,255,255,.92); box-shadow:0 0 0 3px rgba(227,155,45,.22),0 0 10px rgba(227,155,45,.6); transition:transform .2s ease,box-shadow .2s ease,background .2s ease; pointer-events:none; }
.starter-hotspot:hover::before,.starter-hotspot:focus-visible::before,.starter-hotspot.is-active::before { border-color:rgba(227,155,45,.86); background:rgba(227,155,45,.055); box-shadow:inset 0 0 14px rgba(227,155,45,.08),0 0 12px rgba(227,155,45,.16); }
.starter-hotspot:hover::after,.starter-hotspot:focus-visible::after,.starter-hotspot.is-active::after { transform:translate(-50%,-50%) scale(1.18); box-shadow:0 0 0 4px rgba(227,155,45,.24),0 0 15px rgba(227,155,45,.82); }
.starter-hotspot.is-active::after { background:#b96f1e; }
.starter-hotspot.is-intro::after { animation:starterDiscoveryPulse 1.15s ease-out 2; }
@keyframes starterDiscoveryPulse { 0% { box-shadow:0 0 0 0 rgba(227,155,45,.56),0 0 11px rgba(227,155,45,.72); } 68% { box-shadow:0 0 0 13px rgba(227,155,45,0),0 0 18px rgba(227,155,45,.85); } 100% { box-shadow:0 0 0 0 rgba(227,155,45,0),0 0 11px rgba(227,155,45,.72); } }
.starter-edu-connector { position:absolute; inset:0; z-index:1; width:100%; height:100%; overflow:visible; pointer-events:none; opacity:0; }
.starter-edu-connector line { stroke:#e39b2d; stroke-width:1.6; stroke-linecap:round; filter:drop-shadow(0 0 3px rgba(227,155,45,.35)); }
.starter-edu-connector.is-drawing { opacity:.72; }
.starter-edu-connector.is-drawing line { animation:starterConnectorDraw .42s ease-out both; }
@keyframes starterConnectorDraw { from { stroke-dashoffset:1; opacity:.05; } 35% { opacity:.9; } to { stroke-dashoffset:0; opacity:.72; } }
@media (prefers-reduced-motion:reduce){ .starter-hotspot.is-intro::after,.starter-edu-connector.is-drawing line { animation:none; } .starter-hotspot::before,.starter-hotspot::after,.starter-edu-detail { transition:none; } }
.starter-edu-kicker { display:block; margin-bottom:10px; color:var(--faint); font:700 12px 'DM Sans'; letter-spacing:.08em; text-transform:uppercase; }
.starter-edu-copy { position:relative; z-index:2; }
.starter-edu-copy h3 { margin:0 0 10px; font:700 22px 'Fraunces',serif; }
.starter-edu-copy p { margin:0; color:var(--muted); line-height:1.6; }
.starter-edu-terms { margin:16px 0 0; display:grid; gap:10px; }
.starter-edu-term { padding-top:10px; border-top:1px solid var(--line); }
.starter-edu-term strong { display:block; margin-bottom:3px; }
.starter-edu-interactive-help { margin-top:14px !important; font-size:13px; color:var(--faint) !important; }
.starter-edu-detail { margin-top:18px; padding-top:16px; border-top:1px solid var(--line); opacity:1; transform:translateY(0); transition:opacity .2s ease,transform .2s ease; }
.starter-edu-detail.is-changing { opacity:.28; transform:translateY(4px) scale(.992); }
.starter-edu-detail.is-revealed { animation:starterDetailReveal .28s ease-out both; }
@keyframes starterDetailReveal { from { opacity:.3; transform:translateY(5px) scale(.992); } to { opacity:1; transform:translateY(0) scale(1); } }
.starter-edu-detail-count { display:block; margin-bottom:6px; color:var(--terracotta); font:700 11px 'DM Sans'; letter-spacing:.08em; text-transform:uppercase; }
.starter-edu-detail strong { display:block; margin-bottom:6px; font-size:18px; color:var(--ink); }
.starter-edu-detail span:last-child { color:var(--muted); line-height:1.6; }
.starter-lineup-cta { display:flex; justify-content:center; margin:28px 0 8px; }
.starter-lineup-cta .btn { text-decoration:none; }
.starter-category-nav { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:18px 0 30px; }
.starter-category-nav-link { display:flex; align-items:center; gap:12px; min-width:0; padding:14px 16px; border:1px solid var(--line); border-radius:13px; background:#fff; color:var(--ink); text-decoration:none; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.starter-category-nav-link:hover,.starter-category-nav-link:focus-visible { transform:translateY(-2px); border-color:rgba(169,84,43,.48); box-shadow:0 8px 24px rgba(25,16,9,.08); }
.starter-category-nav-link.is-next { justify-content:flex-end; text-align:right; }
.starter-category-nav-link small { display:block; margin-bottom:2px; color:var(--faint); font:700 10px 'DM Sans'; letter-spacing:.08em; text-transform:uppercase; }
.starter-category-nav-link strong { display:block; overflow:hidden; text-overflow:ellipsis; font:700 14px 'DM Sans'; }
@media (prefers-reduced-motion:reduce){ .starter-category-nav-link,.starter-edu-detail.is-revealed { animation:none; transition:none; } }
@media (max-width:700px){
  .starter-edu-panel { grid-template-columns:1fr; }
  /* Keep the rendered bottle and its hotspot coordinate layer in one box.
     Previously only the image was capped at 240px, so the overlay expanded
     to the full mobile card width and the hotspots drifted off the label. */
  .starter-edu-visual,
  .starter-edu-panel > .starter-edu-img { width:100%; max-width:280px; justify-self:center; }
  .starter-edu-visual .starter-edu-img { max-width:none; }
  .starter-edu-connector { display:none; }
  .starter-hotspot::after { width:12px; height:12px; }
  .starter-hotspot { min-width:36px; min-height:36px; }
  .starter-edu-toggle { align-items:flex-start; }
  .starter-category-nav { grid-template-columns:1fr; }
  .starter-category-nav-link { min-height:64px; }
}

@media (max-width: 640px) {
  .qc-grid { grid-template-columns: 1fr; }
  .qc-card {
    height: 360px;
    min-height: 360px;
    max-height: 360px;
  }
}

/* touch screens: don't flip on emulated-hover, tap toggles instead */
@media (hover: none) {
  .qc-card:hover .qc-inner { transform: none; }
  .qc-card.flipped .qc-inner { transform: rotateY(180deg); }
}

/* ============================================================
   Additional styles extracted from later inline blocks
   ============================================================ */

#wb-chat-root { position: fixed; z-index: 500; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); right: 18px;
    font-family: 'DM Sans', sans-serif; font-size: 15px; line-height: 1.5; }

  /* Floating launcher: label pill + Aidan's face */
  #wb-launcher { display: flex; align-items: center; gap: 10px;
    background: none; border: none; padding: 0; cursor: pointer; }
  #wb-launch-label { background: #a5432b; border: 1px solid #a5432b; color: #ffffff;
    font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600;
    padding: 10px 14px; border-radius: 999px;
    box-shadow: 0 4px 14px rgba(26,26,26,.12); white-space: nowrap; }
  #wb-face { width: 62px; height: 62px; border-radius: 50%; object-fit: cover;
    border: 2px solid #c1531f; background: #f7f2ea;
    box-shadow: 0 4px 14px rgba(26,26,26,.18); }
  #wb-launcher { transition: transform .16s ease; }
  #wb-launcher:hover { transform: translateY(-2px); }
  #wb-launcher:focus-visible { outline: 3px solid #c1531f; outline-offset: 4px; border-radius: 999px; }

  /* Panel */
  #wb-panel { display: none; flex-direction: column; overflow: hidden;
    width: 360px; height: 520px; max-height: calc(100vh - 120px);
    background: #ffffff; color: #1a1a1a;
    border: 1px solid #e3dccc; border-radius: 12px;
    box-shadow: 0 12px 40px rgba(26,26,26,.18);
    position: absolute; bottom: 78px; right: 0; }
  #wb-panel.wb-open { display: flex; animation: wb-rise .2s ease; }
  @keyframes wb-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) { #wb-panel.wb-open { animation: none; } #wb-launcher { transition: none; } }

  #wb-header { display: flex; align-items: center; gap: 10px;
    padding: 14px 16px; background: #f7f2ea; border-bottom: 1px solid #e3dccc; }
  #wb-header img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
    border: 2px solid #c1531f; }
  #wb-header h3 { margin: 0; font-family: 'Fraunces', serif; font-weight: 700;
    font-size: 17px; color: #c1531f; }
  #wb-header small { display: block; font-size: 12px; color: #555; margin-top: 1px; }
  #wb-close { margin-left: auto; background: none; border: none; color: #1a1a1a;
    opacity: .6; font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 6px; }
  #wb-close:hover { opacity: 1; }
  #wb-close:focus-visible { outline: 2px solid #c1531f; border-radius: 4px; }

  #wb-messages { flex: 1; overflow-y: auto; padding: 16px 14px;
    display: flex; flex-direction: column; gap: 10px; background: #ffffff; }
  .wb-msg { max-width: 86%; padding: 9px 13px; border-radius: 12px;
    white-space: pre-wrap; overflow-wrap: break-word; }
  .wb-msg.wb-bot  { background: #f7f2ea; border: 1px solid #e3dccc; color: #1a1a1a;
    align-self: flex-start; border-top-left-radius: 4px; }
  .wb-msg.wb-user { background: #1a1a1a; color: #f7f2ea;
    align-self: flex-end; border-bottom-right-radius: 4px; }
  .wb-msg.wb-typing { color: #c1531f; letter-spacing: 3px; }

  /* Starter question chips */
  #wb-starters { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
  .wb-chip { background: #f7f2ea; border: 1px solid #e3dccc; color: #444;
    font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 500;
    padding: 10px 16px; border-radius: 999px; cursor: pointer; text-align: left; }
  .wb-chip:hover { border-color: #c1531f; color: #1a1a1a; }
  .wb-chip:focus-visible { outline: 2px solid #c1531f; }

  #wb-form { display: flex; gap: 8px; padding: 12px;
    border-top: 1px solid #e3dccc; background: #f7f2ea; }
  #wb-input { flex: 1; min-width: 0; background: #ffffff; color: #1a1a1a;
    border: 1px solid #e3dccc; border-radius: 10px; padding: 10px 12px; font: inherit; }
  #wb-input::placeholder { color: #888; }
  #wb-input:focus-visible { outline: 2px solid #c1531f; }
  #wb-send { background: #1a1a1a; color: #f7f2ea; border: none; border-radius: 10px;
    padding: 0 16px; font-weight: 700; cursor: pointer; font: inherit; }
  #wb-send:hover { background: #333; }
  #wb-send:focus-visible { outline: 2px solid #c1531f; }
  #wb-send:disabled { opacity: .5; cursor: default; }
  #wb-snap { background: #ffffff; border: 1.5px solid #ddd3c2; color: #1a1a1a; border-radius: 10px;
    width: 42px; flex: none; display: flex; align-items: center; justify-content: center; cursor: pointer; }
  #wb-snap:hover { border-color: #c1531f; color: #c1531f; }
  #wb-snap:focus-visible { outline: 2px solid #c1531f; }
  #wb-snap:disabled { opacity: .5; cursor: default; }
  #wb-attach { display: none; }
  #wb-attach.on { display: flex; align-items: center; gap: 10px; padding: 10px 12px 0; }
  #wb-attach img { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; border: 1px solid #ddd3c2; display: block; }
  #wb-attach .wb-attach-note { font: 500 12px 'DM Sans', sans-serif; color: #666; flex: 1; }
  #wb-attach button { width: 22px; height: 22px; border-radius: 50%; border: none; background: #1a1a1a;
    color: #fff; font-size: 13px; line-height: 1; cursor: pointer; flex: none; }
  .wb-msg img.wb-photo { max-width: 160px; max-height: 200px; border-radius: 10px; display: block; }
  .wb-msg img.wb-photo + span { display: block; margin-top: 6px; }

  #wb-cta { display: none; flex: 1; text-align: center; text-decoration: none;
    background: #c1531f; color: #ffffff; border-radius: 10px;
    padding: 11px 14px; font-weight: 700; }
  #wb-cta:hover { background: #a5432b; }
  #wb-cta:focus-visible { outline: 2px solid #1a1a1a; }

  /* Taste quiz modal */
  .tq-overlay { position:fixed; inset:0; z-index:400; background:rgba(26,26,26,.5);
    display:flex; align-items:center; justify-content:center; padding:18px; overflow-y:auto; }
  .tq-card { background:var(--cream, #F7F2EA); border-radius:14px; padding:26px;
    max-width:520px; width:100%; max-height:92vh; overflow-y:auto; box-shadow:0 18px 50px rgba(26,26,26,.3); }
  .tq-q p { font:600 14px 'DM Sans'; margin:14px 0 8px; color:var(--ink, #1A1A1A); }
  .tq-opts { display:flex; gap:8px; flex-wrap:wrap; }
  .tq-opts button { background:#fff; border:1px solid var(--card-line, #e3dccc); color:var(--ink, #1A1A1A);
    font:500 13px 'DM Sans'; padding:9px 14px; border-radius:999px; cursor:pointer; }
  .tq-opts button.on { background:var(--terracotta, #c1531f); border-color:var(--terracotta, #c1531f); color:#fff; font-weight:600; }
  .tq-opts button:focus-visible { outline:2px solid var(--terracotta, #c1531f); outline-offset:2px; }
  .tq-progress { height:5px; background:#e9e2d2; border-radius:999px; overflow:hidden; margin-bottom:6px; }
  .tq-progress span { display:block; height:100%; background:var(--terracotta, #c1531f); border-radius:999px; transition:width .25s ease; }

  /* Gift selector — questions reuse the taste-quiz card look, but sit inline
     in the page (not a modal overlay). */
  .gift-stage { display:flex; justify-content:center; padding:8px 0 40px; }
  .gift-stage .tq-card { box-shadow:0 6px 22px rgba(26,26,26,.08); }
  .gift-summary { display:flex; gap:7px; flex-wrap:wrap; margin:2px 0 18px; }
  .gift-summary span { background:#fff; border:1px solid var(--card-line); border-radius:999px;
    padding:6px 12px; font:500 12.5px 'DM Sans'; color:var(--ink); }

  /* Member ratings */
  .rate-badge { display:inline-flex; align-items:center; gap:3px; font:700 12.5px 'DM Sans';
    color: var(--terracotta); }
  .rate-badge small { font-weight:500; color:#999; }
  .stars { display:inline-flex; gap:2px; }
  .stars .star { background:none; border:none; cursor:pointer; font-size:26px; line-height:1;
    color:#ddd3c2; padding:2px; }
  .stars .star.on { color: var(--terracotta); }
  .stars .star:hover { color: var(--terracotta); }
  .stars .star:focus-visible { outline:2px solid var(--terracotta); border-radius:4px; }
  .stars.static .star { font-size:17px; padding:0; cursor:default; position:relative; display:inline-block; color:#ddd3c2; }
  .stars.static .star .star-fill { position:absolute; left:0; top:0; width:var(--fill,0%);
    overflow:hidden; white-space:nowrap; color:var(--terracotta); pointer-events:none; }

  /* Reviews upgrade: pill, filter chips, review list, photos */
  .rating-pill { display:inline-flex; align-items:center; gap:5px; background:#fff;
    border:1px solid var(--terracotta); color:var(--terracotta);
    font:600 12.5px 'DM Sans'; padding:6px 13px; border-radius:999px; cursor:pointer; margin:2px 0 12px; }
  .rating-pill:hover { background:var(--terracotta); color:#fff; }
  .rating-pill:focus-visible { outline:2px solid var(--ink); }
  .rating-pill small { font-weight:500; opacity:.85; }
  /* Bottle detail: review pill + save pills. Stacked on phones, in a row on desktop. */
  .detail-pill-row { display:flex; flex-direction:column; align-items:flex-start;
    gap:8px; margin:2px 0 12px; }
  .detail-pill-row > div { display:contents; }
  .detail-pill-row .rating-pill { margin:0; }
  .detail-pill-row .save-pill { border-color:var(--card-line); color:var(--ink); }
  .detail-pill-row .save-pill:hover { background:var(--terracotta); border-color:var(--terracotta); color:#fff; }
  @media (min-width:641px){
    .detail-pill-row { flex-direction:row; flex-wrap:wrap; align-items:center; }
  }
  .rev-chip { background:#fff; border:1px solid var(--card-line); border-radius:999px;
    padding:6px 12px; font:500 12.5px 'DM Sans'; cursor:pointer; color:var(--ink); }
  .rev-chip.on { background:var(--terracotta); border-color:var(--terracotta); color:#fff; font-weight:600; }
  .rev-chip:focus-visible, #rev-q:focus-visible { outline:2px solid var(--terracotta); }
  .rev-item { padding:12px 0; border-bottom:1px solid var(--card-line); }
  .rev-item:last-child { border-bottom:none; padding-bottom:2px; }
  .rev-photos { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
  .rev-photos img { width:74px; height:74px; object-fit:cover; border-radius:8px;
    border:1px solid var(--card-line); display:block; }
  .rev-thumb { position:relative; display:inline-block; }
  .rev-thumb img { width:64px; height:64px; object-fit:cover; border-radius:8px;
    border:1px solid var(--card-line); display:block; }
  .rev-thumb button { position:absolute; top:-7px; right:-7px; width:20px; height:20px;
    border-radius:50%; border:none; background:#1a1a1a; color:#fff; font-size:12px;
    line-height:1; cursor:pointer; }
  .rev-add-photo { display:inline-flex; align-items:center; justify-content:center;
    width:64px; height:64px; border:1.5px dashed #ccc3b0; border-radius:8px;
    font:600 11px 'DM Sans'; color:#888; cursor:pointer; text-align:center; padding:4px; }
  .rev-add-photo:hover { border-color:var(--terracotta); color:var(--terracotta); }

  /* Member profiles & following */
  .mp-ava { border-radius:50%; object-fit:cover; border:1px solid var(--card-line); display:inline-block; vertical-align:middle; flex:none; }
  .mp-ava-fallback { display:inline-flex; align-items:center; justify-content:center;
    background:#e9e2d2; color:#a89b82; }
  .rev-who { display:inline-flex; align-items:center; gap:7px; text-decoration:none; }
  a.rev-who:hover b { color:var(--terracotta); }

  /* ---- Find People (My Account -> Find People) ---- */
  .fp-search-wrap { margin: 4px 0 22px; max-width: 480px; }
  .fp-search-input {
    width: 100%; padding: 12px 18px; font: 500 15px 'DM Sans'; color: var(--ink);
    background: #fff; border: 1px solid var(--card-line); border-radius: 999px;
    outline: none; transition: border-color .15s ease, box-shadow .15s ease;
  }
  .fp-search-input::placeholder { color: var(--faint); }
  .fp-search-input:focus { border-color: var(--terracotta); box-shadow: 0 0 0 3px rgba(193,83,31,.12); }
  .fp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
  .fp-tile { align-items: center; text-align: center; }
  .fp-tile-top { display: flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none; width: 100%; }
  .fp-tile-name { font: 700 15.5px 'DM Sans'; color: var(--ink); line-height: 1.3; }
  .fp-tile-top:hover .fp-tile-name { color: var(--terracotta); }
  .fp-tile-fy { font-weight: 500; color: var(--faint); }
  .fp-tile-reason { margin: 0; font-size: 12.5px; color: var(--faint); }
  .fp-tile-stats { margin: 0; font-size: 12.5px; color: var(--sub); }

  /* Home hero stat counters */
  .wc-stats { display: flex; gap: 30px; margin-top: auto; padding-top: 26px; flex-wrap: wrap; }
  .wc-stat { display: flex; flex-direction: column; gap: 2px; }
  .wc-stat-n { font: 700 26px 'Fraunces', serif; color: var(--ink); line-height: 1; letter-spacing: -.01em; }
  .wc-stat-l { font: 600 11px 'DM Sans', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
  @media (max-width: 800px) { .wc-stats { gap: 26px; padding-top: 20px; } .wc-stat-n { font-size: 23px; } }

  /* Native-app touch behavior (mobile / PWA) */
  html { -webkit-text-size-adjust: 100%; }
  html, body { overscroll-behavior-y: contain; }
  body { -webkit-tap-highlight-color: transparent; }
  a, button, input, textarea, select, label { touch-action: manipulation; }
  button, .btn, .pill, .rev-chip, .wc-tick-pill, .star, .wb-chip { -webkit-user-select: none; user-select: none; }
  @media (pointer: coarse) {
    /* iOS Safari zooms into any focused field under 16px \u2014 this stops it */
    input[type="text"], input[type="search"], input[type="email"],
    input[type="password"], input[type="tel"], input[type="date"],
    input:not([type]), textarea, select { font-size: 16px !important; }
  }

  /* Review reactions */
  .rx-row { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:8px; }
  .rx-chip { border:1px solid var(--card-line); background:#fff; border-radius:999px;
    padding:3px 10px; font:600 12.5px 'DM Sans',sans-serif; color:var(--ink); cursor:pointer; }
  .rx-chip.on { border-color:var(--terracotta); background:#fdf0e8; }
  .rx-chip:disabled, .rx-chip.static { cursor:default; }
  .rx-add { width:26px; height:26px; border-radius:50%; border:1px dashed #c9bda3;
    background:transparent; color:#8a7d63; font-size:15px; line-height:1; cursor:pointer; flex:none; }
  .rx-add:hover { border-color:var(--terracotta); color:var(--terracotta); }
  .rx-add-label { font:500 12.5px 'DM Sans',sans-serif; color:#8a7d63; cursor:pointer; align-self:center; }
  .rx-add-label:hover { color:var(--terracotta); }
  .rx-picker { display:inline-flex; gap:2px; align-items:center; background:#fff;
    border:1px solid var(--card-line); border-radius:999px; padding:2px 7px; }
  .rx-pick { background:none; border:none; font-size:17px; padding:2px 4px; cursor:pointer; border-radius:6px; }
  .rx-pick:hover { background:#f3ecdf; }

  /* Reaction "who reacted" lines */
  .rx-names { display:flex; flex-direction:column; gap:2px; margin-top:5px; }
  .rx-name-line { font:500 12px 'DM Sans',sans-serif; color:#8a8378; }

  /* Review popup (write / edit a review) */
  .rev-modal-overlay { position:fixed; inset:0; background:rgba(26,26,26,.45); z-index:9998;
    display:flex; align-items:center; justify-content:center; padding:18px; }
  .rev-modal { background:var(--card); border:1px solid var(--card-line); border-radius:var(--radius);
    padding:20px 22px; width:100%; max-width:460px; max-height:88vh; overflow:auto;
    box-shadow:0 18px 50px rgba(26,26,26,.28); }
  .rev-modal-x { width:28px; height:28px; border-radius:50%; border:none; background:transparent;
    color:var(--ink); font-size:20px; line-height:1; cursor:pointer; flex:none; }
  .rev-modal-x:hover { background:#eee4d3; }

  /* Inline "Ask Aidan" text link (opens the chat) */
  .aidan-link { background:none; border:none; padding:0; font:inherit; font-weight:600;
    color:var(--terracotta); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
  .aidan-link:hover { color:#a34015; }
  .aidan-link:focus-visible { outline:2px solid var(--terracotta); border-radius:4px; }

  /* "What members are pouring" ticker (home page) */
  .wc-pour { margin: 30px 0 36px; }
  .wc-pour-title { font-family:'Fraunces',serif; font-weight:700; font-size:22px; line-height:1.2;
    margin:0 0 16px; padding-bottom:8px; border-bottom:1px solid var(--card-line); color:var(--ink); }
  .wc-pour-title span { color:var(--terracotta); }
  @media (max-width:640px){ .wc-pour { margin:24px 0 30px; } }
  .wc-ticker { overflow:hidden; margin:0; }
  .wc-ticker-track { display:flex; width:max-content; animation:wc-tick 32s ease-in-out infinite; padding:11px 0; }
  .wc-ticker:hover .wc-ticker-track, .wc-ticker:focus-within .wc-ticker-track { animation-play-state:paused; }
  .wc-tick-half { display:flex; gap:10px; align-items:center; padding-right:10px; }
  .wc-ticker-track > span[aria-hidden] { display:contents; }
  .wc-tick-label { font:700 11px 'DM Sans',sans-serif; letter-spacing:.08em; text-transform:uppercase;
    color:var(--terracotta); white-space:nowrap; padding:0 6px 0 14px; }
  .wc-tick-pill { display:inline-flex; flex-direction:column; align-items:flex-start; gap:5px;
    white-space:nowrap; background:#fff; border:1px solid var(--card-line); border-radius:14px;
    padding:11px 16px; font:500 13px 'DM Sans',sans-serif; color:var(--ink); text-decoration:none; }
  .wc-tick-line1 { display:inline-flex; align-items:center; gap:7px; }
  .wc-tick-pill b { color:var(--terracotta); font-weight:700; }
  .wc-tick-pill .stars.static { display:inline-flex; gap:0; }
  .wc-tick-pill .stars.static .star { font-size:13px; line-height:1; }
  .wc-tick-name { font-weight:600; }
  .wc-tick-tag { font:700 9.5px 'DM Sans',sans-serif; letter-spacing:.07em; text-transform:uppercase;
    border-radius:999px; padding:3px 9px; line-height:1.2; }
  .wc-tick-tag.bottle { background:#f6e7da; color:#a34a1e; }
  .wc-tick-tag.cocktail { background:#e9ecdf; color:#5c6b45; }
  .wc-tick-quote { color:#8a8378; font-style:italic; max-width:250px; min-height:1.2em; line-height:1.2;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .wc-tick-pill:hover { border-color:var(--terracotta); color:var(--terracotta); }
  .wc-tick-pill:focus-visible { outline:2px solid var(--terracotta); }
  /* Eight rest-then-glide steps per loop: hold ~3.2s, slide ~0.8s.
     Ends exactly at -50% so the duplicated half makes the loop seamless. */
  @keyframes wc-tick {
    0%    { transform:translateX(0); }
    2.5%  { transform:translateX(-6.25%); }
    12.5% { transform:translateX(-6.25%); }
    15%   { transform:translateX(-12.5%); }
    25%   { transform:translateX(-12.5%); }
    27.5% { transform:translateX(-18.75%); }
    37.5% { transform:translateX(-18.75%); }
    40%   { transform:translateX(-25%); }
    50%   { transform:translateX(-25%); }
    52.5% { transform:translateX(-31.25%); }
    62.5% { transform:translateX(-31.25%); }
    65%   { transform:translateX(-37.5%); }
    75%   { transform:translateX(-37.5%); }
    77.5% { transform:translateX(-43.75%); }
    87.5% { transform:translateX(-43.75%); }
    90%   { transform:translateX(-50%); }
    100%  { transform:translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce) {
    .wc-ticker-track { animation:none; width:auto; flex-wrap:wrap; padding:11px 14px; }
    .wc-ticker-track > span[aria-hidden] { display:none; }
  }

  /* Sliding toggle switch (privacy setting) */
  .wc-switch-row { display:flex; align-items:flex-start; gap:12px; font-size:14px; cursor:pointer; }
  .wc-switch { position:relative; display:inline-block; width:44px; height:24px; flex:none; margin-top:2px; }
  .wc-switch input { position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; z-index:1; }
  .wc-switch-track { position:absolute; inset:0; background:#ddd3c2; border-radius:999px; transition:background .18s ease; }
  .wc-switch-track::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px;
    background:#fff; border-radius:50%; box-shadow:0 1px 3px rgba(26,26,26,.25); transition:transform .18s ease; }
  .wc-switch input:checked + .wc-switch-track { background:var(--terracotta); }
  .wc-switch input:checked + .wc-switch-track::after { transform:translateX(20px); }
  .wc-switch input:focus-visible + .wc-switch-track { outline:2px solid var(--terracotta); outline-offset:2px; }

  /* "Check it out" link pills under Aidan's answers */
  .wb-links { display: flex; flex-wrap: wrap; gap: 6px; align-self: flex-start; margin: -2px 0 2px 2px; }
  .wb-links a { display: inline-flex; align-items: center; gap: 5px;
    background: #fff; border: 1px solid #c1531f; color: #c1531f;
    font: 600 12.5px 'DM Sans', sans-serif; padding: 6px 12px; border-radius: 999px;
    text-decoration: none; }
  .wb-links a:hover { background: #c1531f; color: #fff; }
  .wb-links a:focus-visible { outline: 2px solid #1a1a1a; }
  .wb-links .wb-link-eyebrow { font-size: 10px; letter-spacing: .05em; text-transform: uppercase; opacity: .75; }

  /* Thumbs feedback under Aidan's answers */
  .wb-fb { display: flex; gap: 6px; margin: -4px 0 0 4px; align-self: flex-start; }
  .wb-fb button { background: none; border: 1px solid #e3dccc; border-radius: 999px;
    padding: 3px 9px; font-size: 13px; cursor: pointer; color: #888; line-height: 1.4; }
  .wb-fb button:hover { border-color: #c1531f; color: #1a1a1a; }
  .wb-fb button:focus-visible { outline: 2px solid #c1531f; }
  .wb-fb button.wb-fb-picked { border-color: #c1531f; color: #c1531f; background: #f7f2ea; }
  .wb-fb button:disabled { cursor: default; opacity: .8; }

  @media (max-width: 860px) {
    /* Launcher clears the iOS home bar */
    #wb-chat-root { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
    #wb-launch-label { font-size: 13px; padding: 9px 12px; }
    #wb-face { width: 56px; height: 56px; }

    /* On phones the chat TAKES OVER THE WHOLE SCREEN: a fixed, opaque sheet
       pinned to every edge, so nothing behind it is visible or reachable.
       100dvh is the reliable fallback; aidan.js refines the height via --wb-vh
       so the input row stays above the on-screen keyboard. */
    #wb-panel {
      position: fixed;
      left: 0; right: 0;
      top: var(--wb-vtop, 0px);
      bottom: auto;
      width: 100%;
      /* Full-screen height with layered fallbacks — each line overrides the
         previous ONLY if the browser understands it, so we always fill the
         screen no matter what:
           1) 100vh   — supported everywhere, incl. older iOS Safari
           2) 100dvh  — dynamic viewport height where supported
           3) --wb-vh — exact visible height set by aidan.js, which keeps the
              input row above the on-screen keyboard. Wins when present.
         Without line 1, an engine that lacks BOTH dvh and the JS var would
         drop this declaration and fall back to the 520px desktop panel — which
         is exactly the "only half the chat shows" bug. */
      height: 100vh;
      height: 100dvh;
      height: var(--wb-vh, 100dvh);
      max-height: none;
      border-radius: 0;
      border: none;
    }
    /* The message list is the only scroller; stop its scroll from chaining out
       to the page underneath. */
    #wb-messages { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

    /* While the sheet is open, hide the floating launcher so its pill + face
       can't sit on top of the input / Send button. (#wb-panel precedes
       #wb-launcher inside #wb-chat-root, so the sibling selector works.) */
    #wb-panel.wb-open ~ #wb-launcher { display: none; }

    /* Breathing room above the home bar when the keyboard is closed. */
    #wb-form { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }

    /* While the sheet is open aidan.js adds .wb-locked to <html> and pins
       <body>. This reinforces the freeze so the page behind can't scroll or
       rubber-band. NOTE: do NOT put touch-action:none here — it would also
       kill scrolling inside #wb-messages, since touch-action composes down the
       ancestor chain. The message list stays scrollable; a touchmove guard in
       aidan.js blocks scrolling anywhere else. */
    html.wb-locked, html.wb-locked body {
      overflow: hidden !important;
      overscroll-behavior: none;
    }
    #wb-messages { touch-action: pan-y; }
  }

/* Starter label UX: show the interactive bottle immediately, without the old
   "New to reading..." disclosure bar. */
.starter-edu-panel { margin-top:0; }
.starter-edu-visual-wrap { width:100%; min-width:0; }
@media (max-width:700px){
  .starter-edu-visual-wrap { width:100%; max-width:280px; justify-self:center; }
}

/* ---- Unified cocktail card catalog ----
   The Cocktails page now uses the same light-front / dark-back card component
   as the homepage Quick Cocktails section. */
.qc-grid-catalog {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  margin-bottom: 30px;
}
.qc-meta {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 8px;
}
.qc-meta > a {
  font: 700 11.5px 'DM Sans', sans-serif;
  color: #e7e2d8;
  border-bottom: 1px solid rgba(231,226,216,.35);
}
.qc-meta > a:hover { color: #fff; border-bottom-color: #fff; }
.qc-grid-catalog .qc-cta { margin-top: 0; padding-top: 12px; }

@media (max-width: 640px) {
  .qc-grid-catalog { grid-template-columns: 1fr; }
}


/* === Cocktail card bleed & pill sizing fix === */
.qc-card,
.qc-inner,
.qc-face{
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}
.qc-face{
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transform: translateZ(0);
}
.qc-front{transform:rotateY(0deg) translateZ(1px);}
.qc-back{transform:rotateY(180deg) translateZ(1px);}

.qc-name{
  font-size:16.5px;
  line-height:1.2;
}
.qc-front .qc-name{
  padding:6px 14px;
  margin:-18px 0 8px;
}

.category-intro{ max-width: 760px; margin: -10px 0 22px; }
.category-intro-text{
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--sub, #555);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* When the hidden checkbox is checked, show the full text */
.category-intro-toggle:checked ~ .category-intro-text{
  -webkit-line-clamp: unset;
  overflow: visible;
}
.category-intro-more{
  display: inline-block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent, #b45309);
  cursor: pointer;
  user-select: none;
}
.category-intro-more::after{ content: "Read more"; }
.category-intro-toggle:checked ~ .category-intro-more::after{ content: "Read less"; }