/*
   estilo.css — visual do web-app do cliente.

   Mobile primeiro: quem usa isto está com o celular na mão, dentro do
   estabelecimento ou pedindo de casa. Nada de framework — CSS próprio, como no
   cardapio-ordinario.
*/

:root
{
   /* as duas cores do logo: o vermelho da palavra e o amarelo do círculo */
   --gula-vermelho:  #e63946;
   --gula-amarelo:   #ffd900;

   --cor-marca:      var(--gula-vermelho);
   --cor-marca-fraca:#fdecec;
   --cor-fundo:      #ffffff;
   --cor-fundo-2:    #f6f6f7;
   --cor-fundo-3:    #ececee;   /* o degrau mais claro: faixa dos grupos */
   --cor-borda:      #e4e4e7;
   --cor-texto:      #18181b;
   --cor-texto-2:    #71717a;
   --cor-ok:         #16a34a;
   --raio:           12px;

   /* alto o bastante para o logo e a palavra GulaHUB respirarem */
   --topo:           64px;
}

@media (prefers-color-scheme: dark)
{
   :root
   {
      --cor-fundo:      #0f0f11;
      --cor-fundo-2:    #18181b;
      --cor-fundo-3:    #232328;
      --cor-borda:      #27272a;
      --cor-texto:      #fafafa;
      --cor-texto-2:    #a1a1aa;
      --cor-marca-fraca:#2a1416;
   }
}

*
{
   box-sizing: border-box;
}

body
{
   margin: 0;
   font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
   background: var(--cor-fundo);
   color: var(--cor-texto);
   -webkit-font-smoothing: antialiased;
}

/* ===== cabeçalho: é onde se troca de estabelecimento ===== */

header
{
   position: sticky;
   top: 0;
   z-index: 10;
   background: var(--cor-fundo);
   border-bottom: 1px solid var(--cor-borda);
   /*
      Cinto e suspensório para o iOS: mesmo sem viewport-fit=cover, respeitar a
      safe area garante que a primeira linha não encoste na barra do sistema em
      aparelho com notch.
   */
   padding-top: env(safe-area-inset-top, 0px);
}

.barra
{
   height: var(--topo);
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 0 14px;
}

/*
   Só o logo, sem a palavra ao lado: o logo já traz o nome escrito dentro dele, e
   repetir "GulaHUB" em texto roubava a largura de que os atalhos precisam.
*/
.marca-botao
{
   flex: 0 0 auto;
   padding: 0;
   border: 0;
   background: none;
   line-height: 0;
}

.marca-img
{
   width: 38px;
   height: 38px;
   border-radius: 50%;   /* o logo é quadrado e com cantos brancos; redondo, some o fundo */
   display: block;
}

.espaco
{
   flex: 1;
}

/*
   ===== usuário e atalhos =====
   O nome do usuário é o botão: identificado mostra como ele se chama no
   WhatsApp/Telegram, visitante vira o convite para entrar.
*/
.usuario
{
   display: inline-flex;
   align-items: center;
   gap: 7px;
   max-width: 40vw;
   padding: 8px 14px;
   border-radius: 999px;
   border: 1px solid var(--cor-borda);
   background: var(--cor-fundo-2);
   color: var(--cor-texto);
   font-size: 14px;
   font-weight: 600;
}

