/* =========================================================================
   APP.CSS - Webapp cardapio cliente (dark/red, acessivel)
   ========================================================================= */

@font-face {
  font-family: 'P22MackinacPro';
  src: url('../fonts/P22MackinacPro-Bold.ttf') format('truetype');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'P22MackinacPro';
  src: url('../fonts/P22MackinacPro-Book_25.ttf') format('truetype');
  font-weight: 100 300;
  font-style: normal;
  font-display: swap;
}

* { margin: 0; padding: 0; box-sizing: border-box; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }

/* Forcar background escuro no autocomplete do browser */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 50px #0a0a0a inset !important;
  -webkit-text-fill-color: #f0f0f0 !important;
  caret-color: #f0f0f0;
  transition: background-color 5000s ease-in-out 0s;
}

:root {
  /* Raio do card de produto. Mora aqui, e nao dentro do .item, porque o banner
     do carrossel precisa do MESMO valor (dono 2026-08-22) — era 0.875rem e
     destoava. Raio aninhado: interno 1.5rem + a folga do card. O breakpoint
     mobile redefine embaixo (folga maior la). */
  --card-radius: calc(1.5rem + 3px);
  /* Raio ANINHADO: o que sobra do raio do card depois da folga lateral — a
     mesma conta que a foto grande do card ja usa. Resolve no elemento que
     usa, entao o --item-pad-left do card (0.75rem / 0.55rem no mobile) entra
     sozinho; fora do card vale o fallback. Quem for pequeno demais satura no
     teto de 35% do proprio lado: a conta pura (22.5px no mobile) numa caixa
     de 26px vira circulo, e circulo nao e a familia deste desenho. */
  /* Respiro da foto ate a borda do card. Mora no :root (e nao so no .item)
     porque quem vive FORA do card precisa do mesmo numero pra ficar homogeneo —
     o anel do banner, por exemplo. Antes so o .item declarava, e o banner caia
     no fallback 0.75rem: no mobile o card usa 0.55rem, entao a moldura saia 36%
     mais grossa e o notch, calculado por ela, ficava 3px fora da quina (dava pra
     ver um filete da arte ao lado dele). O breakpoint mobile redefine embaixo. */
  --item-pad-left: 0.75rem;
  --radius-nested: calc(var(--card-radius) - var(--item-pad-left, 0.75rem));
  --bg: #0a0a0a;
  --bg2: #111111;
  --surface: #1a1a1a;
  --surface2: #222222;
  --border: #2a2a2a;
  --text: #f0f0f0;
  --text2: #b0b0b0;
  --text3: #666666;
  /* Estados de texto secundario (centralizado pra batido entre componentes) */
  --text-muted:        rgba(255, 255, 255, 0.42);  /* inativo/desc dos cards/categorias */
  --text-muted-strong: rgba(255, 255, 255, 0.70);  /* hover de inativo */
  --text-ghost:        rgba(255, 255, 255, 0.12);  /* placeholder de input, hint discreto */
  --divider-faint:     rgba(255, 255, 255, 0.04);  /* dividers sutis (header, sidebar) */

  /* Padding lateral unico (header, banner, seções alinham por este valor).
     Override no breakpoint ≥768px pra dar respiro nas laterais em tela larga. */
  --gutter: 0.875rem;

  /* ── Cores customizáveis pelo lojista (3 slots) ───────────────────────────
     brand.js sobrescreve estas 3 em runtime via :root inline.
     Todas as derivações abaixo (light/dark/glow/subtle/border) são automáticas
     via color-mix() — não precisam ser ajustadas manualmente. */
  --brand-1: #f70000;   /* primária — CTAs, FAB, header letter, active state */
  --brand-2: #ff3333;   /* secundária — gradient pair, banner, hover */
  --brand-3: #cc0000;   /* terciária — borders, glow accents, dark variant */
  /* RGB cru da primaria (rgba(var(--brand-1-rgb), .3)); espelhado em runtime */
  --brand-1-rgb: 247, 0, 0;

  --brand-1-light:  color-mix(in srgb, var(--brand-1) 70%, white);
  --brand-1-dark:   color-mix(in srgb, var(--brand-1) 70%, black);
  --brand-1-glow:   color-mix(in srgb, var(--brand-1) 30%, transparent);
  --brand-1-subtle: color-mix(in srgb, var(--brand-1) 10%, transparent);
  --brand-1-border: color-mix(in srgb, var(--brand-1) 35%, transparent);

  /* ── Aliases legacy (todo código antigo usa --red/--accent) ─────────────── */
  --red:        var(--brand-1);
  --red-light:  var(--brand-2);
  --red-dark:   var(--brand-3);
  --red-glow:   var(--brand-1-glow);
  --red-subtle: var(--brand-1-subtle);
  --red-border: var(--brand-1-border);
  --accent:     var(--brand-1);
  --accent-dark:var(--brand-3);
  --accent-glow:var(--brand-1-glow);

  --green: #4ade80;
  --gold: #f59e0b;
  --font: 'P22MackinacPro', 'Outfit', sans-serif;
  --radius: 0.75rem;
  --radius-lg: 1rem;
  --fs-xl: 1.25rem;
  --fs-lg: 1rem;
  --fs-md: 0.875rem;
  --fs-sm: 0.75rem;
}

/* Bloqueia selecao de texto + long-press menu em geral (inputs ficam livres logo abaixo) */
html, body {
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none; /* iOS long-press menu */
}
input, textarea, [contenteditable="true"], .selectable {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
img { -webkit-user-drag: none; }

/* Mãozinha de tutorial (indicador animado de scroll + clique) */
/* Agora e um <span> com o SVG inline dentro (pra o vermelho herdar --brand-1);
   o svg filho precisa ocupar a caixa toda. */
.tutorial-hand > svg, .tutorial-hand > img { width: 100%; height: 100%; display: block; }
.tutorial-hand {
  position: fixed;
  width: 3.9rem;
  height: 3.9rem;
  z-index: 4000;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.85)) drop-shadow(0 1px 3px rgba(0,0,0,0.9));
  will-change: transform, opacity, left, top;
  -webkit-user-select: none;
  user-select: none;
}

html {
  /* PROPORCIONAL TOTAL (dono 2026-08-20): tudo é rem, então a raiz fluida
     escala o layout INTEIRO junto. Âncora: 400px de viewport = 14px (o visual
     mobile aprovado). 3.5vw passa exato por ela; piso 11px (celular 320px),
     teto 15px onde o breakpoint desktop assume. */
  font-size: clamp(11px, 3.5vw, 15px);
  /* cobre overscroll/bounce do body com a mesma cor do bg (sem flash branco) */
  background: var(--bg);
  overscroll-behavior: none;
  /* Firefox: cor da barra + cor do track — pedido do usuário 2026-08-17:
     thumb na cor do fundo de cards/header (--surface), não mais o
     gradiente de marca. */
  scrollbar-color: var(--surface) #000;
  scrollbar-width: thin;
}

/* Scrollbar global (Webkit: Chrome/Safari/Brave/Edge) — 10px -> 2px de
   largura, thumb na cor do fundo de cards/header (--surface) em vez do
   gradiente de marca (pedido do usuário 2026-08-17). Sem o truque de
   border pra "encolher" o thumb (fazia sentido só quando o total era
   10px; em 2px o border sozinho já comeria a largura toda). */
