@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap');

/* ============================================================
   Whiskey Buddy — market dashboard (claude.ai design, 2026-05-30)
   cream page, espresso ink (#33241A), caramel accent (#a8692a),
   gold highlight (#e0a23e). Fredoka = the rounded wordmark voice.
   ============================================================ */
:root{
  --bg:#f7efe3; --bg-tint:#fdf8ef; --card:#fffdf9;
  --ink:#33241A; --ink-soft:#5b4a39; --muted:#9a8c79;
  --line:#e8ddc9; --line-soft:#f1e9da; --soft:#faf3e7;
  --accent:#a8692a; --accent-2:#c0792f; --accent-bg:#f6e9d2; --accent-line:#e4c89c;
  --gold:#e0a23e; --gold-soft:#f1c87a;
  --chip-bg:#f1e8d8;
  --green:#2f7a44; --green-bg:#eaf3e4; --green-line:#cfe0bd;
  --focus:#c98736;
  --round:'Fredoka',ui-rounded,'Segoe UI',system-ui,sans-serif;
  --sans:-apple-system,system-ui,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font:15px/1.5 var(--sans);margin:0;color:var(--ink);
  background:var(--bg);-webkit-font-smoothing:antialiased;}
.wrap{max-width:1180px;margin:0 auto;padding:0 1.4rem}
h1,h2,h3{font-family:var(--round);letter-spacing:-.01em;margin:0}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
.muted{color:var(--muted)} .note{color:var(--muted);font-size:.85rem;line-height:1.5}

/* ---------- Header ---------- */
/* Header chrome (.wb-header/.wb-brand/.wb-word/.wb-nav/…) is now the single
   source in static/css/wb-header.css, linked by every page. */