.usuario #quemSou
{
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.usuario.entrar
{
   background: var(--cor-marca);
   border-color: var(--cor-marca);
   color: #fff;
}

.icone
{
   position: relative;
   display: inline-flex;
   align-items: center;
   gap: 5px;
   flex: 0 0 auto;
   padding: 8px 10px;
   border-radius: 999px;
   border: 1px solid var(--cor-borda);
   background: var(--cor-fundo-2);
   /* cinza é o estado de repouso: carrinho vazio, nada a fazer aqui */
   color: var(--cor-texto-2);
}

.icone svg
{
   width: 21px;
   height: 21px;
   fill: none;
   stroke: currentColor;
   stroke-width: 1.7;
   stroke-linecap: round;
   stroke-linejoin: round;
}

/* com itens dentro, o carrinho acende — é a diferença entre "vazio" e "tem algo lá" */
.icone.ativo
{
   color: var(--cor-marca);
   border-color: var(--cor-marca);
   background: var(--cor-marca-fraca);
}

.icone .tag
{
   position: absolute;
   top: -5px;
   right: -4px;
   min-width: 18px;
   height: 18px;
   padding: 0 4px;
   border-radius: 999px;
   background: var(--cor-marca);
   color: #fff;
   font-size: 11px;
   font-weight: 700;
   line-height: 18px;
   text-align: center;
}

.icone .valor
{
   font-size: 13px;
   font-weight: 700;
   white-space: nowrap;
}

/*
   A conta só aparece com comanda aberta, e aí ganha a cor da marca — como todo
   botão daqui. Verde fica reservado para estado (o ponto do canal de avisos),
   nunca para ação: dois vermelhos e um verde na mesma barra confundem o que é
   botão com o que é aviso.
*/
.icone.conta
{
   color: var(--cor-marca);
   border-color: var(--cor-marca);
}

/*
   ===== menu flutuante =====
   Um só elemento serve aos três menus (marca, usuário, estabelecimento): o que
   muda é o conteúdo e de qual botão ele desce. Menos código e um comportamento
   igual em todos — tocar fora fecha, Esc fecha.
*/
.cortina-menu
{
   position: fixed;
   inset: 0;
   z-index: 30;
}

.cortina-menu[hidden]
{
   display: none;
}

.menu
{
   position: absolute;
   min-width: 220px;
   max-width: min(84vw, 320px);
   max-height: 70vh;
   overflow-y: auto;
   padding: 6px;
   border-radius: 14px;
   /*
      Borda na cor da marca: no tema escuro o menu tem quase a mesma cor do que
      está atrás dele, e uma borda cinza de 1px sumia — o menu parecia flutuar
      sem contorno sobre o cardápio.
   */
   border: 2px solid var(--cor-marca);
   background: var(--cor-fundo);
   box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.6);
}

.menu button
{
   display: flex;
   align-items: center;
   gap: 10px;
   width: 100%;
   padding: 11px 12px;
   border: 0;
   border-radius: 10px;
   background: none;
   color: var(--cor-texto);
   font-size: 14.5px;
   text-align: left;
}

.menu button:hover
{
   background: var(--cor-fundo-2);
}

.menu button.saindo
{
   color: var(--cor-marca);
   font-weight: 600;
}

.menu button .comanda
{
   margin-left: auto;
   font-size: 11.5px;
   color: var(--cor-texto-2);
}

.menu button.atual
{
   font-weight: 700;
}

/* o título de seção separa "outros estabelecimentos" do que é deste aqui */
.menu .titulo
{
   padding: 10px 12px 6px;
   font-size: 11.5px;
   font-weight: 700;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   color: var(--cor-texto-2);
}

.menu .risco
{
   height: 1px;
   margin: 6px 8px;
   background: var(--cor-borda);
}

/*
   ===== barra de grupos do cardápio =====
   O mesmo padrão do cardapio-ordinario (.abas/.aba): rolagem horizontal, chips
   redondos, o ativo em cor cheia. A diferença é o que o clique faz — lá cada aba
   troca de menu e busca de novo; aqui o cardápio inteiro já veio numa resposta
   só, então a aba rola até o grupo e a barra acompanha a rolagem.
*/
/*
   A faixa de baixo do cabeçalho: quem é o estabelecimento, e os grupos dele.
   Juntos na mesma linha porque com dois estabelecimentos abertos é fácil perder
   de vista de qual cardápio se está rolando.
*/
.faixa-grupos
{
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 0 10px 10px;
   min-width: 0;
}

.faixa-grupos[hidden]
{
   display: none;
}

.empresa
{
   display: inline-flex;
   align-items: center;
   gap: 6px;
   flex: 0 0 auto;
   max-width: 38%;
   padding: 6px 8px;
   border: 0;
   border-radius: 999px;
   background: none;
   font-size: 13.5px;
   font-weight: 700;
   color: var(--cor-texto);
}

/* a setinha avisa que dali sai o menu — inclusive para trocar de estabelecimento */
.empresa::after
{
   content: '';
   flex: 0 0 auto;
   width: 0;
   height: 0;
   border-left: 4px solid transparent;
   border-right: 4px solid transparent;
   border-top: 5px solid var(--cor-texto-2);
}

.empresa:hover
{
   background: var(--cor-fundo-2);
}

