/* ============================================
   IMPÉRIO PIZZARIA — v2
   Mobile-first · pedir fácil · Pix com WhatsApp
   ============================================ */

:root{
  --bg: #0A0807;
  --bg-elev: #15110F;
  --bg-card: #1A1513;
  --bg-card-hover: #221A18;
  --ink: #F5EFE3;
  --ink-dim: #A89880;
  --ink-faint: #5D4F44;
  --red: #C9162B;
  --red-deep: #8B0E1E;
  --red-soft: rgba(201,22,43,.12);
  --gold: #C9A961;
  --green: #4A8B3F;
  --whatsapp: #25D366;
  --line: rgba(245,239,227,.10);
  --line-strong: rgba(245,239,227,.22);
  --font-display: 'Cinzel', Georgia, serif;
  --font-body: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
  --radius: 12px;
  --header-h: 64px;
  --filter-h: 56px;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + var(--filter-h) + 12px)}
html,body{background:var(--bg);color:var(--ink);font-family:var(--font-body);overflow-x:hidden;min-height:100vh}
body{font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
button:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:4px}
input:focus-visible,textarea:focus-visible{outline:none}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* =============== HEADER =============== */
.header{
  position:sticky;top:0;left:0;right:0;z-index:40;
  height:var(--header-h);
  background:rgba(10,8,7,.92);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;
  transition:height .25s cubic-bezier(.2,.8,.2,1);
}
/* Header colapsado: vira uma barra fina quando rola pra baixo */
.header.collapsed{
  height:44px;
}
.header.collapsed .header-brand{font-size:14px}
.header.collapsed .header-brand .crown{width:24px;height:24px;font-size:12px}
.header.collapsed .header-status{display:none}
.header.collapsed .header-cart-desk{
  width:36px;height:36px;
}
.header.collapsed .header-cart-desk svg{width:16px;height:16px}

.header-brand{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-display);font-weight:900;
  font-size:18px;letter-spacing:.06em;
  transition:font-size .25s;
}
.header-brand .crown{
  width:28px;height:28px;border-radius:50%;
  background:var(--bg-card);border:1px solid var(--line-strong);
  display:flex;align-items:center;justify-content:center;
  color:var(--red);font-size:14px;
  transition:width .25s, height .25s, font-size .25s;
}
.header-status{
  font-size:11px;color:var(--ink-dim);
  display:flex;align-items:center;gap:6px;
  font-weight:500;letter-spacing:.04em;
  transition:opacity .2s;
}
.header-status .dot{
  width:7px;height:7px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 4px rgba(74,139,63,.18);
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{50%{opacity:.5}}
.header-status.closed .dot{background:var(--red);box-shadow:0 0 0 4px rgba(201,22,43,.18)}

/* Botão de carrinho do header (desktop) */
.header-cart-desk{
  position:relative;
  width:42px;height:42px;border-radius:50%;
  background:var(--red);
  display:flex;align-items:center;justify-content:center;
  transition:transform .15s, background .15s, width .25s, height .25s;
}
.header-cart-desk:active{transform:scale(.92)}
.header-cart-desk svg{width:18px;height:18px;transition:width .25s, height .25s}
.header-cart-desk .badge{
  position:absolute;top:-4px;right:-4px;
  background:var(--ink);color:var(--bg);
  font-size:11px;font-weight:700;
  min-width:20px;height:20px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  padding:0 6px;
  opacity:0;transform:scale(0);transition:opacity .2s,transform .2s;
}
.header-cart-desk.has-items .badge{opacity:1;transform:scale(1)}

/* No mobile, esconde o botão do header — só usa o FAB */
@media (max-width:600px){
  .header-cart-desk{display:none}
}

/* =============== FAB (botão flutuante do carrinho) =============== */
.fab-cart{
  position:fixed;bottom:16px;right:16px;
  z-index:45;
  background:var(--red);color:var(--ink);
  border-radius:99px;
  display:flex;align-items:center;gap:10px;
  padding:14px 18px;
  box-shadow:0 12px 32px rgba(201,22,43,.4), 0 4px 8px rgba(0,0,0,.3);
  font-family:var(--font-body);
  transform:translateY(120px);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), background .15s;
  cursor:pointer;
  /* Empurra um pouco se tiver safe area no iOS */
  padding-bottom:calc(14px + env(safe-area-inset-bottom, 0));
  bottom:calc(16px + env(safe-area-inset-bottom, 0));
}
.fab-cart.show{transform:translateY(0)}
.fab-cart:active{transform:translateY(0) scale(.96)}
.fab-cart:hover{background:var(--red-deep)}

.fab-cart svg{width:22px;height:22px;flex-shrink:0}

