/* =====================================================================================================
   Responsivo — celular (todos os tamanhos), tablet e celular deitado. Carrega por último e organiza o
   espaçamento com uma margem única (--gutter), respeitando as áreas seguras (notch / barra de gestos).
   Faixas: ≤ 360 (celular pequeno) · ≤ 480 (celular) · ≤ 700 (celular grande) · ≤ 900 (tablet em pé)
   e "deitado" (altura ≤ 520). Nada usa largura fixa maior que a tela.
   ===================================================================================================== */
:root {
  --gutter: clamp(12px, 4.2vw, 28px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sat: env(safe-area-inset-top, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --hdr-h: 76px; /* altura real do cabeçalho (o JS atualiza) */
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body { overflow-x: clip; }
img, svg, video, canvas, iframe { max-width: 100%; }
button, a, input, select, textarea, label { touch-action: manipulation; }
h1, h2, h3, p, b, small, span, li { overflow-wrap: anywhere; hyphens: auto; }
input, select, textarea { font-size: 16px; } /* evita o zoom automático do iPhone ao tocar num campo */
.hero, .wrap, .info-strip, .topbar { max-width: 100%; }
.cat-nav { top: calc(var(--hdr-h) + 6px); }
html { scroll-padding-top: calc(var(--hdr-h) + 70px); }

/* ---------------------------------------------------------------- tablet em pé e celulares (≤ 900) */
@media (max-width: 900px) {
  :root { --wrap: calc(100% - 2 * var(--gutter)); }
  .topbar { width: calc(100% - 2 * var(--gutter)); top: calc(8px + var(--sat)); }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .hero { padding: calc(var(--hdr-h) + 24px + var(--sat)) var(--gutter) 32px; }
  .hero-stage { height: clamp(220px, 34svh, 360px); min-height: 0; margin: 0; }
  #mascote-hero { height: 100%; width: auto; max-width: 70%; aspect-ratio: 300 / 368; }
  .hero-facts { justify-content: center; flex-wrap: wrap; }
  .hero-stage .float-card { display: none; }
}

/* ---------------------------------------------------------------- celulares (≤ 700) */
@media (max-width: 700px) {
  /* cabeçalho: uma linha de botões + faixa de abas rolável que some quando se rola a página para baixo */
  .topbar { flex-wrap: wrap; padding: 6px; gap: 6px; border-radius: 26px; row-gap: 6px; }
  .topbar .brand { flex: 0 0 auto; gap: 8px; min-width: 0; }
  .topbar .brand img { width: 40px; height: 40px; }
  .topbar .brand small { display: none; }
  .topbar .brand span b { font-size: 1rem; white-space: nowrap; }
  .topbar > .grow, .topbar > .spacer { flex: 1; }
  .status-pill { margin-left: auto; padding: 8px; }
  .status-pill span { display: none; }
  .acct-btn, .sound-btn, .mascote-btn, .cart-btn { width: 40px; height: 40px; flex: 0 0 auto; }
  .cart-btn { width: 44px; height: 44px; }
  .site-nav { order: 9; flex: 1 1 100%; min-width: 0; margin: 0; padding: 3px; overflow-x: auto; scrollbar-width: none; justify-content: space-between; max-height: 52px; transition: max-height .25s ease, opacity .2s ease, padding .2s ease; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { flex: 1 0 auto; text-align: center; padding: 9px 12px; min-height: 40px; display: grid; place-items: center; font-size: .9rem; scroll-snap-align: center; }
  .topbar.nav-hidden .site-nav { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; border-width: 0; }
  .topbar.nav-hidden { row-gap: 0; }

  /* topo do site */
  .hero { text-align: center; gap: 10px; }
  .hero h1 { font-size: clamp(2rem, 10vw, 3rem); line-height: 1.05; }
  .hero .lead { font-size: 1rem; }
  .hero-cta { display: grid; grid-template-columns: 1fr; gap: 10px; width: 100%; }
  .hero-cta .btn { width: 100%; justify-content: center; }
  .hero-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .hero-facts li { padding: 8px 6px; min-width: 0; flex-direction: column; text-align: center; gap: 2px; font-size: .78rem; }
  .info-strip { width: calc(100% - 2 * var(--gutter)); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .info-card { padding: 10px; min-width: 0; }
  .home-sec, .wrap { padding-left: 0; padding-right: 0; }
  .sec-head { flex-wrap: wrap; gap: 8px; }

  /* cardápio */
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .featured { grid-auto-columns: minmax(150px, 46%); gap: 10px; }
  .card { padding: 10px; border-radius: 18px; min-width: 0; }
  .card h3 { font-size: 1rem; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .card .desc { font-size: .78rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .card .foot { gap: 6px; }
  .card .price b { font-size: .95rem; }
  .card .price small { font-size: .68rem; }
  .card .add-btn { width: 36px; height: 36px; flex: 0 0 auto; }
  .card .tag { font-size: .62rem; padding: 3px 7px; }
  .cat-nav { width: calc(100% - 2 * var(--gutter)); padding: 6px; gap: 6px; flex-direction: column; align-items: stretch; flex-wrap: nowrap; border-radius: 18px; }
  .cat-scroll { flex: 0 0 auto; min-width: 0; max-width: 100%; padding-bottom: 2px; }
  .search { width: 100%; min-width: 0; }
  .promo-strip, #promo-strip { gap: 6px; }

  /* botões flutuantes: lado direito, acima da barra do carrinho quando ela aparece */
  .wa-float { right: 12px; bottom: calc(16px + var(--sab)); width: 48px; height: 48px; }
  .chat { right: 12px; bottom: calc(72px + var(--sab)); }
  .chat-fab { padding: 10px; }
  .chat-fab .chat-cta { display: none; }
  body.has-cartbar .wa-float { bottom: calc(84px + var(--sab)); }
  body.has-cartbar .chat { bottom: calc(140px + var(--sab)); }
  .cart-bar { left: var(--gutter); right: calc(var(--gutter) + 0px); bottom: calc(10px + var(--sab)); padding: 12px 16px; }
  .chat-panel { inset: auto 8px calc(8px + var(--sab)) 8px; width: auto; height: min(78svh, 620px); }
  main, .page { padding-bottom: calc(96px + var(--sab)); }

  /* janelas: folha que sobe de baixo, ocupa a largura toda */
  .overlay { align-items: flex-end; }
  .sheet { width: 100%; max-height: 94svh; border-radius: 26px 26px 0 0; overscroll-behavior: contain; }
  .product-sheet { grid-template-columns: minmax(0, 1fr); }
  .ps-stage { min-height: 0; height: clamp(200px, 34svh, 340px); }
  .ps-stage .p3d { width: auto; height: 96%; aspect-ratio: 1; max-width: 96%; }
  .ps-body { padding: 4px var(--gutter) 0; min-width: 0; gap: 10px; }
  .ps-body h2 { font-size: 1.6rem; padding-right: 44px; }
  .sizes { gap: 6px; }
  .size { padding: 8px 4px; min-width: 0; }
  .size b { font-size: 1.15rem; }
  .size small { font-size: .68rem; }
  .size span { font-size: .8rem; }
  .ps-actions { position: sticky; bottom: 0; z-index: 2; margin: 6px calc(-1 * var(--gutter)) 0; padding: 10px var(--gutter) calc(12px + var(--sab)); background: linear-gradient(180deg, rgba(26, 17, 11, 0), #1a110b 26%); }
  .ps-actions .btn { flex: 1; min-width: 0; padding-left: 10px; padding-right: 10px; }
  .close { top: 10px; right: 10px; width: 40px; height: 40px; }
  .ps-hint { bottom: 4px; }

  /* carrinho / checkout */
  .drawer { width: 100%; border-left: 0; border-radius: 26px 26px 0 0; height: 94svh; margin-top: auto; }
  .drawer-head { padding: 18px var(--gutter) 8px; }
  .drawer-body { padding: 4px var(--gutter) 16px; }
  .drawer-foot { padding: 12px var(--gutter) calc(14px + var(--sab)); }
  .cart-item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "img main price" "img qty qty"; gap: 4px 12px; align-items: center; }
  .cart-item img { grid-area: img; width: 56px; height: 56px; }
  .cart-item .ci-main { grid-area: main; }
  .cart-item .ci-price { grid-area: price; min-width: 0; }
  .cart-item .qty { grid-area: qty; justify-self: start; }
  .checkout .row, .checkout .grid2, .form-grid { grid-template-columns: minmax(0, 1fr); }
  .pay-grid { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
  .toast { bottom: auto; top: calc(var(--hdr-h) + 14px + var(--sat)); max-width: calc(100% - 2 * var(--gutter)); text-align: center; transform: translate(-50%, -20px); padding: 10px 16px; font-size: .9rem; }
  .toast.show { transform: translate(-50%, 0); }
  .footer { padding-bottom: calc(110px + var(--sab)); }
}

.btn { max-width: 100%; }
input, select, textarea { min-width: 0; max-width: 100%; }
.hero-copy { min-width: 0; }
@media (max-width: 700px) {
  .hero-cta .btn { white-space: normal; text-align: center; line-height: 1.15; }
  .ps-actions { gap: 8px; }
  .ps-actions .btn { white-space: nowrap; font-size: .95rem; padding: 12px 10px; }
  .ps-actions .qty { flex: 0 0 auto; padding: 2px; }
  .ps-actions .qty button { width: 36px; height: 40px; }
  .site-nav a { padding: 9px 9px; font-size: .86rem; }
  .cart-item .qty button { width: 38px; height: 38px; }
  #nudge-login, .link { padding: 8px 4px; }
  .maplibregl-ctrl-group button { width: 38px; height: 38px; }
  .drawer .ci-main b, .drawer .ci-main small { overflow-wrap: anywhere; }
  .coupon-row, .coupon { min-width: 0; }
}

/* ---------------------------------------------------------------- celulares pequenos (≤ 360) */
@media (max-width: 360px) {
  :root { --gutter: 12px; }
  .ps-actions .btn { font-size: .85rem; padding: 12px 6px; }
  .ps-actions .qty button { width: 30px; }
  .site-nav a { padding: 9px 7px; font-size: .8rem; }
  .topbar .brand span { display: none; }
  .acct-btn, .sound-btn, .mascote-btn { width: 36px; height: 36px; font-size: .95rem; }
  .cart-btn { width: 40px; height: 40px; }
  .hero h1 { font-size: 1.9rem; }
  .hero-facts { grid-template-columns: 1fr; }
  .hero-facts li { flex-direction: row; text-align: left; gap: 10px; }
  .info-strip { grid-template-columns: 1fr; }
  .card .desc { display: none; }
  .featured { grid-auto-columns: 62%; }
  .size small { display: none; }
}
@media (max-width: 320px) { .status-pill { display: none; } .topbar .brand img { width: 36px; height: 36px; } }
@media (max-width: 300px) { .grid { grid-template-columns: minmax(0, 1fr); } .site-nav a { padding: 9px 8px; font-size: .82rem; } }

/* ---------------------------------------------------------------- celular deitado (pouca altura) */
@media (max-height: 520px) and (orientation: landscape) {
  :root { --hdr-h: 60px; }
  .topbar { flex-wrap: nowrap; top: calc(6px + var(--sat)); left: 50%; padding: 4px 8px; }
  .topbar .site-nav { order: 0; flex: 0 1 auto; margin: 0 auto; max-height: none; overflow: visible; }
  .topbar .site-nav a { padding: 6px 12px; min-height: 36px; }
  .topbar.nav-hidden .site-nav { max-height: none; opacity: 1; padding: 3px; }
  .topbar .brand span, .status-pill, .track-link { display: none; }
  .acct-btn, .sound-btn, .mascote-btn { width: 34px; height: 34px; }
  .cart-btn { width: 38px; height: 38px; }
  .topbar .site-nav a { padding: 6px 9px; font-size: .84rem; }
  .hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; text-align: left; padding: calc(var(--hdr-h) + 12px) var(--gutter) 18px; min-height: 100svh; gap: 16px; }
  .hero { min-height: 0; padding-bottom: 60px; }
  .hero-stage { order: 0; height: calc(100svh - var(--hdr-h) - 70px); max-height: 280px; }
  .hero h1 { font-size: clamp(1.5rem, 4.6vw, 2.2rem); margin: 4px 0; }
  .hero .lead { font-size: .85rem; margin: 0 0 8px; }
  .hero .eyebrow { font-size: .7rem; padding: 4px 10px; }
  .hero-cta { grid-template-columns: 1fr 1fr; gap: 8px; }
  .hero-cta .btn { white-space: nowrap; padding: 9px 10px; font-size: .88rem; }
  .hero-facts { display: none; }
  .cart-bar { left: auto; right: calc(var(--gutter) + 56px); width: min(340px, 48%); bottom: calc(8px + var(--sab)); padding: 9px 14px; }
  body.has-cartbar .wa-float { bottom: 10px; }
  body.has-cartbar .chat { bottom: 60px; }
  .hero > * { min-width: 0; }
  .overlay { align-items: center; }
  .sheet { width: min(96%, 900px); max-height: 92svh; border-radius: 22px; }
  .product-sheet { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ps-stage { height: auto; min-height: 220px; }
  .ps-body { padding-top: 20px; }
  .drawer { width: min(440px, 100%); height: 100svh; border-radius: 0; margin: 0 0 0 auto; }
  .wa-float { width: 42px; height: 42px; bottom: 10px; }
  .chat { bottom: 60px; }
  .cat-nav { top: calc(var(--hdr-h) + 4px); }
  .toast { top: calc(var(--hdr-h) + 8px); }
}

/* ---------------------------------------------------------------- tablet (701–900): cabeçalho numa linha só */
@media (min-width: 701px) and (max-width: 900px) {
  .topbar { flex-wrap: nowrap; }
  .site-nav { order: 0; margin: 0 auto; }
  .site-nav a { padding: 8px 12px; font-size: .88rem; }
  .status-pill span { display: none; }
  .hero { grid-template-columns: 1fr; }
  .overlay { align-items: center; }
  .sheet { width: min(760px, calc(100% - 32px)); border-radius: 26px; }
  .product-sheet { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .drawer { width: min(440px, 100%); border-radius: 0; height: 100%; margin: 0 0 0 auto; }
}

/* ---------------------------------------------------------------- telas grandes: não deixa o conteúdo esticar demais */
@media (min-width: 1700px) { :root { --wrap: min(1600px, calc(100% - 96px)); } }
@media (min-width: 701px) and (max-width: 900px) { .topbar .brand span { display: none; } }

/* ---- ajustes finos: Galaxy Fold (280px), alvos de toque e cabeçalho ---- */
.topbar .brand img { flex: 0 0 auto; }
.day-card { min-width: 0; }
#nudge-login, .link { display: inline-block; min-height: 36px; line-height: 28px; }
@media (max-width: 360px) { .ps-actions .qty button { width: 36px; } }
@media (max-width: 320px) {
  .week-grid, .days, .promo-days { grid-template-columns: minmax(0, 1fr); }
  .day-card { padding: 14px; }
  .cart-bar { padding: 10px 12px; gap: 8px; }
  .cart-bar b { font-size: .95rem; }
}
.promo-week { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }

/* ===== cabeçalho sem quebrar entre 821 e 1250 px (janela pequena/zoom): marca vira só o logo, pílula só a bolinha ===== */
.brand span { white-space: nowrap; }
.brand { flex: none; }
@media (min-width: 821px) { .topbar { flex-wrap: nowrap; } }
@media (min-width: 821px) and (max-width: 1250px) {
  .brand > span { display: none; }
  .status-pill span { display: none; }
  .status-pill { padding: 10px; }
  .track-link { padding: 6px 8px; white-space: nowrap; }
  .topbar .site-nav a { padding: 8px 10px; font-size: 0.85rem; white-space: nowrap; }
}
@media (min-width: 821px) and (max-width: 1000px) {
  .topbar .site-nav a { padding: 7px 8px; font-size: 0.8rem; }
  .kids-btn { padding: 0 12px; font-size: .78rem; }
  .track-link { font-size: .78rem; }
}

/* ===== menu do cabeçalho sempre inteiro, em qualquer celular ===== */
@media (max-width: 420px) {
  .site-nav { gap: 0; overflow: visible; }
  .topbar .site-nav a { padding: 7px 3px; font-size: min(.8rem, 3.2vw); white-space: nowrap; }
}
@media (max-width: 340px) {
  .site-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 4px; }
  .topbar .site-nav a { font-size: .78rem; padding: 7px 4px; }
}
/* celular deitado: o cabeçalho tem uma linha só, então sai o que é secundário e o resto encolhe */
@media (max-height: 480px) and (min-width: 480px) and (max-width: 960px) {
  .track-link, .status-pill { display: none; }
  .kids-btn { padding: 0 9px; font-size: .68rem; height: 32px; }
  .topbar .site-nav a { padding: 6px 6px; font-size: .7rem; white-space: nowrap; }
  .topbar { gap: 5px; }
}
@media (max-height: 480px) and (min-width: 480px) and (max-width: 640px) {
  .kids-btn { font-size: 0; width: 34px; padding: 0; justify-content: center; }
  .kids-btn::before { content: "\1F9D2"; font-size: 1rem; }
  .kids-btn.on::before { content: "\2716"; }
}
@media (max-height: 480px) and (min-width: 480px) and (max-width: 640px) {
  .topbar .site-nav a { padding: 6px 4px; font-size: .66rem; }
  .topbar { gap: 4px; padding-left: 6px; padding-right: 6px; }
}
@media (max-height: 480px) and (min-width: 480px) and (max-width: 640px) {
  .brand img { width: 30px; height: 30px; }
  .topbar .site-nav a { font-size: .62rem; padding: 6px 3px; }
  .acct-btn { width: 34px; height: 34px; }
}

/* ===== TV e telas grandes: textos e botões crescem para ler de longe ===== */
@media (min-width: 1700px) { html, body { font-size: 18px; } :root { --wrap: min(1700px, calc(100% - 120px)); } }
@media (min-width: 2400px) { html, body { font-size: 23px; } :root { --wrap: min(2200px, calc(100% - 200px)); } }
@media (min-width: 3200px) { html, body { font-size: 30px; } :root { --wrap: min(2900px, calc(100% - 280px)); } }