.empresa img
{
   width: 30px;
   height: 30px;
   border-radius: 8px;
   object-fit: cover;
   background: var(--cor-fundo-2);
}

.empresa span
{
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.abas
{
   display: flex;
   gap: 8px;
   overflow-x: auto;
   flex: 1;
   min-width: 0;
   padding: 6px 10px;
   scrollbar-width: none;
   /* o degrau mais claro separa "os grupos" de "o estabelecimento" sem uma linha */
   background: var(--cor-fundo-3);
   border-radius: 999px;
}

.abas::-webkit-scrollbar
{
   display: none;
}

.abas:empty
{
   display: none;
}

.aba
{
   flex: 0 0 auto;
   padding: 7px 14px;
   border-radius: 999px;
   border: 1px solid transparent;
   background: var(--cor-fundo);
   color: var(--cor-texto);
   font-size: 13.5px;
   font-weight: 500;
   white-space: nowrap;
   transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.aba.ativa
{
   background: var(--cor-marca);
   border-color: var(--cor-marca);
   color: #fff;
}

/* ===== botões ===== */

button
{
   font: inherit;
   cursor: pointer;
}

.botao
{
   border: 0;
   border-radius: var(--raio);
   padding: 11px 16px;
   background: var(--cor-marca);
   color: #fff;
   font-weight: 600;
}

.botao.fraco
{
   background: var(--cor-fundo-2);
   color: var(--cor-texto);
   border: 1px solid var(--cor-borda);
}

.botao:disabled
{
   opacity: 0.5;
   cursor: default;
}

.identidade
{
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 14px;
   color: var(--cor-texto-2);
}

.ponto
{
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--cor-texto-2);
}

.ponto.ligado
{
   background: var(--cor-ok);
}

/* ===== conteúdo ===== */

/*
   Sem padding lateral aqui de propósito: quem recua o conteúdo é cada grupo, e
   assim a faixa colorida vai de ponta a ponta em vez de deixar duas tiras da cor
   da página nas laterais.
*/
main
{
   padding: 0 0 80px;
   max-width: 780px;
   margin: 0 auto;
}

.vazio
{
   text-align: center;
   padding: 48px 16px;
   color: var(--cor-texto-2);
}

.vazio h2
{
   color: var(--cor-texto);
   font-size: 20px;
   margin: 0 0 8px;
}

.linha-abrir
{
   display: flex;
   gap: 8px;
   justify-content: center;
   margin-top: 18px;
}

input[type="number"], input[type="text"]
{
   font: inherit;
   padding: 10px 12px;
   border-radius: var(--raio);
   border: 1px solid var(--cor-borda);
   background: var(--cor-fundo);
   color: var(--cor-texto);
   width: 140px;
}

/*
   ===== o grupo =====
   Cada grupo é um bloco fechado por uma borda amarela — a cor do círculo do logo.
   Tentei antes separar por faixas de fundo alternadas e ficou fraco: no tema
   escuro a diferença entre os dois tons some, e o olho não acha onde um grupo
   acaba. Uma borda na cor da marca resolve nos dois temas, e de quebra o
   cardápio fica com a cara do GulaHUB.

   scroll-margin-top existe por causa do cabeçalho grudado: sem isso, rolar até
   um grupo deixaria o título escondido atrás dele. O valor é ajustado por JS,
   porque a altura do cabeçalho muda com o número de estabelecimentos abertos.
*/
.grupo
{
   scroll-margin-top: 130px;
   /*
      Colado nas laterais da página: o quadro amarelo encosta nas duas bordas e
      só a margem de cima sobra — e ela existe apenas para caber o título, que
      sobe por cima da borda.
   */
   margin: 22px 0 0;
   padding: 12px 10px 2px;
   border: 2px solid var(--gula-amarelo);
   border-radius: 14px;
}

/*
   O título senta em cima da borda, como a aba de uma pasta: fica claro que o
   amarelo delimita AQUELE grupo, e não uma caixa qualquer que começa ali.
*/
.grupo h3
{
   display: inline-block;
   font-size: 17px;
   font-weight: 700;
   /*
      Escuro fixo, não var(--cor-texto): o fundo é amarelo nos dois temas, e no
      escuro a variável seria branca — texto branco sobre amarelo não se lê.
   */
   color: #18181b;
   background: var(--gula-amarelo);
   border-radius: 999px;
   padding: 5px 14px;
   margin: -28px 0 12px 2px;
}

.produto
{
   display: flex;
   gap: 12px;
   align-items: flex-start;
   background: var(--cor-fundo-2);
   border: 1px solid var(--cor-borda);
   border-radius: 14px;
   padding: 14px;
   margin-bottom: 12px;
   cursor: pointer;
}

.produto:hover
{
   border-color: var(--cor-marca);
}

/*
   O card do produto aberto fica marcado. Sem isso, com o popup por cima, o
   usuário perde a referência de onde estava no cardápio — e ao fechar não sabe
   de onde veio. Vermelho porque é a cor de "selecionado" em todo o app (aba
   ativa, chip ativo); o amarelo já é do quadro do grupo.
*/
.produto.selecionado
{
   border-color: var(--cor-marca);
   box-shadow: 0 0 0 2px var(--cor-marca);
}

.produto .info
{
   flex: 1;
   min-width: 0;
}

.produto .nome
{
   font-size: 15.5px;
   font-weight: 600;
   line-height: 1.3;
   margin-bottom: 4px;
}

.produto .desc
{
   font-size: 13px;
   color: var(--cor-texto-2);
   line-height: 1.45;
   white-space: pre-line;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

.produto .preco
{
   font-size: 15px;
   font-weight: 600;
   color: var(--cor-ok);
   margin-top: 8px;
}

.produto .preco.indisponivel
{
   color: var(--cor-texto-2);
   font-weight: 500;
}

.produto img
{
   flex: 0 0 auto;
   width: 92px;
   height: 92px;
   object-fit: cover;
   border-radius: 10px;
   background: var(--cor-borda);
}

/*
   ===== detalhe do produto =====
   A folha do produto é amarela: sobre o cardápio escuro, uma folha escura se
   confundia com o fundo e o popup parecia parte da página. O amarelo da marca
   separa na hora o que é o produto aberto do que é a lista atrás.

   O texto é escuro fixo nos dois temas — o fundo é amarelo em ambos, e no escuro
   a cor de texto do tema seria branca sobre amarelo.
*/
.folha.amarela
{
   background: var(--gula-amarelo);
   color: #18181b;
}

.folha.amarela h2,
.folha.amarela p
{
   color: #18181b;
}

.folha.amarela .detalhe-preco
{
   color: #14532d;   /* verde escuro: o verde do cardápio some sobre amarelo */
}

.folha.amarela .botao.fraco
{
   background: rgba(255, 255, 255, 0.7);
   border-color: rgba(0, 0, 0, 0.18);
   color: #18181b;
}

/* ===== detalhe do produto ===== */

.folha .detalhe-img
{
   width: 100%;
   max-height: 220px;
   object-fit: cover;
   border-radius: var(--raio);
   margin-bottom: 14px;
}

.folha .detalhe-preco
{
   font-size: 20px;
   font-weight: 700;
   color: var(--cor-ok);
   margin: 6px 0 14px;
}

/* ===== modal de login ===== */

.cortina
{
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.5);
   display: flex;
   align-items: flex-end;
   justify-content: center;
   z-index: 20;
}

.cortina[hidden]
{
   display: none;
}

.folha
{
   background: var(--cor-fundo);
   width: 100%;
   max-width: 480px;
   border-radius: 18px 18px 0 0;
   padding: 14px 20px 28px;
   animation: sobe 0.18s ease-out;
   /*
      Produto com muitos opcionais não cabe na tela — a folha rola por dentro em
      vez de empurrar a página, que continua sendo o cardápio por trás.
   */
   max-height: 86vh;
   overflow-y: auto;
   overscroll-behavior: contain;
}

@keyframes sobe
{
   from { transform: translateY(18px); opacity: 0.6; }
   to   { transform: translateY(0);    opacity: 1; }
}

@media (min-width: 560px)
{
   .cortina
   {
      align-items: center;
   }

   .folha
   {
      border-radius: 18px;
   }
}

.folha h2
{
   margin: 0 0 6px;
   font-size: 19px;
}

.folha p
{
   margin: 0 0 16px;
   color: var(--cor-texto-2);
   font-size: 14px;
   line-height: 1.45;
}

.canais
{
   display: grid;
   gap: 10px;
}

.canais .botao
{
   width: 100%;
   padding: 14px;
   font-size: 15px;
}

/* o código de uso único, quando o usuário prefere copiar a mão */
.codigo
{
   font-family: ui-monospace, 'SF Mono', Menlo, monospace;
   font-size: 22px;
   letter-spacing: 0.08em;
   text-align: center;
   padding: 14px;
   background: var(--cor-fundo-2);
   border: 1px dashed var(--cor-borda);
   border-radius: var(--raio);
   margin: 4px 0 14px;
   user-select: all;
}

.aguardando
{
   display: flex;
   align-items: center;
   gap: 10px;
   justify-content: center;
   color: var(--cor-texto-2);
   font-size: 14px;
   margin-top: 14px;
}

.girando
{
   width: 15px;
   height: 15px;
   border: 2px solid var(--cor-borda);
   border-top-color: var(--cor-marca);
   border-radius: 50%;
   animation: gira 0.8s linear infinite;
}

@keyframes gira
{
   to { transform: rotate(360deg); }
}

.aviso
{
   background: var(--cor-marca-fraca);
   border-radius: var(--raio);
   padding: 12px 14px;
   font-size: 13px;
   color: var(--cor-texto);
   margin-top: 14px;
   line-height: 1.45;
}

.rodape-dev
{
   position: fixed;
   bottom: env(safe-area-inset-bottom, 0px);
   left: 0;
   right: 0;
   background: var(--cor-fundo-2);
   border-top: 1px solid var(--cor-borda);
   font-size: 11px;
   color: var(--cor-texto-2);
   padding: 6px 12px;
   font-family: ui-monospace, monospace;
   display: flex;
   gap: 14px;
   overflow-x: auto;
   white-space: nowrap;
}

/*
   ===== permissões =====
   Um interruptor por permissão. O rótulo inteiro é clicável: alvo pequeno em tela
   de celular é o que faz o usuário desistir de mexer nas configurações.
*/
.permissao
{
   display: flex;
   align-items: flex-start;
   gap: 12px;
   padding: 14px 4px;
   border-bottom: 1px solid var(--cor-borda);
   cursor: pointer;
}

.permissao:last-of-type
{
   border-bottom: 0;
}

.permissao .texto
{
   flex: 1;
   min-width: 0;
}

.permissao .titulo
{
   font-weight: 600;
   font-size: 15px;
   margin-bottom: 3px;
}

.permissao .explica
{
   font-size: 12.5px;
   color: var(--cor-texto-2);
   line-height: 1.4;
}

.chave
{
   flex: 0 0 auto;
   position: relative;
   width: 46px;
   height: 27px;
   border-radius: 999px;
   background: var(--cor-borda);
   transition: background 0.15s;
   margin-top: 2px;
}

.chave::after
{
   content: '';
   position: absolute;
   top: 3px;
   left: 3px;
   width: 21px;
   height: 21px;
   border-radius: 50%;
   background: #fff;
   transition: transform 0.15s;
}

.chave.ligada
{
   background: var(--cor-marca);
}

.chave.ligada::after
{
   transform: translateX(19px);
}

/*
   ===== comandos de voz =====
   Flutuante embaixo à direita, onde o polegar alcança sem reposicionar a mão.
*/
.voz
{
   position: fixed;
   right: 16px;
   /* acima do rodapé e da barra de gestos do iPhone */
   bottom: calc(38px + env(safe-area-inset-bottom, 0px));
   z-index: 25;
   width: 60px;
   height: 60px;
   border-radius: 50%;
   border: 0;
   background: var(--cor-marca);
   color: #fff;
   box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.55);
   display: flex;
   align-items: center;
   justify-content: center;
}