.fab-cart-info{
  display:flex;flex-direction:column;align-items:flex-start;
  line-height:1.1;
}
.fab-cart-qty{
  font-family:var(--font-body);font-size:11px;font-weight:600;
  letter-spacing:.04em;opacity:.9;
}
.fab-cart-total{
  font-family:var(--font-display);font-weight:800;font-size:15px;
  letter-spacing:.02em;font-feature-settings:'tnum';
}

@media (min-width:600px){
  .fab-cart{
    bottom:24px;right:24px;
    padding:16px 22px;
  }
  .fab-cart svg{width:24px;height:24px}
  .fab-cart-total{font-size:16px}
}

/* =============== HERO =============== */
.hero{
  position:relative;padding:36px 16px 28px;text-align:center;
  border-bottom:1px solid var(--line);
  background:radial-gradient(circle at 50% 0%, rgba(201,22,43,.08), transparent 50%), var(--bg);
  overflow:hidden;
}
.hero-eyebrow{
  font-size:11px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--gold);margin-bottom:14px;font-weight:600;
}
.hero h1{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(38px, 11vw, 64px);
  line-height:.92;letter-spacing:-.01em;text-transform:uppercase;
}
.hero h1 .acc{color:var(--red);font-style:italic;font-family:'Fraunces','Cinzel',serif;font-weight:700}
.hero-sub{
  margin-top:14px;color:var(--ink-dim);
  font-size:14px;line-height:1.5;
  max-width:340px;margin-left:auto;margin-right:auto;
}
.hero-tagline{
  font-family:var(--font-display);font-weight:700;
  font-size:13px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--gold);margin-top:18px;
}
.hero-info{margin-top:22px;display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.hero-info .pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border:1px solid var(--line-strong);
  border-radius:99px;font-size:12px;color:var(--ink-dim);font-weight:500;
}
.hero-info .pill svg{width:14px;height:14px;opacity:.6}
.hero-info .pill.live{color:var(--ink);border-color:rgba(74,139,63,.4)}
.hero-info .pill.live svg{color:var(--green);opacity:1}

/* Números de entrega — faixa compacta, estilo iFood, preenchida pelo config */
.hero-nums{
  display:flex;justify-content:center;gap:0;margin:18px auto 0;max-width:340px;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
}
.hero-nums:empty{display:none}
.hero-nums .hn{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:11px 8px;border-right:1px solid var(--line);
}
.hero-nums .hn:last-child{border-right:none}
.hero-nums .hn b{
  font-family:var(--font-display);font-size:15px;font-weight:800;color:var(--ink);
  font-feature-settings:'tnum';letter-spacing:.01em;
}
.hero-nums .hn small{
  font-size:10px;color:var(--ink-dim);text-transform:uppercase;letter-spacing:.09em;font-weight:600;
}

/* =============== FILTROS =============== */
.filters{
  position:sticky;top:var(--header-h);z-index:30;
  background:rgba(10,8,7,.96);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  height:var(--filter-h);display:flex;align-items:center;
  transition:top .25s cubic-bezier(.2,.8,.2,1), box-shadow .2s;
}
/* Quando o header tá colapsado, filtros sobem junto */
.header.collapsed ~ .filters{
  top:44px;
  box-shadow:0 4px 16px rgba(0,0,0,.4);
}
.filters-scroll{
  display:flex;gap:8px;padding:0 16px;
  overflow-x:auto;overflow-y:hidden;width:100%;
  scroll-behavior:smooth;scrollbar-width:none;
}
.filters-scroll::-webkit-scrollbar{display:none}
.filter{
  flex-shrink:0;padding:9px 16px;
  border:1px solid var(--line-strong);border-radius:99px;
  font-size:13px;font-weight:500;color:var(--ink-dim);
  white-space:nowrap;
  transition:all .25s cubic-bezier(.2,.8,.2,1);
  background:transparent;
}
.filter:hover{color:var(--ink);border-color:var(--ink-faint)}
.filter.active{
  background:var(--red);color:var(--ink);border-color:var(--red);
  font-weight:600;
  box-shadow:0 4px 12px rgba(201,22,43,.3);
}

/* =============== MENU =============== */
.menu{padding:14px 14px 130px;max-width:720px;margin:0 auto}
.cat-section{margin-bottom:22px;scroll-margin-top:130px}
.cat-section.hidden{display:none}
.cat-head{
  display:flex;align-items:center;gap:9px;margin-bottom:2px;
  padding:14px 0 9px;
  border-bottom:1px solid var(--line-strong);
}
.cat-head .crown{color:var(--gold);font-size:14px;line-height:1;flex-shrink:0}
.cat-head h2{
  flex:1;
  font-family:var(--font-display);font-weight:700;
  font-size:17px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink);
}
.cat-head .count{
  font-size:11px;color:var(--gold);font-feature-settings:'tnum';font-weight:700;
  background:rgba(201,169,97,.12);border:1px solid rgba(201,169,97,.3);
  padding:2px 8px;border-radius:99px;
}