::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}
::-webkit-scrollbar-track {
  background: #000;
  border-radius: 100px;
}
::-webkit-scrollbar-thumb {
  background: var(--surface);
  border-radius: 100px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--surface-3);
}
::-webkit-scrollbar-corner { background: #000; }

/* ===== Font DSEG7 (LCD digital) — usado nos precos estilo balanca/display ===== */
@font-face {
  font-family: 'DSEG7';
  src: url('../fonts/DSEG7Classic-Bold.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

/* Preco em LCD digital — IDENTICO ao relogio do painel.
   3 layers de text-shadow + ::before com "ghost" dos segmentos apagados. */
.item-price,
.cart-total,
.acomp-opt-price,
.modal-footer-value,
.modal-price,
.resumo-item-price,
.resumo-total,
.resumo-total-right {
  font-family: 'DSEG7', var(--mono, monospace);
  letter-spacing: 1.5px;
  color: var(--red);
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 0.5rem;
  padding: 0.42rem 0.6rem;
  /* Drop shadow no tom escuro da variavel do tenant (dinamico) */
  text-shadow:
    0 0 8px color-mix(in srgb, var(--brand-1-dark) 60%, transparent),
    0 0 20px color-mix(in srgb, var(--brand-1-dark) 30%, transparent),
    0 0 40px color-mix(in srgb, var(--brand-1-dark) 10%, transparent);
  line-height: 1.1;
  position: relative;
  display: inline-block;
  width: fit-content;
}

/* Ghost dos segmentos apagados — todos os "8"s aparecem dim por tras
   pra simular o display LCD onde os segmentos inativos sao visiveis. */
.item-price::before,
.cart-total::before,
.acomp-opt-price::before,
.modal-footer-value::before,
.modal-price::before,
.resumo-item-price::before,
.resumo-total::before,
.resumo-total-right::before {
  content: attr(data-ghost);
  position: absolute;
  inset: 0;
  padding: inherit;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  color: color-mix(in srgb, var(--brand-1-dark) 20%, transparent);
  text-shadow: none;
  pointer-events: none;
  white-space: nowrap;
  /* Alinha o ghost com o texto real (que e centralizado via inline-flex
     align-items:center nos containers LCD) — senao os segmentos apagados
     ficam no topo, desalinhados dos digitos acesos. */
  display: flex;
  align-items: center;
}

/* REMOVIDO (5a rodada, dono 2026-08-22): regra orfa de antes do cart-total/
   modal-footer-value falarem a lingua do .item-price - o padding aqui ja
   era letra morta (a regra mais especifica la embaixo sempre venceu), mas
   o letter-spacing:2px sobrevivia sozinho e deixava o cart-total ~12px
   mais largo que o resumo-total-right com o MESMO padding (a letra
   maior "engordava" o texto). Agora os dois usam o letter-spacing padrao
   (1.5px, do seletor coletivo), igual o card. */

body {
  font-family: var(--font);
  /* SEM background no body: ele é bloco in-flow e pintaria POR CIMA do ::before
     (z-index:-1). O preto base vem do html { background: var(--bg) }; o gradiente
     fixo vive no body::before. */
  background-color: transparent;
  color: var(--text);
  min-height: 100dvh;
  -webkit-tap-highlight-color: transparent;
  padding-bottom: 5.5rem;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
/* Excecao: inputs e textareas precisam permitir selecao pra digitar/editar */
input, textarea, [contenteditable="true"] {
  user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
}

/* Gradiente de fundo (cor da marca -> preto) FIXO ao viewport: não sobe com o
   scroll. Vive num ::before fixo (em vez de background-attachment:fixed no body,
   que o iOS/mobile ignora ou trava). z-index -1 = atrás das partículas (z0) e do
   conteúdo (z1), exatamente onde o background do body pintava antes. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: var(--brand-1, #f97316);   /* fallback solido enquanto o gradiente pinta */
  background-image: linear-gradient(to bottom, var(--brand-1, #f97316) 0%, var(--brand-1, #f97316) 18rem, var(--bg, #0a0a0a) 38rem);
  pointer-events: none;
}

/* ===== Particulas decorativas (atras do conteudo, acima do gradient) ===== */
#particles-js {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
#particles-js canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;   /* garante canvas transparente */
}
/* Garante que header/conteudo/cart fiquem ACIMA das particulas */
.hdr { z-index: 100; }
main, .cart, .item-modal-ov, .cat-sidebar { position: relative; z-index: 1; }
.cart { z-index: 200; }
.item-modal-ov { z-index: 1100; }
.cat-sidebar { z-index: 5000; }

/* Escurecimento do bottom: gradient alto que cobre o fim dos cards vistos,
   ACIMA do conteudo (z1) e ABAIXO do cart (z200). Sempre presente (independe
   do estado do carrinho) — da profundidade e destaca a plaqueta flutuante. */
body::after {
  content: '';
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 14rem;
  background: linear-gradient(to top,
    rgba(0,0,0,0.95) 0%,
    rgba(0,0,0,0.82) 26%,
    rgba(0,0,0,0.5) 55%,
    rgba(0,0,0,0.2) 78%,
    transparent 100%);
  pointer-events: none;
  z-index: 150;
  opacity: 1;
  transition: opacity 0.45s ease-in-out;
}

/* Fim da página (classe posta pelo mesmo gatilho da setinha da plaqueta):
   sombra some em fade pra não cobrir o card de atalhos do rodapé. */
body.page-end::after {
  opacity: 0;
}

/* ===== Header (estilo Mercado Livre: logo + busca + status + filtros) ===== */
.hdr {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--bg2);
  /* sem border-bottom — o indicador funde com o gradient laranja do body */
  position: sticky;
  top: 0;
  z-index: 100;
}
.hdr-row--main {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  /* Vertical igualado ao lateral (var(--gutter), 0.875rem) — pedido do
     usuário 2026-08-17: "mesma distância" da barra de busca, mesmo
     princípio já aplicado no painel (topo/gap dos cards = respiro
     lateral). Era 0.625rem no vertical, diferente do lateral. */
  padding: var(--gutter);
  /* Limita largura do conteudo a 1000px centralizado (header bg continua 100vw) */
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* Search input embutido no header */
.hdr-search-wrap {
  flex: 1;
  min-width: 0;
  position: relative;
  display: flex;
  align-items: center;
}
/* Mobile: continua sempre oculto — "Resultado para X" so aparece no corpo,
   igual sempre foi. Vira flex/visivel so no desktop (media abaixo). */
.hdr-search-result {
  display: none;
}
.hdr-search-icon {
  position: absolute;
  left: 0.75rem;
  pointer-events: none;
  color: var(--text3);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

/* Borracha (dono 2026-08-20): saiu do ponto da lupa — agora do lado OPOSTO
   (direita), espelhado. A lupa fica SEMPRE visível (sem crossfade); a
   borracha só aparece quando tem texto. Mesmo tamanho de alvo de toque
   (2.1rem), fica antes do padding-right do input (2.4rem) — nunca cobre
   o texto digitado. */
.hdr-search-clear {
  position: absolute;
  right: 0.28rem;
  width: 2.1rem;
  height: 2.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 100px;
  color: var(--text3);
  cursor: pointer;
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;      /* invisível NÃO clica (senão rouba o toque do input) */
  transition: opacity 0.16s ease, transform 0.16s ease, color 0.16s ease;
}
.hdr-search-clear svg { display: block; }
.hdr-search-clear:hover { color: var(--brand-1); }
.hdr-search-clear:active { transform: scale(0.88); }

/* Com texto no campo: so a borracha entra (a lupa nao some mais) */
.hdr-search-input:not(:placeholder-shown) ~ .hdr-search-clear {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.hdr-search-input {
  width: 100%;
  height: 3rem;   /* mesma altura do circulo da logo (.hdr-logo-wrap = 3rem) — alinhados */
  padding: 0 2.4rem 0 2.4rem;
  background: var(--bg);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 100px;
  color: var(--text);
  font-family: var(--font);
  font-size: 1.08rem;   /* mesmo tamanho do nav menu (.filter-btn), dono pediu 2026-08-21 */
  font-weight: 700;     /* Mackinac Bold — mesmo peso visual do nav menu */
  outline: none;
  transition: border-color 0.18s, background 0.18s;
}
/* Placeholder nativo transparente — quem mostra o texto eh o .search-shimmer */
.hdr-search-input::placeholder { color: transparent; }

/* Fake placeholder com reflexo iPhone (mesmo efeito do botao da impressora) */
.search-shimmer {
  position: absolute;
  left: 2.4rem;              /* alinha com o padding-left do input (apos o icone) */
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-family: var(--font);
  font-size: 1.08rem;   /* acompanha o input — mesmo tamanho do nav menu */
  font-weight: 700;     /* Mackinac Bold, igual ao nav menu (100 caía no Book) */
  white-space: nowrap;
  /* reflexo: base na cor do placeholder, brilho estreito no meio do gradiente.
     background-size 300% => nas posicoes 0%/100% so aparece a base (sem brilho). */
  background: linear-gradient(
    100deg,
    rgba(255,255,255,0.18) 0%,
    rgba(255,255,255,0.18) 38%,
    rgba(255,255,255,0.9) 50%,
    rgba(255,255,255,0.18) 62%,
    rgba(255,255,255,0.18) 100%
  );
  background-size: 300% 100%;
  background-position: 0% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: search-shimmer 6s ease-in-out 1s infinite;  /* delay 1s pra pagina carregar */
  transition: opacity 0.2s ease;
}
/* Some quando o input tem texto */
.hdr-search-input:not(:placeholder-shown) ~ .search-shimmer { opacity: 0; }

/* 1 passada lenta de ~2s (0->33.33% de 6s) + ~4s parado (33.33->100%).
   Brilho passa mais devagar (mais visivel); gap entre passagens segue ~4s.
   Em repouso (pos 0%) so aparece a base, sem brilho residual. */
@keyframes search-shimmer {
  0%     { background-position: 100% 0; }   /* inicio: brilho fora (terco direito) */
  33.33% { background-position: 0% 0; }     /* fim da passada (2s): brilho fora (terco esquerdo) */
  100%   { background-position: 0% 0; }     /* pausa ~4s */
}
.hdr-search-input:focus {
  border-color: var(--brand-1);
  background: var(--bg);
  box-shadow: 0 0 0 3px var(--brand-1-subtle);
}
/* Chip compacto empilhado: linha 1 = bolinha pulsante + estado;
   linha 2 = horario de funcionamento (sempre visivel). Sem fundo/borda.
   Vertical pra caber no header mobile sem espremer a busca. */
.loja-status--compact,
.loja-status--compact.aberta,
.loja-status--compact.fechada {
  margin-left: auto !important;
  padding: 0.15rem 0.1rem 0.15rem 0.35rem !important;
  background: transparent !important;
  border: none !important;
  /* Uma face por vez (flip) → linha única, centrada na altura do input */
  align-self: center;
  align-items: center;
  gap: 0.05rem;
  font-weight: 600;
  flex-shrink: 0;
  line-height: 1.15;
}

/* Flip status ⇄ horário — mesma mecânica 3D do logo (preserve-3d + faces
   com backface-visibility). Rodízio de 3 faces, 3s cada (lojaFlip3, app.js). */
.loja-status-flip {
  position: relative;
  display: block;
  transform-style: preserve-3d;
  /* Rotação de 3 faces regida por JS (dono 2026-08-20): Aberto → das → às,
     tempos iguais. O JS aplica status-half-out, troca o conteúdo com o
     elemento de canto (90°, invisível) e aplica status-half-in. A antiga
     animação infinita de 2 faces saiu — status não intercala mais. */
}
@keyframes status-half-out {
  from { transform: perspective(400px) rotateX(0deg); }
  to   { transform: perspective(400px) rotateX(90deg); }
}
@keyframes status-half-in {
  from { transform: perspective(400px) rotateX(-90deg); }
  to   { transform: perspective(400px) rotateX(0deg); }
}
.loja-status-flip > * {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.loja-status--compact .loja-status-flip .loja-status-hours {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;   /* face controlada por .face-hours (JS), sem rotateX fixo */
  font-size: 1.1rem;    /* igual ao .loja-status-txt — as 3 faces do rodizio (Aberto/Fechado, das, as) com a mesma fonte */
}
/* Estágio de horário: mostra a face de horas, esconde a linha de status */
.loja-status--compact.face-hours .loja-status-flip .loja-status-hours { visibility: visible; }
.loja-status--compact.face-hours .loja-status-flip .loja-status-line { visibility: hidden; }
.loja-status--compact .loja-status-line {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.loja-status--compact .loja-status-txt {
  font-family: 'P22MackinacPro', var(--font);
  font-weight: 700;   /* Mackinac Bold */
  color: var(--text2);
  font-size: 1.1rem;
  letter-spacing: 0.2px;
}
.loja-status--compact.aberta .loja-status-txt,
.loja-status--compact.aberta .loja-status-hours { color: #4ade80; }
.loja-status--compact.fechada .loja-status-txt,
.loja-status--compact.fechada .loja-status-hours { color: #ef4444; }
.loja-status--compact .loja-status-hours {
  font-family: 'P22MackinacPro', var(--font);
  font-weight: 700;   /* Mackinac Bold */
  font-size: 0.72rem;
  color: var(--text-muted);   /* mesmo cinza da categoria inativa (.filter-btn) */
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.3px;
}

/* Icone de relogio analogico no lugar do dot (cor por estado, leve pulso) */
.loja-status-clock {
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
  color: var(--text2);
}
.loja-status-clock.aberta {
  color: #4ade80;
  animation: clock-pulse-aberta 2.4s ease-in-out infinite;
}
.loja-status-clock.fechada {
  color: #ef4444;
  animation: clock-pulse-fechada 2.4s ease-in-out infinite;
}
/* Porta dinâmica: um path por estado; antes de o JS setar o estado, mostra
   a porta fechada (neutro em cinza, sem pulso). */
.loja-status-clock .door-open { display: none; }
.loja-status-clock.aberta .door-open { display: block; }
.loja-status-clock.aberta .door-closed { display: none; }
@keyframes clock-pulse-aberta {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(74,222,128,0)); }
  50%      { filter: drop-shadow(0 0 3px rgba(74,222,128,0.55)); }
}
@keyframes clock-pulse-fechada {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(239,68,68,0)); }
  50%      { filter: drop-shadow(0 0 3px rgba(239,68,68,0.55)); }
}

.hdr-logo-wrap {
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  position: relative;
  transform-style: preserve-3d;
  animation: logo-flip 20s ease-in-out infinite;
}

.hdr-logo {
  width: 3rem;
  height: 3rem;
  position: absolute;
  top: 0;
  left: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.hdr-logo--brand {
  transform: rotateX(180deg);
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.10);   /* mesmo tom cinza da borda do input de busca */
  object-fit: contain;
}
/* Loja virtual: logo limpa sem moldura/circulo (logo cobre toda area) */
body.tipo-loja_virtual .hdr-logo--brand {
  border-radius: 0;
  border: none;
}
body.tipo-loja_virtual .hdr-logo-wrap { background: transparent; }

/* 20s total: motobot ~5s + flip + tenant ~14s + flip — marca do cliente em destaque */
@keyframes logo-flip {
  0%,    25%   { transform: perspective(400px) rotateX(0deg); }   /* motobot 5s */
  27.5%, 97.5% { transform: perspective(400px) rotateX(180deg); } /* tenant 14s */
  100%         { transform: perspective(400px) rotateX(360deg); } /* flip back */
}

.hdr-logo--motobot path { fill: var(--brand-1); }
.hdr-logo--motobot path:first-child { fill: none; }

.hdr-logo--motobot path:nth-last-of-type(-n+2) {
  transform-box: fill-box;
  transform-origin: center;
  animation: animeExpression 4s ease-in-out infinite;
}

.hdr-logo--motobot path:nth-last-of-type(1) {
  animation-name: animeExpressionBlink;
}

@keyframes animeExpression {
  0%, 65%, 100% { transform: translateY(0) rotateX(0deg); }

  68% { transform: translateY(60%) rotateX(0deg); }
  71% { transform: translateY(0) rotateX(0deg); }
  74% { transform: translateY(45%) rotateX(0deg); }
  77% { transform: translateY(0) rotateX(0deg); }
  80% { transform: translateY(30%) rotateX(0deg); }
  83% { transform: translateY(0) rotateX(0deg); }
}

@keyframes animeExpressionBlink {
  0%, 65%, 100% { transform: translateY(0) rotateX(0deg); }

  68% { transform: translateY(60%) rotateX(0deg); }
  71% { transform: translateY(0) rotateX(0deg); }
  74% { transform: translateY(45%) rotateX(0deg); }
  77% { transform: translateY(0) rotateX(0deg); }
  80% { transform: translateY(30%) rotateX(0deg); }
  83% { transform: translateY(0) rotateX(0deg); }

  88% { transform: rotateX(90deg); }
  90% { transform: rotateX(90deg); }
  93% { transform: rotateX(0deg); }
}

.hdr-name {
  font-size: 1.125rem;
  font-weight: 800;
  color: #F0F0F0;
  overflow: hidden;
}

.hdr-letter { display: inline-block; white-space: pre; }
.hdr-letter--accent { color: #F0F0F0; }

@keyframes hdr-swirl-out {
  to { transform: translateY(-110%) rotate(-25deg) scale(0.4); opacity: 0; }
}
@keyframes hdr-swirl-in {
  from { transform: translateY(110%) rotate(25deg) scale(0.4); opacity: 0; }
}
.hdr-letter--out { animation: hdr-swirl-out 0.15s ease-in  forwards; }
.hdr-letter--in  { animation: hdr-swirl-in  0.15s ease-out forwards; }

.hdr-sub {
  font-size: var(--fs-sm);
  color: var(--text3);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════
   BANNER CAROUSEL
   Mobile: 1 slide ocupa 100% da viewport (edge-to-edge).
   Desktop (>=720px): 3 slides visiveis (peek lateral), ativo centralizado
   com brilho normal; vizinhos escurecidos e blurrados.
   ═══════════════════════════════════════════════════════════════════ */
.banner-carousel {
  overflow-x: clip;
  overflow-y: visible;
  padding: 1.25rem 0;
  /* O padding vertical existe pro glow/scale do slide nao ser cortado, mas
     embaixo ele virava espaco morto: o vao banner->1o card ficava 21px contra
     9.3px de card->card (dono 2026-08-24). O margin-bottom negativo cancela
     exatamente esse padding; quem passa a definir o vao e o padding-top da 1a
     secao, abaixo, que usa o MESMO gap do grid de cards. */
  margin: -0.5rem 0 -1.25rem;  /* sem margem lateral — imagem vai ate a borda da tela */
  /* Largura de cada slide em %. JS le essa variavel pra calcular o translateX. */
  --slide-pct: 100;
  position: relative;
  z-index: 2; /* fica acima do .promo-drawer pra o card sair "de tras" do banner */
}

.banner-track {
  display: flex;
  gap: 0;
  /* center de volta (dono 2026-08-24): com flex-start, o slide fora de foco —
     que encolhe 2% por design — deixava a sobra toda embaixo, e a troca de
     slide dava um salto vertical ("piscada"). O ancoramento no topo so e
     necessario com a GAVETA aberta, pra ela crescer so pra baixo: e o que a
     regra abaixo faz, e nesse estado o carrossel esta travado de qualquer
     jeito, entao nao ha troca de slide pra saltar. */
  align-items: center;
}
.banner-track:has(.promo-drawer.visible) { align-items: flex-start; }

.banner-slide {
  flex: 0 0 100%;
  /* Padding lateral identico ao do header e dos cards (0.875rem)
     pra a imagem ficar com a MESMA largura dos cards/itens do header.
     Container .banner-carousel continua 100vw — durante o slide a imagem
     "sai" pela borda do viewport, nao pela borda do padding. */
  padding: 0 var(--gutter);
  box-sizing: border-box;
  transform: scale(0.98);
  transition: transform 0.6s ease;
}

.banner-slide.active {
  transform: scale(1);
}

.banner-slide.active img {
  filter: brightness(1);
}

/* Moldura "boca de tubo" (dono 2026-08-24): a MESMA das logos da regua de
   marcas — 3px de espessura e anel em gradiente de luminancia (a luz pega no
   topo e morre embaixo, como metal refletindo) — mas no formato retangular do
   banner, com o raio do card. Substitui o fio de 1.5px na cor da marca, que
   competia com a arte de dentro. Truque igual ao do .marca-chip: borda
   transparente + dois backgrounds (fundo no padding-box, anel no border-box).
   A projetada pra baixo vem junto; as duas INSET nao cabem aqui (em <img> o
   inset fica debaixo do conteudo) e vivem no ::after do slide, logo abaixo. */
/* Espessura do anel = o MESMO respiro que a foto do card tem ate a borda do
   card (dono 2026-08-24, homogeneidade). No card esse respiro e padding
   (--item-pad-left) + o 1px da borda; aqui o padding e --frame-w e o 1px vem da
   borda da propria imagem — some igual. Acompanha o breakpoint sozinho.
   --frame-w mora aqui pra as duas regras (foto e promo animada) nao poderem
   divergir. */
.banner-slide { --frame-w: var(--item-pad-left, 0.75rem); }

/* A moldura vive no WRAPPER, nao na arte (dono 2026-08-24, 2a rodada): quando
   era padding/border na propria imagem, a quina interna ficava a padding+borda
   da referencia e o notch, posicionado por calc, sobrava ~1px — dava pra ver um
   filete da arte ao lado do botao. No wrapper a conta desaparece: o containing
   block do notch JA e o padding-box, entao right/bottom = --frame-w cai exato na
   quina do desenho. Espessura = --item-pad-left + o fio de 1px da borda, a mesma
   soma que o card faz pra afastar a miniatura. */
.banner-art {
  padding: var(--frame-w);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  /* Luminancia MUITO leve no topo: 7% de branco na primeira faixa, morrendo em
     30% — de perto le como luz batendo na moldura, de longe nem aparece. */
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--bg2, #111111) 93%, white) 0%,
    var(--bg2, #111111) 30%,
    var(--bg2, #111111) 100%);
  box-shadow: 0 6px 11px -4px rgba(0,0,0,.6);
}
/* Arte dentro do quadro com o raio ANINHADO (quadro menos moldura). SEM fio
   proprio (dono 2026-08-24): o quadro ja tem o dele, e o segundo contorno
   aparecia como uma linha cinza sobrando por dentro da moldura. */
.banner-slide img,
.banner-slide .promo-animated {
  border: 0;
  padding: 0;
  border-radius: calc(var(--card-radius) - var(--frame-w));
}

/* SEM fio na silhueta do notch (dono 2026-08-24, 2a passada): o border-top/left
   de 1px e o anel nas curvas concavas foram desenhados pra "contornar" o
   recorte, mas de perto era justamente esse fio que aparecia como uma quina
   clara solta no topo e na lateral do botao — e a arte tambem ja tinha perdido
   o fio dela. Sem eles o notch fica igualzinho ao do card: so o vazado. */
.banner-slide img {
  width: 100%;
  height: auto;
  display: block;
  /* Raio ANINHADO (quadro menos moldura) — este bloco vem DEPOIS da regra que
     ja definia isso pra arte, e o `var(--card-radius)` que estava aqui vencia
     por ordem: as fotos ficavam com 30.4px (o raio do quadro) enquanto o
     espiral, sem esta regra, saia com os 22.3px corretos. Era a "borda interna
     levemente diferente" entre um banner e outro. */
  border-radius: calc(var(--card-radius) - var(--frame-w));
  filter: brightness(0.8);
  transition: filter 0.3s ease-in-out;
  aspect-ratio: 720 / 400;
  object-fit: cover;
}
/* Fio de luz interno + sombra no topo: completam a "boca de tubo" por cima da
   arte. inset lateral = padding do slide, pra casar exatamente com a imagem. */
.banner-slide { position: relative; }
.banner-slide::after {
  content: '';
  position: absolute;
  inset: 0 var(--gutter);
  border-radius: var(--card-radius);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.35),
    inset 0 -1px 2px rgba(255,255,255,.07);
  pointer-events: none;
  z-index: 2;
}
/* Badge e contador ficam ACIMA do anel (o ::after e o ultimo filho: sem isto
   ele passaria por cima do preco da promo). */
.banner-slide-badge, .banner-promo-count { z-index: 3; }

/* Promocao: banner clicavel com badge "Adicionar +R$ X,XX" */
.banner-slide--promo { position: relative; }
.banner-slide--promo .banner-slide-badge {
  position: absolute;
  bottom: 0.75rem;
  /* +0.875rem compensa o padding lateral do .banner-slide, pra o inset direito
     bater com o de baixo EM RELACAO A IMAGEM (canto simetrico, 0.75rem nos dois). */
  right: calc(0.875rem + 0.75rem);
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 0.95rem;
  background: linear-gradient(180deg, var(--brand-2) 0%, var(--brand-1) 100%);
  color: #fff;
  font-family: var(--font);
  font-size: 1.08rem;        /* mesma fonte do scroll de categorias */
  font-weight: 500;          /* peso 500 como as pills */
  border-radius: 0.5rem;     /* mesmo radius do .qty-btn dos cards */
  box-shadow: 0 4px 14px var(--brand-1-glow), 0 0 0 1px rgba(0,0,0,0.2);
  pointer-events: none;
  white-space: nowrap;
  letter-spacing: 0.2px;
  z-index: 2;
  transition: transform 0.15s ease, filter 0.15s ease;
}
/* ─── Notch da promo: a quina côncava do card, no banner (dono 2026-08-24) ───
   Reusa .img-qty-notch INTEIRO (tamanho 3.05rem, respiro --notch-space, os dois
   filetes côncavos em ::before/::after, o "-" nascendo por cima do "+"). Aqui
   só muda o que é do banner: onde a quina fica e o raio dela.
   A cor vem de --card-bg — que neste contexto é a MESMA do anel do banner, então
   o corte parece continuação da moldura em vez de remendo.
   z-index 3: o espiral do .promo-animated é um ::before dentro dele; o notch é
   irmão posterior e precisa passar por cima pra "cavar" o desenho. */
/* Seletor com o .banner-slide--promo na frente DE PROPOSITO: o bloco do
   .img-qty-notch vive ~1000 linhas abaixo e, com a mesma especificidade,
   venceria estas regras (right/bottom/z-index/raio) pela ordem do arquivo. */
/* Wrapper da arte: o notch precisa de uma referencia que seja EXATAMENTE a
   imagem. Antes ele era posicionado por gutter + moldura, e o gutter do slide
   muda entre mobile e desktop (1/slide vs 3/slide) — no desktop a conta dava
   4px de erro lateral e aparecia um filete da arte ao lado do botao. */
.banner-art { display: block; line-height: 0; }
/* A ARTE tem o proprio wrapper: o notch e o badge se ancoram NELE, nao no
   quadro. Sem isso, com a gaveta aberta o quadro fica ~2.5x mais alto e os
   dois desciam junto — o "+" ia parar no rodape da gaveta. */
.banner-media { position: relative; display: block; line-height: 0; }

.banner-slide--promo .banner-qty-notch {
  /* --notch-space e --card-bg nascem no .item-img-wrap/.item (escopo do card);
     aqui nao existem, e sem eles o container perdia o respiro da curva e caia
     no fallback de cor. Redeclarados com os MESMOS valores — o anel do banner
     ja e --bg2, entao a curva sai na cor do proprio anel. */
  --notch-space: 0.6rem;
  --card-bg: var(--bg2, #111111);
  /* COLADO na quina, exatamente como no card (right/bottom: 0 — medido nele).
     O containing block agora e o .banner-media, que E a arte; descontar a
     moldura (ou mesmo 1px da borda) deixava um filete visivel entre o botao e o
     quadro. O notch tem borda propria, entao ele cobre o fio da arte naquele
     canto e a silhueta segue sem emenda. */
  right: 0;
  bottom: 0;
  z-index: 3;
  transition: opacity 0.35s ease;
}
.banner-slide--promo .banner-qty-notch .qty-btn--plus {
  /* Raio aninhado: o da arte e o do card menos a moldura — a quina do botao sai
     concentrica com a quina do banner, como acontece no card. */
  border-bottom-right-radius: calc(var(--card-radius) - var(--frame-w));
}
/* Slide fora de foco encolhe 2% (transform no .banner-slide) e levaria o notch
   junto, deformando o botao — melhor ele nao existir ali. */
.banner-slide:not(.active) .banner-qty-notch { opacity: 0; pointer-events: none; }

/* Badge de preço na esquerda: a quina direita agora é do notch. Ancorado no
   .banner-media (a arte), entao o unico desconto e o fio de 1px da borda. */
.banner-slide--promo .banner-slide-badge {
  right: auto;
  left: calc(1px + 0.75rem);
  bottom: calc(1px + 0.75rem);
  z-index: 3;
}

.banner-slide--promo:hover .banner-slide-badge { filter: brightness(1.08); transform: scale(1.03); }
.banner-slide--promo:active .banner-slide-badge { transform: scale(0.97); }

/* Contador no canto sup. direito do banner — mesmo espacamento (top/right) que o
   badge de valor tem no bottom/right. ~3x o .item-badge dos cards (banner e grande). */
.banner-slide--promo .banner-promo-count {
  position: absolute;
  /* Mesmo respiro em cima e na lateral (dono 2026-08-24) e ancorado no
     .banner-media, que E a arte — o calc com o padding do slide sobrou de
     quando o contador se media pelo slide inteiro. --notch-space e o mesmo
     respiro de quina que o notch e o badge do card usam. */
  top: var(--notch-space, 0.6rem);
  right: var(--notch-space, 0.6rem);
  z-index: 2;
  /* REDONDO (dono 2026-08-24): pill quadrada com raio nao era o pedido — e um
     contador, forma circular. min-width = height e o padding sai, senao dois
     digitos esticam o circulo em ovo. */
  width: 2.4rem;
  min-width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  background: var(--red);
  color: var(--bg2, #111111);
  font-size: 1.3rem;
  font-weight: 800;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.8);
  box-shadow: 0 0.2rem 0.5rem rgba(0,0,0,0.55);
  pointer-events: none;
}
.banner-slide--promo .banner-promo-count[hidden] { display: none; }

/* ─── Promo drawer (gaveta abaixo do banner) ─────────────────────────────
   Aparece quando user clica numa promocao. Mesma estrutura/estilo dos cards.
   Animacao via grid-template-rows 0fr → 1fr.
   Quando visivel: margin-top negativo tuck-a a gaveta atras do banner (overlap),
   reforcando a metafora de "gaveta saindo de tras". */
/* A gaveta agora vive DENTRO do quadro do banner (.banner-art), como o painel
   de opcoes vive dentro do card: o mesmo objeto cresce. Sumiram as margens que
   existiam pra ela "sair de tras" do banner — nao ha mais tras, e o
   grid-template-rows 0fr->1fr e exatamente a animacao do .acomp-wrap do card. */
.promo-drawer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease-in-out;
  position: relative;
  z-index: 1;
}
.promo-drawer.visible { grid-template-rows: 1fr; }
.promo-drawer-row {
  overflow: hidden;
  min-height: 0;
  width: 100%;
  /* O 1px de baixo NAO e respiro: a "borda" do .promo-drawer-inner e um
     box-shadow (0 0 0 1px), que desenha FORA da caixa — e este overflow:hidden
     (obrigatorio pra animacao 0fr->1fr do grid) comia exatamente essa linha na
     base. Com 1px de padding o contorno inteiro cabe dentro. (dono 2026-08-22) */
  padding: 0 0 1px;
  box-sizing: border-box;
}
/* Dentro do quadro a gaveta nao precisa de moldura propria (o quadro ja e a
   moldura) nem do padding-top que compensava o "sair de tras" do banner. */
.promo-drawer-inner {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  /* Respiro lateral = o MESMO do card: la o .acomp-inner soma 0.25rem ao padding
     do proprio .item; aqui soma os mesmos 0.25rem a moldura do quadro. Medido:
     12.9px no card, 12.9px aqui. (Com calc(1rem - moldura) dava 15.8 — 3px a
     mais que o card, e a lista nao batia com o resto do cardapio.) */
  padding: 0.5rem 0.25rem 0.2rem;
}
/* Vao banner→1o card = MESMO gap que separa um card do outro (.items gap:
   0.625rem no mobile, 0.75rem no desktop — a media query embaixo cobre o 2o). */
body.has-banner #main > .sec:first-of-type { padding-top: 0.625rem; }
/* O .item-row do CARD e row-reverse porque la o DOM e img->info (inverter poe
   o texto na esquerda e a foto na direita). No drawer o DOM ja e info->qty,
   entao o reverse jogava os botoes +/- pra ESQUERDA, fora do padrao de todo o
   resto do cardapio. Aqui a direcao volta ao normal. (dono 2026-08-22) */
.promo-drawer-inner .item-row { padding: 0.25rem 0; flex-direction: row; }
/* Nome e rádio-relógio CENTRALIZADOS no quadro (dono 2026-08-24): sem a foto e
   sem o +/- na linha (o notch assumiu), a coluna de texto ocupa a largura toda —
   encostados na direita, como estavam, ficavam tortos em relacao a lista. O
   padding-left proprio saiu pelo mesmo motivo: o respiro vem do inner. */
.promo-drawer-inner .item-info { flex: 1; padding-left: 0; text-align: center; }
/* display:block + largura total: como inline-block o elemento encolhia pro
   tamanho do texto e o "centro" era o da CAIXA, nao o do quadro (media: 76.8px
   de folga a esquerda contra 15.8 a direita). */
.promo-drawer-inner .item-name { display: block; width: 100%; text-align: center; }
.promo-drawer-inner .item-price { margin-left: auto; margin-right: auto; }
.promo-drawer-inner .item-qty {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
/* Sem padding lateral proprio: quem da o respiro e o .promo-drawer-inner, como
   no card e o .acomp-inner. Tinha 0.625rem de um lado e 0.25rem do outro — a
   lista de opcoes ficava torta em relacao ao nome e ao preco. */
.promo-drawer-acomp {
  margin-top: 0.25rem;
  padding: 0 0 4px;
}
/* Ar antes do 1o grupo e embaixo do titulo. Os valores do card (margin
   14.84/2.2, gap 0, padding da linha 1.48) sao os MESMOS aqui — conferido
   elemento a elemento. O que falta e contexto: no card a foto ocupa a lateral e
   empurra o painel, dando 61px entre o preco e o 1o titulo; na gaveta, sem foto,
   sobrava 18px e o titulo colava no radio-relogio. Estes dois valores repoem
   esse ar sem mexer no card. */
.promo-drawer-acomp .acomp-grp-hdr:first-of-type { margin-top: 1.7rem; }
/* Respiro maior que o do card DE PROPOSITO (dono 2026-08-24): aqui o titulo tem
   a largura toda do quadro e a lista corre logo abaixo, sem a foto pra quebrar o
   bloco — com o mesmo 0.15rem do card, label e checkbox colavam. */
.promo-drawer-acomp .acomp-grp-hdr { margin-bottom: 0.8rem; }
/* Idem no topo do 2o grupo em diante ("Extra do dia"): mais folga em relacao a
   ultima opcao do grupo anterior, senao a label le como parte da lista de cima. */
.promo-drawer-acomp .acomp-grp-hdr + .acomp-list ~ .acomp-grp-hdr,
.promo-drawer-acomp .acomp-grp-hdr:not(:first-of-type) { margin-top: 1rem; }
/* Respiro embaixo da ultima opcao igual ao do card (12.1px medidos la). */
.promo-drawer-inner { padding-bottom: 0.35rem; }
/* Tabs do drawer identicas aos cards: divisor de cima (spotlight cola aqui) +
   mesmo margin-bottom. Cor = var(--divider-faint), igual nav de categorias. */
.promo-drawer-acomp .acomp-tabs {
  margin-bottom: 0.625rem;
  border-top: 1px solid var(--divider-faint);
}

/* Toast de confirmacao de adicionar promocao */
.promo-toast {
  position: fixed;
  bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.1rem;
  background: linear-gradient(180deg, var(--brand-2) 0%, var(--brand-1) 100%);
  color: #fff;
  font-family: var(--font);
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: 999px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.4), 0 0 0 1px rgba(0,0,0,0.2);
  z-index: 9000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  max-width: calc(100vw - 2rem);
}
.promo-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Desktop: 3 slides INTEIROS visiveis ao mesmo tempo, cada um 1/3 da viewport.
   Altura do banner reduz proporcionalmente (aspect-ratio 720/400 preservado).
   Container .banner-carousel continua 100vw. */
@media (min-width: 720px) {
  .banner-carousel {
    /* 3 slides equilibrados (1/3 viewport cada). Altura do banner reduz
       proporcionalmente — aspect-ratio 720/400 preservado. */
    --slide-pct: 33.333;
    /* Mask de fade-pra-transparente removida (pedido do usuário 2026-08-17:
       "tire a transparência lateral... mantenha normal") — as laterais não
       somem mais nas pontas, ficam totalmente visíveis. */
  }
  .banner-slide {
    flex: 0 0 33.333%;
    padding: 0 0.5rem;
  }
  /* Vizinhos: leve escurecida dos 2 lados, SEM blur (pedido do usuário
     2026-08-17: era brightness(0.4)+blur(2px), escurecimento forte demais
     e desfocado — "troca o transparente por um leve escurecido lateral
     dos 2 lados"). */
  .banner-slide:not(.active) img {
    filter: brightness(0.75);
    transition: filter 0.4s ease;
  }
}

/* ===== Horario ===== */
.horario {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--surface);
  font-size: var(--fs-sm);
  color: var(--text2);
  font-weight: 600;
}

.horario-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--green);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.horario-sep {
  color: var(--text3);
}

/* ===== Loading ===== */
.loading {
  text-align: center;
  padding: 4rem 1rem;
  font-size: var(--fs-lg);
  color: var(--text3);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════
   FILTER TABS (dentro do header, estilo Mercado Livre)
   ═══════════════════════════════════════════════════════════════════ */
.hdr-filters {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  position: relative;
  border-top: 1px solid var(--divider-faint);
  /* Linha de baixo igual a de cima (dono 2026-08-24): separa o nav dos cards
     quando o header sticky passa por cima deles. Antes essa linha so existia
     nos tenants COM regua de marcas — era a border-top do .hdr-marcas — e o
     ventura, sem regua, ficava sem nada. Agora e do proprio nav, vale pra
     todos, e a regua perdeu a border-top pra nao dobrar no deposito. */
  border-bottom: 1px solid var(--divider-faint);
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
}
.hdr-filters::-webkit-scrollbar { display: none; }

/* ─── DUAL PRICING toggle (PIX/Dinheiro vs Cartão) ───────────────────── */
.dual-pay-bar {
  display: none;
  gap: 0.5rem;
  padding: 0.625rem 1rem 0.75rem;
  border-top: 1px solid var(--divider-faint);
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
}
body.dual-pricing-on .dual-pay-bar { display: flex; }
.dual-pay-opt {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  background: transparent;
  border: 1px solid var(--divider-faint);
  border-radius: 0.625rem;
  color: var(--text-muted);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, transform .15s;
}
.dual-pay-opt:hover { color: var(--text); }
.dual-pay-opt:active { transform: scale(0.97); }
.dual-pay-opt.active {
  background: var(--brand-1, var(--accent, #f97316));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 14px -4px var(--brand-1, var(--accent, #f97316));
}
.dual-pay-opt svg { flex-shrink: 0; }

/* Card: 2 preços inline */
.price-dual {
  display: inline-flex;
  align-items: baseline;
  gap: 0.375rem;
  flex-wrap: wrap;
}
.price-dual .price-main {
  font-weight: inherit;
  color: inherit;
}
.price-dual .price-alt {
  font-size: 0.75em;
  color: var(--text-muted);
  opacity: 0.85;
  cursor: pointer;
}
.price-dual .price-alt:hover { opacity: 1; text-decoration: underline; }
.price-dual .price-alt-tag {
  font-size: 0.85em;
  opacity: 0.7;
}

.filter-btn {
  position: relative;
  padding: 0.75rem 0.875rem;
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--text-muted);  /* cinza suave por default */
  font-family: var(--font);
  font-size: 1.08rem;
  font-weight: 500;
  letter-spacing: 0.2px;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.18s ease;
  flex-shrink: 0;
}
.filter-btn:hover { color: var(--text-muted-strong); }
.filter-btn:active { transform: scale(0.97); }

/* Divider vertical entre botoes (modern UI thin separator) */
.filter-btn + .filter-btn::before {
  content: "";
  position: absolute;
  left: 0;
  top: 28%;
  bottom: 28%;
  width: 1px;
  background: rgba(255,255,255,0.06);
}

/* Categoria ativa: texto branco + indicador na base */
.filter-btn--active {
  color: var(--text);
}

/* Indicador trapezoidal animado na cor da marca (base) */
.filter-indicator {
  position: absolute;
  bottom: -1px;          /* compensa borda do container pra ficar 100% flush */
  left: 0;
  height: 4px;
  width: 0;
  background: var(--brand-1);
  opacity: 0;
  border-radius: 4px 4px 0 0;
  clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%);
  transition:
    transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    width 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.2s ease;
  will-change: transform, width;
  pointer-events: none;
  /* sem box-shadow Y-offset pra nao "levantar" o indicador */
}

/* Spotlight no topo: nuvenzinha de luminancia branca sobre a categoria ativa.
   Gradient vertical branco -> transparent + blur forte que dissolve o formato
   da caixa, virando uma nuvem difusa. */
.filter-spotlight {
  position: absolute;
  top: -3px;
  left: 0;
  height: 10px;
  width: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 100%);
  border-radius: 50%;   /* arredondamento ajuda a quebrar o formato retangular */
  opacity: 0;
  filter: blur(9px);    /* blur moderado: dissolve o formato sem espalhar demais */
  transition:
    transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    width 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.2s ease;
  will-change: transform, width;
  pointer-events: none;
}

/* Mobile: duracao maior + overshoot um pouco mais pronunciado pra o easeOutBack
   ficar visivel mesmo sem hover-preview (so anima no tap). */
@media (max-width: 719px) {
  .filter-indicator,
  .filter-spotlight {
    transition:
      transform 0.6s cubic-bezier(0.34, 1.7, 0.5, 1),
      width 0.6s cubic-bezier(0.34, 1.7, 0.5, 1),
      opacity 0.2s ease;
  }
}

/* "Ver mais" pill */
.filter-btn--more {
  color: var(--brand-1);
  font-weight: 700;
  flex-shrink: 0;
}
.filter-btn--more::after {
  content: " ▾";
  font-size: 0.8em;
}
/* DESKTOP: sticky no fim visivel do scroll (mouse nao rola horizontal) */
@media (min-width: 720px) {
  .filter-btn--more {
    position: sticky;
    right: 0;
    background: var(--bg2);
    box-shadow: -8px 0 12px -4px var(--bg2), -16px 0 16px -8px var(--bg2);
    z-index: 2;
  }
}

/* MOBILE: fade via elemento sticky `.filter-fade` injetado no JS.
   opacity transitionable + sticky garante posicionamento no edge direito visivel. */
.filter-fade {
  position: sticky;
  right: 0;
  align-self: stretch;
  width: 64px;
  margin-left: -64px;       /* sobrepoe pills (nao ocupa espaco proprio) */
  background: linear-gradient(to right, transparent 0%, var(--bg2) 100%);
  pointer-events: none;
  flex-shrink: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
  display: none;            /* default oculto — habilita no mobile via media */
}
@media (max-width: 719px) {
  .filter-fade { display: block; }
  /* Fade ativo: tem overflow E "Ver mais" ainda fora da view */
  .hdr-filters.has-overflow:not(.at-end) .filter-fade { opacity: 1; }
}

/* ===== Sidebar de categorias (overlay vertical, estilo Mercado Livre) ===== */
.cat-sidebar {
  position: fixed; inset: 0; z-index: 5000;
  opacity: 0; pointer-events: none;
  transition: opacity 0.24s ease;
}
.cat-sidebar.visible { opacity: 1; pointer-events: auto; }
.cat-sb-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
}
.cat-sb-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(86vw, 22rem);
  background: var(--bg2);  /* mesma cor do header */
  border-left: 1px solid var(--divider-faint);  /* mesmo tom dos dividers do header */
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
  box-shadow: -8px 0 32px rgba(0,0,0,0.5);
}
.cat-sidebar.visible .cat-sb-panel { transform: translateX(0); }
.cat-sb-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.25rem 0.8rem;
  border-bottom: 1px solid var(--divider-faint);  /* mesmo divider do header */
  background: var(--bg2);
  position: absolute; top: 0; left: 0; right: 0;
  z-index: 1;
  box-sizing: border-box;
}
.cat-sb-title { margin: 0; font-size: 1.08rem; font-weight: 700; letter-spacing: -0.02em; }
.cat-sb-close {
  width: 2.2rem; height: 2.2rem; border-radius: 0.55rem;
  background: transparent; border: none; color: var(--text2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.cat-sb-close:hover { background: var(--divider-faint); color: var(--brand-1); }
.cat-sb-list {
  position: absolute;
  top: 4rem;    /* ~altura do .cat-sb-hdr (padding 1.1+0.8 + linha 1.08*1.2 ~ 3.2rem + borda) */
  left: 0; right: 0; bottom: 0;
  overflow-y: auto;
  padding: 0.5rem 0 1.5rem;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.cat-sb-item {
  display: flex; align-items: center; gap: 0.75rem;
  width: 100%; padding: 0.85rem 1.25rem;
  background: transparent; border: none;
  color: var(--text-muted);  /* mesmo cinza suave das pills inativas */
  text-align: left;
  border-radius: 0; cursor: pointer;
  font-family: var(--font);
  font-size: 1.08rem;  /* mesma fonte das categorias do scroll */
  font-weight: 600;
  letter-spacing: 0.2px;
  position: relative;
  transition: color 0.15s ease, background 0.15s ease;
}
.cat-sb-item + .cat-sb-item::before {
  content: ""; position: absolute; top: 0; left: 1.25rem; right: 1.25rem;
  height: 1px; background: var(--divider-faint);  /* divider sutil entre items */
}
.cat-sb-item:hover { color: var(--text-muted-strong); }
.cat-sb-item--active {
  color: var(--text);
  box-shadow: inset 3px 0 0 var(--brand-1);
  background: var(--brand-1-subtle);
}
.cat-sb-name { flex: 1; }
.cat-sb-count {
  font-size: 0.78rem; color: var(--text3);
  background: var(--divider-faint);
  padding: 0.15rem 0.5rem;
  border-radius: 100px; flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.cat-sb-item--active .cat-sb-count { background: var(--brand-1); color: #fff; }

/* ===== Sections ===== */
.sec {
  /* Padding lateral identico ao do header + max-width 1000px centralizado
     pra cards alinharem perfeitamente com header */
  padding: 0.75rem var(--gutter) 0.5rem;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
}
/* Sec logo apos o banner: padding-top minimo de 2px.
   2px compensa visualmente a borda vermelha do banner que so e visivel no
   bottom (no top a borda fica oculta sobre o gradient de mesma cor). */
/* padding-top:0.625rem definido com a regra do .promo-drawer pra gap consistente */

.sec-hdr {
  display: flex;
  align-items: center;
  justify-content: center;  /* "Resultado para ..." centralizado na pagina */
  gap: 0.625rem;
  /* Igualado ao padding-top do .sec (0.75rem, espaço do banner até aqui) —
     pedido do usuário 2026-08-17: "mesmo espaçamento embaixo que de cima".
     Era 1.2rem, maior que o espaço de cima. */
  margin-bottom: 0.75rem;
}

/* Emoji do header da secao (categorias dinamicas) */
.sec-emoji {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
}

.sec-title {
  font-size: 1.08rem;   /* mesmo tamanho da fonte das categorias (.filter-btn) */
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.2px;
}

/* Contador inline ("(3 itens)") como continuidade do label de busca */
.sec-count {
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: normal;
  margin-left: 0.35rem;  /* respiro entre a frase e "(N itens)" — colava direto no fim */
  display: inline-block;
}

.sec-sub {
  font-size: var(--fs-sm);
  color: var(--text3);
  font-weight: 600;
  margin-left: auto;
}

/* ===== Item cards ===== */
.items {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.item {
  /* Cor ÚNICA do card (dono 2026-08-20): #111111 = background do header,
     em QUALQUER estado (recolhido/expandido/no carrinho). O notch da
     miniatura usa a mesma var pra curva côncava não destoar. */
  --card-bg: var(--bg2, #111111);
  background: var(--card-bg);
  /* Borda REAL de 1px: anima a cor cinza->vermelho */
  border: 1px solid var(--border);
  /* Raio do card = raio da miniatura + gap lateral (regra de raio aninhado:
     externo = interno + folga) — curvas concêntricas perfeitas. */
  border-radius: var(--card-radius);
  /* Espelhado: 3px do lado da FOTO (direita), respiro do lado do texto. */
  padding: 3px 3px 3px 0.75rem;
  /* Espelha o padding-left acima — referencia unica pra quem precisa saber
     "quanto e o respiro esquerdo do card" sem duplicar o valor (usado pela
     1a miniatura ordinaria). Reescrita no breakpoint mobile abaixo. */
  --item-pad-left: 0.75rem;
  /* Redeclarada AQUI de proposito: custom property com var() dentro e
     resolvida no elemento que a DECLARA — a do :root nao enxerga o
     --item-pad-left do card e cairia no fallback. */
  --radius-nested: calc(var(--card-radius) - var(--item-pad-left));
  /* Âncora do selo de marca (absoluto no topo-esquerda) */
  position: relative;
  transition: border-color 0.2s ease-in-out, background 0.2s ease-in-out,
    opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
/* Modo foco (dono 2026-08-20): ao clicar "Não" no aviso de option_group sem
   marcar, todo card vira fundo — só o alvo (.spotlight-target) fica aceso,
   com glow na cor da marca. Sai sozinho quando marca a opção que faltava, ou
   clicando fora do card em destaque. Classe .spotlight-mode fica no #main —
   header/carrinho ficam de fora de proposito (nao trava a navegacao geral). */
#main.spotlight-mode .item:not(.spotlight-target) {
  opacity: 0.28;
  filter: grayscale(55%);
  pointer-events: none;
}
#main.spotlight-mode .item.spotlight-target {
  position: relative;
  z-index: 5;
  transform: scale(1.015);
  box-shadow: 0 0 0 2px var(--brand-1), 0 20px 50px rgba(0,0,0,0.6), 0 0 32px var(--brand-1-glow);
}
/* Selo de marca DESACOPLADO do título (dono 2026-08-20): sozinho no canto
   superior esquerdo do card, mesmo respiro em cima e à esquerda. Só no card
   delivery — na loja virtual segue inline. */
.item .item-marca {
  /* Na pilha da direita, junto do nome e do rádio-relógio (dono 2026-08-20):
     filho flex da .item-info (align-items:flex-end alinha à direita).
     1.4x do tamanho base e topo CRAVADO no topo da miniatura: o margin-top
     negativo cancela o padding-top de 0.5rem da .item-info — as duas bordas
     superiores (selo e foto) ficam na mesma linha (dono 2026-08-20). */
  width: 2.1rem;
  height: 2.1rem;
  padding: 0.3rem;
  margin-right: 0;
  margin-top: -0.5rem;
  vertical-align: initial;
}
.item.in-cart {
  /* TESTE 2026-08-04 (Rafael): borda NÃO muda de cor ao entrar no carrinho —
     o card só expande, mantendo a mesma borda suave do estado recolhido.
     Pra voltar ao anterior, reative a linha abaixo.
     border-color: var(--red); */
  /* Cor NÃO muda mais entre estados (dono 2026-08-20): sempre --card-bg. */
}

.item-row {
  display: flex;
  /* Espelhado (dono 2026-08-20): DOM segue img->info, mas o visual é
     info à ESQUERDA e foto (com recorte + botão) à DIREITA do card. */
  flex-direction: row-reverse;
  /* stretch: a coluna de texto ganha a altura da miniatura — a placa de preço
     (margin-top:auto) encosta na MESMA linha de base do botão/foto. */
  align-items: stretch;
  gap: 0.75rem;
}

/* Acompanhamentos inline (prato_dia) */
.acomp-wrap {
  display: grid;
  grid-template-rows: 0fr;
  /* Curva estilo Apple (iOS sheet): aceleracao no inicio + desaceleracao longa */
  transition: grid-template-rows 0.42s cubic-bezier(0.32, 0.72, 0, 1);
}
.acomp-wrap.visible { grid-template-rows: 1fr; }
.acomp-inner {
  overflow: hidden;
  min-height: 0;
  opacity: 0;
  transition: opacity 0.32s cubic-bezier(0.32, 0.72, 0, 1),
              padding-bottom 0.42s cubic-bezier(0.32, 0.72, 0, 1);
  /* Respiro do painel = o mesmo da miniatura→preço/título (.item-row gap),
     medido a partir da BORDA do card. Card ESPELHADO (2026-08-20): agora o
     .item tem 0.75rem à esquerda e 3px à direita — desconto invertido. */
  padding-left: calc(1rem - 0.75rem);
  padding-right: calc(1rem - 3px);
  /* padding-bottom colapsa JUNTO com o grid (0 quando fechado). Sem isso ele
     deixava 4px residuais que o grid 0fr não zera → salto/flick ao remover o
     elemento no fim do collapse (debugado 2026-07: collapse parava em 4px). */
  padding-bottom: 0;
}
/* Rodapé do painel: 0.75rem (era 4px — última opção colava no fim do card) */
.acomp-wrap.visible .acomp-inner { opacity: 1; padding-bottom: 0.2rem; }
/* Miniaturas sem option_groups (.acomp-tabs--no-divider): esse 0.75rem some.
   Ele empilhava com o padding-bottom do PRÓPRIO .item (a folga uniforme do
   card) — dois respiros de fechamento pro mesmo lugar — e por isso a miniatura
   embaixo ficava mais afastada do card do que a da esquerda (que eu já
   cancelo via margin-left pra bater só com a folga do .item, uma vez só). */
.acomp-wrap.visible .acomp-inner:has(.acomp-tabs--no-divider) { padding-bottom: 0; }

/* NOTA: classe legada, sem uso no markup atual — o título dos grupos é
   .acomp-grp-title (ver bloco lá embaixo). Mantida por segurança. */
.acomp-label {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0.625rem 0 0.375rem 0;
}

.acomp-list {
  display: flex;
  flex-direction: column;
}

.acomp-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.1rem 0;
  /* Alvo de toque em px ABSOLUTO, nao rem: 48px e medida de dedo (Material),
     nao de tipografia. Com a raiz fluida (3.5vw, 11-15px) o antigo 2.5rem
     virava ~28px num celular de 320px — metade do minimo recomendado.
     44px = piso do HIG da Apple; foi ate onde deu pra apertar sem perder o alvo. */
  min-height: max(2.75rem, 44px);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Divisores entre checkboxes removidos (visual mais limpo) */

/* Descricao completa na expansao do card — full width, divisor suave ABAIXO
   (entre a descricao e a label do primeiro grupo de opcoes) */
.item-desc-full {
  font-size: 0.92rem;
  font-family: 'P22MackinacPro', var(--font);
  font-weight: 700;      /* Mackinac Bold (100 caía no arquivo Book) */
  color: #909090;        /* legenda do item — mais clara que .acomp-name desde 08-21 */
  line-height: 1.5;
  text-align: center;    /* legenda centralizada no container */
  padding: 0.85rem 0 0.85rem;  /* horizontal vem do .acomp-inner (alinha com as opções) */
  border-bottom: 1px solid var(--divider-faint);  /* mesma cor da borda do nav de categorias (.hdr-filters) */
}
/* Sem option_groups depois: nenhum dos 2 divisores aparece (espelha .acomp-tabs--no-divider).
   padding-bottom tambem zera aqui — senao soma com o padding-bottom do
   .acomp-inner (0.75rem) e sobra um respiro dobrado sem nada pra separar. */
.item-desc-full--no-divider {
  border-bottom: none;
  padding-bottom: 0;
}

.acomp-check {
  /* O check PREENCHE a linha menos o respiro lateral (dono 2026-08-24): assim a
     folga que sobra em cima e embaixo dele e exatamente a mesma que ele tem ate
     a borda do card — vertical e horizontal iguais, sem tocar no min-height de
     44px da linha, que e alvo de toque (HIG) e nao pode encolher.
     respiro = padding do card + o fio de 1px + os 0.25rem do painel. */
  --row-h: max(2.75rem, 44px);
  --check-respiro: calc(var(--item-pad-left, 0.75rem) + 1px + 0.25rem);
  width: calc(var(--row-h) - var(--check-respiro));
  height: calc(var(--row-h) - var(--check-respiro));
  /* Raio derivado do card (--radius-nested), igualzinho a miniatura de unidade
     logo acima — os dois vivem no mesmo painel e raios avulsos brigavam. */
  border-radius: min(var(--radius-nested), 35%);
  border: 2px solid var(--border);
  background: var(--surface2);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* O "v" e DESENHADO (2026-08-24), nao mais o glifo &#10003;: como texto ele
     dependia da fonte ter o caractere — onde nao tem, o cliente ve um quadrado
     tofu — e a espessura era refem do peso disponivel. Agora e um L rotacionado
     em ::after, com lado e traco proporcionais ao quadrado: encorpa e cresce
     junto, em qualquer fonte. O glifo do HTML fica escondido (font-size 0),
     mantido pra leitor de tela e pra nao mexer no markup. */
  --check-lado: calc(var(--row-h) - var(--check-respiro));
  font-size: 0;
  position: relative;
  color: transparent;
  transition: all 0.15s;
}
/* O traco vem de um SVG mascarado, nao mais de duas bordas rotacionadas: o L
   girado fechava as pontas em angulo reto e as quinas destoavam da tipografia
   do cardapio. Aqui as duas pontas e o vertice sao arredondados (linecap e
   linejoin round) e a perna longa tem uma leve curva, como um traco de caneta —
   e a cor continua sendo CSS (background), entao segue o tema. */
.acomp-check::after,
.extra-check::after {
  content: '';
  width: calc(var(--check-lado, 26px) * 0.66);
  height: calc(var(--check-lado, 26px) * 0.66);
  background: transparent;
  -webkit-mask: url("data:image/svg+xml,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M4.6 12.9 C6.6 14.2 8.4 15.9 9.9 17.8 C12.6 13.2 15.9 9 19.6 5.7'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M4.6 12.9 C6.6 14.2 8.4 15.9 9.9 17.8 C12.6 13.2 15.9 9 19.6 5.7'/></svg>") center / contain no-repeat;
  transition: background-color 0.15s;
}
.acomp-row.checked .acomp-check::after,
.extra-row.checked .extra-check::after { background: var(--bg2, #111111); }

.acomp-row.checked .acomp-check {
  background: var(--red);
  border-color: var(--red);
  /* "v" no grafite do container (dono 2026-08-24): branco sobre a cor da marca
     tinha menos contraste do que o proprio fundo escuro do card — e amarra o
     check ao resto da peca em vez de virar um terceiro tom. */
  color: var(--bg2, #111111);
}

.acomp-check, .extra-check {
  position: relative;
}

.check-firework {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 50%;
  pointer-events: none;
  z-index: 999;
  animation: check-fw 0.5s ease forwards;
}

@keyframes check-fw {
  0% {
    opacity: 1;
    box-shadow:
      0 0 0 -2px var(--red),
      0 0 0 -2px var(--red),
      0 0 0 -2px var(--red),
      0 0 0 -2px var(--red),
      0 0 0 -2px var(--red),
      0 0 0 -2px var(--red);
  }
  30% { opacity: 1; }
  100% {
    opacity: 0;
    box-shadow:
      0 -2rem 0 0 var(--red),
      1.7rem -1rem 0 0 var(--red),
      1.7rem 1rem 0 0 var(--red),
      0 2rem 0 0 var(--red),
      -1.7rem 1rem 0 0 var(--red),
      -1.7rem -1rem 0 0 var(--red);
  }
}

.acomp-name {
  font-size: var(--fs-lg);
  font-weight: 500;   /* afinado (era 600) — mantém abaixo de .item-name */
  /* Família do sub-nome do item (.item-spec), mas 28% de branco em vez de 14%:
     na cor exata do sub-nome o contraste caía pra 1.85:1 e estas NÃO são
     legenda — são controles que a pessoa precisa enxergar pra tocar. 28% põe
     em 3:1, o piso do WCAG pra elemento de interface. Mesma expressão (segue
     o tema junto), só o teor de branco muda. O ícone usa currentColor. */
  color: color-mix(in srgb, var(--surface2), #fff 28%);
  flex: 1;
  transition: color 0.15s;
}
.acomp-row.checked .acomp-name {
  color: #f0f0f0;
}

/* ─── Icone opcional da opcao ───────────────────────────────────────────────
   Entra como mask com background currentColor: assume o tom exato do texto ao
   lado e acompanha a mudanca de cor quando a opcao e marcada. Medido em `em`
   pra escalar junto da fonte (o cardapio usa rem fluido). */
.opt-icone {
  display: inline-block;
  /* Caixa mais alta que larga porque os icones sao verticais (lata, copo) e o
     mask usa `contain`: cada desenho se encaixa na altura e a largura sobra
     conforme a proporcao dele. */
  width: 2.1em;
  height: 2.4em;
  margin-right: 0.45em;
  vertical-align: -0.85em;
  background-color: currentColor;
  flex: none;
}

.acomp-aviso {
  margin-top: 0.5rem;
  font-size: var(--fs-sm);
  color: var(--yellow, #facc15);
  opacity: 0.8;
}

.item-img {
  /* 1.3x e depois +1.2x (dono 2026-08-20): miniatura maior, botão FIXO em 3.05rem */
  width: 14.6rem;
  height: 14.6rem;
  /* Mesmo raio da curva côncava do notch — família de raios única */
  border-radius: 1.5rem;
  object-fit: contain;   /* imagem 100% visivel, encaixada no quadrado (nao corta/zoom) */
  padding: 0.25rem;      /* respiro pra nao colar nas bordas */
  flex-shrink: 0;
  background: var(--surface2);
  display: block;
  /* Fade-in: placeholder cinza → imagem entra suave (mata o "pipocar" do lazy).
     .loaded é adicionado no onload (ou no sweep pós-render p/ imagem de cache). */
  opacity: 0;
  transition: opacity 0.35s ease;
}
.item-img.loaded { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .item-img { transition: none; }
}

.item-img-placeholder {
  width: 14.6rem;
  height: 14.6rem;
  border-radius: 1.5rem;
  background: var(--surface2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--text3);
  flex-shrink: 0;
}

.item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-top: 0.5rem; /* topo do titulo alinha com topo do botao de menos */
  /* Espelhado (dono 2026-08-20): texto e preço LCD alinham à DIREITA,
     encostando no container da miniatura. */
  align-items: flex-end;
  text-align: right;
}

.item-name {
  font-size: 1.2rem;
  font-weight: 600;   /* afinado (era 700) — continua mais grosso que .acomp-name */
  line-height: 1.2;
  /* (Selo saiu do canto absoluto — sem reserva; largura total pro texto.) */
}
/* Linha de embalagem/medida sob o nome (vertical depósito, dono 2026-08-20):
   splitNomeSpec (app.js) separa "Brahma Chopp Claro" de "Pack 8 Latas 350ml".
   0.8x do nome e na MESMA cor da bandeja da miniatura (--surface2) — o eco de
   cor amarra a spec à placa da foto; o contraste baixo é PROPOSITAL: é
   informação de segundo plano, sussurrada. */
.item-spec {
  display: block;
  font-size: 0.9em;   /* 0.8 encolheu demais (dono 2026-08-20) */
  font-weight: 700;
  line-height: 1.2;
  margin-top: 0.18em;
  /* Um fio mais acesa que a bandeja (dono 2026-08-20): mesma matéria-prima
     (--surface2, segue o tema), com +14% de branco pra descolar do card. */
  color: color-mix(in srgb, var(--surface2), #fff 14%);
}

.item-desc {
  font-size: 0.9rem;
  font-weight: 100;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.item-price {
  /* Placa DINÂMICA (dono 2026-08-20): ocupa a largura toda da coluna de texto
     — folga esquerda (padding do card, 0.75rem) = folga direita (gap até a
     miniatura, 0.75rem). Dígitos escalam com clamp; margin-top:auto desce a
     placa pro pé da coluna, alinhando a base com o botão/miniatura. */
  font-size: clamp(calc(var(--fs-lg) * 1.2), 4.6vw, calc(var(--fs-lg) * 1.9));
  font-weight: 800;
  color: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: auto;
  min-height: 3.5rem;
  padding: 0.55rem 0.8rem;
  /* Mesmo raio da miniatura principal (.item-img = 1.5rem) nas quatro quinas —
     dono 2026-08-21. Antes as outras três eram 1rem e só a inferior esquerda
     (a que ancora no canto do card) abria pra 1.5rem; agora a placa inteira
     fala a mesma língua da foto ao lado. */
  border-radius: 1.5rem;
  box-sizing: border-box;
}
/* Ghost dos segmentos acompanha a centralização da placa cheia */
.item-price::before {
  display: flex;
  align-items: center;
  justify-content: center;
}

.item-unavail {
  font-size: var(--fs-sm);
  color: var(--text3);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 0.25rem;
}

/* Image wrapper com badge. --notch-space = UNICO valor de respiro pra tudo
   que mora na quina da miniatura (pill de qtd, curva côncava do notch,
   gap entre +/-) — homogeneo de proposito, nao duplicar numero solto. */
.item-img-wrap {
  position: relative;
  flex-shrink: 0;
  /* A miniatura inteira e o gatilho de adicionar (mesma acao do "+"): cursor e
     um toque de press pra dizer isso sem texto. */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease;
  --notch-space: 0.6rem;
  /* No desktop o wrap fica mais alto que a propria foto (esticado pra
     acompanhar a coluna de texto via align-items:stretch do .item-row) — a
     foto, em block flow normal, ancora no TOPO, sobrando espaco embaixo. O
     notch (+/-) gruda no fundo do WRAP, nao da foto, entao ficava "flutuando"
     alguns px abaixo da foto, quebrando a curva concava aninhada. Flex
     column + flex-end ancora a foto no fundo do wrap = fundo da foto sempre
     bate exato com o fundo do notch. */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.item-badge {
  position: absolute;
  top: var(--notch-space);
  left: var(--notch-space);   /* lado esquerdo da miniatura, mesmo padding de antes (--notch-space) */
  min-width: 1.65rem;   /* 1.375rem * 1.2 */
  height: 1.65rem;
  padding: 0 0.36rem;
  background: var(--red);
  color: var(--bg2, #111111);
  font-size: 0.9rem;    /* 0.75rem * 1.2 */
  font-weight: 800;
  border-radius: 50%;   /* redondo */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;           /* acima do .img-qty-notch (2) — a curva nao pode cobrir o pill */
  border: 1px solid rgba(255,255,255,0.8);
  box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.5);
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  transform-origin: center;
}

.item-badge.pulse {
  transform: scale(2);
  box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.8);
}

/* Qty controls */
.item-qty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
  padding-top: 0.5rem; /* topo do '-' alinha com topo do titulo */
}

.qty-btn {
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 0.5rem;
  border: 2px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  font-size: 1.5rem;
  font-weight: 800;
  font-family: var(--font);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.qty-btn:active {
  transform: scale(0.9);
}

.qty-btn--plus {
  /* Referência do dono (2026-08-19): squircle flat na cor do tenant com "+"
     preto grosso — sem neumorfismo. Radius ~32% da largura fecha o squircle. */
  background: var(--red);
  border-color: var(--red);
  color: #111;
  border-radius: 0.85rem;
  font-size: 1.9rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 6px 14px rgba(0,0,0,0.18);
}

.qty-btn--plus:active {
  background: var(--red-light);
}

.qty-btn--minus {
  background: var(--surface2);
  overflow: hidden;
  /* O "-" NÃO colapsa altura: o espaço dele fica sempre reservado, então o
     "+" mora fixo na parte de baixo da coluna (perto do rodapé do card) em
     vez de saltar pra quina superior quando o item sai do carrinho.
     Entrada/saída = só fade + micro-escala. */
  transition:
    opacity 0.22s ease,
    transform 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}
.qty-btn--minus.collapsed {
  opacity: 0;
  transform: scale(0.92);
  pointer-events: none;
}

/* ===== Checkbox items (guarnicao/acompanhamento) ===== */
.extras {
  margin-top: 0.75rem;
  padding: 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.extras-title {
  font-size: var(--fs-md);
  font-weight: 800;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.625rem;
}

.extra-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.extra-row + .extra-row {
  border-top: 1px solid var(--border);
}

.extra-check {
  --check-lado: 1.75rem;
  position: relative;
  font-size: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.375rem;
  border: 2px solid var(--border);
  background: var(--surface2);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  font-size: 1rem;
  color: transparent;
}

.extra-row.checked .extra-check {
  background: var(--red);
  border-color: var(--red);
  color: var(--bg2, #111111);
}

.extra-name {
  flex: 1;
  font-size: var(--fs-lg);
  font-weight: 600;
}

.extra-price {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--red);
}

/* ===== Divider ===== */
.sec-divider {
  height: 1px;
  background: var(--border);
  margin: 0.5rem 1rem;
}

/* ===== Cart bar ===== */
/* .cart e o container UNICO (barra + checkout, um objeto so — ver
   #resumo-ov abaixo). Ele so cuida de: fixar embaixo, empilhar .cart-bar
   + #resumo-ov em coluna, cor de fundo e a borda/sombra do conjunto. O
   layout horizontal da barra em si (que ANTES vivia aqui) foi pra
   .cart-bar. */
.cart {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg2);
  /* Sem border top/bottom: a "borda" e o drop-shadow do conjunto, que traca a
     silhueta da UNIAO (barra + plaqueta), como uma peca so moldada.
     drop-shadow segue o alpha (acompanha o ombro concavo), box-shadow nao. */
  filter:
    drop-shadow(0 0 1px rgba(255,255,255,0.18))       /* fio de borda claro (mais nitido), contorna a peca toda */
    drop-shadow(0 -12px 18px rgba(0,0,0,0.55));       /* separacao do conteudo que rola atras */
  z-index: 200;
  /* ===== Coreografia da plaqueta (2 estados) ===== */
  --plaque-h: 1.9rem;                       /* altura da plaqueta (largura = 5.4x via aspect-ratio) */
  --bz: cubic-bezier(0.32, 0.72, 0, 1);     /* mesmo bezier da expansao do card */
  --slide-dur: 0.42s;                        /* shape desliza lateral (~46px) */
  /* A barra percorre MUITO mais distância que o shape (altura inteira, ~98px).
     Com 0.36s ela ia a ~272px/s contra ~109px/s do shape — subida "seca" ao
     lado de um deslize fluido. 0.58s aproxima as velocidades percebidas,
     mantendo o mesmo bezier pra coreografia continuar da mesma família. */
  --rise-dur: 0.58s;                         /* barra sobe/desce (esconder/mostrar o carrinho) */
  --rise-settle: 0.29s;                      /* fallback: JS recalcula (metade do rise-dur) */
  --plaque-out: 0.18s;                       /* saida de conteudo da plaqueta = imediata */
  /* VAZIO->: barra DESCE imediato (delay 0). Plaqueta desce junto (filha). */
  transform: translateY(100%);
  transition: transform var(--rise-dur) var(--bz) 0s;
}
/* C/ ITEM->: barra SOBE so DEPOIS do shape deslizar (delay = slide-dur). */
.cart.visible {
  transform: translateY(0);
  transition: transform var(--rise-dur) var(--bz) var(--slide-dur);
}
.cart-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;   /* ancora a .cart-total-label (absolute) que era relativa ao .cart antigo */
  /* vertical: 1.7rem simetrico | horizontal: acompanha a borda dos cards
     (.sec max-width 1200px + 0.875rem de padding lateral) */
  padding: 1.7rem max(0.875rem, calc((100vw - 1200px) / 2 + 0.875rem));
  flex-wrap: wrap;
  flex-shrink: 0;   /* nunca encolhe quando #resumo-ov cresce abaixo dela */
}
/* Esquerda do cart: LCD eh o unico elemento no fluxo (centralizado vertical,
   mesma linha do botao Pagar). O count "X itens" fica como rotulo pequeno
   posicionado absoluto logo acima do LCD, sem empurrar ele pra baixo. */
.cart-info {
  position: relative;
  display: flex;
  align-items: center;
}
/* Plaqueta shape da TV (concavo dos 2 lados). Mesma cor da barra + drop-shadow
   do conjunto (.cart) = peca unica moldada, sem stroke. Dois estados via .visible:
   VAZIO = centralizada no bottom; C/ ITEM = deslizada a esquerda (metade sai da
   tela -> quina reta a esquerda, concavo so a direita). Largura = 5.4 * altura
   (aspect 900:166.67); o ombro esquerdo mede exatamente 1 altura -> deslizar
   translateX(-altura) esconde so o ombro esquerdo. */
.cart-total-label {
  position: absolute;
  left: 0;
  bottom: calc(100% - 1px);     /* base cola no topo da barra (overlap 1px, sem costura) */
  height: var(--plaque-h);
  aspect-ratio: 1040 / 166.67;   /* ombro esquerdo simetrico (250u=1.5 altura) + ombro direito alongado +160u pra caber a fonte "Total" 2x */
  z-index: 1;
  pointer-events: none;
  /* Exceção (regra abaixo): no fim da página, com o carrinho vazio, a
     plaqueta vira botão de "voltar ao topo". */
  /* VAZIO: centralizado na tela (left:0 + translateX pra metade do viewport).
     coef = (1040/166.67)/2 = 3.12 (metade da largura renderizada). */
  transform: translateX(calc(50vw - 3.12 * var(--plaque-h)));
  /* VAZIO-> : desliza pro centro quando a barra JA CHEGOU visualmente.
     O bezier (0.32,0.72,0,1) cobre 95.5% do trajeto em metade do tempo — a
     cauda restante move 4% e nao se ve. Esperar a duracao INTEIRA criava um
     tempo morto (~0.45s com rise-dur de 0.9s) antes do shape voltar.
     --rise-settle = metade do rise-dur (definido junto no app.js). */
  transition: transform var(--slide-dur) var(--bz) var(--rise-settle, var(--rise-dur));
}
/* C/ ITEM: deslizado a esquerda (esconde o ombro esquerdo = 250/166.67 = 1.5 altura). */
.cart.visible .cart-total-label {
  transform: translateX(calc(-1.5 * var(--plaque-h)));
  /* C/ ITEM-> : desliza IMEDIATO (delay 0), antes da barra subir. */
  transition: transform var(--slide-dur) var(--bz) 0s;
}
.cart-total-shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* Seta (estado VAZIO) e "Total" (estado c/ item): crossfade por opacidade.
   Seta CENTRALIZADA no shape (top:50% + translate) — o balanco fica no <svg>
   interno (transform proprio), simetrico, entao NAO desloca o centro de repouso.
   "Total": no trecho reto, colado no topo do container (bottom:0). */
.plaque-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);   /* centro geometrico do shape */
  line-height: 1;
  color: var(--text2);
  opacity: 1;                          /* visivel no estado VAZIO */
  /* VOLTA: a seta esmaece PRA DENTRO durante o retorno do shape — o fade
     dispara junto com a partida (--rise-settle) e, como o bezier cobre ~95%
     do trajeto em metade do tempo, ela ja esta visivel quando o shape encosta
     no centro. (Ancorar na CHEGADA fazia o shape estacionar vazio e so entao
     a seta nascer.) */
  transition: opacity 0.3s ease-in-out var(--rise-settle);
}
.plaque-icon svg {
  display: block;
  width: 2.1rem;                       /* 2x do tamanho anterior */
  height: 2.1rem;
  animation: plaqueArrowBounce 1.4s ease-in-out infinite;
}
.cart-total-word {
  position: absolute;
  left: 50%;
  line-height: 1;
  font-family: var(--font);
  font-size: 1.6rem;             /* 2x (era 0.8rem) — shape alongado pra direita pra caber (ver cart-total-shape) */
  font-weight: 700;
  letter-spacing: 2.5px;
  color: var(--text2);
  white-space: nowrap;
  padding-left: 2.5px;          /* compensa o letter-spacing da direita (centro otico) */
  bottom: 0;                    /* encosta o texto no topo do container (sem padding embaixo) */
  /* Empurra o texto ~pra direita: gap esquerdo (ate a lateral) visualmente igual
     ao gap direito (ate o ombro concavo, que "abre" e parece maior). */
  transform: translateX(calc(-50% + 0.5rem));
  opacity: 0;                   /* oculto no estado VAZIO — sai de imediato */
  /* VAZIO->: some PRIMEIRO de tudo (delay 0), antes da barra descer — inverso
     exato da entrada. O shape só volta pro centro com a plaqueta já limpa. */
  transition: opacity var(--plaque-out) ease-in-out 0s;
}
/* Trocas amarradas a MARCOS do movimento (pedido do Rafael, 2026-08-04):
   · IDA  — seta some de imediato (delay 0); "Total" entra quando a BARRA
            COMEÇA A SUBIR, que é o fim do deslize do shape (--slide-dur).
   · VOLTA— "Total" some de imediato (regra acima); a seta esmaece pra dentro
            quando o shape CHEGA AO CENTRO (--rise-settle + --slide-dur,
            declarado no .plaque-icon). */
.cart.visible .plaque-icon { opacity: 0; transition: opacity var(--plaque-out) ease-in-out 0s; }
.cart.visible .cart-total-word { opacity: 1; transition: opacity 0.26s ease-in-out var(--slide-dur); }

/* Fim da página + carrinho vazio (seta pra cima) = plaqueta clicável. */
body.page-end .cart:not(.visible) .cart-total-label {
  pointer-events: auto;
  cursor: pointer;
}
body.page-end .cart:not(.visible) .cart-total-label:active .plaque-icon { opacity: 0.6; }

@keyframes plaqueArrowBounce {
  0%, 100% { transform: translateY(-2.5px); }  /* simetrico: centro de repouso = 0 */
  50%      { transform: translateY(2.5px); }
}
@media (prefers-reduced-motion: reduce) {
  .plaque-icon svg { animation: none; }
}
/* Contador sozinho (sem "itens"), badge 5px pra fora do canto superior direito do LCD */
.cart-count {
  position: absolute;
  top: -5px;          /* 5px de espaco pra cima */
  right: -5px;        /* 5px de espaco pra direita */
  left: auto;
  line-height: 1;
  white-space: nowrap;
}

/* ===== Upsell — modal centralizado (estilo iOS, msg em cima + botoes embaixo) =====
   Mesmo componente usado pra:
   - Upsell de bebida/sobremesa pos-add
   - Aviso de option_groups obrigatorios nao marcados no checkout */
.upsell {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: stretch;     /* card ocupa largura toda dentro do padding */
  justify-content: center;  /* card centralizado verticalmente */
  background: rgba(0,0,0,0.55);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
  padding: 0 0.875rem;      /* mesmo padding lateral dos cards */
  margin: 0;
  max-height: none;
  overflow: visible;
  width: 100%;
  border: none;
  border-radius: 0;
  box-sizing: border-box;
  gap: 0;
}

.upsell.visible {
  opacity: 1;
  pointer-events: auto;
}

/* Card unico envolvendo brand+msg+btns — pra watermark spanar tudo */
.upsell-card {
  position: relative;
  background: var(--bg2);
  border: 1px solid var(--divider-faint);
  border-radius: 1.1rem;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04);
  width: 100%;
  /* Dono pediu (2026-08-20): no desktop ficava largão (1200px), texto numa
     linha só esticada. Teto de dialog normal — o texto quebra linha sozinho. */
  max-width: 30rem;
  margin: 0 auto;
  overflow: hidden; /* clip da watermark rotacionada */
  transform: scale(0.94);
  transform-origin: center;
  transition: transform 0.28s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.upsell.visible .upsell-card { transform: scale(1); }

/* Brand row — divisor / logo / divisor, acima do texto */
.upsell-brand {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 2.1rem 1.5rem 0.8rem;
  width: 100%;
  box-sizing: border-box;
}
.upsell-divider {
  flex: 1;
  height: 1px;
  background: var(--divider-faint);
  opacity: 0.5; /* bem leve, quase invisivel */
  max-width: 7rem;
}
/* Selo discreto (dono 2026-08-24): era 9.6rem com a logo em cor cheia — a do
   Ventura e um DISCO vermelho, entao virava um farol vermelho no topo do
   modal e roubava a atencao da pergunta. Agora e pequena, dessaturada e com o
   contorno no mesmo cinza dos divisores ao lado: le como assinatura, nao como
   protagonista. A marca continua reconhecivel (o desenho nao some, so perde a
   cor); e nao depende do formato do arquivo — funciona em SVG e em foto. */
.upsell-logo {
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 50%;   /* circulo perfeito */
  object-fit: cover;    /* preenche o circulo todo, sem letterbox */
  border: 1px solid var(--divider-faint);  /* mesmo cinza do divisor ao lado */
  filter: grayscale(1);
  opacity: 0.55;
  flex-shrink: 0;
}

/* Mensagem — full width (limitado por padding do .upsell), abaixo da brand */
.upsell-msg {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text1);
  padding: 0.6rem 1.5rem 2.1rem;
  width: 100%;
  box-sizing: border-box;
}

/* Botoes lado a lado, embaixo do texto — separados do msg por um border-top sutil */
.upsell-btns {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 0;
  width: 100%;
  border-top: 1px solid var(--divider-faint);
  box-sizing: border-box;
}

.upsell-btn {
  flex: 1;
  padding: 1.15rem 0.5rem;
  border: none;
  background: transparent;
  font-family: var(--font);
  font-size: 1.32rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease;
  position: relative;
}

/* divisor vertical entre botoes (estilo iOS) */
.upsell-btn + .upsell-btn::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1px;
  background: var(--divider-faint);
}

.upsell-btn:active { background: rgba(255,255,255,0.06); }

.upsell-btn--nao { color: var(--text2); }
.upsell-btn--sim {
  color: var(--brand-1);
  font-weight: 700;
}

/* Variante "homogeneo" (warn de acomp): fundo transparente em ambos,
   so a cor da fonte diferencia.
   "Nao" (acao recomendada) na cor da marca.
   "Sim" (continuar sem acomp) em cinza mais escuro. */
.upsell--homogeneo .upsell-btn--nao {
  background: transparent;
  color: var(--brand-1);
  font-family: 'P22MackinacPro', var(--font);
  font-weight: 700; /* Mackinac Bold */
}
.upsell--homogeneo .upsell-btn--sim {
  background: transparent;
  color: var(--text3); /* cinza mais escuro */
  font-weight: 600;
}

/* Icone SVG da categoria como marca d'agua de fundo no upsell.
   Position absolute, top-right, grandao (30vw), inclinado -10deg.
   Colorido na cor do divisor (pra ficar discreto). */
/* Marca d'agua da categoria: ancorada a 10px do topo + 10px da direita.
   Tamanho ~30% da largura do card. Inclinada -10deg. */
.upsell-cat-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30%;
  min-width: 8rem;
  max-width: 16rem;
  aspect-ratio: 1 / 1;
  background-color: var(--divider-faint);
  -webkit-mask: var(--icon-url) center / contain no-repeat;
          mask: var(--icon-url) center / contain no-repeat;
  transform: rotate(-10deg);
  opacity: 0.85;
  pointer-events: none;
  z-index: 0;
}
.upsell-msg-text {
  flex: 0 1 auto;
  position: relative;
  z-index: 1; /* texto acima da marca d'agua */
}

/* Nome do item destacado dentro do .upsell-msg (na cor do tenant) */
.upsell-msg-item {
  color: var(--brand-1);
  font-weight: 700;
}

.cart-count {
  font-size: var(--fs-lg);
  color: var(--text2);
  font-weight: 600;
}

#cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--red);
  color: var(--bg2, #111111);
  font-weight: 800;
  font-size: 0.85rem;
  /* Redondo, igual ao contador da promo (dono 2026-08-24). */
  width: 1.2rem;
  min-width: 1.2rem;   /* 0.8x de 1.5rem */
  height: 1.2rem;
  padding: 0;
  border-radius: 50%;
  box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.5);
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  transform-origin: center;
}

#cart-count.pulse {
  transform: scale(2);
  box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.8);
}

.cart-total {
  /* Mesmo formato/tamanho do .item-price dos cards (dono 2026-08-22,
     3a rodada — "modal de total quando adiciona o item" e esta barra
     flutuante, nao o modal do item). Era pill igual ao botao Pagar;
     agora fala a lingua do card (o Pagar continua pill, sao coisas
     diferentes — botao de acao x display de valor). Clamp responsivo:
     mesma regra funciona igual no mobile e no desktop, sem breakpoint
     proprio. */
  font-size: clamp(calc(var(--fs-lg) * 1.2), 4.6vw, calc(var(--fs-lg) * 1.9));
  font-weight: 800;
  color: var(--red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-radius: 1.5rem;
  /* min-height igual ao .item-price (4a rodada): faltava isto - com o
     mesmo padding/fonte dos dois, o card ainda ficava ~0.3rem mais alto
     por causa desta trava, que o cart-total nao tinha. "Ligeiramente
     menor" era isto. */
  min-height: 3.5rem;
  /* Padding horizontal calibrado pro desktop (6a rodada): o .item-price
     estica width:100% pra preencher a coluna do card, que MUDA de
     largura por breakpoint (grade 1 coluna no mobile, varias no
     desktop) - por isso o padding tambem precisa ser por breakpoint pra
     bater "exatamente" nos dois. Versao mobile mais generosa dentro de
     @media (max-width:640px), junto do clamp de fonte agressivo. */
  padding: 0.55rem 0.9rem;
}

.cart-btn {
  padding: 0 1.4rem;   /* lateral menor pra dar mais espaco ao LCD com muitos digitos */
  height: 3.2rem;
  background: linear-gradient(180deg, var(--brand-2) 0%, var(--brand-1) 100%);
  /* Grafite do fundo dos cards (--bg2) — pedido do usuário 2026-08-17:
     "mesmo tom de grafite presente no background dos cards", texto E
     ícone na MESMA cor exata. --card-bg (que aparenta ser o token certo)
     na real só existe DENTRO do escopo de .item/.banner-slide--promo
     (variável local redeclarada ali) — fora desse escopo ela não existe
     e cai sem cor nenhuma; --bg2 é o valor real por trás dela, disponível
     global no :root. */
  color: var(--bg2);
  border: none;
  border-radius: 999px;
  font-family: var(--font);
  font-size: 1.22rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.2s, filter 0.2s;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  box-shadow: 0 4px 16px var(--brand-1-glow);
}

/* Virou <span> com máscara (era <img src="icons/cestinha.svg">) — pedido
   do usuário 2026-08-17: "mesma cor no ícone svg e letra do botão", e um
   filter (brightness/invert) só aproxima uma cor, não bate EXATO com uma
   variável arbitrária. background-color pintado através do recorte da
   própria silhueta do SVG garante o mesmo hex do texto, pixel a pixel —
   mesma técnica já usada no painel pro ícone-marca-d'água das colunas
   (.wm-ic, kanban.css). */
.cart-btn-icon {
  width: 1.55rem;
  height: 1.55rem;
  flex-shrink: 0;
  display: inline-block;
  background-color: var(--bg2);
  -webkit-mask: url('../icons/cestinha.svg') center / contain no-repeat;
          mask: url('../icons/cestinha.svg') center / contain no-repeat;
}

.cart-btn:hover { box-shadow: 0 6px 22px var(--brand-1-glow); filter: brightness(1.05); }
.cart-btn:active { transform: scale(0.96); }

/* ===== Resumo overlay ===== */
/* #resumo-ov agora e FILHO de .cart, nao mais um overlay fixed a parte
   (pedido do usuario: "quero uma coisa so, unificado subindo" — dois
   elementos so sincronizados por timing ainda lia como "dois objetos").
   Colapsado: max-height:0 (sem espaco nenhum, .cart-bar sozinha no
   fundo). Aberto: max-height:100vh — como .cart e um flex-column
   bottom:0, esse crescimento estica o proprio .cart pra cima e
   consequentemente empurra .cart-bar junto, tudo em UM movimento (nao
   dois transforms sincronizados). background --bg2 = mesma cor de
   .cart-bar, sem seam. */
.resumo-ov {
  display: flex;
  align-items: stretch;
  justify-content: center;
  overflow: hidden;
  max-height: 0;
  background: var(--bg2);
  transition: max-height 1.2s ease-in-out;
}

.resumo-ov.visible {
  /* 100vh cheio (pedido do usuario: "quero que suba tudo e tampe a
     tela" — o modal deve tampar o cardapio inteiro, sem a .cart-bar
     antiga sobrando como cabecalho). Com isso .cart (bar+resumo-ov)
     fica mais alto que 100vh, entao a .cart-bar E a orelha sobem juntas
     pra fora da tela, e so o conteudo do checkout preenche a tela toda. */
  max-height: 100vh;
}

.resumo-box {
  width: 100%;
  max-width: 32rem;
  margin: 0 auto;
  background: var(--bg2);
  padding: 1.5rem;
  /* Folga da plaqueta de rolagem: altura dela + o MESMO 1.5rem que o box já
     usa nos outros lados → o último botão respira igual ao topo e às
     laterais, sem a seta trepando nele. */
  padding-bottom: calc(1.5rem + var(--sp-plaque-h, 1.9rem));
  overflow-y: auto;
}

.resumo-mp-logo {
  display: block;
  width: 10.8rem;
  height: auto;
  margin: 0 auto 1rem;
}

.resumo-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text3);
  margin-bottom: 1rem;
  text-align: left;
}

.resumo-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.resumo-item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.5rem 0;
  font-size: var(--fs-lg);
}

.resumo-item-thumb-wrap {
  position: relative;
  flex-shrink: 0;
}

.resumo-item-thumb {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.375rem;
  object-fit: contain;   /* checkout: produto inteiro, sem zoom */
  display: block;
  background: var(--surface2);
}

.resumo-item-thumb-placeholder {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.375rem;
  background: var(--surface2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--text3);
}

.resumo-item-rm {
  position: absolute;
  top: -0.3rem;
  right: -0.3rem;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 0.25rem;
  background: var(--red);
  color: #fff;
  border: none;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.resumo-item-rm:active {
  transform: scale(0.85);
}

.resumo-item-qty {
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--red);
  flex-shrink: 0;
}

.resumo-item-name {
  font-weight: 600;
}

.resumo-item-qty {
  color: var(--text3);
  font-weight: 600;
}

.resumo-item-price {
  /* REVERTIDO (dono 2026-08-22, 2a rodada): este e o preco de CADA
     miniatura na lista do carrinho no checkout - varios aparecem juntos
     conforme o pedido cresce, entao tem que continuar pequeno de
     proposito (o alvo do "mesmo tamanho do card" era o TOTAL, nao a
     lista). Fica pequeno (herda fonte/padding do seletor coletivo) -
     so o RAIO acompanha o card agora (4a rodada, pedido explicito do
     dono: "mesmo border radius, mas pode ficar pequeno mesmo"). */
  font-weight: 800;
  color: var(--red);
  white-space: nowrap;
  flex-shrink: 0;
  border-radius: 1.5rem;
}

.resumo-item-detail { flex: 1; min-width: 0; }
.resumo-item-top { display: flex; align-items: center; gap: 0.375rem; }
.resumo-item-acomp {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  margin-top: 0.25rem;
  padding-left: 1.5rem;
  font-size: var(--fs-sm);
  color: var(--text2);
  font-weight: 500;
}
.resumo-item-acomp--multi {
  gap: 0.25rem;
  line-height: 1.8;
}
.prato-pill {
  display: inline;
  background: var(--brand-1-subtle);
  border: 1px solid var(--brand-1-border);
  border-radius: 100px;
  color: var(--brand-1);
  font-weight: 700;
  padding: 0.1em 0.45em;
  font-size: inherit;
}

/* Column wrappers — transparent on mobile */
.resumo-col {
  display: contents;
}

/* Divisor entre colunas — so existe visualmente no tablet (ver @media 768). */
.resumo-divider {
  display: none;
}

/* Total duplicado — escondido no mobile */
.resumo-total-right {
  display: none;
}

.resumo-taxa {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0.25rem;
  font-size: var(--fs-sm);
  color: var(--text3);
  /* Sem divisor: o usuário pediu para remover a linha que ficava abaixo do
     cupom. A separação da seção de totais fica só pelo respiro vertical. */
  margin-top: 0.5rem;
  margin-bottom: 0.25rem;
}
/* Sem taxa de entrega pra mostrar (retirada/mesa, ou endereço ainda não
   preenchido): o JS deixa o innerHTML vazio, some por completo. */
.resumo-taxa:empty {
  display: none;
  padding: 0;
  margin: 0;
}
.resumo-taxa-label { color: var(--text3); }
.resumo-taxa-val { color: #60a5fa; font-weight: 600; }

.resumo-acrescimo {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-sm);
  padding: 0 0.5rem;
  margin-bottom: 0.25rem;
}
.resumo-acrescimo-label { color: #f59e0b; }
.resumo-acrescimo-val { color: #f59e0b; font-weight: 600; }

.faturado-aviso {
  background: rgba(245,158,11,0.12);
  border: 1px solid rgba(245,158,11,0.3);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
  margin-top: 0.5rem;
  font-size: var(--fs-sm);
  color: #f59e0b;
  text-align: center;
}
.faturado-aviso--erro {
  background: rgba(239,68,68,0.12);
  border-color: rgba(239,68,68,0.3);
  color: #ef4444;
}

/* Wrapper do total no checkout: label "Total" a esquerda + LCD do numero a direita.
   Ambos centralizados horizontalmente na linha. Padding simetrico top/bottom
   pra ficar com mesmo gap pros elementos antes e depois. */
.resumo-total-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 1.25rem 0 1.85rem;
  margin: 0;
}
.resumo-total-label {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text2);
  line-height: 1;
}
/* .resumo-total e .resumo-total-right herdam estilo LCD do seletor coletivo no topo.
   Mesmo formato/tamanho do .item-price dos cards (dono 2026-08-22, 3a
   rodada) — clamp responsivo, uma regra so cobre mobile e desktop sem
   precisar de breakpoint proprio pro raio/padding/fonte. */
.resumo-total,
.resumo-total-right {
  font-size: clamp(calc(var(--fs-lg) * 1.2), 4.6vw, calc(var(--fs-lg) * 1.9));
  font-weight: 800;
  /* Padding calibrado pro desktop (6a rodada) — ver comentario no
     .cart-total, mesma logica. */
  padding: 0.55rem 0.9rem;
  border-radius: 1.5rem;
  /* min-height igual ao .item-price (4a rodada) — ver comentario no
     .cart-total. box-sizing:border-box do seletor coletivo garante que
     o min-height inclua o padding, igual no card. */
  min-height: 3.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* Nome field */
.resumo-nome {
  position: relative;
  margin-bottom: 1.25rem;
}

.resumo-nome-input {
  width: 100%;
  padding: 0.875rem 1rem;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-lg);
  outline: none;
  transition: border-color 0.15s;
}

.resumo-nome-input:focus {
  border-color: var(--green);
}

.resumo-nome-label {
  position: absolute;
  top: -0.65rem;
  left: 0.75rem;
  padding: 0 0.375rem;
  background: var(--bg);
  font-size: calc(var(--fs-md) * 1.25);
  font-weight: 700;
  color: var(--text3);
  letter-spacing: 0.3px;
  transition: color 0.15s;
}

.resumo-nome:focus-within .resumo-nome-label {
  color: var(--green);
}

/* Telefone field */
.resumo-telefone {
  position: relative;
  margin-bottom: 1.25rem;
}

.resumo-telefone-input {
  width: 100%;
  padding: 0.875rem 1rem;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-lg);
  outline: none;
  transition: border-color 0.15s;
}

.resumo-telefone-input:focus {
  border-color: var(--green);
}

.resumo-telefone-label {
  position: absolute;
  top: -0.65rem;
  left: 0.75rem;
  padding: 0 0.375rem;
  background: var(--bg);
  font-size: calc(var(--fs-md) * 1.25);
  font-weight: 700;
  color: var(--text3);
  letter-spacing: 0.3px;
  transition: color 0.15s;
}

.resumo-telefone:focus-within .resumo-telefone-label {
  color: var(--green);
}

/* Observacao field */
.resumo-obs {
  position: relative;
  margin-bottom: 1.25rem;
}

.resumo-obs-input {
  width: 100%;
  padding: 0.875rem 1rem;
  /* Fundo+borda IDÊNTICOS ao display LCD/rádio-relógio (.resumo-total etc,
     topo do arquivo) — pedido do usuário 2026-08-17, substitui a borda de
     card usada no passo anterior. Raio continua var(--card-radius). */
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--card-radius);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-lg);
  outline: none;
  transition: border-color 0.15s;
}

.resumo-obs-input:focus {
  border-color: var(--green);
}

.resumo-obs-label {
  position: absolute;
  top: -0.65rem;
  left: 0.75rem;
  padding: 0 0.375rem;
  background: var(--bg);
  font-size: calc(var(--fs-md) * 1.25);
  font-weight: 700;
  color: var(--text3);
  letter-spacing: 0.3px;
  transition: color 0.15s;
}

.resumo-obs:focus-within .resumo-obs-label {
  color: var(--green);
}

/* ── Slide animation (grid 0fr→1fr trick) ── */
.slide-inner {
  overflow: hidden;
  min-height: 0;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.visible > .slide-inner {
  opacity: 1;
}

.slide-inner--grid2 {
  overflow: hidden;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

/* Endereco fields */
.resumo-endereco {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1), margin 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: 0;
  margin-bottom: 0;
}

.resumo-endereco > .slide-inner {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-top: 0.75rem;
}

.resumo-endereco.visible {
  grid-template-rows: 1fr;
  margin-top: 0.75rem;
  margin-bottom: 1.25rem;
}

.end-field {
  position: relative;
}

.end-row {
  display: flex;
  gap: 0.5rem;
}

.end-field--rua { flex: 1; }
.end-field--num { width: 5rem; flex-shrink: 0; }
.end-field--comp { width: 100%; }

.resumo-endereco-input {
  width: 100%;
  padding: 0.875rem 1rem;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-lg);
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}

.resumo-endereco-input:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 12px rgba(96,165,250,0.15);
}

.resumo-endereco-label {
  position: absolute;
  top: -0.65rem;
  left: 0.75rem;
  padding: 0 0.375rem;
  background: var(--bg);
  font-size: calc(var(--fs-md) * 1.25);
  font-weight: 700;
  color: var(--text3);
  letter-spacing: 0.3px;
  transition: color 0.15s;
  z-index: 1;
}

.end-field:focus-within .resumo-endereco-label {
  color: #60a5fa;
}

/* Google Places Autocomplete dropdown */
.pac-container {
  background: var(--bg, #0a0a0a);
  border: 2px solid rgba(96,165,250,0.3);
  border-radius: 0.75rem;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  margin-top: 4px;
  font-family: var(--font, 'Outfit', sans-serif);
  z-index: 10000;
}
.pac-item {
  padding: 0.75rem 1rem;
  border-top: 1px solid rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.85);
  font-size: 0.95rem;
  cursor: pointer;
}
.pac-item:first-child { border-top: none; }
.pac-item:hover, .pac-item-selected {
  background: rgba(96,165,250,0.12);
}
.pac-item-query {
  color: #60a5fa;
  font-weight: 600;
}
.pac-icon { display: none; }
.pac-logo::after { display: none; }

/* Distance info */
.dist-info {
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.dist-loading {
  color: var(--text3);
}

.dist-ok {
  color: var(--green);
  background: rgba(74,222,128,0.08);
  border: 1px solid rgba(74,222,128,0.2);
}

.dist-far {
  color: var(--red);
  background: var(--brand-1-subtle);
  border: 1px solid var(--brand-1-border);
}

/* Pagamento */
.resumo-pag {
  margin-bottom: 1.25rem;
}

.resumo-pag-label {
  font-size: calc(var(--fs-md) * 1.25);
  font-weight: 700;
  color: var(--text2);
  text-align: center;
  margin-bottom: 0.75rem;
}

.resumo-pag-section-hdr {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}
.resumo-pag-section-title {
  font-size: calc(var(--fs-md) * 1.25);
  font-weight: 700;
  color: var(--text3);
  white-space: nowrap;
  letter-spacing: 0.3px;
}
.resumo-pag-section-line {
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.03);
}
.resumo-pag-btns + .resumo-pag-section-hdr,
.resumo-troco + .resumo-pag-section-hdr,
.resumo-pag-sub + .resumo-pag-section-hdr {
  margin-top: 1rem;
}

.resumo-pag-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.staff-mode .resumo-pag-btns {
  grid-template-columns: repeat(3, 1fr);
}

#staff-corner {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9999;
  width: 6rem;
  height: 6rem;
  overflow: hidden;
  pointer-events: none;
}
#staff-corner::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  border-style: solid;
  border-width: 0 6rem 6rem 0;
  border-color: transparent var(--red) transparent transparent;
  opacity: 0.92;
}
#staff-corner::after {
  content: 'STAFF';
  position: absolute;
  top: 1.4rem;
  right: 0.4rem;
  transform: rotate(45deg);
  font-size: 0.65rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  pointer-events: none;
}

