/* ===========================================================================
   "Pedir no site" — a tela de quem COME.
   Etapa 4 da rodada do restaurante, 2026-08-01.

   Queixa do proprietário, nas palavras dele: *"a visualização do cliente do
   restaurante fica confusa, tem que rolar pra escolher os itens, gostaria que
   tivesse a impressão de app tipo iFood... como se ficasse marcado na parte"*.

   Três mecanismos respondem a isso, e os três estão aqui:

     1. `.rest-tabs` — a barra de categorias gruda no topo e ACENDE sozinha
        conforme o dedo desce (`.rest-tab--on`). É literalmente o "ficar
        marcado na parte". Sem ela, 42 pratos viram uma parede de rolagem.
     2. `.rest-sheet` — o prato abre numa folha POR CIMA, nunca em página nova:
        fechar devolve exatamente onde a pessoa parou de rolar.
     3. `.rest-cart` — o carrinho fica grudado embaixo, sempre somando.

   ## Regras deste arquivo

   - **Nenhum `!important`.** A cascata se resolve na origem. Onde é preciso
     vencer uma classe utilitária do Tailwind, o seletor é dobrado (`.a.a`),
     que é o mesmo recurso usado pelos collectors de CSS por bloco.
   - **Complementa o Tailwind, não o substitui.** A estrutura, o espaçamento e
     a cor de superfície continuam vindo das classes utilitárias da view; aqui
     mora só o que utilitário não faz — o sublinhado que acende, o
     comportamento de folha e o corpo da barra.
   - **Cor por token, com claro e escuro.** O acento SEGUE A MARCA do cliente
     (`--color-primary`) e cai no verde histórico só quando não há tema — ver a
     nota no `:root` abaixo.
   - **`minmax(0, 1fr)` e `min-width: 0` em todo track que possa receber texto
     longo.** `1fr` é `minmax(auto, 1fr)`, e `auto` NUNCA encolhe abaixo do
     conteúdo mínimo: foi assim que o mockup vazou 681px numa viewport de 390.
   ======================================================================== */

