/* =============================================================
   Trinity ERP · vitrine e checkout (Bloco 4)

   Complementa o site.css, que e a pele do Bloco 0. Arquivo separado porque a
   vitrine do ERP de origem mostrou o custo do caminho contrario: la o HTML, o CSS e o
   JS moram num arquivo de 3733 linhas, e mexer em qualquer coisa obriga a
   entender tudo.

   Estrutura herdada do ERP de origem: pill de categoria, busca no topo, sacola em
   gaveta lateral com o total sempre visivel no rodape.
   ============================================================= */

/* ------- Busca e pills de categoria ------- */
.barra-catalogo {
  position: sticky; top: 0; z-index: 30;
  background: rgba(250, 249, 247, .94); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border); padding: 12px 0;
}
.barra-catalogo .container { display: flex; flex-direction: column; gap: 11px; }

.busca { position: relative; }
.busca input {
  width: 100%; padding: 12px 16px 12px 42px;
  font-family: var(--font-body); font-size: .95rem;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--card); color: var(--texto);
}
.busca input:focus { outline: 2px solid var(--ambar); outline-offset: 1px; }
.busca .lupa {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  color: var(--texto-light); pointer-events: none; line-height: 1;
}

.pills { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.pills::-webkit-scrollbar { display: none; }
.pill {
  flex: 0 0 auto; padding: 8px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: var(--card);
  font-size: .88rem; font-weight: 600; color: var(--texto-light);
  transition: background .15s, color .15s, border-color .15s;
}
.pill:hover { border-color: var(--azul-noite); color: var(--texto); }
.pill.ativa { background: var(--azul-noite); border-color: var(--azul-noite); color: #fff; }

/* ------- Secao de categoria ------- */
.grupo-categoria { margin-bottom: 40px; scroll-margin-top: 140px; }
.grupo-categoria h2 { font-size: 1.5rem; min-width: 0; }

/* As ofertas (01-10-26): o selo na cor da marca no canto da foto e, embaixo do
   nome, a primeira faixa de atacado. Desde 15/10/26 (pedido do dono) o preço da
   oferta sai em destaque, sem o preço de antes riscado: a cor é a mesma da linha
   do atacado, a `--acento-escrito`, que se lê no branco também no card pequeno. */
.selo-flutuante.selo-oferta { background: var(--acento); color: var(--acento-texto); }
.preco-em-oferta { color: var(--acento-escrito); }
.oferta-linha {
  margin-top: 4px; font-size: .78rem; font-weight: 600; line-height: 1.35;
  color: var(--acento-escrito);
}
.oferta-linha s { color: var(--texto-light); font-weight: 500; }
.modal-produto .preco-produto .oferta-linha { font-family: var(--font-body); font-size: .85rem; }

/* A categoria dividida por subcategoria (01-10-26): cada subcategoria com o
   próprio título, menor que o da categoria, e o próprio Ver todos. */
.grupo-sub { margin-bottom: 26px; }
.grupo-sub:last-child { margin-bottom: 0; }
.grupo-cabeca-sub { margin-bottom: 12px; }
.grupo-cabeca-sub h3 { font-size: 1.12rem; font-weight: 700; min-width: 0; color: var(--texto); }

/* Título da categoria de um lado e "Ver todos" do outro (16-09-26). */
.grupo-cabeca {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 16px;
}

/* Subcategorias (01-10-26, Requisição 21): pílulas que filtram dentro da
   categoria aberta. Uma linha só, que o dedo arrasta para o lado quando não
   cabe, como a trilha de categorias. A ativa fica preta, como o "Tudo". */
.subcats {
  display: flex; gap: 8px; overflow-x: auto;
  margin: -6px 0 18px; padding-bottom: 2px;
  scrollbar-width: none; scroll-snap-type: x proximity;
}
.subcats::-webkit-scrollbar { display: none; }
.chip-sub {
  flex: none; display: inline-flex; align-items: center;
  min-height: 38px; padding: 0 15px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--card);
  color: var(--texto-light); font-size: .82rem; font-weight: 600;
  text-decoration: none; white-space: nowrap; scroll-snap-align: start;
  transition: background .16s, border-color .16s, color .16s;
}
.chip-sub:hover { background: var(--areia); }
.chip-sub.ativa { background: var(--preto); border-color: var(--preto); color: #fff; }
.chip-sub:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

.ver-todos {
  position: relative; flex: none;
  display: inline-flex; align-items: center; gap: 2px;
  min-height: 34px; padding: 0 9px 0 14px;
  border: 0; border-radius: var(--radius-pill); cursor: pointer;
  /* Letra no acento ESCRITO, e nao no --acento-texto: este e a letra de cima
     do botao cheio (branca no vermelho), e sobre o fundo suave ela sumia. */
  background: var(--acento-suave); color: var(--acento-escrito);
  font-family: var(--font-body); font-size: .84rem; font-weight: 600;
  transition: background .16s;
}
.ver-todos:hover { background: color-mix(in srgb, var(--acento) 18%, #fff); }
.ver-todos .ico { display: inline-flex; }
/* O desenho é discreto, mas o toque vale os 44 px do dedo. */
.ver-todos::after { content: ''; position: absolute; inset: -5px -4px; }

/* ------- Card -------
   O dono quer a vitrine no ar mesmo sem foto, entao o lugar da foto precisa
   parecer proposital e nao quebrado. */
.card-produto .foto .sem-foto {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; color: var(--texto-light); text-align: center; padding: 12px;
}
.card-produto .foto .sem-foto .inicial {
  font-family: var(--font-display); font-size: 2rem; font-weight: 700;
  color: var(--azul-noite); opacity: .28; line-height: 1;
}
.card-produto .foto .sem-foto span { font-size: .72rem; letter-spacing: .04em; }

/* O card inteiro abre o detalhe do produto (16-09-26). O nome é um botão para
   quem navega pelo teclado, desenhado como o texto que era. */
.card-produto { cursor: pointer; }
.card-produto .abrir-produto {
  padding: 0; border: 0; background: none; color: inherit; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-align: left;
}
.card-produto .abrir-produto:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 4px; }
/* Rodapé do card: preço e botão lado a lado, com espaço de verdade entre os dois
   (corrigido em 16-09-26).

   O preço nunca fica mais estreito que o próprio texto (`flex: 1 0 auto`). Antes
   havia `min-width: 0` com `nowrap`: a caixa encolhia, o texto não podia quebrar
   e passava por baixo do botão, que é desenhado depois. Era o "R$ 180,0" em
   375 px.

   O que faz caber é o tamanho do preço, que acompanha a largura do RODAPÉ, e não
   a da tela: a grade também deixa o card estreito em 530 e 700 px. O rodapé é o
   container, `100cqi` é a largura dele, e a fonte é a maior que deixa
   "R$ 999,99" ao lado do botão: tira o botão (44), o gap (8) e 4 px de folga, e
   divide por 4,32, que é a largura desse preço por px de fonte (86,4 px em
   20 px). Fica entre 15 e 20 px: 16 px em 360, 17,7 px em 375, 20 px no desktop.

   Quando nem assim cabe (preço de quatro dígitos, ou o "Consultar", que é
   largo), o botão desce para a linha de baixo, no mesmo canto direito. Botão em
   cima de preço não acontece em largura nenhuma.

   `margin-top: auto` leva o rodapé para o pé do card, como o `site.css` fazia
   com o preço: nome de duas linhas ao lado de nome de uma linha não desalinha
   mais os preços da mesma fileira. */
.card-produto .rodape-card {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: auto; padding-top: 10px;
  container-type: inline-size;
}
.card-produto .rodape-card .preco {
  margin: 0; padding: 0; flex: 1 0 auto; white-space: nowrap;
  font-size: 1.25rem;
  font-size: clamp(15px, calc((100cqi - 56px) / 4.32), 1.25rem);
}
/* Cifrão menor que o valor, como na etiqueta de gôndola: o número é o que o
   cliente compara. O espaço mora dentro dele, então copiar o preço continua
   dando "R$ 180,00". */
.card-produto .rodape-card .cifra { font-size: .7em; font-weight: 600; }
.card-produto .rodape-card .add,
.card-produto .rodape-card .consultar,
.card-produto .rodape-card .esgotado { margin-left: auto; }
.card-produto .add {
  width: 38px; height: 38px; flex: 0 0 auto; border-radius: 11px; cursor: pointer;
  border: none; background: var(--acento); color: var(--acento-texto);
  font-size: 1.3rem; font-weight: 700; line-height: 1;
  display: grid; place-items: center; transition: background .15s, transform .15s;
}
.card-produto .add:hover { background: var(--ambar-2); transform: scale(1.06); }
.card-produto .no-carrinho {
  position: absolute; top: 10px; right: 10px;
  min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px;
  background: var(--sucesso); color: #fff;
  font-size: .8rem; font-weight: 700; display: grid; place-items: center;
}

/* ------- Botao flutuante da sacola ------- */
.fab-sacola {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  display: flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: 999px; border: none; cursor: pointer;
  background: var(--azul-noite); color: #fff;
  font-family: var(--font-body); font-size: .95rem; font-weight: 600;
  box-shadow: 0 10px 30px rgba(15, 29, 46, .3);
  transition: transform .18s, background .18s;
}
.fab-sacola:hover { background: var(--azul-escuro); transform: translateY(-2px); }
/* A letra sobre o acento é a que o servidor escolheu pelo contraste (--acento-texto). */
.fab-sacola .contador {
  min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px;
  background: var(--ambar); color: var(--acento-texto);
  font-size: .82rem; display: grid; place-items: center;
}

/* ------- Produto voando para a sacola (16-09-26) -------
   Pôr na sacola não abre mais a sacola. A foto do produto voa do card até o
   ícone do topo (`voar()` em loja.js), o ícone balança no pouso e os contadores
   pulam. O voo tem três camadas: a de fora anda para o lado, a do meio sobe e a
   de dentro muda de tamanho; cada uma com sua curva, e juntas fazem o arco. */
.voo-sacola { position: fixed; z-index: 100; pointer-events: none; }
.voo-sacola .voo-y,
.voo-sacola .voo-foto { width: 100%; height: 100%; }
.voo-sacola .voo-foto {
  display: grid; place-items: center; overflow: hidden;
  border-radius: 14px; background: #fff;
  box-shadow: 0 0 0 2px #fff, 0 12px 26px -8px rgba(14, 14, 16, .45);
}
.voo-sacola .voo-foto img { width: 100%; height: 100%; object-fit: cover; }
.voo-sacola .voo-foto.sem-foto { background: var(--acento); }
.voo-sacola .voo-foto.sem-foto span {
  font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: var(--acento-texto);
}

/* A sacola pendurada pela alça: gira a partir do alto, para os dois lados, e
   para. O primeiro giro é para a direita porque o produto chega pela esquerda. */
@keyframes sacola-balanca {
  0%   { transform: rotate(0); }
  18%  { transform: rotate(16deg) scale(1.14); }
  38%  { transform: rotate(-11deg) scale(1.06); }
  58%  { transform: rotate(6deg); }
  78%  { transform: rotate(-3deg); }
  100% { transform: rotate(0); }
}
@keyframes contador-pula {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.45); }
  100% { transform: scale(1); }
}
.acao-loja.balancar .ico { animation: sacola-balanca .6s ease-in-out; transform-origin: 50% 12%; }
.acao-loja.balancar .contador,
.fab-sacola.pulsar .contador { animation: contador-pula .45s cubic-bezier(.3, 1.5, .5, 1); }

/* "Ver sacola" sobe da borda quando aparece, em vez de surgir do nada. */
@keyframes fab-entra { from { transform: translateY(18px); opacity: 0; } }
.fab-sacola { animation: fab-entra .3s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .fab-sacola,
  .acao-loja.balancar .ico,
  .acao-loja.balancar .contador,
  .fab-sacola.pulsar .contador { animation: none; }
}

/* Texto só para leitor de tela: o aviso "Produto adicionado à sacola". */
.so-leitor {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ------- Sacola em gaveta ------- */
.cortina {
  position: fixed; inset: 0; z-index: 70; background: rgba(10, 21, 32, .45);
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.cortina.aberta { opacity: 1; pointer-events: auto; }

.gaveta {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 80;
  width: min(430px, 100%); background: var(--bg);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .24s ease, box-shadow .24s ease;
}
/* A sombra só existe com a gaveta aberta. Fechada, ela fica encostada do lado
   de fora da tela, e a sombra vazava para dentro: uma faixa cinza na borda
   direita da vitrine inteira, vista no iPhone em 16-09-26. */
.gaveta.aberta { transform: translateX(0); box-shadow: -10px 0 40px rgba(15, 29, 46, .2); }
.gaveta .cabecalho {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 20px; border-bottom: 1px solid var(--border); background: var(--card);
}
.gaveta .cabecalho h3 { flex: 1; }
.gaveta .fechar {
  width: 34px; height: 34px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--border); background: var(--bg); color: var(--texto);
  font-size: 1.1rem; line-height: 1; display: grid; place-items: center;
}
.gaveta .fechar:hover { background: var(--azul-noite); color: #fff; border-color: var(--azul-noite); }

/* A lista rola, o rodape com total e botao fica SEMPRE visivel. Sacola cheia
   que empurra o botao de fechar pedido para fora da tela e pedido perdido. */
.gaveta .corpo { flex: 1; overflow-y: auto; padding: 8px 20px; }
/* A cor tambem: o rodape do site (`.rodape` de site.css, fundo escuro) tem
   texto branco translucido, e a linha Total da sacola, que nao tem cor propria,
   herdava esse branco sobre o fundo branco e sumia (visto em 02-10-26). */
.gaveta .rodape {
  border-top: 1px solid var(--border); background: var(--card); padding: 18px 20px;
  color: var(--texto);
}

.linha-sacola { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.linha-sacola:last-child { border-bottom: 0; }
.linha-sacola .info { flex: 1; min-width: 0; }
.linha-sacola .nome { font-weight: 600; font-size: .92rem; line-height: 1.3; }
.linha-sacola .opcao {
  display: inline-block; margin-top: 4px; padding: 2px 9px; border-radius: 999px;
  background: var(--areia); color: var(--texto-light);
  font-size: .74rem; font-weight: 600;
}
.linha-sacola .opcao.fria { background: #E0F2FE; color: #075985; }
.linha-sacola .valor { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.linha-sacola .valor small { display: block; font-weight: 500; color: var(--texto-light); }

.contador-qtd { display: flex; align-items: center; gap: 3px; margin-top: 8px; }
.contador-qtd button {
  width: 27px; height: 27px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border); background: var(--card); color: var(--texto);
  font-size: 1rem; font-weight: 700; line-height: 1;
}
.contador-qtd button:hover { background: var(--azul-noite); color: #fff; border-color: var(--azul-noite); }
/* O numero e um campo (02-10-26): tocar abre o teclado de numeros. Fundo e
   borda de campo, como os do checkout, para se ler como lugar de digitar, e nao
   como mais um botao. 16 px de fonte: abaixo disso o iPhone aproxima a tela ao
   tocar no campo. Ao tocar, o numero de antes fica em cinza ate a pessoa
   digitar. */
.contador-qtd .qtd {
  width: 46px; height: 40px; padding: 0 2px; flex: 0 0 auto;
  border: 1px solid var(--border-forte); border-radius: 8px;
  background: var(--bg); color: var(--texto);
  font-family: var(--font-body); font-size: 16px; font-weight: 700; line-height: 1;
  text-align: center; font-variant-numeric: tabular-nums;
  -webkit-appearance: none; appearance: none;
}
.contador-qtd .qtd::placeholder { color: var(--texto-fraco); opacity: 1; }
.contador-qtd .qtd:focus { outline: 2px solid var(--ambar); outline-offset: 1px; background: var(--card); }

/* Lixeira da linha da sacola (16-09-26): tira o produto inteiro de uma vez.
   Sem borda e em cinza para não competir com o - e o +; fica vermelha no hover. */
.contador-qtd .excluir-linha {
  display: grid; place-items: center; margin-left: 6px;
  border-color: transparent; background: none; color: var(--texto-fraco);
}
.contador-qtd .excluir-linha:hover { background: #FEE2E2; color: var(--erro); border-color: transparent; }
.contador-qtd .excluir-linha .ico { display: inline-flex; }

/* Diminuir abaixo do minimo: o botao desliga. */
.contador-qtd button[disabled] { opacity: .4; cursor: not-allowed; }
.contador-qtd button[disabled]:hover { background: var(--card); color: var(--texto); border-color: var(--border); }
/* Somar no limite: a sacola ja tem tudo o que ha deste produto. O botao fica
   apagado mas recebe o toque, que mostra o aviso do limite (28-09-26). */
.contador-qtd button.no-limite { opacity: .4; }
.contador-qtd button.no-limite:hover { background: var(--card); color: var(--texto); border-color: var(--border); }
.card-produto .add.no-limite { background: var(--border); color: var(--texto-light); }
.card-produto .add.no-limite:hover { background: var(--border); transform: none; }

/* O aviso do limite: uma frase no alto da tela que some sozinha em 3 s. Nao
   cobre o botao de baixo (Finalizar pedido, Adicionar a sacola), e o toque
   passa por ele. */
.aviso-limite {
  position: fixed; left: 50%; top: calc(14px + env(safe-area-inset-top)); z-index: 120;
  width: max-content; max-width: calc(100vw - 32px);
  padding: 11px 16px; border-radius: 12px;
  background: var(--preto); color: #fff; box-shadow: var(--shadow);
  font-size: .9rem; font-weight: 500; line-height: 1.4; text-align: center;
  opacity: 0; transform: translate(-50%, -8px); pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.aviso-limite.visivel { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
  .aviso-limite, .aviso-limite.visivel { transform: translate(-50%, 0); transition: opacity .01s; }
}

/* Loja fechada (06-10-26, Requisicao 52): o aviso no alto do catalogo e a frase
   no pe da sacola, nas cores do `.aviso.info`. E estado da loja, e nao erro de
   quem compra: ambar, e nao vermelho. */
.aviso-fechada {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 0 0 22px; padding: 14px 16px; border-radius: var(--radius-sm);
  background: #FFF4E5; border: 1px solid #F5C77E; color: #7C4A03;
}
.aviso-fechada[hidden] { display: none; }
.aviso-fechada .ico { flex: none; display: inline-flex; margin-top: 1px; }
.aviso-fechada strong {
  display: block; font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: #5C3602;
}
.aviso-fechada .texto { display: block; margin-top: 2px; font-size: .92rem; line-height: 1.45; }
.sacola-fechada {
  display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 10px; padding: 10px 12px;
  border-radius: var(--radius-sm); background: #FFF4E5; color: #7C4A03;
  font-size: .88rem; line-height: 1.4;
}
.sacola-fechada .ico { flex: none; display: inline-flex; margin-top: 1px; }
.sacola-fechada strong { color: #5C3602; }

/* Produto sem disponivel: o card fica, o preco fica, e o botao vira uma
   pergunta para a loja. */
.card-produto .consultar {
  flex: 0 0 auto; height: 38px; padding: 0 12px; border-radius: 11px;
  display: inline-flex; align-items: center; font-size: .8rem; font-weight: 600;
  border: 1.5px solid var(--azul-noite); color: var(--azul-noite); text-decoration: none;
  transition: background .15s, color .15s;
}
.card-produto .consultar:hover { background: var(--azul-noite); color: #fff; }
.card-produto .esgotado { font-size: .8rem; font-weight: 600; color: var(--texto-light); }

/* Aviso discreto: sem caixa e sem fundo, so a barra ambar e o texto pequeno.
   Le-se como informacao, e nao como erro, mas a barra nao deixa passar batido. */
.aviso.sutil {
  background: none; border: 0; border-left: 2px solid var(--ambar);
  border-radius: 0; padding: 1px 0 1px 10px; margin-bottom: 14px;
  font-size: .82rem; line-height: 1.5; color: var(--texto-light);
}
.aviso.sutil strong { color: var(--texto); font-weight: 600; }
.aviso.sutil div + div { margin-top: 3px; }

.sacola-vazia { text-align: center; color: var(--texto-light); padding: 60px 20px; }
/* O desenho da sacola (ou da lupa, na busca sem resultado) num círculo na cor
   da marca. Era o caractere de um quadrado, e na tela ficava só um quadrado. */
.sacola-vazia .icone {
  width: 76px; height: 76px; margin: 0 auto 14px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--acento-suave); color: var(--acento-forte);
}
.sacola-vazia .icone .ico { display: inline-flex; }
.sacola-vazia p:not(.dica) { font-weight: 600; color: var(--texto); }

.resumo-linha { display: flex; font-size: .92rem; padding: 4px 0; color: var(--texto-light); }
.resumo-linha .espaco { flex: 1; }
.resumo-linha strong { color: var(--texto); font-variant-numeric: tabular-nums; }
.resumo-total {
  display: flex; align-items: baseline; margin: 10px 0 14px;
  font-family: var(--font-display); font-size: 1.35rem; font-weight: 700;
}
.resumo-total .espaco { flex: 1; }
.resumo-total span:last-child { font-variant-numeric: tabular-nums; }

/* ------- Painel de escolha da variacao -------
   Uma linha por opcao, com quantidade em cada. E o que resolve "seis geladas e
   o resto ambiente" numa tela so, sem obrigar a adicionar duas vezes. */
.modal-fundo {
  position: fixed; inset: 0; z-index: 90; background: rgba(10, 21, 32, .5);
  display: none; align-items: center; justify-content: center; padding: 18px;
}
.modal-fundo.aberto { display: flex; }
.modal {
  background: var(--card); border-radius: var(--radius); width: min(440px, 100%);
  max-height: 88vh; overflow-y: auto; box-shadow: var(--shadow);
}
.modal .topo { padding: 20px 22px 0; }
.modal .topo .titulo { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; }
.modal .topo .sub { color: var(--texto-light); font-size: .88rem; margin-top: 4px; }
.modal .conteudo { padding: 16px 22px; }
.modal .pe { padding: 0 22px 22px; display: flex; gap: 10px; }

.linha-opcao {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px 14px; margin-bottom: 10px;
}
.linha-opcao.escolhida { border-color: var(--ambar); background: var(--acento-suave); }
.linha-opcao .nome { flex: 1; font-weight: 600; font-size: .93rem; }
.linha-opcao .nome small { display: block; font-weight: 500; color: var(--texto-light); font-size: .78rem; }

/* ------- Detalhe do produto (16-09-26) -------
   A folha que abre ao tocar no card: foto grande sem corte, nome, preço,
   descrição e quantidade. No celular sobe da borda de baixo, como as outras
   janelas da vitrine. A barra com Cancelar e Adicionar gruda no pé da folha:
   com descrição longa, a pessoa rola e o botão continua à mão. */
.modal-produto { position: relative; overscroll-behavior: contain; }
.modal-produto .produto-foto { position: relative; background: #fff; border-bottom: 1px solid var(--border); }
/* A foto inteira, sem corte, porque o cliente confere o rótulo. A altura tem
   teto para a quantidade e o botão aparecerem sem rolar nos celulares baixos. */
.modal-produto .produto-foto .carrossel {
  aspect-ratio: 4 / 3; max-height: 40vh; background: #fff;
  border-radius: var(--radius) var(--radius) 0 0;
}
.modal-produto .produto-foto .carrossel-slide img,
.modal-produto .produto-foto > img { object-fit: contain; }
.modal-produto .produto-foto > img { width: 100%; max-height: 40vh; }
.modal-produto .produto-foto .sem-foto {
  height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; color: var(--texto-light); background: var(--areia);
  border-radius: var(--radius) var(--radius) 0 0;
}
.modal-produto .produto-foto .sem-foto .inicial {
  font-family: var(--font-display); font-size: 2.6rem; font-weight: 700; line-height: 1;
  color: var(--azul-noite); opacity: .28;
}
.modal-produto .produto-foto .sem-foto span:last-child { font-size: .78rem; letter-spacing: .04em; }
.modal-produto .produto-foto .selo-flutuante { top: 14px; left: 14px; }

.fechar-produto {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .94); color: var(--texto);
  box-shadow: 0 2px 10px rgba(14, 14, 16, .16);
  font-size: 1.5rem; line-height: 1;
}
.fechar-produto:hover { background: #fff; color: var(--acento-forte); }

.modal-produto .topo { padding-top: 16px; }
.modal-produto .topo .titulo { font-size: 1.3rem; line-height: 1.25; }
.modal-produto .preco-produto {
  margin-top: 6px; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
}
.modal-produto .preco-produto .cifra { font-size: .7em; font-weight: 600; }
.modal-produto .preco-produto .unidade {
  font-family: var(--font-body); font-size: .8rem; font-weight: 500; color: var(--texto-light);
}
.modal-produto .descricao-produto {
  margin-top: 10px; color: var(--texto-light); font-size: .92rem; line-height: 1.55;
  white-space: pre-line;
}
.modal-produto .rotulo-opcoes { font-size: .84rem; font-weight: 600; margin-bottom: 8px; }
.modal-produto .pe {
  position: sticky; bottom: 0; z-index: 2;
  padding-top: 14px; background: var(--card);
  box-shadow: 0 -12px 14px -12px rgba(14, 14, 16, .16);
}

/* ------- Checkout conduzido -------
   Tres passos em vez de um formulario longo. No celular a pessoa preenche com
   o polegar, e formulario comprido e onde ela desiste. */
.modal-largo { width: min(520px, 100%); }

.passos { display: flex; gap: 6px; padding: 14px 22px 0; }
.passo-marca {
  flex: 1; height: 4px; border-radius: 999px; background: var(--border);
  transition: background .2s;
}
.passo-marca.feito { background: var(--ambar); }

.campo { margin-bottom: 14px; }
.campo:last-child { margin-bottom: 0; }
.campo label { display: block; font-size: .84rem; font-weight: 600; margin-bottom: 6px; }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 13px 14px; font-family: var(--font-body); font-size: 1rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--texto);
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: 2px solid var(--ambar); outline-offset: 1px;
}
.campo .dica { font-size: .78rem; color: var(--texto-light); margin-top: 5px; }

/* Dica fora de campo: estado vazio, resumo do pedido e area de entrega. */
.dica { font-size: .78rem; color: var(--texto-light); margin-top: 5px; line-height: 1.4; }
.sacola-vazia p { margin: 0; }
.sacola-vazia .dica { margin-top: 4px; }

/* Titulo que nomeia um bloco dentro do passo do checkout. */
.titulo-secao {
  font-size: .84rem; font-weight: 600; color: var(--texto);
  margin: 18px 0 8px; padding-top: 14px; border-top: 1px solid var(--border);
}
/* O bloco de itens ja vem logo abaixo do titulo, entao nao repete a linha. */
.titulo-secao + .conferencia { border-top: none; margin-top: 0; padding-top: 0; }

/* Conta aberta no checkout (16-09-26): guardar o endereco digitado na conta. */
.marcador-salvar { display: flex; align-items: center; gap: 8px; font-size: .9rem; margin-top: 12px; cursor: pointer; }
.marcador-salvar input { width: 18px; height: 18px; accent-color: var(--acento); }
/* Na lista em coluna o flex-basis de .escolha viraria altura: o cartao do endereco
   tem a altura do proprio texto. */
.escolha.escolha-endereco { flex: 0 0 auto; padding: 11px 14px; }
.campo.erro input, .campo.erro select { border-color: var(--erro); }
.linha-campos { display: flex; gap: 10px; }
.linha-campos .campo { flex: 1; }
.linha-campos .campo.estreito { flex: 0 0 110px; }

.escolhas { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.escolha {
  flex: 1 1 140px; cursor: pointer;
  border: 2px solid var(--border); border-radius: var(--radius-sm);
  padding: 13px 15px; transition: border-color .15s, background .15s;
}
.escolha:hover { border-color: var(--azul-noite); }
.escolha.ativa { border-color: var(--ambar); background: var(--acento-suave); }
.escolha .titulo-escolha { font-weight: 600; font-size: .93rem; }
/* Debito ou credito: as duas lado a lado, ate no celular pequeno. */
.escolhas.par { flex-wrap: nowrap; margin-bottom: 0; }
.escolhas.par .escolha { flex: 1 1 0; min-width: 0; text-align: center; padding: 11px 12px; }

/* Forma de pagamento com icone (28-09-26, pedido do dono): uma linha por forma,
   com o icone na cor da marca, e nao o cartao alto e vazio de antes. Escolhida,
   o icone ganha o laranja cheio, com o traco escuro (branco sobre o laranja
   nao se le). */
.escolhas.formas { flex-direction: column; }
.escolha.forma { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; padding: 12px 14px; }
.escolha.forma .texto-forma { display: flex; flex-direction: column; min-width: 0; }
.icone-pagamento {
  flex: none; display: inline-grid; place-items: center;
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--acento-suave); color: var(--acento-forte);
  transition: background .15s, color .15s;
}
.icone-pagamento svg { display: block; }
.escolha.ativa .icone-pagamento { background: var(--acento); color: var(--acento-texto); }
.escolhas.par .escolha.tipo-cartao {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 12px 12px;
}

/* Passo 1 do checkout: duas escolhas grandes e limpas. Os campos do endereco
   entram animados depois do toque, e nao ficam esperando na tela. */
.escolha.grande { padding: 20px 16px; text-align: center; }
.escolha.grande .titulo-escolha { font-size: 1rem; }
.bloco-entra { animation: entra-suave .28s ease-out; }
@keyframes entra-suave {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
.escolha .nota { font-size: .8rem; color: var(--texto-light); margin-top: 2px; }

.aviso {
  border-radius: var(--radius-sm); padding: 12px 14px; font-size: .86rem;
  margin-bottom: 14px; line-height: 1.45;
}
.aviso.erro { background: #FEE2E2; border: 1px solid #FCA5A5; color: #7F1D1D; }
.aviso.info { background: #FFF4E5; border: 1px solid #F5C77E; color: #7C4A03; }

.conferencia { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 14px; }
.conferencia .linha { display: flex; gap: 10px; font-size: .9rem; padding: 5px 0; }
.conferencia .linha .espaco { flex: 1; }
.conferencia .linha .qtd-item { color: var(--texto-light); }

/* ------- Pagamento PIX ------- */
.pagamento-pix { text-align: center; }
.qr-caixa {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px; width: 240px; margin: 0 auto 16px; box-shadow: var(--shadow-sm);
}
.qr-caixa svg { width: 100%; height: auto; display: block; }
.copia-cola { display: flex; gap: 8px; margin-top: 10px; }
.copia-cola input {
  flex: 1; min-width: 0; padding: 12px 13px; font-size: .78rem;
  font-family: ui-monospace, monospace;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--texto-light);
}
.selo-status {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: 999px; font-size: .88rem; font-weight: 600;
}
.selo-status.esperando { background: #FFF4E5; color: #7C4A03; }
.selo-status.pago { background: #DCFCE7; color: #14532D; }
.ponto { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.ponto.pisca { animation: pisca 1.1s ease-in-out infinite; }
@keyframes pisca { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.selo-pronto {
  width: 68px; height: 68px; border-radius: 50%; background: var(--sucesso); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; margin: 0 auto 16px;
}

.oculto { display: none !important; }

/* =============================================================
   Mobile primeiro

   O cliente da loja pede pelo celular, entao o celular e o caso normal e o
   desktop e o caso ampliado. As regras acima ja sao fluidas; o que muda aqui e
   o que so o dedo exige.

   Regra de alvo de toque: 44px. Abaixo disso a pessoa erra o botao, e errar o
   botao de adicionar significa item que nao entrou no pedido.
   ============================================================= */

/* Duas colunas no celular. Loja de varejo tem catalogo longo, e uma coluna so
   obriga a rolar o dobro para ver a mesma coisa. */
.grade-produtos { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }

.pill { padding: 13px 18px; }
.card-produto .add { width: 44px; height: 44px; }
.contador-qtd { gap: 6px; }
.contador-qtd button { width: 40px; height: 40px; font-size: 1.15rem; }
/* Celular de 320 px: com o campo da quantidade (02-10-26), o contador da
   sacola passava da linha ao lado de um valor de quatro digitos e os botoes
   encolhiam para 34 px. Menos vao e o campo mais estreito, e eles ficam com
   os 40 px. */
@media (max-width: 359px) {
  .contador-qtd { gap: 4px; }
  .contador-qtd .qtd { width: 40px; }
  .contador-qtd .excluir-linha { margin-left: 0; }
}
.gaveta .fechar { width: 44px; height: 44px; }
.busca input { padding: 14px 16px 14px 42px; }

/* O botao flutuante da sacola nao pode tapar o ultimo produto da lista. */
.secao:last-of-type { padding-bottom: 110px; }

/* Rodape da gaveta acima da barra de gestos do celular. */
.gaveta .rodape { padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }

@media (max-width: 560px) {
  /* A topbar quebrava em duas linhas e comia 72px de altura util logo na
     abertura. No celular fica so o essencial: se esta aberto e o WhatsApp. */
  .topbar .container > span:nth-child(2) { display: none; }

  .fab-sacola { left: 16px; right: 16px; justify-content: center; bottom: 16px; }
  .modal { border-radius: var(--radius) var(--radius) 0 0; align-self: flex-end; max-height: 92vh; }
  .modal-fundo { padding: 0; align-items: flex-end; }
  .grupo-categoria { scroll-margin-top: 116px; }
}

@media (min-width: 720px) {
  .grade-produtos { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; }
  .secao:last-of-type { padding-bottom: clamp(48px, 8vw, 88px); }
}

/* ============================================================================
   Cabeçalho no formato de mercado online (redesenho de 15-09-26)

   Três camadas, na ordem em que a pessoa lê: a faixa preta com a promessa de
   entrega, o endereço e o horário; a barra branca com marca, busca e ações; e
   a trilha de categorias. A barra branca e a trilha ficam grudadas no topo
   enquanto o catálogo rola, porque busca e categoria são o que a pessoa usa o
   tempo todo. A faixa informativa sai na rolagem: ela se lê uma vez.
   ============================================================================ */

/* ------- Faixa informativa ------- */
.faixa-loja {
  background: var(--faixa-loja, var(--preto));
  color: rgba(255, 255, 255, .86);
  font-size: .78rem;
  font-weight: 500;
}
.faixa-loja .container {
  display: flex; align-items: center; justify-content: center;
  gap: 22px; padding: 7px 20px; flex-wrap: wrap;
}
.faixa-loja .item { display: inline-flex; align-items: center; gap: 7px; }
/* O ícone dá o tom da loja sem pintar o texto, que precisa de contraste. Sobre
   o preto da faixa, o acento clareia para não sumir. */
.faixa-loja .item .ico { color: color-mix(in srgb, var(--acento) 60%, #fff); display: inline-flex; }
.faixa-loja .item strong { font-weight: 600; color: #fff; }

/* ------- Barra principal ------- */
.cabecalho {
  position: sticky; top: 0; z-index: 40;
  background: var(--card);
  border-bottom: 1px solid var(--border);
}
.cabecalho-grade {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding-block: 12px;
}

/* O h1 da página envolve a logo (30-09-26) sem caixa própria: o link continua
   sendo a peça da grade do cabeçalho, nas larguras de sempre. */
.marca-titulo { display: contents; }
.marca { display: inline-flex; align-items: center; flex: none; }
/* Altura fixa e largura pela proporção: a logo é larga, e deixar a largura
   mandar faria a barra inteira dançar conforme a arte. */
.marca-logo { display: block; height: 46px; width: auto; }

/* ------- Busca ------- */
.busca-loja {
  display: flex; align-items: center;
  background: var(--areia);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-pill);
  transition: border-color .16s, background .16s, box-shadow .16s;
}
.busca-loja:focus-within {
  background: var(--card);
  border-color: var(--acento);
  box-shadow: 0 0 0 4px var(--acento-suave);
}
.busca-loja .lupa {
  padding-left: 16px; color: var(--texto-fraco); font-size: 1rem;
  transform: rotate(-45deg); line-height: 1;
}
.busca-loja input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  padding: 11px 12px; font-family: var(--font-body); font-size: .93rem;
  color: var(--texto);
}
.busca-botao {
  flex: none; margin: 4px; padding: 9px 20px; border: 0; cursor: pointer;
  border-radius: var(--radius-pill);
  background: var(--acento); color: var(--acento-texto);
  font-family: var(--font-body); font-weight: 600; font-size: .86rem;
  transition: background .16s;
}
.busca-botao:hover { background: var(--acento-forte); }

/* ------- Ações: televendas, conta, sacola ------- */
.cabecalho-acoes { display: flex; align-items: center; gap: 2px; flex: none; }
.acao-loja {
  position: relative;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 11px; border: 0; background: none; cursor: pointer;
  border-radius: var(--radius-sm); color: var(--texto);
  font-family: var(--font-body); text-align: left;
  transition: background .16s, color .16s;
}
.acao-loja:hover { background: var(--areia); color: var(--acento-forte); }
.acao-loja .ico { display: inline-flex; flex: none; }
.acao-loja .texto { display: flex; flex-direction: column; line-height: 1.15; }
.acao-loja .texto small { font-size: .68rem; color: var(--texto-fraco); font-weight: 500; }
.acao-loja .texto strong { font-size: .84rem; font-weight: 600; }

.acao-loja .contador {
  position: absolute; top: 2px; right: 2px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--erro); color: #fff;
  font-size: .66rem; font-weight: 700;
  display: grid; place-items: center;
}
.acao-loja .contador[hidden] { display: none; }

/* ------- Trilha de categorias ------- */
.faixa-categorias {
  position: sticky; top: var(--altura-cabecalho, 66px); z-index: 30;
  background: var(--card);
  border-bottom: 1px solid var(--border);
}
.faixa-categorias .trilho {
  display: flex; gap: 2px; overflow-x: auto; padding-block: 9px;
  scrollbar-width: none; scroll-snap-type: x proximity;
}
.faixa-categorias .trilho::-webkit-scrollbar { display: none; }

.chip-cat {
  flex: none; width: 78px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 6px 2px 8px; border: 0; background: none; cursor: pointer;
  border-radius: var(--radius-sm); scroll-snap-align: start;
  font-family: var(--font-body);
  transition: background .16s;
}
.chip-cat:hover { background: var(--areia); }

/* A cor vem de `--cor-cat`, que o JS recebe do servidor: uma de quatro,
   girando por categoria (services/vitrine.js). O fundo é a mesma cor bem diluída. */
.chip-cat .redondo {
  width: 44px; height: 44px; border-radius: 14px;
  display: grid; place-items: center;
  /* O TRAÇO escurece, o fundo não. Cor clara (amarelo, âmbar) é clara demais
     para um traço de 1,7px sobre fundo quase branco: fica ilegível a um braço
     de distância. Escurecer só o traço mantém a cor no chip e no estado ativo,
     onde ela aparece chapada. */
  color: color-mix(in srgb, var(--cor-cat, var(--acento)) 72%, #18181B);
  background: color-mix(in srgb, var(--cor-cat, var(--acento)) 14%, #fff);
  transition: transform .18s, box-shadow .18s;
}
.chip-cat:hover .redondo {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--cor-cat, var(--acento)) 70%, transparent);
}
.chip-cat .rotulo {
  font-size: .69rem; font-weight: 600; line-height: 1.16; text-align: center;
  color: var(--texto-light); letter-spacing: -.005em;
}
/* Chip ativo: a cor da categoria chapada. O traço fica escuro porque cor
   clara com branco em cima não se lê; sobre as escuras o escuro também
   funciona, então uma regra só resolve as quatro. */
.chip-cat.ativa .redondo {
  background: var(--cor-cat, var(--acento));
  color: color-mix(in srgb, var(--cor-cat, var(--acento)) 18%, #0E0E10);
}

/* Categoria COM FOTO (24-09-26): a foto toma o lugar do ícone e o quadro vira
   círculo, como foto de perfil. A moldura fina na cor da categoria mantém a
   faixa com a mesma leitura dos chips de ícone; no chip ativo ela engrossa, que
   é o que substitui o fundo chapado que o ícone ganha. */
.chip-cat .redondo.com-foto {
  border-radius: 50%; padding: 0; overflow: hidden; background: var(--areia);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--cor-cat, var(--acento)) 55%, #fff);
}
.chip-cat .redondo.com-foto img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.chip-cat.ativa .redondo.com-foto {
  background: var(--areia);
  box-shadow: inset 0 0 0 2px var(--cor-cat, var(--acento)),
              0 0 0 2px color-mix(in srgb, var(--cor-cat, var(--acento)) 28%, transparent);
}

/* "Tudo" é a exceção: a cor dele é o PRETO da logo, e traço escuro sobre preto
   some. Aqui o branco é que se lê. */
.chip-cat[data-cat="0"].ativa .redondo { background: var(--preto); color: #fff; }
.chip-cat[data-cat="0"] .redondo { color: var(--preto); background: var(--areia); }
.chip-cat.ativa .rotulo { color: var(--texto); }

/* A foto da categoria (03-10-26, Requisição 37): redonda, como foi recortada no
   ERP, no lugar do quadrado arredondado do ícone. O anel na cor da categoria
   fica POR CIMA da foto (no ::after): na sombra do próprio círculo, a foto o
   cobriria. No chip ativo o anel engrossa. */
.chip-cat .redondo.com-foto { position: relative; border-radius: 50%; overflow: hidden; background: var(--areia); }
.chip-cat .redondo.com-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chip-cat .redondo.com-foto::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--cor-cat, var(--acento)) 55%, #fff);
}
.chip-cat.ativa .redondo.com-foto { background: var(--areia); }
.chip-cat.ativa .redondo.com-foto::after { box-shadow: inset 0 0 0 3px var(--cor-cat, var(--acento)); }

.secao-catalogo { padding-top: 26px; }

/* ------- O aviso no alto da loja (15/10/26, Requisicao 65, Bloco 3) -------
   A frase que a loja liga na tela Vitrine digital, em cima de tudo, na cor da
   marca, para nao se confundir com a faixa preta das informacoes. */
.aviso-loja {
  background: var(--ambar); color: var(--acento-texto);
  text-align: center; font-size: .86rem; font-weight: 600; line-height: 1.35;
  padding: 8px 16px;
}
.aviso-loja[hidden] { display: none; }

/* ------- As imagens do alto da loja (15/10/26) -------
   A foto em cima de tudo, antes da faixa preta (pedido do dono). No celular ela vai de borda a borda, 16:9,
   com o recorte alto da foto; do tablet para cima, 5:2 com o recorte largo,
   até 420 px de altura para o catálogo começar ainda na primeira tela. Na
   tela mais larga que a loja, a foto para na largura dela (--max) e as bordas
   somem no preto, que continua na faixa logo abaixo. */
.vitrine-destaque { background: var(--preto); }
.destaque-palco { position: relative; max-width: var(--max); margin: 0 auto; }
/* A largura escrita segura o quadro na largura da faixa: com `auto`, o teto
   de altura do computador encolhia a largura junto, pela proporção. */
.carrossel.destaque {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 0;
  background: var(--preto);
}
.carrossel.destaque picture { display: block; width: 100%; height: 100%; }
/* A foto que leva a um lugar (Requisicao 65, Bloco 3): o link ocupa a foto
   inteira, sem sublinhado nem contorno de texto. */
.carrossel.destaque .carrossel-link { display: block; width: 100%; height: 100%; }
.carrossel.destaque .carrossel-trilho { transition-duration: .6s; }
.carrossel.destaque .carrossel-seta { width: 40px; height: 40px; font-size: 24px; }
/* No celular o dedo arrasta e as bolinhas dizem que tem mais: seta por cima
   da foto só tapa a imagem. */
@media (hover: none) {
  .carrossel.destaque .carrossel-seta { display: none; }
}
/* Sem bolinhas (15/10/26, pedido do dono): o carrossel passa sozinho e o
   dedo arrasta, e as bolinhas no canto pesavam na foto. */
.carrossel.destaque .carrossel-pontos { display: none; }
@media (min-width: 720px) {
  .carrossel.destaque { aspect-ratio: 5 / 2; max-height: 420px; }
  /* No teto de 420 px a foto perde uma tira, quase toda de cima: o que
     importa nas fotos fica no alto (a placa, o gargalo do galão). Na fachada
     é o contrário, sai mais do céu que do toldo, para o telefone da placa não
     ser cortado. */
  .carrossel.destaque .carrossel-slide img { object-position: 50% 25%; }
  .carrossel.destaque .carrossel-slide img.foco-embaixo { object-position: 50% 85%; }
  /* As enviadas pela tela Vitrine digital (Requisicao 65) chegam recortadas
     do jeito que a pessoa viu na previa, que e o meio do 5:2. */
  .carrossel.destaque .carrossel-slide img.foco-meio { object-position: 50% 50%; }
}

/* O selo "Aberta para pedidos", em cima da foto, no canto de baixo. Verde
   chapado com sombra, para se ler sobre qualquer imagem do carrossel. */
.destaque-selo {
  position: absolute; left: 14px; bottom: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 11px;
  border-radius: var(--radius-pill);
  background: var(--sucesso); color: #fff;
  font-size: .8rem; font-weight: 600; line-height: 1.2;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
  pointer-events: none;
}
.destaque-selo[hidden] { display: none; }
.destaque-selo .ponto {
  width: 7px; height: 7px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}
@media (min-width: 720px) {
  .destaque-selo { left: 20px; bottom: 20px; font-size: .86rem; padding: 8px 16px 8px 12px; }
}
/* Tela mais larga que a loja: as bordas da foto somem no preto, e selo,
   setas entram para fora da parte que some. */
@media (min-width: 1181px) {
  .carrossel.destaque {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  }
  .destaque-selo { left: 80px; }
  .carrossel.destaque .carrossel-seta.anterior { left: 80px; }
  .carrossel.destaque .carrossel-seta.proxima { right: 80px; }
}

@media (max-width: 860px) {
  /* A marca fica com a sobra da linha e as ações encostam na direita, no
     mesmo alinhamento da busca embaixo. Com `auto auto` a sobra era dividida
     entre as duas colunas, e os ícones paravam soltos no meio da barra, 66 px
     antes da borda (visto no iPhone 16 Pro Max em 16-09-26). */
  .cabecalho-grade {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'marca acoes' 'busca busca';
    gap: 10px 12px;
  }
  /* `start` para o link da logo não se esticar pela linha: tocar no vazio
     entre a logo e os ícones recarregava a loja. */
  .marca { grid-area: marca; justify-self: start; }
  .marca-logo { height: 38px; }
  .busca-loja { grid-area: busca; }
  /* A margem negativa compensa o respiro interno do último botão: o ícone da
     sacola termina na linha do botão Buscar. */
  .cabecalho-acoes { grid-area: acoes; justify-self: end; margin-right: -8px; }
  /* No celular sobra o ícone: o rótulo de cada ação come a linha inteira. O
     botão tem 44 px, a medida do dedo, e o ícone cresce para pesar igual à
     logo. O nome da ação vai no aria-label. */
  .acao-loja { padding: 11px; }
  .acao-loja .ico svg { width: 22px; height: 22px; }
  .acao-loja .texto { display: none; }
  .busca-botao { padding: 9px 14px; }
  /* Campo com menos de 16 px faz o iPhone dar zoom na página ao tocar na
     busca, e a página fica ampliada depois. */
  .busca-loja input { font-size: 16px; }
}

/* A faixa preta mostra as três informações também no celular (16-09-26,
   pedido do dono): antes só o prazo aparecia. Letra um pouco menor e quebra
   de linha centralizada. O horário vem antes do endereço porque cabe ao lado
   do prazo nos celulares grandes (430 e 440 px), e aí a faixa tem duas linhas
   em vez de três. */
@media (max-width: 560px) {
  .faixa-loja { font-size: .74rem; line-height: 1.35; }
  .faixa-loja .container { gap: 4px 12px; padding: 7px 16px; }
  .faixa-loja .item.horario { order: 1; }
  .faixa-loja .item.endereco { order: 2; }
}

/* ============================================================================
   Trilha de produtos (16-09-26, pedido do dono)

   Navegando pela loja inteira, cada categoria vira uma trilha que o dedo
   arrasta para o lado. O catálogo vai ter muitos produtos, e a grade de duas
   colunas por categoria virava uma página sem fim no celular. Com uma categoria
   escolhida (chip ou "Ver todos") ou com busca, a grade de sempre volta: a
   pessoa já disse o que procura e quer ver tudo de uma vez.

   O card é o mesmo da grade. No celular a largura dele sai da tela: cabem dois
   inteiros e um pedaço do terceiro, e é o pedaço cortado que avisa que a
   trilha continua. O mínimo é 150 px, a largura em que "R$ 999,99" ainda cabe
   ao lado do botão de 44 px (ver a conta no rodapé do card, lá em cima).
   ============================================================================ */
.grupo-categoria.em-trilha { margin-bottom: 30px; }

.trilha {
  position: relative;
  --card-trilha: clamp(150px, calc((100vw - 20px) / 2.3 - 12px), 190px);
  --vao-trilha: 12px;
}
.trilha-pista {
  display: flex; gap: var(--vao-trilha);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scroll-padding-inline: 20px;
  scrollbar-width: none;
  /* Sangra até a borda do container (a da tela, no celular), para o card
     passar por baixo dela ao arrastar. A folga em cima e embaixo é da sombra
     e do levantar do card, que a caixa que rola cortaria. */
  margin: -6px -20px -20px;
  padding: 6px 0 20px 20px;
}
.trilha-pista::-webkit-scrollbar { display: none; }
/* Respiro no fim da trilha. `padding-right` em caixa que rola não vale em todo
   navegador, e o último card ficaria colado na borda. */
.trilha-pista::after { content: ''; flex: 0 0 calc(20px - var(--vao-trilha)); }
.trilha-pista > .card-produto { flex: 0 0 var(--card-trilha); scroll-snap-align: start; }

@media (min-width: 720px) {
  .trilha { --card-trilha: 190px; --vao-trilha: 16px; }
}

/* Setas só onde existe mouse. No celular e no tablet o dedo arrasta, e seta
   por cima do card atrapalharia o toque no botão de adicionar. Na ponta da
   trilha a seta daquele lado some (`marcarPontas()` em loja.js). */
.trilha-seta { display: none; }
@media (hover: hover) and (pointer: fine) {
  .trilha-seta {
    display: grid; place-items: center;
    position: absolute; z-index: 2;
    top: calc(var(--card-trilha) / 2); transform: translateY(-50%);
    width: 40px; height: 40px; padding: 0; border-radius: 50%; cursor: pointer;
    border: 1px solid var(--border); background: var(--card); color: var(--texto);
    box-shadow: var(--shadow);
    transition: background .16s, color .16s;
  }
  .trilha-seta .ico { display: inline-flex; }
  .trilha-seta:hover { background: var(--acento); color: var(--acento-texto); border-color: transparent; }
  .trilha-seta.anterior { left: -12px; }
  .trilha-seta.proxima { right: -12px; }
  .trilha.no-inicio .trilha-seta.anterior,
  .trilha.no-fim .trilha-seta.proxima { visibility: hidden; }
}

/* A busca trocou a palavra que nao existe no catalogo pela mais parecida
   (06-10-26): a frase diz qual usou. */
.busca-correcao { margin: 0 0 14px; font-size: 13px; color: var(--texto-light); }