/* =============================================================================
   Folha de estilo do cliente — tokens de design-base.md seção 3.
   Validada no mockup antes de virar código.

   A cor de acento vem do tenant e é injetada inline no layout. Aqui fica só
   o fallback. Regra da seção 4.1: acento é PREENCHIMENTO; para texto usa-se
   --c-accent-text, a variante escurecida calculada em PHP.
   ============================================================================= */
:root{
  --r-sheet:16px; --r-card:12px; --r-input:8px; --r-pill:999px;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px;
  --t-xs:12px; --t-sm:14px; --t-md:16px; --t-lg:18px; --t-xl:22px; --t-2xl:26px;

  --c-text:#222222; --c-text-soft:#717171; --c-border:#DDDDDD;
  --c-surface:#F7F7F7; --c-bg:#FFFFFF;
  --c-ok:#00A650; --c-alerta:#B45309; --c-erro:#C2181B;

  --c-accent:#222222; --c-accent-text:#222222; --c-on-accent:#FFFFFF;

  --shadow-sheet:0 -2px 16px rgba(0,0,0,.12);
  --shadow-bar:0 -1px 8px rgba(0,0,0,.08);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:var(--t-md);color:var(--c-text);background:var(--c-surface);
  -webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
a{color:var(--c-accent-text);text-decoration:none}

.app{max-width:480px;margin:0 auto;min-height:100vh;background:var(--c-bg);position:relative}
.app.com-barra{padding-bottom:96px}

/* ---------- Capa e cabeçalho da loja ---------- */
.capa{height:132px;background:var(--c-accent);background-size:cover;background-position:center}
.loja{padding:var(--s-4)}
.loja h1{margin:0 0 var(--s-1);font-size:var(--t-xl);font-weight:600;letter-spacing:-.02em}
.loja .meta{font-size:var(--t-sm);color:var(--c-text-soft);display:flex;gap:var(--s-2);align-items:center;flex-wrap:wrap}
.dot{width:6px;height:6px;border-radius:var(--r-pill);background:var(--c-ok);display:inline-block;flex:none}
.dot.off{background:var(--c-erro)}

/* Loja fechada/pausada: faixa fixa, não dispensável (design-base 4.3) */
.aviso-fechado{
  position:sticky;top:0;z-index:10;
  background:#FEF3C7;color:#78350F;border-bottom:1px solid #FDE68A;
  padding:var(--s-3) var(--s-4);font-size:var(--t-sm);font-weight:500;
}
.aviso-fechado b{display:block;font-weight:600}
/* A frase do lojista: separada por uma linha, para não se misturar com o
   horário derivado logo acima. São informações de origens diferentes e a
   pessoa precisa conseguir distinguir qual delas é o fato. */
.aviso-fechado .complemento-fechado{
  margin-top:var(--s-2);padding-top:var(--s-2);
  border-top:1px solid #FDE68A;font-weight:600;
}

.busca{margin:0 var(--s-4) var(--s-4);position:relative}
.busca input{
  width:100%;height:44px;padding:0 var(--s-4) 0 42px;
  border:1px solid var(--c-border);border-radius:var(--r-pill);
  background:var(--c-bg);outline:none;
}
.busca input:focus{border-color:var(--c-text)}
.busca svg{position:absolute;left:var(--s-4);top:13px;opacity:.45}

/* ---------- "Já pediu aqui?" ----------
   Peso de link, não de botão. Quem abriu o cardápio veio escolher comida; um
   botão sólido aqui competiria com o que a pessoa veio fazer, e a maioria dos
   visitantes nunca vai clicar nele. */
.sou-cliente{margin:0 var(--s-4) var(--s-4)}
.sou-cliente button{
  width:100%;text-align:left;padding:var(--s-3) var(--s-4);
  border:1px dashed var(--c-border);border-radius:var(--r-card);
  font-size:var(--t-sm);color:var(--c-text-soft);
}
.sou-cliente button strong{color:var(--c-accent-text);font-weight:600}
.sou-cliente button:active{background:var(--c-surface)}

/* Aviso de campos preenchidos, no checkout. Discreto, mas com a saída à
   vista: estamos exibindo o telefone de alguém, e quem pegou o aparelho
   emprestado não pode ter que apagar campo por campo. */
.nao-e-voce{
  display:flex;align-items:baseline;gap:var(--s-2);flex-wrap:wrap;
  margin-bottom:var(--s-3);font-size:var(--t-xs);color:var(--c-text-soft);
}
.nao-e-voce .link-texto{font-size:var(--t-xs);text-decoration:underline}

/* ---------- Caixa de identificação ---------- */
.dlg{
  width:min(380px, calc(100% - var(--s-5)*2));
  border:0;border-radius:var(--r-sheet);padding:var(--s-5);
  background:var(--c-bg);color:var(--c-text);box-shadow:0 12px 40px rgba(0,0,0,.22);
}
.dlg::backdrop{background:rgba(0,0,0,.45)}
.dlg .fechar{
  position:absolute;top:var(--s-3);right:var(--s-3);
  width:32px;height:32px;font-size:22px;line-height:1;color:var(--c-text-soft);
}
.dlg h3{font-size:var(--t-lg);font-weight:600;margin:0 0 var(--s-2);padding-right:var(--s-5)}
.dlg .sub{font-size:var(--t-sm);color:var(--c-text-soft);line-height:1.45;margin:0 0 var(--s-4)}
.dlg label{display:block;font-size:var(--t-sm);font-weight:500;margin-bottom:var(--s-2)}
.dlg input{
  width:100%;height:48px;padding:0 var(--s-4);
  border:1px solid var(--c-border);border-radius:var(--r-input);
  background:var(--c-bg);outline:none;
}
.dlg input:focus{border-color:var(--c-text)}
.dlg .flash{margin:0 0 var(--s-3)}

/* ---------- Quem volta ----------
   Discreto de propósito. Isto é reconhecimento, não painel de conta: quem
   abriu o cardápio veio escolher comida, e um bloco pesado no topo empurra o
   cardápio para baixo justo em quem já sabe o que quer.

   Fundo neutro, não o acento da loja — o acento é do botão de pedir, e gastar
   ele aqui tira força de onde importa. */
.eu{margin:0 var(--s-4) var(--s-4)}
.eu .ola{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-3);
  padding:var(--s-3) var(--s-4);background:var(--c-surface);border-radius:var(--r-card);
  font-size:var(--t-sm);
}
.eu .ola small{display:block;color:var(--c-text-soft);font-size:var(--t-xs);margin-top:2px}
.eu .ola .links{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.eu .ola .link-texto{font-size:var(--t-xs);color:var(--c-text-soft);text-decoration:underline}

/* ---------- Meus dados ---------- */
.endereco-linha{
  display:flex;align-items:flex-start;gap:var(--s-3);
  padding:var(--s-3) 0;border-top:1px solid var(--c-border);
}
.endereco-linha:first-of-type{border-top:0}
.endereco-linha .texto{flex:1;min-width:0;font-size:var(--t-sm);line-height:1.45}
.endereco-linha .texto span{display:block;color:var(--c-text-soft);font-size:var(--t-xs)}
.endereco-linha .acoes{
  flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:var(--s-1);
}
.endereco-linha .link-texto{font-size:var(--t-xs);text-decoration:underline;color:var(--c-text-soft)}
.endereco-linha .link-texto.perigo{color:var(--c-erro)}
.endereco-linha .marca-principal{
  font-size:10px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;
  color:var(--c-ok);
}

/* O bloco destrutivo é o único com borda vermelha na tela inteira: se
   parecesse com os outros, o clique errado seria só questão de tempo. */
.resumo.perigo{border:1px solid #FCA5A5;border-radius:var(--r-card);background:#FEF2F2}
.btn-perigo{
  display:inline-flex;align-items:center;justify-content:center;
  height:48px;padding:0 var(--s-5);border-radius:var(--r-input);
  background:var(--c-erro);color:#fff;font-weight:600;flex:none;
}

.eu .cupom-meu{
  display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;
  margin-top:var(--s-2);padding:var(--s-3) var(--s-4);
  border:1px dashed var(--c-border);border-radius:var(--r-card);font-size:var(--t-sm);
}
.eu .cupom-meu .selo{
  font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.06em;
  font-weight:600;color:var(--c-accent-text);
}
.eu .cupom-meu code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--t-xs);
  background:var(--c-bg);border:1px solid var(--c-border);border-radius:var(--r-input);
  padding:2px var(--s-2);letter-spacing:.04em;
}
.eu .salva{margin-top:var(--s-2);padding:0 var(--s-1);font-size:var(--t-xs);color:var(--c-text-soft)}