.voz[hidden]
{
   display: none;
}

.voz svg
{
   width: 26px;
   height: 26px;
   fill: none;
   stroke: currentColor;
   stroke-width: 1.8;
   stroke-linecap: round;
   stroke-linejoin: round;
}

/* gravando: o pulso diz que o microfone está aberto sem precisar de texto */
.voz.gravando
{
   animation: pulsa 1.1s ease-in-out infinite;
}

@keyframes pulsa
{
   0%, 100% { box-shadow: 0 0 0 0 rgba(230, 57, 70, 0.55); }
   50%      { box-shadow: 0 0 0 14px rgba(230, 57, 70, 0); }
}

.acao-entendida
{
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 12px 0;
   border-bottom: 1px solid var(--cor-borda);
   font-size: 15px;
}

.acao-entendida:last-of-type
{
   border-bottom: 0;
}

.transcricao
{
   font-style: italic;
   color: var(--cor-texto-2);
   background: var(--cor-fundo-2);
   border-radius: var(--raio);
   padding: 12px 14px;
   margin-bottom: 14px;
}

/*
   ===== avisos =====
   Notificação dentro da página, para quem está com ela aberta — a notificação do
   sistema só faz sentido quando o app está em segundo plano, e nem sempre está
   autorizada.
*/
.avisos
{
   position: fixed;
   left: 12px;
   right: 12px;
   bottom: calc(34px + env(safe-area-inset-bottom, 0px));
   z-index: 26;
   display: flex;
   flex-direction: column;
   gap: 8px;
   pointer-events: none;
}