/* ---------- Hero (full-bleed espresso) ---------- */
.wb-hero{background:
    radial-gradient(120% 120% at 88% -10%,rgba(224,162,62,.20),transparent 55%),
    radial-gradient(90% 90% at 8% 120%,rgba(168,105,42,.18),transparent 60%),
    #33241A;
  color:#f7ecd9;position:relative;overflow:hidden;
  padding:3.2rem 0 4.4rem;border-bottom:1px solid #2a1d14}
.wb-hero-in{max-width:1180px;margin:0 auto;padding:0 1.4rem;position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:2.6rem}
.wb-hero-copy{min-width:0}
.wb-flags{width:296px;flex:none;align-self:start;margin-top:0;transform-origin:60% 30%;animation:flagSway 7.5s ease-in-out infinite}
.wb-flags svg{width:100%;height:auto;display:block;filter:drop-shadow(0 8px 16px rgba(0,0,0,.40))}
@keyframes flagSway{0%,100%{transform:rotate(-1.2deg)}50%{transform:rotate(1.2deg)}}
@media(max-width:960px){.wb-hero-in{grid-template-columns:1fr}.wb-flags{width:240px;margin-top:.6rem;order:2}}
@media(max-width:520px){.wb-flags{display:none}}
.wb-kicker{display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--round);font-weight:600;font-size:.8rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold-soft);margin-bottom:1.1rem}
.wb-kicker .star{color:var(--gold);opacity:.85}
.wb-hero h1{font-size:clamp(2.1rem,4.6vw,3.4rem);font-weight:600;line-height:1.04;
  color:#fdf4e4;max-width:16ch;letter-spacing:-.02em}
.wb-hero h1 em{font-style:normal;color:var(--gold)}
.wb-sub{margin:1rem 0 0;max-width:54ch;font-size:1.06rem;line-height:1.55;
  color:#d8c7b0}
.wb-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.9rem;margin:2rem 0 .2rem;max-width:680px}
.wb-metric{background:rgba(255,250,240,.055);border:1px solid rgba(241,200,122,.16);
  border-radius:14px;padding:.95rem 1.05rem}
.wb-metric .v{font-family:var(--round);font-weight:600;font-size:2rem;line-height:1;
  color:var(--gold);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.wb-metric .v small{font-size:.95rem;font-weight:500;color:var(--gold-soft);
  margin-left:.15rem}
.wb-metric .l{font-size:.82rem;line-height:1.35;color:#cdbba3;margin-top:.45rem}
.wb-caveat{margin:1.4rem 0 0;font-size:.83rem;line-height:1.55;
  color:#b3a288;max-width:72ch}
.wb-caveat code{background:rgba(255,250,240,.10);color:#f1d9b4;padding:.06em .4em;
  border-radius:5px;font-size:.92em}
@media (max-width:680px){
  .wb-hero{padding:2.4rem 0 3.6rem}
  .wb-metrics{grid-template-columns:1fr;gap:.6rem}
  .wb-metric{display:flex;align-items:baseline;gap:.7rem}
  .wb-metric .l{margin-top:0}
}

/* ---------- Command bar (search + filters), pulled onto hero ---------- */
main.wrap{padding-bottom:3rem}
.filters{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:1rem 1.1rem;margin:-2.4rem 0 1.8rem;position:relative;z-index:5;
  box-shadow:0 6px 24px rgba(51,36,26,.10),0 2px 6px rgba(51,36,26,.05);
  transition:border-color .15s,box-shadow .15s}
.filters:focus-within{border-color:var(--accent-line)}
form.f{display:flex;flex-direction:column;gap:.6rem;margin:0}
.filter-primary,.filter-secondary{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.filter-primary{position:relative}
.filter-primary input[name="q"]{flex:1 1 280px;font-size:1.02rem;padding:.7rem .9rem;
  border-radius:10px}
input,select,button{font:inherit;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:9px;padding:.5rem .65rem;
  transition:border-color .14s,box-shadow .14s}
input:focus,select:focus,button:focus,label.toggle:focus-within{outline:none;
  border-color:var(--focus);box-shadow:0 0 0 3px rgba(201,135,54,.20)}
select{cursor:pointer;max-width:220px}
button[type="submit"]{background:var(--accent);color:#fff;border-color:var(--accent);
  cursor:pointer;font-weight:600;font-family:var(--round);padding:.7rem 1.4rem;
  font-size:1rem;border-radius:10px;letter-spacing:.01em}
button[type="submit"]:hover{background:var(--accent-2)}
label.toggle{background:var(--accent-bg);border:1px solid var(--accent-line);
  border-radius:9px;padding:.5rem .8rem;font-size:.92rem;cursor:pointer;color:var(--accent);
  font-weight:500;display:inline-flex;align-items:center;gap:.45rem}
label.toggle input{margin:0;accent-color:var(--accent)}
.fr-note{font-size:.82rem;color:var(--muted);margin:.55rem 0 0;line-height:1.5}
.contrast-link{color:var(--muted)} .contrast-link:hover{color:var(--accent)}

/* ---------- Section header rhythm ---------- */
.picks{margin:2.2rem 0}
.picks-head{margin-bottom:.85rem}
.picks-head h2{font-size:1.18rem;font-weight:600;display:flex;align-items:center;gap:.55rem}
.picks-head h2::before{content:"";width:.52rem;height:1.05rem;border-radius:3px;
  background:linear-gradient(180deg,var(--gold),var(--accent));flex:none}
.picks-rule{margin:.35rem 0 0;font-size:.84rem;color:var(--muted);line-height:1.5;max-width:92ch}
.picks-featured{background:var(--bg-tint);border:1px solid var(--line);
  border-radius:18px;padding:1.3rem 1.4rem 1.5rem}
.picks-featured .picks-head h2{font-size:1.32rem}
.picks-link{text-decoration:none;color:inherit;display:inline-block}
.picks-link h2{cursor:pointer}
.picks-link:hover h2,.picks-link:focus-visible h2{color:var(--accent)}
.picks-link:hover h2::after{content:"\2192";font-weight:400;opacity:.7;margin-left:.1rem}

/* ---------- Cards ---------- */
/* flexbox (not grid) so a partial last row's tiles grow to fill the width
   instead of leaving a void beside them — e.g. when the Buddy rail is widened */
.card-grid{display:flex;flex-wrap:wrap;gap:.9rem;margin:0}
.card-grid>*{flex:1 1 244px;min-width:0}
.card-grid-compact{gap:.8rem}
.card-grid-compact>*{flex-basis:232px}
.card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:.85rem .9rem;display:flex;flex-direction:column;gap:.5rem;cursor:pointer;
  text-decoration:none;color:inherit;
  transition:border-color .16s,box-shadow .16s,transform .16s}
.card:hover{border-color:var(--accent-line);transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(51,36,26,.10);text-decoration:none}
/* stretched overlay link → the whole tile opens the bottle page; interactive
   children (the retailer deep-link) sit above it via z-index. */
.card-link{position:absolute;inset:0;z-index:1;border-radius:14px}
.card-link:hover{text-decoration:none}
.pm-ret-link{position:relative;z-index:2;color:var(--accent);font-weight:600}
.pm-ret-link:hover{text-decoration:underline}
.pm-ret-link .ext{font-size:.9em;opacity:.8}
.card .card-img-wrap{margin:-.85rem -.9rem .55rem;height:178px;display:block;background:#fff;
  border-bottom:1px solid var(--line-soft);border-radius:14px 14px 0 0;overflow:hidden;border:none}
.card .card-img-wrap img{width:100%;height:100%;object-fit:contain;padding:.7rem;display:block}
/* ---- per-user status badges (overlay on thumbnail, signed-in only) -------
   Anchored to the image (which is overflow:hidden) so they stay on the
   thumbnail in both the desktop tile and the mobile left-thumbnail row, at
   zero vertical cost. Sit above the stretched .card-link (z-index:1) like the
   retailer deep-link does, but pointer-events:none so the card link stays the
   click target. Markup is built in market.js badges(); flags only exist on the
   pool for a signed-in user, so nothing renders otherwise. */
.card .card-img-wrap{position:relative}
.card-badges{position:absolute;top:.45rem;left:.45rem;z-index:2;
  display:flex;flex-direction:column;gap:.3rem;align-items:flex-start;
  pointer-events:none}
/* per-card "Ask Buddy" flavour-preview button (ROADMAP #17). Overlay pill on the
   bottom-right of the thumbnail → zero vertical cost. Sits above the stretched
   .card-link (z-index:1) and IS interactive (pointer-events on), unlike the
   status badges; clicks are caught by delegation in wb-buddy.js. */
.card-buddy{position:absolute;right:.45rem;bottom:.45rem;z-index:2;
  display:inline-flex;align-items:center;gap:.32rem;cursor:pointer;
  font-family:var(--round);font-weight:600;font-size:.76rem;line-height:1;
  padding:.32rem .56rem;border-radius:999px;border:1px solid var(--accent-line);
  background:rgba(255,255,255,.94);color:var(--accent);
  box-shadow:0 1px 4px rgba(51,36,26,.18);
  transition:background .14s,border-color .14s,transform .14s}
.card-buddy:hover{background:#fff;border-color:var(--accent);transform:translateY(-1px)}
.card-buddy .star{font-size:.92em}
/* Mobile: the card shrinks to a small left thumbnail, so shrink the labelled
   "✦ Ask Buddy" chip to fit — keep the words (a bare star reads as decoration,
   not an action), just smaller. */
@media (max-width:600px){
  .card-buddy{font-size:.66rem;padding:.26rem .46rem;gap:.24rem;
    right:.3rem;bottom:.3rem}
}
.cbadge{display:inline-flex;align-items:center;gap:.18rem;font-family:var(--round);
  font-weight:700;font-variant-numeric:tabular-nums;line-height:1;
  box-shadow:0 1px 3px rgba(51,36,26,.18)}
.cbadge .cb-ic{font-size:.9em;line-height:1}
/* watch pills carry the dollar target; HIT (solid green) is the standout, SET
   (outlined amber, echoes the bottle-page status-chip "on" state) is quiet. */
.cbadge-hit,.cbadge-watch{font-size:.74rem;padding:.2rem .42rem;border-radius:999px;
  border:1px solid transparent}
.cbadge-hit{background:var(--green);color:#fff;box-shadow:0 1px 5px rgba(47,122,68,.45)}
.cbadge-watch{background:rgba(224,162,62,.18);color:#8a5a18;
  border-color:rgba(224,162,62,.5)}
/* shelf marks: icon-only discs on a ~92%-white fill so the glyph stays legible
   over dark bottle artwork or the white image margin alike. */
.cbadge-fav,.cbadge-buy{justify-content:center;width:20px;height:20px;
  border-radius:999px;font-size:.74rem;background:rgba(255,253,249,.92);
  border:1px solid var(--accent-line)}
.cbadge-fav{color:var(--gold)}
.cbadge-buy{color:var(--accent)}
.cbadge-buy svg{width:12px;height:12px;display:block}
/* Profile-match verdict (ROADMAP #13): a single tick / cross / question disc on
   the thumbnail's top-RIGHT — opposite the status badges, clear of the bottom-
   right Ask Buddy chip. Colour carries the call (green=fit, red=miss, amber=
   too-close); same disc footprint as the left-hand shelf marks. */
/* pointer-events:auto (NOT none) so the native title tooltip fires on hover —
   the disc then swallows clicks on its own ~22px corner, an acceptable trade for
   a hoverable "why". The rest of the card still routes to the stretched link. */
.card-verdict{position:absolute;top:.45rem;right:.45rem;z-index:3;pointer-events:auto;
  cursor:help;display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;
  border-radius:999px;font-family:var(--round);font-weight:800;font-size:.84rem;line-height:1;
  background:rgba(255,253,249,.94);border:1px solid var(--accent-line);
  box-shadow:0 1px 4px rgba(51,36,26,.2)}
.card-verdict.v-yes{color:var(--green);border-color:rgba(47,122,68,.5)}
.card-verdict.v-no{color:#b3402f;border-color:rgba(179,64,47,.5)}
.card-verdict.v-maybe{color:#8a5a18;border-color:rgba(224,162,62,.55)}
.card-verdict.v-fav{color:var(--gold);border-color:rgba(214,158,46,.55);cursor:default}
/* name clamped to exactly 2 lines so the price divider lands at the same
   height on every card in a row (even bar across the row). */
.card-name{font-weight:600;font-family:var(--round);font-size:1rem;line-height:1.25;
  color:var(--ink);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;min-height:2.5em}
.card:hover .card-name{color:var(--accent)}
.card-sub{font-size:.82rem;color:var(--muted);font-weight:500;margin:0;min-height:1.2em}
.card-sub strong{color:var(--ink-soft);font-weight:600}
.chip{padding:.14rem .5rem;border-radius:999px;font-size:.73rem;line-height:1.5;
  white-space:nowrap;font-weight:600;font-family:var(--round);
  background:var(--chip-bg);color:var(--ink-soft)}
.chip-brand{background:var(--accent-bg);color:var(--accent)}
.price-block{margin-top:auto;padding-top:.6rem;border-top:1px solid var(--line-soft)}
.price-label{font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);font-weight:700;margin-bottom:.18rem}
.price-amount{font-family:var(--round);font-size:1.5rem;font-weight:600;color:var(--accent);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;line-height:1.02}
.price-meta{font-size:.77rem;margin-top:.28rem;line-height:1.4;color:var(--muted)}
.price-meta .pm-line{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.price-meta .pm-date{color:var(--muted)}
.price-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex-wrap:wrap}

/* ---- US Price Index pills ---- */
.idx{display:inline-flex;align-items:center;gap:.18rem;font-family:var(--round);font-weight:600;
  font-size:.86rem;padding:.18rem .52rem;border-radius:999px;line-height:1;white-space:nowrap;border:1px solid transparent}
.idx small{font-size:.6rem;font-weight:600;opacity:.65;text-transform:uppercase;letter-spacing:.04em}
/* Clickable pill -> /v2/value leaderboard (focused on the bottle). The
   z-index lifts it above a card's stretched overlay link so it stays
   clickable; transition signals it's interactive. */
.idx-link{text-decoration:none;cursor:pointer;position:relative;z-index:2;transition:filter .12s,box-shadow .12s}
.idx-link:hover{text-decoration:none;filter:brightness(.95);box-shadow:0 1px 4px rgba(60,40,20,.18)}
/* The bottle a visitor clicked in from — flashed on the value leaderboard. */
.card.card-focus{outline:2px solid var(--accent,#c98736);outline-offset:2px;
  border-radius:14px;animation:cardFocusFlash 1.8s ease-out 1}
@keyframes cardFocusFlash{0%{box-shadow:0 0 0 0 rgba(201,135,54,.55)}
  30%{box-shadow:0 0 0 7px rgba(201,135,54,.22)}100%{box-shadow:0 0 0 0 rgba(201,135,54,0)}}
.idx-green{background:#e6f1e1;color:#2f7a33;border-color:#cfe3c2}
.idx-amber{background:#fbf0d2;color:#9a6a16;border-color:#ecd6a0}
.idx-red{background:#f7e0db;color:#b23b27;border-color:#eebfb4}
.chip-queen{background:#f7e2dd;color:#b23b27}
.chip-sweet{background:#f6e9d2;color:#a8692a}
.chip-delicate{background:#e2eef0;color:#2f6f7a}
.picks-tag{font-family:var(--round);font-weight:600;font-size:.68rem;text-transform:uppercase;
  letter-spacing:.06em;padding:.16rem .5rem;border-radius:999px;background:var(--chip-bg);
  color:var(--ink-soft);margin-left:.15rem;position:relative;top:-.08em}
.picks-tag.tag-low{background:#e6f1e1;color:#2f7a33}
.picks-tag.tag-high{background:#f7e0db;color:#b23b27}

/* ---- price history sparkline ---- */
/* Sparkline + a LABELLED price block: a "90-day price" caption, the actual
   range (carries the movement legibly), and a status line. Structured short
   lines so it reads clearly and never wraps into a tower (feedback 320615949
   + follow-up: movement must be visible and the meaning clear). */
.hist-row{display:flex;align-items:center;gap:.65rem;margin-top:.55rem;
  padding-top:.55rem;border-top:1px dashed var(--line-soft)}
.spark{flex:none;display:block}
.hist-meta{display:flex;flex-direction:column;gap:.04rem;min-width:0;line-height:1.2}
.hist-label{font-size:.62rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted)}
.hist-val{font-size:.92rem;font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.hist-val.is-low{color:#2f7a33}
.hist-sub{font-size:.72rem;font-weight:600;color:var(--muted)}
.hist-sub.is-low{color:#2f7a33}

/* ---------- US-index feature band ---------- */
.idx-feature{display:grid;grid-template-columns:1.5fr 1fr;gap:1.6rem;align-items:center;
  background:linear-gradient(120deg,#fffaf1,#f5ebdd);border:1px solid var(--accent-line);
  border-radius:18px;padding:1.2rem 1.4rem;margin:0 0 1.9rem}
.idx-feature h2{font-size:1.18rem;font-weight:600;margin-bottom:.35rem;display:flex;align-items:center;gap:.55rem}
.idx-feature h2::before{content:"";width:.52rem;height:1rem;border-radius:3px;background:linear-gradient(180deg,var(--gold),var(--accent))}
.idx-feature p{font-size:.92rem;line-height:1.6;color:var(--ink-soft);margin:0;max-width:62ch}
.idx-legend{display:flex;flex-direction:column;gap:.55rem}
.idx-legend .row{display:flex;align-items:center;gap:.6rem;font-size:.88rem;color:var(--ink-soft)}
.idx-legend .idx{min-width:92px;justify-content:center}
@media(max-width:780px){.idx-feature{grid-template-columns:1fr;gap:1rem}}

/* ---------- Panels ---------- */
.panel{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:1.1rem 1.3rem;margin:1.4rem 0}
.panel h2{font-size:1.1rem;font-weight:600;margin-bottom:.5rem;display:flex;
  align-items:center;gap:.55rem}
.panel h2::before{content:"";width:.52rem;height:1rem;border-radius:3px;
  background:linear-gradient(180deg,var(--gold),var(--accent))}
.facts-list{margin:.4rem 0;padding-left:1.2rem;line-height:1.85}
.facts-list strong{color:var(--accent)}
.ret-table{border-collapse:collapse;width:100%;font-size:.9rem;margin-top:.5rem}
.ret-table th,.ret-table td{padding:.45rem .6rem;border-bottom:1px solid var(--line-soft);
  text-align:left}
.ret-table th{font-weight:600;color:var(--muted);font-size:.78rem;text-transform:uppercase;
  letter-spacing:.04em;font-family:var(--round)}
.ret-table .num{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;position:relative;padding-left:1.4rem}
.ret-table tbody tr{transition:background .12s}
.ret-table tbody tr:hover{background:var(--soft)}
.ret-table tbody tr:last-child td{border-bottom:none}
.ret-bar{position:absolute;left:.6rem;top:50%;transform:translateY(-50%);
  height:.5rem;width:var(--w);max-width:calc(100% - 2.6rem);background:var(--accent-bg);
  border:1px solid var(--accent-line);border-radius:3px;z-index:0;opacity:.7}

/* Rich retailer table (landing "Where the market sits"): clickable rows + an
   inline win-rate meter alongside the stocks bar. */
.ret-table--rich tbody tr{cursor:pointer}
.ret-table--rich td.num{font-weight:600}
.ret-table--rich td:first-child a{font-weight:600}
/* The count cells are their own deep-links (stocked → full range, cheapest-on →
   wins). Render as data — inherit ink, no accent — with a dotted underline so
   the link affordance is discoverable without shouting. */
.ret-table--rich .cell-link{color:inherit;text-decoration:none;position:relative;z-index:1;
  border-bottom:1px dotted var(--accent-line);padding-bottom:1px}
.ret-table--rich .cell-link:hover{color:var(--accent);border-bottom-color:var(--accent)}
/* "Cheapest on" deep-link rendered as a classic blue link so the number reads
   as obviously clickable through to the retailer's price-floor wins. */
.ret-table--rich .cell-link--wins{color:#1f6fb8;border-bottom:1px solid #1f6fb8}
.ret-table--rich .cell-link--wins:hover{color:#155a98;border-bottom-color:#155a98}
.ret-rate{display:inline-flex;align-items:center;justify-content:flex-end;gap:.45rem}
.ret-rate-bar{display:inline-block;height:.5rem;width:46px;border-radius:3px;
  background:linear-gradient(90deg,var(--accent) 0,var(--accent) var(--r),
    var(--line-soft) var(--r),var(--line-soft) 100%);opacity:.85}
.ret-rate-n{min-width:2.6em;text-align:right;font-variant-numeric:tabular-nums}
/* Header labels carry a full (desktop) and short (mobile) form; only one shows. */
.ret-table--rich .lbl-short{display:none}
@media (max-width:560px){
  .ret-table--rich{font-size:.82rem}
  .ret-table--rich th,.ret-table--rich td{padding:.4rem .35rem}
  .ret-rate-bar{display:none}
  /* The 5-col table overflows a phone viewport (459px in a 311px panel), spilling
     "Cheapest"/"Win rate" off-screen. Shorten the headers and drop the "Competes
     on" column (the win-rate denominator, least useful standalone — the footnote
     still explains it) so the headline data fits without a sideways scroll. */
  .ret-table--rich .lbl-full{display:none}
  .ret-table--rich .lbl-short{display:inline}
  .ret-table--rich .col-competes{display:none}
  .ret-table--rich th,.ret-table--rich td{padding-left:.3rem;padding-right:.3rem}
  .ret-table--rich .num{padding-left:.6rem}
}

/* ---------- Browse CTA ---------- */
.browse-cta{margin:2rem 0 .4rem;padding:1.1rem 1.3rem;border-radius:16px;
  background:linear-gradient(110deg,var(--accent-bg),var(--bg-tint));
  border:1px solid var(--accent-line);display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem}
.browse-cta a{font-family:var(--round);font-weight:600;color:var(--accent);font-size:1.08rem}

/* ---------- Recent activity feed ---------- */
.act-wrap{padding-top:1.8rem}
.act-head{margin:0 0 1.2rem}
.act-head h1{font-size:1.8rem;font-weight:600;margin-bottom:.3rem}
.act-feed{display:flex;flex-direction:column;gap:.55rem}
.act-row{display:flex;align-items:center;gap:.9rem;background:var(--card);
  border:1px solid var(--line);border-radius:13px;padding:.7rem .9rem;
  text-decoration:none;color:inherit;border-left:4px solid var(--line);
  transition:border-color .15s,box-shadow .15s,transform .12s}
.act-row:hover{border-color:var(--accent-line);text-decoration:none;
  transform:translateY(-1px);box-shadow:0 6px 18px rgba(51,36,26,.08)}
.act-drop{border-left-color:var(--green)}
.act-rise{border-left-color:var(--idx-red,#b23b27)}
.act-new{border-left-color:var(--gold)}
.act-img{flex:none;width:54px;height:54px;background:#fff;border-radius:9px;
  border:1px solid var(--line-soft);overflow:hidden}
.act-img img{width:100%;height:100%;object-fit:contain;padding:.25rem}
.act-body{min-width:0;flex:1}
.act-tag{font-family:var(--round);font-weight:600;font-size:.66rem;
  text-transform:uppercase;letter-spacing:.05em;padding:.1rem .45rem;border-radius:999px;
  background:var(--chip-bg);color:var(--ink-soft)}
.act-tag-drop{background:#e6f1e1;color:#2f7a33}
.act-tag-rise{background:#f7e0db;color:#b23b27}
.act-tag-new{background:#f6e9d2;color:#a8692a}
.act-name{font-family:var(--round);font-weight:600;font-size:1.02rem;color:var(--ink);
  margin-top:.18rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.act-row:hover .act-name{color:var(--accent)}
.act-detail{font-size:.84rem;color:var(--ink-soft);margin-top:.1rem;
  font-variant-numeric:tabular-nums}
.act-date{flex:none;font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.act-more,.act-empty{margin-top:1.1rem}
@media (max-width:560px){
  .act-img{width:44px;height:44px}
  .act-name{font-size:.94rem}
  .act-detail{font-size:.78rem}
}

/* ---------- Footer ---------- */
.wb-footer{background:#33241A;color:#cdbba3;margin-top:2.5rem;padding:2.6rem 0 2.2rem}
.wb-footer-in{max-width:1180px;margin:0 auto;padding:0 1.4rem;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.6rem;align-items:flex-start}
.wb-footer img.lockup{height:46px;display:block}
.wb-foot-tag{margin:.9rem 0 0;font-size:.86rem;line-height:1.6;color:#b3a288;max-width:42ch}
.wb-foot-nav{display:flex;flex-direction:column;gap:.5rem;font-family:var(--round);font-weight:500}
.wb-foot-nav a{color:#e6d6bd;font-size:.95rem}
.wb-foot-nav a:hover{color:var(--gold-soft)}
.wb-foot-head{font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;
  color:#8a785f;font-family:var(--round);font-weight:600;margin-bottom:.2rem}
.wb-foot-bottom{max-width:1180px;margin:1.8rem auto 0;padding:1.4rem 1.4rem 0;
  border-top:1px solid rgba(255,235,200,.10);
  font-size:.8rem;color:#8a785f;display:flex;flex-wrap:wrap;gap:.6rem;justify-content:space-between}

@media (max-width:600px){
  .wrap,.wb-header-in,.wb-hero-in,.wb-footer-in{padding-left:1rem;padding-right:1rem}
  /* Tighter panel side-padding on phones gives the data tables (esp. the
     5→4-col "Where the market sits" table) the few extra px they need to sit
     inside the viewport without a sideways scroll. */
  .panel{padding-left:.8rem;padding-right:.8rem}
  .card-grid,.card-grid-compact{gap:.6rem}
  /* Landscape tiles on phones: full-width rows with a left thumbnail and the
     details (name / price / 90-day block) beside it, so the price and
     sparkline read on one line instead of a cramped 2-up portrait tile where
     the price clipped to "$1,9…". Supersedes the earlier 2-col-on-phones call
     (uid 320615929) at Robert's request, 2026-06-05. CSS-only — desktop and
     the market.js card markup are untouched; grid places the existing
     children (img / name / sub / price-block) into a thumbnail + detail row. */
  .card-grid>*,.card-grid-compact>*{flex:1 1 100%}
  .card{display:grid;grid-template-columns:108px 1fr;column-gap:.8rem;
    row-gap:0;align-items:stretch;padding:.55rem .65rem}
  /* Image fills the card height (spans all three rows, stretches) and carries
     a bigger bottle (minimal padding) so the left column isn't a small
     thumbnail over a blank gap. The content rhythm below is tightened so the
     card stays short rather than airy. */
  .card .card-img-wrap{grid-column:1;grid-row:1 / span 3;align-self:stretch;
    margin:0;height:100%;min-height:108px;border:1px solid var(--line-soft);
    border-radius:10px}
  .card .card-img-wrap img{padding:.15rem}
  /* badges follow the shrinking left thumbnail, still pinned to its corner */
  .card-badges{top:.3rem;left:.3rem;gap:.25rem}
  .card-verdict{top:.3rem;right:.3rem;width:19px;height:19px;font-size:.76rem}
  .card-name{grid-column:2;grid-row:1;min-height:0;font-size:.95rem;line-height:1.2}
  .card-sub{grid-column:2;grid-row:2;min-height:0;margin:.05rem 0 0}
  .price-block{grid-column:2;grid-row:3;margin-top:.2rem;padding-top:.4rem}
  .price-amount{line-height:1}
  .price-meta{margin-top:.15rem;line-height:1.35}
  /* Keep the 90-day block left-aligned so it reads in the same column as the
     "Best AU price" block above it, with the sparkline tucked to the right as
     a compact accent (the wide blank-left sparkline floating mid-row was what
     broke the flow). */
  .hist-row{justify-content:space-between;gap:.55rem;margin-top:.4rem;padding-top:.4rem}
  .hist-meta{order:-1;flex:1 1 auto}
  .spark{order:1;width:74px;height:auto;flex:none;align-self:center}
  .filter-secondary select{flex:1 1 46%;max-width:none}
  .filter-primary{flex-direction:column;align-items:stretch}
  /* In a column flex, the desktop `flex:1 1 280px` makes flex-basis the
     input HEIGHT (→ a ~280px-tall search box on mobile). Reset to content
     height. Operator feedback 320615941 ("search bar is way too tall"). */
  .filter-primary input[name="q"],.filter-primary button{width:100%;flex:0 0 auto}
  /* Mobile: get bottles in front of the user fast. Reorder so the search +
     discovery cards lead and the US-index explainer / panels drop below them;
     hide the long hero caveat. Flex `order` only — desktop DOM is untouched.
     (operator feedback 2026-06-01, uid 320615926) */
  main.wrap{display:flex;flex-direction:column}
  .filters{order:-2}
  #market{order:-1}
  .wb-caveat{display:none}
}
@media (max-width:430px){
  /* Narrow phones keep the landscape row (set at ≤600px) — just tighten the
     thumbnail and type. (Was a forced 2-col stack, uid 320615929, superseded
     by the landscape tiles 2026-06-05.) */
  .card-grid,.card-grid-compact{gap:.5rem}
  .card{grid-template-columns:72px 1fr;column-gap:.7rem;padding:.6rem .65rem}
  /* 72px thumb: one notch smaller so a full 3-badge stack still fits inside */
  .card-badges{top:.25rem;left:.25rem;gap:.2rem}
  .cbadge-hit,.cbadge-watch{font-size:.68rem;padding:.15rem .34rem}
  .cbadge-fav,.cbadge-buy{width:17px;height:17px;font-size:.66rem}
  .card-verdict{top:.25rem;right:.25rem;width:17px;height:17px;font-size:.7rem}
  .card-name{font-size:.9rem;line-height:1.25}
  .card-sub{font-size:.76rem}
  .price-amount{font-size:1.3rem}
  .price-label{font-size:.62rem}
  .filter-secondary select{flex:1 1 100%}
}