.pag-btn {
  padding: 0.75rem 0.5rem;
  /* Mesma borda dos cards (2026-08-17) — era 2px + var(--radius) genérico. */
  border-radius: var(--card-radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text3);
  font-family: var(--font);
  font-size: var(--fs-md);
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
  /* Ícone ao lado esquerdo do título (2026-08-17) — era column (ícone em
     cima, texto embaixo). Row com o ícone primeiro no HTML já entrega
     "ícone à esquerda do título" de graça. */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.pag-icon {
  width: 2rem;
  height: 2rem;
  display: inline-block;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-color: var(--text3);
  transition: background-color 0.15s;
}

.pag-icon--pix {
  -webkit-mask-image: url('../icons/pix.svg');
  mask-image: url('../icons/pix.svg');
}

.pag-icon--dinheiro {
  -webkit-mask-image: url('../icons/dinheiro.svg');
  mask-image: url('../icons/dinheiro.svg');
}

.pag-icon--cartao {
  -webkit-mask-image: url('../icons/cartao.svg');
  mask-image: url('../icons/cartao.svg');
}
.pag-icon--maquina {
  -webkit-mask-image: url('../icons/maquina-de-cartao.svg');
  mask-image: url('../icons/maquina-de-cartao.svg');
}

.pag-icon--faturado {
  -webkit-mask-image: url('../icons/faturado.svg');
  mask-image: url('../icons/faturado.svg');
}

.resumo-pag-section--fiado {
  margin-top: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  margin-bottom: 1rem;
}
.resumo-pag-section--fiado .resumo-pag-section-line {
  background: rgba(255,255,255,0.06);
}
.resumo-pag-section--fiado .resumo-pag-section-hdr {
  margin-bottom: 0.6rem;
}

.pag-btn[data-pag="faturado"] {
  grid-column: 1 / -1;
  flex-direction: row;
  justify-content: center;
}
.pag-btn[data-pag="faturado"].active {
  border-color: #f59e0b;
  color: #f59e0b;
  background: rgba(245,158,11,0.18);
}
.pag-btn[data-pag="faturado"].active .pag-icon {
  background: #f59e0b;
}

/* ===== Status loja (pill dentro do header) ===== */
.loja-status {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3rem 0.75rem;
  font-size: var(--fs-sm);
  font-weight: 700;
  border-radius: 50px;
  margin-left: auto;
  white-space: nowrap;
  transition: all 0.3s;
}

.loja-status.aberta {
  background: rgba(74,222,128,0.1);
  border: 1px solid rgba(74,222,128,0.25);
  color: #4ade80;
}

.loja-status.fechada {
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.25);
  color: #ef4444;
}

