/* Shelf-screen layout: a 16:3 strip (1920x360 panel). Theme tokens come from css/themes.css (Fresh only).
   Sizes are in em off the stage font-size (height / 18, so 20 px on the panel): the stage is 96em x 18em. */

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;user-select:none}
html,body{height:100%;overflow:hidden;background:#000;touch-action:manipulation}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;text-align:left;touch-action:manipulation}
svg{display:block}

#viewport{position:fixed;inset:0;display:grid;place-items:center}
#stage{
  --w:min(100vw, calc(100vh * 16 / 3));
  width:var(--w);height:calc(var(--w) * 3 / 16);font-size:calc(var(--w) * 3 / 16 / 18);
  position:relative;overflow:hidden;background:var(--bg);color:var(--ink);font-family:var(--font-body);
}
#screen{position:absolute;inset:0;display:flex}
.screen{flex:1;min-width:0;display:flex;gap:.8em;padding:.8em}
.screen > *{min-width:0;min-height:0}
h1,h2,h3{font-family:var(--font-head);font-weight:var(--head-weight);letter-spacing:var(--head-tracking);line-height:1.08}

button{transition:transform .15s ease}
button:active{transform:scale(.96)}
.screen.enter{animation:enter .22s ease-out}
@keyframes enter{from{opacity:0}}
@keyframes rise{to{opacity:1;transform:none}}
.bub{animation:bubble 3s linear infinite}
@keyframes bubble{from{transform:translateY(0);opacity:0}15%{opacity:.85}to{transform:translateY(-60px);opacity:0}}

/* ---------- shared ---------- */
.navs{display:flex;gap:.5em}
.navs.col{flex-direction:column;justify-content:space-between;flex:none;width:6.4em}
.navs.col .pill{flex:1;justify-content:center;flex-direction:column;gap:.3em;border-radius:var(--radius-sm)}
.pill{height:2.6em;padding:0 1em;border-radius:999px;background:var(--surface);border:1px solid var(--line);
  display:inline-flex;align-items:center;gap:.4em;font-weight:800;font-size:.85em;flex:none}
.pill svg{width:1.3em;height:1.3em}
.chip{height:2.6em;padding:0 1em;border-radius:999px;background:var(--surface);border:1px solid var(--line);
  display:inline-flex;align-items:center;gap:.35em;font-weight:700;font-size:.78em;white-space:nowrap;flex:none}
.chip .n{opacity:.6;font-weight:600}
.chip.on{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.chip svg{width:1.3em;height:1.3em}
.primary-btn{background:var(--primary);color:var(--on-primary);border-radius:var(--radius-sm);padding:.9em 1.2em;
  font-weight:800;font-size:.85em;text-align:center;box-shadow:var(--shadow)}
.primary-btn:disabled,.key.go:disabled{background:var(--surface-2);color:var(--mute);border-color:var(--line);box-shadow:none;cursor:default}
.price{color:var(--price);font-weight:900}
.badge{display:inline-flex;align-items:center;gap:.3em;border-radius:999px;padding:.25em .65em;font-size:.62em;font-weight:800;
  background:var(--surface-2);color:var(--mute)}
.badge svg{width:1.1em;height:1.1em}
.badge-pick{background:var(--badge-bg);color:var(--badge-ink)}
.badge-local,.badge-organic,.badge-nsa{background:var(--loc-bg);color:var(--loc-ink)}
.badge-thc{background:var(--ink);color:var(--bg)}

/* ---------- home ---------- */
.intro{flex:0 0 19em;display:flex;flex-direction:column;justify-content:center;gap:.35em;padding-left:.4em}
.kicker{font-size:.72em;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--primary)}
.intro h1{font-size:2.2em}
.lede{font-size:.85em;color:var(--mute)}
.legal{font-size:.66em;color:var(--mute);margin-top:auto}
.tiles{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:.7em}
.tile{border-radius:var(--radius);padding:1em;position:relative;overflow:hidden;display:flex;flex-direction:column;
  opacity:0;transform:translateY(1em);animation:rise .6s cubic-bezier(.2,.8,.2,1) forwards}
