/* Temas por categoria: salgados = preto + luz amarela; doces = chocolate + rosa;
   lanche = laranja; açaí = roxo. O tema muda conforme o rolo gira. */
:root,[data-theme="salgados"]{
  --bg:#050505; --bg2:#17130a; --sheet:#100d06; --glow:#ffe600; --accent:#e3302b; --on-accent:#fff;
  --line:rgba(255,230,0,.24); --surface:rgba(255,255,255,.055); --surface2:rgba(255,255,255,.1);
  --txt:#fff; --muted:#bdb596; --price:#ffe600;
}
[data-theme="doces"]{
  --bg:#150809; --bg2:#33121c; --sheet:#1c0c10; --glow:#ff7eb6; --accent:#ff3d8b; --on-accent:#fff;
  --line:rgba(255,126,182,.28); --muted:#d3b2bc; --price:#ff9ac6;
}
[data-theme="lanche"]{
  --bg:#0e0904; --bg2:#2a1805; --sheet:#150d05; --glow:#ff9d1c; --accent:#ff7a00; --on-accent:#1a0d00;
  --line:rgba(255,157,28,.28); --muted:#cdb797; --price:#ffb54d;
}
[data-theme="bebidas"]{
  --bg:#040d14; --bg2:#0b2a3d; --sheet:#071520; --glow:#4cc9ff; --accent:#1d9bf0; --on-accent:#fff;
  --line:rgba(76,201,255,.28); --muted:#a9c4d3; --price:#7bd8ff;
}
[data-theme="acai"]{
  --bg:#0c0518; --bg2:#2a1248; --sheet:#150a26; --glow:#b86bff; --accent:#8f3dff; --on-accent:#fff;
  --line:rgba(184,107,255,.3); --muted:#c6b3de; --price:#cfa0ff;
}
:root{
  --green:#1fa85a; --r:16px;
  --display:'Anton','Impact','Arial Narrow',sans-serif; --script:'Kaushan Script','Brush Script MT',cursive;
  --sans:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;background:#000;overflow-x:hidden}
body{background:var(--bg);color:var(--txt);font-family:var(--sans);font-size:16px;line-height:1.5;padding-bottom:84px;overflow-x:hidden;transition:background .6s;min-height:100vh}
body.lock{overflow:hidden}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
a{color:inherit}
[hidden]{display:none!important}
.wrap{max-width:860px;margin:0 auto;padding:0 18px}
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:.02em;text-transform:uppercase;line-height:1.05}
:focus-visible{outline:3px solid var(--glow);outline-offset:2px}

/* luz ambiente e grão */
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 80% 55% at 50% 22%,color-mix(in srgb,var(--glow) 22%,transparent),transparent 70%),
             radial-gradient(ellipse 120% 60% at 50% 120%,var(--bg2),transparent 70%);
  transition:background .6s}
