/* GAWD! YUMM storefront — "flavor lab" system: candy-wrapper tape, nutrition-label cards, receipt carts, a periodic table of flavours. */
:root{
  --ink:#0d0c10; --ink-2:#16141b; --ink-3:#221f29; --line:#2e2a36;
  --paper:#f3eee2; --paper-2:#e6dfcf; --text:#efeaf5; --muted:#9d97aa;
  --acid:#b8ff3c; --gold:#ffc629; --grape:#a15cff; --cherry:#ff3d5a;
  --acc:var(--acid);
  --display:"Big Shoulders Display",Impact,"Arial Narrow",sans-serif;
  --mono:"Martian Mono",ui-monospace,Menlo,monospace;
  --body:"Instrument Sans",system-ui,sans-serif;
  --notch:14px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--ink);color:var(--text);font:16px/1.55 var(--body);overflow-x:clip;
  background-image:radial-gradient(rgba(255,255,255,.035) 1px,transparent 1px);background-size:4px 4px}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.acc-green{--acc:var(--acid)} .acc-yellow{--acc:var(--gold)} .acc-purple{--acc:var(--grape)} .acc-red{--acc:var(--cherry)}

.wrap{max-width:1240px;margin:0 auto;padding:0 20px}
.wrap.narrow{max-width:760px}
.pad-l{padding-top:56px;padding-bottom:72px}.pad-xl{padding:120px 20px}
.center{text-align:center}
.kicker{font:600 12px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--acc);margin:0 0 14px;display:inline-block;text-decoration:none}
.mega{font:900 clamp(52px,9vw,128px)/.86 var(--display);text-transform:uppercase;letter-spacing:-.01em;margin:0 0 22px}
.mega.dark{color:var(--ink)}
.h2{font:800 clamp(34px,5vw,60px)/.92 var(--display);text-transform:uppercase;margin:0 0 20px}
.h2 em{font-style:normal;color:var(--acid)}
.lede{font-size:clamp(17px,2vw,20px);max-width:56ch;color:#d9d3e3}
.fine{font:400 12px/1.6 var(--mono);color:var(--muted)}
.mono{font-family:var(--mono)}
.empty{font:400 14px var(--mono);color:var(--muted);padding:24px;border:1px dashed var(--line)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.split.top{align-items:start}
.gap{margin-top:56px}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:28px}
.link-arrow{font:600 13px var(--mono);text-transform:uppercase;letter-spacing:.08em;text-decoration:none;color:var(--acid);white-space:nowrap}

/* Buttons: ticket stubs with notched corners */
.btn{--b:var(--acid);--f:var(--ink);display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;text-decoration:none;
  font:800 17px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;padding:15px 26px;background:var(--b);color:var(--f);
  clip-path:polygon(var(--notch) 0,calc(100% - var(--notch)) 0,100% 50%,calc(100% - var(--notch)) 100%,var(--notch) 100%,0 50%);transition:transform .12s,filter .12s}
.btn:hover{transform:translateY(-2px);filter:brightness(1.08)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.35;pointer-events:none}
.btn.big{font-size:21px;padding:19px 34px}
.btn.small{font-size:14px;padding:10px 18px;--notch:9px}
.btn.ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 2px var(--text);clip-path:none;border-radius:0}
.btn.yellow{--b:var(--gold)} .btn.dark{--b:var(--ink);--f:var(--gold)} .btn.danger{color:var(--cherry);box-shadow:inset 0 0 0 2px var(--cherry)}

/* Announcement tape */
.tape{display:block;overflow:hidden;max-width:100%;background:var(--gold);color:var(--ink);text-decoration:none;border-block:3px solid var(--ink);
  background-image:repeating-linear-gradient(-45deg,transparent 0 18px,rgba(0,0,0,.07) 18px 36px)}
.tape{text-align:center}
.tape-line{display:inline-flex;align-items:center;gap:12px;padding:9px 20px;font:800 13px var(--mono);text-transform:uppercase;letter-spacing:.12em}
.tape-line b{transition:transform .18s ease}
.tape:hover .tape-line b{transform:translateX(5px)}