/* Cardápio em LISTA — a pegada de app de delivery, a alma da Império.
   Linha: texto à esquerda, foto pequena à direita, botão + na quina. */
.list{display:flex;flex-direction:column}

.card{
  display:flex;gap:13px;align-items:stretch;
  padding:14px 2px;
  border-bottom:1px solid var(--line);
  cursor:pointer;position:relative;
  transition:background .12s;
}
.card:first-child{padding-top:6px}
.card:last-child{border-bottom:none}
.card:active{background:var(--bg-card)}
.card.unavailable{opacity:.42}
.card.unavailable .it-add{display:none}

.it-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;padding:1px 0}
.it-name{
  font-family:var(--font-display);font-weight:700;
  font-size:15px;color:var(--ink);line-height:1.18;letter-spacing:.01em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.it-desc{
  font-size:12.5px;color:var(--ink-dim);line-height:1.38;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.it-price{
  margin-top:auto;padding-top:2px;
  font-family:var(--font-body);font-weight:800;
  font-size:14px;color:var(--gold);font-feature-settings:'tnum';letter-spacing:.01em;
}
.it-price .prefix{color:var(--ink-faint);font-weight:500;font-size:11px}
.it-price.empty{color:var(--ink-faint);font-style:italic;font-weight:500;font-size:12px}

.it-media{position:relative;flex-shrink:0;width:96px}
.it-thumb{
  width:96px;height:96px;object-fit:cover;border-radius:12px;
  border:1px solid var(--line);background:var(--bg-elev);display:block;
}
.it-noimg{
  display:flex;align-items:center;justify-content:center;
  color:var(--gold);opacity:.35;font-size:34px;font-family:var(--font-display);
}
.it-add{
  position:absolute;right:-7px;bottom:-7px;
  width:32px;height:32px;border-radius:50%;
  background:var(--red);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:21px;font-weight:600;line-height:1;
  border:2px solid var(--bg);
  box-shadow:0 3px 10px rgba(0,0,0,.55);
  transition:transform .12s, background .12s;
}
.it-add:active{transform:scale(.82);background:var(--red-deep)}

/* =============== CARRINHO DRAWER =============== */
.cart-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.65);
  opacity:0;pointer-events:none;
  transition:opacity .25s;z-index:50;
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
}
.cart-overlay.open{opacity:1;pointer-events:auto}

.cart{
  position:fixed;top:0;right:0;bottom:0;
  width:min(440px, 100vw);
  background:var(--bg-elev);
  border-left:1px solid var(--line-strong);
  z-index:60;
  transform:translateX(100%);
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
  display:flex;flex-direction:column;
}
.cart.open{transform:translateX(0)}
.cart-head{
  padding:18px 20px 14px;
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;
  flex-shrink:0;
}
.cart-head h3{
  font-family:var(--font-display);font-size:18px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;
}
.cart-close{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;color:var(--ink-dim);
  transition:background .15s;
}
.cart-close:hover{background:var(--bg-card);color:var(--ink)}

.cart-body{flex:1;overflow-y:auto;padding:8px 16px}

/* Empty state */
.cart-empty{padding:60px 24px;text-align:center;color:var(--ink-dim)}
.cart-empty .crown{font-size:48px;color:var(--red-deep);margin-bottom:12px}
.cart-empty p{font-size:14px}
.cart-empty .small{font-size:12px;margin-top:8px;color:var(--ink-faint)}

/* === Item do carrinho — REPAGINADO === */
.cart-item{
  display:grid;
  grid-template-columns:64px 1fr auto;
  gap:12px;padding:14px 0;
  border-bottom:1px solid var(--line);
  align-items:center;
  position:relative;
}
.cart-item-img{
  width:64px;height:64px;border-radius:10px;overflow:hidden;
  background:var(--bg-card);flex-shrink:0;
}
.cart-item-img img{width:100%;height:100%;object-fit:cover}
.cart-item-info{min-width:0}
.cart-item-name{
  font-family:var(--font-display);font-weight:700;
  font-size:13px;text-transform:uppercase;letter-spacing:.02em;
  line-height:1.25;margin-bottom:4px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
.cart-item-unit{font-size:11px;color:var(--ink-faint);margin-bottom:4px;font-feature-settings:'tnum'}
.cart-item-total{
  font-family:var(--font-display);font-weight:700;
  font-size:14px;color:var(--red);font-feature-settings:'tnum';
}
.cart-item-actions{
  display:flex;flex-direction:column;align-items:flex-end;gap:8px;
}
.cart-item-controls{
  display:flex;align-items:center;gap:4px;
  background:var(--bg-card);border-radius:99px;padding:3px;
  border:1px solid var(--line);
}
.qty-btn{
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink);font-size:14px;font-weight:600;
  transition:background .15s;
}
.qty-btn:hover{background:var(--bg-elev)}
.qty-btn.minus{color:var(--ink-dim)}
.qty-num{
  min-width:20px;text-align:center;
  font-size:13px;font-weight:700;font-feature-settings:'tnum';
}
.cart-item-remove{
  font-size:11px;color:var(--ink-faint);
  font-weight:500;letter-spacing:.04em;
  padding:2px 4px;
  transition:color .15s;
}
.cart-item-remove:hover{color:var(--red)}