.loja-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.loja-status-dot.aberta {
  background: #4ade80;
  animation: dot-aberta 2s ease-in-out infinite;
}

.loja-status-dot.fechada {
  background: #ef4444;
  animation: dot-fechada 2s ease-in-out infinite;
}

@keyframes dot-aberta {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0.5); }
  50% { box-shadow: 0 0 8px 3px rgba(74,222,128,0.3); }
}

@keyframes dot-fechada {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.5); }
  50% { box-shadow: 0 0 8px 3px rgba(239,68,68,0.3); }
}

.loja-status-shake {
  animation: shake-status 0.4s ease-in-out 0s 3;
}
@keyframes shake-status {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

/* (Search-wrap antigo removido — search agora vive no header) */
.search-input {
  /* placeholder pra estilos legacy que ainda referenciem essa classe */
  display: none;
}
.search-input::placeholder { color: var(--text3); font-weight: 500; }
.search-input:focus {
  border-color: var(--brand-1-border);
  box-shadow: 0 0 0 3px var(--brand-1-subtle);
}
.search-input.search-match {
  border-color: rgba(34,197,94,0.6);
  box-shadow: 0 0 0 3px rgba(34,197,94,0.12);
}
.search-input.search-no-match {
  border-color: var(--brand-1-border);
}

.pag-icon--online {
  -webkit-mask-image: url('../icons/online.svg');
  mask-image: url('../icons/online.svg');
}

.pag-icon--whatsapp {
  -webkit-mask-image: url('../icons/whatsapp.svg');
  mask-image: url('../icons/whatsapp.svg');
}

/* ===== Checkout PIX inline (dark custom) ===== */
.ck-pix {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease-in-out, margin 0.3s ease-in-out;
  margin-top: 0;
}
.ck-pix.visible {
  grid-template-rows: 1fr;
  margin-top: 1rem;
}
.ck-pix-inner {
  overflow: hidden;
  min-height: 0;
  padding: 0;
  border: none;
  border-radius: var(--radius-lg);
  background: transparent;
  text-align: center;
  transition: padding 0.3s ease-in-out, border-color 0.3s ease-in-out, background 0.3s ease-in-out;
}
.ck-pix.visible .ck-pix-inner {
  padding: 1.25rem;
  border: 1px solid rgba(255,255,255,0.03);
  background: var(--surface);
}

.ck-pix-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.ck-pix-title {
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--text);
}

