/* ═══════════════════════════════════════════════════════════════
   MILKY MOO GAMA — CARDÁPIO DIGITAL
   Diego Arcanjo Web Studio / Eleve Sites
   ═══════════════════════════════════════════════════════════════ */

:root{
  --cream:#FDF7F3; --paper:#FFFFFF; --paper-2:#FBF4EF;
  --ink:#1B1614; --ink-2:#6B605B; --ink-3:#9C918B;
  --pink:#E8608A; --pink-dark:#C9245A; --pink-soft:#FCE8EF;
  --line:#EFE4DC; --line-2:#E3D5CB;
  --ok:#0F8A4D; --wa:#22A45D; --wa-dark:#1B8A4E; --danger:#B02525;
  --r:16px; --r-sm:10px;
  --shadow:0 1px 2px rgba(27,22,20,.04), 0 10px 28px -14px rgba(27,22,20,.22);
  --shadow-lg:0 24px 60px -20px rgba(27,22,20,.34);
  --safe:env(safe-area-inset-bottom, 0px);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--cream); color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased;
  padding-bottom:calc(96px + var(--safe));
}
body.locked{overflow:hidden}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:16px}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--pink-dark);outline-offset:2px}
.hidden{display:none !important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── faixa de prévia ── */
#previewbar{background:#1B1614;color:#FCE8EF;font-size:12.5px;line-height:1.4;padding:9px 14px;display:flex;gap:10px;align-items:center;justify-content:center;text-align:center;flex-wrap:wrap}
#previewbar b{color:#fff}
#previewbar button{background:rgba(255,255,255,.14);color:#fff;border-radius:6px;padding:3px 9px;font-size:11.5px;font-weight:650}

/* ── cabeçalho ── */
.hero{background:var(--paper);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.spots{position:absolute;inset:0;opacity:.045;pointer-events:none}
.heroin{max-width:900px;margin:0 auto;padding:26px 18px 20px;position:relative}
.brandrow{display:flex;align-items:center;gap:14px}
.logo{width:62px;height:62px;border-radius:20px;background:var(--pink);display:grid;place-items:center;flex-shrink:0;box-shadow:0 6px 18px -6px rgba(232,96,138,.6)}
.logo svg{width:40px;height:40px}
.bname{font-size:24px;font-weight:800;letter-spacing:-.03em;line-height:1.1;margin:0}
.btag{font-size:13.5px;color:var(--ink-2);margin:3px 0 0}
.statusrow{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:640;padding:6px 11px;border-radius:999px;background:var(--paper-2);border:1px solid var(--line);color:var(--ink-2)}
.chip.open{background:#E7F6ED;border-color:#BFE6CE;color:var(--ok)}
.chip.closed{background:#FBECEC;border-color:#F2D2D2;color:var(--danger)}
.pulse{width:7px;height:7px;border-radius:50%;background:currentColor;animation:pl 2s ease-in-out infinite}
@keyframes pl{0%,100%{opacity:1}50%{opacity:.35}}
.claim{margin:16px 0 0;padding:11px 14px;background:var(--pink-soft);border-radius:var(--r-sm);font-size:13.5px;color:#8A1440;font-weight:600;display:flex;gap:9px;align-items:flex-start}
.claim svg{flex-shrink:0;margin-top:1px}

/* ── busca + navegação ── */
.sticky{position:sticky;top:0;z-index:40;background:var(--cream);border-bottom:1px solid var(--line);box-shadow:0 4px 14px -12px rgba(27,22,20,.4)}
.stickyin{max-width:900px;margin:0 auto;padding:11px 18px 0}
.searchwrap{position:relative;margin-bottom:10px}
.searchwrap > svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--ink-3)}
#q{width:100%;padding:11px 40px;border-radius:999px;border:1px solid var(--line-2);background:var(--paper);color:var(--ink);outline:none;font-size:15px}
#q:focus{border-color:var(--pink);box-shadow:0 0 0 3px var(--pink-soft)}
#q::-webkit-search-cancel-button{display:none}
#qclear{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;display:none;place-items:center;color:var(--ink-3)}
#qclear.on{display:grid}
.navcats{display:flex;gap:7px;overflow-x:auto;padding-bottom:11px;scrollbar-width:none;-ms-overflow-style:none}
.navcats::-webkit-scrollbar{display:none}
.navcats button{white-space:nowrap;font-size:13.5px;font-weight:650;padding:8px 14px;border-radius:999px;background:var(--paper);border:1px solid var(--line-2);color:var(--ink-2);transition:.15s}
.navcats button.active{background:var(--ink);border-color:var(--ink);color:var(--cream)}

/* ── catálogo ── */
main{max-width:900px;margin:0 auto;padding:0 18px}
.cat{padding-top:30px;scroll-margin-top:120px}
.cathead{display:flex;align-items:baseline;gap:10px;margin-bottom:4px}
.cathead h2{font-size:20px;font-weight:760;letter-spacing:-.02em;margin:0}
.catcount{font-size:12.5px;color:var(--ink-3);font-weight:600}
.catsub{font-size:13.5px;color:var(--ink-2);margin:0 0 14px}
.items{display:grid;gap:10px}
@media(min-width:660px){.items{grid-template-columns:1fr 1fr}}

.item{display:grid;grid-template-columns:1fr 86px;gap:14px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:15px;text-align:left;transition:.15s;box-shadow:var(--shadow);width:100%}
.item:hover{border-color:var(--line-2);transform:translateY(-1px)}
.item:active{transform:scale(.99)}
.iname{font-size:16px;font-weight:700;letter-spacing:-.012em;margin:0 0 4px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.idesc{font-size:13.3px;color:var(--ink-2);line-height:1.42;margin:0 0 10px}
.iprice{font-size:15px;font-weight:750;color:var(--ink);letter-spacing:-.01em;margin:0}
.iprice small{font-size:11.5px;font-weight:600;color:var(--ink-3);margin-right:3px}
.ithumb{width:86px;height:86px;border-radius:12px;background:var(--pink-soft);display:grid;place-items:center;align-self:center;overflow:hidden}
.ithumb svg{width:40px;height:40px;opacity:.6}
.ithumb img{width:100%;height:100%;object-fit:cover}
.badge{font-size:10px;font-weight:750;letter-spacing:.04em;padding:2px 6px;border-radius:5px;text-transform:uppercase}
.b-top{background:#FFF1CC;color:#7A5200}
.b-new{background:var(--pink-soft);color:var(--pink-dark)}
.b-18{background:#EEE9FB;color:#4B3AA0}
.noresult{text-align:center;padding:52px 20px;color:var(--ink-3);font-size:14.5px}

/* ── modal ── */
.ov{position:fixed;inset:0;background:rgba(27,22,20,.55);backdrop-filter:blur(3px);z-index:80;display:none;align-items:flex-end;justify-content:center}
.ov.on{display:flex}
@media(min-width:660px){.ov{align-items:center}}
.sheet{background:var(--paper);width:100%;max-width:560px;max-height:92vh;border-radius:22px 22px 0 0;display:flex;flex-direction:column;box-shadow:var(--shadow-lg);animation:up .28s cubic-bezier(.2,.8,.3,1)}
@media(min-width:660px){.sheet{border-radius:22px;max-height:88vh}}
@keyframes up{from{transform:translateY(24px);opacity:.4}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.sheet{animation:none}*{transition:none !important}}
.shead{padding:18px 20px 14px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-shrink:0}
.shead h3{margin:0;font-size:20px;font-weight:780;letter-spacing:-.02em}
.shead p{margin:5px 0 0;font-size:13.5px;color:var(--ink-2);line-height:1.45}
.xbtn{width:32px;height:32px;border-radius:50%;background:var(--paper-2);display:grid;place-items:center;color:var(--ink-2);flex-shrink:0}
.xbtn:hover{background:var(--line)}
.sbody{padding:18px 20px;overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch}
.sfoot{padding:14px 20px calc(16px + var(--safe));border-top:1px solid var(--line);background:var(--paper);flex-shrink:0;border-radius:0 0 22px 22px}

.fgroup{margin-bottom:22px}
.flabel{font-size:12px;font-weight:720;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);margin:0 0 9px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.flabel .soft{font-weight:600;text-transform:none;letter-spacing:0}
.req{font-size:10px;background:var(--ink);color:var(--cream);padding:2px 6px;border-radius:4px;letter-spacing:.03em}
.opt{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:7px;cursor:pointer;transition:.13s;background:var(--paper)}
.opt:hover{border-color:var(--line-2);background:var(--paper-2)}
.opt.sel{border-color:var(--pink);background:var(--pink-soft)}
.opt input{accent-color:var(--pink-dark);width:18px;height:18px;flex-shrink:0;margin:0}
.opt .oname{flex:1;font-size:14.5px;font-weight:620}
.opt .oname i{display:block;font-style:normal;font-size:12.5px;color:var(--ink-3);font-weight:500;margin-top:1px}
.opt .oprice{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
textarea#obs{width:100%;min-height:74px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-sm);resize:vertical;outline:none;background:var(--paper);color:var(--ink);line-height:1.45}
textarea#obs:focus,input.f:focus,select.f:focus{border-color:var(--pink);box-shadow:0 0 0 3px var(--pink-soft)}

.qtyrow{display:flex;align-items:center;gap:14px}
.stepper{display:flex;align-items:center;gap:2px;border:1px solid var(--line-2);border-radius:999px;padding:3px;background:var(--paper)}
.stepper button{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:20px;font-weight:600;color:var(--ink);line-height:1}
.stepper button:hover{background:var(--paper-2)}
.stepper span{min-width:30px;text-align:center;font-weight:750;font-variant-numeric:tabular-nums}

.btn{width:100%;padding:15px;border-radius:var(--r-sm);background:var(--pink);color:#fff;font-size:16px;font-weight:730;letter-spacing:-.01em;display:flex;align-items:center;justify-content:center;gap:9px;transition:.15s;box-shadow:0 8px 20px -10px rgba(232,96,138,.9)}
.btn:hover{background:var(--pink-dark)}
.btn.wa{background:var(--wa);box-shadow:0 8px 20px -10px rgba(34,164,93,.9)}
.btn.wa:hover{background:var(--wa-dark)}
.btn.ghost{background:transparent;color:var(--ink-2);border:1px solid var(--line-2);box-shadow:none;font-weight:650;padding:12px}
.btn.ghost:hover{background:var(--paper-2);color:var(--ink)}
.btn .amt{margin-left:auto;font-variant-numeric:tabular-nums}
.btn .lbl{margin-right:auto}
.stack{display:grid;gap:9px}

/* ── barra do carrinho ── */
#cartbar{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:12px 18px calc(12px + var(--safe));background:linear-gradient(to top,var(--cream) 62%,transparent);transform:translateY(130%);transition:transform .28s cubic-bezier(.2,.8,.3,1)}
#cartbar.on{transform:none}
#cartbar .inner{max-width:900px;margin:0 auto}
#cartbtn{width:100%;padding:15px 18px;border-radius:var(--r);background:var(--ink);color:var(--cream);display:flex;align-items:center;gap:12px;font-size:15.5px;font-weight:700;box-shadow:0 14px 34px -14px rgba(27,22,20,.75)}
#cartbtn .cnt{background:var(--pink);color:#fff;min-width:26px;height:26px;border-radius:999px;display:grid;place-items:center;font-size:13px;font-variant-numeric:tabular-nums;padding:0 7px}
#cartbtn .tot{margin-left:auto;font-variant-numeric:tabular-nums}

/* ── carrinho / checkout ── */
.line{display:grid;grid-template-columns:1fr auto;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.line:last-of-type{border-bottom:none}
.lname{font-size:14.5px;font-weight:680;margin:0}
.lmeta{font-size:12.5px;color:var(--ink-2);margin:3px 0 0;line-height:1.4}
.lright{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:7px}
.lprice{font-size:14.5px;font-weight:720;font-variant-numeric:tabular-nums}
.lrm{font-size:12px;color:var(--pink-dark);font-weight:650}
.lrm:hover{text-decoration:underline}
.totals{margin-top:16px;padding-top:14px;border-top:2px solid var(--line)}
.trow{display:flex;justify-content:space-between;font-size:14px;color:var(--ink-2);padding:4px 0}
.trow.big{font-size:18px;font-weight:790;color:var(--ink);padding-top:10px;margin-top:6px;border-top:1px solid var(--line);letter-spacing:-.02em}
.trow span:last-child{font-variant-numeric:tabular-nums}

input.f,select.f{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-sm);outline:none;background:var(--paper);color:var(--ink)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hint{font-size:12px;color:var(--ink-3);margin:6px 0 0}
.hint.center{text-align:center}
.err{font-size:12.5px;color:var(--danger);margin:6px 0 0;display:none;font-weight:600}
.err.on{display:block}

/* ── rodapé ── */
footer{max-width:900px;margin:44px auto 0;padding:26px 18px 34px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-3);line-height:1.6}
footer a{color:var(--ink-2)}
.fbrand{font-weight:700;color:var(--ink-2);font-size:13.5px;margin:0}
.fline{margin:6px 0 0}
.fcredit{margin:14px 0 0;font-size:12px}