/* Footer carrinho */
.cart-foot{
  flex-shrink:0;padding:16px 20px 20px;
  border-top:1px solid var(--line-strong);background:var(--bg);
}
.cart-totals{margin-bottom:14px}
.cart-row{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:6px 0;font-size:13px;color:var(--ink-dim);
}
.cart-row.total{
  font-family:var(--font-display);font-weight:700;font-size:18px;
  color:var(--ink);text-transform:uppercase;letter-spacing:.04em;
  border-top:1px dashed var(--line);padding-top:14px;margin-top:8px;
}
.cart-row.total .val{color:var(--red);font-feature-settings:'tnum'}

.cart-go{
  width:100%;background:var(--red);color:var(--ink);
  padding:16px;border-radius:12px;
  font-family:var(--font-display);font-weight:700;
  font-size:14px;letter-spacing:.16em;text-transform:uppercase;
  display:flex;align-items:center;justify-content:center;gap:10px;
  transition:background .15s, transform .1s;
}
.cart-go:active{transform:scale(.98)}
.cart-go:hover{background:var(--red-deep)}
.cart-go svg{width:18px;height:18px}
.cart-go:disabled{background:var(--bg-card);color:var(--ink-faint);cursor:not-allowed}

/* =============== CHECKOUT =============== */
.checkout{display:none;flex-direction:column;height:100%}
.cart.checkout-mode .cart-body-default{display:none}
.cart.checkout-mode .checkout{display:flex;flex:1;overflow-y:auto}
.cart.checkout-mode .cart-foot{display:none}

.checkout-step{padding:18px 20px 28px}
.checkout-back{
  display:flex;align-items:center;gap:8px;
  font-size:13px;color:var(--ink-dim);
  margin-bottom:18px;font-weight:500;
  padding:8px 0;
}
.checkout-back:hover{color:var(--ink)}
.checkout h4{
  font-family:var(--font-display);font-size:13px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin-bottom:14px;margin-top:24px;
}
.checkout h4:first-of-type{margin-top:0}

.field{margin-bottom:14px}
.field label{
  display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-dim);margin-bottom:6px;font-weight:600;
}
.field input,.field textarea,.field select{
  width:100%;background:var(--bg-card);
  border:1px solid var(--line);color:var(--ink);
  padding:13px 14px;font-family:var(--font-body);font-size:14px;
  border-radius:10px;transition:border-color .15s;
}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:var(--red);
}
.field textarea{resize:vertical;min-height:64px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:380px){.field-row{grid-template-columns:1fr}}