.tile:nth-child(2){animation-delay:.08s}.tile:nth-child(3){animation-delay:.16s}.tile:nth-child(4){animation-delay:.24s}
.tile::after{content:"";position:absolute;width:9em;height:9em;border-radius:50%;background:var(--bg);opacity:.35;right:-3em;bottom:-3.5em}
.tile-text{position:relative;z-index:1;display:flex;flex-direction:column;max-width:100%}
.tile b{font-family:var(--font-head);font-weight:var(--head-weight);letter-spacing:var(--head-tracking);font-size:1.45em;line-height:1.05}
.tile small{font-size:.75em;font-weight:700;opacity:.8;margin-top:.35em}
.tile-art{position:absolute;right:.4em;bottom:.4em;width:42%;height:58%;z-index:1}
.tile-art svg,.tile-art img{width:100%;height:100%;object-fit:contain}
.tile-beer{background:var(--cat-beer);color:var(--cat-beer-ink)}
.tile-wine{background:var(--cat-wine);color:var(--cat-wine-ink)}
.tile-cider{background:var(--cat-cider);color:var(--cat-cider-ink)}
.tile-na{background:var(--cat-na);color:var(--cat-na-ink)}
.ways{flex:0 0 21em;display:flex;flex-direction:column;gap:.6em}
.help{flex:1;background:var(--primary);color:var(--on-primary);border-radius:var(--radius);padding:.9em 1.2em;display:flex;flex-direction:column;
  justify-content:center;gap:.3em;box-shadow:var(--shadow)}
.help b{font-family:var(--font-head);font-weight:900;font-size:1.5em;line-height:1.1}
.help span{font-size:.8em;font-weight:700;opacity:.9}
.quick{display:grid;grid-template-columns:repeat(3,1fr);gap:.5em}
.quick button{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:.6em .4em;height:4.4em;
  font-weight:800;font-size:.8em;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3em;text-align:center;white-space:nowrap}
.quick svg{width:1.5em;height:1.5em;flex:none;color:var(--primary)}

/* ---------- browse ---------- */
.rail{flex:0 0 15.5em;display:flex;flex-direction:column;gap:.55em}
.rail h2{font-size:1.6em;line-height:1.3;margin-top:.15em}
.rail h2.long{font-size:1.15em}
.rail h2.xlong{font-size:.9em;overflow-wrap:anywhere}
.count{font-size:.78em;color:var(--mute)}
.count b{color:var(--ink)}
.more-btn{align-self:flex-start}
.sorts{display:grid;grid-template-columns:1fr 1fr;gap:.25em;margin-top:auto}
.sort{font-size:.74em;font-weight:700;color:var(--mute);padding:.65em .6em;border-radius:999px;text-align:center;border:1px solid var(--line)}
.sort.on{background:var(--surface-2);color:var(--ink);border-color:var(--surface-2)}
.main{flex:1;display:flex;flex-direction:column;gap:.6em}
.chips-row{display:flex;gap:.4em;overflow:hidden;flex:none}
.row{flex:1;min-height:0;display:flex;gap:.6em}
.arrow{flex:0 0 3.6em;border-radius:var(--radius-sm);background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;color:var(--ink)}
.arrow.primary{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.arrow:disabled{opacity:.3}
.arrow svg{width:1.8em;height:1.8em}
.cards{flex:1;min-width:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6em}
.cards.from-right{animation:slide-r .28s ease-out}
.cards.from-left{animation:slide-l .28s ease-out}
@keyframes slide-r{from{transform:translateX(1.5em);opacity:.3}}
@keyframes slide-l{from{transform:translateX(-1.5em);opacity:.3}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:.6em;display:flex;gap:.6em;min-height:0;min-width:0;overflow:hidden}
.card-art{width:4.6em;flex:none;border-radius:calc(var(--radius-sm) * .7);background:var(--bg);display:flex;align-items:center;justify-content:center;padding:.3em 0}
.card-art svg,.card-art img{width:100%;height:100%;object-fit:contain}
.card-meta{min-width:0;flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:.15em}
.card .brand{font-size:.62em;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--mute);line-height:1.25}
.card .name{font-size:.95em;font-weight:800;line-height:1.15;font-family:var(--font-head);overflow-wrap:anywhere}
.card .name.long{font-size:.85em}
.card .style{font-size:.7em;color:var(--mute)}
.card-foot{margin-top:auto;display:flex;align-items:baseline;gap:.4em}
.card .price{font-size:1.15em}
.card .size{font-size:.62em;color:var(--mute)}
.card-loc{display:flex;align-items:center;gap:.25em;font-size:.68em;font-weight:800;color:var(--primary)}
.card-loc svg{width:1.2em;height:1.2em}
.empty{flex:1;display:flex;align-items:center;justify-content:center;gap:1.2em}
.empty b{font-size:1.2em;font-family:var(--font-head)}
.empty span{color:var(--mute);font-size:.9em}