.ck-pix-total {
  font-size: var(--fs-xl);
  font-weight: 900;
  color: var(--green);
  text-shadow: 0 0 12px rgba(74,222,128,0.3);
}

.ck-pix-qr-wrap {
  margin-top: 1rem;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 12rem;
  position: relative;
}

.ck-pix-qr-wrap .qr-pulse {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 11rem;
  height: 11rem;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.4);
  animation: qr-ripple 0.6s ease-out forwards;
  pointer-events: none;
}

@keyframes qr-ripple {
  0%   { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(2); opacity: 0; }
}

@keyframes qr-bounce {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.ck-pix-loading {
  color: var(--text3);
  font-weight: 600;
  animation: ck-pulse 1.5s ease-in-out infinite;
}

@keyframes ck-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.ck-pix-qr {
  width: 11rem;
  height: 11rem;
  border-radius: var(--radius);
  background: #fff;
  padding: 0.5rem;
}

.ck-pix-code-wrap {
  margin-top: 0.75rem;
}

.ck-pix-code-label {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 0.5rem;
}

.ck-pix-code-row {
  display: flex;
  gap: 0.5rem;
}

.ck-pix-code {
  flex: 1;
  min-width: 0;
  height: 2.375rem;
  padding: 0 0.75rem;
  /* Fundo+borda IDÊNTICOS ao display LCD/rádio-relógio (já eram — mantido,
     só o raio mudou pra var(--card-radius), era fixo em rem). min-width:0
     (novo): sem isso um input flex:1 com value comprido (o código Pix
     real, ~140 caracteres) não encolhia de verdade, empurrando o botão de
     copiar pra fora da coluna. */
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--card-radius);
  color: var(--text2);
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: 600;
  outline: none;
}

/* Virou botão-ícone só (era pill com texto "Copiar"/"Copiado!") — pedido do
   usuário 2026-08-17: o texto cortava quando o código Pix (bem comprido)
   deixava a coluna "code" do grid estreita. Ghost button sem fundo/borda
   (mesmo padrão do .hdr-search-clear) — cinza claro em repouso, branco no
   hover, ícone de copy/check trocando por display (JS em copiarPix()). */
.ck-pix-copy {
  flex-shrink: 0;
  width: 2.375rem;
  height: 2.375rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  color: var(--text3);
  cursor: pointer;
  transition: color 0.2s;
}
.ck-pix-copy:hover,
.ck-pix-copy:focus-visible { color: #fff; }
/* flex-shrink:0 é o que faz de verdade — sem ele o SVG (sem width/height
   como atributo, só viewBox) resolve min-content pra 0 dentro do botão
   flex e o flex-shrink:1 padrão encolhe o ícone até sumir (mesmo padrão
   já resolvido em .resumo-voltar svg, linha ~4214). */
.ck-pix-copy-icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.ck-pix-copy.copiado .ck-pix-copy-icon--copy { display: none; }
.ck-pix-copy.copiado .ck-pix-copy-icon--ok { display: block; color: var(--brand-1); }

.ck-pix-copy:active {
  background: rgba(74,222,128,0.25);
}

.ck-pix-steps {
  margin: 1rem 0 0;
  padding-left: 0;
  list-style: none;
  counter-reset: step;
  font-size: var(--fs-md);
  font-weight: 300;
  color: rgba(255,255,255,0.5);
  line-height: 1.6;
  text-align: left;
}

.ck-pix-steps li {
  counter-increment: step;
}

.ck-pix-steps li::before {
  content: counter(step) ". ";
  font-weight: 700;
  color: rgba(255,255,255,0.6);
}

.ck-pix-status {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--gold);
}

.ck-pix-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  animation: ck-status-dot 1.5s ease-in-out infinite;
}

@keyframes ck-status-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0.5); opacity: 1; }
  50% { box-shadow: 0 0 10px 3px rgba(245,158,11,0.3); opacity: 0.6; }
}

.ck-pix-ok {
  margin-top: 1rem;
  padding: 1.25rem;
  background: rgba(74,222,128,0.08);
  border: 1px solid rgba(74,222,128,0.25);
  border-radius: var(--radius);
  animation: ck-ok-pop 0.5s cubic-bezier(0.16,1,0.3,1);
}

@keyframes ck-ok-pop {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.ck-pix-ok-icon {
  width: 3rem;
  height: 3rem;
  margin: 0 auto 0.5rem;
  border-radius: 50%;
  background: rgba(74,222,128,0.15);
  border: 2px solid rgba(74,222,128,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #4ade80;
}

.ck-pix-ok-txt {
  font-size: var(--fs-lg);
  font-weight: 800;
  color: #4ade80;
  text-shadow: 0 0 12px rgba(74,222,128,0.3);
}

/* ===== Fiado Success Overlay ===== */
.fiado-ok-ov {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.88);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  animation: ck-ok-pop 0.5s cubic-bezier(0.16,1,0.3,1);
}

.fiado-ok-ov .ck-pix-ok-icon {
  width: 4rem;
  height: 4rem;
  font-size: 2rem;
}

.fiado-ok-ov .ck-pix-ok-txt {
  font-size: var(--fs-xl);
}

.fiado-ok-sub {
  font-size: var(--fs-sm);
  color: var(--text3);
}

.fiado-cd {
  position: relative;
  width: 3.5rem;
  height: 3.5rem;
  margin-top: 0.5rem;
}

.fiado-cd svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.fiado-cd circle {
  fill: none;
  stroke-width: 3;
  cx: 18;
  cy: 18;
  r: 16;
}

.fiado-cd .cd-track { stroke: rgba(255,255,255,0.08); }

.fiado-cd .cd-fill {
  stroke: #4ade80;
  stroke-linecap: round;
  stroke-dasharray: 100.5;
  stroke-dashoffset: 0;
  animation: cd-drain 5s linear forwards;
}

.fiado-cd .cd-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-lg);
  font-weight: 800;
  color: #fff;
}

@keyframes cd-drain {
  to { stroke-dashoffset: 100.5; }
}

/* ===== Checkout Cartao inline (dark custom) ===== */
.ck-card {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1), margin 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: 0;
}

.ck-card > .slide-inner {
  overflow: hidden;
  min-height: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-lg);
  transition: padding 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1), background 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.ck-card.visible {
  grid-template-rows: 1fr;
  margin-top: 1rem;
}

.ck-card.visible > .slide-inner {
  padding: 1.25rem;
  border: 1px solid rgba(255,255,255,0.03);
  background: var(--surface);
}

.ck-card-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.75rem;
  margin-top: 1rem;
}

.ck-row {
  display: flex;
  gap: 0.75rem;
}

.ck-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
  min-width: 0;
}

.ck-field--half {
  flex: 1;
}

.ck-field--expiry {
  flex: 1.2;
}

.ck-field--cvv {
  flex: 0.8;
}

.ck-label {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ck-input {
  width: 100%;
  min-width: 0;
  height: 2.75rem;
  padding: 0 0.875rem;
  /* Fundo+borda IDÊNTICOS ao display LCD/rádio-relógio — pedido do usuário
     2026-08-17, substitui a borda de card usada no passo anterior. */
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--card-radius);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-lg);
  font-weight: 600;
  outline: none;
  transition: border-color 0.2s;
  -webkit-appearance: none;
  box-sizing: border-box;
}

.ck-input-error {
  animation: input-blink 0.5s ease 3;
}

@keyframes input-blink {
  0%, 100% { border-color: var(--border); }
  50% { border-color: var(--red); box-shadow: 0 0 12px var(--brand-1-glow); }
}

.ck-input:focus {
  border-color: var(--green);
}

.ck-input::placeholder {
  color: var(--text3);
}

/* Placeholders dos inputs do checkout — discretos, abaixo das labels */
.resumo-nome-input::placeholder,
.resumo-telefone-input::placeholder,
.resumo-obs-input::placeholder,
.resumo-endereco-input::placeholder,
.resumo-troco-input::placeholder,
.gcm-mesa-input::placeholder {
  color: #404040;
}

/* Card brand detection */
.ck-card-number-wrap {
  position: relative;
}
.ck-card-number-wrap .ck-input {
  padding-right: 3.5rem;
}
.ck-card-brand {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  height: 1.75rem;
  display: flex;
  align-items: center;
  pointer-events: none;
  transition: opacity 0.2s;
}
.ck-card-brand:empty { opacity: 0; }
.ck-card-brand svg {
  height: 1.75rem;
  width: auto;
}

.ck-select {
  cursor: pointer;
}

.resumo-pagar-online {
  position: relative;
  margin-top: 1rem;
  background: rgba(74,222,128,0.12) !important;
  border: 1px solid rgba(74,222,128,0.35) !important;
  color: #4ade80 !important;
  box-shadow: 0 0 16px rgba(74,222,128,0.15), inset 0 1px 0 rgba(74,222,128,0.1);
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.16,1,0.3,1) !important;
}

.resumo-pagar-online::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,0.5) 45%, rgba(255,255,255,0) 55%);
  pointer-events: none;
  z-index: 1;
  animation: btn-shine-loop 3s ease-in-out infinite;
}

@keyframes btn-shine-loop {
  0%, 70% { left: -100%; opacity: 1; }
  100% { left: 150%; opacity: 1; }
}

.resumo-pagar-online:active {
  transform: scale(0.97);
  box-shadow: 0 0 24px rgba(74,222,128,0.25), inset 0 1px 0 rgba(74,222,128,0.15);
  background: rgba(74,222,128,0.25) !important;
}

.resumo-pagar-fiado {
  position: relative;
  margin-top: 1rem;
  background: rgba(245,158,11,0.12) !important;
  border: 1px solid rgba(245,158,11,0.35) !important;
  color: #f59e0b !important;
  box-shadow: 0 0 16px rgba(245,158,11,0.15), inset 0 1px 0 rgba(245,158,11,0.1);
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.16,1,0.3,1) !important;
}
.resumo-pagar-fiado:active {
  transform: scale(0.97);
  background: rgba(245,158,11,0.25) !important;
}
.resumo-pagar-fiado:disabled {
  opacity: 0.4;
  pointer-events: none;
}

.pag-btn.active .pag-icon {
  background-color: #4ade80;
}
.pag-btn[data-pag="faturado"].active .pag-icon {
  background-color: #f59e0b;
}
.resumo-enviar.resumo-pagar-fiado .pag-icon {
  background-color: #f59e0b;
}

.pag-btn.active {
  border-color: #4ade80;
  background: rgba(74,222,128,0.2);
  color: #4ade80;
  box-shadow: 0 0 20px rgba(74,222,128,0.25), inset 0 1px 0 rgba(74,222,128,0.15);
}

.pag-btn:active {
  transform: scale(0.95);
}

/* Sub-opcoes cartao */
.resumo-pag-sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1), margin 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: 0;
  margin-bottom: 0;
}

.resumo-pag-sub.visible {
  grid-template-rows: 1fr;
  margin-top: 0.75rem;
}

.pag-sub-btn {
  padding: 0.875rem 0.5rem;
  /* Mesma borda dos cards (2026-08-17) — era 2px + var(--radius) genérico. */
  border-radius: var(--card-radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text3);
  font-family: var(--font);
  font-size: var(--fs-lg);
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.pag-sub-btn.active {
  border-color: var(--green);
  background: rgba(74,222,128,0.08);
  color: var(--green);
}

.pag-sub-btn:active {
  transform: scale(0.95);
}

/* Troco field */
.resumo-troco {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1), margin 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: 0;
  margin-bottom: 0;
}

.resumo-troco > .slide-inner {
  padding-top: 0.5rem;
}

.resumo-troco.visible {
  grid-template-rows: 1fr;
  margin-top: 0.75rem;
}

.resumo-troco-input {
  width: 100%;
  padding: 0.875rem 1rem;
  /* Fundo+borda IDÊNTICOS ao display LCD/rádio-relógio — pedido do usuário
     2026-08-17, substitui a borda de card usada no passo anterior. */
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--card-radius);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-lg);
  outline: none;
  transition: border-color 0.15s;
}

.resumo-troco-input:focus {
  border-color: var(--green);
  box-shadow: 0 0 12px rgba(74,222,128,0.15);
}

.resumo-troco-label {
  position: absolute;
  top: -0.5rem;
  left: 0.75rem;
  padding: 0 0.375rem;
  background: var(--bg);
  font-size: var(--fs-md);
  font-weight: 700;
  color: rgba(74,222,128,0.6);
  letter-spacing: 0.3px;
  transition: color 0.15s;
}

.resumo-troco:focus-within .resumo-troco-label {
  color: var(--green);
}

/* Tipo entrega */
.resumo-tipo {
  margin-bottom: 1.25rem;
}

.resumo-tipo-label {
  font-size: calc(var(--fs-md) * 1.25);
  font-weight: 700;
  color: var(--text2);
  text-align: center;
  margin-bottom: 0.625rem;
}

.resumo-tipo-btns {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.5rem;
}

.tipo-btn {
  padding: 0.75rem 0.5rem;
  border-radius: var(--radius);
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--text2);
  font-family: var(--font);
  font-size: calc(var(--fs-md) * 1.2);
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.tipo-btn[data-tipo="entrega"].active {
  border-color: #60a5fa;
  background: rgba(96,165,250,0.12);
  color: #60a5fa;
  box-shadow: 0 0 16px rgba(96,165,250,0.2);
}

.tipo-btn[data-tipo="balcao"].active {
  border-color: #f59e0b;
  background: rgba(245,158,11,0.12);
  color: #f59e0b;
  box-shadow: 0 0 16px rgba(245,158,11,0.2);
}

.tipo-btn[data-tipo="mesa"].active {
  border-color: #a78bfa;
  background: rgba(167,139,250,0.12);
  color: #a78bfa;
  box-shadow: 0 0 16px rgba(167,139,250,0.2);
}

.tipo-btn:active {
  transform: scale(0.95);
}

/* Numero da mesa — mesma largura de um tipo-btn (1/3 da grid com gap 0.5rem) */
.gcm-mesa-wrap {
  position: relative;
  width: calc((100% - 1rem) / 3);
  margin-bottom: 1.25rem;
}

/* No cardapio o botao Mesa fica a direita — alinha o input junto */
#cdp-mesa-wrap {
  margin-left: auto;
}

/* Label do input de mesa — centralizada e posicionada na borda */
.gcm-mesa-wrap .resumo-nome-label {
  font-size: calc(var(--fs-sm) * 1.15);
  left: 50%;
  transform: translateX(-50%);
  top: -0.5rem;
  white-space: nowrap;
}