.tipo-entrega{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.tipo-opt{
  padding:14px 12px;border:1px solid var(--line-strong);
  border-radius:10px;text-align:center;
  font-size:13px;font-weight:500;transition:all .15s;
}
.tipo-opt.active{border-color:var(--red);background:var(--red-soft);color:var(--ink)}
.tipo-opt .lbl{display:block;font-size:11px;color:var(--ink-dim);text-transform:uppercase;letter-spacing:.1em;margin-bottom:2px}
.tipo-opt.active .lbl{color:var(--red)}

.pgto-list{display:flex;flex-direction:column;gap:8px}
.pgto-opt{
  padding:14px;border:1px solid var(--line-strong);
  border-radius:10px;
  display:flex;align-items:center;gap:12px;
  transition:all .15s;text-align:left;width:100%;
}
.pgto-opt:hover{border-color:var(--ink-faint)}
.pgto-opt.active{border-color:var(--red);background:var(--red-soft)}
.pgto-opt .ic{
  width:36px;height:36px;border-radius:8px;
  background:var(--bg-card);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;flex-shrink:0;
}
.pgto-opt .nm{font-weight:600;font-size:14px}
.pgto-opt .desc{font-size:11px;color:var(--ink-dim);margin-top:2px}

.troco{margin-top:8px;padding:12px;background:var(--bg-card);border-radius:10px;display:none}
.troco.show{display:block}

.checkout-totais{
  margin-top:24px;padding:14px;
  background:var(--bg-card);border-radius:10px;
}

.btn-enviar{
  margin-top:20px !important;
  background:var(--red);color:var(--ink);
  padding:18px;border-radius:12px;
  font-family:var(--font-display);font-weight:700;
  font-size:14px;letter-spacing:.16em;text-transform:uppercase;
  width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
  transition:background .15s, transform .1s;
}
.btn-enviar:active{transform:scale(.98)}
.btn-enviar:hover{background:var(--red-deep)}
.btn-enviar:disabled{background:var(--bg-card);color:var(--ink-faint);cursor:not-allowed}

/* =============== CONFIRMAÇÃO =============== */
.confirmacao{display:none;flex-direction:column;height:100%}
.cart.confirm-mode .cart-body-default{display:none}
.cart.confirm-mode .cart-foot{display:none}
.cart.confirm-mode .confirmacao{display:flex;flex:1;overflow-y:auto;animation:fadeIn .4s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

.confirm-step{padding:32px 24px;text-align:center}
.confirm-icon{
  width:80px;height:80px;border-radius:50%;
  background:rgba(74,139,63,.15);
  border:2px solid var(--green);
  display:flex;align-items:center;justify-content:center;
  font-size:38px;color:var(--green);
  margin:0 auto 18px;
  animation:bounce .6s cubic-bezier(.2,.8,.2,1);
}
@keyframes bounce{0%{transform:scale(0)}60%{transform:scale(1.2)}100%{transform:scale(1)}}
.confirm-title{
  font-family:var(--font-display);font-size:22px;font-weight:700;
  color:var(--ink);margin-bottom:4px;letter-spacing:.04em;text-transform:uppercase;
}
.confirm-num{
  font-family:var(--font-display);font-size:38px;font-weight:900;
  color:var(--red);letter-spacing:.04em;margin-bottom:14px;
}
.confirm-msg{
  font-size:14px;color:var(--ink-dim);line-height:1.5;
  max-width:300px;margin:0 auto 22px;
}
.confirm-msg strong{color:var(--ink);font-weight:600}

/* === Pix box destaque === */
.confirm-pix{
  display:none; /* concluir() só mostra em pedido Pix aceito */
  background:linear-gradient(180deg, rgba(201,169,97,.08) 0%, var(--bg-elev) 100%);
  border:1px solid rgba(201,169,97,.3);
  border-radius:14px;padding:20px;margin-bottom:18px;text-align:left;
}
.pix-titulo{
  font-family:var(--font-display);font-size:13px;font-weight:700;
  color:var(--gold);text-align:center;margin-bottom:14px;
  letter-spacing:.16em;text-transform:uppercase;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.pix-titulo::before,.pix-titulo::after{
  content:'';flex:1;height:1px;background:rgba(201,169,97,.3);max-width:40px;
}
.pix-info{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.pix-row{
  display:flex;justify-content:space-between;align-items:center;
  font-size:13px;color:var(--ink-dim);
}
.pix-row strong{color:var(--ink);font-weight:600;font-feature-settings:'tnum'}
.pix-row .pix-valor-big{
  font-family:var(--font-display);font-size:22px;font-weight:900;
  color:var(--gold);
}

.pix-chave-label{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-dim);font-weight:600;margin-bottom:6px;
}
.pix-chave-box{
  display:flex;align-items:center;gap:8px;
  background:var(--bg);border:1px dashed var(--gold);
  border-radius:10px;padding:12px;
}
.pix-chave{
  flex:1;font-family:'JetBrains Mono', monospace;font-size:13px;color:var(--ink);
  word-break:break-all;line-height:1.4;
}
.pix-copy{
  background:var(--gold);color:var(--bg);
  padding:8px 14px;border-radius:8px;
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  flex-shrink:0;
  transition:background .15s, transform .1s;
}
.pix-copy:hover{background:#D4B670}
.pix-copy:active{transform:scale(.95)}

.confirm-total-box{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 16px;background:var(--bg-elev);border-radius:10px;
  margin-bottom:20px;
}
.confirm-total-box span{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-dim);font-weight:600;
}
.confirm-total-box strong{
  font-family:var(--font-display);font-size:22px;font-weight:900;
  color:var(--red);font-feature-settings:'tnum';
}

/* Botão WhatsApp protagonista */
.btn-whatsapp{
  width:100%;background:var(--whatsapp);color:#fff;
  padding:18px;border-radius:12px;
  font-family:var(--font-display);font-weight:700;
  font-size:14px;letter-spacing:.12em;text-transform:uppercase;
  display:flex;align-items:center;justify-content:center;gap:10px;
  transition:background .15s, transform .1s;
  box-shadow:0 4px 16px rgba(37,211,102,.3);
}
.btn-whatsapp:hover{background:#1FBB58}
.btn-whatsapp:active{transform:scale(.98)}
.btn-whatsapp svg{width:20px;height:20px}

.btn-whatsapp-sub{
  text-align:center;font-size:11px;color:var(--ink-faint);
  margin-top:8px;line-height:1.4;
}

.btn-fechar{
  width:100%;background:transparent;color:var(--ink-dim);
  padding:14px;border:1px solid var(--line);border-radius:10px;
  font-family:var(--font-body);font-size:13px;font-weight:500;
  margin-top:10px;cursor:pointer;transition:all .15s;
}
.btn-fechar:hover{color:var(--ink);border-color:var(--ink-faint)}

/* =============== ACOMPANHAMENTO AO VIVO =============== */
/* O stepper que o cliente fica olhando: onde o pedido está, com hora de cada
   passo. Vertical, com uma linha ligando os círculos — feito (verde), atual
   (dourado pulsando), pendente (apagado). */
.acompanha{margin:2px 0 18px}
.acompanha[hidden]{display:none}
.acompanha-steps{list-style:none;max-width:260px;margin:0 auto;text-align:left}
.acompanha-steps.cancelado{opacity:.45}
.ac-step{display:flex;align-items:center;gap:12px;padding:8px 0;position:relative}
.ac-step:not(:first-child)::before{
  content:'';position:absolute;left:15px;top:-8px;width:2px;height:16px;
  background:var(--line-strong);transition:background .3s;
}
.ac-step.feito::before,.ac-step.atual::before{background:var(--green)}
.ac-ic{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;z-index:1;
  display:flex;align-items:center;justify-content:center;font-size:15px;
  background:var(--bg-card);border:1.5px solid var(--line-strong);color:var(--ink-faint);
  transition:all .3s;
}
.ac-lbl{font-size:14px;color:var(--ink-dim);font-weight:500;display:flex;align-items:baseline;gap:8px}
.ac-lbl time{font-size:11px;color:var(--ink-faint);font-feature-settings:'tnum'}
.ac-step.feito .ac-ic{background:var(--green);border-color:var(--green);color:#fff}
.ac-step.feito .ac-lbl{color:var(--ink)}
.ac-step.atual .ac-ic{
  background:var(--gold);border-color:var(--gold);color:var(--bg);
  animation:acPulse 1.6s ease-in-out infinite;
}
.ac-step.atual .ac-lbl{color:var(--ink);font-weight:700}
@keyframes acPulse{
  0%,100%{box-shadow:0 0 0 4px rgba(201,169,97,.18)}
  50%{box-shadow:0 0 0 8px rgba(201,169,97,.04)}
}
.acompanha-tempo{font-size:14px;color:var(--ink-dim);margin-top:8px;text-align:center;line-height:1.5}
.acompanha-tempo strong{color:var(--gold);font-weight:700}
.acompanha-tempo .ac-cancel{color:var(--red);font-weight:600}
/* Código de entrega — o cliente mostra pro entregador */
.acompanha-codigo{margin:16px auto 0;max-width:240px;background:var(--bg-elev);border:1px solid var(--gold);border-radius:12px;padding:12px 14px;text-align:center}
.acompanha-codigo[hidden]{display:none}
.acompanha-codigo .acc-lbl{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);font-weight:700}
.acompanha-codigo .acc-num{display:block;font-family:var(--font-display);font-size:34px;font-weight:900;color:var(--gold);letter-spacing:.22em;margin:2px 0}
.acompanha-codigo .acc-hint{display:block;font-size:11px;color:var(--ink-dim)}
.btn-novo-pedido[hidden]{display:none}

/* Pílula do pedido em andamento — fica na tela até chegar, sobrevive ao reload */
.pedido-ativo{
  position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0));
  transform:translateX(-50%);z-index:46;
  display:flex;align-items:center;gap:11px;padding:11px 16px;border-radius:99px;
  max-width:calc(100vw - 32px);
  background:linear-gradient(180deg,var(--bg-card),var(--bg-elev));
  border:1px solid var(--gold);color:var(--ink);
  box-shadow:0 10px 30px rgba(0,0,0,.5);
  transition:transform .1s;
}
.pedido-ativo[hidden]{display:none}
.pedido-ativo:active{transform:translateX(-50%) scale(.97)}
.pa-pulse{
  width:9px;height:9px;border-radius:50%;background:var(--gold);flex-shrink:0;
  animation:paPulse 1.7s infinite;
}
@keyframes paPulse{
  0%{box-shadow:0 0 0 0 rgba(201,169,97,.5)}
  70%{box-shadow:0 0 0 8px rgba(201,169,97,0)}
  100%{box-shadow:0 0 0 0 rgba(201,169,97,0)}
}
.pa-txt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;text-align:left}
.pa-num{font-family:var(--font-display);font-weight:800;font-size:13px;color:var(--gold);letter-spacing:.02em}
.pa-status{font-size:12px;color:var(--ink-dim);font-weight:600}
.pa-seta{font-size:22px;color:var(--ink-faint);margin-left:2px;line-height:1}
.pedido-ativo.final{border-color:var(--green)}
.pedido-ativo.final .pa-num{color:var(--green)}
.pedido-ativo.final .pa-pulse{background:var(--green);animation:none}
.pedido-ativo.cancelado{border-color:var(--red)}
.pedido-ativo.cancelado .pa-num{color:var(--red)}
.pedido-ativo.cancelado .pa-pulse{background:var(--red);animation:none}

/* =============== FOOTER =============== */
.footer{
  border-top:1px solid var(--line);
  padding:40px 20px 28px;margin-top:60px;
}
.footer-top{display:grid;gap:20px;max-width:600px;margin:0 auto}
.footer-row{
  display:flex;align-items:center;gap:14px;
  padding:14px 0;border-bottom:1px solid var(--line);
}
.footer-row:last-child{border-bottom:none}
.footer-row .ic{
  width:40px;height:40px;border-radius:50%;
  background:var(--bg-card);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;color:var(--red);flex-shrink:0;
}
.footer-row .lbl{font-size:11px;color:var(--ink-dim);letter-spacing:.16em;text-transform:uppercase;font-weight:600;margin-bottom:2px}
.footer-row .val{font-size:14px;font-weight:500;color:var(--ink)}
.footer-row .val a{color:var(--ink);transition:color .15s}
.footer-row .val a:hover{color:var(--red)}

.footer-mark{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(70px, 18vw, 160px);line-height:.85;
  text-align:center;text-transform:uppercase;
  margin-top:48px;
  background:linear-gradient(180deg, rgba(245,239,227,.18) 0%, transparent 90%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}

.footer-bottom{
  text-align:center;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-faint);
  padding-top:20px;font-weight:500;
}
.footer-bottom .garra{color:var(--gold)}

/* =============== TOAST =============== */
.toast{
  position:fixed;left:50%;bottom:24px;
  transform:translate(-50%, 100px);
  background:var(--ink);color:var(--bg);
  padding:12px 20px;border-radius:99px;
  font-weight:600;font-size:13px;
  box-shadow:0 12px 40px rgba(0,0,0,.5);
  z-index:100;opacity:0;pointer-events:none;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), opacity .3s;
}
.toast.show{opacity:1;transform:translate(-50%, 0)}