.avisos:empty
{
   display: none;
}

.aviso-cartao
{
   pointer-events: auto;
   background: var(--cor-fundo);
   border: 2px solid var(--gula-amarelo);
   border-radius: 14px;
   padding: 12px 14px;
   box-shadow: 0 10px 26px -10px rgba(0, 0, 0, 0.6);
   animation: sobe 0.18s ease-out;
}

.aviso-cartao .titulo
{
   font-weight: 700;
   font-size: 14.5px;
   margin-bottom: 2px;
}

.aviso-cartao .corpo
{
   font-size: 13.5px;
   color: var(--cor-texto-2);
}

/*
   ===== opcionais do produto =====
   A folha do produto é amarela, então os blocos de opção usam branco translúcido:
   fica legível sobre o amarelo nos dois temas, sem inventar uma terceira cor.
*/
.grupo-opcional
{
   margin-top: 18px;
}

.grupo-opcional-titulo
{
   display: flex;
   align-items: baseline;
   justify-content: space-between;
   gap: 10px;
   font-size: 15px;
   font-weight: 700;
   color: #18181b;
   margin: 18px 2px 8px;
}

.grupo-opcional-titulo .regra
{
   font-size: 12.5px;
   font-weight: 600;
   color: #7a6a00;
   white-space: nowrap;
}

