/* ===========================================================
   O CARDÁPIO DO CLIENTE. 2026-09-05.

     ESTE ARQUIVO NÃO PODE CONTER A MARCA DO ANOTAFÁCIL.

   Sem #1D63F0 escrito aqui, sem o logo, sem "feito com". As cores
   chegam do restaurante em variáveis que o JS escreve na carga — dois
   restaurantes diferentes abrem esta MESMA folha com caras diferentes.

   É a regra que sustenta a mensalidade: o dono paga por uma tela que
   parece dele. Se a nossa marca vazar para cá, o produto vira "mais um
   link de fornecedor" e o motivo de pagar some junto.

   Os valores abaixo são só o que aparece antes do JS responder — nada
   de identidade, só cinza que não choca com nenhuma marca.

   O DESENHO DESTA TELA, EM UMA FRASE
   Duas colunas no desktop: a arte da casa parada à esquerda, o menu
   rolando à direita. Vitrine de rua e balcão de pedido, lado a lado.
   =========================================================== */
:root{
  --marca:#8A8A8A; --marca-2:#B0B0B0;
  --fundo:#121212; --superficie:#1D1D1D; --texto:#FFFFFF;

  --linha:rgba(255,255,255,.09);
  --fraco:rgba(255,255,255,.58);

  --display:'Gabarito', system-ui, sans-serif;
  --sans:'Source Sans 3', system-ui, sans-serif;

  --r:16px;          /* raio padrão — arredondado, nunca pílula */
  --r-g:22px;        /* raio dos blocos grandes */
  --toque:44px;      /* alvo mínimo de toque */
  --gutter:22px;     /* respiro lateral do menu */

  /* O véu da marca sobre o fundo. Um cartão escuro sozinho fica cinza e
     morto; o mesmo cartão com 6% da cor da casa por baixo "pertence" ao
     restaurante sem precisar de mais nenhum enfeite. */
  --veu:color-mix(in srgb, var(--marca) 7%, var(--superficie));
  --aro:color-mix(in srgb, var(--marca) 30%, transparent);
}

*{ box-sizing:border-box; }

/* Só para leitor de tela: sai do desenho, fica na estrutura. `clip-path`
   em vez de `display:none` porque o que some com display também some do
   leitor — e aí não adiantaria existir. */
.so-leitor{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; margin:-1px; padding:0; border:0;
}
html{ -webkit-text-size-adjust:100%; }
body{
  /* A cor das sobras laterais quando a tela é mais larga que o teto.
     É a cor da casa, não `--fundo`: emenda com a faixa do topo em vez de
     abrir uma faixa escura ao lado dela. */
  margin:0; background:var(--promo-fundo, var(--marca)); color:var(--texto);
  font-family:var(--sans); font-size:15px; line-height:1.5;
}
/* A PÁGINA NÃO PASSA DA LARGURA DA TELA (2026-09-13).

   No celular o "Acessos" da faixa de cima passa uns 14px da borda (em
   390px de largura, a página media 404). O Chrome então alarga a janela
   da página além da tela, e o que é `position:fixed` no rodapé fica preso
   ao rodapé DESSA janela maior, abaixo do que o celular mostra: a barra
   do carrinho nascia inteira fora da vista (medido: topo em 875px numa
   tela de 844). `clip` corta a sobra sem virar caixa de rolagem, então o
   `sticky` da faixa de cima e das abas continua funcionando. A faixa de
   cima não mudou; a sobra dela já aparecia cortada. */
html, body{ overflow-x:clip; }
body.travado{ overflow:hidden; }
img{ max-width:100%; }
h1,h2,h3{ font-family:var(--display); margin:0; }
button{ font:inherit; }

/* ===========================================================
   A GRADE DE DUAS COLUNAS

   `100dvh` e não `100vh`: no celular a barra do navegador entra e sai, e
   `vh` congela na altura maior — a última linha do menu ficava atrás da
   barra, escondida, sem nenhum jeito de rolar até ela.
   =========================================================== */
/* A COLUNA DA ARTE TEM O TAMANHO DA ARTE.

   As artes do slide são quadradas. Enquanto a coluna era uma fração da
   janela, sobrava altura, e `contain` fechava a sobra com cor chapada —
   duas tarjas azuis que pareciam defeito de recorte.

   Agora a largura da coluna É a altura dela: coluna quadrada, arte
   quadrada, sobra nenhuma. O `min(...)` é o freio — numa janela alta e
   estreita a coluna comeria o cardápio inteiro, então ela para em 60% da
   largura da tela e aceita a tarja de volta, que é o menor dos males.

   `--alt-menu-topo` entra na conta porque a faixa do topo já tirou essa
   altura do `#tela`. */
:root{
  /* TETO DE LARGURA DO SITE.

     Acima disso o cardápio para de crescer e se centraliza; o que sobra
     dos lados fica com a cor da casa, a mesma da faixa do topo, então a
     borda não vira uma tarja de cor diferente. 1740px é a largura em que
     o dono aprovou o desenho.

     `--larg-site-real` é o teto OU a janela, o que for menor — é essa a
     medida que todo o resto usa, senão as contas erram em tela pequena. */
  --larg-site:1740px;
  --larg-site-real:min(100vw, var(--larg-site));

  --larg-arte:min(calc(100dvh - var(--alt-menu-topo, 64px)),
                  calc(var(--larg-site-real) * .6));
}
#tela{
  width:100%; max-width:var(--larg-site); margin-inline:auto;
  display:grid;
  grid-template-columns:var(--larg-arte) minmax(0, 1fr);
  /* A linha PRECISA ser declarada. Sem ela a altura da linha é `auto`, e
     `auto` esticado não conta como altura definida para o Chrome: a
     `height:100%` da arte virava `auto`, a imagem passava a ser medida
     pela largura e o cartaz saía cortado embaixo. O Firefox resolvia a
     porcentagem assim mesmo — por isso as fotos daqui não acusaram, e
     quem viu foi o dono abrindo no Chrome. */
  grid-template-rows:minmax(0, 1fr);
  /* A faixa mora acima e é irmã deste bloco. Sem descontar a altura
     dela, a página fica mais alta que a janela e nasce rolando. */
  height:calc(100dvh - var(--alt-menu-topo, 56px));
}

/* ---- a coluna parada ---- */
#vitrine{
  position:relative; overflow:hidden;
  /* A cor que fecha as sobras ao redor do cartaz. Vem do cadastro
     (`promo.fundo`), porque é a cor DA ARTE e não a da marca — o cartaz
     pode ser feito em qualquer fundo. Sem cadastro, cai na cor da casa,
     que erra menos do que branco ou preto. */
  background:var(--promo-fundo, var(--marca));
}
/* A ARTE APARECE INTEIRA.

   `cover` cortava as beiradas — e a beirada de baixo é onde a arte traz
   o telefone e os aplicativos. Cortar a chamada para ação é estragar o
   cartaz. Então `contain`, e a sobra é fechada com a cor de fundo da
   própria arte.

   (Antes a sobra era uma cópia borrada da arte. Preenchia sozinha
   qualquer proporção, mas o borrão aparecia como mancha ao lado do
   cartaz e sujava a tela. Cor chapada some — é o que faz o cartaz
   parecer que termina onde a coluna termina.)

   Absoluta em vez de `width/height:100%` no fluxo: assim a arte se mede
   pelo bloco que a contém, e não por uma porcentagem que cada navegador
   resolve de um jeito. */
/* AS ARTES EMPILHADAS NA MESMA CÉLULA.

   Grade de uma célula só, com todo slide em `grid-area:1/1`, e não
   `position:absolute`: absoluto tira as artes do fluxo, e no celular —
   onde a coluna tem altura automática — o bloco colapsaria para zero e a
   promoção sumiria. Empilhado por grade, a arte mais alta dá a altura e
   as outras se sobrepõem a ela. */
#vitrine{ display:grid; grid-template-rows:minmax(0, 1fr); }
/* A TROCA DE CARTAZ — o único momento autorado desta tela.

   Não é fade. O mundo aqui é pôster de papel: serigrafia, textura,
   borda rasgada. Então o cartaz novo ENTRA VARRENDO por cima do velho,
   com `clip-path`, como quem cola um pôster novo sobre o anterior. O
   que sai não se apaga — fica embaixo até ser coberto, que é o que
   acontece numa parede.

   600ms com desaceleração exponencial: tempo de chegada confiante, não
   de espera. O `scale` de 1.02 para 1 dá peso ao papel assentando; é
   sutil de propósito, porque a segunda ideia material serve à primeira
   em vez de competir com ela. */
#vitrine .slide{
  grid-area:1 / 1; position:relative; min-width:0; min-height:0;
  pointer-events:none; z-index:1;
  clip-path:inset(0 0 0 100%);
}
#vitrine .slide.visivel{
  pointer-events:auto; z-index:2;
  clip-path:inset(0 0 0 0);
  transition:clip-path .6s cubic-bezier(.16,1,.3,1);
}
#vitrine .slide.visivel .arte{
  transform:scale(1);
  transition:transform .7s cubic-bezier(.16,1,.3,1);
}
#vitrine .slide .arte{ transform:scale(1.02); }