/* =============== RESPONSIVO =============== */
@media (min-width:600px){
  .hero{padding:56px 24px 44px}
  .menu{padding:32px 24px 120px}
  .cat-head h2{font-size:28px}
}
@media (min-width:900px){
  .grid{grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));gap:16px}
  .header{padding:0 24px}
  .filters-scroll{padding:0 24px}
}
/* ============================================================================
   MONTAGEM — escolher tamanho, sabores, borda e adicionais.
   A peça que não existia e que faz o site servir pra pizzaria.

   Desenhada pro princípio 3: alvo de toque >= 48px, uma coluna, polegar
   alcança o botão de confirmar sem reposicionar a mão.
   ============================================================================ */

.mont-overlay{position:fixed;inset:0;background:rgba(0,0,0,.72);opacity:0;
  pointer-events:none;transition:opacity .22s ease;z-index:60;
  backdrop-filter:blur(2px)}
.mont-overlay.open{opacity:1;pointer-events:auto}

.mont{position:fixed;left:0;right:0;bottom:0;z-index:61;
  max-height:92vh;display:flex;flex-direction:column;
  background:var(--bg-elev);border-top-left-radius:20px;border-top-right-radius:20px;
  border-top:1px solid var(--line-strong);
  transform:translateY(101%);transition:transform .28s cubic-bezier(.22,1,.36,1);
  padding-bottom:env(safe-area-inset-bottom)}
