@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 — retailer page. Every bottle whose lowest
   in-stock price currently comes from this retailer, cheapest
   first. Shares the catalogue table system + brand palette.
   ============================================================ */
: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;
  --red:#b23b27; --red-bg:#f7e0db; --red-line:#eebfb4;
  --amber-txt:#9a6a16; --amber-bg:#fbf0d2; --amber-line:#ecd6a0;
  --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,select:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:5px}
.muted{color:var(--muted)} .note{color:var(--muted);font-size:.85rem;line-height:1.5}

/* header chrome → single source in static/css/wb-header.css */

/* index pill */
.idx{display:inline-flex;align-items:center;gap:.2rem;font-family:var(--round);font-weight:600;font-size:.8rem;
  padding:.12rem .45rem;border-radius:999px;border:1px solid transparent;line-height:1}
.idx small{font-size:.6rem;opacity:.65;text-transform:uppercase;letter-spacing:.04em}
/* Clickable pill -> /v2/value leaderboard, focused on the bottle (320615946). */
.idx-link{text-decoration:none;cursor:pointer;transition:filter .12s}
.idx-link:hover{text-decoration:none;filter:brightness(.95)}
.idx-green{background:var(--green-bg);color:var(--green);border-color:var(--green-line)}
.idx-amber{background:var(--amber-bg);color:var(--amber-txt);border-color:var(--amber-line)}
.idx-red{background:var(--red-bg);color:var(--red);border-color:var(--red-line)}

/* head */
main{padding-bottom:3rem}
.crumb{font-size:.9rem;margin:1.3rem 0 .5rem;color:var(--muted)}
.crumb a{font-weight:500}
.ret-head{display:flex;align-items:flex-start;gap:1rem;flex-wrap:wrap;margin:0 0 .2rem}
.ret-mark{width:52px;height:52px;border-radius:13px;background:linear-gradient(135deg,var(--accent),var(--gold));
  display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--round);font-weight:600;
  font-size:1.5rem;flex:none;box-shadow:0 4px 12px rgba(168,105,42,.28)}