.gcm-mesa-input {
  width: 100%;
  padding: 0.875rem 0.5rem;
  background: transparent;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-lg);
  font-weight: 700;
  text-align: center;
  outline: none;
  transition: border-color 0.15s;
  -moz-appearance: textfield;
}
.gcm-mesa-input::-webkit-outer-spin-button,
.gcm-mesa-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
.gcm-mesa-input:focus {
  border-color: var(--green);
}
.gcm-mesa-wrap:focus-within .resumo-nome-label {
  color: var(--green);
}

.resumo-enviar {
  position: relative;
  width: 100%;
  padding: 1rem;
  background: rgba(74,222,128,0.12);
  color: #4ade80;
  /* Raio igual aos cards (2026-08-17) — cor/espessura da borda mantidas
     (verde, é o CTA principal do checkout) já batiam 1px; só o raio
     estava no var(--radius) genérico. */
  border: 1px solid rgba(74,222,128,0.35);
  border-radius: var(--card-radius);
  font-family: var(--font);
  font-size: var(--fs-lg);
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s;
  margin-bottom: 0.625rem;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 0 16px rgba(74,222,128,0.15), inset 0 1px 0 rgba(74,222,128,0.1);
  overflow: hidden;
}

.resumo-enviar#btn-enviar-wpp::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,0.5) 45%, rgba(255,255,255,0) 55%);
  pointer-events: none;
  z-index: 1;
  animation: btn-shine-loop 3s ease-in-out infinite;
}

.resumo-enviar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
}

.resumo-enviar .pag-icon {
  background-color: #4ade80;
}

.resumo-enviar:active {
  transform: scale(0.97);
  background: rgba(74,222,128,0.25);
  box-shadow: 0 0 24px rgba(74,222,128,0.25), inset 0 1px 0 rgba(74,222,128,0.15);
}

.resumo-voltar-sep {
  width: 100%;
  height: 1px;
  background: rgba(255,255,255,0.03);
  margin: 1.5rem 0 0;
  border: none;
}
/* PADRÃO DE DESIGN — botão "voltar" do sistema.
   Fonte da verdade: .trk-btn-voltar (acompanhar.html, página de rastreio).
   Mesmos valores literais de propósito: as duas telas não compartilham a
   mesma folha de tokens, então copiar o token daria cores diferentes. */
.resumo-voltar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  max-width: 28rem;
  margin: 1rem auto 0;
  padding: 0.75rem 1rem;
  background: #222;
  color: #fff;
  border: 1px solid #333;
  border-radius: 0.75rem;
  font-family: var(--font);       /* = 'P22MackinacPro' do rastreio */
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.resumo-voltar svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }

/* ===== Empty ===== */
.sec-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--text3);
  font-size: var(--fs-lg);
  font-weight: 600;
}

/* ===== Busca: destaque do trecho que casou =====
   A classe .hl-match era emitida pelo JS desde sempre e NUNCA teve estilo —
   o destaque simplesmente não existia na tela. */
.hl-match {
  color: var(--brand-1-light, var(--brand-1));
  font-weight: 800;
  background: var(--brand-1-subtle, transparent);
  border-radius: var(--radius-sm);
  padding: 0 .12em;
  text-shadow: 0 0 10px var(--brand-1-glow, transparent);
}

/* Busca por valor: o preço é o que interessa — ganha o glow da marca */
.sec--preco .item-price,
.sec--preco .card-loja-price {
  border-color: var(--brand-1-border, rgba(255,255,255,.08));
  box-shadow: 0 0 12px var(--brand-1-glow, transparent);
}

/* Busca sem resultado: linha de saída acionável (limpar busca) */
.sec-empty-hint {
  margin-top: .5rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text3);
}

.sec-empty-btn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--brand-1);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: .2em;
  cursor: pointer;
}

.sec-empty-btn:active { opacity: .7; }

/* ===== Footer ===== */
/* ===== Atalhos do rodapé =====
   Mesmo gutter/max-width das seções (.sec) pra alinhar com os cards. */
.footer-shortcuts {
  /* Topo: .sec já deixa 0.5rem embaixo → 0.125rem aqui = 0.625rem até o
     último card, o mesmo gap card→card da lista. */
  padding: 0.125rem var(--gutter) 1.25rem;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Envelope idêntico ao card de item (.item): mesma superfície, borda e raio. */
.shortcut-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}


.shortcut-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  width: 100%;
  min-height: 3.25rem;
  border-radius: var(--radius);
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  transition: filter 0.15s, transform 0.1s;
}
/* Ícone e rótulo agrupados e centralizados juntos (gap 0.625rem = 10px do
   flex acima) — padrão de botão com ícone (pedido do Rafael, 2026-08-04). */
.shortcut-btn:active { transform: scale(0.98); }

/* Verde oficial do WhatsApp — não segue o accent do tenant de propósito:
   o cliente reconhece a marca na hora. Neumorfismo nas MESMAS proporções
   dos botões cinza, com os tons transpostos pra verde: luz = verde claro
   no topo-esquerda, sombra = verde escuro embaixo-direita. */
.shortcut-btn--wa {
  background: #25d366;
  color: #fff;
  box-shadow: 0 8px 18px rgba(0,0,0,0.24),
              inset 2px 2px 4px rgba(214,255,232,0.40),
              inset -2px -2px 5px rgba(9,94,48,0.55);
}
.shortcut-btn--wa:hover { filter: brightness(1.08); }
.shortcut-btn--wa:active { transform: translateY(3px); }
.shortcut-wa-icon { width: 1.5rem; height: 1.5rem; flex-shrink: 0; }

/* Ícones dos atalhos secundários: cor tema do tenant (--brand-1) */
.shortcut-icon {
  width: 1.2rem;
  height: 1.2rem;
  flex-shrink: 0;
  color: var(--brand-1, var(--red));
}

.shortcut-btn--sec {
  /* Neumorfismo — mesma receita do .icon-button do kanban do painel
     (imprimir comanda / expandir card): relevo por luz inset no topo-esquerda
     + sombra inset embaixo-direita, sobre fundo translúcido claro. */
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--border);   /* MESMA borda dos cards de item */
  color: var(--text2);
  font-weight: 600;
  box-shadow: 0 8px 18px rgba(0,0,0,0.24),
              inset 2px 2px 4px rgba(255,255,255,0.08),
              inset -2px -2px 5px rgba(0,0,0,0.38);
  transition: transform 0.18s ease, background 0.22s ease,
              box-shadow 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}
.shortcut-btn--sec:hover {
  border-color: var(--border-hover, #3a3a3a);
  color: var(--text);
  background: rgba(255,255,255,0.11);
}
/* Toque: afunda 3px, igual aos botões do kanban */
.shortcut-btn--sec:active { transform: translateY(3px); }

.shortcut-row {
  display: flex;
  gap: 0.625rem;
}
.shortcut-row .shortcut-btn { flex: 1; }

/* ===== MODO STAFF ===== */
.staff-bar-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.16,1,0.3,1);
}
.staff-bar-wrap.visible {
  grid-template-rows: 1fr;
}
.staff-bar-inner {
  overflow: hidden;
  min-height: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.staff-bar-wrap.visible .staff-bar-inner {
  opacity: 1;
}
.staff-bar {
  display: flex;
  background: var(--red);
  padding: 0.4rem 0.75rem;
  align-items: center;
  gap: 0.5rem;
}

.staff-icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  color: #fff;
  opacity: 0.9;
}

.staff-select {
  flex: 1;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  font-family: var(--font);
  font-size: var(--fs-md);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 0.75rem;
}
.staff-select:focus { border-color: var(--text2); }

.staff-exit {
  background: rgba(0,0,0,0.2);
  border: none;
  color: #fff;
  border-radius: var(--radius);
  width: 2rem;
  height: 2rem;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}
.staff-exit:hover { background: rgba(0,0,0,0.4); }

/* staff-bar agora é fluxo normal — empurra header naturalmente */

/* PIN modal */
.staff-pin-ov {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(0,0,0,0.85);
  display: none;
  align-items: center;
  justify-content: center;
}
.staff-pin-ov.visible { display: flex; }

.staff-pin-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  text-align: center;
  width: 90%;
  max-width: 20rem;
}

.staff-pin-title {
  font-size: var(--fs-xl);
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.staff-pin-sub {
  font-size: var(--fs-md);
  color: var(--text2);
  margin-bottom: 1.5rem;
}

.staff-pin-inputs {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  margin-bottom: 1rem;
}

.staff-pin-digit {
  width: 3.25rem;
  height: 3.75rem;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  outline: none;
  transition: border-color 0.15s;
}
.staff-pin-digit:focus {
  border-color: var(--green);
}

.staff-pin-err {
  color: var(--red);
  font-size: var(--fs-sm);
  min-height: 1.25rem;
  margin-bottom: 0.5rem;
}

.staff-pin-btn {
  width: 100%;
  padding: 0.75rem;
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: var(--fs-lg);
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 0.5rem;
}

.staff-pin-cancel {
  width: 100%;
  padding: 0.5rem;
  background: none;
  color: var(--text2);
  border: none;
  font-family: var(--font);
  font-size: var(--fs-md);
  cursor: pointer;
}

/* Staff submit button */
.resumo-staff-btn {
  margin-top: 1rem;
  background: rgba(74,222,128,0.12) !important;
  border-color: rgba(74,222,128,0.35) !important;
  color: #4ade80 !important;
  box-shadow: 0 0 16px rgba(74,222,128,0.15) !important;
  gap: 0.5rem;
}
.resumo-staff-btn svg { flex-shrink: 0; }
.resumo-staff-btn.staff-btn--fiado {
  background: rgba(245,158,11,0.12) !important;
  border-color: rgba(245,158,11,0.35) !important;
  color: #f59e0b !important;
  box-shadow: 0 0 16px rgba(245,158,11,0.15) !important;
}
.resumo-staff-btn.staff-btn--fiado .pag-icon {
  background-color: #f59e0b;
}

/* Staff send link button */
.staff-send-link {
  margin-top: 1rem;
  background: rgba(37,211,102,0.12) !important;
  border-color: rgba(37,211,102,0.35) !important;
  color: #25d366 !important;
  box-shadow: 0 0 16px rgba(37,211,102,0.15) !important;
}
.staff-send-link .pag-icon {
  background-color: #25d366 !important;
}

/* Staff mode toast */
.staff-toast {
  position: fixed;
  bottom: 6rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--green);
  color: #0a0a0a;
  font-family: var(--font);
  font-size: var(--fs-lg);
  font-weight: 700;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-lg);
  z-index: 600;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.staff-toast.visible { opacity: 1; }

/* ===== DESKTOP RESPONSIVIDADE ===== */
@media (min-width: 768px) {
  html {
    /* Desktop fluido (dono 2026-08-20): reta que passa por 1920px = 16px
       (o visual desktop aprovado) e 1280px = 15px; piso 14px encaixa suave
       no teto de 15px do mobile, teto 18px pra ultrawide não estourar. */
    font-size: clamp(14px, 13px + 0.15625vw, 18px);
  }
  body {
    padding-bottom: 0;
  }

  /* Dono pediu (2026-08-20): no desktop a busca não precisa ser tão larga —
     encolhe (mas nao tanto: 22rem) pra caber o "Resultado para X (N itens)"
     colado na lateral direita dela, entre ela e o status da loja. */
  .hdr-search-wrap {
    flex: 0 1 22rem;
  }
  .hdr-search-result {
    display: flex;
    align-items: center;
    justify-content: flex-start;  /* colado a esquerda, logo apos a busca — nao centralizado */
    flex: 1;
    min-width: 0;
    color: #fff;
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* "Resultado para X" já mora no header nessa largura — some a copia
     duplicada que ficava no corpo (só aparece durante busca ativa). */
  .sec-hdr {
    display: none;
  }

  /* Respiro lateral em tela larga: header, banner e seções herdam via --gutter.
     Igual ao gap entre cards (0.75rem) pra espaçamento homogêneo.
     Filtros (scroll strip) ganham o mesmo recuo pra 1ª/última pill alinharem. */
  :root { --gutter: 0.75rem; }
  .hdr-filters {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    /* Dono pediu (2026-08-20): essa faixa encosta nas laterais da TELA no
       desktop, ao contrario das outras linhas do header (logo/busca, banner)
       que ficam centralizadas em 1200px — remove o teto/centralizacao so
       aqui. */
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    /* Mascara de esfumacao nas duas pontas: o texto da pill dissolve em vez
       de cortar seco quando ela escorrega pra fora da area visivel do
       scroll (funciona com QUALQUER fundo atras, ao contrario do gradiente
       solido usado no mobile pro fade da direita). */
    -webkit-mask-image: linear-gradient(to right, transparent, black 2.5rem, black calc(100% - 2.5rem), transparent);
    mask-image: linear-gradient(to right, transparent, black 2.5rem, black calc(100% - 2.5rem), transparent);
  }

  /* Items em COLUNAS INDEPENDENTES (masonry): cada .items-col e um flex-column
     proprio, entao expandir um card empurra so os cards abaixo DELE, na mesma
     coluna — a outra coluna nao mexe. As colunas sao montadas via JS
     (applyMasonry, distribuicao round-robin = mesma ordem do grid antigo).
     N de colunas por breakpoint: 2 aqui, 3 em >=1200, 1 no celular (<768). */
  .items {
    display: flex;
    flex-direction: row;
    align-items: flex-start;   /* cada coluna com altura propria (nao estica) */
    gap: 0.75rem;
  }
  /* Vao banner→1o card acompanha o gap do grid neste breakpoint */
  body.has-banner #main > .sec:first-of-type { padding-top: 0.75rem; }
  .items-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  /* Cards maiores com imagem maior (miniatura 1.2x: 6.25rem -> 7.5rem;
     +15% dono 2026-08-20: 7.5rem -> 8.63rem, mesma proporcao usada na
     regra base/desktop grande — +/- ficam no tamanho fixo de sempre) */
  .item {
    padding: 0.75rem;
  }
  .item-img, .item-img-placeholder {
    width: 9.7rem;
    height: 9.7rem;
  }

  /* Escala 1.2x dos elementos do header no tablet/TV */
  /* Logo animada (3rem -> 3.6rem) */
  .hdr-logo-wrap, .hdr-logo {
    width: 3.6rem;
    height: 3.6rem;
  }
  /* Fonte do scroll de categorias (1.08rem -> ~1.3rem) */
  .filter-btn {
    font-size: 1.3rem;
  }
  /* Label de busca acompanha o mesmo tamanho das categorias */
  .sec-title {
    font-size: 1.3rem;
  }
  /* Input de busca = mesmo tamanho das categorias no tablet */
  .hdr-search-input,
  .search-shimmer {
    font-size: 1.3rem;
  }
  /* Banner 1.5x: cada slide passa de 33.333% para 50% da viewport */
  .banner-carousel { --slide-pct: 50; }
  .banner-slide { flex: 0 0 50%; }
  /* A gaveta agora vive DENTRO do quadro do banner, entao nao precisa mais se
     alinhar ao slide por conta propria: este max-width/padding era do tempo em
     que ela descia por fora e, aqui dentro, so empurrava a lista 7.6px pra
     dentro — o respiro lateral dela deixava de bater com o do card. */
  /* Chip de status 1.2x sobre a base maior */
  .loja-status--compact .loja-status-txt { font-size: 1.32rem; }
  /* Mesma especificidade da regra "solo face" (linha ~489: 3 classes) — só
     assim o override do desktop vence de fato (2 classes perdia sempre,
     medido ao vivo: a fonte continuava saindo em 1.1rem mesmo aqui dentro). */
  .loja-status--compact .loja-status-flip .loja-status-hours { font-size: 1.32rem; }  /* igual ao txt — mesma fonte nas 3 faces */
  .loja-status-clock { width: 1.25rem; height: 1.25rem; }

  /* Carrinho fixo em baixo, full-width no desktop.
     Top maior pra caber o rotulo "Total:" acima do LCD. */
  .cart {
    left: 0;
    right: 0;
    max-width: 100%;
    border-radius: 0;
  }
  .cart-bar {
    padding: 2.6rem 3rem 1.7rem;
  }

  /* Botao "Pagar" 1.3x no desktop (dono 2026-08-22), mesma proporcao
     usada no corpo do checkout — legivel de longe num monitor. */
  .cart-btn {
    padding: 0 1.82rem;
    height: 4.16rem;
    font-size: 1.586rem;
    gap: 0.715rem;
  }
  .cart-btn-icon {
    width: 2.015rem;
    height: 2.015rem;
  }

  /* ── Resumo/checkout fullscreen — landscape 2 colunas ──
     Ritmo base: 0.75rem entre elementos, 1rem entre secoes */

  .resumo-box {
    width: 100%;
    max-width: 100%;
    height: 100%;   /* 100% de .resumo-ov (max-height:100vh quando aberto) */
    border-radius: 0;
    border: none;
    /* Landscape: ritmo base da seção = 1rem (ver comentário acima) */
    padding: 1.25rem 3rem calc(1rem + var(--sp-plaque-h, 1.9rem));
    display: grid;
    /* 3 colunas: esquerda / divisor (largura do proprio conteudo, 1px) / direita.
       Gap de 1.25rem NOS 2 LADOS do divisor = ele fica exatamente no centro do
       espaco entre colunas (antes: border-left no inicio da col direita, que
       cai no FIM do gap, nao no meio — ficava ~20px fora do centro real). */
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto 1fr;
    gap: 0 1.25rem;
    align-content: start;
    overflow-y: auto;
  }

  /* Logo MP — full-width row (span nas 3 colunas) */
  .resumo-mp-logo {
    grid-column: 1 / -1;
    margin-bottom: 0.975rem;
    width: 11.7rem;
  }

  /* Divisor: linha centrada no gap, esticada pra altura da linha do grid. */
  .resumo-divider {
    display: block;
    width: 1px;
    background: var(--border);
    align-self: stretch;
  }

  /* ── Colunas ── */
  .resumo-col {
    display: flex;
  }

  /* Nome/Telefone lado a lado: flex ROW+WRAP (nao column) — cada filho ocupa
     a linha toda (100%) por padrao, EXCETO nome/telefone, que dividem 50/50.
     (bug anterior: flex-direction:column + inline-flex nos filhos NAO os
     coloca lado a lado — container em flex-direction:column sempre empilha
     no eixo principal vertical, ignorando o "inline" do display; sobrava
     metade da coluna vazia ao lado de cada campo.) */
  .resumo-col--left {
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    padding-right: 2rem;
  }
  .resumo-col--left > * {
    flex: 0 0 100%;
  }

  .resumo-col--right {
    display: flex;
    flex-direction: column;
    padding-left: 2rem;
  }

  /* ── Total destaque na coluna direita ──
     Fonte/padding/raio agora vem do seletor coletivo (.resumo-total,
     .resumo-total-right) la em cima, com clamp responsivo — mesmo
     formato do .item-price dos cards, mobile e desktop juntos (dono
     2026-08-22, 3a rodada). Aqui so o que e mesmo exclusivo do layout
     desktop (virar bloco centralizado com linha divisoria embaixo). */
  .resumo-total-right {
    /* letter-spacing tirado daqui (5a rodada): 0.5px deixava o texto mais
       apertado que o .cart-total/.item-price (1.5px, do seletor
       coletivo) - herda o padrao agora, mesma largura de verdade. */
    display: block;
    text-align: center;
    color: var(--red);
    margin-bottom: 1.3rem;
    border-bottom: 1px solid var(--border);
  }

  /* ── Coluna esquerda: itens ── */
  .resumo-list {
    margin-bottom: 0.975rem;
    gap: 0.65rem;
  }

  .resumo-item {
    padding: 0.4875rem 0;
    font-size: calc(var(--fs-lg) * 1.3);
    gap: 0.975rem;
  }

  .resumo-item-thumb,
  .resumo-item-thumb-placeholder {
    width: 3.575rem;
    height: 3.575rem;
  }

  .resumo-item-thumb-placeholder {
    font-size: 1.3rem;
  }

  /* Botao "remover" (x) sobre a miniatura — mesma escala 1.3x */
  .resumo-item-rm {
    width: 1.4625rem;
    height: 1.4625rem;
    top: -0.39rem;
    right: -0.39rem;
    font-size: 0.975rem;
  }

  .resumo-item-qty {
    font-size: calc(var(--fs-lg) * 1.3);
  }

  .resumo-item-acomp {
    font-size: calc(var(--fs-sm) * 1.3);
    padding-left: 1.95rem;
    margin-top: 0.325rem;
  }

  /* ── Observacao ── */
  .resumo-obs {
    margin-bottom: 0.975rem;
    width: 100%;
  }

  .resumo-cupom {
    gap: 0.65rem;
    margin-top: 0.975rem;
  }

  .resumo-cupom-btn {
    padding: 0 1.625rem;
    font-size: 1.17rem;
  }

  .resumo-cupom-msg {
    font-size: 1.04rem;
    padding: 0.4875rem 0.325rem 0;
  }

  /* ── Taxa — total esquerda escondido (ja aparece na direita) ── */
  .resumo-taxa {
    margin-bottom: 0.325rem;
    margin-top: 0.65rem;
    padding: 0.65rem 0.325rem;
    font-size: calc(var(--fs-sm) * 1.3);
  }

  .resumo-acrescimo {
    font-size: calc(var(--fs-sm) * 1.3);
    padding: 0 0.65rem;
    margin-bottom: 0.325rem;
  }

  .faturado-aviso {
    padding: 0.65rem 0.975rem;
    margin-top: 0.65rem;
    font-size: calc(var(--fs-sm) * 1.3);
  }

  .resumo-col--left .resumo-total {
    display: none;
  }

  /* ── Inputs — tamanho harmonico ── */
  .resumo-nome-input,
  .resumo-telefone-input,
  .resumo-obs-input,
  .resumo-endereco-input,
  .resumo-troco-input {
    padding: 0.8125rem 1.1375rem;
    font-size: calc(var(--fs-lg) * 1.3);
    height: auto;
  }

  .gcm-mesa-input {
    padding: 1.1375rem 0.65rem;
    font-size: calc(var(--fs-lg) * 1.3);
  }

  /* ── Nome + Telefone lado a lado ──
     O container pai (.resumo-col--left) agora e flex-direction:ROW+wrap, entao
     "flex" (nao "width" com inline-flex) e o que realmente posiciona os 2 itens
     lado a lado na mesma linha, dividindo o espaco 50/50. */
  .resumo-col--left .resumo-nome,
  .resumo-col--left .resumo-telefone {
    flex: 0 0 calc(50% - 0.5rem);
    margin-bottom: 0.975rem;
  }
  .resumo-col--left .resumo-nome {
    margin-right: 1rem;
  }

  /* ── Tipo entrega ── */
  .resumo-tipo {
    margin-bottom: 0.975rem;
  }

  .resumo-tipo-label {
    font-size: calc(var(--fs-lg) * 1.3);
    margin-bottom: 0.65rem;
  }

  .tipo-btn {
    padding: 0.65rem 0.65rem;
    font-size: calc(var(--fs-lg) * 1.3);
  }

  /* ── Endereco ── */
  .resumo-endereco.visible {
    margin-bottom: 0;
  }

  .resumo-endereco > .slide-inner {
    gap: 1.1375rem;
  }

  .dist-info {
    font-size: calc(var(--fs-sm) * 1.3);
    padding: 0.65rem 0.975rem;
    margin-top: 0.65rem;
  }

  /* ── Labels floating — mesmo offset/padding, escalados junto da fonte ── */
  .resumo-nome-label,
  .resumo-telefone-label,
  .resumo-obs-label,
  .resumo-endereco-label {
    font-size: calc(var(--fs-sm) * 1.3);
    top: -0.845rem;
    padding: 0 0.4875rem;
  }

  .resumo-troco-label {
    font-size: calc(var(--fs-md) * 1.3);
    top: -0.65rem;
    padding: 0 0.4875rem;
  }

  .gcm-mesa-wrap .resumo-nome-label {
    font-size: calc(var(--fs-sm) * 1.495);
  }

  /* ── Pagamento ── */
  .resumo-pag {
    margin-bottom: 0.975rem;
  }

  .resumo-pag-label {
    margin-bottom: 0.8125rem;
    font-size: calc(var(--fs-lg) * 1.3);
  }

  .resumo-pag-section-hdr {
    margin-bottom: 0.65rem;
    gap: 0.78rem;
  }

  .resumo-pag-section-title {
    font-size: calc(var(--fs-md) * 1.625);
  }

  .resumo-pag-btns + .resumo-pag-section-hdr,
  .resumo-troco + .resumo-pag-section-hdr,
  .resumo-pag-sub + .resumo-pag-section-hdr {
    margin-top: 0.975rem;
  }

  .pag-btn {
    padding: 0.8125rem 0.65rem;
    font-size: calc(var(--fs-md) * 1.3);
    gap: 0.325rem;
  }

  .pag-icon {
    width: 2.275rem;
    height: 2.275rem;
  }

  .resumo-pag-sub.visible {
    margin-top: 0.8125rem;
    margin-bottom: 0.8125rem;
  }

  .resumo-pag-sub .slide-inner--grid2 {
    gap: 0.65rem;
  }

  .pag-sub-btn {
    font-size: calc(var(--fs-md) * 1.3);
    padding: 0.8125rem 0.65rem;
  }

  .resumo-troco.visible {
    margin-top: 0.8125rem;
    margin-bottom: 0.8125rem;
  }

  /* ── Checkout forms ── */
  .ck-pix {
    margin-top: 0.975rem;
    /* SEM padding aqui (era 1.3rem) — pedido do usuário 2026-08-17: bug
       real achado medindo (puppeteer): esse padding no wrapper EXTERNO
       somava com o padding PRÓPRIO de .ck-pix-inner (1.25rem, base),
       encolhendo a caixa toda ~37px a mais que .resumo-pag-btns (que não
       tem padding nenhum). .ck-pix-inner sozinho já dá o respiro certo
       do conteúdo — a caixa (borda/fundo) agora bate exata nas laterais
       dos botões. */
  }

  /* QR à esquerda, código+botão de copiar alinhados ao topo à direita, e as
     instruções logo abaixo deles (mesmo lado direito) — pedido do usuário
     2026-08-17: no mobile tudo empilha (faz sentido, coluna estreita), mas
     no desktop a coluna já é larga (metade do .resumo-box, grid 3 colunas)
     e o empilhamento total gastava altura à toa só pra ficar tudo
     centralizado no meio de um espaço largo. .ck-pix-inner e --card-bg
     já compartilham a MESMA largura de .resumo-pag-btns (nenhum dos dois
     tem max-width próprio, ambos vivem em .resumo-col--right) — o
     "desalinhamento" era visual, da centralização; a grade abaixo usa a
     largura inteira, batendo nas laterais dos botões de verdade. */
  .ck-pix.visible .ck-pix-inner {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "header header"
      "qr     code"
      "qr     steps"
      "status status"
      "ok     ok";
    column-gap: 1.5rem;
    text-align: left;   /* era herdado de .ck-pix-inner {text-align:center}, só fazia sentido empilhado */
  }
  .ck-pix-header { grid-area: header; }
  .ck-pix-qr-wrap {
    grid-area: qr;
    margin-top: 0;
    justify-content: flex-start;   /* era center — QR agora ancorado à esquerda, não no meio do espaço vazio */
  }
  .ck-pix-code-wrap {
    grid-area: code;
    margin-top: 0;   /* era o respiro pra ficar ABAIXO do QR no empilhamento; aqui é célula própria */
    align-self: start;
  }
  .ck-pix-steps {
    grid-area: steps;
    margin-top: 0.65rem;
  }
  .ck-pix-status { grid-area: status; }
  .ck-pix-ok { grid-area: ok; }

  .ck-card.visible {
    margin-top: 0.975rem;
  }

  .ck-card.visible > .slide-inner {
    padding: 1.3rem;
  }

  .ck-card-form {
    gap: 0.65rem;
    margin-top: 0.65rem;
  }

  .ck-row {
    gap: 0.975rem;
  }

  .ck-field {
    gap: 0.325rem;
  }

  .ck-input {
    height: 3.0875rem;
    padding: 0 0.975rem;
    font-size: calc(var(--fs-md) * 1.3);
  }

  .ck-card-number-wrap .ck-input {
    padding-right: 4.55rem;
  }

  .ck-card-brand,
  .ck-card-brand svg {
    height: 2.275rem;
  }

  .ck-label {
    font-size: calc(var(--fs-sm) * 1.3);
  }

  .ck-pix-header {
    margin-bottom: 0.8125rem;
    padding-bottom: 0.8125rem;
  }

  .ck-pix-title {
    font-size: calc(var(--fs-lg) * 1.3);
  }

  .ck-pix-total {
    font-size: calc(var(--fs-lg) * 1.3);
  }

  .ck-pix-code-label {
    margin-bottom: 0.65rem;
    font-size: calc(var(--fs-sm) * 1.3);
  }

  .ck-pix-code {
    height: 3.0875rem;
    padding: 0 0.975rem;
    font-size: calc(var(--fs-sm) * 1.3);
  }

  .ck-pix-copy {
    height: 3.0875rem;
    padding: 0 1.3rem;
    font-size: calc(var(--fs-md) * 1.3);
  }

  .ck-pix-steps {
    font-size: calc(var(--fs-md) * 1.3);
  }

  .ck-pix-status {
    gap: 0.65rem;
    font-size: calc(var(--fs-md) * 1.3);
  }

  .ck-pix-status-dot {
    width: 0.65rem;
    height: 0.65rem;
  }

  .ck-pix-ok-icon {
    width: 3.9rem;
    height: 3.9rem;
    font-size: 1.95rem;
  }

  .ck-pix-ok-txt {
    font-size: calc(var(--fs-lg) * 1.3);
  }

  /* ── Botoes de acao ── */
  .resumo-enviar {
    padding: 1.4625rem 1.95rem;
    font-size: 1.4625rem;
    font-weight: 800;
    margin-bottom: 0.975rem;
    margin-top: 0.975rem;
    border-radius: var(--radius-lg);
    letter-spacing: 0.3px;
  }

  .resumo-enviar > svg {
    width: 1.4625rem;
    height: 1.4625rem;
  }

  .resumo-pagar-online {
    padding: 1.4625rem 1.95rem;
    font-size: 1.4625rem;
    margin-top: 0.975rem;
  }

  /* Landscape: só o respiro extra embaixo. Padding/fonte/raio NÃO mudam —
     o botão é o mesmo objeto do design system em qualquer tela. */
  .resumo-voltar {
    margin-bottom: 1.3rem;
    padding: 0.975rem 1.3rem;
    font-size: 1.56rem;
    gap: 0.65rem;
  }

  .resumo-voltar svg {
    width: 1.625rem;
    height: 1.625rem;
  }

  .resumo-enviar .pag-icon {
    width: 2.275rem;
    height: 2.275rem;
  }

  /* ── Scrollbar fina na pagina ── */
  .resumo-box::-webkit-scrollbar {
    width: 6px;
  }
  .resumo-box::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15);
    border-radius: 3px;
  }
  .resumo-box::-webkit-scrollbar-track {
    background: transparent;
  }

  /* Qty badge — maior no desktop (x1.2 igual ao mobile) */
  .item-badge {
    min-width: 1.8rem;
    height: 1.8rem;
    font-size: 0.96rem;
  }

  /* Secoes: mantem respiro lateral via --gutter (alinha com header/banner) */
  .sec {
    padding: 1rem var(--gutter) 0.75rem;
  }

  /* Loja status — sem ajuste extra no desktop */
}