#vitrine .arte{
  width:100%; height:100%; object-fit:contain; display:block;
}

/* Os pontinhos. Ficam ACIMA das artes na mesma célula da grade, e por
   isso precisam do `z-index` — sem ele o slide seguinte, que vem depois
   no HTML, passaria por cima deles. */
/* O PÉ DO CARTAZ — a chamada e, embaixo dela, os pontinhos.

   Mora na mesma célula da grade que as artes, e por isso precisa do
   `z-index`: sem ele o slide seguinte, que vem depois no HTML, passaria
   por cima. É o mesmo motivo que os pontinhos tinham antes de sair. */
.pe-vitrine{
  grid-area:1 / 1; z-index:3;
  align-self:end; justify-self:center;
  display:flex; align-items:center;
  padding:0 16px;
  margin-bottom:calc(20px + env(safe-area-inset-bottom, 0px));
}

/* BRANCO CHAPADO, e não a cor da casa.

   O fundo aqui é o cartaz do restaurante, que pode ser de qualquer cor
   — nos três tenants da amostra ele sai azul, verde e vermelho. Um
   botão na cor da marca some dentro do próprio cartaz em pelo menos um
   deles. Branco com texto escuro é o único par que se lê em cima de
   todos, e é o mesmo raciocínio do `--promo-fundo` logo acima. */
.cta-vitrine{
  display:inline-flex; align-items:center; gap:8px;
  min-height:var(--toque); padding:0 22px;
  border:0; border-radius:999px;
  background:#fff; color:#12131A;
  font-family:var(--display); font-size:15px; font-weight:800;
  letter-spacing:-.01em; white-space:nowrap; cursor:pointer;
  box-shadow:0 8px 22px rgba(0,0,0,.32);
  transition:transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s ease;
}
.cta-vitrine svg{ width:16px; height:16px; }
.cta-vitrine:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(0,0,0,.4); }
.cta-vitrine:active{ transform:translateY(0); transition-duration:.08s; }
.cta-vitrine:focus-visible{ outline:3px solid #fff; outline-offset:3px; }

/* A arte inteira é clicável quando o cadastro diz para onde ela leva.
   Sem `produto` no cadastro ela continua sendo só arte, e o cursor não
   promete um clique que não existe. */
#vitrine .alvo-promo{
  position:absolute; inset:0; z-index:2; border:0; padding:0;
  background:none; cursor:pointer;
}
#vitrine .alvo-promo:focus-visible{
  outline:3px solid var(--texto); outline-offset:-6px;
}
/* Restaurante sem arte cadastrada: a coluna some e o menu fica inteiro.
   Melhor uma coluna a menos do que meia tela de retângulo vazio. */
#tela.sem-vitrine{ grid-template-columns:minmax(0, 1fr); }
#tela.sem-vitrine #vitrine{ display:none; }

/* ---- a coluna que rola ---- */
#menu{
  overflow-y:auto; overscroll-behavior:contain;
  scroll-behavior:smooth;
  background:var(--fundo);
  /* Espaço para a barra da sacola não cobrir o último cartão. */
  padding-bottom:110px;
}
#menu::-webkit-scrollbar{ width:10px; }
#menu::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.14); border-radius:99px;
  border:3px solid var(--fundo);
}
#menu::-webkit-scrollbar-track{ background:transparent; }

/* ===========================================================
   A CAPA DO MENU
   =========================================================== */
#capa{
  padding:var(--gutter);
  /* Respiro embaixo para a BORDA RASGADA aparecer inteira — e o
     `margin-bottom` negativo devolve esse espaço ao fluxo.

     É o par que faz o rasgo DESCER sem empurrar o "LANCHES" junto: o
     bloco cresce para baixo (e o fundo, ancorado na base, desce com
     ele), mas o que vem depois sobe de volta a mesma medida. Só aumentar
     o padding levaria o título embora junto e a distância não mudaria. */
  padding-bottom:54px;
  margin-bottom:-16px;
  /* DUAS REPETIÇÕES NO DESKTOP, UMA NO CELULAR.

     A medida manda na LARGURA e a altura vem da proporção do arquivo:
     `50%` põe dois ladrilhos lado a lado ocupando a faixa exata, sem
     sobra e sem terceiro pela metade. A arte é mais alta que a seção,
     então o excesso é cortado por cima — e é por isso que a âncora é
     `bottom`: o rasgo da base é a única parte que não pode ser cortada.

     (O celular fica com uma repetição só, no @media do fim do arquivo:
     dois ladrilhos numa tela estreita deixam as losangas pequenas
     demais para se ler como padrão.) */
  background:var(--fundo-vitrines, none) center bottom / 50% auto repeat-x;
}

/* ---- as quatro vitrines de categoria ---- */
.vitrines{
  position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px; margin:0; padding:0; list-style:none;
}
/* O <li> estica com a linha da grade, mas o <button> dentro dele não ia
   junto: "Pratos executivos" quebra em duas linhas e só aquele cartão
   ficava mais alto que os outros três. */
.vitrines li{ display:flex; }
.vitrines li > .vitrine{ flex:1; min-width:0; }
/* Título e botão em cima, foto ocupando todo o resto embaixo.

   Em coluna de flex, e não com a foto em `position:absolute`: com a
   foto fora do fluxo, "Pratos executivos" quebrava em duas linhas e o
   botão descia por cima dela. Aqui a foto recebe o espaço que sobrou,
   seja ele qual for. */
.vitrine{
  overflow:hidden;
  display:grid; place-items:center;
  /* Azul da casa, como os cartões de produto: as artes das categorias
     são recorte, e recorte sobre fundo escuro não pertence à mesma
     família visual dos cartões logo abaixo. */
  background:var(--marca);
  /* Quadrada, e a arte ocupa tudo. Sem a barra de título em cima, a
     altura precisa vir de algum lugar — `aspect-ratio` mantém as quatro
     do mesmo tamanho em qualquer largura, o que `min-height` não fazia:
     ele só garantia um piso, e a categoria de nome comprido esticava
     mais que as vizinhas. */
  aspect-ratio:1; padding:0;
  border-radius:var(--r); border:1px solid var(--aro);
  cursor:pointer; color:inherit;
}
.vitrine{ transition:border-color .15s, transform .18s cubic-bezier(.16,1,.3,1); }
.vitrine:hover{ border-color:var(--marca); transform:translateY(-3px); }
/* Categoria sem foto cadastrada não vira quadrado vazio: mostra o nome. */
.vitrine-sem-foto{
  padding:12px; font-family:var(--display);
  font-size:17px; font-weight:800; text-align:center; line-height:1.15;
}
/* A arte preenche o cartão inteiro. O teto de altura que existia aqui
   servia para a foto não empurrar o título; sem título, ele só deixaria
   uma faixa vazia embaixo. */
.vitrine img{
  width:100%; height:100%; object-fit:cover; display:block;
  /* A MESMA aproximação dos cartões de produto. O `.vitrine` já tem
     `overflow:hidden`, então a arte cresce por baixo da borda em vez de
     estourar o quadrado. Mesma curva e mesmo passo de 6% que a
     `.cartao-foto` usa — dois blocos que respondem ao ponteiro do mesmo
     jeito lêem como um sistema só. */
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.vitrine:hover img{ transform:scale(1.06); }

/* ===========================================================
   O MENU DE CIMA

   Uma faixa cheia na cor da CASA — `--marca`, que vem do cadastro do
   restaurante. Azul no anotafácil Food, verde no Sabor & Cia, vermelha
   no Brasa Burger. Nenhuma cor deste arquivo é do anotafácil.

   TEXTO BRANCO SOBRE A MARCA. Os três tenants cadastrados dão contraste
   entre 5:1 e 5,4:1 com branco, acima do 4,5:1 que a norma pede. Uma
   casa com marca CLARA — amarelo, bege — reprovaria, e aí a saída é um
   campo `marca.contraste` no cadastro, não um remendo aqui: quem escolhe
   a cor é o restaurante, e a tela só escreve o que recebeu.

   Ela gruda no topo e, no celular, a página rola por baixo — por isso a
   altura é medida em JS e chega aqui como `--alt-menu-topo`. Um número
   fixo erraria no primeiro restaurante de nome comprido.
   =========================================================== */
#menuTopo{
  position:sticky; top:0; z-index:30;
  /* A FAIXA COPIA A GRADE DE BAIXO — a MESMA `--larg-arte`, e não uma
     proporção parecida: a divisória invisível dela tem que cair
     exatamente onde a arte encontra o menu, ou o logo sai do eixo. */
  display:grid; grid-template-columns:var(--larg-arte) minmax(0, 1fr);
  align-items:center;
  padding:0;
  width:100%; max-width:var(--larg-site); margin-inline:auto;
  min-height:64px;
  /* Continua o cartaz em vez de encostar nele.
     `--promo-fundo` é o fundo da arte da casa, medido do próprio arquivo
     e guardado no cadastro (#015AF3 no anotafácil Food); a marca é
     #1D63F0. Encostados numa borda só, os dois azuis viravam um degrau
     visível. Sem cartaz cadastrado, cai em `--marca` — a mesma cadeia
     que o #vitrine já usa. */
  background:var(--promo-fundo, var(--marca));
  color:#fff;
}

