/* ═══════════════════════════════════════════════════════════
   TOPBAR EM TELA ESTREITA — correção de estouro horizontal

   O que estava acontecendo, medido em 390px de viewport:

     button.topbar-cart            borda direita em 575px
     button.topbar-cart.tema-btn   519px
     div.topbar-search             463px
     input                         448px

   185px de conteúdo fora da tela, no aparelho mais comum do
   Brasil. O carrinho — o botão que leva ao pedido — era o mais
   cortado dos quatro.

   POR QUE NINGUÉM VIU

   `body { overflow-x: hidden }` esconde a barra de rolagem, então
   a página não "balança" e o defeito não se anuncia. E a checagem
   usual, `document.documentElement.scrollWidth > innerWidth`,
   responde `false` sob essa regra: o scrollWidth passa a valer
   exatamente a largura do viewport. Por isso o invariante "zero
   scroll horizontal em 390" podia ser verificado e passar com o
   conteúdo cortado. A medição que enxerga é a borda direita de
   cada elemento — é o que `gauntlet/medir.html` faz.

   CAUSA

   Três coisas disputando a mesma linha sem folga: a marca com
   `white-space: nowrap`, dois botões de 44px fixos, e a busca sem
   `min-width: 0`. Item flex não encolhe abaixo do conteúdo
   intrínseco sem isso — é o `min-width: auto` implícito do
   flexbox, a pegadinha mais cara do layout em uma linha.

   ADITIVO: nenhuma linha de styles.css foi alterada. Esta folha
   entra depois e vence por ordem de cascata, com seletores
   ancorados em `header.topbar` para não vazar para outros lugares.
   Valores literais de propósito — sem depender de token nenhum,
   para que uma troca de identidade não reabra o corte.
   ═══════════════════════════════════════════════════════════ */

/* Fora de media query: um item flex precisa de min-width:0 em
   qualquer largura para poder encolher. */
header.topbar .topbar-search {
  flex: 1 1 0;
  min-width: 0;
}

@media (max-width: 480px) {
  header.topbar .topbar-inner {
    gap: 8px;
    padding: 0 12px;
  }

  header.topbar .topbar-brand {
    gap: 6px;
    flex-shrink: 0;
  }

  header.topbar .topbar-search {
    height: 38px;
    padding: 0 8px;
    gap: 6px;
  }
  header.topbar .topbar-search svg {
    width: 16px;
    height: 16px;
  }

  /* 38px fica abaixo dos 44px de alvo mínimo, mas a área de toque
     real inclui o padding da barra; o alvo efetivo continua ≥44px
     na vertical. Encolher o quadrado foi o que devolveu a busca
     para dentro da tela. */
  header.topbar .topbar-cart {
    width: 38px;
    height: 38px;
  }
  header.topbar .topbar-cart svg {
    width: 19px;
    height: 19px;
  }
}

@media (max-width: 360px) {
  /* Abaixo de 360 não cabe campo de texto junto com marca e dois
     botões. A busca vira o ícone puro — continua clicável, e o
     cliente que quer buscar toca nele.

     Só isso ainda deixava 27px do carrinho fora da tela em 320px
     (iPhone SE 1ª geração, Galaxy A0x): a marca com nowrap não
     cede. Por isso ela também encolhe aqui. */
  header.topbar .topbar-brand {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
  }
  header.topbar .topbar-pao {
    width: 24px;
    height: 18px;
  }

  header.topbar .topbar-search input {
    display: none;
  }
  header.topbar .topbar-search {
    width: 38px;
    height: 38px;
    padding: 0;
    justify-content: center;
    flex: 0 0 auto;
  }
}

/* ═══════════════════════════════════════════════════════════
   BUSCA EM TELA ESTREITA — o campo que não dava para usar

   Medido em 390px, antes desta folha mudar:

     input#busca   29px de largura por 17px de altura

   O campo existia, recebia foco e filtrava certo — a lógica de
   `aplicarBusca()` nunca teve defeito. Mas 29px não mostram nem
   três letras: o cliente digitava às cegas. Abaixo de 360px o
   bloco acima esconde o input e deixa só a lupa, com o
   comentário de que "o cliente que quer buscar toca nela" — só
   que não havia nada escutando o toque. A lupa era decorativa.

   POR QUE NÃO É SÓ ALARGAR

   Não cabe. Marca, busca e dois botões dividem 390px menos as
   bordas; dar 240px à busca corta o carrinho, que é o botão que
   leva ao pedido. A saída é não disputar a linha: a lupa abre a
   busca numa SEGUNDA linha, com a largura inteira.

   `flex-wrap` no `.topbar-inner` em vez de mover o elemento no
   HTML — assim o campo continua sendo o mesmo nó, com o mesmo
   id, e os listeners de app.js seguem valendo.

   O estado mora em `html.busca-aberta` (e não no header) porque
   `scroll-padding-top` é propriedade de `html`: com a terceira
   linha aberta o cabeçalho fica mais alto, e sem corrigir isso
   o clique numa categoria pararia com o título atrás da barra.
   ═══════════════════════════════════════════════════════════ */

/* Em tela larga o campo já está visível: o botão não existe. */
.topbar-lupa { display: none; }

@media (max-width: 480px) {
  .topbar-lupa {
    display: grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 14px;
    color: inherit;
  }
  .topbar-lupa svg { width: 19px; height: 19px; }
  .topbar-lupa[aria-expanded="true"] {
    background: rgba(245, 241, 232, .08);
    color: #E0872C;
  }

  /* Fechada, a busca não ocupa a linha — quem busca toca na lupa. */
  header.topbar .topbar-search { display: none; }

  html.busca-aberta header.topbar .topbar-inner {
    flex-wrap: wrap;
    height: auto;
    min-height: 64px;
    padding-bottom: 10px;
  }
  html.busca-aberta header.topbar .topbar-search {
    display: flex;
    order: 9;          /* depois da marca e dos três botões */
    flex: 1 0 100%;
    width: auto;
    height: 42px;
    padding: 0 14px;
    justify-content: flex-start;
  }
  html.busca-aberta header.topbar .topbar-search input {
    display: block;
    width: 100%;
  }

  /* A terceira linha empurra o conteúdo: o âncora de categoria
     precisa parar abaixo dela, não atrás. */
  html.busca-aberta {
    scroll-padding-top: calc(var(--topbar-h) + var(--catnav-h) + 64px);
  }
}