/* Header */
.bar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:24px;padding:10px 20px;background:rgba(13,12,16,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand img{width:auto;height:46px;display:block}
.nav{display:flex;gap:4px;flex:1;overflow-x:auto;scrollbar-width:none}
.nav a{font:600 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;padding:9px 12px;white-space:nowrap;color:#cfc9d9;border:1px solid transparent}
.nav a:hover{color:var(--acid)} .nav a.on{border-color:var(--acid);color:var(--acid)}
.bar-right{display:flex;align-items:center;gap:10px}
.who{font:600 12px var(--mono);text-transform:uppercase;letter-spacing:.08em;text-decoration:none;color:#cfc9d9;white-space:nowrap}
.bag{display:inline-flex;align-items:center;gap:8px;background:var(--paper);color:var(--ink);text-decoration:none;font:800 16px var(--display);text-transform:uppercase;letter-spacing:.06em;padding:8px 12px 8px 14px;
  -webkit-mask:radial-gradient(circle 5px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 5px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat}
.bag-n{background:var(--ink);color:var(--acid);font:800 12px var(--mono);padding:2px 7px;border-radius:99px}
.flash{max-width:1240px;margin:14px auto 0;padding:12px 20px;font:600 13px var(--mono);border-left:4px solid var(--acid);background:var(--ink-2)}
.flash.err{border-color:var(--cherry)}
.alert{padding:12px 16px;font:600 13px/1.5 var(--mono);border-left:4px solid var(--acid);background:var(--ink-3)}
.alert.err{border-color:var(--cherry)}

/* Hero */
.hero{display:grid;grid-template-columns:1.25fr 1fr;gap:20px;max-width:1240px;margin:0 auto;padding:56px 20px 0;position:relative}
.hero-type{position:relative;z-index:2}
.hero-h{position:relative;z-index:0;margin:0;font-family:var(--display);font-weight:900;text-transform:uppercase;line-height:.8;letter-spacing:-.02em}
.hero-h span{display:block;font-size:clamp(78px,13.6vw,196px);white-space:nowrap}
.hero-h .outline{color:transparent;-webkit-text-stroke:2px var(--text)}
.hero-h .solid{position:relative;width:max-content;color:var(--acid)} .hero-h i{color:var(--grape);font-style:normal}
.hero-h .tape-strip{position:relative;z-index:2;display:block;width:max-content;margin:-.55em 0 -.62em -10px;transform:rotate(-6deg);line-height:1.2;background:var(--grape);color:var(--ink);font:800 clamp(16px,2.2vw,26px) var(--mono);text-transform:uppercase;letter-spacing:.1em;padding:8px 22px;
  box-shadow:0 8px 0 rgba(0,0,0,.35);clip-path:polygon(2% 0,100% 6%,98% 100%,0 92%)}
.hero-sub{max-width:44ch;font-size:clamp(17px,1.8vw,20px);color:#d7d1e1;margin:26px 0}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-wheel{position:relative;align-self:center;aspect-ratio:1;max-width:460px;width:100%;justify-self:center}
.wheel{position:absolute;inset:0;width:100%;height:100%;animation:spin 120s linear infinite}
.hero-wheel:hover .wheel{animation-play-state:paused}
.badge{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 18px 50px rgba(0,0,0,.55))}
@keyframes spin{to{transform:rotate(360deg)}}
.w-o{fill:none;stroke:var(--gold);stroke-width:2;stroke-dasharray:3 9;opacity:.85}

.w-t{fill:var(--gold);font:600 13.5px var(--mono);letter-spacing:.14em}
.wheel-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:47%;height:auto;filter:drop-shadow(0 4px 14px rgba(0,0,0,.7))}
.facts{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);margin:56px 0 0;border-top:6px solid var(--text);border-bottom:2px solid var(--text)}
.facts div{padding:16px 18px;border-right:1px solid var(--line)} .facts div:last-child{border-right:0}
.facts dt{font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.facts dd{margin:4px 0 0;font:900 clamp(34px,5vw,56px)/1 var(--display);text-transform:uppercase}
.facts div:nth-child(1) dd{color:var(--acid)} .facts div:nth-child(2) dd{color:var(--gold)} .facts div:nth-child(3) dd{color:var(--grape)}

/* Aisle: category bands */
.aisle{margin:72px 0 0;border-top:1px solid var(--line)}
.aisle-row{display:grid;grid-template-columns:70px 1fr 1fr auto;align-items:center;gap:24px;padding:22px 20px;border-bottom:1px solid var(--line);text-decoration:none;position:relative;overflow:hidden;transition:background .2s}
.aisle-row::before{content:"";position:absolute;inset:0;background:var(--acc);transform:scaleY(0);transform-origin:bottom;transition:transform .25s ease;z-index:-1}
.aisle-row:hover::before{transform:scaleY(1)} .aisle-row:hover{color:var(--ink)}
.aisle-no{font:600 13px var(--mono);color:var(--acc)} .aisle-row:hover .aisle-no{color:var(--ink)}
.aisle-name{font:900 clamp(38px,6vw,82px)/.9 var(--display);text-transform:uppercase}
.aisle-blurb{font-size:15px;color:var(--muted);max-width:40ch} .aisle-row:hover .aisle-blurb{color:var(--ink)}
.price-tag{font:800 13px var(--mono);text-transform:uppercase;background:var(--paper);color:var(--ink);padding:8px 12px 8px 22px;position:relative;
  clip-path:polygon(12px 0,100% 0,100% 100%,12px 100%,0 50%)}
.price-tag::before{content:"";position:absolute;left:9px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--ink)}

/* Nutrition-label cards */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px}
.label-card{display:flex;flex-direction:column;background:var(--paper);color:var(--ink);text-decoration:none;border:3px solid var(--ink);box-shadow:0 0 0 2px var(--paper);transition:transform .15s}
.label-card:hover{transform:rotate(-1.2deg) translateY(-4px)}
.lc-img{aspect-ratio:1/1;background:var(--acc);position:relative;overflow:hidden;display:grid;place-items:center;
  background-image:radial-gradient(rgba(0,0,0,.14) 1.5px,transparent 1.6px);background-size:10px 10px}
.lc-img img{width:100%;height:100%;object-fit:contain;padding:6%}
.lc-glyph{font:900 120px/1 var(--display);color:var(--ink);border:5px solid var(--ink);width:62%;aspect-ratio:1;display:grid;place-items:center;background:var(--paper)}
.label-card.soon .lc-img{filter:grayscale(.25) brightness(.9)}
.stamp{position:absolute;top:18px;right:-34px;transform:rotate(18deg);background:var(--cherry);color:#fff;font:800 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:6px 40px}
.lc-body{padding:14px 16px 16px}
.lc-cat{margin:0;font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase}
.lc-name{margin:2px 0 8px;font:900 34px/.92 var(--display);text-transform:uppercase}
.lc-rule{border-top:1px solid var(--ink);margin:6px 0}.lc-rule.thick{border-top-width:8px}
.lc-row{display:flex;justify-content:space-between;font:600 13px var(--mono);padding:3px 0;border-bottom:1px solid rgba(0,0,0,.2)}
.lc-row.big{font-size:16px;border:0}.lc-row.big b{font:900 26px var(--display)}

/* Periodic table */
.table-tease{padding:80px 0;background:var(--ink-2);border-block:1px solid var(--line)}
.ptable{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:6px}
.ptable.mini{grid-template-columns:repeat(10,1fr)}
.el{--c:var(--acid);position:relative;aspect-ratio:1;border:2px solid var(--c);padding:8px;display:flex;flex-direction:column;text-decoration:none;background:color-mix(in srgb,var(--c) 7%,transparent);transition:background .15s,transform .15s}
.el:hover{background:var(--c);color:var(--ink);transform:scale(1.06);z-index:2}
.el-n{font:600 10px var(--mono);opacity:.8}
.el-s{font:900 clamp(30px,3.4vw,46px)/1 var(--display);margin-top:auto}
.el-name{font:600 10px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.02em;min-height:2.4em}
.el-fam{display:none;font:400 9px var(--mono);opacity:.7}
.el-new{position:absolute;top:6px;right:6px;font:800 9px var(--mono);background:var(--cherry);color:#fff;padding:1px 5px}
.el.hide{display:none}
.el-custom{--c:var(--text);border-style:dashed}
.fam-0{--c:#ff7a2e}.fam-1{--c:var(--cherry)}.fam-2{--c:#c98a4b}.fam-3{--c:#ff5fa8}.fam-4{--c:#2ee6b8}.fam-5{--c:#d9b48f}.fam-6{--c:var(--gold)}.fam-7{--c:var(--acid)}.fam-8{--c:var(--grape)}
.ptable:not(.mini) .el-fam{display:block}
.ptable:not(.mini) .el{aspect-ratio:auto;min-height:128px}

/* Flavor drop teaser + board */
.drop-tease{padding:90px 0;background:var(--grape);color:var(--ink)}
.drop-tease .kicker{color:var(--ink)}
.board{list-style:none;margin:0;padding:0;background:var(--ink);color:var(--text);padding:22px;border:3px solid var(--ink);box-shadow:12px 12px 0 rgba(0,0,0,.3)}
.board li{display:grid;grid-template-columns:1fr 2fr 40px;align-items:center;gap:12px;padding:10px 0;border-bottom:1px dashed var(--line);font:600 13px var(--mono);text-transform:uppercase}
.b-bar{height:14px;background:linear-gradient(90deg,var(--acc) var(--w),var(--ink-3) var(--w))}
.b-v{text-align:right;color:var(--acc)}

/* Custom CTA */
.custom-cta{background:var(--gold);color:var(--ink);padding:90px 0;background-image:repeating-linear-gradient(135deg,transparent 0 30px,rgba(0,0,0,.05) 30px 60px)}
.custom-cta p{font-size:19px;max-width:46ch}
.custom-inline{margin-top:40px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px 20px;border:2px dashed var(--acc,var(--acid));font:600 14px var(--mono)}

/* Page heads + chips */
.page-head{padding:64px 0 36px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 10%,transparent),transparent)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.chips a,.chips button{font:600 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;padding:9px 14px;background:transparent;color:var(--text);border:1px solid var(--line);cursor:pointer}
.chips .on,.chips a:hover,.chips button:hover{background:var(--acc);border-color:var(--acc);color:var(--ink)}

/* Product page */
.pdp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:56px;max-width:1240px;margin:0 auto;padding:48px 20px 80px}
.pdp-media{position:sticky;top:96px;align-self:start}
.pdp-media>img{width:100%;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 20px 50px rgba(0,0,0,.65))}
.pdp-glyph{width:100%;aspect-ratio:1;object-fit:cover;border:3px solid var(--acc)}
.pdp-glyph{display:grid;place-items:center;background:var(--acc);background-image:radial-gradient(rgba(0,0,0,.14) 2px,transparent 2.2px);background-size:14px 14px}
.pdp-glyph span{font:900 min(22vw,240px)/1 var(--display);color:var(--ink);background:var(--paper);border:8px solid var(--ink);width:60%;aspect-ratio:1;display:grid;place-items:center}
.facts-panel{background:var(--paper);color:var(--ink);border:3px solid var(--ink);padding:14px 16px;margin-top:-60px;margin-left:24px;margin-right:-12px;position:relative;box-shadow:10px 10px 0 rgba(0,0,0,.4)}
.facts-panel h2{font:900 30px/1 var(--display);margin:0;text-transform:uppercase}
.facts-panel .fine{color:#555;margin:6px 0 0}
.prose{color:#d7d1e1;max-width:60ch}
.buy{margin-top:30px}
.step{border:0;padding:0;margin:0 0 30px}
.step legend{font:900 28px var(--display);text-transform:uppercase;display:flex;align-items:center;gap:12px;margin-bottom:14px;padding:0}
.step legend span{display:inline-grid;place-items:center;width:34px;height:34px;background:var(--acc);color:var(--ink);font:800 15px var(--mono)}
.step legend small{font:400 12px var(--mono);color:var(--muted);text-transform:none}
.sizes{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.size,.fp,.freq-opt{position:relative}
.size input,.fp input,.freq-opt input{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none}
.size-card{display:flex;flex-direction:column;gap:2px;padding:14px;border:2px solid var(--line);cursor:pointer;height:100%;transition:border-color .12s}
.size-card b{font:900 24px/1 var(--display);text-transform:uppercase}
.size-card em{font:800 18px var(--mono);font-style:normal;color:var(--acc)}
.size-card small{font:400 11px var(--mono);color:var(--muted)} .size-card .warn{color:var(--gold)}
.size input:checked+.size-card{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 12%,transparent)}
.size input:focus-visible+.size-card,.fp input:focus-visible+span,.freq-opt input:focus-visible+span{outline:3px solid var(--gold)}
.flavor-search{width:100%;margin-bottom:10px}
.picked{font:600 13px var(--mono);color:var(--acc);margin:0 0 10px}
.flavor-picker{max-height:420px;overflow:auto;border:1px solid var(--line);padding:6px 14px 14px;background:var(--ink-2)}
.fp-fam h3{font:600 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:14px 0 8px;position:sticky;top:0;background:var(--ink-2);padding:6px 0}
.fp-list{display:flex;flex-wrap:wrap;gap:6px}
.fp span{display:inline-block;font:600 13px var(--body);padding:7px 12px;border:1px solid var(--line);cursor:pointer;border-radius:99px}
.fp span:hover{border-color:var(--acc)}
.fp input:checked+span{background:var(--acc);border-color:var(--acc);color:var(--ink)}
.fp.hide,.fp-fam.hide{display:none}
.new{font:800 9px var(--mono);font-style:normal;background:var(--cherry);color:#fff;padding:1px 5px;vertical-align:middle}
.freq{display:grid;gap:10px}
.freq-opt>span{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;padding:14px 16px;border:2px solid var(--line);cursor:pointer}
.freq-opt b{font:800 19px var(--display);text-transform:uppercase;letter-spacing:.03em}
.freq-opt em{font:800 15px var(--mono);font-style:normal;color:var(--acc)}
.freq-opt small{grid-column:1/-1;font:400 11px var(--mono);color:var(--muted)}
.freq-opt select{grid-column:1/-1;justify-self:start}
.freq-opt input:checked+span{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 10%,transparent)}
.freq-opt.sub>span{border-style:dashed}
.buy-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:10px}
.qty{font:600 12px var(--mono);text-transform:uppercase;display:flex;align-items:center;gap:8px}
.qty input{width:74px}
.soon-box{position:relative;overflow:hidden;border:2px dashed var(--cherry);padding:24px 24px 18px;margin-top:24px}

/* Forms */
input,select,textarea{font:500 15px var(--body);color:var(--text);background:var(--ink);border:1px solid var(--line);padding:12px 14px;width:100%;border-radius:0}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acid)}
label{display:grid;gap:6px;font:600 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
label small{text-transform:none;letter-spacing:0;font-weight:400}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 14px}
.hp{position:absolute;left:-9999px}
.linkbtn{background:none;border:0;color:var(--acid);font:inherit;cursor:pointer;text-decoration:underline;padding:0}