/* A marca da casa, à esquerda, e é o caminho de volta ao alto. */
.mt-marca{
  /* Centrado na metade da arte, não encostado na borda. */
  justify-self:center;
  display:flex; align-items:center;
  padding:6px 14px;
  background:none; border:0; border-radius:12px; cursor:pointer;
  color:inherit; font:inherit;
}
.mt-marca img{ height:36px; width:auto; display:block; }

/* A METADE DO CARDÁPIO.
   Três colunas outra vez, mas agora DENTRO da metade direita: os itens
   caem no centro dela, e o "Acessos" mais a sacola encostam na borda. */
.mt-lado-menu{
  display:grid; grid-template-columns:1fr minmax(0, auto) 1fr;
  align-items:center; gap:14px;
  /* Respiro IGUAL nos dois lados: com padding só à direita, o centro da
     metade se deslocava 11px e os itens saíam do eixo da coluna. */
  padding:0 var(--gutter); min-width:0;
}
.mt-marca span{
  font-family:var(--display, inherit); font-weight:800; font-size:16px;
  letter-spacing:-.01em; white-space:nowrap;
}
.mt-marca:hover{ background:rgba(255,255,255,.16); }

/* Os destinos. Rolam de lado quando não cabem — e a barra de rolagem
   some: o GTK desenha uma faixa BRANCA sólida dentro de qualquer
   overflow, e numa faixa colorida ela aparece como um risco atravessado
   que parece defeito de pintura. */
.mt-itens{
  grid-column:2; justify-self:center;
  /* `flex:1` faz este bloco tomar o vao entre a marca (esquerda) e o
     Acessos + sacola (direita); `center` centraliza os itens DENTRO
     desse vao. Nao e centro exato da janela — seria so se os dois lados
     tivessem a mesma largura — e e o suficiente para a faixa deixar de
     parecer encostada na borda esquerda. */
  flex:1 1 auto; min-width:0;
  display:flex; align-items:center; justify-content:center; gap:2px;
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none;
}
.mt-itens::-webkit-scrollbar{ display:none; }

.mt-item{
  flex:0 0 auto;
  min-height:36px; padding:0 13px;
  background:none; border:0; border-radius:9px; cursor:pointer;
  color:#fff; font:inherit; font-size:14px; font-weight:600;
  white-space:nowrap;
  opacity:.88; transition:background .16s, opacity .16s;
}
.mt-item:hover{ background:rgba(255,255,255,.18); opacity:1; }
.mt-item:focus-visible,
.mt-marca:focus-visible,
.mt-sacola:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* A sacola. Branca sobre a marca, porque é a única ação da faixa e
   precisa se separar dos destinos — que são navegação, não ação.
   Só aparece com item dentro: um "0" permanente no alto da tela é
   ruído que ninguém age sobre. */
.mt-sacola{
  flex:0 0 auto;
  display:flex; align-items:center; gap:7px;
  min-height:36px; padding:0 12px;
  background:#fff; border:0; border-radius:10px; cursor:pointer;
  color:var(--marca); font:inherit; font-size:14px; font-weight:700;
}
.mt-sacola[hidden]{ display:none; }
.mt-sacola svg{ width:17px; height:17px; }
.mt-sacola:hover{ background:rgba(255,255,255,.88); }
.mt-n{ font-variant-numeric:tabular-nums; }

/* ---- o menu sanfonado (só no celular) ----
   No desktop os destinos cabem na faixa e o botão das três linhas nem
   existe na tela; a sacola de dentro dele também não (a da faixa já está
   lá). Ver o @media (max-width:860px). */
.mt-fixos{ display:none; }
.mt-sanfona{
  flex:0 0 auto; width:44px; height:44px;
  display:grid; place-items:center;
  background:none; border:0; border-radius:10px; cursor:pointer;
  color:#fff; transition:background .16s;
}
.mt-sanfona svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; }
.mt-sanfona:hover{ background:rgba(255,255,255,.16); }
.mt-sanfona:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
#menuTopo.menu-aberto .mt-sanfona{ background:rgba(255,255,255,.2); }

/* ---- o acordeão de acessos ----

   Três destinos que não são do cardápio: o painel de quem opera a casa,
   a tela do motoboy e o rastreio do pedido. Ficam atrás de UM botão em
   vez de soltos na faixa porque nenhum deles é o que o cliente com fome
   veio fazer aqui — mas todos precisam existir sem obrigar a decorar um
   endereço. */
.mt-direita{
  justify-self:end;
  display:flex; align-items:center; gap:8px; min-width:0;
}
.mt-acessos{ position:relative; flex:0 0 auto; }
.mt-abre{ display:inline-flex; align-items:center; gap:6px; }
.mt-chevron{
  width:13px; height:13px; transform:rotate(90deg);
  transition:transform .18s;
}
.mt-abre[aria-expanded="true"] .mt-chevron{ transform:rotate(-90deg); }

.mt-folha{
  position:absolute; right:0; top:calc(100% + 8px); z-index:40;
  width:min(290px, calc(100vw - 24px));
  display:flex; flex-direction:column; gap:2px;
  padding:6px;
  background:var(--superficie);
  border:1px solid var(--aro); border-radius:var(--r);
  box-shadow:0 18px 44px rgba(0,0,0,.55);
}
.mt-folha[hidden]{ display:none; }

.mt-atalho{
  display:flex; flex-direction:column; gap:2px;
  padding:10px 12px; border-radius:11px;
  color:var(--texto); text-decoration:none;
}
a.mt-atalho:hover{ background:color-mix(in srgb, var(--marca) 16%, transparent); }
a.mt-atalho:focus-visible{ outline:2px solid var(--marca-2, var(--marca)); outline-offset:-2px; }
.mt-atalho-nome{ font-size:14px; font-weight:700; }
.mt-atalho-sub{ font-size:12.5px; color:var(--fraco); line-height:1.35; }

/* O que ainda não existe fica visível e apagado, nunca clicável. */
.mt-atalho.desligado{ cursor:default; }
.mt-atalho.desligado .mt-atalho-nome{ color:var(--fraco); font-weight:600; }
.mt-embreve{
  margin-left:6px; padding:2px 7px; border-radius:999px;
  background:color-mix(in srgb, var(--marca) 22%, transparent);
  color:var(--marca-2, var(--marca)); font-size:10.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; vertical-align:1px;
}

/* ---- a faixa entre categorias ----

   Largura inteira da coluna, altura pela própria proporção do arquivo.
   `display:block` no <img> mata os 4px de descida que o navegador
   reserva para a linha de base de um inline — sem isso sobra uma
   frestinha escura embaixo da arte, que numa faixa de ponta a ponta
   parece defeito de recorte. */
.faixa-meio{
  display:block; width:100%;
  margin:22px 0 6px; padding:0;
  /* Sem canto arredondado: a faixa vai de ponta a ponta da coluna e o
     arredondamento cortava a arte nos quatro cantos. Ela é um cartaz
     colado na parede, não um cartão. */
  border:0; overflow:hidden;
  background:none;
}
button.faixa-meio{ cursor:pointer; }
button.faixa-meio:focus-visible{ outline:3px solid var(--marca-2, var(--marca)); outline-offset:3px; }
/* `picture` é inline por padrão e a linha de base deixaria uma fresta de
   alguns pixels sob a arte. Bloco nos dois. */
.faixa-meio picture{ display:block; }
/* `width`/`height` vêm do cadastro e dão a proporção ao navegador: ele
   reserva a altura certa antes da arte chegar, e como as duas versões
   têm proporções diferentes (3:1 e 4:3), quem manda é a que o
   `<source>` escolheu. */
.faixa-meio img{ display:block; width:100%; height:auto; }

/* ===========================================================
   A LISTA
   =========================================================== */
.titulo-cat{
  display:flex; align-items:baseline; gap:10px;
  margin:26px var(--gutter) 12px;
  font-size:12px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--fraco);
  /* No desktop nada gruda dentro da coluna que rola, então o título só
     precisa de um respiro. No celular a faixa de cima cobre a página, e
     o @media do fim do arquivo desconta a altura dela. */
  scroll-margin-top:14px;
}
.titulo-cat::after{
  content:''; flex:1; height:1px; background:var(--linha);
}

.grade{
  /* TRÊS colunas, fixas. Já foram `auto-fill` com largura mínima, mas
     o número de cartões por linha mudava com a janela — e o pedido é
     três, não "três nesta largura". No celular o @media força uma
     coluna, como antes. */
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px; padding:0 var(--gutter);
}