@media (min-width: 1200px) {
  /* 3 colunas independentes em telas grandes — o flex de .items (>=768) ja vale;
     o applyMasonry monta 3 .items-col. Nada a fazer no grid aqui. */
}

/* =========================================================================
   GRUPOS DE OPCOES — expande inline abaixo do card (igual acompanhamentos)
   ========================================================================= */

/* Cabecalho de cada grupo (titulo + badge obrigatorio/opcional) */
.acomp-tabs {
  display: flex;
  gap: 0.375rem;
  margin-top: 0;               /* sem gap: spotlight (top:-3px) cola no divisor de cima */
  margin-bottom: 0.625rem;
  padding-top: 0.85rem;        /* respiro levemente maior entre a descricao e as miniaturas */
  padding-bottom: 0.625rem;
  padding-left: 2px;           /* respiro pra borda do 1o item nao ser cortada pelo overflow-x */
  border-bottom: 1px solid var(--divider-faint);  /* mesma cor do divisor de cima / nav de categorias */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  position: relative; /* ancora pro indicador trapezoidal */
}
/* Miniaturas dos cards (nao a gaveta de promo — essa continua com o scroll
   horizontal de sempre, sem .acomp-tab-thumb como filho, entao esta regra
   nao a afeta): dono pediu QUEBRA DE LINHA em vez de carrossel — quando
   enche a largura do card, pula pra linha de baixo. Fluxo NORMAL (1a do
   lado da 2a do lado da 3a, gap fixo bem pensado) — space-between foi
   testado e reprovado: com só 2 miniaturas elas iam pras pontas opostas com
   um vao gigante no meio, e o negative margin-right pra "esticar" o
   container ate a borda do card cortava pedaco da ultima miniatura contra o
   overflow:hidden do .acomp-inner. Sem isso agora — largura normal do
   painel, sem risco de corte. */
.acomp-tabs:has(.acomp-tab-thumb) {
  flex-wrap: wrap;
  /* 1.25x o gutter do card: as miniaturas respiram um pouco mais entre si
     (dono 2026-08-23) sem descolar da folga lateral que as alinha ao card. */
  row-gap: calc(var(--item-pad-left, 0.75rem) * 1.25);
  column-gap: calc(var(--item-pad-left, 0.75rem) * 1.25);
  overflow: visible;
  padding-left: 0;
  margin-left: -0.25rem;   /* cancela o padding-left do .acomp-inner — pousa na borda esquerda do .item, igual a foto grande */
}
/* Sem option_groups depois das miniaturas: so o divisor de CIMA fica (item-desc-full).
   padding-bottom TAMBEM zera — senao soma com o padding-bottom do .acomp-inner
   (0.75rem) e sobra respiro dobrado no fim do card, sem nada depois pra separar
   (mesmo raciocinio do fix no item-desc-full--no-divider). */
.acomp-tabs--no-divider {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
/* Sem option_groups: nao ha o que "selecionar" de fato entre as unidades —
   todas as miniaturas ficam acesas (sem escurecer a inativa). A variacao de
   brilho so faz sentido quando ha grupos de opcao pra configurar por unidade. */
.acomp-tabs--no-divider .acomp-tab-thumb {
  filter: none;
}
.acomp-tabs::-webkit-scrollbar { display: none; }
.acomp-tab {
  padding: 0.3rem 1.05rem;
  border-radius: 100px;
  border: 1px solid transparent; /* sem borda no inativo (preserva layout) */
  background: transparent;       /* sem fundo no inativo */
  color: var(--text3);
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 700;
  flex-shrink: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.acomp-tab--active {
  color: #f0f0f0;
}

/* Variante miniatura: aba = foto do item + pill de ordem (substitui "Prato N") */
.acomp-tab-thumb {
  position: relative;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--border);  /* cinza suave padrao, igual em ativo e inativo */
  border-radius: min(var(--radius-nested), 35%);   /* derivado do card, igual ao checkbox */
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: filter 0.15s ease;
}
/* SÓ a 1a miniatura de fato. O respiro esquerdo dela já vem do margin-left
   do .acomp-tabs (regra acima) — aqui so falta o raio ANINHADO DE VERDADE
   (mesma harmonia da quina card→foto→notch): raio = raio do CARD
   (--card-radius) − a folga (--item-pad-left). As demais (2a em diante)
   ficam no raio padrão uniforme — homogeneas entre si. */
.acomp-tabs > .acomp-tab-thumb:first-child {
  border-bottom-left-radius: calc(var(--card-radius) - var(--item-pad-left));
}
.acomp-tabs > .acomp-tab-thumb:first-child .acomp-tab-thumb-img,
.acomp-tabs > .acomp-tab-thumb:first-child .acomp-tab-thumb-placeholder {
  border-bottom-left-radius: calc(var(--card-radius) - var(--item-pad-left) - 1px);
}
.acomp-tab-thumb.acomp-tab--active {
  filter: brightness(1.1);  /* selecionado = mais aceso */
}
.acomp-tab-thumb:not(.acomp-tab--active) {
  filter: brightness(0.4);  /* nao selecionado = bem mais escuro, contraste claro */
}
.acomp-tab-thumb-img,
.acomp-tab-thumb-placeholder {
  width: calc(2.75rem - 2px);
  height: calc(2.75rem - 2px);
  border-radius: calc(min(var(--radius-nested), 35%) - 1px);
  /* Igual a miniatura GRANDE (.item-img): imagem inteira, sem cortar (era
     cover, cortava as garrafas) — mesmo fundo var(--surface2) preenchendo
     a folga ao redor. */
  object-fit: contain;
  padding: 2px;
  box-sizing: border-box;
  display: block;
  background: var(--surface2);
}
/* Encaixe dinâmico (2026-08-23): a miniatura é quadrada. Packshot recortado
   (com transparência) fica em contain — cover comeria o gargalo da garrafa.
   Já foto COM fundo é retangular (16:9) e em contain deixava faixa vazia
   dentro do quadradinho: essas vão de cover, preenchendo. Quem decide é o
   alpha da própria imagem, lido no JS (autoFitThumbs); sem resposta (CORS,
   erro) fica o contain de sempre. */
.acomp-tab-thumb-img.thumb-fit-cover {
  object-fit: cover;
  padding: 0;   /* cover com padding deixaria uma moldura de fundo em volta */
}
/* "Imagem inteira" escolhido no painel (Aparência → Imagem dos Produtos) é
   decisão explícita do dono — a dinâmica não passa por cima. */
body.imgfit-contain .acomp-tab-thumb-img {
  object-fit: contain;
  padding: 2px;
}

.acomp-tab-thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--text3);
}
/* Pill do ordinal 1.2x maior (dono 2026-08-23): a caixa cresce junto com o
   número — só a fonte estouraria a pílula. Offset do canto escala igual pra
   manter o mesmo encaixe na quina da miniatura. */
.acomp-tab-thumb-pill {
  position: absolute;
  top: -0.36rem;
  right: -0.36rem;
  min-width: 1.56rem;
  height: 1.26rem;
  padding: 0 0.36rem;
  background: var(--red);
  color: var(--bg2, #111111);
  font-size: 0.78rem;
  font-weight: 800;
  border-radius: 0.45rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.8);
  box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.5);
  pointer-events: none;
}

/* Indicador trapezoidal + spotlight — mesma logica das nav tabs.
   Cor do trapezio = cor do divisor (var(--border)), pra parecer
   que o divisor "se eleva" no tab ativo. Luminancia mantida igual. */
.acomp-tab-indicator,
.acomp-tab-spotlight {
  position: absolute;
  left: 0;
  width: 0;
  opacity: 0;
  pointer-events: none;
  will-change: transform, width;
  transition:
    transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    width 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.2s ease;
}
.acomp-tab-indicator {
  bottom: -1px;          /* gruda com a border-bottom do container */
  height: 4px;
  background: var(--border);
  border-radius: 4px 4px 0 0;
  clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%);
}
.acomp-tab-spotlight {
  top: -3px;
  height: 10px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 100%);
  border-radius: 50%;
  filter: blur(9px);
}

.acomp-grp-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0.45rem 0 0.15rem;
}
.acomp-grp-hdr:first-child {
  margin-top: 1rem;
}
.acomp-grp-title {
  /* Título ACIMA do texto das opções (.acomp-name = 1rem): era 0.9rem, ou
     seja, menor que o próprio conteúdo que ele nomeia. */
  font-size: 1.15rem;
  font-weight: 700;
  color: #f0f0f0;
  letter-spacing: 0.5px;
}
.acomp-grp-meta {
  font-size: var(--fs-sm);
  color: var(--text3);
  font-weight: 200;
}

/* Radio (selecao unica): check circular */
.acomp-row--radio .acomp-check {
  border-radius: 50%;
}

/* Preco da opcao — base aplicada via seletor coletivo de LCD acima.
   Padding compacto pra nao inflar a altura da linha (alinha c/ checkbox). */
.acomp-opt-price {
  /* 1.2x o tamanho anterior (1rem) e o MESMO raio da placa principal do preço
     (.item-price = 1.5rem): os dois displays passam a falar a mesma língua —
     dono 2026-08-22. O raio vem do bloco compartilhado dos LCD (0.5rem), por
     isso precisa ser sobrescrito aqui. */
  font-size: 1.2rem;
  padding: 0.34rem 0.6rem;
  border-radius: 1.5rem;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.3s, text-shadow 0.3s;
}
/* Estado "desligado" (nao selecionado) — display LCD com segmentos apagados.
   Cor escura + glow zerado simula tela de relogio sem energia. */
.acomp-row:not(.checked) .acomp-opt-price {
  color: color-mix(in srgb, var(--brand-1-dark) 22%, transparent);
  text-shadow: none;
}
/* Flash de cor ao marcar/desmarcar a opcao.
   - .pulse-check: pisca vermelho (marcou) — depois fica vermelho (CSS .checked)
   - .pulse-uncheck: pisca verde (desmarcou) — depois volta pro cinza padrao */
