:root{--ink:#EDEAE3;--dim:#8B8880;--faint:#5A5852;--line:#232320;--bg:#0C0C0B;--hot:#FF4A17}

.mono{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase}

.ctl{display:flex;justify-content:space-between;align-items:baseline;gap:26px;flex-wrap:wrap;margin-bottom:20px}
.seg{display:flex;align-items:baseline;gap:22px}
.seg button{background:none;border:0;padding:0 0 6px;cursor:pointer;color:var(--faint);
  font-family:Anton,Impact,sans-serif;font-size:26px;line-height:1;border-bottom:2px solid transparent;
  transition:color .15s,border-color .15s}
.seg button:hover{color:var(--dim)}
.seg button[aria-pressed=true]{color:var(--ink);border-bottom-color:var(--hot)}
.seg .cap{color:var(--faint);align-self:center}
.pre{display:flex;gap:0;align-items:baseline;flex-wrap:wrap}
.pre button{background:none;border:0;cursor:pointer;color:var(--dim);padding:4px 13px;
  font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  border-left:1px solid var(--line);transition:color .15s}
.pre button:first-child{border-left:0;padding-left:0}
.pre button:hover{color:var(--hot)}

/* rack on a wall */
.rack{position:relative;border-radius:3px;overflow:hidden;margin-bottom:26px;
      background:#131211 center/cover no-repeat;box-shadow:inset 0 0 90px rgba(0,0,0,.72)}
.rack::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 30%,transparent 38%,rgba(0,0,0,.55) 100%)}
.cans{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:2px;justify-content:center;
      align-items:flex-end;padding:30px 14px 26px}
.can{position:relative;background:none;border:0;cursor:pointer;padding:12px 9px 20px;line-height:0;
     border-radius:3px;transition:background .16s}
.can:hover{background:rgba(255,255,255,.05)}
.can[aria-current=true]{background:rgba(255,74,23,.13);box-shadow:inset 0 0 0 1px rgba(255,74,23,.42)}
.stack{position:relative;display:block}
.stack img{position:absolute;left:0;top:0;width:100%;height:auto;display:block;transition:opacity .13s ease}
.stack img.b{filter:drop-shadow(0 12px 15px rgba(0,0,0,.8))}
.stack img.s{opacity:.7}
.num{position:absolute;left:50%;transform:translateX(-50%);bottom:5px;
     font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.12em;color:#55534E}
.can[aria-current=true] .num{color:var(--hot)}
.next{position:absolute;z-index:3;right:12px;bottom:12px;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:2px;
  background:rgba(18,17,16,.72);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.14);color:var(--ink);
  font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;
  opacity:0;animation:fadeIn .22s ease forwards;
  transition:border-color .16s,background .16s}
.next:hover{border-color:rgba(255,74,23,.6);background:rgba(24,20,18,.85)}
.next b{color:var(--hot);font-weight:400;font-size:12px;line-height:1}
.next[hidden]{display:none}
@keyframes fadeIn{to{opacity:1}}
.next.done{color:var(--dim)}

