/* Cardapio — lista de precos (feature 064).
   Tela e papel na mesma folha: o bloco @media print no fim reaproveita a mesma marcacao,
   em vez do modo de impressao separado que o servidor mantinha ate a 063. */

:root{
  /* O bloco <style> do documento sobrescreve estes com o cadastro do parceiro. Vazio
     cai aqui — parceiro sem marca cadastrada continua com pagina legivel. */
  --fundo:#FBFCFA; --superficie:#FFFFFF; --superficie-2:#F1F4F0;
  --texto:#202823; --texto-2:#5A675F; --texto-3:#8B968E;
  --linha:#E7ECE7; --linha-2:#EDF1EC;
  --detalhe:#00793F;
  --fonte:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
:root{
  /* Altura do cabecalho fixo. O cabecalho da categoria gruda ABAIXO dele, e a ancora de
     categoria para com esta folga — sem isso o titulo some atras do cabecalho, tanto ao
     rolar quanto ao clicar no indice. O valor e corrigido em runtime pelo script (o nome
     da loja pode quebrar em duas linhas); estes sao os medidos em producao, e valem
     sozinhos quando nao ha JavaScript. */
  --topo-h:158px;
  --marca-fundo-ok: var(--marca-fundo, #FBFCFA);
  --marca-texto-ok: var(--marca-texto, #202823);
  --marca-detalhe-ok: var(--marca-detalhe, #00793F);
}

*{box-sizing:border-box}
/* O atributo `hidden` vale display:none pela folha do navegador — e QUALQUER regra de
   autor que declare display ganha dele. `.sec li` e `.chip` sao flex, entao a busca
   marcava 236 itens como escondidos e nenhum sumia da tela: o contador dizia 4 e a lista
   continuava inteira. Esta regra e o que faz `hidden` valer no que a pessoa ve. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--marca-fundo-ok); color:var(--marca-texto-ok);
  font-family:var(--fonte); font-size:15px; line-height:1.45;
  display:flex; flex-direction:column; min-height:100vh;
}
img{max-width:100%}
:focus-visible{outline:2.5px solid var(--marca-detalhe-ok); outline-offset:2px; border-radius:4px}

/* ---------- cabecalho ---------- */
.topo{
  position:sticky; top:0; z-index:8;
  background:var(--superficie); border-bottom:1px solid var(--linha);
  padding:14px 16px 0;
}
.marca{display:flex; align-items:center; gap:11px}
.marca .logo{width:38px; height:38px; object-fit:contain; flex:0 0 auto}
.marca .nome{font-weight:800; font-size:15px; line-height:1.15; letter-spacing:-.01em; min-width:0}
.marca .nome small{display:block; font-weight:600; font-size:11.5px; color:var(--texto-2); letter-spacing:.02em}
.selo{
  margin-left:auto; flex:0 0 auto; font-size:10.5px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; white-space:nowrap; border-radius:99px; padding:5px 9px;
  background:color-mix(in srgb, var(--marca-detalhe-ok) 14%, #fff);
  color:color-mix(in srgb, var(--marca-detalhe-ok) 78%, #000);
}

/* O respiro de baixo e do proprio cabecalho: os chips somem no desktop, e pendurar o
   espacamento neles deixava a busca colada na primeira linha da lista. */
.linha{display:flex; gap:8px; margin-top:12px; align-items:stretch}
.busca{
  flex:1; min-width:0; display:flex; align-items:center; gap:8px;
  background:var(--superficie-2); border:1px solid var(--linha); border-radius:10px;
  padding:0 12px; color:var(--texto-2);
}
.busca input{
  flex:1; min-width:0; border:0; background:none; outline:none; padding:10px 0;
  font:inherit; font-size:14px; color:var(--texto);
}
.busca input::placeholder{color:var(--texto-3)}
.imprimir{
  flex:0 0 auto; display:flex; align-items:center; gap:7px; cursor:pointer;
  background:var(--superficie); border:1px solid var(--linha); border-radius:10px;
  padding:0 12px; font:inherit; font-size:13px; font-weight:600; color:var(--texto);
}
.imprimir span{display:none}

.chips{display:flex; gap:6px; overflow-x:auto; padding:11px 0 10px; scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{
  display:flex; align-items:center; gap:6px; white-space:nowrap; text-decoration:none;
  font-size:12px; font-weight:600; padding:5px 11px; border-radius:99px;
  border:1px solid var(--linha); background:var(--superficie); color:var(--texto-2);
}
.chip i{width:7px; height:7px; border-radius:2px; flex:0 0 auto}

/* ---------- lista ---------- */
.corpo{flex:1; padding:0 16px 16px}
.indice{display:none}
.att{font-size:11.5px; color:var(--texto-3); padding:10px 0 2px; margin:0}

.sec{margin-top:18px}
/* O cabecalho da categoria acompanha a rolagem. Fica FORA de elemento de tabela de
   proposito: o padrao deixa o efeito de position:sticky indefinido em table-*. E nenhum
   ancestral pode ter overflow diferente de visible, senao o sticky gruda na caixa errada. */
.sech{
  position:sticky; top:var(--topo-h); z-index:4; display:flex; align-items:center; gap:9px;
  background:var(--marca-fundo-ok); padding:9px 0 7px;
}
/* A ancora leva o topo da secao para o topo da JANELA, nao para baixo do cabecalho. */
.sec{scroll-margin-top:calc(var(--topo-h) + 10px)}
.sech i{width:4px; height:17px; border-radius:2px; flex:0 0 auto}
.sech h3{margin:0; font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase}
.sech b{margin-left:auto; font-size:11px; font-weight:600; color:var(--texto-3); font-variant-numeric:tabular-nums}

.sec ul{list-style:none; margin:0; padding:0; background:var(--superficie);
  border:1px solid var(--linha); border-radius:11px; overflow:hidden}
.sec li{display:flex; align-items:baseline; gap:12px; padding:11px 13px; border-top:1px solid var(--linha-2)}
.sec li:first-child{border-top:0}
.nm{flex:1; min-width:0; font-size:14px; font-weight:500; line-height:1.34; overflow-wrap:anywhere}
.un{display:block; font-size:11px; font-weight:600; color:var(--texto-3);
  letter-spacing:.04em; text-transform:uppercase; margin-top:2px}
/* Duas casas decimais sempre (o template usa floatformat:"2g") mais alinhamento a
   direita ja alinham a virgula por construcao. tabular-nums e reforco: alinha tambem a
   parte inteira quando a fonte traz a feature, e e ignorado quando nao traz. */
.pr{font-variant-numeric:tabular-nums; font-weight:700; font-size:16px; white-space:nowrap}
.pr i{font-size:10.5px; font-weight:700; font-style:normal; color:var(--texto-3);
  margin-right:2px; vertical-align:.15em}

.nada{padding:26px 4px; color:var(--texto-2); font-size:14px}
.nada .limpar{background:none; border:0; padding:0; font:inherit; font-weight:700;
  color:var(--marca-detalhe-ok); text-decoration:underline; cursor:pointer}

/* ---------- barra de pedido ---------- */
/* Rodape fixo: a barra de pedido e o credito da plataforma grudam juntos.
   O credito ficava no fim do documento, como na vitrine — e num celular o fim do
   documento cai atras da barra inferior do navegador: media 38px colados na borda, que e
   exatamente a faixa que o Safari e o Chrome cobrem. Aqui ele fica alcancavel sempre.
   `env(safe-area-inset-bottom)` respeita a barra de gestos do iPhone. */
.rodape{position:sticky; bottom:0; z-index:7; background:var(--superficie);
  border-top:1px solid var(--linha); padding-bottom:env(safe-area-inset-bottom, 0px)}
.zap{padding:9px 16px 7px}
.zap a{display:flex; align-items:center; justify-content:center; gap:9px; text-decoration:none;
  background:var(--marca-detalhe-ok); color:#fff; border-radius:10px; padding:11px 14px;
  font-size:13.5px; font-weight:700; white-space:nowrap; line-height:1.2}
.zap svg{flex:0 0 auto}
.zap b{display:none; font-weight:600; opacity:.85; font-size:12.5px}

/* Mesmos valores da vitrine (`PaginaHome/Footer`): cinza claro, 11px, e o azul da
   plataforma. Nao usa as cores do parceiro de proposito — o credito e da Zorgen. */
.creditos{background:#f6f6f6; text-align:center; padding:5px 12px}
.creditos small{font-size:11px; color:#9a9a9a; letter-spacing:.2px}
.creditos a{color:#008CFF; font-weight:600; text-decoration:none}
.creditos a:hover{text-decoration:underline}

.pe-do-papel{display:none}

/* ---------- tela larga ---------- */
@media (min-width:900px){
  :root{--topo-h:124px}
  .topo{padding:16px 26px 15px}
  .topo-in, .corpo{max-width:1120px; margin:0 auto; width:100%}
  .linha{max-width:560px}
  .imprimir span{display:inline}
  .chips{display:none}
  .indice{display:block; position:sticky; top:calc(var(--topo-h) + 8px); align-self:start;
    max-height:calc(100vh - 150px); overflow:auto}
  .indice h2{margin:14px 0 8px; font-size:10.5px; letter-spacing:.12em;
    text-transform:uppercase; color:var(--texto-3); font-weight:700}
  .indice a{display:flex; align-items:center; gap:8px; padding:5px 8px; border-radius:7px;
    text-decoration:none; color:var(--texto-2); font-size:12.5px; font-weight:600}
  .indice a i{width:6px; height:6px; border-radius:2px; flex:0 0 auto}
  .indice a b{margin-left:auto; color:var(--texto-3); font-weight:600;
    font-variant-numeric:tabular-nums; font-size:11px}
  .corpo{display:grid; grid-template-columns:210px 1fr; gap:28px; padding:0 26px 24px}
  .att{padding:14px 0 2px}
  /* Duas colunas de produto. A regra fica no proprio <ul>: multicol flui sozinho, e
     dividir os itens no servidor teria que ser refeito a cada largura. */
  .sec ul{columns:2; column-gap:30px; column-rule:1px solid var(--linha-2); padding:2px 0}
  .sec li{break-inside:avoid}
  .zap{padding:10px 26px 8px}
  .zap a{max-width:340px; margin-left:auto}
  .zap b{display:inline}
}

/* ---------- papel ---------- */
@media print{
  @page{size:A4 portrait; margin:12mm 10mm}
  body{background:#fff; color:#111; font-size:10.5px; display:block}
  .topo{position:static; border:0; padding:0 0 8px; background:none}
  .linha, .chips, .indice, .rodape{display:none}
  .marca{border-bottom:2px solid #111; padding-bottom:8px}
  .marca .logo{width:44px; height:44px}
  .marca .nome{font-size:16px}
  .selo{background:none; color:#444; border:1px solid #999; margin-left:auto}
  .corpo{display:block; padding:0; max-width:none}
  .att{padding:6px 0 0; color:#444; font-size:9.5px}
  /* Duas colunas no papel, pela mesma regra da tela larga.
     A categoria NAO leva `break-inside: avoid`: BENEFICIADOS DO ZEFE tem 1957px e FRUTAS
     2202px, mais alto que uma coluna A4 inteira. Sem caber, o navegador empurrava a secao
     para a folha seguinte e deixava a primeira em branco — 83 caracteres na pagina 1.
     O que o requisito pede e outra coisa: que o CABECALHO nao fique sozinho no pe da
     pagina. Isso e `break-after: avoid` no cabecalho, e nao no bloco todo. */
  .lista{columns:2; column-gap:9mm; margin-top:8px}
  .sec{break-inside:auto; margin:0 0 9px}
  .sech{position:static; background:none; padding:0 0 3px; border-bottom:1px solid #111;
    break-after:avoid; break-inside:avoid}
  .sec{scroll-margin-top:0}
  .sech i{display:none}
  .sech h3{font-size:9.5px}
  .sech b{font-size:8.5px; color:#666}
  .sec ul{columns:auto; border:0; border-radius:0; background:none; padding:0}
  .sec li{padding:2px 0; border-top:0; border-bottom:1px dotted #C9CFC9; break-inside:avoid}
  .nm{font-size:10px; font-weight:400}
  .un{display:inline; margin:0 0 0 4px; font-size:8.5px; color:#666}
  .pr{font-size:10px}
  .pr i{font-size:8px}
  .nada{display:none}
  .pe-do-papel{display:flex; gap:14px; margin-top:10px; padding-top:6px;
    border-top:1px solid #111; font-size:9px; color:#444; break-before:avoid}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}