*{box-sizing:border-box}body{margin:0;background:#0b0b0b;color:#fff;font-family:system-ui,Arial,sans-serif}
header{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:8px 14px;background:#000;border-bottom:2px solid #f5b400}
.logo{height:52px;border-radius:8px}#cartBtn{background:#f5b400;color:#000;border:0;border-radius:24px;padding:10px 16px;font-weight:800;font-size:16px}
.hero{text-align:center;padding:26px 10px 10px}.hero h1{margin:0;font-size:44px;letter-spacing:6px}.hero p{margin:4px 0 0;color:#f5b400;font-style:italic}
.tabs{display:flex;gap:8px;overflow-x:auto;padding:12px 14px}.tabs button{background:#1c1c1c;color:#fff;border:1px solid #333;border-radius:20px;padding:8px 14px;white-space:nowrap}.tabs .on{background:#f5b400;color:#000;border-color:#f5b400}
#grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;padding:0 14px 30px;max-width:1100px;margin:auto}
.card{background:#161616;border:1px solid #262626;border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.card img{width:100%;aspect-ratio:4/3;object-fit:cover}.card .b{padding:10px;display:flex;flex-direction:column;gap:6px;flex:1}
.card h3{margin:0;font-size:15px}.card small{color:#aaa}.card .p{color:#f5b400;font-weight:800;margin-top:auto}
.add{background:#f5b400;color:#000;border:0;border-radius:10px;padding:10px;font-weight:800}
footer{text-align:center;color:#777;padding:20px;font-size:13px}
#overlay{position:fixed;inset:0;background:#0009;z-index:9}
#drawer{position:fixed;top:0;right:0;height:100%;width:min(420px,100%);background:#111;z-index:10;transform:translateX(100%);transition:.25s;overflow-y:auto;padding:14px}
#drawer.open{transform:none}.dh{display:flex;justify-content:space-between;align-items:center}.dh button{background:none;border:0;color:#fff;font-size:22px}
.it{display:flex;gap:10px;align-items:center;border-bottom:1px solid #222;padding:8px 0}.it img{width:52px;height:52px;object-fit:cover;border-radius:8px}.it .n{flex:1;font-size:14px}
.q button{width:30px;height:30px;border-radius:50%;border:0;background:#333;color:#fff;font-size:16px}.q span{display:inline-block;width:24px;text-align:center}.rm{background:none;border:0;color:#f66;font-size:12px}
.tot{font-size:18px;text-align:right;padding:12px 0}#checkout,#summary{display:flex;flex-direction:column;gap:8px}
input,select,textarea{background:#1c1c1c;color:#fff;border:1px solid #333;border-radius:10px;padding:11px;font-size:16px}textarea{min-height:70px}#sumText{min-height:220px}
.r{font-size:15px}.go{background:#f5b400;color:#000;border:0;border-radius:12px;padding:14px;font-weight:800;font-size:16px}
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#f5b400;color:#000;padding:10px 18px;border-radius:20px;font-weight:700;opacity:0;transition:.3s;z-index:20}#toast.s{opacity:1}

#pix{display:flex;flex-direction:column;gap:8px}#pix[hidden]{display:none}#pixQr{width:240px;max-width:100%;align-self:center;background:#fff;border-radius:10px;padding:8px}#pixStatus{font-weight:700;color:#f5b400;text-align:center}#pixStatus.ok{color:#3c3;font-size:20px}
.view{display:flex;flex-direction:column;gap:8px}.view[hidden]{display:none}
.ghost{background:none;border:1px solid #f5b400;color:#f5b400;border-radius:12px;padding:12px;font-weight:700;font-size:15px;text-align:center;text-decoration:none}
.bd{width:100%;border-collapse:collapse;font-size:14px}.bd td{padding:6px 2px;border-bottom:1px solid #222}.bd td.n{text-align:right;white-space:nowrap}.bd tr.t td{font-weight:800;font-size:17px;color:#f5b400;border:0}.bd tr.s td{color:#bbb}
.cust{font-size:14px;color:#ccc;line-height:1.5}details{margin-top:6px}summary{color:#aaa}

.modal{position:fixed;inset:0;background:#000b;z-index:15;display:flex;align-items:flex-end;justify-content:center}.modal[hidden]{display:none}
.mbox{background:#141414;width:min(480px,100%);max-height:90vh;overflow-y:auto;border-radius:18px 18px 0 0;padding:14px;display:flex;flex-direction:column;gap:10px}
fieldset{border:1px solid #2a2a2a;border-radius:12px;padding:8px 10px}legend{color:#f5b400;font-weight:700;padding:0 4px}
.opt{display:flex;align-items:center;gap:10px;padding:9px 2px;border-bottom:1px solid #222;font-size:15px}.opt:last-child{border:0}.opt span{flex:1}.opt input{width:20px;height:20px;accent-color:#f5b400}
.det{color:#f5b400}#mAdd:disabled{opacity:.6}
.row2{display:flex;gap:8px}.row2 input{flex:1;min-width:0}#addr[hidden]{display:none}

.hero .hsub{display:block;font-size:.72rem;letter-spacing:.25em;text-transform:uppercase;color:#fff;opacity:.75;margin:-2px 0 4px}
.promo{padding:0 14px;margin:12px auto;max-width:1000px}
.pb{position:relative;overflow:hidden;display:flex;align-items:center;gap:6px;border-radius:20px;padding:14px 14px 14px 4px;background:radial-gradient(circle at 25% 50%,#7b2cbf 0,#3c096c 45%,#1a0530 100%);border:1px solid #f5b40066;box-shadow:0 8px 30px #3c096c88}
.pimg{position:relative;flex:0 0 38%;max-width:200px;display:flex;justify-content:center}
.pimg img{width:100%;height:auto;max-height:300px;object-fit:contain;position:relative;z-index:1;filter:drop-shadow(0 10px 14px #0009);animation:pfloat 3.2s ease-in-out infinite}
.splash{position:absolute;inset:auto 5% 4% 5%;height:22%;border-radius:50%;background:radial-gradient(#c77dff99,transparent 70%);animation:psplash 3.2s ease-in-out infinite}
.ptxt{flex:1;z-index:1;color:#fff}
.ptag{margin:0;font-size:.7rem;font-weight:800;letter-spacing:.2em;color:#f5b400}
.pdesc{margin:6px 0;font-size:1rem;font-weight:800;line-height:1.25;background:linear-gradient(90deg,#f5b400,#fff3c4,#f5b400,#d48c00);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:pshine 3s linear infinite}
.pprice{margin:6px 0 10px;font-size:.9rem}
.badge{display:inline-block;background:#f5b400;color:#1a0530;border-radius:999px;padding:4px 12px;font-size:1.15rem;font-weight:900;animation:ppulse 1.6s ease-in-out infinite}
.pgo{background:#fff;color:#3c096c;border:0;border-radius:999px;padding:10px 20px;font-weight:900;font-size:1rem;cursor:pointer;box-shadow:0 4px 0 #f5b400}
.pgo:active{transform:translateY(2px);box-shadow:0 2px 0 #f5b400}
.bub{position:absolute;bottom:-14px;left:var(--x);width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff,#c77dff 60%,transparent 70%);opacity:0;animation:pbub 4s ease-in infinite;animation-delay:var(--d)}
.bub:nth-child(even){width:6px;height:6px;background:radial-gradient(circle at 30% 30%,#fff,#f5b400 60%,transparent 70%)}
@keyframes pfloat{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-10px) rotate(4deg)}}
@keyframes psplash{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(.8);opacity:.5}}
@keyframes pshine{to{background-position:-250% 0}}
@keyframes ppulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 #f5b40099}50%{transform:scale(1.08);box-shadow:0 0 0 8px #f5b40000}}
@keyframes pbub{0%{transform:translateY(0);opacity:0}15%{opacity:.9}100%{transform:translateY(-260px);opacity:0}}
@media(min-width:700px){.pb{padding:20px 30px}.pimg{flex-basis:220px}.pdesc{font-size:1.5rem}.pprice{font-size:1.1rem}}
@media(prefers-reduced-motion:reduce){.pimg img,.splash,.pdesc,.badge,.bub{animation:none}.bub{display:none}}
/* banner compacto */
.pb{padding:8px 12px 8px 6px;gap:10px;border-radius:16px}
.pimg{flex:0 0 auto;width:auto;max-width:none}
.pimg img{width:auto;height:108px;max-height:none}
.ptag{font-size:.6rem;letter-spacing:.15em}
.pdesc{font-size:.8rem;margin:2px 0;line-height:1.2}
.pprice{margin:3px 0 6px;font-size:.75rem}
.badge{font-size:.9rem;padding:2px 9px}
.pgo{padding:6px 14px;font-size:.82rem;box-shadow:0 3px 0 #f5b400}
.ptxt .prow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
@keyframes pfloat{0%,100%{transform:translateY(2px) rotate(-4deg)}50%{transform:translateY(-4px) rotate(4deg)}}
@keyframes pbub{0%{transform:translateY(0);opacity:0}15%{opacity:.9}100%{transform:translateY(-130px);opacity:0}}
@media(min-width:700px){.pb{padding:10px 28px}.pimg{flex-basis:auto}.pimg img{height:130px}.pdesc{font-size:1.15rem}.pprice{font-size:.95rem}.badge{font-size:1.05rem}.pgo{font-size:.95rem;padding:8px 18px}}

.hero h1.hlogo{line-height:0}.hlogo img{width:min(62vw,300px);height:auto}.hero .hsub{margin-top:6px}
.mecard{background:#1a1a1a;border:1px solid #f5b40066;border-radius:12px;padding:10px 12px;margin:6px 0;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between}
.mecard .mebtns{display:flex;gap:6px}.mecard .mebtns button{padding:8px 14px;width:auto;margin:0}
#addrPick{background:#151515;border-radius:10px;padding:8px 10px;margin:6px 0}.apick{display:flex;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid #222}.apick input{accent-color:#f5b400;width:18px;height:18px}
[hidden]{display:none!important}