.cartao{
  display:flex; flex-direction:column;
  border-radius:var(--r-g); border:1px solid var(--linha);
  background:var(--veu);
  transition:border-color .15s, transform .15s;
}
/* O cartão todo abre a ficha, então ele todo é alvo — menos os
   controles de dentro, que voltam ao cursor de botão por conta
   própria. */
.cartao{
  cursor:pointer;
  transition:border-color .15s, transform .18s cubic-bezier(.16,1,.3,1),
             box-shadow .18s ease;
}
/* O cartão inteiro abre a ficha, então ele inteiro precisa responder ao
   ponteiro. 3px e uma sombra com deslocamento real — halo colorido sem
   offset é decoração, não profundidade. */
.cartao:hover{
  border-color:var(--marca);
  transform:translateY(-3px);
  box-shadow:0 10px 22px rgba(0,0,0,.45);
}
.cartao:active{ transform:translateY(-1px); transition-duration:.08s; }

.cartao-foto{
  /* Contexto de consulta para o selo. A largura do cartão não vem da
     janela — vem de três colunas dentro da coluna do menu, que por sua
     vez divide a tela com o cartaz. Só o próprio bloco sabe quanto
     espaço tem, então quem decide é `@container` e não `@media`. */
  container-type:inline-size;
  position:relative;
  display:grid; place-items:center;
  aspect-ratio:1.35; padding:10px;
  border-radius:var(--r-g) var(--r-g) 0 0; overflow:hidden;
}
/* `cover` e não `contain`: a foto do cardápio é retângulo de verdade,
   não recorte com fundo transparente. `contain` deixava uma moldura
   escura sobrando dentro de um cartão já escuro. */
.cartao-foto .foto-produto{
  width:100%; height:100%; object-fit:cover; border-radius:14px;
}

/* ---- modo recorte: PNG sem fundo sobre a cor da casa ----

   `contain` e não `cover`: recorte cortado nas bordas perde justamente a
   silhueta, que é a razão de ele existir. O bloco ganha a cor da casa
   por baixo e um respiro maior, para o produto não encostar na borda.

   O nome continua ABAIXO da foto, dentro do cartão — nunca por cima do
   PNG. Texto sobre recorte depende da silhueta de cada produto: cabe no
   copo de refrigerante e some no meio de uma pizza. */
/* A chave é POR PRODUTO, não por restaurante: as fotos chegam aos
   poucos, e enquanto só três dos 36 lanches têm recorte os outros
   precisam continuar com a foto preenchendo o bloco. Um interruptor
   único obrigaria a esperar as 36 para ver qualquer coisa. */
.cartao.recorte .cartao-foto{
  background:var(--marca);
  padding:12px 12px 4px;
}
.cartao.recorte .cartao-foto .foto-produto{
  object-fit:contain; border-radius:0;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.38));
}
.cartao.recorte .selo-destaque{ background:#fff; color:var(--marca); }

/* Produto sem foto não fica com buraco: o `ui.js` devolve um ladrilho
   com a cor tirada do próprio id e o ícone da categoria. Vale para o
   restaurante que ainda não mandou as fotos — a tela abre inteira do
   mesmo jeito. */
.foto-produto.ladrilho{
  display:grid; place-items:center; line-height:1;
  border-radius:var(--r);
  background:linear-gradient(145deg,
    hsl(var(--h) 40% 20%), hsl(calc(var(--h) + 28) 36% 13%));
}
.cartao-foto .foto-produto.ladrilho{ font-size:64px; }
.folha-foto .foto-produto.ladrilho{ font-size:96px; }

.selo-destaque{
  position:absolute; top:12px; left:12px; z-index:2;
  display:inline-flex; align-items:center; gap:4px;
  padding:6px 9px; border-radius:999px;
  background:var(--marca); color:#fff;
  /* 11.5px e não 12: "Mais pedida" com o troféu media 3px a mais que a
     largura livre do cartão e cortava em "Mais pe...". Três pixels. */
  font-size:11.5px; font-weight:700;
  /* NUNCA por baixo do coração. 12px de folga à esquerda + os 36px do
     botão + os 10px dele à direita. Três colunas fixas deixam o cartão
     estreito no desktop, e era ali que o selo sumia por trás dele. */
  max-width:calc(100% - 24px - 40px);
}
.selo-destaque svg{ width:14px; height:14px; flex:0 0 auto; }
.selo-destaque b{
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-weight:inherit;
}
/* CARTÃO ESTREITO PERDE O TROFÉU, NÃO A PALAVRA.

   No desktop as três colunas deixam o cartão com ~186px, e o troféu
   mais o texto não cabem na largura livre ao lado do coração: sobrava
   "Mais pe...". O ícone é enfeite, "Mais pedida" é a informação — então
   é o ícone que sai. No celular, com uma coluna só, os dois cabem e o
   troféu continua lá. */
@container (max-width:230px){
  .selo-destaque svg{ display:none; }
  .selo-destaque{ padding:6px 10px; }
}

/* O selo de promoção não usa a cor da casa: ele precisa DESTACAR-SE de
   tudo que já é da casa, e o vermelho de desconto é convenção que o
   cliente lê sem legenda. Tabular para o "-13%" não dançar de largura
   entre um cartão e outro. */
.selo-promo{
  background:#E11D48; color:#fff;
  font-family:var(--display); font-size:12.5px; letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}
.cartao.recorte .selo-promo{ background:#E11D48; color:#fff; }

/* A foto cresce um passo quando o ponteiro entra no cartão. O corte é
   do `.cartao-foto`, que já tem overflow:hidden — a foto passa por
   baixo da borda em vez de estourar o cartão. */
.cartao-foto .foto-produto{
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.cartao:hover .cartao-foto .foto-produto{ transform:scale(1.06); }

.favorito{
  position:absolute; top:10px; right:10px; z-index:2;
  width:36px; height:36px; display:grid; place-items:center;
  background:rgba(0,0,0,.42); border:1px solid var(--linha);
  border-radius:50%; color:var(--texto); cursor:pointer;
  backdrop-filter:blur(4px);
}
.favorito svg{ width:18px; height:18px; }
.favorito{ transition:color .15s, border-color .15s, transform .15s; }
.favorito:active{ transform:scale(.88); }
.favorito[aria-pressed="true"]{
  color:var(--marca-2, var(--marca)); border-color:var(--aro);
  animation:coracao-pega .26s cubic-bezier(.16,1,.3,1);
}
@keyframes coracao-pega{
  0%{ transform:scale(1) } 40%{ transform:scale(1.28) } 100%{ transform:scale(1) }
}
.favorito[aria-pressed="true"] svg{ fill:currentColor; }

.cartao-corpo{
  display:flex; flex-direction:column; gap:7px;
  padding:4px 12px 12px;
}
.cartao-nome{ font-size:16px; font-weight:800; letter-spacing:-.01em; }
/* Botão que não parece botão: existe para o teclado alcançar a ficha
   agora que o "Detalhes" saiu. Herda tudo do <h3> em volta. */
.abre-nome{
  padding:0; border:0; background:none; cursor:pointer;
  color:inherit; font:inherit; text-align:left;
}
.abre-nome:focus-visible{
  outline:2px solid var(--marca-2, var(--marca)); outline-offset:3px; border-radius:4px;
}
.cartao-preco{
  margin:2px 0 0; font-family:var(--display);
  font-size:17px; font-weight:800; letter-spacing:-.01em;
}
/* "a partir de": o preço do cartão é o da opção mais barata quando o
   produto tem tamanho. Sem esse aviso, uma pizza anunciada a R$ 34,90
   que fecha a R$ 52,90 na folha parece preço trocado. */
.cartao-desde{
  margin-left:6px; font-family:var(--sans);
  font-size:11px; font-weight:600; color:var(--fraco);
  text-transform:lowercase; letter-spacing:0;
  white-space:nowrap;
}
/* Riscado DEPOIS do preço que vale, não antes: quem lê da esquerda
   para a direita encontra primeiro o que vai pagar. O de antes era a
   primeira coisa que o olho batia, e por um instante o cartão anunciava
   o preço errado. */
.cartao-preco s{
  color:var(--fraco); font-weight:600; font-size:12.5px; margin-left:8px;
  /* Quebrar entre "R$" e "31,90" partia o valor em duas linhas e o
     riscado deixava de se ler como um preço. */
  white-space:nowrap;
}

/* ---- o contador (vive só na folha do produto) ---- */
.contador{
  display:flex; align-items:center; gap:2px; flex:0 0 auto;
  background:color-mix(in srgb, var(--marca) 10%, transparent);
  border:1px solid var(--linha); border-radius:12px; padding:2px;
}
.contador button{
  width:27px; height:27px; display:grid; place-items:center;
  border:0; border-radius:9px; background:none;
  color:var(--texto); cursor:pointer;
}
.contador button:hover{ background:rgba(255,255,255,.08); }
.contador button:disabled{ opacity:.3; cursor:not-allowed; }
.contador button svg{ width:15px; height:15px; }
.contador span{ min-width:24px; text-align:center; font-weight:700; font-size:14px; }

.cartao-acoes{ display:flex; gap:8px; margin-top:2px; }
.cartao-acoes .botao-marca{ flex:1; }

/* ---- item esgotado ---- */
.cartao.esgotado{ opacity:.5; }
.cartao.esgotado .cartao-foto{ filter:grayscale(1); }

/* ===========================================================
   BOTÕES
   =========================================================== */
.botao-marca{
  min-height:40px; padding:0 16px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--marca); border:0; border-radius:12px;
  color:#fff; font-size:14px; font-weight:700; cursor:pointer;
}
.botao-marca:hover{ background:var(--marca-2, var(--marca)); }
.botao-marca svg{ width:17px; height:17px; }
.botao-marca:disabled{
  background:var(--superficie); color:var(--fraco); cursor:not-allowed;
}
.botao-marca.largo{ width:100%; min-height:var(--toque); }

.botao-fantasma{
  min-height:40px; padding:0 14px;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  background:transparent; border:1px solid var(--linha); border-radius:12px;
  color:var(--texto); font-size:14px; font-weight:600; cursor:pointer;
}
.botao-fantasma:hover{ border-color:var(--aro); }

.pilula{
  display:inline-flex; align-items:center; gap:7px;
  min-height:32px; padding:0 13px;
  background:transparent; border:1px solid var(--marca-2, var(--marca)); border-radius:999px;
  color:var(--texto); font-size:13px; font-weight:600; cursor:pointer;
  white-space:nowrap;
}
.pilula.cheia{ background:var(--marca); border-color:var(--marca); }
.pilula svg{ width:14px; height:14px; }

.botao-icone{
  width:var(--toque); height:var(--toque); flex:0 0 auto;
  display:grid; place-items:center; background:none; border:0;
  color:var(--fraco); cursor:pointer; border-radius:var(--r);
}
.botao-icone:hover{ color:var(--texto); }
.botao-icone svg{ width:17px; height:17px; }

/* ===========================================================
   O RODAPÉ DO MENU — a ficha da casa
   =========================================================== */
#rodape{
  margin:34px var(--gutter) 0; padding:18px 0 0;
  border-top:1px solid var(--linha);
  color:var(--fraco); font-size:13px;
}
#rodape b{ color:var(--texto); }
.rodape-linhas{ display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:8px; }
.rodape-linhas span{ display:inline-flex; align-items:center; gap:6px; }
.rodape-linhas svg{ width:14px; height:14px; }

.selo-aberto{
  padding:3px 9px; border-radius:999px; font-size:12px; font-weight:700;
}
.selo-aberto.sim{
  background:color-mix(in srgb, var(--marca) 22%, transparent);
  color:var(--marca-2, var(--marca));
}
.selo-aberto.nao{ background:rgba(255,255,255,.08); color:var(--fraco); }

/* ===========================================================
   A FOLHA — detalhe do produto e sacola
   =========================================================== */
/* O fundo escurece E DESFOCA ao subir a ficha: o cardápio continua
   visível atrás, mas sai de foco — diz "isto está por cima daquilo" sem
   precisar de sombra. O desfoque é limitado a este bloco, não corre em
   laço, e some no modo de movimento reduzido. */
.folha-fundo{
  position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.7);
  animation:fundo-entra .28s ease-out both;
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
}
@keyframes fundo-entra{ from{ opacity:0 } to{ opacity:1 } }
@keyframes folha-sobe{
  from{ opacity:0; transform:translate(-50%, calc(-50% + 12px)) }
  to  { opacity:1; transform:translate(-50%, -50%) }
}
.folha{
  position:fixed; z-index:61;
  inset:50% auto auto 50%; transform:translate(-50%, -50%);
  width:min(520px, 92vw); max-height:88dvh;
  /* Sobe 12px enquanto aparece — a distância diz "veio de baixo", que é
     de onde o dedo veio. Mais que isso vira viagem. */
  animation:folha-sobe .34s cubic-bezier(.16,1,.3,1) both;
  display:flex; flex-direction:column;
  background:var(--fundo); border:1px solid var(--linha);
  border-radius:var(--r-g); overflow:hidden;
}
.fechar-folha{
  position:absolute; top:12px; right:12px; z-index:2;
  width:38px; height:38px; display:grid; place-items:center;
  background:rgba(0,0,0,.55); border:0; border-radius:50%;
  color:#fff; cursor:pointer; backdrop-filter:blur(3px);
}
.fechar-folha svg{ width:18px; height:18px; }
.folha-rolagem{ flex:1; min-height:0; overflow-y:auto; }
/* O `tamanho` que o `fotoProduto` recebe vira classe NA IMAGEM, e por
   isso ele é prefixado com `em-`: com `tamanho:'folha'` a imagem ficava
   com a classe `.folha` e herdava o `position:fixed` da folha inteira —
   a foto do produto saía voando para o meio da tela, por cima da lista
   de opções. Nome de tamanho não pode colidir com nome de bloco. */