.mont.open{transform:translateY(0)}

.mont-grab{width:38px;height:4px;border-radius:2px;background:var(--line-strong);
  margin:10px auto 4px;flex:none}

.mont-head{display:flex;gap:12px;align-items:center;padding:8px 16px 14px;flex:none}
.mont-head img{width:56px;height:56px;border-radius:10px;object-fit:cover;flex:none;
  background:var(--bg-card)}
.mont-head h3{font-family:var(--font-display);font-size:19px;line-height:1.15;margin:0}
.mont-head p{color:var(--ink-dim);font-size:12.5px;margin:3px 0 0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mont-close{margin-left:auto;flex:none;width:36px;height:36px;border-radius:50%;
  border:1px solid var(--line);background:transparent;color:var(--ink-dim);
  font-size:20px;line-height:1;cursor:pointer}

.mont-body{overflow-y:auto;padding:0 16px 12px;-webkit-overflow-scrolling:touch}

.mont-grupo{margin-bottom:20px}
.mont-grupo h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-dim);margin:0 0 4px;font-weight:600}
.mont-grupo .regra{font-size:11.5px;color:var(--ink-faint);margin:0 0 10px}

/* Escolha grande, lado a lado. Alvo de toque generoso. */
.mont-opts{display:grid;gap:8px}
.mont-opts.duas{grid-template-columns:1fr 1fr}