.grupo-opcional-titulo .regra.ok
{
   color: #14532d;
}

.opcao
{
   display: flex;
   align-items: center;
   gap: 10px;
   background: rgba(255, 255, 255, 0.72);
   border: 2px solid transparent;
   border-radius: 12px;
   padding: 10px 12px;
   margin-bottom: 8px;
   color: #18181b;
   font-size: 14.5px;
   cursor: pointer;
}

.opcao.marcada
{
   background: #fff;
   border-color: var(--cor-marca);
}

.opcao.indisponivel
{
   opacity: 0.55;
   cursor: default;
}

.opcao .texto
{
   flex: 1;
   min-width: 0;
}

.opcao img
{
   width: 38px;
   height: 38px;
   border-radius: 8px;
   object-fit: cover;
   flex: 0 0 auto;
}

/* o preço extra em vermelho, como no site antigo: é o que muda a conta */
.opcao .extra
{
   font-size: 13px;
   font-weight: 600;
   color: var(--cor-marca);
   white-space: nowrap;
}

/* a bolinha da escolha única */
.opcao .marca
{
   flex: 0 0 auto;
   width: 20px;
   height: 20px;
   border-radius: 50%;
   border: 2px solid rgba(0, 0, 0, 0.3);
   background: #fff;
}

.opcao.marcada .marca
{
   border-color: var(--cor-marca);
   border-width: 6px;
}

.contador
{
   display: inline-flex;
   align-items: center;
   gap: 4px;
   flex: 0 0 auto;
   background: #fff;
   border-radius: 999px;
   padding: 4px;
}

.contador button
{
   width: 32px;
   height: 32px;
   border-radius: 50%;
   border: 0;
   background: var(--cor-marca);
   color: #fff;
   font-size: 18px;
   font-weight: 700;
   line-height: 1;
}

.contador span
{
   min-width: 26px;
   text-align: center;
   font-weight: 700;
   color: #18181b;
}

.contador.pequeno button
{
   width: 28px;
   height: 28px;
   font-size: 16px;
}

.folha input.obs
{
   width: 100%;
   background: rgba(255, 255, 255, 0.72);
   border: 2px solid transparent;
   color: #18181b;
}

