:root{--bg:#0f1115;--card:#171a21;--card2:#1e2230;--line:#2a2f3d;--txt:#e8eaf0;--mut:#9aa3b5;--brand:#ff5a1f;--brand2:#ffb020;--ok:#27c08a;--blue:#3b82f6;--prod:#f59e0b;--pronto:#22c55e;--fim:#64748b;}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--txt);line-height:1.4}
button{font-family:inherit;cursor:pointer}
.prod-img{width:42px;height:42px;border-radius:8px;background-size:cover;background-position:center;flex:none;background-color:#0b0f17}
.top{position:sticky;top:0;z-index:20;background:#12141a;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:12px 16px}
.logo{font-weight:900;font-size:19px;color:var(--brand)}
.logo span{color:var(--brand2)}
.lojasel{margin-left:auto;background:var(--card2);border:1px solid var(--line);color:var(--txt);border-radius:10px;padding:9px 12px;font-size:14px;font-weight:700}
.cats{display:flex;gap:8px;overflow-x:auto;padding:12px 16px;background:#12141a;border-bottom:1px solid var(--line);position:sticky;top:57px;z-index:19}
.cat{flex:0 0 auto;background:var(--card);border:1px solid var(--line);color:var(--mut);border-radius:22px;padding:9px 15px;font-size:14px;font-weight:700;white-space:nowrap}
.cat.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.wrap{max-width:1200px;margin:0 auto;padding:16px 16px 110px}
.catttl{font-size:15px;font-weight:800;color:var(--brand2);margin:18px 2px 10px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.prod{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:6px;text-align:left}
.prod h4{font-size:15px;color:#ffffff;font-weight:800}
.prod p{font-size:12px;color:#c3cad8;flex:1}
.prod .foot{display:flex;align-items:center;justify-content:space-between;margin-top:4px}
.prod .pr{color:var(--brand2);font-weight:900;font-size:16px}
.prod .add{background:var(--brand);color:#fff;border:none;border-radius:9px;padding:9px 14px;font-weight:800;font-size:14px}
.prod .num{font-size:11px;color:var(--fim);font-weight:700}
.prod .pfoto{display:block;width:100%;height:150px;border-radius:10px;background-size:cover;background-position:center;margin-bottom:6px;background-color:#0b0f17}
.prod.hasfoto h4{font-size:16px}
.sheet .mfoto{width:100%;height:200px;border-radius:12px;background-size:cover;background-position:center;background-color:#0b0f17;margin-bottom:12px}
/* cart bar */
.cartbar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:16px 20px;font-weight:900;font-size:17px;cursor:pointer;box-shadow:0 -4px 20px rgba(0,0,0,.4)}
.cartbar.hide{display:none}
/* modal */
.ov{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:40;display:none;align-items:flex-end;justify-content:center}
.ov.on{display:flex}
@media(min-width:700px){.ov{align-items:center}}
.sheet{background:var(--card);width:100%;max-width:560px;max-height:92vh;overflow-y:auto;border-radius:18px 18px 0 0;padding:20px}
@media(min-width:700px){.sheet{border-radius:18px}}
.sheet h3{font-size:19px;margin-bottom:4px}
.sheet .sd{font-size:13px;color:var(--mut);margin-bottom:14px}
.secttl{font-size:13px;font-weight:800;color:var(--brand2);margin:14px 0 8px;text-transform:uppercase;letter-spacing:.5px}
.opt{display:flex;align-items:center;gap:10px;background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:8px;font-size:14px}
.opt .onome{flex:1;min-width:0}
.opt .chk{width:24px;height:24px;border-radius:7px;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-weight:900;color:#fff}
.opt.on{border-color:var(--brand)}
.opt.on .chk{background:var(--brand);border-color:var(--brand)}
.opt .opr{color:var(--brand2);font-weight:800;flex:none;min-width:66px;text-align:right}
.acr-qt{display:flex;align-items:center;gap:10px;flex:none}
.acr-qt .aqb{width:34px;height:34px;border-radius:9px;border:none;background:var(--card);color:#fff;font-size:20px;font-weight:900;display:flex;align-items:center;justify-content:center;line-height:1}
.acr-qt .aqb:active{background:var(--brand)}
.acr-qt b{min-width:22px;text-align:center;font-size:17px;font-weight:900}
.opt.on .acr-qt b{color:var(--brand2)}
.achk{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.opt{cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation}
textarea,input{font-family:inherit;background:var(--card2);border:1px solid var(--line);color:var(--txt);border-radius:10px;padding:12px;font-size:14px;width:100%}
textarea{resize:none;min-height:56px}
.qty{display:flex;align-items:center;gap:16px;justify-content:center;margin:16px 0}
.qty button{width:46px;height:46px;border-radius:50%;border:none;background:var(--card2);color:var(--txt);font-size:22px;font-weight:900}
.qty b{font-size:20px;min-width:30px;text-align:center}
.bigbtn{background:var(--brand);color:#fff;border:none;border-radius:12px;padding:16px;width:100%;font-weight:900;font-size:16px;margin-top:8px}
.bigbtn.ghost{background:transparent;color:var(--mut);border:1px solid var(--line)}
.chips{display:flex;gap:8px;margin-bottom:12px}
.ch{flex:1;background:var(--card2);border:1px solid var(--line);color:var(--mut);border-radius:10px;padding:12px;font-weight:800;font-size:14px;text-align:center}
.ch.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.citem{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.citem small{color:var(--mut);display:block;font-size:12px}
.citem .rm{color:#ff6b6b;font-weight:800;font-size:12px;background:none;border:none}
.totln{display:flex;justify-content:space-between;font-size:14px;padding:4px 0}
.totln.big{font-size:20px;font-weight:900;color:var(--brand2);border-top:1px solid var(--line);margin-top:8px;padding-top:10px}
.field{margin-bottom:12px}
.field label{display:block;font-size:12px;color:var(--mut);margin-bottom:5px;font-weight:700}
.ok-scr{text-align:center;padding:40px 20px}
.ok-scr .big{font-size:60px}
.ok-scr h2{font-size:24px;margin:10px 0}
.ok-scr p{color:var(--mut);font-size:15px}
.toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%);background:var(--ok);color:#042;padding:12px 20px;border-radius:30px;font-weight:800;z-index:50;opacity:0;transition:opacity .25s;pointer-events:none}
.toast.on{opacity:1}