.mont-opt{display:flex;align-items:center;gap:10px;min-height:52px;
  padding:10px 14px;border-radius:var(--radius);cursor:pointer;text-align:left;
  border:1.5px solid var(--line);background:var(--bg-card);color:var(--ink);
  font-family:inherit;font-size:14.5px;transition:border-color .15s,background .15s}
.mont-opt:active{transform:scale(.99)}
.mont-opt.sel{border-color:var(--red);background:var(--red-soft)}
.mont-opt .nm{font-weight:600;line-height:1.2}
.mont-opt .sub{display:block;font-size:11.5px;color:var(--ink-dim);font-weight:400;
  margin-top:2px}
.mont-opt .delta{margin-left:auto;font-size:13px;color:var(--gold);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.mont-opt[disabled]{opacity:.4;cursor:not-allowed}

/* Lista de sabores da segunda metade */
.mont-sabores{max-height:260px;overflow-y:auto;display:grid;gap:6px;
  padding-right:2px;-webkit-overflow-scrolling:touch}
.mont-sabor{display:flex;align-items:center;gap:10px;min-height:48px;padding:8px 12px;
  border-radius:10px;border:1.5px solid var(--line);background:var(--bg-card);
  color:var(--ink);cursor:pointer;font-family:inherit;font-size:14px;text-align:left}
.mont-sabor.sel{border-color:var(--red);background:var(--red-soft)}
.mont-sabor img{width:34px;height:34px;border-radius:7px;object-fit:cover;flex:none}
.mont-sabor .nm{flex:1;font-weight:500;line-height:1.2}
.mont-sabor .pr{font-size:12.5px;color:var(--ink-dim);font-variant-numeric:tabular-nums}

.mont-obs{width:100%;min-height:60px;padding:11px 13px;border-radius:var(--radius);
  border:1.5px solid var(--line);background:var(--bg-card);color:var(--ink);
  font-family:inherit;font-size:14px;resize:vertical}
.mont-obs::placeholder{color:var(--ink-faint)}
.mont-obs:focus{outline:none;border-color:var(--line-strong)}

.mont-vazio{font-size:12.5px;color:var(--ink-faint);padding:10px 12px;
  border:1px dashed var(--line);border-radius:10px}

/* Rodapé fixo: o preço muda enquanto a pessoa escolhe. */
.mont-foot{flex:none;padding:12px 16px 16px;border-top:1px solid var(--line);
  background:var(--bg-elev);display:flex;align-items:center;gap:12px}
.mont-preco{flex:none}
.mont-preco .lbl{display:block;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-dim)}
.mont-preco .val{font-family:var(--font-display);font-size:21px;color:var(--gold);
  font-variant-numeric:tabular-nums;line-height:1.1}
.mont-add{flex:1;min-height:52px;border:none;border-radius:var(--radius);
  background:var(--red);color:#fff;font-family:inherit;font-size:15.5px;font-weight:600;
  cursor:pointer;letter-spacing:.02em}
.mont-add:disabled{background:var(--bg-card);color:var(--ink-faint);cursor:not-allowed}
.mont-erro{font-size:12px;color:var(--red);padding:0 16px 8px;min-height:0}

@media (min-width:640px){
  .mont{left:50%;right:auto;transform:translate(-50%,101%);width:min(520px,94vw);
    bottom:0;border-radius:20px 20px 0 0}
  .mont.open{transform:translate(-50%,0)}
}

/* ---- cupom ---- */
.cupom-linha{display:flex;gap:8px}
.cupom-linha input{flex:1;min-height:48px;padding:11px 13px;border-radius:var(--radius);
  border:1.5px solid var(--line);background:var(--bg-card);color:var(--ink);
  font-family:inherit;font-size:14px;text-transform:uppercase;letter-spacing:.06em}
.cupom-linha input::placeholder{text-transform:none;letter-spacing:0;color:var(--ink-faint)}
.cupom-linha input:focus{outline:none;border-color:var(--line-strong)}
.cupom-btn{flex:none;min-height:48px;padding:0 18px;border-radius:var(--radius);
  border:1.5px solid var(--line-strong);background:transparent;color:var(--ink);
  font-family:inherit;font-size:14px;font-weight:600;cursor:pointer}
.cupom-btn:disabled{opacity:.5;cursor:not-allowed}
.cupom-aviso{font-size:12.5px;margin:8px 0 0;min-height:1em}
.cupom-aviso.ok{color:var(--green)}
.cupom-aviso.erro{color:var(--red)}
.cart-row.desconto span:last-child{color:var(--green)}