.folha-foto{
  display:grid; place-items:center; padding:18px;
  background:var(--veu);
}
.folha-foto .foto-produto{ width:min(280px, 70%); aspect-ratio:1; object-fit:contain; }
.folha-cabeca{ padding:16px; }
.folha-cabeca.com-fechar{
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--linha);
}
.folha-cabeca h2{ font-size:21px; }
.folha-cabeca p{ margin:6px 0 0; color:var(--fraco); font-size:14px; }

/* ---- grupos de opção ---- */
.grupo{ margin:0; padding:0; border:0; border-top:8px solid var(--superficie); }
.grupo legend{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; width:100%; padding:14px 16px 8px; float:left;
}
.grupo-nome{ font-family:var(--display); font-size:15px; font-weight:700; }
.etiqueta{
  padding:3px 9px; border-radius:999px; background:rgba(255,255,255,.08);
  color:var(--fraco); font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em;
}
/* Obrigatório aparece na cor da marca: é a única coisa que impede o
   pedido de ser fechado, e o cliente tem que ver isso ANTES de montar o
   pedido inteiro — não depois, num erro no fim. */
.etiqueta.obrig{
  background:color-mix(in srgb, var(--marca) 24%, transparent);
  color:var(--marca-2, var(--marca));
}

.opcao{
  display:flex; align-items:center; gap:12px; clear:both;
  min-height:52px; padding:0 16px; cursor:pointer;
  border-bottom:1px solid var(--linha);
}
.opcao input{ width:20px; height:20px; accent-color:var(--marca); flex:0 0 auto; }
.opcao-nome{ flex:1; min-width:0; font-size:14.5px; }
.opcao-preco{ font-size:13.5px; color:var(--fraco); white-space:nowrap; }
.opcao:has(input:disabled){ opacity:.42; cursor:not-allowed; }

.obs{ display:block; padding:16px; border-top:8px solid var(--superficie); }
.obs span{ display:block; margin-bottom:8px; font-size:13.5px; color:var(--fraco); }
.obs textarea{
  width:100%; padding:11px 12px; resize:vertical;
  background:var(--superficie); border:1px solid var(--linha);
  border-radius:var(--r); color:var(--texto); font:inherit; font-size:15px;
}
.obs textarea:focus{ outline:none; border-color:var(--marca); }

.folha-pe{
  display:flex; align-items:center; gap:12px; flex:0 0 auto;
  padding:12px 16px;
  padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px));
  background:var(--fundo); border-top:1px solid var(--linha);
}
.folha-pe .contador{ padding:3px; }
.folha-pe .contador button{ width:36px; height:36px; }

/* ===========================================================
   AS ABAS DE CATEGORIA — 2026-09-13

   `ShopDetailProducts.tsx` do Quickcart (github.com/DarshanCode2005/
   Quickcart, MIT): faixa que gruda no alto (`sticky top-0 z-10`), fundo
   do cardápio a 95% com desfoque leve e fio embaixo; dentro, a fileira
   que rola de lado sem barra (`gap-2 overflow-x-auto pb-1`) e as abas
   `rounded-full px-4 py-2 text-sm font-medium`, a marcada na cor da
   casa. As cores são as do restaurante, não as do Quickcart.
   =========================================================== */