/* picker */
.editing{display:flex;align-items:baseline;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.editing .who{font-family:Anton,Impact,sans-serif;font-size:20px;text-transform:uppercase}
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:2px;
  background:#141413;box-shadow:inset 0 0 0 1px var(--line);color:var(--dim);font-size:12.5px}
.chip.set{color:var(--ink)}
.chip i{width:9px;height:9px;border-radius:50%;display:inline-block;border:1px solid rgba(255,255,255,.2)}
.row{display:flex;align-items:flex-start;gap:20px;padding:15px 0;border-bottom:1px solid var(--line)}
.row .tag{color:var(--faint);width:58px;flex:none;padding-top:14px}
.opts{display:flex;gap:3px;flex-wrap:wrap;flex:1}
.lb{background:none;border:0;cursor:pointer;padding:6px 5px 7px;width:74px;border-radius:2px;
    display:flex;flex-direction:column;align-items:center;gap:5px;transition:background .16s}
.lb:hover{background:rgba(255,255,255,.03)}
.lb img{height:46px;width:auto;display:block;transition:transform .16s}
.lb:hover img{transform:translateY(-2px)}
.lb span{font-family:"JetBrains Mono",monospace;font-size:8.5px;letter-spacing:.07em;text-transform:uppercase;
         color:#6E6C66;text-align:center;line-height:1.3}
.lb[aria-pressed=true] span{color:var(--ink)}
.lb[aria-pressed=true]{background:rgba(255,74,23,.07);box-shadow:inset 0 -2px 0 var(--hot)}
.dotwrap{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding-top:11px}
.dot{width:28px;height:28px;border-radius:50%;padding:0;cursor:pointer;
     border:1px solid rgba(255,255,255,.13);transition:transform .16s,box-shadow .16s}
.dot:hover{transform:scale(1.14)}
.dot[aria-pressed=true]{box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px var(--hot)}
.dot[data-locked=true]{opacity:.16;cursor:not-allowed}
.dot[data-locked=true]:hover{transform:none}
.dot.metal, .chip i.metal{
  background:
    linear-gradient(150deg,#FAF8F2 0%,#A8A59C 17%,#F3F1EA 32%,#6B6963 47%,
                    #DEDBD3 60%,#8A877F 74%,#F6F4EE 87%,#9B988F 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.75),inset 0 -1px 2px rgba(0,0,0,.45)}
.dot.metal[aria-pressed=true]{box-shadow:inset 0 1px 1px rgba(255,255,255,.75),
  inset 0 -1px 2px rgba(0,0,0,.45),0 0 0 2px var(--bg),0 0 0 3.5px var(--hot)}
.hint{padding-top:12px;color:var(--faint);font-size:12.5px;min-height:18px}

.bar{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;padding-top:24px}
.status{color:var(--dim);font-size:13.5px}
.status b{color:var(--ink);font-weight:500}
.add{background:var(--hot);border:0;color:#230700;cursor:pointer;padding:15px 40px;border-radius:2px;
     font-family:Anton,Impact,sans-serif;font-size:17px;letter-spacing:.05em;text-transform:uppercase}
.add:hover{opacity:.88}
.add[disabled]{background:none;color:#48463F;box-shadow:inset 0 0 0 1px var(--line);cursor:not-allowed}
.note{margin-top:32px;color:#48463F;font-size:12px}
@media(max-width:620px){
  
  
  

  /* controls: sizes left, presets swipe under */
  .ctl{gap:12px;margin-bottom:14px;display:block}
  .seg{gap:16px;margin-bottom:12px}
  .seg button{font-size:22px}
  .pre{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
       -webkit-overflow-scrolling:touch;margin:0 -14px;padding:0 14px;
       scroll-snap-type:x proximity;
       -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
       mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .pre::-webkit-scrollbar{display:none}
  .pre button{border-left:0;flex:none;scroll-snap-align:start;padding:8px 13px;
       box-shadow:inset 0 0 0 1px var(--line);border-radius:2px;margin-right:6px;color:var(--ink)}
  .pre button:first-child{padding-left:13px}
  .pre button:active{color:var(--hot)}

  .rack{margin-bottom:18px}
  .cans{padding:18px 10px 14px;gap:2px}
  /* next-can becomes a full-width bar across the rack foot */
  .next{right:10px;bottom:10px;padding:10px 13px;font-size:9.5px}

  .editing{gap:8px;margin-bottom:11px}
  .editing .who{font-size:17px}
  .chip{font-size:12px;padding:4px 9px}

  .row{padding:13px 0;display:block}
  .row .tag{width:auto;padding:0 0 9px}
  .opts{gap:2px}
  .lb{width:calc(20% - 2px);padding:5px 2px 6px}
  .lb img{height:38px}
  .lb span{font-size:7.5px;letter-spacing:.04em}
  .dotwrap{padding-top:0;gap:9px}
  .dot{width:32px;height:32px}
  .hint{padding-top:11px;font-size:12px}

  /* add-to-cart always reachable */
  .bar{position:sticky;bottom:0;z-index:5;margin:0 -14px;padding:12px 14px calc(12px + env(safe-area-inset-bottom));
       background:rgba(12,12,11,.93);backdrop-filter:blur(10px);
       box-shadow:0 -1px 0 var(--line);gap:12px}
  .status{font-size:12.5px;flex:1}
  .add{padding:14px 0;flex:1;min-width:150px;font-size:16px}
  .note{margin:18px 0 26px;font-size:11px}
}
@media(hover:none){
  .lb:hover img{transform:none}
  .dot:hover{transform:none}
  .can:hover{background:none}
  .can[aria-current=true]{background:rgba(255,74,23,.16)}
}