/* filters panel */
.more{position:absolute;inset:0;z-index:5;background:var(--bg);display:flex;gap:1em;padding:.8em;animation:sheet .3s cubic-bezier(.2,.8,.2,1)}
@keyframes sheet{from{transform:translateY(2em);opacity:0}}
.more-side{flex:0 0 15.5em;display:flex;flex-direction:column;gap:.7em}
.more-side h3{font-size:1.6em}
.more-side .primary-btn{margin-top:auto}
.more-side .navs .pill{flex:1;justify-content:center}
.more-body{flex:1;min-width:0;display:flex;gap:1.1em}
.more-body section{min-width:0;overflow:hidden}
.g-style,.g-grape{flex:3}.g-origin{flex:2.4}.g-price{flex:0 0 6.6em}.g-other{flex:0 0 9.6em}
.more h4{font-size:.66em;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:.2em 0 .5em}
.more .chips{display:flex;flex-wrap:wrap;gap:.35em}
.more .chip{height:2.4em;font-size:.72em}

/* ---------- product detail ---------- */
.detail{gap:.9em}
.d-art{flex:0 0 8.5em;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;padding:.8em 0}
.d-art svg,.d-art img{width:100%;height:100%;object-fit:contain}
.d-art.cat-beer{background:var(--cat-beer)}.d-art.cat-wine{background:var(--cat-wine)}.d-art.cat-cider{background:var(--cat-cider)}.d-art.cat-na{background:var(--cat-na)}
.d-art .liquid{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0);animation:pour 1.1s .15s cubic-bezier(.3,.7,.2,1) forwards}
.d-art .foam{opacity:0;animation:fade .4s 1.1s forwards}
@keyframes pour{to{transform:scaleY(1)}}
@keyframes fade{to{opacity:1}}
.d-head{flex:0 0 20em;display:flex;flex-direction:column;align-items:flex-start;gap:.25em;padding:.3em 0}
.d-brand{font-size:.72em;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--primary)}
.d-head h2{font-size:1.75em;line-height:1.1}
.d-head h2.long{font-size:1.35em}
.d-style{font-size:.85em;color:var(--mute)}
.d-pick{font-size:.66em;margin-top:.2em;white-space:normal}
.d-price{margin-top:auto;display:flex;align-items:baseline;gap:.5em}
.d-price .price{font-size:2.1em;letter-spacing:-.02em}
.d-price .size{font-size:.8em;color:var(--mute)}
.d-loc{flex:0 0 15em;background:var(--loc-bg);color:var(--loc-ink);border-radius:var(--radius);padding:1em 1.1em;display:flex;flex-direction:column;
  justify-content:center;gap:.3em;opacity:0;transform:translateY(1em);animation:rise .55s .45s cubic-bezier(.2,.8,.2,1) forwards}