.abas-cat{
  position:sticky; top:0; z-index:10;
  padding:12px var(--gutter);
  background:color-mix(in srgb, var(--fundo) 95%, transparent);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  border-bottom:1px solid var(--linha);
}
.abas-cat-fila{
  display:flex; gap:8px; overflow-x:auto; padding-bottom:4px;
  scrollbar-width:none; overscroll-behavior-x:contain;
}
.abas-cat-fila::-webkit-scrollbar{ display:none; }
.abas-cat-fila{ user-select:none; }
.abas-cat-fila.arrastando{ cursor:grabbing; }
.abas-cat-fila.arrastando .aba-cat{ pointer-events:none; }
.aba-cat{
  flex:0 0 auto; padding:8px 16px; border:0; border-radius:999px;
  background:rgba(255,255,255,.08); color:var(--texto);
  font-size:14px; font-weight:500; line-height:20px; white-space:nowrap;
  cursor:pointer; transition:background-color .15s, color .15s;
}
.aba-cat:hover{ background:rgba(255,255,255,.14); }
.aba-cat.ativa{ background:var(--marca); color:#fff; }
.aba-cat:focus-visible{ outline:2px solid var(--marca-2, var(--marca)); outline-offset:2px; }

/* ===========================================================
   A LOJA PAUSADA PELO PAINEL — 2026-09-14

   Faixa no alto da lista, na cor da casa sobre o fundo, com o motivo que
   o dono escreveu ao pausar. O cardápio continua navegável; o carrinho e
   o checkout é que travam.
   =========================================================== */
.aviso-loja{
  display:flex; flex-direction:column; gap:2px;
  margin:12px var(--gutter) 0; padding:12px 14px; border-radius:var(--r);
  background:color-mix(in srgb, var(--marca) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--marca) 45%, transparent);
  font-size:14px; line-height:1.4;
}
.aviso-loja b{ font-family:var(--display); font-size:15px; }
.aviso-loja span{ color:var(--fraco); }
.sg-nota{ margin:12px 0 0; font-size:13px; color:var(--fraco); }
.sg-esgotou{
  display:inline-block; margin:6px 0 0; padding:2px 8px; border-radius:6px;
  background:rgba(248,113,113,.14); color:#f87171; font-size:12px; font-weight:600;
}

/* O vazio do Quickcart: caixa tracejada, frase e apoio. */
.lista-vazia{
  margin:48px var(--gutter) 0; padding:48px 24px; text-align:center;
  border:1px dashed rgba(255,255,255,.2); border-radius:12px;
  background:rgba(255,255,255,.03);
}
.lista-vazia-titulo{ margin:0; font-size:18px; font-weight:500; }
.lista-vazia-texto{ margin:8px 0 0; font-size:14px; color:var(--fraco); }

/* ===========================================================
   A BARRA DO CARRINHO — 2026-09-13

   `FloatingCartBar.tsx` do Quickcart (MIT): presa no rodapé, fio em
   cima, fundo a 95% com desfoque e sombra para cima; dentro, o ícone num
   círculo de 44px com a contagem no canto, "N itens · subtotal" e o
   botão `rounded-lg px-5 py-2.5`.

   No desktop ela continua sobre a coluna do menu, e não sobre a arte:
   um botão em cima do pôster ficaria longe da lista que o cliente está
   olhando. Por isso a largura acompanha a coluna da direita.
   =========================================================== */
#barraSacola{
  /* Colada na borda direita do BLOCO centralizado, não da janela: com
     `right:0` ela flutuava sozinha na sobra azul em tela larga. */
  position:fixed; z-index:50; bottom:0;
  right:calc((100vw - var(--larg-site-real)) / 2);
  width:calc(var(--larg-site-real) - var(--larg-arte));
  padding:12px var(--gutter);
  padding-bottom:max(12px, env(safe-area-inset-bottom, 0px));
  background:color-mix(in srgb, var(--fundo) 95%, transparent);
  border-top:1px solid var(--linha);
  box-shadow:0 -4px 24px rgba(0,0,0,.35);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
#barraSacola[hidden]{ display:none; }
.bc-dentro{
  max-width:72rem; margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.bc-icone{
  position:relative; flex:0 0 auto; width:44px; height:44px;
  display:grid; place-items:center; border-radius:50%;
  background:color-mix(in srgb, var(--marca) 18%, transparent);
  color:var(--marca-2, var(--marca));
}
.bc-icone svg{ width:24px; height:24px; }
.bc-conta{
  position:absolute; top:-4px; right:-4px;
  min-width:20px; height:20px; padding:0 4px; border-radius:999px;
  background:var(--marca); color:#fff;
  font-size:12px; font-weight:700; line-height:20px; text-align:center;
  font-variant-numeric:tabular-nums;
}
.bc-texto{ flex:1; min-width:0; margin:0; font-size:14px; font-weight:500; color:var(--texto); }
.bc-texto b{ font-weight:600; white-space:nowrap; }
.bc-n{ font-variant-numeric:tabular-nums; }
.bc-ver{
  flex:0 0 auto; padding:10px 20px; border:0; border-radius:8px;
  background:var(--marca); color:#fff;
  font-size:14px; font-weight:500; cursor:pointer;
  transition:background-color .15s;
}
.bc-ver:hover:not(:disabled){ background:var(--marca-2, var(--marca)); }
.bc-ver:disabled{ opacity:.5; cursor:not-allowed; }
.bc-ver:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* O NÚMERO PULSA AO RECEBER ITEM.

   "Adicionar" fecha a folha e a sacola muda num canto da tela — sem
   isto, a pessoa não tem como saber se o toque pegou, e toca de novo.
   O da barra segue o `landingPulse` do Quickcart (1 → 1,35 → 1 em
   350ms); o da faixa de cima continua com os 180ms de antes. */
.mt-n.pulsa{ animation:conta-pulsa .18s ease-out; }
.bc-conta.pulsa{ animation:conta-pulsa .35s cubic-bezier(.22,1,.36,1); }
@keyframes conta-pulsa{
  0%  { transform:scale(1) }
  45% { transform:scale(1.35) }
  100%{ transform:scale(1) }
}
#tela.sem-vitrine ~ #barraSacola{ width:100%; }

/* O voo da foto até o carrinho (`CartFlyProvider.tsx` do Quickcart). */
.voo-sacola{
  position:fixed; z-index:70; pointer-events:none; overflow:hidden;
  border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,.35);
  background:color-mix(in srgb, var(--marca) 60%, var(--superficie));
}
.voo-sacola img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ===========================================================
   O CARRINHO — 2026-09-13

   A gaveta é o `CartDrawer.tsx` do QuickBite (github.com/masterabdullah95/
   quickbite-eats, MIT): presa à direita, largura 420px, altura toda,
   entra deslizando, fundo escurecido a 40% com desfoque. Cabeçalho
   `p-5` com fio, miolo que rola, rodapé com fio.

   O miolo é o do Quickcart: a linha é o `CartLineItem.tsx` (foto 64px
   `rounded-lg`, nome, "preço × qtd", total, contador com borda, Remover)
   e as contas são o `CartOrderSummary.tsx` (caixa com fio, "Resumo",
   `dl` com Subtotal, Entrega e Total).

   No celular a gaveta sobe de baixo, como a folha do produto — ver o
   @media do fim do arquivo.
   =========================================================== */