/* ---------- Pedir de novo ---------- */
.repetir{
  width:calc(100% - var(--s-4)*2);text-align:left;
  margin:0 var(--s-4) var(--s-5);padding:var(--s-4);
  border:1px solid var(--c-border);border-radius:var(--r-card);
  display:flex;align-items:center;gap:var(--s-3);
}
.repetir:active{background:var(--c-surface)}
.repetir .txt{flex:1;min-width:0}
.repetir .rot,.repetir .ult,.repetir .val{display:block}
.repetir .rot{font-size:var(--t-xs);color:var(--c-accent-text);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.repetir .ult{font-size:var(--t-sm);line-height:1.35;margin-top:var(--s-1)}
.repetir .val{font-size:var(--t-sm);font-weight:500;margin-top:var(--s-1)}
.repetir .seta{flex:none;color:var(--c-text-soft);font-size:22px;line-height:1}

/* ---------- Categorias ---------- */
.cats{
  position:sticky;top:0;z-index:5;background:var(--c-bg);
  border-bottom:1px solid var(--c-border);
  display:flex;gap:var(--s-2);padding:var(--s-3) var(--s-4);
  overflow-x:auto;scrollbar-width:none;
}
.cats::-webkit-scrollbar{display:none}
.cats a{
  padding:var(--s-2) var(--s-4);border-radius:var(--r-pill);
  border:1px solid var(--c-border);font-size:var(--t-sm);font-weight:500;
  white-space:nowrap;color:var(--c-text);
}
.cats a.on{background:var(--c-text);color:#fff;border-color:var(--c-text)}

/* ---------- Lista do cardápio ---------- */
.secao h2{margin:var(--s-5) var(--s-4) var(--s-3);font-size:var(--t-lg);font-weight:600;letter-spacing:-.01em}
.item{
  display:flex;gap:var(--s-3);align-items:flex-start;
  padding:var(--s-3) var(--s-4);width:100%;text-align:left;
  border-bottom:1px solid var(--c-surface);color:var(--c-text);
}
.item:active{background:var(--c-surface)}
/* Os filhos são <span>: dentro de <button> só cabe conteúdo de frase.
   Sem display:block eles ficariam todos na mesma linha. */
.item .info{flex:1;min-width:0;display:block}
.item .nome{display:block;font-size:var(--t-md);font-weight:500;margin-bottom:2px}
.item .desc{
  font-size:var(--t-sm);color:var(--c-text-soft);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.item .preco{display:block;font-size:var(--t-sm);margin-top:var(--s-2);font-weight:500}
.item .thumb{width:72px;height:72px;border-radius:var(--r-input);flex:none;object-fit:cover;background:var(--c-surface)}
.item.esgotado{opacity:.5}
.item.esgotado .preco::after{content:" · indisponível";color:var(--c-erro);font-weight:400}

/* ---------- Vitrine: faixa de destaques ----------
   Rolagem horizontal com card grande. É o único lugar onde a foto manda —
   e por isso o destaque só entra na faixa se tiver imagem OU promoção. */
.destaques{margin:0 0 var(--s-5)}
.destaques h2{margin:0 var(--s-4) var(--s-3);font-size:var(--t-lg);font-weight:600;letter-spacing:-.01em}
.destaques .trilho{
  display:flex;gap:var(--s-3);overflow-x:auto;scroll-snap-type:x mandatory;
  padding:0 var(--s-4) var(--s-1);scrollbar-width:none;
}
.destaques .trilho::-webkit-scrollbar{display:none}
.cartao-destaque{
  flex:0 0 68%;max-width:260px;scroll-snap-align:start;text-align:left;
  border:1px solid var(--c-border);border-radius:var(--r-card);overflow:hidden;
  background:var(--c-bg);color:var(--c-text);display:block;
}
.cartao-destaque:active{background:var(--c-surface)}
.cartao-destaque .foto{
  display:block;width:100%;height:120px;object-fit:cover;
  background:linear-gradient(135deg,var(--c-surface),#ECE7E1);
}
.cartao-destaque .corpo{display:block;padding:var(--s-3)}
.cartao-destaque .nome{display:block;font-weight:500;font-size:var(--t-sm);margin-bottom:var(--s-1)}
.cartao-destaque .precos{display:flex;align-items:baseline;gap:var(--s-2)}
.cartao-destaque .de{font-size:var(--t-xs);color:var(--c-text-soft);text-decoration:line-through}
.cartao-destaque .por{font-size:var(--t-sm);font-weight:600}

/* ---------- Selos ---------- */
.selo-item{
  display:inline-block;font-size:11px;font-weight:600;letter-spacing:.03em;
  padding:2px var(--s-2);border-radius:var(--r-input);text-transform:uppercase;
  vertical-align:middle;margin-left:var(--s-2);
}
.selo-promo{background:var(--c-accent);color:var(--c-on-accent)}
.selo-loja{background:var(--c-surface);color:var(--c-text-soft)}

/* Preço "de/por" na lista */
.preco .de{color:var(--c-text-soft);text-decoration:line-through;font-weight:400;margin-right:var(--s-2)}
.preco .por{color:var(--c-accent-text);font-weight:600}

/* Aviso do dia da loja */
.recado{
  margin:0 var(--s-4) var(--s-4);padding:var(--s-3) var(--s-4);
  background:var(--c-surface);border-radius:var(--r-input);
  font-size:var(--t-sm);line-height:1.45;
}
.loja .sobre{font-size:var(--t-sm);color:var(--c-text-soft);margin-top:var(--s-2);line-height:1.45}
.loja .logo{
  width:56px;height:56px;border-radius:var(--r-card);object-fit:cover;
  border:2px solid var(--c-bg);margin-top:-40px;display:block;
  background:var(--c-accent);position:relative;
}
.loja .monograma{
  width:56px;height:56px;border-radius:var(--r-card);margin-top:-40px;
  background:var(--c-accent);color:var(--c-on-accent);
  display:grid;place-items:center;font-size:24px;font-weight:600;
  border:2px solid var(--c-bg);
}

/* ---------- Cupom ---------- */
.cupom-linha{display:flex;gap:var(--s-2)}
.cupom-linha input{
  flex:1;min-height:48px;padding:0 var(--s-3);text-transform:uppercase;
  border:1px solid var(--c-border);border-radius:var(--r-input);outline:none;
}
.cupom-linha input:focus{border-color:var(--c-text)}
.btn-cupom{
  min-height:48px;padding:0 var(--s-4);border-radius:var(--r-input);
  border:1px solid var(--c-border);font-weight:500;white-space:nowrap;
}

/* O atalho de preencher sozinho, com peso suficiente para ser visto.

   Era branco com traço cinza, igual ao campo ao lado — some. Mas NÃO pode ser
   o botão cheio da loja: esse é o "Fazer pedido", e dois botões sólidos na
   mesma tela disputam o mesmo clique. Fundo tingido de acento resolve os dois:
   salta do formulário e continua abaixo do CTA principal. */
.btn-atalho{
  background:color-mix(in srgb, var(--c-accent) 10%, #fff);
  border-color:color-mix(in srgb, var(--c-accent) 35%, #fff);
  color:var(--c-accent-text);font-weight:600;
}
.btn-atalho:active{background:color-mix(in srgb, var(--c-accent) 18%, #fff)}
/* Navegador sem `color-mix` cai num cinza-claro legível, não num botão sem
   fundo: degradar para "invisível" seria voltar ao problema. */
@supports not (background: color-mix(in srgb, red 10%, #fff)) {
  .btn-atalho{background:var(--c-surface);border-color:var(--c-text-soft)}
}
/* ---------- Banner na tela de acompanhamento ----------
   Sempre identificado como publicidade: o cliente acha que aquela tela é da
   loja, e anúncio disfarçado de conteúdo queima o lojista, não a plataforma. */
.banner{
  display:block;margin:var(--s-4);border:1px solid var(--c-border);
  border-radius:var(--r-card);overflow:hidden;position:relative;
  color:var(--c-text);text-decoration:none;
}
.banner .marca-anuncio{
  position:absolute;top:var(--s-2);right:var(--s-2);z-index:2;
  background:rgba(0,0,0,.55);color:#fff;font-size:10px;
  letter-spacing:.06em;text-transform:uppercase;
  padding:2px var(--s-2);border-radius:var(--r-pill);
}
/* 3:1 — a MESMA proporção em que a imagem é gravada, para o navegador não
   cortar nada. Altura fixa em px voltaria a recortar em telas mais estreitas
   ou mais largas que os 448px de referência. */
.banner img{display:block;width:100%;aspect-ratio:3/1;height:auto;object-fit:cover}
.banner .txt{display:block;padding:var(--s-3) var(--s-4)}
.banner .titulo{display:block;font-weight:600;font-size:var(--t-md);line-height:1.3}
.banner .chamada{display:block;font-size:var(--t-sm);color:var(--c-text-soft);margin-top:2px;line-height:1.4}
.banner .quem{
  display:block;font-size:var(--t-xs);color:var(--c-text-soft);
  margin-top:var(--s-2);text-transform:uppercase;letter-spacing:.05em;
}

.cupom-msg{font-size:var(--t-xs);margin-top:var(--s-2);min-height:16px}

/* Campo preenchido pelo CEP: visivelmente travado, mas nunca definitivo —
   CEP de cidade pequena costuma ser único para o município inteiro. */
input.travado, select:disabled{
  background:var(--c-surface);color:var(--c-text-soft);cursor:default;
}
.opcional{font-weight:400;color:var(--c-text-soft);font-size:var(--t-xs)}
.link-texto{
  font-size:var(--t-xs);color:var(--c-text-soft);text-decoration:underline;
  background:none;border:0;padding:var(--s-1) 0;min-height:32px;
}
.cupom-msg.bom{color:var(--c-ok)}
.cupom-msg.ruim{color:var(--c-erro)}
.resumo .linha.desconto span:last-child{color:var(--c-ok);font-weight:500}

/* ---------- Barra fixa ---------- */
.barra{
  position:fixed;bottom:0;left:0;right:0;z-index:20;
  max-width:480px;margin:0 auto;background:var(--c-bg);
  border-top:1px solid var(--c-border);box-shadow:var(--shadow-bar);
  padding:var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom));
}
.barra .cta{
  width:100%;height:52px;border-radius:var(--r-input);
  background:var(--c-accent);color:var(--c-on-accent);font-weight:600;
  display:flex;align-items:center;justify-content:space-between;padding:0 var(--s-4);
}
.barra .cta[disabled]{background:var(--c-border);color:var(--c-text-soft)}
.barra .qtd{font-size:var(--t-sm);font-weight:400;opacity:.9}

/* ---------- Sheet ---------- */
.overlay{position:fixed;inset:0;z-index:30;background:rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .22s ease}
.overlay.on{opacity:1;pointer-events:auto}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:31;
  max-width:480px;margin:0 auto;max-height:92vh;background:var(--c-bg);
  border-radius:var(--r-sheet) var(--r-sheet) 0 0;box-shadow:var(--shadow-sheet);
  transform:translateY(100%);transition:transform .26s cubic-bezier(.32,.72,0,1),
            visibility 0s .26s;
  display:flex;flex-direction:column;
  /*
   * 🔴 FECHADO É INERTE. `visibility:hidden` com atraso igual ao da transição:
   * a animação de saída ainda aparece, mas depois dela o sheet não recebe
   * clique nem foco de teclado.
   *
   * No celular isso nunca doeu — fechado, ele desliza para FORA da tela. No
   * desktop a versão fechada ficava invisível NO CENTRO (opacity:0), e uma
   * área de ~550×670 engolia todo clique do meio do cardápio, desde o
   * primeiro carregamento. Era a "dificuldade de clicar no box do produto".
   *
   * `pointer-events:none` ALÉM da visibility, e não em vez dela: visibility
   * cuida do foco de teclado e do leitor de tela, mas ela troca com ATRASO
   * (para a animação de saída aparecer) — e transição pausa em aba oculta.
   * pointer-events não é transicionável: vira no mesmo instante da classe,
   * em qualquer timing. O clique nunca fica refém da animação.
   */
  visibility:hidden;
  pointer-events:none;
}
.sheet.on{transform:translateY(0);visibility:visible;pointer-events:auto;transition-delay:0s}
.sheet-top{padding:var(--s-4);border-bottom:1px solid var(--c-border);display:flex;align-items:center;gap:var(--s-3);flex:none}
.sheet-top .fechar{width:32px;height:32px;border-radius:var(--r-pill);background:var(--c-surface);display:grid;place-items:center;flex:none;font-size:18px;line-height:1}
.sheet-top h3{margin:0;font-size:var(--t-lg);font-weight:600}
.sheet-body{overflow-y:auto;padding-bottom:var(--s-4)}
.sheet-foot{flex:none;border-top:1px solid var(--c-border);padding:var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom));display:flex;gap:var(--s-3);align-items:center}

/* ---------- Grupos de opção ---------- */
.grupo{border-top:8px solid var(--c-surface);padding:var(--s-4)}
.grupo:first-child{border-top:0}
.grupo-cab{margin-bottom:var(--s-3)}
.grupo-cab .linha{display:flex;align-items:center;gap:var(--s-2)}
.grupo-cab .nome{font-size:var(--t-md);font-weight:600}
.grupo-cab .regra{display:block;font-size:var(--t-xs);color:var(--c-text-soft);margin-top:3px}
.tag-obg{font-size:11px;font-weight:600;letter-spacing:.04em;background:var(--c-surface);color:var(--c-text-soft);padding:3px var(--s-2);border-radius:var(--r-input);text-transform:uppercase}
.grupo.travado{opacity:.38;pointer-events:none;user-select:none}

.opcao{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) 0;width:100%;text-align:left;min-height:44px}
.opcao + .opcao{border-top:1px solid var(--c-surface)}
.opcao .marca{width:22px;height:22px;flex:none;border:1.5px solid var(--c-border);display:grid;place-items:center;color:#fff;font-size:13px;line-height:1}
.opcao[data-multi="n"] .marca{border-radius:var(--r-pill)}
.opcao[data-multi="s"] .marca{border-radius:6px}
.opcao[aria-checked="true"] .marca{background:var(--c-text);border-color:var(--c-text)}
.opcao .rot{flex:1;min-width:0}
.opcao .rot small{display:block;color:var(--c-text-soft);font-size:var(--t-xs);margin-top:1px}
.opcao .val{font-size:var(--t-sm);color:var(--c-text-soft);white-space:nowrap}

.obs-metade{padding:0 0 var(--s-3) 34px}
.obs-metade .rot{font-size:var(--t-xs);color:var(--c-text-soft);margin-bottom:var(--s-1);display:block}
.obs-metade input{width:100%;height:40px;padding:0 var(--s-3);border:1px solid var(--c-border);border-radius:var(--r-input);outline:none}
.obs-metade input:focus{border-color:var(--c-text)}

.obs-item{padding:var(--s-4);border-top:8px solid var(--c-surface)}
.obs-item label{display:block;font-size:var(--t-md);font-weight:600;margin-bottom:var(--s-3)}
.obs-item input{width:100%;height:44px;padding:0 var(--s-3);border:1px solid var(--c-border);border-radius:var(--r-input);outline:none}

.stepper{display:flex;align-items:center;gap:var(--s-1);flex:none}
.stepper button{width:44px;height:44px;border-radius:var(--r-pill);border:1px solid var(--c-border);display:grid;place-items:center;font-size:20px;line-height:1}
.stepper button:disabled{opacity:.3}
.stepper .n{min-width:28px;text-align:center;font-weight:500}

.add{flex:1;height:52px;border-radius:var(--r-input);background:var(--c-accent);color:var(--c-on-accent);font-weight:600;display:flex;align-items:center;justify-content:space-between;padding:0 var(--s-4)}
.add:disabled{background:var(--c-border);color:var(--c-text-soft)}

/* ---------- Formulários ---------- */
.campo{padding:0 var(--s-4) var(--s-4)}
.campo label{display:block;font-size:var(--t-sm);font-weight:500;margin-bottom:var(--s-2)}
.campo input,.campo select,.campo textarea{
  width:100%;min-height:48px;padding:var(--s-3);
  border:1px solid var(--c-border);border-radius:var(--r-input);
  background:var(--c-bg);outline:none;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--c-text)}
.campo .dica{font-size:var(--t-xs);color:var(--c-text-soft);margin-top:var(--s-1)}
.campo.erro input,.campo.erro select{border-color:var(--c-erro)}
.campo .msg-erro{font-size:var(--t-xs);color:var(--c-erro);margin-top:var(--s-1)}

.opcoes-radio{display:flex;gap:var(--s-2)}
.opcoes-radio label{
  flex:1;display:flex;align-items:center;justify-content:center;gap:var(--s-2);
  min-height:48px;border:1px solid var(--c-border);border-radius:var(--r-input);
  font-size:var(--t-sm);font-weight:500;cursor:pointer;margin:0;
}
.opcoes-radio input{position:absolute;opacity:0;pointer-events:none}
.opcoes-radio input:checked + span,.opcoes-radio label:has(input:checked){border-color:var(--c-text);background:var(--c-surface)}

/* ---------- Resumo de valores ---------- */
.resumo{padding:var(--s-4);border-top:8px solid var(--c-surface)}
.resumo .linha{display:flex;justify-content:space-between;padding:var(--s-2) 0;font-size:var(--t-sm)}
.resumo .linha.total{border-top:1px solid var(--c-border);margin-top:var(--s-2);padding-top:var(--s-3);font-size:var(--t-md);font-weight:600}
.resumo .linha .soft{color:var(--c-text-soft)}

/* ---------- Carrinho ---------- */
.carrinho-item{display:flex;gap:var(--s-3);padding:var(--s-4);border-bottom:1px solid var(--c-surface)}
.carrinho-item .info{flex:1;min-width:0}
.carrinho-item .nome{font-weight:500}
.carrinho-item .det{font-size:var(--t-sm);color:var(--c-text-soft);line-height:1.4;margin-top:2px}
.carrinho-item .obs{font-size:var(--t-xs);color:var(--c-alerta);margin-top:var(--s-1)}
.carrinho-item .val{text-align:right;white-space:nowrap;font-size:var(--t-sm);font-weight:500}
.carrinho-item .remover{display:block;font-size:var(--t-xs);color:var(--c-text-soft);margin-top:var(--s-2);text-decoration:underline}

/* Combo aberto em linhas — a lista é o resumo do que o cliente montou */
.combo-itens{list-style:none;margin:var(--s-2) 0 0;padding:0 0 0 var(--s-3);border-left:2px solid var(--c-border)}
.combo-itens li{font-size:var(--t-sm);line-height:1.4;padding:2px 0}
.combo-itens li span{color:var(--c-text-soft)}
.combo-itens li em{font-style:normal;color:var(--c-accent-text);font-weight:500}

/* ---------- Estados vazios e mensagens ---------- */
.vazio{padding:var(--s-6) var(--s-4);text-align:center}
.vazio-emoji{font-size:40px;margin-bottom:var(--s-3)}
.vazio h1{font-size:var(--t-xl);font-weight:600;margin:0 0 var(--s-2)}
.vazio p{color:var(--c-text-soft);margin:0 0 var(--s-5);line-height:1.5}

.btn-primario{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 var(--s-5);border-radius:var(--r-input);background:var(--c-accent);color:var(--c-on-accent);font-weight:600}
.btn-secundario{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 var(--s-5);border-radius:var(--r-input);border:1px solid var(--c-border);color:var(--c-text);font-weight:500}

.flash{margin:var(--s-4);padding:var(--s-3) var(--s-4);border-radius:var(--r-input);font-size:var(--t-sm);line-height:1.45}
.flash.erro{background:#FEE2E2;color:#7F1D1D}
.flash.ok{background:#DCFCE7;color:#14532D}
.flash.aviso{background:#FEF3C7;color:#78350F}

/* ---------- Rodapé da loja ----------
   Duas identidades, hierarquia explícita. A loja em cor de texto normal; a
   plataforma em cinza e menor, separada por uma linha. Quem está na página
   veio comprar da loja — dar o mesmo peso às duas marcas seria usar o site do
   cliente como outdoor próprio.

   `margin-top:auto` não serve aqui porque `.app` não é flex; o respiro vem do
   padding de cima, que é grande de propósito: rodapé colado no último produto
   parece continuação do cardápio. */
.rodape{
  margin-top:var(--s-6);padding:var(--s-5) var(--s-4);
  border-top:1px solid var(--c-border);background:var(--c-bg);
}
.rodape .quem{display:flex;flex-direction:column;gap:2px;font-size:var(--t-sm);line-height:1.5}
.rodape .quem strong{font-weight:600}
.rodape .quem span{color:var(--c-text-soft)}
.rodape .quem a{color:var(--c-text-soft);text-decoration:underline;width:fit-content}

/* Faixa da plataforma: bloco à parte, com fundo próprio.

   Dentro do mesmo bloco da loja, separadas só por uma linha, as duas
   identidades competiam — dava para ler o CNPJ como se fosse da loja. Fundo
   diferente resolve sem precisar de um rótulo explicando de quem é o quê.

   Fica DENTRO do `.app`, então o `overflow:clip` do cartão no desktop recorta
   os cantos junto com ele. */
.rodape-marca{
  padding:var(--s-4);background:var(--c-surface);border-top:1px solid var(--c-border);
}
.rodape-marca .assinatura{
  display:flex;flex-direction:column;align-items:center;gap:var(--s-2);text-align:center;
}
/* `height` fixa com `width:auto` mantém a proporção que veio do upload — o
   perfil `marca` grava sem cortar justamente para isto funcionar. */
.rodape-marca img{height:24px;width:auto;max-width:190px;display:block;opacity:.85}
.rodape-marca .nome{font-size:var(--t-sm);font-weight:600;color:var(--c-text-soft)}
.rodape-marca .cnpj{font-size:var(--t-xs);color:var(--c-text-soft);letter-spacing:.01em}

/* ---------- Confirmação de pedido enviado ----------
   Verde do sistema (--c-ok), não o acento da loja: isto é estado do pedido,
   e estado tem código de cor próprio. Se usasse o acento, uma loja de acento
   vermelho diria "deu certo" em vermelho.

   O ✓ carrega `aria-hidden` no HTML e a palavra "enviado" está no texto:
   cor e forma dizem a mesma coisa, para quem não distingue as duas. */
.confirmado{
  display:flex;gap:var(--s-3);align-items:flex-start;
  margin:var(--s-4);padding:var(--s-4);
  border-radius:var(--r-card);background:#ECFDF3;border:1px solid #A6E9C5;
}
.confirmado .marca{
  width:28px;height:28px;border-radius:var(--r-pill);flex:none;
  background:var(--c-ok);color:#fff;display:grid;place-items:center;
  font-size:15px;font-weight:700;line-height:1;
}
.confirmado strong{display:block;color:#14532D;font-size:var(--t-md)}
.confirmado p{margin:2px 0 0;color:#166534;font-size:var(--t-sm);line-height:1.45}

/* ---------- Linha do tempo do pedido ---------- */
.timeline{padding:var(--s-4)}
.timeline .passo{display:flex;gap:var(--s-3);padding-bottom:var(--s-5);position:relative}
.timeline .passo:last-child{padding-bottom:0}
.timeline .passo::before{content:"";position:absolute;left:11px;top:26px;bottom:0;width:2px;background:var(--c-border)}
.timeline .passo:last-child::before{display:none}
.timeline .bolha{width:24px;height:24px;border-radius:var(--r-pill);border:2px solid var(--c-border);background:var(--c-bg);flex:none;display:grid;place-items:center;font-size:12px;color:#fff;z-index:1}
.timeline .passo.feito .bolha{background:var(--c-ok);border-color:var(--c-ok)}
.timeline .passo.atual .bolha{background:var(--c-accent);border-color:var(--c-accent)}
.timeline .rot{font-weight:500}
.timeline .passo:not(.feito):not(.atual) .rot{color:var(--c-text-soft)}
.timeline .quando{font-size:var(--t-xs);color:var(--c-text-soft);margin-top:2px}

/* ---------- Pix ---------- */
.pix{padding:var(--s-4);text-align:center}
.pix img{width:220px;height:220px;margin:0 auto var(--s-4);display:block;border-radius:var(--r-card)}
.pix .codigo{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--t-xs);
  word-break:break-all;background:var(--c-surface);padding:var(--s-3);
  border-radius:var(--r-input);text-align:left;line-height:1.4;max-height:96px;overflow-y:auto;
}

/* ---------- Vitrine da loja ----------
   Banners que o LOJISTA publica no cardápio dele — não confundir com `.banner`,
   que é anúncio da plataforma na tela de acompanhamento.

   O texto é HTML por cima da arte, nunca assado na imagem: texto embutido numa
   arte de 1600px encolhe para 448px no celular e ninguém lê. Aqui ele escala,
   é selecionável e o leitor de tela alcança.

   Sem giro automático. Carrossel que anda sozinho move o conteúdo debaixo do
   dedo, e no celular isso faz tocar no banner errado. */
.vitrine{margin:0 0 var(--s-5)}
.trilho-vitrine{
  display:flex;gap:var(--s-3);overflow-x:auto;scroll-snap-type:x mandatory;
  padding:0 var(--s-4);scrollbar-width:none;
}
.trilho-vitrine::-webkit-scrollbar{display:none}
.cartao-vitrine{
  flex:0 0 calc(100% - var(--s-4));scroll-snap-align:center;
  /* 4:1, a mesma proporção em que a imagem é gravada — nada é recortado. */
  aspect-ratio:4 / 1;min-height:104px;
  border-radius:var(--r-card);overflow:hidden;position:relative;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  gap:2px;padding:var(--s-4);text-align:left;
  background-size:cover;background-position:center;
  color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.45);
}
.cartao-vitrine .titulo{font-size:var(--t-lg);font-weight:600;line-height:1.2}
.cartao-vitrine .chamada{font-size:var(--t-sm);opacity:.92;line-height:1.3}
.cartao-vitrine .cta{
  font-size:var(--t-xs);font-weight:600;margin-top:var(--s-2);
  background:rgba(255,255,255,.22);padding:4px var(--s-3);border-radius:var(--r-pill);
}

/* ---------- Convite para salvar a loja ----------
   Aparece na tela de acompanhamento, do "pronto" em diante, e ANTES do anúncio
   da plataforma: o pedido da própria loja vem antes do inventário da agência.

   Discreto de propósito. Isto é permissão sendo pedida, não promoção sendo
   empurrada — caixa colorida e gritante lê como anúncio e leva "não". */
.favorito{
  display:block;margin:var(--s-4);padding:var(--s-4);
  border:1px solid var(--c-border);border-radius:var(--r-card);
}
.favorito .cabeca{display:flex;gap:var(--s-3);align-items:flex-start;margin-bottom:var(--s-3)}
.favorito .coracao{color:var(--c-accent-text);font-size:20px;line-height:1.1;flex:none}
.favorito .cabeca strong{display:block;font-size:var(--t-md);font-weight:600}
.favorito .cabeca small{display:block;color:var(--c-text-soft);font-size:var(--t-sm);margin-top:2px;line-height:1.4}
.favorito label{
  display:flex;align-items:center;gap:var(--s-3);
  padding:var(--s-2) 0;font-size:var(--t-sm);min-height:40px;cursor:pointer;
}
.favorito .btn-primario{width:100%;margin-top:var(--s-3)}
.favorito .acoes{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);margin-top:var(--s-3)}
.favorito .acoes .btn-secundario{flex:1}

/* ---------- Observação editável no carrinho ----------
   O carrinho é a tela de conferência: é ali que a pessoa lembra do "sem
   cebola". `<details>` em vez de JS — abre o campo e continua funcionando se o
   script não carregar. */
.obs-editar{margin-top:var(--s-1)}
.obs-editar summary{
  list-style:none;cursor:pointer;display:flex;gap:var(--s-2);
  align-items:baseline;flex-wrap:wrap;min-height:32px;padding:var(--s-1) 0;
}
.obs-editar summary::-webkit-details-marker{display:none}
.obs-editar .acao{
  font-size:var(--t-xs);color:var(--c-accent-text);text-decoration:underline;
}
.obs-editar form{display:flex;gap:var(--s-2);margin-top:var(--s-2)}
.obs-editar input{
  flex:1;min-width:0;height:40px;padding:0 var(--s-3);
  border:1px solid var(--c-border);border-radius:var(--r-input);outline:none;
  font-size:var(--t-sm);
}
.obs-editar input:focus{border-color:var(--c-text)}
.obs-editar button{
  height:40px;padding:0 var(--s-4);border-radius:var(--r-input);
  border:1px solid var(--c-border);font-size:var(--t-sm);font-weight:500;white-space:nowrap;
}

/* Retirada sem escolha: a linha diz o que vai acontecer e onde buscar. Não é
   erro nem alerta — é a única modalidade da loja, então tem tom de informação,
   não de aviso. */
.aviso-retirada{
  background:var(--c-surface);border-radius:var(--r-card);
  padding:var(--s-3) var(--s-4);margin-bottom:var(--s-4);
  font-size:var(--t-sm);line-height:1.5;
}

/* =============================================================================
   DESKTOP — a partir de 900px
   =============================================================================

   Até aqui a folha é a versão de celular, validada em mockup e em produção.
   Nada acima desta linha muda: o telefone é onde o pedido acontece, e uma
   regressão ali custa venda de verdade.

   O QUE ESTA SEÇÃO RESOLVE: aberto no computador, o site virava uma faixa
   vertical de 480px cercada de branco. Não era só feio — era desperdício de
   espaço num lugar onde a loja poderia mostrar comida grande, que é o que
   vende.

   DUAS DECISÕES QUE ATRAVESSAM A SEÇÃO:

   1. **Largura limitada, não full width.** 1080px. Linha de texto larga
      demais cansa, e cardápio esticado em monitor de 27" vira planilha.
      O container vira um cartão sobre fundo cinza — a leitura ganha borda.

   2. **Nenhuma mudança de HTML por causa de layout.** Tudo aqui é CSS sobre
      o mesmo markup. Dois templates seriam duas verdades para manter, e a
      segunda sempre atrasa.
   ============================================================================= */
@media (min-width: 900px) {

  body{background:var(--c-surface)}

  .app{
    /* `width` junto do `max-width`: só o max-width faria o cartão encostar nas
       bordas exatamente na largura do breakpoint, que é onde ele mais precisa
       de respiro — é ali que a tela ainda é estreita. */
    width:calc(100% - var(--s-6) * 2);
    max-width:1080px;
    min-height:auto;
    margin:var(--s-5) auto var(--s-6);
    border-radius:var(--r-sheet);
    /* `clip`, NÃO `hidden`.
       `overflow:hidden` transforma o container em contexto de rolagem, e um
       `position:sticky` lá dentro passa a se referir a ele — que nunca rola.
       O trilho de categorias simplesmente não grudava. `clip` recorta igual e
       não cria o contexto. */
    overflow:clip;
    box-shadow:0 1px 3px rgba(0,0,0,.06), 0 12px 32px rgba(0,0,0,.07);
  }
  /* A barra flutuante deixa de comer o rodapé: no desktop ela não encosta. */
  .app.com-barra{padding-bottom:var(--s-6)}

  /* ---------- Hero ----------
     É a única imagem grande que a loja tem. No celular ela é uma tarja de
     132px; aqui vira capa de verdade, com o degradê protegendo a legibilidade
     de quem sobrepõe texto claro numa foto clara. */
  /* A capa é convite, não destino: altura de tela inteira faria o cliente
     rolar antes de ver o primeiro item, e quem entra num cardápio entrou para
     ver comida.

     4:1 é a MESMA proporção em que a imagem é gravada (Imagem::PERFIS['capa']),
     então o hero mostra a foto inteira — nada de recorte. Em 1080px dá ~270px,
     que era a altura pretendida de qualquer forma.

     `aspect-ratio` só no cardápio: as telas de fluxo usam a capa como faixa de
     cor com altura fixa, e ali proporção não significa nada. */
  .capa{position:relative}
  .app:not(.tela-fluxo) > .capa{aspect-ratio:4 / 1;height:auto}
  .capa::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.35) 100%);
  }

  /* Logo AO LADO do nome, não acima.
     Empilhado, o cabeçalho ocupava 200px de altura e deixava metade da
     largura vazia — layout de celular esticado, que é justamente o que esta
     seção existe para não fazer. Em linha, ele lê como fachada de loja. */
  .loja{padding:var(--s-5) var(--s-6) var(--s-4);position:relative}
  /* A grade é do CARDÁPIO, não de toda tela que tem `.loja`.
     Sem o escopo ela vazava para o acompanhamento, onde o h1 é "Pedido #11" e
     a meta é o nome da loja: os dois iam parar lado a lado por acidente de
     posicionamento automático, não por decisão. */
  .app:not(.tela-fluxo) .loja{
    display:grid;grid-template-columns:auto minmax(0,1fr);
    column-gap:var(--s-5);align-items:end;
  }
  .loja .logo,.loja .monograma{
    width:112px;height:112px;margin-top:-76px;border-width:4px;
    box-shadow:0 4px 16px rgba(0,0,0,.14);
    grid-row:1 / span 3;align-self:start;
  }
  .loja .monograma{font-size:46px}
  .loja h1{font-size:var(--t-2xl);margin-top:0 !important;align-self:end}
  .loja .meta{font-size:var(--t-md)}
  .loja .sobre{font-size:var(--t-md);max-width:62ch}

  .recado{margin:0 var(--s-6) var(--s-4);padding:var(--s-4) var(--s-5);font-size:var(--t-md)}

  /* No desktop sobra largura: a saudação, o cupom e o "loja salva" cabem lado
     a lado em vez de virar três faixas empilhadas ocupando altura à toa. */
  .eu{
    margin:0 var(--s-6) var(--s-5);
    display:grid;grid-template-columns:minmax(0,1fr) auto;
    align-items:center;gap:var(--s-3);
  }
  .eu .ola{grid-column:1 / -1}
  .eu .cupom-meu,.eu .salva{margin-top:0}
  .eu .salva{text-align:right}

  /* No desktop o convite não precisa de largura inteira — ele é secundário,
     e uma faixa de 1080px tracejada gritaria mais que o cardápio. */
  .sou-cliente{margin:0 var(--s-6) var(--s-4)}
  .sou-cliente button{width:auto;min-width:320px}

  /* Busca não precisa da largura toda: campo de 1000px parece formulário
     de sistema, não de loja. */
  .busca{margin:0 var(--s-6) var(--s-5);max-width:420px}

  .repetir{
    width:calc(100% - var(--s-6)*2);margin:0 var(--s-6) var(--s-5);
    padding:var(--s-4) var(--s-5);transition:border-color .15s, box-shadow .15s;
  }
  .repetir:hover{border-color:var(--c-text);box-shadow:0 2px 8px rgba(0,0,0,.06)}

  /* ---------- Destaques ----------
     No celular é trilho horizontal, que funciona com o polegar. Com mouse,
     rolagem horizontal é hostil: some o que está fora e ninguém arrasta.
     Vira grade, e a foto cresce — é a faixa onde a imagem manda. */
  .destaques{margin-bottom:var(--s-6)}
  .destaques h2{margin:0 var(--s-6) var(--s-4);font-size:var(--t-xl)}
  .destaques .trilho{
    display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4);
    padding:0 var(--s-6);overflow:visible;
  }
  .cartao-destaque{
    flex:none;max-width:none;transition:transform .15s, box-shadow .15s;
  }
  .cartao-destaque:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.10)}
  .cartao-destaque .foto{height:190px}
  /* Destaque SEM foto vira só texto, não uma moldura vazia.
     No celular o placeholder tem 120px e lê como "foto ainda não subiu"; a
     190px vira um buraco de 190px no meio da vitrine. O item entra na faixa
     por ter foto OU promoção — quando é promoção, o preço é o que importa,
     não uma caixa cinza fingindo imagem. A grade mantém os cards alinhados. */
  .cartao-destaque span.foto{display:none}
  .cartao-destaque{display:flex;flex-direction:column}
  .cartao-destaque .corpo{flex:1;display:flex;flex-direction:column;justify-content:center}
  .cartao-destaque .corpo{padding:var(--s-4)}
  .cartao-destaque .nome{font-size:var(--t-md)}
  .cartao-destaque .por{font-size:var(--t-md)}

  /* ---------- Vitrine ----------
     Com um banner só, ele ocupa a largura toda e vira hero de promoção. Com
     dois ou mais, viram grade: rolagem horizontal com mouse é hostil, some o
     que está fora e ninguém arrasta. */
  .vitrine{margin-bottom:var(--s-6)}
  .trilho-vitrine{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
    gap:var(--s-4);padding:0 var(--s-6);overflow:visible;
  }
  .cartao-vitrine{
    flex:none;padding:var(--s-5) var(--s-6);
    transition:transform .15s, box-shadow .15s;
  }
  button.cartao-vitrine:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.16)}
  .cartao-vitrine .titulo{font-size:var(--t-xl)}
  .cartao-vitrine .chamada{font-size:var(--t-md)}

  /* ---------- Duas colunas: trilho de categorias + cardápio ----------
     No celular as categorias são uma faixa que rola com o polegar. Aqui vira
     coluna fixa ao lado do cardápio: some a faixa que comia altura, a
     navegação fica visível o tempo todo, e o menu ganha o resto da largura.

     A grade é declarada em `.app` para que só `cats` e `lista` se dividam —
     capa, cabeçalho e destaques continuam ocupando a linha inteira. */
  .app:not(.tela-fluxo){
    display:grid;grid-template-columns:216px minmax(0,1fr);
    align-content:start;
  }
  .app:not(.tela-fluxo) > *{grid-column:1 / -1}
  .app:not(.tela-fluxo) > .cats{grid-column:1}
  .app:not(.tela-fluxo) > #lista{grid-column:2}

  .cats{
    flex-direction:column;align-items:stretch;gap:var(--s-1);
    padding:var(--s-5) var(--s-4) var(--s-5) var(--s-6);
    /* Sem borda: ela terminava junto com a lista de categorias e virava um
       traço solto no meio da página, que lê como erro de renderização. */
    border-bottom:0;border-right:0;background:transparent;
    /* Gruda abaixo do topo da janela, não em 0: senão o primeiro item do
       trilho fica colado na borda e parece cortado. */
    top:var(--s-4);align-self:start;overflow:visible;
  }
  .cats a{
    border:0;border-radius:var(--r-input);padding:var(--s-3) var(--s-4);
    white-space:normal;transition:background .15s,color .15s;
  }
  .cats a:not(.on):hover{background:var(--c-surface)}

  /* ---------- Itens em grade ----------
     Duas colunas, não três: a descrição precisa de linha legível, e três
     colunas em 1080px espremem o texto a ponto de o clamp de 2 linhas cortar
     no meio da primeira ideia. */
  .secao{
    display:grid;grid-template-columns:repeat(2,1fr);
    gap:var(--s-4);padding:0 var(--s-6) 0 var(--s-5);
  }
  .secao h2{
    grid-column:1 / -1;margin:var(--s-6) 0 var(--s-2);font-size:var(--t-xl);
  }
  #lista > .secao:first-child h2{margin-top:var(--s-5)}

  /* Foto SANGRADA na borda do card, ocupando a altura toda.
     A miniatura de 120px boiando com padding em volta deixava metade do card
     em branco e fazia a comida parecer nota de rodapé. Cardápio vende com
     foto — ela ocupa o lugar de foto, não o de ícone. */
  .item{
    border:1px solid var(--c-border);border-radius:var(--r-card);
    padding:0;gap:0;align-items:stretch;overflow:hidden;
    transition:border-color .15s, box-shadow .15s, transform .15s;
  }
  /* Nome no topo, preço no rodapé.
     Centralizado, o texto de um card curto flutuava no meio enquanto o do
     card ao lado começava no topo — a linha de leitura ficava serrilhada e a
     comparação de preço, que é o gesto que o cliente faz, exigia varrer a
     tela. Com o preço empurrado para baixo, todos se alinham. */
  .item .info{
    padding:var(--s-4) var(--s-4) var(--s-4) var(--s-5);
    display:flex;flex-direction:column;align-self:stretch;
  }
  .item .preco{margin-top:auto}
  .item .thumb{
    width:170px;height:auto;align-self:stretch;border-radius:0;flex:none;
  }
  /* A altura mínima existe para a foto ter tamanho de foto. Item sem foto —
     bebida, adicional — não precisa dela: ganhava 150px de altura com o texto
     no topo e o preço lá embaixo, separados por vazio. */
  .item:has(.thumb){min-height:150px}
  .item:not(:disabled):hover{
    border-color:var(--c-text);box-shadow:0 6px 20px rgba(0,0,0,.09);
    transform:translateY(-1px);
  }
  .item .nome{font-size:var(--t-lg)}
  .item .desc{font-size:var(--t-sm);-webkit-line-clamp:3}
  .item .preco{font-size:var(--t-md);padding-top:var(--s-3)}
  /* Item esgotado não reage ao mouse: prometer clique que não acontece é pior
     que o item cinza. */
  .item:disabled{cursor:default}

  /* ---------- Barra do carrinho ----------
     Continua fixa — o total não pode sair da tela nem aqui —, mas descolada
     do rodapé e do tamanho do conteúdo, não da janela inteira. */
  /* `width` explícito é obrigatório aqui.
     Elemento fixo com `left:auto` e `right` definido encolhe até o conteúdo —
     e o CTA, que é flex com space-between, perdia o espaço entre o rótulo e o
     valor: virava "Fazer pedidoR$ 14,00", grudado. */
  .barra{
    width:420px;max-width:calc(100% - var(--s-6));
    left:auto;right:var(--s-5);bottom:var(--s-5);
    border:1px solid var(--c-border);border-radius:var(--r-card);
    box-shadow:0 8px 28px rgba(0,0,0,.16);padding:var(--s-3);
  }
  .barra .cta{transition:filter .15s}
  .barra .cta:hover{filter:brightness(.92)}

  /* ---------- Sheet vira diálogo ----------
     Painel subindo do rodapé é gesto de celular. No desktop o olho está no
     centro da tela, e uma folha colada embaixo obriga a percorrer a tela
     inteira para ler o que se está montando. */
  .sheet{
    top:50%;bottom:auto;left:50%;right:auto;
    max-width:560px;width:calc(100% - var(--s-6)*2);max-height:86vh;
    border-radius:var(--r-sheet);
    transform:translate(-50%,-46%) scale(.98);
    /* A visibility acompanha — aqui era ONDE o fechado invisível cobria o
       centro da tela. Ver o comentário na regra base. */
    opacity:0;transition:transform .2s ease, opacity .16s ease, visibility 0s .2s;
    box-shadow:0 24px 64px rgba(0,0,0,.28);
  }
  .sheet.on{transform:translate(-50%,-50%) scale(1);opacity:1;transition-delay:0s}
  .sheet-foot{padding:var(--s-4)}

  /* ---------- Telas de fluxo ----------
     Carrinho, checkout e acompanhamento não ganham nada em ficar largos: são
     leitura e formulário, e campo de 1000px de largura é mais difícil de
     preencher, não mais fácil. Ficam centralizados numa medida confortável. */
  .app.tela-fluxo{max-width:680px}
  .app.tela-fluxo .campo{padding-left:var(--s-5);padding-right:var(--s-5)}
  .app.tela-fluxo .resumo,
  .app.tela-fluxo .timeline,
  .app.tela-fluxo .pix{padding-left:var(--s-5);padding-right:var(--s-5)}
  .app.tela-fluxo .carrinho-item{padding-left:var(--s-5);padding-right:var(--s-5)}
  .app.tela-fluxo .capa{height:120px}
  .app.tela-fluxo .banner{margin:var(--s-4) var(--s-5)}

  /* Barra dentro do fluxo acompanha a coluna, não a janela. */
  .app.tela-fluxo ~ .barra,
  .tela-fluxo .barra{
    width:min(680px, calc(100% - var(--s-6)));max-width:none;
    right:auto;left:50%;transform:translateX(-50%);
  }

  .flash{margin:var(--s-4) var(--s-5)}
  .confirmado{margin:var(--s-4) var(--s-5)}
  .vazio{padding:var(--s-6)}

  .rodape{padding:var(--s-5) var(--s-6)}

  /* Na faixa da plataforma sobra largura: logo e CNPJ lado a lado em vez de
     empilhados, que no desktop viravam duas linhas quase vazias. */
  .rodape-marca{padding:var(--s-4) var(--s-6)}
  .rodape-marca .assinatura{
    flex-direction:row;align-items:center;justify-content:center;gap:var(--s-4);
  }
}

/* Telas bem largas: a coluna para de crescer, o cartão só centraliza. */
@media (min-width: 1240px) {
  .app{max-width:1120px}
  .secao{grid-template-columns:repeat(2,1fr)}
}