.ambient::after{content:"";position:absolute;inset:0;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
main,.topbar{position:relative;z-index:1}

/* topo */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;padding:8px 18px;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto}
.brand-mascot{height:40px;width:auto;filter:drop-shadow(0 0 8px color-mix(in srgb,var(--glow) 55%,transparent))}
.brand-name{font-family:var(--display);font-size:1.25rem;letter-spacing:.04em;color:var(--glow);line-height:1}
.brand-name small{font-family:var(--sans);font-weight:500;font-size:.78rem;letter-spacing:0;color:var(--txt);margin-left:2px}
.status{display:flex;align-items:center;gap:6px;font-size:.8rem;font-weight:700;color:#5df29a;white-space:nowrap}
.status i{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.status.closed{color:#ff7a70}
.bump{animation:bump .4s}
@keyframes bump{40%{transform:scale(1.1)}}
@media(max-width:480px){.brand-name{display:none}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 22px;border-radius:99px;font-weight:700;font-size:.98rem;text-decoration:none;transition:transform .1s,filter .15s}
.btn:active{transform:scale(.98)}
.btn-red{background:var(--accent);color:var(--on-accent)}
.btn-ink{background:var(--glow);color:#111}
.btn-green{background:var(--green);color:#fff}
.btn-quiet{border:1.5px solid var(--line);color:var(--muted)}
.btn:hover{filter:brightness(1.08)}

/* ===== INÍCIO: logo no formato original ===== */
.home{overflow-x:clip;text-align:center;padding:14px 14px 28px;max-width:900px;margin:0 auto}
.stage{--S:min(94vw,780px);position:relative;width:var(--S);height:calc(var(--S)*.66);margin:6px auto 4px}
.halo{position:absolute;left:50%;top:50%;width:112%;height:136%;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,230,0,.42),rgba(255,230,0,.15) 55%,transparent 75%);filter:blur(18px)}
.plate{--W:calc(var(--S)*.66);position:absolute;right:0;top:50%;width:var(--W);height:calc(var(--W)*.6795);transform:translateY(-50%);filter:drop-shadow(0 0 22px rgba(255,230,0,.55))}
.plate-bg{position:absolute;inset:0;width:100%;height:100%}
.plate-in{position:absolute;left:3.97%;right:3.97%;top:5.85%;bottom:5.85%}
.plate-text{position:absolute;left:14%;right:6%;top:10%;bottom:18%;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.p-fam,.p-tag{font-family:var(--script);color:#ffe600;text-shadow:0 0 6px rgba(255,230,0,.6),0 2px 0 #b3140f}
.p-fam{font-size:calc(var(--W)*.068);margin-bottom:calc(var(--W)*.004);align-self:flex-end;margin-right:12%}
.p-name{font-family:var(--display);font-size:calc(var(--W)*.22);letter-spacing:.01em;color:#ffe600;-webkit-text-stroke:calc(var(--W)*.0045) #a3120e;paint-order:stroke fill;text-shadow:0 0 14px rgba(255,230,0,.55),0 4px 0 #a3120e}
.p-sub{font-family:var(--sans);font-weight:700;font-size:calc(var(--W)*.115);color:#ffe600;text-shadow:0 0 8px rgba(255,230,0,.5),0 2px 0 #a3120e;margin-top:calc(var(--W)*-.012)}
.p-tag{font-size:calc(var(--W)*.058);margin-top:calc(var(--W)*.016);white-space:nowrap}
.stars{position:absolute;left:5%;bottom:19%;display:flex;flex-direction:column-reverse;gap:calc(var(--W)*.004);transform:rotate(-12deg);color:#ffe600;font-size:calc(var(--W)*.036);filter:drop-shadow(0 0 4px rgba(255,230,0,.9))}
.stars i{font-style:normal;display:block;line-height:1;transform:translateX(calc(var(--n,0)*var(--W)*.008))}
.stars i:nth-child(1){--n:0}.stars i:nth-child(2){--n:1}.stars i:nth-child(3){--n:2}.stars i:nth-child(4){--n:3}.stars i:nth-child(5){--n:4}
/* mascote realista parado, dentro da placa, na mesma posição do logo original */
.mascot{position:absolute;left:0;bottom:0;height:100%;width:auto;z-index:2;
  filter:drop-shadow(0 0 2px rgba(0,0,0,.5)) drop-shadow(0 12px 12px rgba(0,0,0,.5))}

.pick{font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;font-size:1.15rem;color:var(--glow);margin:0 0 2px;text-shadow:0 0 14px color-mix(in srgb,var(--glow) 60%,transparent)}
.reel-hint{font-size:.74rem;color:var(--muted);margin-top:2px}
.link-btn{margin:12px auto 0;color:var(--muted);font-weight:500;font-size:.92rem;text-decoration:underline;text-underline-offset:3px}
.link-btn:hover{color:var(--txt)}
.home-foot{margin-top:14px;font-size:.82rem;color:var(--muted)}
.home-foot a{color:var(--glow);font-weight:700}

/* ===== ROLO (lista vertical reta que sobe e desce) ===== */
.reel{--h:96px;--gap:116px;--z:150px;position:relative;height:calc(var(--h)*3.05);max-width:620px;margin:0 auto;perspective:700px;perspective-origin:22% 50%;
  touch-action:pan-x;user-select:none;-webkit-user-select:none;outline:none;clip-path:inset(0 -80px 0 -80px);
  -webkit-mask-image:linear-gradient(transparent 0,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(transparent 0,#000 14%,#000 86%,transparent 100%)}
.reel-drum{position:absolute;inset:0;perspective:700px;perspective-origin:22% 50%;transform:translateY(var(--shift,0px)) rotateY(11deg);transform-origin:50% 50%;transition:transform .55s cubic-bezier(.2,.9,.25,1)}
/* tambor: os cartões giram em volta de um eixo (vêm de trás por cima/por baixo e voltam para trás),
   mas cada cartão continua reto, de frente. A posição (translate, opacidade, brilho) é calculada no JS a cada quadro. */
.reel-item{--c:var(--glow);position:absolute;left:11%;right:15%;top:calc(50% - var(--h)/2);height:var(--h);text-align:left;cursor:pointer;will-change:translate,opacity}
.reel-item.gone{visibility:hidden;pointer-events:none}
/* escolha: os outros cartões saem para o lado (os de cima para a esquerda, os de baixo para a direita) */
.reel.picking{pointer-events:none}
.reel.picking .reel-item:not(.is-active){transform:translateX(calc(var(--side)*135%));opacity:0!important;
  transition:transform .55s cubic-bezier(.55,.05,.9,.45),opacity .45s ease-in}
.reel.picking .reel-item.is-active{transform:translateZ(40px);transition:transform .45s cubic-bezier(.2,.9,.3,1.3)}
.reel.picking .reel-item.is-active .ri{box-shadow:0 0 0 1px #000,0 0 34px 6px color-mix(in srgb,var(--c) 85%,transparent),0 0 80px 14px color-mix(in srgb,var(--c) 40%,transparent)}
/* barra de destaque na lateral esquerda do cartão */
.reel-item::before{content:"";position:absolute;right:100%;top:2px;bottom:2px;width:22px;border-radius:10px 0 0 10px;background:linear-gradient(90deg,#000,color-mix(in srgb,var(--c) 60%,#000));transform-origin:100% 50%;transform:rotateY(62deg);opacity:.85;transition:opacity .3s}
.reel-item.is-active::before{opacity:1}
.ri{position:relative;display:flex;align-items:stretch;height:100%;border-radius:14px;overflow:hidden;background:#111;border:2px solid color-mix(in srgb,var(--c) 40%,transparent);
  box-shadow:0 0 0 1px #000,0 10px 24px rgba(0,0,0,.5);transition:border-color .3s,box-shadow .3s}
.reel-item.is-active .ri{border-color:var(--c);box-shadow:0 0 0 1px #000,0 0 22px 2px color-mix(in srgb,var(--c) 70%,transparent),0 0 56px 8px color-mix(in srgb,var(--c) 28%,transparent)}
.ri-photo{flex:0 0 38%;position:relative;overflow:hidden}
.ri-photo img{width:100%;height:100%;object-fit:cover}
.ri-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 55%,#111)}
.ri-text{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;padding:6px 14px 6px 8px}
.ri-text b{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.03em;font-size:1.3rem;line-height:1.05;color:var(--c);text-shadow:0 0 12px color-mix(in srgb,var(--c) 55%,transparent)}
.ri-text small{color:var(--muted);font-size:.78rem;line-height:1.3;margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ri-text .price{font-size:.95rem;margin-top:3px;color:var(--price)}
.ri-go{display:none}
/* cartões de categoria: foto grande ao fundo */
.ri-cat .ri-photo{position:absolute;inset:0;flex:none}
.ri-cat .ri-photo::after{background:linear-gradient(90deg,rgba(0,0,0,.88) 8%,rgba(0,0,0,.35) 62%,rgba(0,0,0,.05))}
.ri-cat .ri-text{position:relative;z-index:1;padding:6px 16px 6px 20px}
.ri-cat .ri-text b{font-size:1.75rem}
.ri-cat .ri-text small{font-size:.84rem;color:#e6dfc7}
.reel-ctrl{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px;z-index:5}
.rc{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--line);background:color-mix(in srgb,var(--bg) 70%,transparent);color:var(--glow);display:grid;place-items:center;backdrop-filter:blur(6px);transition:background .2s,color .2s,box-shadow .2s}
.rc:hover:not(:disabled){background:var(--glow);color:#111;box-shadow:0 0 16px color-mix(in srgb,var(--glow) 55%,transparent)}
.rc:disabled{opacity:.3;cursor:default}
.rc svg{width:18px;height:18px}
@media(min-width:620px){.reel{--h:110px;--gap:134px}.reel-item{left:10%;right:13%}}

/* ===== CATEGORIA ===== */
.catview{padding-bottom:16px;animation:catin .45s cubic-bezier(.2,.9,.3,1)}
@keyframes catin{from{transform:translateY(14px)}}
.cat-top{max-width:860px;margin:0 auto;padding:12px 18px 0}
.back{display:inline-flex;align-items:center;gap:6px;padding:9px 14px 9px 10px;border-radius:99px;border:1.5px solid var(--line);font-weight:700;font-size:.9rem;background:var(--surface)}
.back:hover{border-color:var(--glow);color:var(--glow)}
.cat-title{padding:14px 0 10px}
.kicker{font-family:var(--script);color:var(--glow);font-size:1.15rem;line-height:1;text-shadow:0 0 10px color-mix(in srgb,var(--glow) 60%,transparent)}
.cat-title h2{font-size:clamp(2rem,8vw,3rem);color:var(--txt);text-shadow:0 0 22px color-mix(in srgb,var(--glow) 45%,transparent)}
.cat-title p:last-child{color:var(--muted);font-size:.92rem;margin-top:6px}
.search{display:flex;align-items:center;gap:10px;background:var(--surface);border:1.5px solid var(--line);border-radius:99px;padding:0 16px;color:var(--muted);margin-bottom:10px}
.search:focus-within{border-color:var(--glow)}
.search input{flex:1;background:none;border:0;outline:0;color:var(--txt);font:inherit;font-size:.95rem;padding:11px 0;min-width:0}
.search input::placeholder{color:var(--muted)}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:4px 0 8px;padding-bottom:2px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;padding:6px 14px;border-radius:99px;border:1.5px solid var(--line);font-size:.84rem;font-weight:700;color:var(--muted)}
.chip:hover{border-color:var(--glow);color:var(--txt)}
.chip.on{background:var(--glow);border-color:var(--glow);color:#111;box-shadow:0 0 14px color-mix(in srgb,var(--glow) 45%,transparent)}
.empty{text-align:center;color:var(--muted);padding:34px 20px}

/* painel do item em foco */
.panel{max-width:620px;margin:6px auto 0;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);overflow:hidden;animation:panelin .35s ease-out}
@keyframes panelin{from{transform:translateY(8px)}}
.panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:14px 16px 8px}
.panel-head h3{font-size:1.35rem;color:var(--glow)}
.panel-note{padding:0 16px 12px;color:var(--muted);font-size:.86rem}
.panel .var{display:flex;align-items:center;gap:10px;padding:12px 14px 12px 16px;border-top:1px dashed var(--line)}
.panel-cta{padding:4px 16px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.panel-cta .price{font-family:var(--display);font-size:1.6rem;letter-spacing:.02em;font-weight:400}
.vi{flex:1;min-width:0}
.vi b{display:block;font-weight:700;font-size:.97rem}
.vi span{display:block;color:var(--muted);font-size:.82rem;line-height:1.35}
.price{font-weight:700;white-space:nowrap;color:var(--price)}
.add-sq{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--glow);color:var(--glow);display:grid;place-items:center;flex:0 0 auto;transition:background .15s,color .15s,box-shadow .15s}
.add-sq:hover,.add-sq:active{background:var(--glow);color:#111;box-shadow:0 0 16px color-mix(in srgb,var(--glow) 60%,transparent)}
.add-sq svg{width:18px;height:18px}
.opt-btn{width:34px;height:34px;border-radius:50%;color:var(--muted);display:grid;place-items:center;flex:0 0 auto}
.opt-btn:hover{background:var(--surface2);color:var(--txt)}
.opt-btn svg{width:17px;height:17px}
.res{background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:8px;display:flex;align-items:center;gap:10px}
.res .price{display:block;margin-top:2px}

/* barra do carrinho */
.cartbar{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 14px calc(10px + env(safe-area-inset-bottom))}
.cartbar{display:flex;justify-content:center}
.cartbar button{width:auto;min-width:230px;max-width:calc(100vw - 28px);margin:0 auto;display:inline-flex;align-items:center;justify-content:center;gap:12px;background:var(--glow);color:#111;border-radius:99px;padding:11px 22px 11px 14px;font-weight:700;box-shadow:0 0 28px color-mix(in srgb,var(--glow) 50%,transparent),0 8px 24px rgba(0,0,0,.5)}
.cb-count{background:#111;color:var(--glow);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:.85rem}
.cb-label{flex:0 0 auto;text-align:left;white-space:nowrap}
.cb-total{font-family:var(--display);font-size:1.2rem;letter-spacing:.02em;padding-left:12px;border-left:1.5px solid rgba(0,0,0,.25);white-space:nowrap}

/* sheet */
.overlay{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.7);display:flex;align-items:flex-end;justify-content:center;animation:fade .2s}
@keyframes fade{from{opacity:0}}
.sheet{width:100%;max-width:560px;max-height:92vh;background:var(--sheet);color:var(--txt);border:1.5px solid var(--line);border-bottom:0;border-radius:22px 22px 0 0;display:flex;flex-direction:column;animation:up .25s;box-shadow:0 -10px 50px color-mix(in srgb,var(--glow) 14%,transparent)}
@keyframes up{from{transform:translateY(30px)}}
@media(min-width:620px){.overlay{align-items:center}.sheet{border-radius:22px;border-bottom:1.5px solid var(--line)}}
.sh-head{display:flex;align-items:flex-start;gap:10px;padding:18px 18px 10px}
.sh-head h3{flex:1;font-size:1.6rem;color:var(--glow)}
.sh-head p{color:var(--muted);font-size:.86rem;margin-top:4px;font-family:var(--sans);font-weight:400;text-transform:none;letter-spacing:0}
.x{width:36px;height:36px;border-radius:50%;background:var(--surface2);display:grid;place-items:center;flex:0 0 auto}
.x svg{width:16px;height:16px}
.sh-body{overflow-y:auto;padding:0 18px 12px;flex:1}
.sh-foot{padding:12px 18px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line);display:flex;gap:12px;align-items:center}
.sh-foot .btn{flex:1}
.grp{margin:14px 0}
.grp h4{font-size:.95rem;display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.grp h4 small{color:var(--muted);font-weight:500;font-size:.78rem}
.opt{display:flex;align-items:center;gap:10px;padding:11px 13px;background:var(--surface);border:1.5px solid var(--line);border-radius:12px;margin-bottom:6px;cursor:pointer;font-weight:500;font-size:.93rem}
.opt input{accent-color:var(--glow);width:18px;height:18px;flex:0 0 auto}
.opt .on-p{margin-left:auto;color:var(--price);font-size:.85rem;white-space:nowrap;font-weight:700}
.opt .od{display:block;color:var(--muted);font-size:.78rem}
.opt:has(input:checked){border-color:var(--glow);background:var(--surface2)}
.opt.dis{opacity:.35;pointer-events:none}
.acai-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.acai-grid .opt{margin:0}
.qty{display:flex;align-items:center;gap:6px;background:var(--surface2);border-radius:99px;padding:4px}
.qty button{width:34px;height:34px;border-radius:50%;background:var(--surface);font-weight:700;font-size:1.1rem;line-height:1}
.qty span{min-width:24px;text-align:center;font-weight:700}
textarea,.fld{width:100%;background:var(--surface);border:1.5px solid var(--line);border-radius:12px;color:var(--txt);font:inherit;font-size:.95rem;padding:11px 13px;outline:0}
textarea::placeholder,.fld::placeholder{color:var(--muted)}
textarea:focus,.fld:focus{border-color:var(--glow)}
textarea{resize:none;height:62px}

/* carrinho */
.line{display:flex;gap:10px;padding:13px 0;border-bottom:1px solid var(--line)}
.line .li{flex:1;min-width:0}
.line b{font-weight:700}
.line .ld{display:block;color:var(--muted);font-size:.8rem}
.line .lp{font-weight:700;margin-top:4px;font-family:var(--display);color:var(--price);letter-spacing:.02em;font-size:1.1rem}
.line .qty{align-self:center}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.seg label{display:block}
.seg input{position:absolute;opacity:0}
.seg span{display:block;text-align:center;padding:11px;border-radius:12px;border:1.5px solid var(--line);font-weight:700;background:var(--surface);font-size:.92rem}
.seg input:checked+span{background:var(--glow);color:#111;border-color:var(--glow)}
.seg input:focus-visible+span{outline:3px solid var(--glow);outline-offset:2px}
.form{display:grid;gap:8px}
.sum{margin:14px 0 4px;display:grid;gap:5px;font-size:.93rem}
.sum div{display:flex;justify-content:space-between}
.sum .tot{font-family:var(--display);font-size:1.5rem;letter-spacing:.02em;border-top:1px solid var(--line);padding-top:8px;margin-top:4px;color:var(--glow)}
.warn{color:#ff8a80;font-size:.86rem;font-weight:700;min-height:1.3em}
.say{display:flex;align-items:center;gap:12px;background:var(--surface);border-radius:12px;padding:10px 12px;margin:10px 0;font-size:.85rem;color:var(--muted)}
.say img{height:54px;width:auto;flex:0 0 auto}

/* guia (quiz) */
.progress{height:4px;background:var(--surface2);border-radius:2px;margin-bottom:10px;overflow:hidden;width:120px}
.progress i{display:block;height:100%;background:var(--glow);transition:width .3s;box-shadow:0 0 10px var(--glow)}
.quiz-q{font-family:var(--display);text-transform:uppercase;letter-spacing:.02em;font-size:1.7rem;margin:8px 0 14px;line-height:1.1}
.quiz-opts{display:grid;gap:8px;grid-template-columns:1fr 1fr}
.qo{background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:15px 12px;font-weight:700;text-align:left;font-size:.95rem;transition:border-color .15s,background .15s}
.qo small{display:block;font-weight:400;color:var(--muted);font-size:.78rem;margin-top:3px}
.qo:hover{border-color:var(--glow);background:var(--surface2)}
.qo.wide{grid-column:1/-1}

.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);z-index:80;background:var(--glow);color:#111;font-weight:700;padding:10px 18px;border-radius:99px;font-size:.88rem;box-shadow:0 0 22px color-mix(in srgb,var(--glow) 50%,transparent);animation:pop .25s;max-width:92vw;text-align:center}
@keyframes pop{from{transform:translate(-50%,10px);opacity:0}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important;transition:none!important}}

/* ===== carrossel de ingredientes (açaí) ===== */
.car{position:relative;margin:0 -18px}
.car-track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:10px 18px 14px;scroll-padding:0 18px;touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch}
.car-track::-webkit-scrollbar{display:none}
.car-card{--k:.5;position:relative;flex:0 0 112px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;cursor:pointer;scroll-snap-align:center;
  transform:scale(calc(.86 + var(--k)*.14));opacity:calc(.55 + var(--k)*.45);transition:transform .2s,opacity .2s}
.car-card input{position:absolute;opacity:0;pointer-events:none}
.cc-img{display:block;width:112px;height:112px;border-radius:50%;overflow:hidden;border:3px solid var(--line);background:#111;
  box-shadow:0 6px 16px rgba(0,0,0,.5);transition:border-color .2s,box-shadow .2s}
.cc-img img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.car-card b{font-size:.82rem;font-weight:700;line-height:1.15;min-height:2.3em;display:flex;align-items:center}
.car-card small{color:var(--price);font-weight:700;font-size:.78rem}
.cc-check{position:absolute;top:2px;right:6px;width:26px;height:26px;border-radius:50%;background:var(--glow);color:#111;display:grid;place-items:center;transform:scale(0);transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.cc-check svg{width:15px;height:15px}
.car-card:has(input:checked) .cc-img{border-color:var(--glow);box-shadow:0 0 0 2px #000,0 0 20px 3px color-mix(in srgb,var(--glow) 65%,transparent)}
.car-card:has(input:checked) .cc-check{transform:scale(1)}
.car-card:has(input:focus-visible) .cc-img{outline:3px solid var(--glow);outline-offset:2px}
.car-card.dis{opacity:.3;pointer-events:none}
.car-nav{position:absolute;top:50px;z-index:3;width:34px;height:34px;border-radius:50%;background:color-mix(in srgb,var(--sheet) 85%,transparent);border:1.5px solid var(--line);color:var(--glow);display:grid;place-items:center;backdrop-filter:blur(6px)}
.car-nav:first-child{left:6px}.car-nav:last-child{right:6px}
.car-nav:hover{background:var(--glow);color:#111}
.car-nav svg{width:16px;height:16px}

.cc-img{position:relative;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--glow) 40%,#1a1a1a),#111)}
.cc-img img{position:relative;z-index:1}
.cc-ph{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-size:2.2rem;color:var(--glow)}

/* cartão da categoria Bebidas: banner com espaço livre à esquerda para o texto */
.reel-item[data-i="4"] .ri-cat .ri-photo img{object-position:right center;object-fit:cover}
.reel-item[data-i="4"] .ri-cat .ri-photo::after{background:linear-gradient(90deg,rgba(4,13,20,.96) 0,rgba(4,13,20,.85) 34%,rgba(4,13,20,.0) 52%)}
.reel-item[data-i="4"] .ri-cat .ri-text small{color:#cfe9f5}

/* sem seleção de texto nem arrasto de imagem (arraste move a tela); campos continuam selecionáveis */
body{-webkit-user-select:none;user-select:none}
input,textarea,.fld{-webkit-user-select:text;user-select:text}
img{-webkit-user-drag:none;user-drag:none}
.reel{cursor:grab}
.reel.dragging,body.panning{cursor:grabbing}
body.panning *{cursor:grabbing!important}
.reel-item{-webkit-user-drag:none}

.ri-photo img,.cc-img img{pointer-events:none}

select.fld{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23bbb' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 12px center;padding-right:38px;cursor:pointer;-webkit-user-select:none;user-select:none}
select.fld option{background:#111;color:#fff}
.deliv-note{color:var(--price);font-size:.82rem;font-weight:700;margin:-2px 2px 2px}

.pix-info{margin-top:10px;background:var(--surface);border:1.5px dashed var(--line);border-radius:12px;padding:12px 14px;font-size:.86rem;color:var(--muted)}
.pix-info>b{display:block;color:var(--glow);font-family:var(--display);font-weight:400;font-size:1.05rem;letter-spacing:.03em;text-transform:uppercase;margin-bottom:6px}
.pix-info ol{margin:0;padding-left:18px;display:grid;gap:6px}
.pix-info li b{color:var(--txt)}

.sh-foot .btn-green{font-size:.9rem;padding:13px 12px;line-height:1.15}
.sh-foot .btn-quiet{padding:13px 14px}

/* rolo menor: opções do sabor e tamanhos (ml do açaí, porções) */
.reel.reel-mini{--h:76px;--gap:90px;--z:110px;height:calc(var(--h)*2.85);max-width:100%;margin:2px 0 4px;perspective-origin:22% 50%}
.reel-mini .reel-item{left:9%;right:16%}
.reel-mini .ri-photo{flex-basis:30%}
.reel-mini .ri-text{padding:4px 10px 4px 8px}
.reel-mini .ri-text b{font-size:1.02rem}
.reel-mini .ri-text small{font-size:.72rem;-webkit-line-clamp:1}
.reel-mini .ri-text .price{font-size:.85rem;margin-top:1px}
.reel-mini .rc{width:32px;height:32px}
.reel-mini .rc svg{width:15px;height:15px}
.panel .reel-mini{margin:0 6px}
.var-bar{border-top:1px dashed var(--line);background:color-mix(in srgb,var(--glow) 6%,transparent)}
.var-hint{color:var(--muted);font-size:.74rem;text-align:center;padding:6px 12px 10px}

/* rolo de tamanhos: cada cartão tem o visual da opção antiga (bolinha, tamanho e preço) */
.reel.reel-size{--h:56px;--gap:66px;--z:90px;height:calc(var(--h)*2.9);margin:0 0 2px}
.reel-size .reel-item{left:3%;right:15%}
.reel-size .reel-item::before{display:none}
.ri.ri-opt{align-items:center;gap:10px;padding:0 14px;border-radius:12px;background:var(--surface);border:1.5px solid var(--line);box-shadow:none;backdrop-filter:none}
.reel-size .reel-item.is-active .ri.ri-opt{border-color:var(--glow);background:var(--surface2);box-shadow:0 0 0 1px #000,0 0 18px color-mix(in srgb,var(--glow) 35%,transparent)}
.ri-opt .ro-dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--muted);flex:0 0 auto;display:grid;place-items:center}
.reel-size .reel-item.is-active .ro-dot{border-color:var(--glow)}
.reel-size .reel-item.is-active .ro-dot::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--glow)}
.ri-opt .ro-txt{flex:1;min-width:0;font-weight:500;font-size:.95rem;color:var(--txt);line-height:1.2}
.ri-opt .ro-txt small{display:block;color:var(--muted);font-size:.74rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ri-opt .ro-p{color:var(--price);font-weight:700;font-size:.88rem;white-space:nowrap}
.reel-size .rc{width:30px;height:30px}

/* rolo de opções do sabor: mesmo visual do rolo de tamanhos do açaí */
.panel .reel-var{margin:4px 8px 2px;height:calc(var(--h)*3)}
.reel-var .reel-item{left:2%;right:14%}