:root {
  /* A ABA ACESA E O BOTÃO DE PEDIR SEGUEM A MARCA (04/09/2026).
     Este verde era fixo para todo restaurante do produto: a Pizzaria Luzzi,
     que é vinho e laranja, ganhava uma pílula verde-esmeralda no cardápio e
     mais um verde no anel do botão de pedido. Nenhuma tela oferecia troca —
     não era escolha de ninguém, era um literal.
     `--color-primary` é a cor que o próprio cliente escolheu no tema e é a
     mesma que já pinta o cabeçalho com texto branco por cima, então a tinta
     branca abaixo continua valendo. Sem tema (a página de exemplo, o editor
     fora de um tenant) o `var()` cai no verde de sempre e nada muda. */
  --rest-accent: var(--color-primary, #059669);
  --rest-accent-ink: #ffffff;
  --rest-line: #e2e8f0;
  --rest-muted: #64748b;
  --rest-surface: #ffffff;
}

/* O MODO ESCURO SAIU DAQUI (05/09/2026).

   Aqui morava um `@media (prefers-color-scheme: dark)` trocando `--rest-muted`
   por #94a3b8 e `--rest-line` por #334155. Só que a ficha do prato é BRANCA
   por decisão (`bg-white` na view) em qualquer esquema — então, no celular com
   tema escuro, o texto "Escolha o tamanho primeiro" saía cinza-claro em fundo
   branco: medido em 05/09 no 390x844 com `prefers-color-scheme: dark`,
   rgb(148,163,184) sobre rgb(255,255,255) — contraste 2,4:1, abaixo do
   mínimo de 4,5:1. O `.rest-q__hint` ao lado não sofria porque usa um literal
   do Tailwind (`text-slate-500`) e não o token.

   É a mesma lição do `order-checkout.css` de hoje: quem decide a cor da compra
   é o tema do CLIENTE, não o sistema operacional do visitante. Tokens que
   mudam com o esquema do aparelho, pintados numa superfície que não muda, só
   conseguem errar. */

/* ---------------------------------------------------------------------------
   1. A BARRA QUE MARCA
   ------------------------------------------------------------------------ */

/* A barra gruda ABAIXO do que já estiver grudado no topo — o cabeçalho do
   site, e a barra de edição quando o dono está logado. Sem isto ela fica
   escondida atrás do cabeçalho, e o mecanismo principal da tela (“ficar
   marcado na parte”) simplesmente não aparece. Medido: cabeçalho sticky de
   73px cobrindo a barra inteira.

   Seletor DOBRADO porque a view carrega o utilitário `top-0` do Tailwind, de
   mesma especificidade — e a regra que perde não pode ser reforçada com
   `!important`, que é proibido no projeto. Quem mede o valor é o
   `rest-order.js`; sem JS, o padrão é o `0px` de sempre. */
.rest-tabs.rest-tabs {
  top: var(--rest-tabs-top, 0px);
}

/* E a seção para ABAIXO de tudo isso quando alguém toca na aba. Sem esta
   linha, o título da categoria ia parar atrás do cabeçalho e da própria barra:
   a pessoa tocaria em "Bebidas" e cairia no meio das bebidas, sem ver o nome
   da seção. Seletor dobrado pelo mesmo motivo do bloco acima — a view carrega
   `scroll-mt-20` do Tailwind. */
[data-rest-section][data-rest-section] {
  scroll-margin-top: var(--rest-anchor-top, 5rem);
}

/* O trilho rola sozinho no celular; a barra de rolagem não aparece porque ela
   competiria visualmente com o sublinhado que acende. */
.rest-tabs__track {
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}

.rest-tabs__track::-webkit-scrollbar {
  display: none;
}

/* A LISTA COMPACTA EM DUAS COLUNAS no computador (04/09/2026).
   Uma linha de cardápio é um nome curto à esquerda e um preço à direita: numa
   caixa de 1.180px sobra um vão enorme no meio e a seção vira uma parede.
   Medido na Pizzaria Luzzi, que tem 49 pizzas: 4.318px de rolagem numa coluna.
   Duas colunas com 48px entre elas é o que todo cardápio impresso faz — e é o
   que o mockup aprovado desenha.

   COLUNAS, e não grade (corrigido em 04/09 no mesmo dia). Com `grid` as duas
   células de cada linha são obrigadas à mesma altura: um prato sem descrição ao
   lado de um com duas linhas deixava um buraco do tamanho da diferença, e a
   lista inteira saía irregular — foi o "meio desorganizados no pc" que o
   proprietário viu. Em fluxo de colunas cada prato ocupa a altura que tem e os
   dois lados fecham parelhos. A leitura passa a ser de cima a baixo na
   primeira coluna e depois na segunda, que é como cardápio impresso se lê.

   Vale só para o formato `compacto`, que é escolha explícita do painel (o
   padrão do bloco é `lista`), e só a partir de 1.024px: no celular a coluna
   única continua sendo a única leitura possível. O `minmax(0, 1fr)` é
   obrigatório pelo mesmo motivo da nota no topo deste arquivo — `1fr` é
   `minmax(auto, 1fr)` e `auto` não encolhe abaixo do conteúdo mínimo, então um
   nome de prato longo estouraria a coluna. */
@media (min-width: 1024px) {
  .rest-lista-compacta {
    columns: 2;
    column-gap: 3rem;
  }

  /* Um prato não pode ser partido no meio pela quebra de coluna. */
  .rest-lista-compacta > li {
    break-inside: avoid;
  }
}

.rest-tab {
  position: relative;
  transition: color 140ms ease, background-color 140ms ease;
}

/* A categoria em que o dedo está. O sublinhado é o "marcado na parte": ele diz
   ONDE a pessoa está, e não apenas o que ela pode tocar. */
.rest-tab.rest-tab--on {
  color: var(--rest-accent-ink);
  background-color: var(--rest-accent);
}

.rest-tab.rest-tab--on::after {
  content: "";
  position: absolute;
  inset-inline: 25%;
  bottom: -0.5rem;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background-color: var(--rest-accent);
}

/* Quem prefere menos movimento não recebe o deslize do trilho. */
@media (prefers-reduced-motion: reduce) {
  .rest-tabs__track {
    scroll-behavior: auto;
  }

  .rest-tab {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   2. A FOLHA DO PRATO
   ------------------------------------------------------------------------ */

/* No celular ela sobe do rodapé, como qualquer app de delivery. No desktop
   continua centralizada, que é o que a view já monta com utilitário.
   
   ## O escurecido só apareceu quando a folha PAROU de cobrir a tela (12/09)
   
   *"em baixo escurece o resto da tela"* — o proprietário, comparando com o
   mockup dele. O véu (`bg-slate-900/60`) sempre existiu, e sempre esteve
   invisível no celular: o painel era `h-full`, então não sobrava tela para
   escurecer. Não era o véu que faltava, era a folha ser folha.
   
   Com o rodapé, a pessoa continua vendo o cardápio atrás — escurecido — e
   entende que voltar é fechar, não navegar. */
.rest-sheet__panel {
  animation: rest-sheet-up 180ms ease-out;
}

/* A PEGA: o traço curto no topo que diz "isto subiu do rodapé". Some no
   desktop, onde a folha é um diálogo centralizado e não uma folha que sobe. */
.rest-sheet__pega {
  flex: 0 0 auto;
  width: 2.25rem;
  height: 0.25rem;
  margin: 0.5rem auto 0;
  border-radius: 999px;
  background-color: var(--rest-line);
}

@media (min-width: 640px) {
  .rest-sheet__pega {
    display: none;
  }
}

@keyframes rest-sheet-up {
  from {
    transform: translateY(1.5rem);
    opacity: 0;
  }

  to {
    transform: none;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rest-sheet__panel {
    animation: none;
  }
}

/* O cabeçalho de cada pergunta. "Obrigatório" fica ÓBVIO — em app de delivery
   é a diferença entre a pessoa entender e a pessoa abandonar. */
.rest-q__head {
  /* `minmax(0, …)` implícito: o `flex-wrap` da view mais este `min-width`
     garantem que um nome de grupo longo quebre em vez de empurrar o contador
     para fora da folha. */
  min-width: 0;
}

.rest-q__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.4rem;
  border-radius: 9999px;
  background-color: #0f172a;
  color: #ffffff;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* "Pode pular" não é aviso: é permissão. Por isso não usa a chapa escura. */
.rest-q__badge--soft {
  background-color: transparent;
  color: var(--rest-muted);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 600;
}

.rest-q__hint {
  min-width: 0;
  white-space: nowrap;
}

/* A escolha marcada precisa ser óbvia no celular, onde o `:checked` nativo é
   pequeno. A borda faz o trabalho que o quadradinho não faz sozinho. */
.rest-choice:has(input:checked) {
  border-color: var(--rest-accent);
  box-shadow: inset 0 0 0 1px var(--rest-accent);
}

/* Sabor que a casa não faz neste tamanho sai de cena — não é "acabou hoje"
   (isso é o esgotado), é "não existe nesta combinação". */
.rest-choice[data-rest-hidden] {
  display: none;
}

/* ---------------------------------------------------------------------------
   OS PASSOS DA FICHA — tamanho, depois quantos sabores, depois os sabores
   ------------------------------------------------------------------------ */

/* *"deveria primeiro escolher o tamanho e dai liberar pra selecionar inteira ou
   meia"*. O cadeado é a única coisa que aparece no lugar dos 49 sabores
   enquanto não há tamanho: uma lista cinza e desabilitada continuaria pedindo
   para ser rolada, e é a rolagem que cansa no celular. */
.rest-q__lock {
  margin: 0;
  border-radius: 0.5rem;
  border: 1px dashed var(--rest-line);
  padding: 0.625rem 0.75rem;
  color: var(--rest-muted);
  font-size: 0.8125rem;
}

.rest-q__lock[hidden],
.rest-q__ask[hidden],
.rest-step[hidden] {
  display: none;
}

.rest-q__ask-label {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
}

.rest-q__steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Botão de passo, não caixinha: a pergunta "quantos sabores?" tem duas
   respostas e nenhuma delas é opcional. Alvo de 44px de altura porque quem
   responde está com o polegar. */
.rest-step {
  min-height: 2.75rem;
  flex: 1 1 8rem;
  border-radius: 0.75rem;
  border: 1px solid var(--rest-line);
  padding: 0.5rem 0.875rem;
  background-color: transparent;
  color: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}

.rest-step:hover {
  border-color: var(--rest-accent);
}

/* Marcado usa a MESMA marca da escolha marcada (`.rest-choice:has(:checked)`):
   duas formas de dizer "é esta" na mesma ficha é uma a mais. */
.rest-step[aria-pressed="true"] {
  border-color: var(--rest-accent);
  box-shadow: inset 0 0 0 1px var(--rest-accent);
}

/* ---------------------------------------------------------------------------
   3. O CARRINHO GRUDADO
   ------------------------------------------------------------------------ */

.rest-cart {
  /* Acima da área do dedo em telefone com barra inferior. */
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* O texto encolhe, o botão não. Sem `min-width: 0` aqui, um nome de prato
   longo empurraria "Finalizar pedido" para fora da viewport — o vazamento
   lateral que os mockups pegaram. */
.rest-cart__inner > p {
  min-width: 0;
}

.rest-cart__go {
  flex: 0 0 auto;
}

/* ---------------------------------------------------------------------------
   O item do cardápio
   ------------------------------------------------------------------------ */

/* Descrição em duas linhas: o cardápio precisa caber na tela para a barra de
   categorias fazer sentido. Texto cortado com reticências é melhor do que um
   parágrafo que empurra o próximo prato para fora do alcance do polegar. */
.rest-item__desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
   O AVISO DE COOKIES COBRIA O BOTÃO DE FECHAR O PEDIDO
   ------------------------------------------------------------------------ */

/* Medido em 05/09/2026, num 390×844, na primeira ficha de escolhas que o
   produto pôs no ar (a Pizzaria Luzzi ganhou "Monte sua pizza"):
   `elementFromPoint` no centro do botão "Adicionar · R$ 66,50" devolvia o
   botão "Rejeitar" DO AVISO DE COOKIES. O aviso é `fixed` com z-index 99999 e
   ocupava 187px do rodapé; a ficha é z-50. Quem ainda não tinha respondido o
   consentimento — ou seja, TODO visitante novo — não conseguia fechar o pedido
   no celular. A mesma barra tapava a barra do carrinho, que é o passo seguinte.

   O botão SOBE e o aviso FICA. Subir o z-index da ficha resolveria pelo lado
   errado: o consentimento passaria a ser tapado por um diálogo que o próprio
   site abriu, e ele é justamente o que precisa ser visto antes. É o mesmo
   padrão que o botão do WhatsApp já usa em `lgpd-cookie-banner.css`, com a
   mesma medida — `--lgpd-rodape` é publicada pelo JS do aviso, que é quem sabe
   quanto o texto ocupou depois de quebrar.

   A classe `lgpd-rodape-cheio` só é posta quando o aviso encosta nas duas
   bordas: cartão de canto num desktop de 1440 não mexe em nada aqui. */
body.lgpd-rodape-cheio .rest-sheet__foot {
  padding-bottom: calc(var(--lgpd-rodape, 0px) + 1rem);
}

body.lgpd-rodape-cheio [data-st-cart-dock] {
  bottom: var(--lgpd-rodape, 0px);
}

/* ---------------------------------------------------------------------------
   A SACOLA (05/09/2026)
   ------------------------------------------------------------------------ */

/* Com uma folha aberta, o dedo que rola a lista de dentro não pode rolar o
   cardápio atrás dela — no celular a pessoa fecha a sacola e descobre que
   perdeu o lugar onde estava.
   
   Isso passou a valer TAMBÉM para a ficha do prato em 12/09/2026: enquanto ela
   cobria a tela inteira, o cardápio atrás nem aparecia; virando folha de
   rodapé, ele fica à mostra e rolava embaixo do dedo. */
.rest-sheet-open,
.rest-sheet-open body {
  overflow: hidden;
}

/* A lista da sacola é um `<ul>` e não pode ganhar os marcadores do navegador;
   o reset do Tailwind cobre isso no site publicado, mas a folha precisa valer
   sozinha para quem renderiza o bloco fora dele (prévia do painel, teste). */
.rest-bag {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* O número da quantidade no meio dos botões − e + não pode dançar quando vai de
   9 para 10: largura mínima fixa, senão a linha inteira se mexe a cada toque. */
.rest-bag__li [data-bag-n] {
  min-width: 1.5rem;
}

/* ------------------------------------------------------------------ */
/* Passo a passo da folha com tamanho (mockup aprovado em 06/09/2026):  */
/* tamanho → inteira ou meia a meia → sabores. O passo atual mora em    */
/* `data-rest-step-atual` na folha; cada pedaço declara em que passos   */
/* aparece (`data-rest-step="1"`, `"2 3"`, ...). Sem os atributos, nada */
/* disto se aplica e a folha fica como era.                             */
/* ------------------------------------------------------------------ */

.rest-wizard__prog {
  display: flex;
  gap: 0.3rem;
  padding: 0.625rem 1.25rem 0;
}

.rest-wizard__prog i {
  height: 4px;
  flex: 1;
  border-radius: 2px;
  background-color: var(--rest-line);
}

.rest-wizard__prog i.is-on {
  background-color: var(--rest-accent);
}

.rest-wizard__prog i.is-done {
  background-color: var(--rest-accent);
  opacity: 0.55;
}

.rest-wizard__prog i[hidden] {
  display: none;
}

.rest-wizard__back {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
  border: 1px solid var(--rest-line);
  background-color: transparent;
  color: inherit;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.rest-wizard__back[hidden],
[data-rest-next][hidden],
[data-rest-add][hidden],
.rest-wizard__sum[hidden] {
  display: none;
}

.rest-wizard__sum {
  margin: 0 0 0.625rem;
  font-size: 0.8125rem;
  color: var(--rest-muted);
}

/* Um passo por vez: só o que carrega o passo atual fica na tela. */
.rest-sheet[data-rest-step-atual="1"] [data-rest-step]:not([data-rest-step~="1"]),
.rest-sheet[data-rest-step-atual="2"] [data-rest-step]:not([data-rest-step~="2"]),
.rest-sheet[data-rest-step-atual="3"] [data-rest-step]:not([data-rest-step~="3"]) {
  display: none;
}

/* Observação e quantidade só no fim, quando já se sabe o que é. */
.rest-sheet[data-rest-wizard]:not([data-rest-step-atual="3"]) label:has([data-st-cart-notes]),
.rest-sheet[data-rest-wizard]:not([data-rest-step-atual="3"]) .rest-sheet__foot div:has(> [data-st-cart-qty]) {
  display: none;
}

/* Botão à espera: mostra que falta algo em vez de sumir. */
[data-rest-next][aria-disabled="true"],
[data-rest-add][aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Cartões grandes na pergunta do tamanho: quem responde está com o polegar. */
.rest-sheet[data-rest-wizard] [data-rest-step="1"] .rest-choice {
  min-height: 3.5rem;
  font-size: 1rem;
}

/* A resposta do meio tem título e uma linha de apoio ("um sabor só"). */
.rest-step__t {
  display: block;
}

.rest-step__d {
  display: block;
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--rest-muted);
}

/* ===========================================================================
   A BARRA DE MONTAGEM — 11/09/2026

   *"o botão muda pra escolher segundo sabor e ai o cliente pode marcar o outro
   sabor. Ele pode desmarcar qualquer um dos sabores, marcar novamente, e assim
   por diante"* — o proprietário.

   Ela existe para que a segunda metade seja escolhida NO CARDÁPIO, com foto e
   descrição, em vez de numa segunda lista dentro do modal. Enquanto a pessoa
   escolhe, as vagas ficam à vista embaixo.

   Mesmo corpo da barra do carrinho (`.rest-cart`): é o mesmo lugar da tela e o
   mesmo gesto. As duas nunca aparecem juntas — quem monta ainda não tem o que
   somar no carrinho, e o `rest-order.js` esconde uma enquanto mostra a outra.
   ======================================================================== */

.rest-monta {
  border-top: 1px solid var(--rest-line);
  background-color: var(--rest-surface);
  box-shadow: 0 -4px 16px rgb(15 23 42 / 8%);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.rest-monta[hidden] {
  display: none;
}

/* O texto encolhe, os botões não — a mesma regra da barra do carrinho, pelo
   mesmo motivo: "Calabresa Clássica (com ou sem cebola)" empurraria o
   "Adicionar" para fora da viewport do celular. */
.rest-monta__inner > div:first-child {
  min-width: 0;
}

/* A dica é uma frase, não uma coluna: sem isto ela quebra palavra por palavra
   quando o espaço aperta. */
.rest-monta__dica {
  min-width: 0;
  text-wrap: pretty;
}

.rest-monta__vagas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.rest-monta__dica {
  margin: 0.375rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.25rem;
  color: var(--rest-muted);
}

.rest-monta__preco {
  font-size: 1.125rem;
  font-weight: 700;
  white-space: nowrap;
}

.rest-monta__sair {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--rest-muted);
  text-decoration: underline;
}

/* A VAGA: pontilhada enquanto está vazia, acesa quando tem sabor. O tracejado
   é o que faz "falta uma metade" ser visível sem ler a frase. */
.rest-vaga {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  max-width: 100%;
  padding: 0.25rem 0.625rem;
  border: 1px dashed var(--rest-line);
  border-radius: 999px;
  font-size: 0.8125rem;
  color: var(--rest-muted);
}

.rest-vaga--cheia {
  border-style: solid;
  border-color: var(--rest-accent);
  box-shadow: inset 0 0 0 1px var(--rest-accent);
  color: inherit;
  font-weight: 600;
}

.rest-vaga__n {
  min-width: 0;
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rest-vaga__x {
  flex: 0 0 auto;
  border: 0;
  background: none;
  padding: 0;
  font-size: 1.0625rem;
  line-height: 1;
  color: inherit;
  cursor: pointer;
}

.rest-vaga__x[hidden] {
  display: none;
}

/* ===========================================================================
   A FICHA DA ENTRADA POR SABOR — uma tela só (12/09/2026)

   Mockup do proprietário: tamanho e tipo juntos, em pastilhas lado a lado, com
   o sabor no cabeçalho. Quem chegou aqui já escolheu a pizza no cardápio —
   fatiar duas perguntas em três telas era o preço de não saber qual era.

   Tudo aqui é tirar de VISTA, nunca do HTML: o grupo dos sabores é quem guarda
   as marcações, e sem JavaScript a folha sai inteira como sempre saiu.
   ======================================================================== */

/* A lista dos 49 não se repete dentro do modal: sem foto e sem descrição, ela
   é a pior das duas telas. O cardápio atrás é melhor em tudo. */
.rest-sheet[data-rest-sabor] [data-rest-options],
.rest-sheet[data-rest-sabor] [data-rest-lock],
.rest-sheet[data-rest-sabor] .rest-wizard__prog,
/* O cabeçalho do grupo é a fala do DONO ("Sabores · obrigatório · Escolha pelo
   menos 1"); a pergunta da tela é "Escolha o tipo", logo abaixo. */
.rest-sheet[data-rest-sabor] [data-rest-steps] > .rest-q__head,
.rest-sheet[data-rest-sabor] [data-rest-steps] > p:not([data-rest-tipo-dica]),
.rest-sheet[data-rest-sabor] [data-rest-role="axis"] .rest-q__badge,
.rest-sheet[data-rest-sabor] [data-rest-role="axis"] .rest-q__hint {
  display: none;
}

/* O sabor e a descrição dele, sob o nome do prato de montagem. */
.rest-sheet__sabor {
  margin: 0.25rem 0 0;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--rest-accent);
}

.rest-sheet__desc {
  margin: 0.125rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.25rem;
  color: var(--rest-muted);
}

.rest-sheet__sabor[hidden],
.rest-sheet__desc[hidden],
.rest-q__tipo-dica[hidden] {
  display: none;
}

/* O TAMANHO VIRA PASTILHA, como o tipo já era. Duas perguntas do mesmo gesto
   não podem ter dois corpos diferentes — uma em lista com bolinha e outra em
   botão é o que faz a segunda parecer de outro sistema. */
.rest-sheet[data-rest-sabor] [data-rest-role="axis"] > div:last-child {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.rest-sheet[data-rest-sabor] [data-rest-role="axis"] .rest-choice {
  justify-content: center;
  gap: 0;
  border-radius: 0.625rem;
  padding: 0.75rem 0.5rem;
  text-align: center;
  cursor: pointer;
}

.rest-sheet[data-rest-sabor] [data-rest-role="axis"] .rest-choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.rest-sheet[data-rest-sabor] [data-rest-role="axis"] .rest-choice > span {
  flex: 0 1 auto;
  font-weight: 600;
}

/* Marcado: a mesma pintura da pastilha do tipo (`.rest-step[aria-pressed]`). */
.rest-sheet[data-rest-sabor] [data-rest-role="axis"] .rest-choice:has(:checked) {
  border-color: var(--rest-accent);
  background-color: var(--rest-accent);
  color: var(--rest-accent-ink);
}

/* O preço por tamanho não aparece aqui: nesta ficha quem custa é o SABOR, e o
   rótulo sairia vazio ou repetindo o total do rodapé. */
.rest-sheet[data-rest-sabor] [data-rest-role="axis"] [data-rest-option-price] {
  display: none;
}

/* O tipo, lado a lado como o tamanho. */
.rest-sheet[data-rest-sabor] .rest-q__steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

/* E marcado do MESMO jeito. Duas perguntas na mesma tela com dois modos de
   "escolhido" — uma pintada, a outra só contornada — fazem a pessoa duvidar de
   que respondeu a segunda. */
.rest-sheet[data-rest-sabor] .rest-step[aria-pressed="true"] {
  background-color: var(--rest-accent);
  color: var(--rest-accent-ink);
}

.rest-sheet[data-rest-sabor] .rest-step[aria-pressed="true"] .rest-step__d {
  color: inherit;
  opacity: 0.85;
}

.rest-q__tipo-dica {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.25rem;
  color: var(--rest-muted);
}

/* As duas barras do pé nunca aparecem juntas: quem está montando ainda não tem
   o que conferir no carrinho, e duas barras empilhadas cobririam o cardápio
   que a pessoa precisa enxergar para escolher a outra metade. */
[data-st-cart-dock]:has(> [data-rest-monta]:not([hidden])) [data-st-cart-bar] {
  display: none;
}

/* ---------------------------------------------------------------------------
   O CARDÁPIO EM CAPÍTULO (item 2 da auditoria de 14/09)

   A forma de uma carta impressa: nome à esquerda, preço à direita e um fio
   pontilhado ligando os dois. É o layout da casa SEM foto de prato — sem foto,
   a grade vira um cemitério de retângulos cinza e a lista comum não tem
   hierarquia nenhuma.

   O fio é um elemento que cresce, não um `border-bottom` no nome: assim ele
   acompanha qualquer tamanho de nome e some sozinho quando a linha quebra.
   --------------------------------------------------------------------------- */
.rest-capitulo__linha { margin: 0; }
.rest-capitulo__fio {
  flex: 1 1 1.5rem;
  min-width: 1.5rem;
  align-self: flex-end;
  margin-bottom: .3em;
  border-bottom: 1px dotted currentColor;
  opacity: .32;
}
.rest-capitulo__n {
  font-variant-numeric: tabular-nums;
  opacity: .45;
  font-weight: 500;
}
/* Numa tela estreita o pontilhado atrapalha mais do que ajuda: o preço desce. */
@media (max-width: 480px) {
  .rest-capitulo__fio { display: none; }
  .rest-capitulo__linha { flex-wrap: wrap; }
  .rest-capitulo__preco { margin-left: auto; }
}

/* ---------------------------------------------------------------------------
   O CARDÁPIO EM ABAS

   Uma categoria por vez. Quem esconde é o JS (`data-rest-tabs-filtra`), e a
   classe abaixo só existe depois que ele assume — sem JS, todas as seções
   continuam na tela, que é o cardápio de sempre com âncoras.
   --------------------------------------------------------------------------- */
.rest-aba-fora.rest-aba-fora { display: none; }