.acomp-opt-price.pulse-check {
  animation: opt-price-flash-red 0.7s ease-out;
}
.acomp-opt-price.pulse-uncheck {
  animation: opt-price-flash-green 0.7s ease-out;
}
@keyframes opt-price-flash-red {
  0% {
    color: var(--red);
    text-shadow: 0 0 12px color-mix(in srgb, var(--brand-1) 90%, transparent), 0 0 24px color-mix(in srgb, var(--brand-1) 50%, transparent);
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes opt-price-flash-green {
  0% {
    color: var(--green);
    text-shadow: 0 0 12px rgba(74,222,128,0.9), 0 0 24px rgba(74,222,128,0.5);
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}

/* =========================================================================
   LOJA VIRTUAL — Grid de produtos + Modal fullscreen estilo iFood
   Ativado quando body.tipo-loja-virtual está presente
   ========================================================================= */

/* ── Grid responsivo de cards ──────────────────────────────────────────── */
.items-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}
@media (min-width: 600px)  { .items-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px)  { .items-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) { .items-grid { grid-template-columns: repeat(5, 1fr); } }

.card-loja {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 14px);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s, box-shadow 0.2s, border-color 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.card-loja:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  border-color: var(--text-ghost);
}
.card-loja:active { transform: translateY(0); }
.card-loja.in-cart {
  border-color: var(--red);
  box-shadow: 0 0 0 1px var(--red), 0 6px 20px var(--red-glow, var(--brand-1-glow));
}

.card-loja-img-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #0a0a0a;
  overflow: hidden;
}
.card-loja-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}
.card-loja:hover .card-loja-img { transform: scale(1.04); }
.card-loja-img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: var(--text-dim, #6a6a7a);
  background: linear-gradient(135deg, #0a0a0a 0%, #181818 100%);
}

.card-loja-badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: var(--red);
  color: var(--bg2, #111111);
  font-size: 0.75rem;
  font-weight: 800;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  min-width: 1.4rem;
  text-align: center;
  box-shadow: 0 2px 8px var(--red-glow, var(--brand-1-glow));
}

.card-loja-info {
  padding: 0.6rem 0.7rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1;
}
.card-loja-name {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text, #f0f0f5);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-loja-desc {
  font-size: 0.72rem;
  font-weight: 100;
  color: var(--text-muted);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-loja-price {
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--brand-1);
  margin-top: auto;
  padding-top: 0.25rem;
}

/* Loja virtual: mesmo padding lateral do .sec (alinhado com header) */
.sec--loja {
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}

/* ── Modal fullscreen do produto ───────────────────────────────────────── */
.item-modal-ov {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.item-modal-ov.visible { opacity: 1; }

.item-modal {
  width: 100%;
  max-width: 32rem;
  height: 100dvh;            /* full-height: imagem alcanca o topo da pagina */
  background: var(--bg, #0a0a0a);
  border-radius: 0;          /* sem cantos arredondados (cola no topo) */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(20px);
  transition: transform 0.25s ease;
  box-shadow: 0 -16px 40px rgba(0,0,0,0.5);
}
.item-modal-ov.visible .item-modal { transform: translateY(0); }

@media (min-width: 720px) {
  .item-modal-ov { align-items: center; }
  .item-modal {
    height: auto;
    max-height: 90vh;
    border-radius: 1.25rem;
  }
}

body.modal-open { overflow: hidden; }

/* Close button — sibling direto de .item-modal-ov, top-right na cor do tenant */
.item-modal-ov .modal-close {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 1rem);
  right: 1rem;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.65rem;
  background: var(--brand-1);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1200;
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.45),
    0 2px 4px rgba(0, 0, 0, 0.30);
  transition: transform 0.15s, background 0.2s, filter 0.2s;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  transform: translateY(-8px);
}
.item-modal-ov.visible .modal-close {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.25s ease 0.1s, transform 0.25s ease 0.1s, background 0.2s;
}
.item-modal-ov .modal-close:hover { filter: brightness(1.1); transform: scale(1.05); }
.item-modal-ov .modal-close:active { transform: scale(0.95); }

.modal-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #050505;
  flex-shrink: 0;
  overflow: hidden;
}
.modal-img {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* mostra produto inteiro, sem corte */
  display: block;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.modal-img.loaded { opacity: 1; }
.modal-img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  color: var(--text-dim, #6a6a7a);
}

.modal-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1.25rem 1.25rem 0;
}
.modal-scroll::-webkit-scrollbar { width: 4px; }
.modal-scroll::-webkit-scrollbar-thumb { background: var(--border, #252525); border-radius: 2px; }

.modal-head { margin-bottom: 1.25rem; }
.modal-name {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text-bright, #fff);
  margin-bottom: 0.35rem;
  line-height: 1.2;
}
.modal-desc {
  font-size: 0.88rem;
  color: var(--text-dim, #909090);
  line-height: 1.45;
  margin-bottom: 0.65rem;
}
.modal-price {
  /* REVERTIDO (dono 2026-08-22, 2a rodada): o alvo certo era o botao
     "Adicionar" (.modal-footer-value), nao este texto solto no corpo
     do modal. Volta ao tamanho de sempre. */
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--red);
}

/* Unit tabs (quando qty>1) */
.modal-unit-tabs {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 1rem;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.modal-unit-tabs::-webkit-scrollbar { display: none; }
.modal-unit-tab {
  background: var(--surface, #111);
  border: 1px solid var(--border, #252525);
  color: var(--text-dim, #909090);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.modal-unit-tab.active {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}

/* Grupos de opções */
.modal-grp {
  margin: 0 -1.25rem 1.25rem;
  border-top: 0.5rem solid #050505;
  padding: 1rem 1.25rem 0;
}
.modal-grp-hdr {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.modal-grp-title-wrap { flex: 1; }
.modal-grp-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-bright, #fff);
}
.modal-grp-sub {
  font-size: 0.72rem;
  color: var(--text-dim, #909090);
  margin-top: 0.1rem;
}
.modal-grp-meta {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: var(--surface-2, #181818);
  color: var(--text-dim, #909090);
  flex-shrink: 0;
}
.modal-grp-meta--req {
  background: rgba(52, 152, 219, 0.18);
  color: #5dade2;
}

.modal-opt-list { display: flex; flex-direction: column; position: relative; }
.modal-opt-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.6rem;
  min-height: max(2.75rem, 44px);   /* mesma regua de toque da lista compacta */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border-bottom: 1px solid var(--border, #252525);
  position: relative;
  z-index: 1; /* acima do indicador/spotlight */
}

/* Magic-line VERTICAL: barra trapezoidal na esquerda + spotlight, deslizando
   entre as opcoes. Segue o hover no desktop, volta pro item marcado ao sair
   do modal. Mesmo easeOutBack das nav tabs, mas no eixo Y. */
.modal-opt-indicator,
.modal-opt-spotlight {
  position: absolute;
  left: 0;
  top: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
  will-change: transform, height;
  transition:
    transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    height 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.2s ease;
}
.modal-opt-indicator {
  width: 4px;
  background: var(--brand-1);
  border-radius: 0 4px 4px 0;
  /* trapezio vertical: lado direito (conteudo) cheio, esquerdo recolhido */
  clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 92%);
}
.modal-opt-spotlight {
  left: 0;
  width: 45%;
  background: linear-gradient(to right, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0) 100%);
  filter: blur(7px);
  border-radius: 0 50% 50% 0;
}
.modal-opt-row:last-child { border-bottom: none; }

.modal-opt-thumb {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 0.5rem;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--surface-2, #181818);
}
.modal-opt-thumb--placeholder {
  background: linear-gradient(135deg, #181818 0%, #0a0a0a 100%);
  border: 1px dashed var(--border, #252525);
}
.modal-opt-name {
  flex: 1;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text, #f0f0f5);
}
.modal-opt-price {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-dim, #909090);
  white-space: nowrap;
}
.modal-opt-check {
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  border: 2px solid var(--border-hover, #353535);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.15s;
}
.modal-opt-check-inner {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--red);
  transform: scale(0);
  transition: transform 0.15s ease;
}
.modal-opt-row.checked .modal-opt-check { border-color: var(--red); }
.modal-opt-row.checked .modal-opt-check-inner { transform: scale(1); }
.modal-opt-row.checked .modal-opt-name { color: var(--text-bright, #fff); }
.modal-opt-row.checked .modal-opt-price { color: var(--red); }

/* Observação */
.modal-spacer { height: 1.5rem; }

/* Footer fixo — mesma identidade do cart bar:
   esquerda: valor em LCD digital | direita: botoes remove + add */
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1.7rem 0.875rem calc(1.7rem + env(safe-area-inset-bottom, 0px));  /* lateral 0.875rem = padrao dos cards/cart */
  background: var(--bg2);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

/* Esquerda do footer: label "Total:" acima + LCD pill — mesmo design do cart bar */
.modal-footer-info {
  position: relative;
  display: flex;
  align-items: center;
}
.modal-footer-label {
  position: absolute;
  bottom: calc(100% + 0.15rem);
  left: 0.8rem;
  font-family: var(--font);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  color: var(--text2);
  white-space: nowrap;
}
/* Valor LCD — pill igual ao .cart-total (estilo base vem do seletor coletivo) */
.modal-footer-value {
  /* Mesmo tamanho/padding/raio do .item-price dos cards (dono 2026-08-22,
     2a rodada): o alvo certo era este - o preco que aparece dentro do
     botao "Adicionar" no modal do item, aberto pelo card no cardapio.
     Era pill (999px, igual .cart-total) antes; agora fala a mesma
     lingua do card, sem altura fixa (o padding decide o tamanho). */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(calc(var(--fs-lg) * 1.2), 4.6vw, calc(var(--fs-lg) * 1.9));
  font-weight: 800;
  padding: 0.55rem 0.8rem;
  border-radius: 1.5rem;
  min-height: 3.5rem;  /* igual ao .item-price (4a rodada) */
  box-sizing: border-box;
}

/* Acoes — botoes remove + add lado a lado */
.modal-footer-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.modal-footer-btn {
  height: 3.2rem;
  min-width: 3.2rem;
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 1.08rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0 1.2rem;
  color: #fff;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 0.12s ease,
    box-shadow 0.2s,
    filter 0.2s;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
/* Click feedback: escala centralizada inferior, independente em cada botao. */
.modal-footer-btn:active {
  transform: scale(0.9);
}

/* Reflexo branco varrendo o botao no click — mesmo do painel. */
.modal-footer-btn { overflow: hidden; }
.modal-footer-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,0.5) 45%, rgba(255,255,255,0) 55%);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
}
.modal-footer-btn.shining::after {
  animation: modal-footer-btn-shine 0.65s ease-out forwards;
}
@keyframes modal-footer-btn-shine {
  0%   { left: -100%; opacity: 1; }
  100% { left: 150%;  opacity: 1; }
}

.modal-footer-btn--remove {
  background: var(--green); /* #4ade80 — mesmo verde das pills do checkout */
  color: #0a0a0a;
  box-shadow: 0 4px 16px rgba(74,222,128,0.35);
  padding: 0;       /* botao redondo so com icone */
  width: 3rem;
}
.modal-footer-btn--remove:hover { filter: brightness(1.08); }

.modal-footer-btn--add {
  background: linear-gradient(180deg, var(--brand-2) 0%, var(--brand-1) 100%);
  box-shadow: 0 4px 16px var(--brand-1-glow);
  padding: 0 1.9rem;   /* mais largo pra ser mais "touchavel" */
  font-size: 1.18rem;
}
.modal-footer-btn--add:hover { box-shadow: 0 6px 22px var(--brand-1-glow); filter: brightness(1.05); }
.modal-footer-btn-label {
  font-weight: 700;
  font-size: 1.3rem; /* numero "1" um pouco maior que o + */
  line-height: 1;
}

/* ── Esconder pagamento presencial e tipo "mesa" em loja_virtual ───────── */
body.tipo-loja_virtual .resumo-pag-section-hdr:has(#pag-section-presencial),
body.tipo-loja-virtual .resumo-pag-section-hdr:has(#pag-section-presencial) {
  display: none !important;
}
body.tipo-loja_virtual .resumo-pag-btns:not(.resumo-pag-btns--online),
body.tipo-loja-virtual .resumo-pag-btns:not(.resumo-pag-btns--online) {
  display: none !important;
}
body.tipo-loja_virtual #pag-sub-cartao,
body.tipo-loja_virtual #pag-sub-troco,
body.tipo-loja-virtual #pag-sub-cartao,
body.tipo-loja-virtual #pag-sub-troco {
  display: none !important;
}
body.tipo-loja_virtual .tipo-btn[data-tipo="mesa"],
body.tipo-loja-virtual .tipo-btn[data-tipo="mesa"] {
  display: none !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   BANNER PROMO ANIMADO — fundo girando em espiral + overlay pulsante.
   Cores controlaveis via metadata.promo_colors [c1,c2,c3] do produto.
   ═══════════════════════════════════════════════════════════════════════════ */
.promo-animated {
  --promo-c1: #fff200;
  --promo-c2: #ffb800;
  --promo-c3: #ff7a00;
  position: relative;
  overflow: hidden;
  background: var(--promo-c1);
  border-radius: var(--card-radius);   /* mesmo raio do card/banner */
  aspect-ratio: 720 / 400;
}
.promo-animated::before {
  content: "";
  position: absolute;
  inset: -50%;
  /* Padrao palindromico de 36deg (c1→c2→c3→c2→c1) — divide 360 exatamente
     em 10 repeticoes E termina com c1 (= cor inicial do proximo ciclo).
     Resultado: emenda invisivel + simetria visual entre as cores. */
  background: repeating-conic-gradient(
    from 0deg,
    var(--promo-c1)  0deg    7.2deg,
    var(--promo-c2)  7.2deg 14.4deg,
    var(--promo-c3) 14.4deg 21.6deg,
    var(--promo-c2) 21.6deg 28.8deg,
    var(--promo-c1) 28.8deg   36deg
  );
  animation: promo-spin 18s linear infinite;
  transform-origin: center;
  will-change: transform;
}
.promo-animated::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle, rgba(255,130,0,.45) 0 2px, transparent 2.5px),
    radial-gradient(circle, rgba(255,255,255,.22) 0 1.2px, transparent 1.6px),
    radial-gradient(circle at center, rgba(255,255,255,.35), transparent 45%);
  background-size: 18px 18px, 34px 34px, 100% 100%;
  background-position: 0 0, 10px 8px, center;
  mix-blend-mode: soft-light;
  opacity: 0.8;
  pointer-events: none;
}
/* Overlay PNG: maior + SEM borda (override do .banner-slide img) */
.banner-slide .promo-animated .promo-overlay-img,
.promo-animated .promo-overlay-img {
  position: absolute;
  inset: 0;
  margin: auto;
  max-width: 92%;
  max-height: 92%;
  width: auto;
  height: auto;
  object-fit: contain;
  z-index: 2;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  filter: drop-shadow(0 10px 28px rgba(0,0,0,0.5)) drop-shadow(0 0 16px rgba(255,200,0,0.5));
  animation: promo-pulse 1.6s ease-in-out infinite;
  transform-origin: center;
  will-change: transform;
}
@keyframes promo-spin {
  to { transform: rotate(360deg); }
}
@keyframes promo-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.18); }
}


/* ── Cupom no checkout — herda tokens do resumo (obs-input, taxa-line) ── */
.resumo-cupom { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
.resumo-cupom-input { flex: 1; min-width: 0; text-transform: uppercase; }
.resumo-cupom-input::placeholder { text-transform: none; }
.resumo-cupom-btn {
  padding: 0 1.25rem;
  background: var(--bg);
  /* Mesma borda dos cards (2026-08-17) — era 2px + var(--radius) genérico. */
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, transform 0.1s;
}
.resumo-cupom-btn:active { transform: scale(0.97); }
.resumo-cupom.applied .resumo-cupom-input { border-color: var(--green); }
.resumo-cupom.applied .resumo-cupom-btn { border-color: var(--green); color: var(--green); }
.resumo-cupom-msg { font-size: 0.8rem; padding: 0.375rem 0.25rem 0; }
.resumo-cupom-msg.ok { color: var(--green); }
.resumo-cupom-msg.err { color: #ef4444; }
.resumo-desconto { display: flex; justify-content: space-between; padding: 0.5rem 0.25rem; }
.resumo-desconto-label { color: var(--text3); }
.resumo-desconto-val { color: var(--green); font-weight: 600; }


/* Nota: cupom cobre tudo — nada a pagar online */
.pag-cupom-nota {
  margin-top: 0.75rem;
  padding: 0.75rem 1rem;
  background: rgba(74,222,128,0.08);
  border: 1px solid rgba(74,222,128,0.25);
  border-radius: var(--radius);
  color: var(--green);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.4;
}

/* ─── Loja fechada: cardápio "desligado" ──────────────────────────────────
   Vale para QUALQUER motivo de fechamento (horário ou bloqueio de assinatura).
   Header e logo seguem acesos de propósito: a leitura é "a loja existe, mas a
   parte de vendas está desligada agora" — não "o site quebrou".
   A saturação cai quase toda, mas NÃO a zero: um resto de cor evita o efeito
   de foto preto-e-branca e mantém o cardápio reconhecível.
   O filtro fica em #banner-area/#main (irmãos do carrinho, upsell e resumo),
   então nenhum overlay é escurecido nem preso por containing block. */
body.loja-desligada #banner-area,
body.loja-desligada #main {
  filter: brightness(0.55) saturate(0.18);
  transition: filter 0.45s ease;
}

/* Blur MUITO sutil só nas fotos dos itens. Não no texto: o cardápio continua
   navegável e legível de propósito (o cliente pode olhar tudo, só não fecha
   pedido), e blur em texto rolando é caro em GPU no mobile além de ilegível.
   0.6px basta pra tirar o "brilho de vitrine" das fotos sem embaçar nada. */
body.loja-desligada #main img {
  filter: blur(0.6px);
  transition: filter 0.45s ease;
}

/* ─── Resumo com a loja fechada ───────────────────────────────────────────
   O cliente ve a regra ANTES de preencher nome, telefone e endereco. Antes
   disto ele so descobria ao apertar "Finalizar" — trabalho inteiro perdido.
   O carrinho persiste no localStorage, entao a mensagem e convite, nao muro:
   monta agora, envia quando abrir (mesma logica do template loja_fechada do
   bot, que ja manda "enquanto isso, ja pode ir escolhendo"). */
.resumo-fechada {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-bottom: 1rem;
  padding: 0.8rem 0.9rem;
  border-radius: 0.6rem;
  background: rgba(251, 191, 36, 0.09);
  border: 1px solid rgba(251, 191, 36, 0.28);
  border-left: 3px solid #fbbf24;
}
.resumo-fechada-ic { font-size: 1.15rem; line-height: 1.3; color: #fbbf24; flex-shrink: 0; }
.resumo-fechada-txt { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.resumo-fechada-txt strong { font-size: 0.9rem; color: #fbbf24; font-weight: 700; }
.resumo-fechada-txt span { font-size: 0.8rem; line-height: 1.5; opacity: 0.85; }
.resumo-fechada-txt b { font-weight: 700; }

/* Botao desarmado: diz o motivo em vez de aceitar o clique e reclamar depois.
   Sem som de erro — loja fechada nao e erro do cliente. */
.resumo-enviar--fechada,
.resumo-enviar--fechada:hover {
  background: var(--surface-2, #17171a) !important;
  color: rgba(255, 255, 255, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
  cursor: not-allowed;
  transform: none !important;
  filter: none !important;
}

/* Estado vazio/carregando do cardapio — icone grande centralizado acima */
.empty-state{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.25rem; text-align:center; min-height:60vh; padding:2rem;
  color:var(--text,#f2f2f5);
}
.empty-state svg{ width:clamp(56px,14vw,96px); height:clamp(56px,14vw,96px); opacity:.5; color:var(--accent,#e8a33d); }
.empty-title{ font-size:clamp(1.4rem,5vw,2rem); font-weight:800; letter-spacing:-0.01em; }
.empty-sub{ font-size:clamp(.95rem,3.4vw,1.15rem); opacity:.65; max-width:28ch; line-height:1.5; }

/* ── Dados da loja (modal aberto pela logo / rodapé) ── */
.cardapio-footer{ text-align:center; padding:2rem 1rem 4rem; }
.cf-link{
  background:none; border:0; cursor:pointer; font:inherit;
  color:var(--text-muted,#8a8a92); font-size:.8rem; letter-spacing:.02em;
  text-decoration:underline; text-underline-offset:3px; padding:.5rem;
}
.cf-link:hover{ color:var(--text,#f2f2f5); }
.li-ov{
  position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.6); backdrop-filter:blur(4px); padding:1.25rem;
  opacity:0; transition:opacity .22s ease;
}
.li-ov.visible{ opacity:1; }
.li-card{
  position:relative; width:100%; max-width:24rem;
  background:var(--card-bg,#16161a); border:1px solid var(--glass-border,rgba(255,255,255,.1));
  border-radius:var(--radius,14px); padding:1.5rem 1.4rem 1.25rem;
  transform:translateY(12px) scale(.98); transition:transform .22s cubic-bezier(.16,1,.3,1);
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.li-ov.visible .li-card{ transform:none; }
.li-x{
  position:absolute; top:.5rem; right:.6rem; background:none; border:0; cursor:pointer;
  color:var(--text-muted,#8a8a92); font-size:1.6rem; line-height:1; padding:.25rem .5rem;
}
.li-x:hover{ color:var(--text,#f2f2f5); }
.li-title{ font-size:1.25rem; font-weight:800; color:var(--text,#f2f2f5); margin-bottom:1rem; padding-right:1.5rem; }
.li-row{ display:flex; flex-direction:column; gap:.15rem; padding:.6rem 0; border-top:1px solid var(--glass-border,rgba(255,255,255,.08)); }
.li-row:first-child{ border-top:0; }
.li-rot{ font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted,#8a8a92); }
.li-val{ font-size:.95rem; color:var(--text,#f2f2f5); word-break:break-word; }
.li-empty{ color:var(--text-muted,#8a8a92); font-size:.9rem; padding:.5rem 0; }

/* Sem logo do tenant ainda (config carregando): congela o flip do logo na face
   Motobot (colorida por CSS), em vez de flipar pra face 'brand' vazia. */
.hdr-logo-wrap.logo-no-flip { animation: none !important; transform: perspective(400px) rotateX(0deg) !important; }
.hdr-logo-wrap.logo-no-flip .hdr-logo--brand { display: none; }

/* Loja sem horario definido (tenant novo): status FECHADO fixo, sem flip. */
.loja-status.status-no-flip .loja-status-flip { animation: none !important; transform: none !important; }
.loja-status.status-no-flip .loja-status-hours { display: none !important; }

/* ─── Régua de marcas (acervo Ambev — vertical depósito) ─────────────────────
   Carrossel vivo de logos abaixo do nav. Cada chip usa a cor oficial da marca
   (--marca-cor, manifest do acervo) como fundo. Efeito dock: a logo do CENTRO
   cresce bem mais que as outras (transform vem do JS, marcasFocusTick, dirigido
   pelo scroll — a inércia do momentum é a animação). Anda sozinha (marcasAuto);
   o toque interrompe e, de onde ficou, o automático retoma.
   INFINITO (dono 2026-08-20): fila triplicada + wrap no marcasAuto — a régua
   nasce preenchida de ponta a ponta, sem o padding-inline de 50% de antes
   (não há mais "pontas": toda logo sempre alcança o centro). */
/* Motor em TRANSFORM (dono 2026-08-20): a régua NÃO rola mais por scroll —
   a .marcas-track anda por translate3d (GPU), dirigida pelo marcasAuto.
   touch-action: pan-y = eixo X é nosso, scroll vertical segue com a página. */
.hdr-marcas {
  overflow: hidden;
  padding: 2rem 0 2.15rem;
  touch-action: pan-y;
  cursor: grab; user-select: none; -webkit-user-select: none;
  /* Divisores na MESMA borda que o nav tem em cima (dono 2026-08-20):
     border-top separa nav ⇄ carrossel; border-bottom fecha o bloco embaixo.
     Vivem aqui (e não no nav) pra não dobrar linha nos tenants sem régua. */
  /* border-top saiu (2026-08-24): a linha entre nav e regua agora e a
     border-bottom do .hdr-filters — aqui so o fechamento de baixo. */
  border-bottom: 1px solid var(--divider-faint);
}
.marcas-track {
  position: relative;   /* offsetLeft dos chips = coordenada da faixa */
  display: flex; gap: 1.3rem; width: max-content;
  will-change: transform;
}
.marca-chip {
  flex: none; width: 4.1rem; height: 4.1rem; border-radius: 50%;
  /* Anel "boca de tubo" (dono 2026-08-19): borda grossinha no MESMO tom de
     cinza, mas em gradiente de luminância — luz pega no topo do anel e morre
     embaixo, como metal refletindo. Truque: borda transparente + dois
     backgrounds (cor da marca no padding-box, gradiente do anel no border-box). */
  border: 3px solid transparent;
  background:
    linear-gradient(var(--marca-cor, #222), var(--marca-cor, #222)) padding-box,
    linear-gradient(168deg, #5a5a5a, var(--border, #2a2a2a) 42%, #1b1b1b 74%, #3d3d3d) border-box;
  padding: .5rem; cursor: pointer;
  /* Boca de tubo: sombra interna no topo (profundidade), fio de luz interno
     embaixo e sombra projetada PRA BAIXO do anel. */
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.35),
    inset 0 -1px 2px rgba(255,255,255,.07),
    0 6px 11px -4px rgba(0,0,0,.6);
  will-change: transform; position: relative;
  /* transform é do JS (scroll-driven); aqui só o resto, com bezier "Apple"
     (ease-out-quint suave) pro acender/apagar do filtro e do press.
     `scale` é a propriedade INDIVIDUAL (compõe com o transform do dock sem
     brigar): é por ela que a marca ativa cresce, em 3s ease-in-out. */
  scale: 1;
  transition: opacity .16s cubic-bezier(.22,1,.36,1),
              box-shadow .35s cubic-bezier(.22,1,.36,1),
              filter .18s cubic-bezier(.22,1,.36,1),
              scale 3s cubic-bezier(.65,0,.35,1);
}
.marca-chip img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
.marca-chip:active { filter: brightness(.82) saturate(1.1); }
/* Uma marca filtrando: ela acende, as outras apagam — affordance clara de
   "toca de novo pra soltar o filtro". O tamanho extra da ativa vem do JS. */
.hdr-marcas.has-active .marca-chip { opacity: .38; }
/* Sem anel branco (dono 2026-08-20): a escolhida fica como é naturalmente —
   só mais ACESA que as vizinhas e MAIOR, crescendo em 3s ease-in-out (a
   transição de `scale` está no .marca-chip). */
.hdr-marcas.has-active .marca-chip--active {
  opacity: 1;
  filter: brightness(1.28) saturate(1.08);
  scale: 1.16;
}

/* Selinho da marca nos cards (mesmo acervo/cor da régua) — INLINE no texto
   do título (dono 2026-08-19): faz parte da primeira linha; se o nome quebra,
   a segunda linha corre embaixo dele. pointer-events none: o card continua
   sendo o alvo do toque. */
.item-marca, .card-loja-marca {
  display: inline-flex; pointer-events: none;
  vertical-align: -0.42em; margin-right: .4rem;
  border: 1px solid var(--border, #2a2a2a);
  border-radius: 50%; background: var(--marca-cor, #222);
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.item-marca { width: 1.5rem; height: 1.5rem; padding: .22rem; }
.card-loja-marca { width: 1.7rem; height: 1.7rem; padding: .25rem; }
.item-marca img, .card-loja-marca img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Recorte côncavo na quina da FOTO (referência do dono, 2026-08-19): o +/-
   mora num "notch" cavado no canto inferior direito da imagem — fundo do
   CARD (--surface) invade a foto, e dois filetes côncavos (radial-gradient
   transparente por dentro do raio, surface por fora) fazem a curva invertida.
   Substitui o teste anterior da bandeja no rodapé. */
/* Press na foto (nao no notch — ele tem o proprio feedback nos botoes). */
.item-img-wrap:active .item-img,
.item-img-wrap:active .item-img-placeholder { transform: scale(0.985); }
.item-img, .item-img-placeholder { transition: opacity 0.35s ease, transform 0.12s ease; }

.img-qty-notch {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  /* Coluna (dono 2026-08-20): o "-" empilha ACIMA do "+", que fica fixo
     na quina. Container ancorado no bottom, entao crescer em altura
     empurra o topo pra cima — o "-" nasce de tras do "+" subindo,
     em vez de arrastar pra esquerda. */
  flex-direction: column;
  align-items: center;
  gap: var(--notch-space);
  /* Respiro maior entre o botão e a curva côncava (dono 2026-08-20).
     Mesmo --notch-space do .item-badge — tudo na quina usa o mesmo respiro. */
  padding: var(--notch-space) 0 0 var(--notch-space);
  background: var(--card-bg, var(--surface));
  border-top-left-radius: 1.5rem;
}
.img-qty-notch::before,
.img-qty-notch::after {
  content: '';
  position: absolute;
  width: 1rem;
  height: 1rem;
  /* Quarto de círculo transparente (mostra a foto), resto = fundo do card */
  background: radial-gradient(circle at 0 0, transparent 1rem, var(--card-bg, var(--surface)) 1rem);
  pointer-events: none;
}
.img-qty-notch::before { right: 0; bottom: 100%; }
.img-qty-notch::after  { right: 100%; bottom: 0; }
.img-qty-notch .qty-btn { width: 3.05rem; height: 3.05rem; }
/* Raio aninhado na quina EXTERNA (dono 2026-08-20): a quina inferior direita
   do "+" coincide com a quina da miniatura (1.5rem) e é concêntrica à do card
   (1.5rem + folga). Só ela abre pra 1.5rem — as outras 3 seguem no 0.85rem. */
.img-qty-notch .qty-btn--plus { border-bottom-right-radius: 1.5rem; }
/* Raio aninhado na quina INTERNA (espelha o cálculo do "+" acima): a quina
   superior esquerda do "-" fica encostada na curva côncava interna do notch
   (border-top-left-radius: 1.5rem do .img-qty-notch), afastada dela por
   --notch-space. Pra ficar concêntrica (mesmo centro de curvatura), o raio
   do botão = raio externo − o afastamento: 1.5rem − 0.6rem = 0.9rem — mais
   aberto que o 0.85rem padrão do squircle, casando com a curva de fora. */
.img-qty-notch .qty-btn--minus {
  border-top-left-radius: calc(1.5rem - var(--notch-space));
  /* Quina direita (topo e baixo) = mesmo raio padrão do squircle do "+"
     (0.85rem), pra casar visualmente entre os dois botões. */
  border-top-right-radius: 0.85rem;
  border-bottom-right-radius: 0.85rem;
  transition: height 0.22s ease, opacity 0.22s ease, margin 0.22s ease, border-radius 0.22s ease;
}
.img-qty-notch .qty-btn--minus.collapsed {
  height: 0;
  min-height: 0;
  padding: 0;
  border-width: 0;
  margin-bottom: calc(-1 * var(--notch-space));  /* anula o gap do flex */
  opacity: 0;
  pointer-events: none;
}

/* ─── Encaixe da foto no card — ajuste dinâmico do tenant ────────────────────
   (Aparência → Imagem dos Produtos; appearance.card.img_fit no banco.)
   Sem classe = padrão de cada layout. cover corta pra encher o quadrado;
   contain mostra a imagem inteira com respiro. */
body.imgfit-cover .item-img { object-fit: cover; padding: 0; }
body.imgfit-contain .item-img { object-fit: contain; }
body.imgfit-cover .card-loja-img { object-fit: cover; padding: 0; }
body.imgfit-contain .card-loja-img { object-fit: contain; padding: .4rem; box-sizing: border-box; }

/* ─── Reflexo de vidro nas logos (dono 2026-08-19) ───────────────────────────
   Brilho branco entrando pela quina superior esquerda + escurecida sutil na
   parte de baixo — a logo ganha leitura de botão de vidro convexo. Overlay em
   ::after, por cima da imagem, sem tocar no clique. */
.marca-chip::after {
  content: '';
  position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(120% 90% at 22% 12%, rgba(255,255,255,.30), rgba(255,255,255,.07) 36%, transparent 56%),
    linear-gradient(to bottom, transparent 58%, rgba(0,0,0,.24) 100%);
  pointer-events: none;
}
/* Selinhos dos cards: mesmo vidro, mais discreto (peça pequena) */
.item-marca::after, .card-loja-marca::after {
  content: '';
  position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(120% 90% at 24% 14%, rgba(255,255,255,.26), rgba(255,255,255,.05) 38%, transparent 58%),
    linear-gradient(to bottom, transparent 60%, rgba(0,0,0,.2) 100%);
  pointer-events: none;
}
.item-marca, .card-loja-marca { position: relative; overflow: hidden; }

/* ─── Card delivery no MOBILE (dono 2026-08-20) ──────────────────────────────
   Desktop aprovado como está; no mobile a miniatura 11.3rem empurrava o texto.
   Miniatura menor, rádio-relógio no tamanho anterior, e folga maior entre a
   miniatura e as bordas do card — raio do card recalculado pela regra de raio
   aninhado (externo = interno 1.5rem + folga 0.55rem). */
@media (max-width: 640px) {
  .item {
    /* Folga ÚNICA 0.55rem nos 4 lados (dono 2026-08-20): a esquerda tinha
       0.75rem e o rádio-relógio ficava 2px mais longe da borda esquerda do
       que da inferior — a olho cirúrgico destoava. */
    padding: 0.55rem;
    border-radius: var(--card-radius);
    --item-pad-left: 0.55rem;
  }
  /* Folga maior no mobile -> raio maior. No :root pra valer tambem pro banner. */
  :root { --card-radius: calc(1.5rem + 0.55rem); --item-pad-left: 0.55rem; }
  .item-img,
  .item-img-placeholder {
    width: 9.5rem;
    height: 9.5rem;
  }
  /* Nome do produto desce e encosta no topo do rádio-relógio (dono
     2026-08-20): a coluna ancora tudo embaixo; o gap de 5px (0.5rem) da
     .item-info vira o respiro nome→placa. margin-top:auto da placa sai
     senão ele empurraria o nome de volta pro topo. */
  .item-info { justify-content: flex-end; }
  .item-price {
    margin-top: 0;
    /* Dígitos maiores no mobile (dono 2026-08-20): a placa cresceu mas o
       conteúdo ficou pequeno; clamp mais agressivo aproveita a largura.
       O ghost (::before) usa font:inherit — acesos e apagados escalam juntos. */
    font-size: clamp(calc(var(--fs-lg) * 1.8), 7vw, calc(var(--fs-lg) * 3));
  }
  /* MESMO clamp agressivo do .item-price aqui em cima (dono 2026-08-22,
     3a rodada): sem isto, no mobile o card ficava com digito maior que
     a barra flutuante/checkout — o clamp "padrao" (usado no desktop)
     é mais conservador e não bate no card fora deste breakpoint. */
  .cart-total,
  .resumo-total,
  .resumo-total-right,
  .modal-footer-value {
    font-size: clamp(calc(var(--fs-lg) * 1.8), 7vw, calc(var(--fs-lg) * 3));
    /* Padding calibrado pro mobile (6a rodada, mesma causa do font-size
       acima): a coluna do card e mais larga aqui que no desktop, entao
       o padding pra "chegar perto" tambem precisa ser maior aqui. */
    padding-left: 1.65rem;
    padding-right: 1.65rem;
  }
}


/* Rotulo do grupo de opcoes com dois-pontos — pedido do dono pra vertical de
   deposito (2026-08-21). Feito em ::after de proposito: mudar o nome no banco
   contaminaria o texto que o bot manda no WhatsApp. */
body.tipo-distribuidor_bebidas .acomp-grp-title::after,
body.tipo-distribuidor_bebidas .modal-grp-title::after { content: ':'; }