.d-pin{width:2.6em;height:2.6em;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center;flex:none;margin-bottom:.3em;animation:bob 1.6s 1s ease-in-out infinite}
.d-pin svg{width:1.4em;height:1.4em}
@keyframes bob{40%{transform:translateY(-.25em)}}
.d-loc small{font-size:.7em;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.d-loc b{font-size:1.5em;font-weight:900;line-height:1.15;font-family:var(--font-head)}
.d-info{flex:1 1 16em;display:flex;flex-direction:column;gap:.7em;padding:.3em 0}
.d-facts,.d-research{display:grid;grid-template-columns:1fr 1fr;gap:.55em .9em}
.d-facts span,.d-research span,.d-notes span{display:block;font-size:.6em;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.d-facts b{display:block;font-size:.8em;font-weight:700;line-height:1.25}
.d-research div{border-left:3px solid var(--line);padding-left:.6em}
.d-research b{display:block;font-size:.76em;font-weight:700;line-height:1.25}
.d-research b.yes{color:var(--primary)}
.d-research b.unk{color:var(--mute);font-weight:500}
.d-notes{flex:1 1 13em;padding:.3em 0 .3em .9em;border-left:1px solid var(--line)}
.d-notes p{font-size:.85em;line-height:1.35;margin:.15em 0 .6em}
.d-qr{flex:0 0 9.4em;display:flex;flex-direction:column;align-items:flex-start;gap:.2em}
.qr{background:#fff;padding:.25em;border-radius:var(--radius-sm);width:6.6em;height:6.6em;flex:none;margin-bottom:.3em}
.qr img{width:100%;height:100%;display:block;image-rendering:pixelated}
.d-qr b{font-size:.8em}
.d-qr span{font-size:.68em;color:var(--mute)}
.d-qr small{font-size:.58em;color:var(--mute);margin-top:auto}

/* ---------- search ---------- */
.s-main{flex:1;display:flex;flex-direction:column;gap:.7em}
.s-top{display:flex;gap:.6em;align-items:center}
.sbox{flex:1;min-width:0;height:2.6em;border-radius:999px;border:3px solid var(--primary);background:var(--surface);display:flex;align-items:center;
  padding:0 1em;font-size:1em;font-weight:800;letter-spacing:.02em;white-space:pre;overflow:hidden}
.sbox.long{font-size:.85em}
.sbox .ph{color:var(--mute);font-weight:600;font-size:.85em;letter-spacing:0}
.caret{width:3px;height:1.2em;background:var(--primary);margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.s-results{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 7em;gap:.6em}
.s-msg{flex:1;display:flex;align-items:center;justify-content:center;color:var(--mute);font-size:1em;text-align:center}
.s-empty{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8em}
.s-empty .s-msg{flex:none;overflow-wrap:anywhere;font-size:.9em}
.s-browse{display:flex;flex-wrap:wrap;justify-content:center;gap:.4em}
.see-all{border:2px dashed var(--line);border-radius:var(--radius-sm);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3em;
  font-weight:900;color:var(--primary);font-size:.85em;text-align:center}
.see-all svg{width:1.4em;height:1.4em}
.kb{flex:0 0 42em;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:.5em;display:flex;flex-direction:column;gap:.35em}
.kb-row{flex:1;display:flex;gap:.3em;justify-content:center}
.key{flex:1;max-width:3.8em;border-radius:.45em;background:var(--bg);border:1px solid var(--line);font-size:1em;font-weight:800;
  display:flex;align-items:center;justify-content:center;font-family:var(--font-body)}
.key:active{background:var(--primary);color:var(--on-primary)}
.key.wide{max-width:none;flex:2.2;font-size:.8em}
.key.space{max-width:none;flex:4;font-size:.8em}
.key.go{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}

/* ---------- help me choose ---------- */
.q-side{flex:0 0 24em;display:flex;flex-direction:column;gap:.55em}
.q-step{color:var(--primary);font-size:.72em;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-top:auto}
.progress{display:flex;gap:.4em}
.progress i{width:3.4em;height:.36em;border-radius:999px;background:var(--line)}
.progress i.on{background:var(--primary)}
.q-title{font-size:1.9em;line-height:1.3;margin-bottom:auto}
.opts{flex:1;display:flex;gap:.6em}
.opt{flex:1;min-width:0;background:var(--surface);border:2px solid var(--line);border-radius:var(--radius);padding:1em;
  display:flex;flex-direction:column;align-items:flex-start;gap:.35em;opacity:0;transform:translateY(1em);animation:rise .5s cubic-bezier(.2,.8,.2,1) forwards}
.opt:nth-child(2){animation-delay:.06s}.opt:nth-child(3){animation-delay:.12s}.opt:nth-child(4){animation-delay:.18s}.opt:nth-child(5){animation-delay:.24s}
.opt:active{border-color:var(--primary)}
.opt b{font-size:1.3em;font-family:var(--font-head);font-weight:var(--head-weight);line-height:1.1;margin-top:.3em}
.opt small{font-size:.8em;color:var(--mute);line-height:1.3}
.opt-go{margin-top:auto;align-self:flex-end;color:var(--mute)}
.opt-go svg{width:1.5em;height:1.5em}
.dot{width:1.8em;height:1.8em;border-radius:50%;flex:none;border:2px solid var(--line)}
.dot-beer{background:var(--cat-beer-ink)}.dot-wine{background:var(--cat-wine-ink)}.dot-cider{background:var(--cat-cider-ink)}
.dot-na{background:var(--cat-na-ink)}.dot-ink{background:var(--ink)}

/* ---------- reduced motion: keep last so these end states win ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .tile,.opt{opacity:1;transform:none}
  .bub{opacity:0}
  .d-loc{opacity:1;transform:none}
  .d-art .liquid{transform:none}
  .d-art .foam{opacity:1}
}