.folha input.obs:focus
{
   outline: none;
   border-color: var(--cor-marca);
   background: #fff;
}

/*
   Quantidade e ação lado a lado, grudados na base da folha: é a última coisa que
   o polegar alcança e a única que precisa estar sempre à mão.
*/
.rodape-produto
{
   display: flex;
   align-items: center;
   gap: 10px;
   margin-top: 18px;
   position: sticky;
   bottom: -28px;
   padding: 12px 0;
   background: var(--gula-amarelo);
}

.botao.adicionar
{
   flex: 1;
   min-width: 0;
   padding: 13px 14px;
   font-size: 15px;
}

.botao.adicionar:disabled
{
   background: rgba(0, 0, 0, 0.18);
   color: rgba(0, 0, 0, 0.55);
   opacity: 1;
}

/* na lista, o aviso de que o produto pede escolhas */
.produto .desc.escolhas
{
   color: var(--cor-marca);
   font-weight: 600;
   font-size: 12px;
}

/* a caixinha do adicional avulso: liga e desliga, sem exclusividade */
.opcao .caixa
{
   flex: 0 0 auto;
   width: 20px;
   height: 20px;
   border-radius: 6px;
   border: 2px solid rgba(0, 0, 0, 0.3);
   background: #fff;
   position: relative;
}

.opcao.marcada .caixa
{
   background: var(--cor-marca);
   border-color: var(--cor-marca);
}

.opcao.marcada .caixa::after
{
   content: '';
   position: absolute;
   left: 5px;
   top: 1px;
   width: 5px;
   height: 10px;
   border: solid #fff;
   border-width: 0 2px 2px 0;
   transform: rotate(45deg);
}

/*
   O X de fechar: preso no alto da folha, que rola por dentro — position:sticky o
   mantém à vista mesmo depois de descer pelos opcionais.

   A margem inferior negativa é do tamanho do botão: ela devolve ao conteúdo a
   altura que o X ocuparia, de modo que a imagem sobe e passa POR BAIXO dele. Em
   tela de celular aquela faixa de 34px era espaço caro, gasto com nada.
*/
/*
   O truque é a faixa de ALTURA ZERO: ela não ocupa espaço nenhum no fluxo, então
   a imagem começa no topo da folha e o X fica por cima dela. Sendo sticky, a
   faixa acompanha a rolagem e leva o botão junto — o X continua à mão depois de
   descer pelos opcionais.

   Altura zero em vez de float com margem negativa porque isto não depende de
   como o navegador resolve float ao lado de bloco: ocupa zero e pronto.
*/
.fechar-faixa
{
   position: sticky;
   top: 0;
   z-index: 3;
   height: 0;
   display: flex;
   justify-content: flex-end;
}

.fechar-x
{
   position: relative;
   top: 6px;
   right: -4px;
   width: 34px;
   height: 34px;
   border: 0;
   border-radius: 50%;
   background: var(--cor-marca);
   color: #fff;
   font-size: 22px;
   line-height: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   /* sobre a foto, um anel claro garante o contorno em qualquer imagem */
   box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
}

/* separa um grupo de opções do seguinte, que não têm título próprio */
.risco-opcoes
{
   height: 1px;
   margin: 12px 10px;
   background: rgba(0, 0, 0, 0.18);
}

/* o detalhe técnico do erro: útil para reportar, discreto para quem só quer usar */
.detalhe-erro
{
   margin-top: 16px;
   font-size: 11.5px;
   font-family: ui-monospace, monospace;
   color: var(--cor-texto-2);
   opacity: 0.75;
}

/*
   O subtítulo de tamanho dentro do grupo de pizzas. Fica claramente abaixo do
   título do grupo na hierarquia: menor, em cápsula clara, sem o amarelo cheio
   que é do grupo.
*/
.subgrupo
{
   display: inline-block;
   font-size: 13px;
   font-weight: 700;
   letter-spacing: 0.03em;
   text-transform: uppercase;
   color: var(--cor-texto);
   background: var(--cor-fundo-3);
   border: 1px solid var(--gula-amarelo);
   border-radius: 999px;
   padding: 4px 12px;
   margin: 14px 2px 10px;
}

.grupo h3 + .subgrupo
{
   margin-top: 2px;
}