:root{
  --wall:#ebe6df; --ink:#181715; --ink-2:#55524c; --paper:#fbfaf7; --step:#f1eee8;
  --volt:#d4f53c;
  --font:"General Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
}
*{box-sizing:border-box;margin:0}
html,body{height:100%;overflow:hidden;background:var(--wall);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
button:focus-visible,a:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sr-only button:focus{outline:none}

.stage{position:fixed;inset:0;background:var(--wall) url(assets/wall.webp) center/cover no-repeat;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
#rail{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab}
#rail.dragging{cursor:grabbing}
#rail.over{cursor:pointer}

.top{position:absolute;left:0;right:0;top:0;height:0;pointer-events:none}
.wordmark{position:absolute;left:50%;top:clamp(26px,5.2vh,52px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;text-decoration:none;color:var(--ink);pointer-events:auto}
.wm-name{font-weight:600;font-size:clamp(46px,6.4vw,92px);letter-spacing:-.045em;line-height:.86}
.wm-sub{font-size:15px;font-weight:500;color:var(--ink-2);margin-top:6px;letter-spacing:-.005em}
.hint{position:absolute;left:clamp(20px,3vw,44px);top:clamp(30px,5.6vh,56px);max-width:230px;font-size:15px;line-height:1.4;color:var(--ink-2);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.hint.gone{opacity:0;transform:translateY(-6px)}
.bag-btn{position:absolute;right:clamp(16px,3vw,44px);top:clamp(26px,5.4vh,52px);width:48px;height:48px;display:grid;place-items:center;border-radius:50%;pointer-events:auto;transition:transform .25s var(--spring),background .2s}
.bag-btn:hover{background:rgba(24,23,21,.06)}
.bag-btn:active{transform:scale(.92)}
.bag-btn.bump{animation:none}
.badge{position:absolute;right:4px;top:5px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--ink);color:var(--paper);font-size:12px;font-weight:600;display:grid;place-items:center;opacity:0;transform:scale(.6);transition:transform .35s var(--spring),opacity .2s}
.badge.on{opacity:1;transform:scale(1)}

/* product card */
.card{position:absolute;width:340px;background:var(--paper);border-radius:18px;color:var(--ink);transition:opacity .35s var(--ease-out),transform .45s var(--ease-out);z-index:3}
.card.hidden{opacity:0;transform:translateY(10px);pointer-events:none}
.card-head{display:flex;width:100%;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 18px;text-align:left}
.c-name{font-weight:500;font-size:16px;letter-spacing:-.01em}
.c-price{font-weight:500;font-size:16px;font-variant-numeric:tabular-nums}
.card-body{padding:0 18px;display:block;max-height:0;overflow:hidden;transition:max-height .5s var(--ease-out),padding .5s var(--ease-out)}
.card.open .card-body{max-height:340px;padding-bottom:16px}
.c-desc{font-size:15px;line-height:1.45;color:var(--ink-2);margin:-4px 0 14px}
.row{margin-bottom:12px}
.row-label{display:block;font-size:13px;color:var(--ink-2);margin-bottom:7px}
.c-colour{color:var(--ink);margin-left:4px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{min-width:42px;height:36px;padding:0 10px;border-radius:999px;background:var(--step);font-size:14px;font-weight:500;transition:background .2s,color .2s,transform .2s var(--spring)}
.chip:hover{background:#e6e2da}
.chip:active{transform:scale(.94)}
.chip[aria-checked="true"]{background:var(--ink);color:var(--paper)}
.swatches{display:flex;gap:10px}
.sw{width:30px;height:30px;border-radius:50%;position:relative;transition:transform .25s var(--spring)}
.sw::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid transparent;transition:border-color .2s}
.sw[aria-checked="true"]::after{border-color:var(--ink)}
.sw:hover{transform:scale(1.08)}
.actions{display:flex;gap:8px;margin-top:4px}
.add{flex:1;height:48px;border-radius:999px;background:var(--ink);color:var(--paper);font-weight:500;font-size:16px;transition:transform .2s var(--spring),background .2s}
.add:hover{background:#2c2a26}
.add:active{transform:scale(.97)}
.add.need{animation:nudge .4s}
@keyframes nudge{30%{transform:translateX(-4px)}60%{transform:translateX(4px)}}
.close-card{width:48px;height:48px;border-radius:50%;background:var(--step);display:grid;place-items:center;transition:background .2s}
.close-card:hover{background:#e6e2da}

/* tabs: client-requested pill bar, solid */
.tabs{position:absolute;left:0;right:0;bottom:calc(18px + env(safe-area-inset-bottom));display:flex;justify-content:center;pointer-events:none;z-index:2}
.tabs-in{display:flex;gap:2px;padding:4px;background:var(--paper);border-radius:999px;pointer-events:auto;position:relative}
.tabs-in button{position:relative;z-index:1;height:38px;padding:0 16px;border-radius:999px;font-size:14px;font-weight:500;color:var(--ink-2);transition:color .25s}
.tabs-in button:hover{color:var(--ink)}
.tabs-in button[aria-selected="true"]{color:var(--paper)}
.tab-pill{position:absolute;top:4px;height:38px;border-radius:999px;background:var(--ink);transition:transform .45s var(--spring),width .45s var(--spring)}

/* drawer */
.scrim{position:fixed;inset:0;background:rgba(24,23,21,.28);opacity:0;transition:opacity .35s;z-index:9}
.scrim.on{opacity:1}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100vw);background:var(--paper);z-index:10;transform:translateX(102%);transition:transform .5s var(--ease-out);display:flex;flex-direction:column;box-shadow:-24px 0 60px rgba(24,23,21,.12)} /* taste-skill-ignore: real overlay */
.drawer.open{transform:none}
.d-head{display:flex;justify-content:space-between;align-items:center;padding:24px 24px 12px}
.d-head h2{font-size:28px;font-weight:600;letter-spacing:-.03em}
.d-close{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--step)}
.lines{list-style:none;padding:8px 24px;overflow:auto;flex:1}
.line{display:grid;grid-template-columns:76px 1fr auto;gap:14px;align-items:center;padding:12px 0;animation:lineIn .45s var(--ease-out) both}
@keyframes lineIn{from{opacity:0;transform:translateX(16px)}}
.line+.line{border-top:0;margin-top:2px}
.line .th{width:76px;height:92px;border-radius:12px;background:var(--step);display:grid;place-items:center;overflow:hidden}
.line .th img{max-width:84%;max-height:86%;object-fit:contain}
.line .nm{font-size:15px;font-weight:500;line-height:1.3}
.line .mt{font-size:14px;color:var(--ink-2);margin-top:3px}
.qty{display:flex;align-items:center;gap:6px;margin-top:8px}
.qty button{width:30px;height:30px;border-radius:50%;background:var(--step);font-size:16px;line-height:1}
.qty span{min-width:18px;text-align:center;font-variant-numeric:tabular-nums;font-size:14px}
.line .pr{font-size:15px;font-weight:500;font-variant-numeric:tabular-nums;align-self:start;margin-top:4px}
.empty{padding:8px 24px 24px;color:var(--ink-2);font-size:15px}
.d-foot{padding:18px 24px calc(24px + env(safe-area-inset-bottom));background:var(--step)}
.tot{display:flex;justify-content:space-between;font-size:18px;font-weight:500;margin-bottom:8px;font-variant-numeric:tabular-nums}
.demo-note{font-size:14px;color:var(--ink-2);line-height:1.4;margin-bottom:14px}
.checkout{width:100%;height:52px;border-radius:999px;background:var(--ink);color:var(--paper);font-weight:500;font-size:16px}
.checkout:disabled{opacity:.4;cursor:default}
.demo-msg{font-size:14px;margin-top:10px;text-align:center}

.flyer{position:fixed;left:0;top:0;z-index:8;pointer-events:none;will-change:transform}

@media (max-width:699px){
  .wordmark{top:22px}
  .wm-name{font-size:44px}
  .wm-sub{font-size:13px;margin-top:4px}
  .hint{display:none}
  .bag-btn{top:22px;right:12px}
  .card{left:12px!important;right:12px;width:auto!important;top:auto!important;bottom:calc(76px + env(safe-area-inset-bottom))}
  .card.open .card-body{max-height:300px}
  .c-desc{display:none}
  .tabs-in button{padding:0 12px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}