.folha-fundo.sacola-fundo{
  background:rgba(0,0,0,.4);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
@keyframes gaveta-entra{ from{ transform:translateX(100%) } to{ transform:none } }
.folha.sacola-gaveta{
  inset:0 0 0 auto; transform:none;
  width:min(420px, 100vw); height:100dvh; max-height:none;
  border-radius:0; border-width:0 0 0 1px;
  box-shadow:0 25px 50px -12px rgba(0,0,0,.6);
  animation:gaveta-entra .38s cubic-bezier(.32,.72,0,1) both;
}
.sg-topo{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  padding:20px; border-bottom:1px solid var(--linha);
}
.sg-titulo{ display:flex; align-items:center; gap:8px; font-size:20px; font-weight:700; }
.sg-titulo svg{ width:20px; height:20px; color:var(--marca-2, var(--marca)); }
.sg-rolagem{ flex:1; min-height:0; overflow-y:auto; padding:4px 20px 20px; }
.sg-conta{ margin:12px 0 0; font-size:14px; color:var(--fraco); }

.sg-linhas{ list-style:none; margin:0; padding:0; }
.sg-linha{ display:flex; gap:12px; padding:16px 0; border-bottom:1px solid var(--linha); }
.sg-linha:last-child{ border-bottom:0; }
.sg-foto{
  position:relative; flex:0 0 auto; width:64px; height:64px; overflow:hidden;
  display:grid; place-items:center; border-radius:8px;
  background:var(--superficie); color:var(--fraco); font-size:12px;
}
.sg-foto .foto-produto{ width:100%; height:100%; object-fit:cover; display:grid; place-items:center; }
.sg-foto .foto-produto.ladrilho{ font-size:28px; }
.sg-linha-corpo{ flex:1; min-width:0; }
.sg-linha-topo{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.sg-linha-nome{ min-width:0; }
.sg-nome{ margin:0; font-weight:500; color:var(--texto); overflow-wrap:anywhere; }
.sg-unit{ margin:2px 0 0; font-size:12px; color:var(--fraco); font-variant-numeric:tabular-nums; }
.sg-op{ margin:2px 0 0; font-size:12.5px; line-height:1.4; color:var(--fraco); }
.sg-valor{ flex:0 0 auto; margin:0; font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums; }
.sg-controles{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:12px; }
.sg-passo{
  display:flex; align-items:center; gap:4px; padding:2px;
  border:1px solid var(--linha); border-radius:8px; background:var(--fundo);
}
.sg-passo button{
  width:32px; height:32px; display:grid; place-items:center;
  border:0; border-radius:6px; background:transparent; color:var(--texto);
  font-size:18px; font-weight:500; line-height:1; cursor:pointer;
}
.sg-passo button:hover:not(:disabled){ background:rgba(255,255,255,.07); }
.sg-passo button:disabled{ opacity:.4; cursor:not-allowed; }
.sg-passo span{ min-width:2ch; padding:0 4px; text-align:center; font-size:14px; font-weight:600; font-variant-numeric:tabular-nums; }
.sg-remover{
  padding:0; border:0; background:none; cursor:pointer;
  color:#f87171; font-size:14px; font-weight:500;
}
.sg-remover:hover{ color:#fca5a5; }

.sg-resumo{
  margin-top:24px; padding:16px; border-radius:12px;
  border:1px solid var(--linha); background:var(--veu);
}
.sg-resumo h3{ font-family:var(--sans); font-size:14px; font-weight:600; }
.sg-resumo dl{ display:flex; flex-direction:column; gap:8px; margin:12px 0 0; font-size:14px; }
.sg-resumo dl div{ display:flex; justify-content:space-between; gap:16px; }
.sg-resumo dt{ color:var(--fraco); }
.sg-resumo dd{ margin:0; font-weight:500; font-variant-numeric:tabular-nums; }
.sg-resumo .sg-total{ padding-top:8px; border-top:1px solid var(--linha); }
.sg-resumo .sg-total dt{ font-weight:600; color:var(--texto); }
.sg-resumo .sg-total dd{ font-size:18px; font-weight:700; }
.sg-rolagem .aviso-minimo{ margin:16px 0 0; }

.sg-pe{
  flex:0 0 auto; display:flex; flex-direction:column; gap:10px;
  padding:20px; padding-bottom:calc(20px + env(safe-area-inset-bottom, 0px));
  border-top:1px solid var(--linha); background:var(--fundo);
}
.sg-continuar{ width:100%; padding:12px 20px; font-weight:600; }
.sg-seguir{
  align-self:center; padding:4px 8px; border:0; background:none; cursor:pointer;
  color:var(--marca-2, var(--marca)); font-size:14px; font-weight:500;
}

.sg-vazia{ padding:64px 0; text-align:center; color:var(--fraco); }
.sg-vazia > svg{ display:block; width:48px; height:48px; margin:0 auto 12px; opacity:.4; }
.sg-vazia-titulo{ margin:0; font-size:18px; font-weight:500; color:var(--texto); }
.sg-vazia-texto{ margin:8px 0 24px; font-size:14px; }

.contas{ padding:16px; display:flex; flex-direction:column; gap:9px; }
.contas div{ display:flex; justify-content:space-between; font-size:14px;
             color:var(--fraco); }
.contas .total{
  padding-top:10px; border-top:1px solid var(--linha);
  font-family:var(--display); font-size:17px; font-weight:700; color:var(--texto);
}
.aviso-minimo{
  margin:0 16px 16px; padding:11px 13px; border-radius:var(--r);
  background:color-mix(in srgb, var(--marca) 14%, transparent);
  color:var(--marca-2, var(--marca)); font-size:13px; line-height:1.45;
}

/* ---- esqueleto, vazio e erro ---- */
.esqueleto{ display:flex; flex-direction:column; gap:10px; padding:var(--gutter); }
.esqueleto span{
  display:block; border-radius:8px; background:var(--superficie);
  animation:pulsa 1.3s ease-in-out infinite;
}
@keyframes pulsa{ 50%{ opacity:.45; } }
.erro-caixa{ padding:36px 16px; text-align:center; color:var(--fraco); }
.nada{ padding:40px 16px; text-align:center; color:var(--fraco); }

/* ===========================================================
   TELAS MENORES

   PROVISÓRIO. O desenho do celular ainda vai ser passado pelo dono;
   isto aqui só garante que a página não quebre enquanto isso — uma
   coluna, a arte virando um cartaz curto no topo, a rolagem devolvida
   para a página.
   =========================================================== */
@media (max-width:1280px){
  .vitrines{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

@media (max-width:1080px){
  :root{ --gutter:16px; }
}

@media (max-width:860px){
  #tela{ grid-template-columns:minmax(0, 1fr); height:auto; }
  /* Uma coluna só: a arte ocupa a largura toda e a altura vem dela. */
  :root{ --larg-arte:100%; }
  /* Sem altura fixa: a arte manda na própria proporção e não sobra
     tarja borrada em cima nem embaixo. */
  /* RESERVA O ESPAÇO DO CARTAZ ANTES DELE CARREGAR.

     Sem isto o bloco nasce com 23px, e quando a arte chega a página
     pula 462px para baixo — medido. Quem já estava lendo o cardápio
     perde o lugar, e quem ia tocar num cartão toca em outro.

     No desktop o problema não existe porque a coluna é quadrada por
     construção; aqui a proporção precisa ser declarada. Arte que não
     for quadrada fica com tarja em vez de pulo, que é o melhor dos
     dois. */
  #vitrine{ height:auto; aspect-ratio:1; }
  #vitrine .arte{ height:100%; }
  #menu{ overflow:visible; padding-bottom:120px; }
  /* Aqui a pagina inteira rola por baixo da faixa, entao tudo que
     gruda ou e alvo de rolagem desconta a altura dela. */
  .titulo-cat{ scroll-margin-top:calc(var(--alt-menu-topo, 56px) + 14px); }
  /* `.vitrines` entra junto: a chamada da vitrine ancora NA GRADE, e
     sem a folga a faixa de cima cobriria a primeira fileira de
     categorias na chegada. */
  #capa, #rodape, .vitrines{ scroll-margin-top:var(--alt-menu-topo, 56px); }

  /* Uma repetição só: a largura da arte é a largura da seção. */
  #capa{ background-size:100% auto; background-repeat:no-repeat; }

  /* No celular não existem duas colunas embaixo, então não existem duas
     metades aqui: volta a ser uma faixa só. */
  #menuTopo{ display:flex; align-items:center; gap:12px; padding:0 var(--gutter); min-height:56px; }
  .mt-marca{ justify-self:auto; padding:6px 8px; margin-left:-8px; }
  .mt-marca img{ height:24px; }

  /* O MENU SANFONADO. A marca à esquerda; a sacola e as três linhas à
     direita; os destinos descem num painel da cor da faixa, um por
     linha, com o "Acessos" abrindo dentro dele. */
  .mt-fixos{ display:flex; align-items:center; gap:6px; margin-left:auto; }
  .mt-lado-menu .mt-sacola{ display:none; }
  .mt-lado-menu{
    position:absolute; left:0; right:0; top:100%;
    display:none; flex-direction:column; align-items:stretch; gap:2px;
    padding:8px var(--gutter) 14px;
    background:var(--promo-fundo, var(--marca));
    border-top:1px solid rgba(255,255,255,.18);
    box-shadow:0 18px 32px rgba(0,0,0,.35);
  }
  #menuTopo.menu-aberto .mt-lado-menu{ display:flex; animation:sanfona-abre .2s ease-out both; }
  @keyframes sanfona-abre{ from{ opacity:0; transform:translateY(-6px) } to{ opacity:1; transform:none } }
  .mt-itens{
    justify-self:auto; flex-direction:column; align-items:stretch;
    gap:2px; overflow:visible;
  }
  .mt-direita{ justify-self:auto; flex-direction:column; align-items:stretch; gap:2px; }
  .mt-lado-menu .mt-item{
    width:100%; min-height:48px; padding:0 12px;
    display:flex; align-items:center; justify-content:space-between;
    text-align:left; font-size:16px; opacity:1;
  }
  .mt-acessos{ position:static; }
  .mt-folha{
    position:static; width:auto; margin:2px 0 4px;
    box-shadow:none;
  }

  /* DEDO, NÃO PONTEIRO — a faixa de cima entra na mesma regra. */
  .mt-item, .mt-sacola{ min-height:var(--toque); }
  .grade{ grid-template-columns:1fr; }
  #barraSacola{ width:100%; }
  .bc-dentro{ gap:12px; }

  /* As abas grudam logo abaixo da faixa do restaurante, que é quem cobre
     a página no celular. */
  .abas-cat{ top:var(--alt-menu-topo, 56px); scroll-margin-top:var(--alt-menu-topo, 56px); }
  .folha{
    inset:auto 0 0 0; transform:none;
    width:auto; max-height:94dvh; border-radius:20px 20px 0 0; border-width:1px 0 0;
    /* A animação do desktop centraliza com translate(-50%,-50%) e, com
       `fill-mode:both`, esse transform continuava valendo depois de ela
       terminar — por cima do `transform:none` acima. No celular a folha
       ficava deslocada meia tela para a esquerda e para cima. Achado em
       2026-09-13 testando o pedido pelo QR da mesa. */
    animation-name:folha-sobe-celular;
  }
  @keyframes folha-sobe-celular{
    from{ opacity:0; transform:translateY(12px) }
    to  { opacity:1; transform:none }
  }

  /* DEDO, NÃO PONTEIRO.

     No desktop 36px é um alvo confortável de mouse. No celular, não: é o
     tamanho que faz a pessoa errar o coração e abrir o produto, ou errar
     o "+" e mudar de categoria. Tudo que aceita clique sobe para
     `--toque` aqui, e só aqui. */
  .pilula,
  .botao-marca,
  .botao-fantasma{ min-height:var(--toque); }
  .favorito,
  .contador button{ width:var(--toque); height:var(--toque); }
  .contador button{ border-radius:11px; }
  /* A mesma regra nas peças novas: aba, contador e ações do carrinho. */
  .aba-cat, .bc-ver, .sg-remover, .sg-seguir{ min-height:var(--toque); }
  .sg-passo button{ width:var(--toque); height:var(--toque); }

  /* O carrinho sobe de baixo, como a folha do produto. */
  .folha.sacola-gaveta{
    inset:auto 0 0 0; width:auto; height:auto; max-height:94dvh;
    border-radius:20px 20px 0 0; border-width:1px 0 0;
    animation-name:folha-sobe-celular;
  }
}

/* MOVIMENTO REDUZIDO — menos deslocamento, não menos resposta.

   A regra antiga era `*{animation:none}`: matava tudo, inclusive o
   feedback que confirma um toque, e quem pediu menos movimento ficava
   sem saber se a sacola recebeu o item. Agora o que sai é o
   DESLOCAMENTO — varredura, subida, salto — e o que fica é a mudança de
   opacidade, cor e estado, que é o que carrega significado. */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  #menu{ scroll-behavior:auto; }

  /* a foto não cresce: sem deslocamento, o cartão ainda responde pela
     borda e pela sombra */
  .cartao-foto .foto-produto,
  .cartao:hover .cartao-foto .foto-produto{ transform:none; transition:none; }

  /* o cartaz troca por opacidade, sem varrer */
  #vitrine .slide{ clip-path:none; opacity:0; transition:opacity .3s ease; }
  #vitrine .slide.visivel{ opacity:1; transition:opacity .3s ease; }
  #vitrine .slide .arte,
  #vitrine .slide.visivel .arte{ transform:none; transition:none; }

  /* a ficha aparece sem viajar; o fundo continua desfocando */
  .folha, .folha.sacola-gaveta{ animation:folha-aparece .2s ease-out both; }
  @keyframes folha-aparece{ from{ opacity:0 } to{ opacity:1 } }

  /* nada levanta ao passar o ponteiro */
  .cartao:hover, .cartao:active, .vitrine:hover{ transform:none; box-shadow:none; }
  .cta-vitrine:hover, .cta-vitrine:active{ transform:none; }
  .vitrine:hover img{ transform:none; }

  /* o pulso da sacola e o coração VIRAM COR, não escala: o feedback
     continua existindo. */
  .bc-conta.pulsa, .mt-n.pulsa{ animation:conta-acende .3s ease-out; }
  @keyframes conta-acende{
    0%{ background:#fff; color:var(--marca) } 100%{ background:rgba(255,255,255,.22) }
  }
  .favorito[aria-pressed="true"]{ animation:none; }
  #menuTopo.menu-aberto .mt-lado-menu{ animation:none; }
  .favorito:active{ transform:none; }
}

/* ===========================================================
   CHECKOUT — 2026-09-07

   Os campos de "para quem entregar e como paga". Herdam a cor da MARCA
   DO RESTAURANTE, como todo o resto desta tela: `--marca` e companhia
   vêm de `restaurante.marca`, e o azul do anotafácil não entra aqui.
   =========================================================== */
.campo-cardapio{
  display:flex; flex-direction:column; gap:6px; margin-bottom:14px;
}
.campo-cardapio > span{
  font-size:12.5px; font-weight:600; color:var(--fraco);
}
.campo-cardapio :is(input, select){
  width:100%; min-height:48px; padding:0 14px;
  background:var(--fundo, #111); color:var(--texto, #fff);
  border:1px solid var(--linha, rgba(255,255,255,.12));
  border-radius:12px; font:inherit; font-size:16px; /* 16px evita o zoom
    automático do Safari ao focar um campo no iPhone */
}
.campo-cardapio :is(input, select):focus{
  outline:none; border-color:var(--marca, #fff);
}
.campo-cardapio input::placeholder{ color:var(--fraco); }

.rotulo-bloco{
  margin:18px 0 8px; font-size:12.5px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase;
  color:var(--fraco);
}

.grupo-entrega{ display:grid; grid-template-columns:1fr 1fr; gap:10px;
                margin-bottom:16px; }
.opcao-entrega{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:14px 10px; border-radius:14px;
  background:var(--superficie, #1a1a1a); color:var(--texto, #fff);
  border:1.5px solid var(--linha, rgba(255,255,255,.12));
  font:inherit; cursor:pointer;
}
.opcao-entrega svg{ width:22px; height:22px; }
.opcao-entrega b{ font-size:14px; }
.opcao-entrega span{ font-size:12px; color:var(--fraco); }
.opcao-entrega.ligada{
  border-color:var(--marca, #fff);
  background:color-mix(in srgb, var(--marca, #fff) 12%, transparent);
}

.grupo-pagamento{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.opcao-pagamento{
  min-height:44px; padding:0 16px; border-radius:999px;
  background:var(--superficie, #1a1a1a); color:var(--texto, #fff);
  border:1.5px solid var(--linha, rgba(255,255,255,.12));
  font:inherit; font-size:14px; cursor:pointer;
}
.opcao-pagamento.ligada{
  border-color:var(--marca, #fff);
  background:color-mix(in srgb, var(--marca, #fff) 14%, transparent);
}

.nota-retirada, .nota-troco, .nota-falta{
  margin:0 0 14px; font-size:13px; line-height:1.5;
  display:flex; align-items:center; gap:8px;
}
.nota-retirada svg{ width:16px; height:16px; flex:0 0 auto; }
/* A mesa do QR: aparece no lugar das opções de entrega, na cor da casa,
   para o cliente ter certeza de que o pedido vai para a mesa certa. */
.nota-mesa{
  margin:0 0 14px; padding:12px 14px; border-radius:12px;
  display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px;
  font-size:13px; line-height:1.5;
  background:color-mix(in srgb, var(--marca) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--marca) 45%, transparent);
}
.nota-mesa svg{ width:18px; height:18px; flex:0 0 auto; }
.nota-mesa b{ font-family:var(--display); font-size:16px; }
.nota-troco{ color:var(--marca, #fff); font-weight:600; }
.nota-falta{ margin:8px 0 0; color:var(--fraco); font-size:12px; }

/* A seta de voltar é a mesma do avançar, girada — um ícone só. */
.botao-icone.voltar svg{ transform:rotate(180deg); }

/* ---- o comprovante ---- */
.folha-rolagem.centro{ text-align:center; }
.selo-ok{
  display:grid; place-items:center; width:64px; height:64px;
  margin:8px auto 12px; border-radius:999px;
  background:color-mix(in srgb, var(--marca, #fff) 18%, transparent);
  color:var(--marca, #fff);
}
.selo-ok svg{ width:30px; height:30px; }
.pedido-rot{ margin:0; font-size:13px; color:var(--fraco); }
.pedido-num{
  margin:2px 0 10px; font-size:44px; font-weight:800; line-height:1;
  letter-spacing:-.02em; color:var(--marca, #fff);
}
.pedido-apoio{
  margin:0 auto 18px; max-width:34ch; font-size:14px; line-height:1.55;
  color:var(--fraco);
}
.folha-pe.coluna{ flex-direction:column; gap:8px; }
.folha-pe.coluna > *{ width:100%; }

/* Imagem ausente: ícone vetorial, sem emojis. */
.ladrilho > svg { width: 32px; height: 32px; opacity: .55; }

/* Dois produtos por linha também no celular. */
@media (max-width:800px) {
  .grade { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .cartao { min-width:0; }
  .cartao-foto { aspect-ratio:1.15; padding:6px; }
  .cartao-corpo { flex:1; padding:6px 8px 8px; gap:6px; }
  .cartao-nome { font-size:14px; line-height:1.25; overflow-wrap:anywhere; }
  .cartao-preco { font-size:15px; margin-top:auto; }
  .cartao-desde { display:block; margin-left:0; white-space:normal; }
  .cartao .botao-marca { width:100%; padding-inline:6px; font-size:13px; min-height:44px; }
  .cartao .favorito { width:36px; height:36px; right:6px; top:6px; }
}