/* Ticket forms (perforated stub) */
.ticket{background:var(--ink-2);border:1px solid var(--line);padding:28px;position:relative;
  -webkit-mask:radial-gradient(circle 12px at 0 88px,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 12px at 100% 88px,#0000 98%,#000) right/51% 100% no-repeat}
.ticket::after{content:"";position:absolute;left:18px;right:18px;top:88px;border-top:2px dashed var(--line)}
.ticket-no{font:800 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--acid);margin:0 0 18px}
.ticket .ticket-no~.ticket-no{margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}
.ticket.done{text-align:center}
.auth-wrap{display:grid;place-items:center}.auth{width:min(460px,100%)}
.how{padding-left:0;list-style:none;counter-reset:h;margin:30px 0}
.how li{counter-increment:h;display:grid;grid-template-columns:44px 1fr;gap:10px;padding:12px 0;border-bottom:1px dashed var(--line)}
.how li::before{content:counter(h,decimal-leading-zero);font:800 22px var(--display);color:var(--gold)}
.custom-page{padding:56px 0 80px}

/* Receipt */
.receipt{background:var(--paper);color:var(--ink);font:500 13px/1.45 var(--mono);padding:26px 22px 34px;position:relative;
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/16px 51% repeat-x,linear-gradient(#000 0 0) top/100% calc(100% - 7px) no-repeat}
.r-head{text-align:center;font-weight:800;text-transform:uppercase;letter-spacing:.1em;border-bottom:1px dashed var(--ink);padding-bottom:12px;margin:0 0 10px}
.r-head small{font-weight:400;letter-spacing:0;text-transform:none}
.r-line{display:grid;grid-template-columns:1fr auto auto auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px dotted rgba(0,0,0,.3)}
.r-desc{display:grid}.r-desc span{font-size:12px;color:#444}.r-sub{color:#2d6b00!important;font-weight:700}
.r-qty{width:62px;padding:6px;background:#fff;color:var(--ink);border:1px solid var(--ink);font:600 13px var(--mono)}
.r-amt{font-weight:800;min-width:74px;text-align:right}
.r-x{background:none;border:0;font:800 18px var(--mono);cursor:pointer;color:var(--ink)}
.r-tot{margin-top:12px}.r-tot div{display:flex;justify-content:space-between;padding:3px 0}
.r-tot .save{color:#2d6b00}.r-tot .grand{font-size:18px;font-weight:800;border-top:2px solid var(--ink);margin-top:6px;padding-top:8px}
.r-foot{text-align:center;margin:18px 0 0;letter-spacing:.1em;font-size:11px}
.cart-form .buy-row{justify-content:flex-end}

/* Votes */
.vote-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.vote-card{border:2px solid var(--acc);padding:18px;background:var(--ink-2);display:flex;flex-direction:column;gap:8px}
.vote-card.voted{background:color-mix(in srgb,var(--acc) 16%,var(--ink-2))}
.vote-card h2{font:900 34px/.92 var(--display);text-transform:uppercase;margin:0}
.vc-rank{font:800 12px var(--mono);color:var(--acc)}
.vc-meter{height:10px;background:var(--ink-3)}.vc-meter span{display:block;height:100%;width:var(--w);background:var(--acc)}
.vc-count{font:600 12px var(--mono);color:var(--muted);margin:0}
.vote-card .btn{align-self:flex-start;margin-top:auto}
.votes-left{color:var(--acid)}
.suggest{margin-top:40px;max-width:620px}.suggest-row{display:flex;gap:10px}

/* Account */
.sub-card{border:2px solid var(--acid);margin-bottom:18px;background:var(--ink-2)}
.sub-card.st-paused{border-color:var(--muted)}.sub-card.st-past_due{border-color:var(--cherry)}
.sub-card header{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:14px 18px;border-bottom:1px solid var(--line);font:600 13px var(--mono)}
.sub-items{padding:14px 18px;display:grid;gap:10px}
.sub-line{display:grid;grid-template-columns:1fr 1fr 80px;gap:10px;align-items:center}
.sub-items .btn{justify-self:start}
.sub-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:0 18px 16px}
.sub-actions select{width:auto;padding:8px}
.pill{display:inline-block;font:800 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;background:var(--acid);color:var(--ink)}
.pill.st-pending_payment{background:var(--gold)}.pill.st-cancelled{background:var(--cherry);color:#fff}.pill.st-completed{background:var(--muted)}
.order-list{list-style:none;margin:0;padding:0}
.order-list a{display:grid;grid-template-columns:1fr auto auto auto;gap:14px;align-items:center;padding:14px 4px;border-bottom:1px solid var(--line);text-decoration:none;font-size:14px}
.order-list a:hover{background:var(--ink-2)}
.status-track{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 24px}
.status-track span{flex:1;min-width:90px;text-align:center;font:600 11px var(--mono);text-transform:uppercase;padding:10px 6px;background:var(--ink-3);color:var(--muted)}
.status-track span.on{background:var(--acid);color:var(--ink)}.status-track .cancel{background:var(--cherry)!important;color:#fff!important}
.pay-box{display:grid;gap:16px}#card-container{min-height:90px;background:#fff;padding:8px}
.pay-msg{font:600 13px var(--mono);color:var(--cherry);margin:0}

/* Footer */
.foot{border-top:6px solid var(--text);margin-top:0;padding:0 20px 30px;overflow:hidden}
.foot-word{font:900 clamp(64px,15.5vw,250px)/.8 var(--display);color:transparent;-webkit-text-stroke:1.5px #3a3444;letter-spacing:-.02em;white-space:nowrap;margin:30px 0 20px;text-align:center}
.foot-grid{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:320px 1fr;gap:40px}
.label-block{border:2px solid var(--text);padding:8px 12px}
.lb-row{display:flex;justify-content:space-between;font:600 12px var(--mono);text-transform:uppercase;padding:5px 0;border-bottom:1px solid var(--line)}.lb-row:last-child{border:0}
.foot-links{display:flex;flex-wrap:wrap;gap:10px 24px;align-content:start;font:600 13px var(--mono)}
.foot-links a{text-decoration:none;color:#cfc9d9}.foot-links a:hover{color:var(--acid)}
.foot .fine{max-width:1240px;margin:26px auto 0}

/* Responsive */
@media (max-width:900px){
  .hero,.split,.pdp{grid-template-columns:1fr}
  .hero-wheel{max-width:300px;order:-1;margin-top:-10px}
  .facts{grid-template-columns:repeat(2,1fr)}.facts div:nth-child(2){border-right:0}.facts div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .aisle-row{grid-template-columns:40px 1fr auto;gap:12px}.aisle-blurb{display:none}
  .ptable.mini{grid-template-columns:repeat(5,1fr)}.ptable.mini .el:nth-child(n+21){display:none}
  .pdp-media{position:static}.facts-panel{margin:-40px 10px 0}
  .foot-grid{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .bar{flex-wrap:wrap;gap:10px;padding:8px 16px}.brand img{height:34px}
  .nav{order:3;flex-basis:100%;margin:0 -16px;padding:0 10px}
  .bar-right{margin-left:auto}
  .wrap{padding:0 16px}
  .grid2,.grid3{grid-template-columns:1fr}
  .hero{padding-top:28px}
  .hero-h .tape-strip{margin:-4px 0 -2px -6px}
  .heart{right:-.42em;bottom:.06em;width:1.25em;height:1.32em}
  .sub-line{grid-template-columns:1fr 80px}.sub-line b{grid-column:1/-1}
  .order-list a{grid-template-columns:1fr auto;}
  .r-line{grid-template-columns:1fr auto auto}.r-x{grid-column:3}
  .ticket{padding:22px 18px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* Flavour landing page */
.flavor-hero{display:grid;grid-template-columns:200px 1fr;gap:40px;align-items:center}
.big-el{aspect-ratio:1;min-height:0!important;padding:14px}.big-el .el-s{font-size:96px}.big-el:hover{transform:none}
.fam-page{--acc:var(--c)}
.crumbs{font:600 12px var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:12px}.crumbs a{color:var(--acc);text-decoration:none}
.flavor-buy{display:grid;gap:10px}.flavor-buy .btn{justify-self:start}
@media (max-width:640px){.flavor-hero{grid-template-columns:110px 1fr;gap:18px}.big-el .el-s{font-size:52px}}
.legal section{border-top:1px solid var(--line);padding:22px 0}.legal h2{font:800 26px var(--display);text-transform:uppercase;margin:0 0 8px;color:var(--acid)}.legal p{color:#d9d3e3;max-width:68ch;margin:0 0 10px}
.consent{display:flex;gap:10px;align-items:flex-start;text-transform:none;letter-spacing:0;font:400 13px/1.5 var(--body);color:#d9d3e3}.consent input{width:auto;margin-top:3px}

/* Label art from the real packaging */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.line-art{max-width:min(520px,80vw);height:auto;margin:4px 0 6px}
.aisle-shot{width:96px;height:96px;object-fit:contain;margin:-14px 0;filter:drop-shadow(0 8px 20px rgba(0,0,0,.6))}
.fp.has-art span{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 5px}
.fp.has-art img{width:34px;height:34px;object-fit:contain;border-radius:50%}
.flavor-art{width:100%;max-width:420px;height:auto;filter:drop-shadow(0 18px 40px rgba(0,0,0,.6))}
.facts-panel.real .lc-row.head{font-size:11px;border-bottom-width:2px}
.facts-panel .serving{margin:2px 0 6px;font:600 12px var(--mono)}
.facts-panel .lc-row.sub{padding-left:14px;font-weight:500}
.facts-panel .lc-row.cals{font:900 20px var(--display);background:var(--acc);margin:0 -16px;padding:2px 16px;text-transform:uppercase}
.facts-panel .lc-row b i{font-style:normal;display:inline-block;min-width:44px;text-align:right}
.facts-panel.ing{margin-top:14px;margin-left:24px;box-shadow:none}
.facts-panel.ing h3{font:900 22px var(--display);text-transform:uppercase;margin:0 0 6px}
.facts-panel.ing p{font:400 12px/1.5 var(--body);margin:0 0 6px;color:#333}
.facts-panel .allergen{color:var(--ink)}
@media (max-width:900px){.aisle-shot{display:none}.facts-panel.ing{margin:14px 10px 0}}
.inline-label{display:inline-flex;align-items:center;gap:8px;margin:0}
.w-code{width:110px}

/* The broken heart in the hero — it is "Break Junk's Heart", after all */
.heart{position:absolute;z-index:-1;right:-.66em;bottom:.08em;width:1.4em;height:1.48em;overflow:visible;margin:0;transform:rotate(33deg);transform-origin:50% 50%}
.heart g{transform-origin:12px 13px}
.heart .h-l{fill:var(--gold)}
.heart .h-r{fill:#e9e5ef}
.heart g path{stroke:var(--ink);stroke-width:.6}
.heart .h-l{animation:crack-l 4s ease-in-out 1 forwards}
.heart .h-r{animation:crack-r 4s ease-in-out 1 forwards}
@keyframes crack-l{0%,45%{transform:none}58%{transform:translate(-3%,1%) rotate(-7deg)}70%,100%{transform:translate(-1.5%,.5%) rotate(-3deg)}}
@keyframes crack-r{0%,45%{transform:none}58%{transform:translate(3%,1.5%) rotate(7deg)}70%,100%{transform:translate(1.5%,.5%) rotate(3deg)}}
@media (prefers-reduced-motion:reduce){.heart .h-l{transform:translate(-1.5%,.5%) rotate(-3deg)}.heart .h-r{transform:translate(1.5%,.5%) rotate(3deg)}}

/* Flavor Drop archive — every closed round keeps its final board */
.past-drops{padding:80px 0;border-top:1px solid var(--line)}
.past-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.past-card{background:var(--ink-2);border:1px solid var(--line);padding:22px}
.past-card header{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font:700 12px var(--mono);text-transform:uppercase;letter-spacing:.08em}
.past-no{color:var(--text)}.past-date{color:var(--muted)}
.past-win{display:flex;align-items:baseline;gap:10px;margin:14px 0 6px}
.past-win span{font:700 11px var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.past-win b{font-family:var(--display);font-weight:900;font-size:30px;line-height:1;text-transform:uppercase;color:var(--acc)}
.past-note{margin:0 0 10px;color:var(--muted);font-size:14px}
.past-board{list-style:none;margin:10px 0 0;padding:0}
.past-board li{display:grid;grid-template-columns:1fr 1.2fr 32px;align-items:center;gap:10px;padding:7px 0;border-top:1px dashed var(--line);font:600 12px var(--mono);text-transform:uppercase}
.pb-bar{height:10px;background:linear-gradient(90deg,var(--muted) var(--w),var(--ink-3) var(--w))}
.pb-v{text-align:right;color:var(--muted)}
.drop-clock{margin:10px 0 0;font:700 13px var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--gold)}
.vc-done{font:700 11px var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.preview-bar{padding:10px 20px;text-align:center;background:var(--grape);color:var(--ink);font:700 12px var(--mono);text-transform:uppercase;letter-spacing:.08em}
.soon-note{margin:18px 0 0;padding:16px 18px;border:2px dashed var(--line);font:700 13px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--gold)}