.ret-head h1{font-size:1.9rem;font-weight:600;line-height:1.12;letter-spacing:-.02em;color:var(--ink)}
.ret-head .sub{margin:.25rem 0 0;font-size:.95rem;color:var(--ink-soft);max-width:70ch;line-height:1.5}
.ret-head .sub strong{font-family:var(--round);color:var(--accent)}
.ret-stats{display:flex;gap:.5rem;flex-wrap:wrap;margin:1rem 0 0}
.ret-stat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.55rem .9rem;min-width:7rem}
.ret-stat .v{font-family:var(--round);font-weight:600;font-size:1.35rem;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
.ret-stat .v.green{color:var(--green)} .ret-stat .v.accent{color:var(--accent)}
.ret-stat .l{font-size:.74rem;color:var(--muted);margin-top:.3rem;text-transform:uppercase;letter-spacing:.04em;font-weight:600;font-family:var(--round)}

/* tabs — Full range / Best-price wins */
.ret-tabs{display:flex;gap:.4rem;margin:1.3rem 0 0;border-bottom:1px solid var(--line)}
.ret-tab{appearance:none;background:none;border:none;cursor:pointer;font-family:var(--round);
  font-weight:600;font-size:.92rem;color:var(--muted);padding:.55rem .85rem;border-radius:10px 10px 0 0;
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .12s,border-color .12s}
.ret-tab:hover{color:var(--ink)}
.ret-tab.on{color:var(--accent);border-bottom-color:var(--accent)}
.ret-tab .tab-n{display:inline-block;margin-left:.35rem;font-size:.78rem;color:var(--muted);
  background:var(--soft);border-radius:8px;padding:.05rem .4rem;font-variant-numeric:tabular-nums}
.ret-tab.on .tab-n{background:var(--accent-bg);color:var(--accent)}

/* "vs best price" delta cell */
.vs-cell{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.vs-best{color:var(--green);font-weight:600;font-size:.85rem}
.vs-over{color:var(--ink-soft);font-weight:600;font-size:.9rem}
.vs-excl{color:var(--muted);font-weight:600;font-size:.8rem;font-style:italic}

/* controls */
.ret-controls{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;margin:1.3rem 0 .9rem}
.ret-controls .picker{display:inline-flex;align-items:center;gap:.45rem;font-size:.9rem;color:var(--muted)}
select{font:inherit;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:10px;padding:.5rem .7rem;cursor:pointer;transition:border-color .14s,box-shadow .14s}
select:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 3px rgba(201,135,54,.18)}
.note-disc{margin-left:auto;font-size:.82rem;color:var(--muted);max-width:46ch;line-height:1.45}

/* table (shared with catalogue) */
.results{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}
/* border-collapse:separate (not collapse) so the position:sticky thead doesn't
   overlap/hide the FIRST body row in Chrome (same fix as catalog.css). */
table.res{border-collapse:separate;border-spacing:0;width:100%}
table.res thead th{text-align:left;font-family:var(--round);font-weight:600;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.05em;color:var(--muted);padding:.7rem 1rem;background:var(--bg-tint);border-bottom:1px solid var(--line)}
/* NOT position:sticky — see catalog.css: the sticky header hid the first result row. */
table.res thead th.num{text-align:right}
table.res thead th.sortable{cursor:pointer;user-select:none;transition:color .12s,background .12s}
table.res thead th.sortable:hover{color:var(--accent);background:var(--accent-bg)}
table.res thead th.sortable .arw{display:inline-block;width:.9em;margin-left:.15em;color:var(--accent);opacity:0;transition:opacity .12s;font-size:.9em}
table.res thead th.sortable:hover .arw{opacity:.4}
table.res thead th.sorted{color:var(--ink)} table.res thead th.sorted .arw{opacity:1}
table.res tbody td{padding:.7rem 1rem;border-bottom:1px solid var(--line-soft);vertical-align:middle}
table.res tbody tr:last-child td{border-bottom:none}
table.res tbody tr{transition:background .12s;cursor:pointer}
table.res tbody tr:hover{background:var(--soft)}
.r-name{font-family:var(--round);font-weight:600;font-size:1rem;line-height:1.25;color:var(--ink);display:block}
.r-name:hover{color:var(--accent);text-decoration:none}
.r-photo-dot{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:var(--gold);margin-left:.4rem;vertical-align:middle}
.r-brand{font-size:.9rem;color:var(--ink-soft)}
.abv-cell{text-align:right;font-family:var(--round);font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink-soft);white-space:nowrap}
.idx-cell{text-align:right;white-space:nowrap}
.idx-cell .idx{font-size:.82rem;padding:.14rem .5rem}
.idx-none{color:var(--muted)}
.price-cell{text-align:right;white-space:nowrap}
.price-amt{font-family:var(--round);font-weight:600;font-size:1.08rem;color:var(--accent);font-variant-numeric:tabular-nums}
.price-sub{font-size:.78rem;color:var(--muted);margin-top:.15rem}
.list-cell a{font-family:var(--round);font-weight:600;font-size:.86rem;white-space:nowrap}
.empty{padding:3rem 1.4rem;text-align:center;color:var(--muted)}
.empty .big{font-family:var(--round);font-weight:600;font-size:1.15rem;color:var(--ink-soft);margin-bottom:.3rem}
.more-row td{text-align:center;padding:1rem;background:var(--bg-tint)}
.btn-more{font-family:var(--round);font-weight:600;background:var(--ink);color:#fdf4e4;border:none;border-radius:10px;padding:.55rem 1.4rem;cursor:pointer;font-size:.92rem}
.btn-more:hover{background:#46342a}

@media (max-width:720px){
  table.res thead{display:none}
  table.res tbody td{display:block;border:none;padding:.2rem 1rem}
  table.res tbody tr{display:block;border-bottom:1px solid var(--line);padding:.7rem 0}
  .abv-cell,.idx-cell,.price-cell,.list-cell{text-align:left}
  /* sparse cards: drop cells that carry only a "—" so a bottle with no ABV /
     index reads cleanly instead of two bare dash lines; label the values that
     remain, since the table header is hidden on mobile. */
  .abv-cell.is-empty,.idx-cell.is-empty{display:none}
  .abv-cell::before,.idx-cell::before{content:attr(data-label) "  ";color:var(--muted);font-weight:600;font-size:.72rem;text-transform:uppercase;letter-spacing:.02em}
  .note-disc{margin-left:0}
}

/* footer */
.wb-footer{background:#33241A;color:#cdbba3;margin-top:2rem;padding:2.4rem 0 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.4rem;align-items:center}
.wb-footer .wb-brand:hover{text-decoration:none}
.wb-foot-tag{font-size:.84rem;color:#b3a288;max-width:40ch;line-height:1.55}
.wb-foot-bottom{max-width:1180px;margin:1.4rem auto 0;padding:1.2rem 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}