/* ==========================================================================
   Loja — folha da vitrine

   Nenhuma cor mora aqui. Todas vêm de /comum/tema.css, que o index.html
   carrega antes desta folha. Esta área roda na base escura:

       <html data-base="escuro">

   Onde o desenho pede a cor da marca com transparência, a regra escreve
   color-mix(...var(--marca) N%...) em vez de um rgba fixo — assim a peça
   acompanha a cor que o lojista escolher, em vez de continuar dourada.
   ========================================================================== */

*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--fundo);
  color:var(--texto);
  font-family:var(--ui);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* A beirada e variavel porque a fita de categorias precisa sangrar ate a
   borda do container quando gruda — o vidro dela tem que cobrir tambem o
   vao lateral, senao o card passa por baixo aparecendo pelas pontas.
   Repetir 20/16/28px em dois lugares seria dois numeros obrigados a
   concordar para sempre. */
/* A coluna estreita das paginas de leitura (hoje so "Entrega e retirada"):
   pares rotulo/valor e frases curtas. Na largura do catalogo o rotulo
   ficaria a um palmo do numero que ele nomeia. O cabecalho interno le este
   mesmo numero para nao sair do alinhamento da pagina que encabeca. */
:root{--beirada:20px;--coluna-info:720px}
.container{max-width:1120px;margin:0 auto;padding:0 var(--beirada)}

/* ── Quantos produtos cabem na linha (1.132.0) ──────────────────────────
   UM número, lido pela grade do catálogo E pela faixa que rola de lado.

   Até a 1.131 eram duas contas independentes para o MESMO cartão: a grade
   pedia `auto-fill minmax(170px,1fr)` e esticava o cartão até fechar a
   linha; a faixa fixava `flex:0 0 190px`. O resultado é que o mesmo produto
   aparecia em dois tamanhos na mesma tela — 177px no catálogo e 190px nos
   destaques a 1440px, 172 contra 190 a 768px, e 211 contra 158 a 700px,
   onde a diferença chegava a um terço.

   O `auto-fill` também não cabia no aparelho mais comum do Brasil: com
   170px de mínimo e 13px de vão, 328px de conteúdo (um celular de 360px)
   não fecham duas colunas, e a grade virava UMA coluna de 328px. Ninguém
   viu porque quem revisa abre no computador.

   Declarar a quantidade em vez de deixá-la ser deduzida é o que permite as
   duas formas acertarem a mesma medida — e é conferido a cada versão em
   `scripts/testar-colunas-da-grade.mjs`, em onze larguras de tela. */
:root{--colunas:2;--espaco-cartoes:12px}
@media(min-width:560px){ :root{--colunas:3} }
@media(min-width:700px){ :root{--espaco-cartoes:16px} }
@media(min-width:760px){ :root{--colunas:4} }
@media(min-width:980px){ :root{--colunas:5} }

/* O respiro entre o cabecalho e o conteudo, num lugar so (1.110.1).
   Nao existia regra nenhuma para o `<main>`: o conteudo encostava no
   cabecalho desde sempre, e ninguem via porque os dois eram o mesmo preto.
   Com a barra na cor da marca a emenda ficou visivel — a cor nao criou o
   problema, revelou.

   Aqui e nao em cada primeira peca porque a primeira peca MUDA: a vitrine
   abre com o banner do lojista, ou com a faixa escrita, ou direto nas
   categorias quando ele escolhe "Nenhum". Tres margens combinando entre si
   e a receita de duas concordarem e a terceira nao. */
main.container{padding-top:var(--respiro-4)}

::selection{background:var(--marca);color:var(--sobre-marca)}

:focus-visible{outline:2px solid var(--marca);outline-offset:2px;border-radius:2px}

/* ── Topo ──────────────────────────────────────────────────────────────
   A barra do alto le SEIS tokens, e nenhuma cor direta:

       --topo-fundo       a barra
       --topo-tinta       texto, icones e contornos sobre ela
       --topo-realce      foco e hover
       --topo-campo       o fundo da busca
       --topo-selo        o disco do contador do carrinho
       --topo-selo-tinta  o numero dentro dele

   Quem os define e a folha da API, conforme o cabecalho que o lojista
   escolheu: `marca` enche a barra com a cor dele, `discreto` devolve o
   vidro da pagina. O CSS nao sabe qual dos dois esta valendo — e e por isso
   que a peca que alguem acrescentar amanha nasce certa nos dois.

   Ate a 1.110.2 as pecas liam `--sobre-marca` e `--fundo` direto, com um
   bloco de sete excecoes so para elas. As excecoes sumiram: as regras base
   abaixo ja sao as certas, porque `.modo`, `.carrinho-topo`,
   `.selo-carrinho` e `.ponto-menu` so existem dentro destes dois
   cabecalhos. */
.topo{
  position:sticky;top:0;z-index:10;
  background:var(--topo-fundo);
  /* O desfoque continua para o modo `discreto`, onde a barra e translucida.
     No modo `marca` ele nao custa nada: a cor e opaca e nao ha o que borrar. */
  backdrop-filter:saturate(150%) blur(18px);
  -webkit-backdrop-filter:saturate(150%) blur(18px);
  border-bottom:1px solid transparent;
  transition:border-color .2s;
}
/* A linha do topo so existe quando ha conteudo passando por baixo. Parada no
   inicio da pagina ela vira um traco solto; rolando, ela separa de verdade.
   Em transparencia da propria tinta, e nao em `--linha`: branco a 6% sobre
   uma barra colorida nao se ve. */
.topo.rolou{border-bottom-color:color-mix(in srgb,var(--topo-tinta) 22%,transparent)}
/* A tinta desce para tudo que nao pedir a sua: nome da loja, setas, icones. */
.topo-linha{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  /* So o respiro de cima e de baixo (1.338.0). O `padding:13px 0 14px` que
     estava aqui zerava o do lado, que vem do `.container` (`--beirada`), e
     no celular o nome da loja e a busca encostavam na borda da tela: 0 px,
     medido a 390 px. No computador nao se via porque a coluna e centrada. */
  padding-top:13px;padding-bottom:14px;
  color:var(--topo-tinta);
}
/* O respiro pagando a conta que a marca quadrada abriu.
   A linha tem 27px de respiro somado, e ele e o unico espaco livre ali: a
   busca tem 43px e os botoes 40, entao nenhum dos dois disputa altura com a
   logo de 60. Com 8 de cada lado a faixa cai de 87 para 76px — quase os 73
   de antes de a logo crescer — e a logo continua do mesmo tamanho.
   So nas lojas de marca quadrada, e por isso o seletor olha o atributo que
   `marca.js` escreve: numa loja de marca deitada a logo nao manda na altura,
   e encolher o respiro apertaria o cabecalho sem devolver nada.
   8px e onde o mockup mostrou que ainda sobra folga; abaixo disso a logo
   comeca a encostar na borda. */
[data-marca-quadrada] .topo-linha{padding-top:8px;padding-bottom:8px}

/* ── A faixa de contexto ────────────────────────────────────────────────
   A linha fina de cima: onde entrega, quanto custa, quanto demora, e ate
   quando da para pedir. A de baixo: que loja e esta e o que voce procura.

   Ate a 1.106.0 as duas dividiam a MESMA linha, com o estado da loja numa
   segunda linha dentro da coluna da marca. Quem decidia a altura daquela
   coluna era a logo do lojista (ate 46px) — e o estado ficava pendurado
   fora do alinhamento de tudo o mais, com a busca encolhendo para o chip
   de CEP caber ao lado.

   Desde a 1.110.0 ela tem fundo proprio (`--superficie`) porque a linha de
   baixo virou a cor da marca: `--veu` e branco a 3%, e sobre a marca ele
   apenas acenderia o mesmo laranja um pouco mais claro. Com a superficie,
   as duas faixas sao dois planos declarados — e o endereco continua sendo
   lido sobre o tom em que a loja le todo o resto. */
.contexto{background:var(--superficie);border-bottom:1px solid var(--linha)}
.contexto-linha{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  /* So em cima e embaixo, pelo mesmo motivo da `.topo-linha` (1.338.0). */
  min-height:42px;padding-top:5px;padding-bottom:5px;
}

/* A marca e um botao: clicar nela volta para a vitrine, que e o que todo
   mundo tenta fazer. Sem cara de botao — borda e fundo aqui competiriam com
   a logo que o lojista enviou. */
.marca{
  display:flex;align-items:center;gap:12px;min-width:0;max-width:100%;
  background:none;border:0;padding:0;cursor:pointer;color:inherit;
}
/* A logo pode chegar quadrada, deitada ou em pe: cada dono envia o que tem.
   Limitar os dois lados e deixar a imagem escolher o proprio tamanho faz
   qualquer formato caber sem esticar nem espremer. */
.marca img:not([hidden]){
  display:block;width:auto;height:auto;max-height:46px;max-width:150px;object-fit:contain;
}
/* O teto alto de quem nao tem como usar a largura. Quem marca a classe e
   `marca.js`, pela forma da imagem enviada; a explicacao de por que 1.3 esta
   la. Aqui fica so o preco: a barra do topo tem a altura da coisa mais alta
   dentro dela, e a logo passa a ser essa coisa. Sao 14px a mais de cabecalho
   — 73 para 87px — cobrados so das lojas que enviaram marca redonda ou
   quadrada. Loja de marca deitada continua exatamente como estava.
   `scripts/testar-nome-no-topo.mjs` mede os dois casos e nao deixa esse
   numero crescer sozinho. */
.marca img.marca-quadrada:not([hidden]){max-height:60px}
/* O nome ocupa o lugar da marca enquanto nenhuma logo foi enviada. Com peso:
   precisa parecer marca, e nao legenda.

   A fonte vem de `--marca-fonte`, e nao mais de `--display`: ate a 1.131 ele
   era Fraunces 400 em toda loja vendida — uma serifada fina, sobre uma barra
   de cor cheia, entregando voz de vinheria a quem vende pizza ou racao. A
   escolha e do lojista; o padrao e neutro. */
.marca-nome{
  font-family:var(--marca-fonte);font-weight:var(--marca-peso);
  font-size:20px;line-height:1.1;
  /* Sem `color`: ela herda a tinta do cabecalho em que estiver, e sao dois. */
  letter-spacing:-.02em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}

/* ── Onde entregar ─────────────────────────────────────────────────────
   Em ENTREGA esta caixa E o campo de CEP. Ate a 1.101 ela era um chip que
   ABRIA uma gaveta com um campo dentro: dois cliques e uma gaveta por cima
   do catalogo para chegar a um campo que cabe na propria linha.

   A pesquisa do Baymard sobre custo de entrega mostra que 64% dos clientes
   procuram o frete ANTES de colocar no carrinho, e que 21% abandonam por nao
   ver o custo total. Cobrar um clique nessa pergunta e cobrar pedagio na
   duvida mais frequente da loja.

   Em RETIRADA a resposta e o endereco da loja, na mesma linha e com o
   "ver mapa" na mesma ponta (`desenharOndeRetirar`, em entrega.js).

   A altura e fixa nos quatro estados. Sem isso, o cabecalho inteiro pula
   quando a resposta chega, e a pessoa perde de vista o que estava lendo.

   Desde a 1.107.0 ela vive na faixa de contexto e nao desenha mais caixa:
   quem tem borda aqui e o CAMPO, porque campo pede clique e resposta nao.
   Uma caixa em volta da resposta pronta convidava a clicar no que ja estava
   respondido — e roubava da faixa a leitura corrida que ela existe para
   ter. */
.onde{
  display:flex;align-items:center;gap:8px;flex:0 1 auto;min-width:0;
  max-width:min(72vw,560px);height:32px;padding:0;
  background:none;border:0;color:var(--texto);
}

.onde-pino{
  width:16px;height:16px;flex:none;fill:none;stroke:var(--marca-texto);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}

/* O campo E a caixa. Ate a 1.106.0 quem desenhava a moldura era `.onde`, e
   o campo vinha nu por dentro; na faixa de contexto a moldura passou a ser
   dele, para que a RESPOSTA (que nao se clica) fique sem moldura nenhuma. */
.onde-campo{
  flex:0 1 132px;min-width:96px;height:30px;padding:0 12px;
  background:var(--superficie);border:1px solid var(--linha-forte);border-radius:9px;
  color:var(--texto);transition:border-color .18s,box-shadow .18s;
  font:600 13px var(--ui);font-variant-numeric:tabular-nums;letter-spacing:.04em;
}
.onde-campo:hover{border-color:var(--marca-texto)}
/* Digitando: a borda da marca diz que o campo esta vivo. A classe mora no
   contêiner porque e ele que entrega.js pinta — o campo e filho. */
.onde.onde-ativo .onde-campo{border-color:var(--marca)}
.onde.onde-erro .onde-campo{border-color:var(--erro)}
.onde-campo:focus{outline:0;border-color:var(--marca);
 box-shadow:0 0 0 3px color-mix(in srgb,var(--marca) 12%,transparent)}
.onde-campo::placeholder{color:var(--texto-3);font-weight:400;letter-spacing:0}
/* O X que o Chrome poe em `type=search` e o spinner do `number` nao existem
   aqui, mas o iOS desenha um botao de limpar em campos com autocomplete. */
.onde-campo::-webkit-search-cancel-button{display:none}

/* A dica e a contagem regressiva dos digitos, no mesmo lugar: ela nao pode
   empurrar o campo quando o texto trocar. */
.onde-dica{font-size:11px;color:var(--texto-3);white-space:nowrap;flex:none}
.onde.onde-erro .onde-dica{color:var(--erro-texto)}

/* O relogio girando fica NO LUGAR da dica, e nao numa linha nova. */
.onde-girando{
  width:14px;height:14px;flex:none;border-radius:50%;
  border:2px solid var(--linha-forte);border-top-color:var(--marca);
  animation:girando .7s linear infinite;
}
@keyframes girando{to{transform:rotate(360deg)}}
.onde-cep{font:600 13px var(--ui);font-variant-numeric:tabular-nums;white-space:nowrap}

/* A resposta: bairro, prazo e taxa na MESMA linha. Empilhada em duas ela
   pedia 44px de altura — o que fazia sentido dentro de uma caixa e nao faz
   dentro de uma faixa fina, onde o olho le a linha inteira de uma vez. */
.onde-resposta{display:flex;align-items:baseline;gap:8px;min-width:0;flex:0 1 auto}
.onde-resposta b{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.onde-resposta span{font-size:12px;color:var(--texto-2);white-space:nowrap;
 font-variant-numeric:tabular-nums}
/* O ponto que separa o bairro do prazo. Escrito no CSS porque e pontuacao
   entre dois blocos que a mesma funcao ja monta separados — poe-lo no JS
   obrigaria entrega.js a saber como as duas partes ficam lado a lado. */
.onde-resposta b + span::before{content:"·";color:var(--linha-forte);margin-right:8px}
/* ── O bairro, colado no endereco ──────────────────────────────────────
   O separador aqui e um TRACO, e nao o mesmo ponto que separa o rotulo do
   endereco. Sao duas relacoes diferentes, e cada uma ganha o seu sinal:

     Retirar na loja  ·  Rua Mel Ville, 80 - Jardim Canada
     └── o que e ────┘    └── onde e, inteiro ───────────┘

   `numero - bairro` e como endereco se escreve no Brasil: e a forma dos
   Correios, e quem bate o olho le "endereco" sem precisar entender nada. O
   `·` que estava aqui e separador generico de interface — dizia apenas "dois
   pedacos de texto", e por isso o bairro parecia um terceiro dado solto em
   vez de parte do endereco.

   ── E o contraste ────────────────────────────────────────────────────
   O ponto antigo saia em `--linha-forte`, que e branco a 16% — invisivel no
   fundo escuro. Sem separador visivel, o vao de 8px virava um buraco sem
   explicacao, e era ELE que fazia o bairro parecer afastado. Medido: os dois
   vaos da linha sempre tiveram os mesmos 8px.

   O traco sai em `--texto-3`, a mesma cor do proprio bairro: apagado em
   relacao a rua, que continua sendo o que mais importa, e legivel.

   O vao interno cai para 6px e o bairro recua 2px, encostando as duas partes
   do endereco. O vao ate o rotulo continua em 8px de proposito — e ele que
   diz onde uma coisa termina e a outra comeca. */
.onde-bairro{margin-left:-2px}
/* Sem cor propria: o traco herda a do bairro, seja ela qual for.

   Escrever `--texto-3` aqui parecia certo e estava errado. O `.onde-bairro`
   ao lado TAMBEM pedia `--texto-3` e nunca conseguiu: `.onde-resposta span`
   e mais especifico e ganha, entao o bairro sai em `--texto-2`, o mesmo tom
   da rua. A regra do bairro nunca valeu — e nao ha erro nenhum que denuncie
   isso, so a tela.

   Fixar a cor do traco teria produzido um separador de um tom e um bairro de
   outro. Herdando, ele acompanha o bairro para sempre, inclusive no dia em
   que alguem desempatar aquela especificidade. */
.onde-bairro::before{content:"-";margin-right:6px}
@media(max-width:900px){ .onde-bairro{display:none} }
.onde-fora{font-size:11.5px;color:var(--erro-texto);white-space:nowrap;flex:1}

.onde-trocar{
  background:none;border:0;padding:0;cursor:pointer;flex:none;
  color:var(--marca-texto);font:600 11.5px var(--ui);
  text-decoration:underline;text-underline-offset:2px;white-space:nowrap;
}

/* ── O menu ────────────────────────────────────────────────────────────
   Existe com ou sem conta. O que muda e o conteudo. */
.caixa-menu{position:relative}
.menu-solto{
  position:absolute;right:0;top:calc(100% + 10px);width:250px;z-index:20;
  background:var(--vidro-forte,var(--superficie));
  backdrop-filter:saturate(150%) blur(20px);
  -webkit-backdrop-filter:saturate(150%) blur(20px);
  border:1px solid var(--linha-forte);border-radius:14px;padding:6px;
  box-shadow:var(--sombra);animation:descer .18s ease both;
}
/* `hidden` esconde com uma regra do navegador, e ela perde do `display`
   logo abaixo. Sem esta guarda o atributo nao esconde nada. */
.menu-item[hidden] {
  display: none;
}

.menu-item{
  display:flex;align-items:center;gap:10px;width:100%;
  background:none;border:0;padding:11px 12px;border-radius:9px;
  color:var(--texto);font-family:var(--ui);font-size:13.5px;text-align:left;
  text-decoration:none;cursor:pointer;transition:background .15s;
}
.menu-item:hover{background:var(--veu-forte)}
.menu-item svg{
  width:16px;height:16px;flex:none;fill:none;stroke:var(--texto-2);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
/* O convite para entrar e a unica peca cheia do menu: quem chegou sem conta
   precisa achar o caminho sem procurar. */
.menu-item.destaque{
  justify-content:center;background:var(--marca-relevo);color:var(--sobre-marca);
  font-weight:500;box-shadow:inset 0 -1px 0 var(--marca-sombra);
}
.menu-item.destaque:hover{background:linear-gradient(var(--marca-brilho),var(--marca-clara))}
.menu-item.equipe svg{stroke:var(--marca-texto)}
.menu-item.sair{color:var(--texto-3);font-size:12.5px}
.menu-item.sair:hover{color:var(--erro-texto);background:color-mix(in srgb,var(--erro) 7%,transparent)}
.menu-solto hr{border:0;border-top:1px solid var(--linha);margin:6px 4px}
/* O ponto do pedido a caminho, no botao do menu: o aviso precisa aparecer
   com o menu FECHADO, senao ninguem o ve. */
/* Mesmo par do selo, e pelo mesmo motivo: sobre a barra da marca, um ponto
   da marca nao se ve. */
.ponto-menu{
  position:absolute;top:-2px;right:-2px;width:8px;height:8px;border-radius:50%;
  background:var(--topo-selo);border:2px solid var(--topo-fundo);
}
h1{
  margin:0;font-family:var(--ui);font-weight:600;font-size:26px;
  letter-spacing:-.015em;line-height:1.1;color:var(--texto);
  font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 40;
}
/* ── O estado da loja, na ponta da faixa de contexto ────────────────────
   Aberta, na ultima hora, ou fechada. Uma linha e um ponto: nada de pastilha
   com borda e fundo, que aqui competiria com o campo de CEP ao lado.

   Ela morava na faixa de apresentacao ate a 1.102.0, e `banner.js` esconde
   aquela secao inteira quando ha arte no ar — a loja parava de dizer que
   estava fechando. `validar-estado-da-loja.mjs` reprova a construcao se ela
   voltar para dentro de qualquer coisa que o banner saiba esconder.

   De 1.102.0 a 1.106.0 ela ficou colada na marca, numa segunda linha dentro
   daquela coluna. Quem decidia a altura da coluna era a logo do lojista, e
   por isso a linha do estado aparecia fora do alinhamento de todo o resto do
   cabecalho. Aqui ela e vizinha da taxa e do prazo, que e o assunto dela:
   ate quando da para pedir.

   ABERTA ela e cinza e quase invisivel: esta ali para quem procurar, e nao
   para gritar com quem nao perguntou. A cor so entra com a urgencia. */
.estado-loja{
  margin:0 0 0 auto;font-size:11.5px;line-height:1.2;color:var(--texto-3);
  display:flex;align-items:center;gap:7px;flex:none;
  /* Sem caixa alta: aqui passam frases inteiras — "Fechado · abrimos hoje
     as 10h" — e nao um rotulo de duas palavras. Caixa alta em frase longa
     custa leitura, e esta linha e lida de canto de olho. */
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* "o resto" da frase — `abrimos hoje às 10h`. Ate a 1.106.0 ele simplesmente
   sumia no celular, porque a linha dividia largura com os botoes do topo. Na
   faixa de contexto ele cabe, e o que o diferencia do principal passa a ser
   o tom: o principal decide, o complemento explica. */
.estado-extra{color:var(--texto-3);font-weight:400}
.estado-loja::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 14%,transparent);
  flex:none;animation:respira 2.6s ease-in-out infinite;
}
/* Fechada: a cor entra tambem no TEXTO. Ate a 1.102.0 so a bolinha mudava —
   na capa, com 12,5px e o titulo enorme logo abaixo, dava para ver; numa
   linha de 11,5px colada na marca, um ponto vermelho sozinho passa batido. */
.estado-loja.fechado{color:var(--erro-texto);font-weight:600}
.estado-loja.fechado::before{background:var(--erro);box-shadow:0 0 0 3px color-mix(in srgb,var(--erro) 14%,transparent);animation:none}

/* Ultima hora antes de fechar. A cor muda E o texto muda ("fecha em 45 min"
   no lugar de "aberto agora") — cor sozinha nao serve para quem nao a
   distingue, e a regra do projeto e nao depender dela para dizer estado. */
.estado-loja.fechando{color:var(--alerta-texto);font-weight:600}
.estado-loja.fechando::before{background:var(--alerta);
 box-shadow:0 0 0 3px color-mix(in srgb,var(--alerta) 16%,transparent)}
/* Ultimos quinze minutos. A bolinha volta a pulsar, agora em vermelho: aqui
   o movimento e informacao, e nao enfeite. */
.estado-loja.urgente{color:var(--erro-texto);font-weight:600}
.estado-loja.urgente::before{background:var(--erro);
 box-shadow:0 0 0 3px color-mix(in srgb,var(--erro) 18%,transparent);
 animation:respira 1.6s ease-in-out infinite}
@keyframes respira{0%,100%{opacity:1}50%{opacity:.45}}

.topo-acoes{display:flex;gap:8px;align-items:center;flex:none;margin-left:auto}

/* As categorias moram DENTRO do cabecalho, que ja e grudado: elas sobem
   junto e ficam alcancaveis no meio do catalogo, sem uma segunda regra de
   `sticky` — duas grudadas empilhadas e a receita de uma cobrir a outra em
   alguma largura de tela. */
/* ── A fita de categorias ──────────────────────────────────────────────
   Ela gruda ABAIXO do topo, e o topo publica a propria altura em
   `--altura-do-topo` (marca.js). Um numero escrito aqui erraria em tres
   situacoes que existem de verdade: o topo quebra em tres linhas no
   celular, a faixa de contexto muda de altura, e a faixa de aviso aparece e
   some. O 0px de reserva vale para o instante antes do JavaScript medir —
   fita colada no alto e melhor do que fita escondida atras do cabecalho.

   z-index abaixo do topo (10): quando as duas se encontram, quem cobre e o
   cabecalho, que e quem esta grudado por cima. */
.cats-linha{
  position:sticky;top:var(--altura-do-topo,0px);z-index:9;
  margin:0 calc(var(--beirada) * -1);
  padding:var(--respiro-2) var(--beirada) 0;
  background:var(--vidro);
  backdrop-filter:saturate(150%) blur(18px);
  -webkit-backdrop-filter:saturate(150%) blur(18px);
}

/* O carrinho do topo. Redondo e sem texto de proposito: ao lado de dois
   botoes de pilula com palavra, um terceiro com palavra viraria uma fileira
   sem hierarquia. O icone e o unico que se le de longe. */
.carrinho-topo{
  position:relative;width:40px;height:40px;flex:none;border-radius:999px;
  background:transparent;color:var(--topo-tinta);
  border:1px solid color-mix(in srgb,var(--topo-tinta) 38%,transparent);
  display:grid;place-items:center;cursor:pointer;
  transition:border-color .18s,color .18s,background .18s;
}
.carrinho-topo:hover{border-color:var(--topo-realce);color:var(--topo-realce);
 background:color-mix(in srgb,var(--topo-realce) 10%,transparent)}
.carrinho-topo svg{
  width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
}
/* A borda do selo e da cor da BARRA, e nao transparente: ela abre um vao
   entre o numero e o contorno do botao, senao os dois circulos encostam e
   viram um borrao na hora de ler.

   O disco troca de lado conforme o cabecalho: sobre a barra colorida ele e
   a cor da pagina, sobre a barra discreta ele volta a ser a marca. Nos dois
   casos o par fundo/tinta e um que a paleta garante legivel. */
.selo-carrinho{
  position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;
  border-radius:999px;border:2px solid var(--topo-fundo);
  background:var(--topo-selo);color:var(--topo-selo-tinta);
  font-family:var(--ui);font-size:11px;font-weight:600;line-height:16px;text-align:center;
  font-variant-numeric:tabular-nums;
}
.modo{
  position:relative;display:inline-flex;align-items:center;gap:6px;
  background:transparent;color:var(--topo-tinta);
  border:1px solid color-mix(in srgb,var(--topo-tinta) 38%,transparent);
  border-radius:999px;padding:9px 16px;font-size:12.5px;font-family:var(--ui);
  cursor:pointer;white-space:nowrap;transition:border-color .18s,color .18s,background .18s;
}
/* A seta do menu. Sem medida escrita, um SVG sem `width` no HTML ocupa o
   tamanho padrao do navegador — e o botao virava um circulo. */
.modo svg{
  width:12px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .18s;
}
.modo[aria-expanded="true"] svg{transform:rotate(180deg)}
.modo:hover{border-color:var(--topo-realce);color:var(--topo-realce);
 background:color-mix(in srgb,var(--topo-realce) 10%,transparent)}
.modo:active{transform:scale(.97)}

/* ── Busca ─────────────────────────────────────────────── */
/* Na mesma linha da marca, e nao numa faixa propria abaixo dela: eram duas
   alturas de cabecalho para uma coisa so, e o catalogo comecava mais baixo
   por causa disso. `flex:1` faz a busca ocupar tudo que sobrar — e no
   celular ela quebra para a linha de baixo, inteira, porque e o campo mais
   usado da vitrine. */
.busca{
  display:flex;align-items:center;gap:10px;flex:1;min-width:180px;
  /* Um buraco na barra que mostra a pagina por baixo. Nao branco fixo: numa
     loja de fundo claro o branco encostaria no proprio fundo. */
  background:var(--topo-campo);border:1px solid color-mix(in srgb,var(--topo-tinta) 12%,transparent);
  border-radius:999px;padding:11px 18px;
  transition:border-color .2s,box-shadow .2s;
}
.busca:focus-within{border-color:var(--topo-realce);
 box-shadow:0 0 0 3px color-mix(in srgb,var(--topo-realce) 20%,transparent)}
.busca svg{width:17px;height:17px;fill:none;stroke:var(--texto-3);stroke-width:1.8;stroke-linecap:round;flex:none}
.busca:focus-within svg{stroke:var(--topo-realce)}
.busca input{
  border:0;outline:0;background:transparent;font-size:15px;width:100%;
  color:var(--texto);font-family:var(--ui);
}
.busca input::placeholder{color:var(--texto-3)}

/* ── Categorias ────────────────────────────────────────── */
/* Faixa que rola para o lado nao avisa nada sozinha: o cliente ve
   "Destilados" cortado na borda e conclui que a lista acabou ali. O
   `rolagem.js` liga as classes abaixo e faz a varredura de apresentacao.

   O esmaecido e MASCARA na propria faixa, e nao um degrade pintado por cima:
   o topo da loja e vidro translucido e a cor de fundo e escolha do lojista —
   degrade colorido em cima disso mostraria a emenda e teria que adivinhar a
   cor de tras. Mascara apaga o conteudo em vez de pintar.

   `currentColor` e so "opaco": numa mascara o que conta e a transparencia,
   nao a cor. Escrever preto aqui seria escrever cor fora do tema para dizer
   uma coisa que nao e cor. */
/* O vao ABAIXO da fita e maior que o de cima de proposito, e maior do que era
   ate a 1.132.0.

   Ela filtra o que vem ABAIXO dela, entao precisa pertencer visualmente ao
   catalogo e nao ao banner que vem antes: por isso 36px em cima (24 da margem
   do banner mais 12 do respiro desta faixa) contra 24 embaixo. Ate a 1.132.0
   eram 44 contra 16 — quase tres para um — e nessa distancia o primeiro
   titulo de prateleira ficava grudado nos botoes, o que se le como erro de
   montagem e nao como agrupamento. 16px tambem era menos que o vao entre os
   proprios cartoes.

   O numero de baixo tem ainda uma funcao: quando a fita gruda no cabecalho,
   e ele o unico colchao entre o vidro dela e os cartoes que passam por baixo.
   Com 16, o cartao quase encostava na borda do vidro durante a rolagem.

   Na 1.132.3 ele subiu de 24 para 32, a pedido de quem olha a loja todo dia.
   E o teto: com 36 em cima e 32 embaixo os dois vaos praticamente empatam, e
   a partir dai a fita para de parecer o filtro do que vem abaixo e passa a
   parecer uma fileira solta no meio da pagina. Para ir alem de 32 embaixo, o
   vao de cima teria que crescer junto. */
.cats{
  display:flex;gap:8px;overflow-x:auto;padding-bottom:var(--respiro-5);scrollbar-width:none;
  scroll-snap-type:x proximity;
  --fim-esquerdo:0px;
  --fim-direito:0px;
  -webkit-mask-image:linear-gradient(90deg,
    transparent 0, currentColor var(--fim-esquerdo),
    currentColor calc(100% - var(--fim-direito)), transparent 100%);
  mask-image:linear-gradient(90deg,
    transparent 0, currentColor var(--fim-esquerdo),
    currentColor calc(100% - var(--fim-direito)), transparent 100%);
}
/* ── De que lado fica o respiro (1.297.0) ─────────────────────────────
   O `padding-bottom` acima e o respiro ENTRE as categorias e a prateleira
   de produtos. Com a fita de rolagem entrando no meio dos dois (1.296.0),
   ele passou a ficar EM CIMA dela e embaixo nao sobrou nada: a fita ficou
   a 38px dos proprios azulejos e a 0px do "Em destaque", e lida na tela
   parecia pertencer aos produtos.

   Chegou assim do Thalles: "a barra vc colocou longe da categoria, mais
   para baixo, ficou estranho". A MESMA frase que o painel ja tinha ouvido
   em 1.266.0 — la ele escreveu "a do menu ficou estranha, ta mais proxima
   dos produtos que do menu". Duas areas, o mesmo defeito, porque o
   conserto da primeira vez foi escrito so para o seletor do PDV.

   O respiro troca de lado: sai da faixa e vai para depois da fita. A
   altura total nao muda.

   O irmao adjacente (`+`) e nao uma classe no pai: a `.fita-caixa` que o
   `ligarFitaDeRolagem` cria tem exatamente dois filhos, a faixa e o
   trilho, nessa ordem. Assim a regra encontra o trilho DESTA faixa sem
   precisar de marca nenhuma no HTML. */
.fita-caixa > .cats{padding-bottom:0}
.cats + .fita-trilho{margin-bottom:var(--respiro-5)}

.cats.tem-antes{--fim-esquerdo:var(--esmaecido-ponta)}
.cats.tem-depois{--fim-direito:var(--esmaecido-ponta)}
.cats button{scroll-snap-align:start}
.cats::-webkit-scrollbar{display:none}
/* Caixa normal, e nao alta. Ate a 1.131 o chip era 11px em caixa alta com
   0.14em de vao entre letras — tipografia de convite, que aqui cobrava duas
   coisas: o acento some ("NAO ALCOOLICOS" e o que a loja de verdade mostra)
   e um nome de duas palavras vira um trecho a ser soletrado. A fita e o
   controle mais tocado da vitrine; ela precisa ser lida de relance. */
.cats button{
  border:1px solid var(--linha);background:transparent;color:var(--texto-2);
  border-radius:999px;padding:9px 15px;white-space:nowrap;cursor:pointer;
  font-family:var(--ui);font-size:13px;font-weight:500;
  transition:color .18s,border-color .18s,background .18s;
}
.cats button:hover{color:var(--texto);border-color:var(--linha-forte)}
.cats button[aria-pressed="true"]{
  background:color-mix(in srgb,var(--marca) 12%,transparent);border-color:var(--marca);color:var(--marca-texto);
}

/* ── Dentro de uma categoria com subcategorias (1.236.0) ─────────────────
   A MESMA fita, com outro conteudo. Ate a 1.235 havia uma segunda faixa
   abaixo desta; ela custava uma fileira de altura numa barra que gruda no
   topo, e duas fileiras de pilula quase iguais leem como erro de desenho.

   Os chips daqui nao encolhem: neste nivel eles SAO o controle principal, e
   um tamanho menor diria que ha algo mandando neles acima — que e
   exatamente o que deixou de existir.

   A classe existe para dois efeitos, e nenhum e cosmetico: ela desliga o
   azulejo (subcategoria nao tem imagem para cadastrar) e veste o botao de
   voltar. */
.cats-dentro .cat-volta{
  border-color:var(--linha-forte);color:var(--texto);
  /* O espaco fino antes do proximo chip separa a SAIDA das escolhas sem
     precisar de filete: os dois papeis nao se confundem no dedo. */
  margin-right:var(--respiro-1);
}
.cats-dentro .cat-volta:hover{background:var(--superficie);border-color:var(--texto-3)}

/* ── Os outros dois desenhos da fita (1.137.0) ───────────────────────────
   O lojista escolhe em `Configuracoes > Pagina inicial`, e `marca.js` escreve
   a escolha em `data-cats` no <html>. Regra que nao casa fica inerte: sem o
   atributo, ou com um valor que nao esta aqui, vale o desenho de cima — que
   e o que estava no ar antes de a escolha existir.

   Os dois leem os MESMOS tokens do de cima. Um valor de cor escrito aqui
   seria a terceira loja com a cor da primeira. */

/* PILULA_CHEIA: a escolhida com a cor da loja preenchida. E o sinal mais
   forte dos tres, e ele importa porque a fita gruda no cabecalho: enquanto a
   pessoa rola, e a unica coisa na tela que diz qual filtro esta ligado. */
[data-cats="PILULA_CHEIA"] .cats button{
  border-color:transparent;background:var(--superficie-alta);
  box-shadow:0 1px 0 var(--veu) inset;
}
[data-cats="PILULA_CHEIA"] .cats button:hover{background:var(--superficie);color:var(--texto)}
[data-cats="PILULA_CHEIA"] .cats button[aria-pressed="true"]{
  background:var(--marca-relevo);color:var(--sobre-marca);border-color:transparent;
  box-shadow:inset 0 -1px 0 var(--marca-sombra);
}

/* ABA: so texto, com um traco embaixo da escolhida. O mais discreto, e por
   isso o mais dependente de o cliente ver a lista inteira — numa loja com
   dez categorias ele e o primeiro a virar uma fileira de palavras. */
[data-cats="ABA"] .cats{gap:26px}
[data-cats="ABA"] .cats button{
  border:0;background:none;border-radius:0;padding:6px 0 12px;
  font-size:14px;color:var(--texto-3);position:relative;
}
[data-cats="ABA"] .cats button::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:transparent;transition:background .18s;
}
[data-cats="ABA"] .cats button:hover{color:var(--texto);background:none}
[data-cats="ABA"] .cats button[aria-pressed="true"]{
  background:none;color:var(--texto);font-weight:600;
}
[data-cats="ABA"] .cats button[aria-pressed="true"]::after{background:var(--marca)}

/* ── AZULEJO: um bloco por categoria, com a imagem dela ─────────────────
   O unico dos quatro que tem HTML proprio (`mioloDoChip`, em vitrine.js):
   os outros tres sao o mesmo texto vestido de formas diferentes, e este tem
   uma arte ACIMA do nome.

   O FUNDO E DO SISTEMA — e o mesmo nicho iluminado do cartao de produto,
   lendo os mesmos quatro tokens. Nao e economia de CSS: e o que faz seis
   blocos parecerem irmaos mesmo com fotos tiradas por seis pessoas
   diferentes. Com o fundo vindo da foto, cada bloco traz o cinza do estudio,
   a bancada de madeira ou a parede de quem fotografou, e a fita vira uma
   colcha de retalhos.

   `.cats-dentro` nao entra aqui, e por isso o seletor a exclui: a fita
   DENTRO de uma categoria continua em texto sob qualquer `data-cats`,
   porque subcategoria nao tem imagem para cadastrar. Sem a exclusao, cada
   filha viraria um bloco de 108px com a arte vazia — a altura inteira do
   azulejo gasta para nao mostrar nada. */
[data-cats="AZULEJO"] .cats:not(.cats-dentro){gap:var(--respiro-2)}
[data-cats="AZULEJO"] .cats:not(.cats-dentro) button{
  flex:none;width:108px;padding:0;border-radius:12px;overflow:hidden;
  border:1px solid var(--linha);background:var(--luz),var(--superficie-alta);
  box-shadow:0 1px 0 var(--veu) inset;
  display:flex;flex-direction:column;
  font-size:12px;font-weight:500;color:var(--texto-2);
}
.azulejo-arte{
  width:100%;aspect-ratio:1;display:grid;place-items:center;position:relative;overflow:hidden;
  background:radial-gradient(120% 78% at 50% 0%, var(--nicho-alto) 0%, var(--nicho-meio) 46%, var(--nicho-baixo) 100%);
}
.azulejo-arte::before{
  content:"";position:absolute;top:2%;width:78%;aspect-ratio:1;
  background:radial-gradient(closest-side, var(--halo), transparent 72%);
  opacity:.7;pointer-events:none;
}

/* ── A cor de CADA imagem (1.299.0) ────────────────────────────────────
   O bloco por padrao usa o nicho do sistema, e o paragrafo acima explica
   por que: com o fundo vindo da foto, cada bloco traz o cinza do estudio de
   quem fotografou e a fita vira colcha de retalhos.

   Isto NAO desfaz aquilo. O fundo continua sendo o nicho do sistema — a
   mesma luz vindo de cima, os mesmos tres degraus, o mesmo desenho. A cor
   da imagem TINGE esse nicho, e o que muda e o tom.

   E a diferenca esta nos numeros. O cartao de produto usa 60/44/20 sobre
   branco e preto: a cor toma conta, porque ali sao quatro cartoes grandes
   por linha e cada um e um assunto. A fita tem oito, doze blocos lado a
   lado, e na mesma forca ela vira uma faixa de arco-iris com o nome
   perdendo contraste dentro dela. Aqui e 30/22/10, e sobre os proprios
   tokens do nicho em vez de sobre preto — a metade da forca, e a familia
   preservada nos dois temas, porque os tokens viram junto com o tema.

   O halo do `::before` fica como esta, neutro: colori-lo tambem somaria uma
   segunda fonte de cor no mesmo quadrado de 108px, e a imagem e quem deve
   mandar ali.

   Sem a variavel, esta regra nao casa e o bloco volta ao nicho de sempre.
   E por isso que uma fita com metade das categorias sem cor guardada nao
   fica costurada: os dois estados sao o MESMO desenho, com e sem tintura. */
.azulejo-arte.cor-de-cada-imagem{
  background:radial-gradient(120% 78% at 50% 0%,
    color-mix(in srgb, var(--cor-da-categoria) 30%, var(--nicho-alto)) 0%,
    color-mix(in srgb, var(--cor-da-categoria) 22%, var(--nicho-meio)) 46%,
    color-mix(in srgb, var(--cor-da-categoria) 10%, var(--nicho-baixo)) 100%);
}
/* O bloco tem 84px no celular contra 170 do cartao, e a sombra do cartao
   sobre ele viraria uma mancha. Redeclarar as PARTES aqui encolhe a sombra e
   a folga junto — as duas saem destes dois numeros, e por isso nao ha como
   mexer numa e esquecer a outra.

   `contain` e nao `cover`: a imagem e um recorte com folga, e cortar as
   bordas comeria justamente a folga que mantem as garrafas do mesmo tamanho
   entre um bloco e outro. O desenho da imagem em si vem da regra unica la
   em cima, junto com a do cartao de produto. */
.azulejo-arte{
  --sombra-desce:7px;
  --sombra-borra:10px;
}
/* A silhueta de quem ainda nao tem imagem: a MESMA regra do cartao de
   produto sem foto, com a mesma medida proporcional. */
.azulejo-arte svg{
  position:relative;width:44%;height:auto;fill:none;stroke:var(--produto-traco);
  stroke-width:1.1;stroke-linejoin:round;stroke-linecap:round;margin-bottom:7%;
}
/* `white-space:normal` de proposito: `.cats button` traz `nowrap`, que e
   certo na pilula (uma linha) e errado aqui — "Gelo e conveniencia" sairia
   cortado na borda do bloco.

   Sem `min-height` aqui: escrevi um, com a justificativa de igualar a altura
   dos blocos de uma e de duas linhas, e ele nao mudava um pixel. Quem iguala
   as alturas e o proprio `.cats`, que e um flex em linha — os botoes ja
   esticam ate o mais alto por padrao. Medi as duas versoes num navegador
   antes de tirar: 128px de botao, 82 de arte e 44 de nome, iguais.

   `flex:1` fica, e faz trabalho: e ele que da ao nome a altura que sobra
   depois da arte, para o texto de uma linha centralizar no mesmo lugar em
   que o de duas se acomoda. */
.azulejo-nome{
  padding:9px 6px 10px;line-height:1.25;white-space:normal;
  display:flex;align-items:center;justify-content:center;flex:1;
}
/* ── A barra do "Todos" (1.298.0) ─────────────────────────────────────
   Ele nao e uma categoria: e o botao que a vitrine inventa, sem cadastro e
   sem imagem para subir. No azulejo ele caia na silhueta generica — um
   contorno cinza de sacola no meio de oito fotos de bebida, e na PRIMEIRA
   vaga da fita.

   Em vez de arranjar uma foto para ele, ele deixa de ser azulejo. Tira fina
   e tracejada: ninguem olha para 46px de largura procurando bebida, e a
   pergunta "que imagem eu ponho" some junto com o lugar que a pedia.

   Ele CONTINUA sempre na fita — estado inicial e saida, como o guia de
   filtros recomenda. Quem diz qual dos dois ele e agora e a borda:
   tracejada quando ha um filtro (ele e a saida), cheia e na cor da marca
   quando nao ha (ele e onde voce esta).

   Os 62px que ele devolve nao sao troco: cabe mais uma categoria com foto
   antes de precisar rolar a fita. */
[data-cats="AZULEJO"] .cats:not(.cats-dentro) button.todos{
  width:46px;background:transparent;border-style:dashed;
}
.tira-do-todos{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;height:100%;padding:10px 0;
}
.tira-do-todos svg{
  width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;
}
/* De pe, e nao deitado: deitada a palavra pediria os mesmos 108px do
   azulejo, e ai a tira nao economizaria nada. */
.rotulo-do-todos{writing-mode:vertical-rl;transform:rotate(180deg);font-size:12px}
[data-cats="AZULEJO"] .cats:not(.cats-dentro) button.todos[aria-pressed="true"]{
  border-style:solid;background:color-mix(in srgb,var(--marca) 12%,transparent);
}

[data-cats="AZULEJO"] .cats:not(.cats-dentro) button:hover{border-color:var(--linha-forte);color:var(--texto)}
[data-cats="AZULEJO"] .cats:not(.cats-dentro) button[aria-pressed="true"]{
  border-color:var(--marca);color:var(--marca-texto);
  background:color-mix(in srgb,var(--marca) 12%,transparent);
}

/* ── Aviso ─────────────────────────────────────────────── */
/* Faixa do topo: primeira coisa da pagina, largura inteira. Antes era uma
   tirinha apagada abaixo dos filtros, onde parecia erro de carregamento. */
/* `hidden` esconde com uma regra do navegador, e ela perde do `display`
   logo abaixo. Sem esta guarda o atributo nao esconde nada. */
.aviso[hidden] {
  display: none;
}

.aviso{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 20px;font-size:13px;font-weight:500;text-align:center;
  border-bottom:1px solid transparent;
}
.aviso-icone{
  width:16px;height:16px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.aviso.convite{
  background:linear-gradient(90deg,color-mix(in srgb,var(--marca) 16%,transparent),color-mix(in srgb,var(--marca) 28%,transparent),color-mix(in srgb,var(--marca) 16%,transparent));
  border-bottom-color:color-mix(in srgb,var(--marca) 34%,transparent);color:var(--marca-realce);
}
.aviso.impedimento{
  background:linear-gradient(90deg,color-mix(in srgb,var(--erro) 16%,transparent),color-mix(in srgb,var(--erro) 30%,transparent),color-mix(in srgb,var(--erro) 16%,transparent));
  border-bottom-color:color-mix(in srgb,var(--erro) 40%,transparent);color:var(--erro-realce);
}
@media(max-width:560px){
  .aviso{padding:11px 16px;font-size:12.5px;text-align:left}
}

/* ── Grade de produtos ─────────────────────────────────── */
/* `minmax(0,1fr)` e nao `1fr`: o minimo de uma faixa `1fr` e o conteudo, e
   um nome de produto sem espaco (uma URL colada, um codigo) esticaria a
   coluna alem da linha. Com zero de minimo, quem manda e a largura. */
.grade{
  display:grid;grid-template-columns:repeat(var(--colunas),minmax(0,1fr));
  gap:var(--espaco-cartoes);padding:4px 0 var(--respiro-1);
}

.card{
  position:relative;background:var(--luz),var(--superficie-alta);
  border:1px solid var(--linha);border-radius:12px;
  padding:9px 9px 12px;display:flex;flex-direction:column;
  box-shadow:0 1px 0 var(--veu) inset, var(--sombra-cartao);
  transition:transform .2s cubic-bezier(.2,.7,.3,1),border-color .2s,box-shadow .2s;
  animation:sobe .45s cubic-bezier(.2,.7,.3,1) both;
}
.card:hover{
  transform:translateY(-2px);border-color:var(--linha-forte);
  box-shadow:0 1px 0 var(--veu-forte) inset, var(--sombra-cartao-alta);
}
.card:hover .foto::before{opacity:1}
.card-esgotado{opacity:.55}
@keyframes sobe{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* nicho iluminado: o produto fica numa prateleira com luz de cima */
.foto{
  position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;
  background:radial-gradient(120% 78% at 50% 0%, var(--nicho-alto) 0%, var(--nicho-meio) 46%, var(--nicho-baixo) 100%);
  display:grid;place-items:center;margin-bottom:11px;
}
.foto::before{
  content:"";position:absolute;top:2%;width:78%;aspect-ratio:1;
  background:radial-gradient(closest-side, var(--halo), transparent 72%);
  opacity:.7;transition:opacity .3s;pointer-events:none;
}
/* ── A folga do produto dentro do quadro ────────────────────────────────
   Uma regra para as DUAS pecas que desenham um recorte sobre a sombra: o
   cartao de produto e o bloco da fita em azulejo. Elas resolvem a mesma
   pergunta — quanto de vao deixar em volta de uma imagem que ja vem
   enquadrada —, e ate a 1.142.2 respondiam com numeros diferentes, escritos
   no olho em cada lugar (14px/13% aqui, 12px/10% la).

   Sem folga nas laterais nem no topo: `enquadrar-foto.ts` ja poe 8% em volta
   do produto, dentro do arquivo. Somar outra aqui era aplicar a mesma folga
   duas vezes, e deixava o recorte 27% menor que a foto com fundo — no mesmo
   cartao, um do lado do outro.

   A de baixo sai da sombra, e nao de um numero: ver `--folga-do-produto`.  */
.foto img,
.azulejo-arte img{
  position:relative;width:100%;height:100%;object-fit:contain;
  /* A conta fica AQUI, e nao num token do tema, porque variavel composta e
     resolvida onde e declarada: escrita em `:root`, ela nao enxergaria as
     partes que `.azulejo-arte` redeclara, e o bloco pequeno ficaria com a
     sombra e a folga do cartao grande. Medido em navegador. */
  padding:0 0 calc(var(--sombra-desce) + var(--sombra-borra) / 2);
  filter:drop-shadow(0 var(--sombra-desce) var(--sombra-borra) var(--sombra-cor));
}
.foto svg{
  position:relative;width:46%;height:auto;fill:none;
  stroke:var(--produto-traco);stroke-width:1.1;
  stroke-linejoin:round;stroke-linecap:round;margin-bottom:9%;
}
/* ── O quadro sem foto ────────────────────────────────────────────────
   A regra acima foi escrita para uma garrafa de 40x72, com folga embaixo
   para a sombra. A marca de "sem foto" e um icone quadrado de 24: herdando
   aquilo, ela sairia enorme e empurrada para cima.

   `> svg` de proposito. O coracao tambem mora dentro do nicho, e `.foto svg`
   ja o alcanca uma vez — uma regra mais forte aqui o pegaria de novo,
   depois das linhas que o consertam. Ele e neto, e nao filho. */
.foto.sem-foto > svg{
  width:30%;margin-bottom:0;
  stroke:var(--sem-foto-traco);stroke-width:1.7;
}
/* O halo e a luz de cima do nicho, desenhada para cair num produto. Atras de
   um desenho chapado ela nao ilumina nada: vira uma mancha em volta do
   icone, que foi o que se viu no primeiro desenho desta versao. */
.foto.sem-foto::before{display:none}

/* Modo claro do nicho: para foto que chegou com fundo solido.
   O servidor decide qual dos dois usar no momento do envio — aqui so
   existem os dois desenhos.

   Sem esta regra a foto branca aparece como um retangulo aceso dentro do
   quadro preto, com sobra escura nas laterais. Preenchendo a moldura, o
   branco da foto encosta no branco da moldura e a emenda some. */
.foto-clara{
  background:var(--foto-clara-fundo);
  border:1px solid var(--foto-clara-borda);
}
.foto-clara::before{display:none}
.foto-clara img{padding:0;filter:none}
/* O coracao mora dentro do nicho: no fundo claro ele precisa do contorno
   escuro, senao some. */
.foto-clara .coracao{
  background:var(--foto-clara-coracao-fundo);
  border-color:var(--foto-clara-coracao-linha);
}
.foto-clara .coracao svg{stroke:var(--foto-clara-coracao-traco)}

/* ── A cor de CADA produto ──────────────────────────────────────────────
   O quadro nasce da cor da propria foto, que chega no `style` do cartao —
   uma folha por loja nao consegue pintar trinta quadros de trinta cores.

   O DESENHO e o mesmo de sempre: luz vindo de cima, sombra embaixo, halo
   atras do produto. So o tom muda. E isso que mantem a grade parecendo uma
   familia em vez de uma colcha de retalhos, e e por isso que os degraus
   saem de `color-mix` sobre uma cor so, e nao de tres cores guardadas.

   Nao alcanca `.foto-clara`: foto com fundo proprio ja tem o fundo dela, e
   quem monta o cartao nem chega a por a classe nesse caso. */
/* A JANELA do produto entra na mesma regra, e não numa cópia: a pessoa toca
   num cartão colorido e a janela abria no cinza do tema. Dois desenhos do
   mesmo fundo divergiriam no dia em que um deles mudasse. */
.foto.cor-de-cada-produto,
.foto-do-produto.cor-de-cada-produto{
  background:radial-gradient(120% 78% at 50% 0%,
    color-mix(in srgb, var(--cor-do-produto) 60%, var(--clareia) 10%) 0%,
    color-mix(in srgb, var(--cor-do-produto) 44%, var(--escurece)) 48%,
    color-mix(in srgb, var(--cor-do-produto) 20%, var(--escurece)) 100%);
}
.foto.cor-de-cada-produto::before,
.foto-do-produto.cor-de-cada-produto::before{
  background:radial-gradient(closest-side,
    color-mix(in srgb, var(--cor-do-produto) 52%, transparent), transparent 72%);
}

.selo{
  position:absolute;top:8px;left:8px;z-index:2;
  font-size:9.5px;text-transform:uppercase;letter-spacing:.16em;
  padding:4px 9px;border-radius:999px;font-weight:500;
}
.selo-fora{background:color-mix(in srgb,var(--erro) 16%,transparent);color:var(--erro-texto);border:1px solid color-mix(in srgb,var(--erro) 40%,transparent)}
.selo-oferta{background:color-mix(in srgb,var(--apoio) 16%,transparent);color:var(--apoio-texto);border:1px solid color-mix(in srgb,var(--apoio) 40%,transparent)}

/* ── O coração ────────────────────────────────────────────────────────
   Fica dentro do nicho, no canto oposto ao selo de "Esgotado": os dois
   podem aparecer juntos no mesmo cartão e não podem disputar o espaço.

   34px de área tocável num alvo desenhado com 16px. O ícone menor cabe no
   canto do cartão de 170px sem cobrir a garrafa; a área maior é o que faz
   o dedo acertar de primeira no celular. */
.coracao{
  position:absolute;top:6px;right:6px;z-index:2;
  width:34px;height:34px;display:grid;place-items:center;
  border:1px solid var(--linha);border-radius:999px;
  background:color-mix(in srgb,var(--superficie) 72%,transparent);
  cursor:pointer;padding:0;
  transition:border-color .2s,background .2s,transform .15s;
}
/* `.foto svg` — a regra da silhueta do produto — alcança este SVG também,
   porque o coração mora dentro da foto. Ela empurra o desenho para cima com
   `margin-bottom:9%`, o que faz sentido para a garrafa no nicho e nenhum
   para um ícone dentro de um botão redondo: o coração ficava alto, fora do
   centro do círculo. As duas linhas abaixo desfazem só o que atrapalha. */
.coracao svg{
  margin:0;position:static;display:block;
  width:17.5px;height:17.5px;fill:none;
  stroke:var(--texto-3);stroke-width:1.5;
  stroke-linejoin:round;stroke-linecap:round;
  transition:fill .2s,stroke .2s;
}
.coracao:hover{border-color:var(--linha-forte);background:var(--superficie)}
.coracao:hover svg{stroke:var(--marca-clara)}
.coracao:active{transform:scale(.9)}
.coracao:focus-visible{outline:2px solid var(--marca);outline-offset:2px}
.coracao.on{border-color:color-mix(in srgb,var(--marca) 45%,transparent)}
.coracao.on svg{fill:var(--marca);stroke:var(--marca)}

.tipo{
  margin:0 0 5px;font-size:9.5px;text-transform:uppercase;letter-spacing:.18em;
  color:var(--texto-3);
}
.nome{
  font-size:13.5px;line-height:1.35;margin:0 0 12px;color:var(--texto);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:2.7em;
}
/* ── Promoção no card ─────────────────────────────────────────────────
   Em promoção a linha do preço vira coluna: o "de" riscado em cima, o "por"
   embaixo. Lado a lado, em cartão de 170px, os dois números disputavam o
   mesmo espaço e o riscado ficava colado no que se paga — que é justamente
   a leitura ambígua que o Decreto 5.903/2006 (art. 9º) veda.

   O riscado usa `--texto-3`, que é a cor de texto secundário JÁ CONFERIDA
   pelo validador de contraste da própria folha. Cinza inventado aqui
   passaria despercebido e falharia a exigência de legibilidade. */
.linha-preco.tem-promo{flex-direction:column;align-items:flex-start;gap:1px}
.preco-de{
  margin:0;font-size:12px;color:var(--texto-3);text-decoration:line-through;
  font-variant-numeric:tabular-nums;
}
.preco.em-promo{color:var(--apoio-texto)}

/* ── "a partir de", quando o preço depende da escolha ──────────────────
   ACIMA do número, e não deitado ao lado dele: `.preco` tem
   `white-space:nowrap`, e "a partir de R$ 1.199,90" numa coluna de 142px —
   que é o que a grade dá num aparelho de 320px — sairia por cima da borda do
   cartão.
   O empilhamento é o MESMO que a linha acima já faz na promoção, e não um
   segundo desenho: `.tem-promo` vira coluna para o "de" riscado caber acima
   do "por". Aqui é a mesma caixa. */
.linha-preco.desde{flex-direction:column;align-items:flex-start;gap:1px}
.preco-desde{font-size:10px;color:var(--texto-3);letter-spacing:.04em}
/* O cliente com tabela de preço no site (1.338.1): "seu preço" em cima e o
   varejo pequeno embaixo, sem riscar — é o preço combinado, não promoção. */
.preco-desde.seu{color:var(--ok-texto);text-transform:lowercase}
.preco-do-varejo{margin:3px 0 0;font-size:11px;color:var(--texto-3);font-variant-numeric:tabular-nums}
.faixa-do-cliente{display:flex;align-items:center;gap:10px;margin:14px 0 16px;padding:11px 14px;
  border:1px solid color-mix(in srgb,var(--ok) 35%,transparent);border-radius:var(--raio);
  background:var(--ok-fundo);color:var(--texto);font-size:13px;line-height:1.4}
.faixa-do-cliente[hidden]{display:none}
.faixa-do-cliente svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--ok-texto);stroke-width:1.8}
.faixa-do-cliente b{font-weight:600}
.faixa-do-cliente small{display:block;color:var(--texto-2);font-size:12px}

/* O prazo. `tabular-nums` é obrigatório: sem ele os dígitos têm larguras
   diferentes e o contador treme de segundo em segundo. */
.prazo-promo{
  display:flex;align-items:center;gap:5px;margin:7px 0 0;font-size:11px;
  color:var(--texto-2);font-variant-numeric:tabular-nums;
}
.prazo-promo svg{width:12px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7}
.prazo-promo.ultimo{color:var(--apoio-texto);font-weight:500}

.linha-preco{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto}
.preco{
  font-family:var(--ui);font-size:17px;font-weight:500;margin:0;
  letter-spacing:-.01em;color:var(--texto);white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.esgotado{font-size:11px;color:var(--erro-texto);margin:0}

/* A linha do preço de sócio, embaixo do preço.
   Na cor de apoio, e não na da marca: a marca já é do botão de comprar, e o
   preço de sócio não é uma ação — é uma informação sobre um preço melhor.
   Pequena de propósito: ela convida, não disputa com o preço de hoje. */
.preco-socio{
  margin:5px 0 0;font-size:11.5px;color:var(--apoio-texto);
  font-variant-numeric:tabular-nums;
}
/* Para quem JÁ é sócio o número grande já é o dele: aqui sobra só a
   confirmação de que o desconto entrou, em tom discreto. */
.preco-socio.meu{color:var(--ok);font-size:11px;letter-spacing:.04em}

/* ── O preço por quantidade no card (1.338.0) ──────────────────────────
   Só depois que o produto entrou no carrinho (ou outro do mix): no card
   parado ele brigaria com o preço de sócio e o prazo da promoção. Vazio, a
   caixa nao ocupa altura. Desde a 1.341.1 fica entre o nome e o preço, e
   não embaixo do − e +: ali ele empurrava o preço e o botão só daquele
   card, e a fileira desalinhava. */
.dica-do-card:empty{display:none}
.dica-qtd{margin:6px 0 8px;font-size:11.5px;line-height:1.35;color:var(--texto-2);text-align:left;
  font-variant-numeric:tabular-nums}
.dica-qtd b{color:var(--apoio-texto);font-weight:600}
.dica-qtd.feito,.dica-qtd.feito b{color:var(--ok-texto)}

/* ── A ação do card ────────────────────────────────────────────────────
   Linha própria, largura cheia — nunca ao lado do preço.

   Até a 1.38.4 a ação dividia a linha com o preço: um botão redondo de
   38px que, ao ser clicado, virava um contador de 94px. Nenhum dos dois
   cede (contador com `flex:none`, preço com `white-space:nowrap`), então
   em cartão abaixo de ~200px o contador saía por cima da borda e encostava
   no produto do lado. A grade permite coluna de 170px, então isso valia
   para o celular inteiro — e para o monitor de quem usa a escala de 125%
   do Windows, onde um cartão de 223px na tela mede 178px para o navegador.

   Em linha própria a conta não tem como não fechar: a largura da ação é a
   largura do cartão, qualquer que ela seja. De quebra o alvo de toque sai
   de 32px para a largura inteira, que é onde o dedo errava no celular.

   `scripts/testar-largura-do-card.mjs` mede isto num navegador de verdade,
   em várias larguras e preços, e reprova se voltar a vazar. */
.acao{margin-top:10px;height:38px;display:flex}

.acao-botao{
  flex:1;height:38px;border-radius:999px;cursor:pointer;font-family:var(--ui);
  font-size:13px;font-weight:500;letter-spacing:.02em;
  border:1px solid color-mix(in srgb,var(--marca) 55%,transparent);
  background:color-mix(in srgb,var(--marca) 10%,transparent);
  color:var(--marca-texto);
  display:flex;align-items:center;justify-content:center;gap:7px;
  transition:background .18s,border-color .18s,transform .12s;
}
.acao-botao:hover{
  background:color-mix(in srgb,var(--marca) 18%,transparent);
  border-color:var(--marca);
}
.acao-botao:active{transform:scale(.97)}
/* Esgotado ocupa a mesma caixa: o card não muda de altura por estar sem
   estoque, e a grade não fica com uma linha desalinhada. */
.acao-botao:disabled{
  cursor:not-allowed;background:transparent;
  border-color:var(--linha);color:var(--texto-3);
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;
}

.acao-contador{
  flex:1;display:flex;align-items:center;justify-content:space-between;
  height:38px;border-radius:999px;padding:3px;
  background:linear-gradient(var(--marca-brilho),var(--marca));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--marca-brilho) 28%,transparent),
             0 4px 12px color-mix(in srgb,var(--marca) 30%,transparent);
}
/* O escurecido dos botões sai de `--marca-sombra`, que é o baixo do relevo
   da marca — e não de um preto fixo, que continuaria preto numa loja de
   qualquer outra cor. */
.acao-contador button{
  width:32px;height:32px;flex:none;border-radius:999px;border:0;
  background:color-mix(in srgb,var(--marca-sombra) 16%,transparent);
  color:var(--sobre-marca);font-size:18px;line-height:1;
  cursor:pointer;font-family:var(--ui);transition:background .15s;
}
.acao-contador button:hover{background:color-mix(in srgb,var(--marca-sombra) 30%,transparent)}
.acao-contador span{
  font-size:14px;font-weight:600;color:var(--sobre-marca);
  font-variant-numeric:tabular-nums;
}

/* Contador compacto do painel do carrinho — ali a linha é larga e o
   controle divide espaço com o nome e o total do item. */
.contador{
  display:flex;align-items:center;gap:2px;flex:none;
  border:1px solid var(--marca);border-radius:999px;padding:2px;
  background:color-mix(in srgb,var(--marca) 10%,transparent);
}
.contador button{
  width:32px;height:32px;border-radius:999px;border:0;background:transparent;
  color:var(--marca-texto);font-size:17px;line-height:1;cursor:pointer;font-family:var(--ui);
}
.contador button:hover{background:color-mix(in srgb,var(--marca) 18%,transparent)}
.contador span{
  font-size:13.5px;min-width:20px;text-align:center;color:var(--texto);
  font-variant-numeric:tabular-nums;
}

.vazio{text-align:center;color:var(--texto-2);font-size:14px;padding:60px 0}
.esqueleto{
  border-radius:var(--raio);height:280px;
  background:linear-gradient(100deg,var(--superficie) 30%,var(--superficie-alta) 50%,var(--superficie) 70%);
  background-size:220% 100%;animation:pulsa 1.4s ease-in-out infinite;
}
@keyframes pulsa{from{background-position:120% 0}to{background-position:-20% 0}}

/* ── Barra do pedido (a comanda) ───────────────────────── */
/* UMA medida para tres lugares: a altura minima do botao, a altura da barra
   e a folga que ela reserva no fim da pagina. Escritas separadas, elas saem
   de sincronia na primeira vez que alguem mexe no botao — e o sintoma e o
   fim do rodape sumindo atras da barra, que passa despercebido porque quem
   confere a pagina costuma estar com o carrinho vazio, e ai a barra nem
   esta na tela.
   `--barra-alvo` e alvo de dedo antes de ser altura: e o minimo que o botao
   pode ter. Encolher esse numero para ganhar faixa e trocar conversao por
   estetica no unico botao que fecha pedido.

   `--barra-sobra` e a folga por cima da conta. Ela existe porque a altura do
   texto depende da metrica da fonte, e a Archivo nao mede igual em todo
   navegador: sem sobra, uma diferenca de meio pixel poria o fim do rodape
   atras da barra numa maquina e nao na outra. `testar-barra-do-pedido.mjs`
   cobra os dois lados — a sobra tem que existir, e tem que ser pequena, ou
   ela vira um buraco branco no fim da pagina. */
:root{--barra-folga:10px;--barra-alvo:40px;--barra-sobra:4px}
/* A conta repete o `padding` da barra de proposito, inclusive o
   `env(safe-area-inset-bottom)`: no iPhone a barra cresce com a faixa do
   gesto, e uma folga de altura fixa reservaria de menos exatamente nos
   aparelhos em que a loja mais e usada. */
.barra-espaco{
  height:calc(
    var(--barra-alvo) + var(--barra-folga) +
    max(var(--barra-folga),env(safe-area-inset-bottom)) + var(--barra-sobra)
  );
}
/* Sem barra, sem reserva. Ate a 1.204.0 este bloco ocupava a altura dela o
   tempo todo — inclusive com o carrinho vazio, que e o estado em que a
   maioria das visitas termina. Somado ao respiro exagerado do rodape, dava
   198px de preto no fim de uma pagina que nao tinha barra nenhuma. */
.barra[hidden] + .barra-espaco{height:0}
.barra{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  background:var(--vidro-forte);
  backdrop-filter:saturate(150%) blur(22px);
  -webkit-backdrop-filter:saturate(150%) blur(22px);
  padding:var(--barra-folga) 0 max(var(--barra-folga),env(safe-area-inset-bottom));
  /* Sombra para cima no lugar da borda: a barra passa a flutuar sobre a
     loja em vez de ser um rodape colado no fim dela. */
  box-shadow:var(--sombra-barra);
  animation:sobe .3s ease both;
}
/* O fio de folha. Nao e `border-top`: borda nao aceita degrade, e uma risca
   de cor e espessura unicas de ponta a ponta e o que fazia a barra ler como
   corte na pagina. Aceso no meio e sumindo nas pontas, ele lê como luz
   batendo na quina — o mesmo recurso da moldura do convite do clube.
   A cor do meio e `--marca-clara`, e nao um branco misturado: branco so
   aparece sobre o vidro escuro, e no tema claro o fio sumiria no proprio
   fundo da barra. */
.barra::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb,var(--marca) 22%,transparent) 18%,
    color-mix(in srgb,var(--marca-clara) 72%,transparent) 50%,
    color-mix(in srgb,var(--marca) 22%,transparent) 82%,
    transparent 100%);
}
.barra-linha{display:flex;align-items:center;justify-content:space-between;gap:16px}
.barra-itens{
  display:block;font-size:10px;text-transform:uppercase;letter-spacing:.16em;
  color:var(--texto-3);margin-bottom:3px;
  /* Entrelinha propria, e nao a herdada do corpo: com a do corpo (1.55) as
     duas linhas somavam 46,5px e passavam do botao — a barra crescia pelo
     TEXTO, e a folga do fim da pagina, calculada pelo botao, reservava
     6px a menos do que a barra ocupava. Medido em navegador, nao deduzido. */
  line-height:1.2;
}
/* `tabular-nums` porque este total muda a cada item somado: sem ele os
   algarismos tem larguras diferentes e o numero pula de lugar enquanto a
   pessoa monta o pedido. O resto da loja ja escreve preco assim. */
.barra-total{
  font-family:var(--ui);font-size:19px;font-weight:600;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;line-height:1.2;
}
.barra button{
  /* A altura vem de `min-height`, e nao do `padding`: com padding ela
     depende da fonte, e o botao nasce menor enquanto a Archivo nao chegou —
     alvo pequeno justamente no primeiro segundo, que e quando a barra
     aparece. */
  min-height:var(--barra-alvo);
  /* `inline-flex` decide QUEM cede quando a largura aperta, e nao e enfeite
     de alinhamento: dentro dele o texto vira item de flex, e item de flex nao
     encolhe abaixo do proprio conteudo. O botao passa a recusar largura em
     vez de quebrar a frase. Ate a 1.203.0 ele era um botao comum com padding,
     e em 360px "Ver carrinho" saia em DUAS linhas — 54px de botao torto,
     medido. Quem cede agora e o rotulo da esquerda, que e contexto; o botao
     que fecha o pedido, nao. */
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--marca-relevo);
  color:var(--sobre-marca);box-shadow:inset 0 -1px 0 var(--marca-sombra);border:0;border-radius:999px;padding:0 24px;
  font-size:13px;font-weight:600;cursor:pointer;font-family:var(--ui);
  letter-spacing:.02em;transition:filter .18s,transform .12s;
}
.barra button:hover{filter:brightness(1.08)}
.barra button:active{transform:scale(.98)}

/* ── Rodapé ────────────────────────────────────────────── */
/* Rodape em colunas: quem chegou ate aqui rolou a loja inteira e nao achou
   o que queria. E a ultima chance de dar um caminho em vez de um beco. */
/* O respiro de baixo e IGUAL ao de cima, e nao mais que isso. Ate a 1.204.0
   ele era 130px, e nao era respiro: era uma segunda reserva para a barra do
   pedido, escrita aqui alem do `.barra-espaco` que ja reserva. Com o
   carrinho cheio sobravam 148px de preto abaixo do "© 2026"; com o carrinho
   VAZIO sobravam 198px, sem barra nenhuma na tela para justificar.
   Quem reserva a barra e o `.barra-espaco`, sozinho. */
/* ── O rodape ───────────────────────────────────────────────────────────
   Reescrito na 1.226.0. O anterior eram tres colunas de texto cinza; este
   mostra o MESMO conteudo com a marca, o horario em lista e o icone de cada
   secao. Nada de dado novo: a frase e a `descricao` ja cadastrada, e as
   linhas do horario vem agrupadas do servidor.

   Sem nenhum `!important`. Os dois que existiam aqui eram sintoma de uma
   regra generica demais — `.rodape p{margin:4px 0}` — brigando com as
   especificas. A regra generica saiu; os `!important` sairam com ela. */
.rodape{
  position:relative;margin-top:56px;padding:0 0 30px;
  color:var(--texto-3);font-size:13.5px;
  border-top:1px solid color-mix(in srgb,var(--marca) 26%,transparent);
  background:linear-gradient(180deg,var(--superficie),var(--fundo) 62%);
}
/* A luz correndo no meio da emenda — a mesma assinatura da faixa de provas,
   para as duas pecas parecerem do mesmo produto.
 *
 * Ate a 1.226.3 aqui havia uma ONDA em SVG, e ela saiu por um defeito de
 * proporcao que so aparece em tela larga: com `preserveAspectRatio="none"`
 * o desenho estica junto com a janela, mas a amplitude nao. Medido: a curva
 * sobe e desce 29px em qualquer largura, entao ela vai de 1 para 13 num
 * celular a 1 para 88 num monitor de 2560px. Em tela grande virava uma reta
 * atravessada, e era o unico elemento da pagina que ignorava o alinhamento
 * do container.
 *
 * Um risco reto nao tem esse problema: ele nao tem forma para deformar. */
.rodape::before{
  content:'';position:absolute;top:0;left:22%;right:22%;height:1px;
  background:linear-gradient(90deg,transparent,var(--marca-brilho),transparent);
  box-shadow:0 0 16px color-mix(in srgb,var(--marca-brilho) 45%,transparent);
  opacity:.7;pointer-events:none;
}

.rodape-colunas{
  display:grid;grid-template-columns:1fr 1.2fr 1.45fr .95fr;
  /* `start`, e nao o `stretch` de fabrica: esticadas, todas ficam com a
     altura da mais alta — o horario, que tem cinco ou seis linhas. Numa loja
     de duas categorias isso dava 200px de vazio embaixo daquela coluna. */
  align-items:start;
  gap:0;padding:64px 0 36px;
}
.rodape-colunas > *{padding:0 30px;min-width:0}
.rodape-colunas > *:first-child{padding-left:0}
.rodape-colunas > *:last-child{padding-right:0}
/* Divisoria entre colunas, com folga em cima e embaixo — a mesma decisao da
   faixa de provas: linha que bate na borda faz virar tabela. */
.rodape-colunas > * + *{position:relative}
/* A divisoria acompanha o CONTEUDO da coluna, e nao a altura da grade.
   Descendo ate o fim ela desenhava o contorno de uma coluna vazia, e era ela
   — nao o espaco — que fazia a loja de poucas categorias parecer quebrada.
   Espaco sem contorno e respiro; com contorno e buraco. */
.rodape-colunas > * + *::before{
  content:'';position:absolute;left:0;top:2px;width:1px;height:calc(100% - 10px);
  background:linear-gradient(180deg,transparent,var(--linha-forte) 14%,
             var(--linha-forte) 86%,transparent);
}

/* A moldura redonda so entra em logo QUADRADA ou redonda — `desenharRodape`
   decide pela razao da imagem. Uma marca deitada dentro de um circulo perde
   as pontas, e e o nome da loja que fica de fora. */
/* `hidden` esconde com uma regra do navegador, e ela perde do `display`
   logo abaixo. Sem esta guarda o atributo nao esconde nada. */
.rodape-logo[hidden] {
  display: none;
}

.rodape-logo{margin-bottom:20px;display:flex;align-items:center}
.rodape-logo img{display:block;max-width:100%;height:auto}
.rodape-logo.redonda{
  width:92px;height:92px;border-radius:50%;justify-content:center;
  border:1.5px solid color-mix(in srgb,var(--marca) 65%,transparent);
  background:var(--fundo);overflow:hidden;
  box-shadow:0 0 26px color-mix(in srgb,var(--marca) 16%,transparent);
}
.rodape-logo.redonda img{width:76%;height:76%;object-fit:contain}
.rodape-logo.deitada img{max-height:64px;max-width:210px;object-fit:contain}

.rodape-frase{
  margin:0 0 22px;font-size:14px;line-height:1.65;color:var(--texto-2);max-width:250px;
}
.rodape-redes{display:flex;gap:10px}
/* `hidden` esconde com uma regra do navegador, e ela perde do `display`
   logo abaixo. Sem esta guarda o atributo nao esconde nada. */
.rodape-rede[hidden] {
  display: none;
}

.rodape-rede{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  border:1px solid color-mix(in srgb,var(--marca) 45%,transparent);
  transition:background .18s;
}
.rodape-rede svg{
  width:20px;height:20px;fill:none;stroke:var(--marca-texto);
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.rodape-rede:hover{background:color-mix(in srgb,var(--marca) 14%,transparent)}

.rodape-titulo{
  display:flex;align-items:center;gap:9px;
  margin:0 0 18px;font-size:15px;font-weight:700;color:var(--texto);
}
.rodape-titulo-2{margin-top:30px}
.rodape-selo{width:22px;height:22px;flex:none}

.rodape-texto{margin:0 0 12px;line-height:1.7;color:var(--texto-2);font-size:13.5px}
/* `hidden` esconde com uma regra do navegador, e ela perde do `display`
   logo abaixo. Sem esta guarda o atributo nao esconde nada. */
.rodape-mapa[hidden] {
  display: none;
}

.rodape-mapa{
  display:flex;width:fit-content;align-items:center;gap:4px;margin-bottom:6px;
  color:var(--marca-texto);text-decoration:none;font-size:13.5px;font-weight:600;
}
.rodape-mapa:hover{text-decoration:underline}

.rodape-horarios{margin:0;padding:0;list-style:none}
.rodape-horarios li{color:var(--texto-2);line-height:1.95;font-size:13.5px}

.rodape-links{display:flex;flex-direction:column;align-items:stretch;gap:2px}
.rodape-links a,
.rodape-links button{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  border:0;background:transparent;padding:7px 0;text-align:left;
  color:var(--texto-2);font-family:var(--ui);font-size:13.5px;
  text-decoration:none;cursor:pointer;transition:color .18s,padding-left .18s;
}
.rodape-links a:hover,
.rodape-links button:hover{color:var(--marca-texto);padding-left:4px}
/* O rotulo encurta; a seta nunca. Perfil de Instagram comprido e cadastro do
   lojista, e nao pode decidir a largura das outras colunas. */
.rodape-links a > span,
.rodape-links button > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* A seta so acende sob o cursor: doze setas douradas acesas ao mesmo tempo
   competiriam com os proprios rotulos. */
.rodape-seta{
  width:14px;height:14px;flex:none;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.35;
}
.rodape-links a:hover .rodape-seta,
.rodape-links button:hover .rodape-seta{opacity:1}
.rodape-mapa .rodape-seta{opacity:.7}
/* Duas colunas DENTRO da coluna: doze categorias empilhadas esticavam o
   rodape e deixavam a coluna vizinha com um vazio da mesma altura. */
/* Uma coluna por padrao; duas so quando ha o que dividir — quem liga o
   atributo e `desenharCategoriasDoRodape`, pela contagem.

   Fixo em duas, como era ate a 1.226.5, a loja de duas categorias mostrava
   uma em cada lado com o resto vazio. Fixo em uma, a de doze esticava o
   rodape inteiro. O numero de colunas e do CONTEUDO, e nao da folha. */
.rodape-categorias{display:grid;grid-template-columns:1fr;gap:0 22px}
.rodape-categorias[data-duas-colunas]{grid-template-columns:1fr 1fr}

.rodape-base{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;
  border-top:1px solid var(--linha);padding-top:22px;
}
.rodape-direitos{margin:0;font-size:11.5px;line-height:1.6;color:var(--texto-3)}
.rodape-idade{
  flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  border:1.5px solid color-mix(in srgb,var(--marca) 60%,transparent);
  color:var(--marca-texto);font-weight:700;font-size:12px;
}
/* O canto direito da base: formas de pagamento e os dois links legais. */
.rodape-canto{display:flex;flex-direction:column;align-items:flex-end;gap:9px}
.rodape-canto .bandeiras{justify-content:flex-end}
.rodape-legais{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:flex-end}
.rodape-legais button{
  border:0;background:transparent;padding:0;cursor:pointer;
  color:var(--texto-3);font-family:var(--ui);font-size:11.5px;transition:color .18s;
}
.rodape-legais button:hover{color:var(--marca-texto);text-decoration:underline}

/* ── As paginas dos documentos legais ──────────────────────────────────
   Coluna estreita: sao paginas para LER, e linha comprida demais faz o olho
   perder o comeco da proxima. A mesma decisao da pagina de entrega. */
.doc{max-width:760px;margin:0 auto;padding:8px 0 60px}
.doc-titulo{
  margin:0 0 10px;font-family:var(--marca-fonte);font-weight:var(--marca-peso);
  font-size:31px;line-height:1.15;color:var(--texto);
}
.doc-resumo{
  margin:0 0 34px;font-size:14.5px;line-height:1.6;color:var(--texto-2);
  padding-bottom:26px;border-bottom:1px solid var(--linha);
}
.doc-bloco{margin-bottom:30px}
.doc-bloco h2{margin:0 0 12px;font-size:16px;font-weight:700;color:var(--marca-texto)}
.doc-bloco p{margin:0 0 11px;font-size:14px;line-height:1.7;color:var(--texto-2)}
.doc-data{
  margin:38px 0 0;padding-top:20px;border-top:1px solid var(--linha);
  font-size:12px;color:var(--texto-3);
}
@media(max-width:660px){
  .doc-titulo{font-size:24px}
  .doc-resumo{margin-bottom:26px;padding-bottom:20px}
}

@media(max-width:900px){
  .rodape-colunas{grid-template-columns:1fr 1fr;gap:34px 0}
  .rodape-base{grid-template-columns:1fr;justify-items:start;gap:16px}
  .rodape-canto{align-items:flex-start}
  .rodape-canto .bandeiras{justify-content:flex-start}
  .rodape-legais{justify-content:flex-start}
}
@media(max-width:560px){
  .rodape-colunas{grid-template-columns:1fr;gap:30px}
  /* O respiro lateral e do COMPUTADOR, onde ele abre espaco para a
     divisoria. Empilhadas, ele so espreme o texto: em 390px o horario
     perdia 60px de largura e cortava em toda linha. */
  .rodape-colunas > *{padding:0}
  /* E sem vizinho ao lado nao ha o que dividir. */
  .rodape-colunas > * + *::before{display:none}
  .rodape{margin-top:40px}
  .rodape-frase{max-width:none}

  /* A marca centralizada. Empilhada e alinhada a esquerda, ela ficava com
     metade da largura da tela vazia ao lado — e a logo, que e a peca mais
     larga do bloco, puxava o olho para o canto. As LISTAS continuam a
     esquerda: texto corrido centralizado e mais dificil de ler, porque cada
     linha comeca num lugar diferente. */
  .rodape-colunas > *:first-child{
    display:flex;flex-direction:column;align-items:center;text-align:center;
  }
  .rodape-colunas > *:first-child .rodape-frase{max-width:300px}
}

/* ── Faixa de apresentação e seções ────────────────────── */
.faixa{
  position:relative;overflow:hidden;border:1px solid var(--linha);border-radius:14px;
  background:var(--luz),var(--superficie);
  box-shadow:0 1px 0 var(--veu) inset, var(--sombra-faixa);
  padding:30px 28px;margin-bottom:var(--respiro-4);
}

.faixa .brilho{
  position:absolute;right:-60px;top:-60px;width:320px;height:320px;border-radius:50%;
  background:radial-gradient(closest-side,var(--halo),transparent 70%);
  pointer-events:none;
}
.faixa-regiao{
  margin:0 0 10px;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--apoio);
}
.faixa-titulo{
  margin:0 0 8px;font-family:var(--marca-fonte);font-weight:var(--marca-peso);font-size:33px;
  line-height:1.12;max-width:520px;letter-spacing:-.015em;
}
.faixa-linha{margin:0;font-size:13px;color:var(--texto-2)}

/* ── A faixa de provas ──────────────────────────────────────────────────
   Ate a 1.224 estas regras viviam DENTRO da `.faixa`, e por isso a peça
   sumia junto com ela quando havia banner no ar — que e o caso da maioria
   das lojas. Garantia nao pode depender de o lojista ter subido uma arte.

   Toda a cor sai de `--marca`, em `color-mix`: borda, divisoria e icone
   acompanham a cor que o lojista escolher. Nenhum tom dourado escrito.

   A ALTURA e o ponto: cada texto ocupa UMA linha, e a faixa inteira fecha
   em 68px. Com titulo e apoio empilhados em duas linhas cada ela dobrava de
   corpo e empurrava o primeiro produto para fora da dobra — que e o lugar
   pelo qual ela esta competindo. */
/* `hidden` esconde com uma regra do navegador, e ela perde do `display`
   logo abaixo. Sem esta guarda o atributo nao esconde nada. */
.provas[hidden] {
  display: none;
}

.provas{
  --traco-da-prova:color-mix(in srgb,var(--marca) 40%,transparent);
  position:relative;display:grid;align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  border:1.5px solid color-mix(in srgb,var(--marca) 80%,transparent);
  border-radius:16px;
  background:linear-gradient(180deg,var(--superficie),var(--fundo));
  box-shadow:0 0 30px color-mix(in srgb,var(--marca) 15%,transparent);
  margin-bottom:var(--respiro-4);
}
.prova{
  position:relative;display:flex;align-items:center;gap:14px;
  padding:15px 20px;min-width:0;
}
/* Com folga em cima e embaixo, e nao de ponta a ponta: linha que bate na
   borda faz a peça parecer tabela, e nao um bloco recortado. */
.prova+.prova::before{
  content:'';position:absolute;left:0;top:18%;bottom:18%;width:1px;
  background:var(--traco-da-prova);
}
.prova-selo{flex:none;width:36px;height:36px}
.prova-texto{min-width:0}
/* As duas metades LADO A LADO. Era aqui que a peça engordava. O corte com
   reticencias e proposital: nome de bairro comprido encurta, e nao quebra a
   altura de toda a faixa por causa de uma loja. */
.prova-titulo{
  margin:0;font-size:13.5px;font-weight:700;line-height:1.2;
  text-transform:uppercase;letter-spacing:.01em;color:var(--texto);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.prova-titulo b{color:var(--marca-texto);font-weight:700}
.prova-linha{
  margin:3px 0 0;font-size:11.5px;line-height:1.3;color:var(--texto-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ── O cabecalho de cada prateleira ─────────────────────────────────────
   O titulo e a contagem LADO A LADO. Ate a 1.131 o `.sec` era
   `space-between`: o titulo na esquerda e a contagem chutada para a outra
   ponta do container, a quase mil pixels dele. Ali ela nao era o rotulo de
   coisa nenhuma — era uma linha solta no canto direito da tela.

   Sans com peso, e nao serifada fina: e rotulo de secao, nao manchete de
   revista. Em `--ui` de proposito — o nome e o preco do produto logo abaixo
   sempre foram sans, e o titulo em Fraunces era a unica peca fora do tom. */
.sec{display:flex;align-items:baseline;justify-content:flex-start;gap:10px;margin:0 0 var(--respiro-3)}
.sec h2{
  margin:0;font-family:var(--ui);font-weight:600;font-size:19px;letter-spacing:-.015em;
}
.sec-contagem{font-size:12.5px;color:var(--texto-3);white-space:nowrap}
/* O ponto e pontuacao ENTRE duas partes, e por isso mora no CSS: escrito no
   JavaScript, ele viajaria junto com o numero e sobraria no dia em que o
   numero nao viesse. */
.sec-contagem::before{content:"· "}
/* E e justamente esse o dia: no catalogo inteiro a contagem nao existe
   (`desenharProdutos`), e um "·" sozinho ao lado do titulo seria sujeira. */
.sec-contagem:empty{display:none}

/* O vao entre uma prateleira e a proxima.
   Ate a 1.131 quem separava era um filete de 1px (`.divisor`) com 34px em
   cima e 26 embaixo. Ele atravessava os 1120px do container enquanto a
   prateleira de promocao costuma ter um cartao so — e um traco que corre
   sozinho pelo vazio a direita e exatamente o que se ve de longe. Delivery
   nenhum separa prateleira com filete: quem separa e o vao e o peso do
   titulo, que agora tem os dois. */
.prateleira{margin-bottom:var(--respiro-6)}

/* ── O convite do clube ────────────────────────────────────────────────
   A faixa entre as prateleiras e o catálogo, em DOIS estados: o convite,
   para quem ainda não é sócio, e o cartão, para quem já é. Mesma moldura e
   mesma altura nos dois — o que muda é o conteúdo, e é por isso que existe
   uma peça só para manter.

   Nenhuma cor escrita aqui: tudo sai de `--marca` em transparência, então
   numa loja azul a faixa nasce azul. Um rgba dourado à mão continuaria
   dourado na loja do próximo cliente.

   ── A altura, e por que ela é travada ─────────────────────────────────

   O banner do topo tem 300 px. Quem paga a conta da loja é o produto, e o
   convite é ação secundária: ele complementa, não compete. Passar do
   banner seria pôr o clube na frente do que se vende. */
.convite-clube{
  position:relative;overflow:hidden;height:190px;
  border-radius:16px;margin:0 0 var(--respiro-6);
  display:flex;align-items:center;gap:var(--respiro-4);
  padding:0 0 0 var(--respiro-5);
  background:
    radial-gradient(70% 190% at 70% -70%, color-mix(in srgb,var(--marca) 16%,transparent), transparent 60%),
    var(--clube-fundo);
  box-shadow:var(--sombra-faixa);
}
/* A moldura de fio dourado. Não é `border`: borda não aceita degradê, e um
   fio de espessura única em volta é o que denuncia caixa de CSS. */
.convite-clube::before{
  content:"";position:absolute;inset:0;border-radius:16px;padding:1px;
  pointer-events:none;z-index:3;
  background:linear-gradient(150deg,
    color-mix(in srgb,var(--marca) 78%,var(--clareia)) 0%,
    color-mix(in srgb,var(--marca) 34%,transparent) 26%,
    transparent 48%,
    color-mix(in srgb,var(--marca) 30%,transparent) 74%,
    color-mix(in srgb,var(--marca) 70%,var(--clareia)) 100%);
  /* Preto puro nas duas camadas da mascara: aqui ele nao e cor, e alfa —
     o que a mascara pinta de opaco. `--escurece` e o token do preto puro. */
  -webkit-mask:linear-gradient(var(--escurece) 0 0) content-box,
               linear-gradient(var(--escurece) 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.clube-defs{position:absolute}

/* ── O número ────────────────────────────────────────────────────────
   A peça inteira. Até a 1.168 o maior texto da faixa era o NOME do
   programa, que não vende nada, e a vantagem saía em 12,5px de cinza no
   meio — quem olhava lia o nome e não lia o que ganhava. */
.convite-clube .clube-numero{flex:none;width:224px;position:relative;z-index:1}
.clube-cifra{display:block;width:100%;height:auto}
/* O molde some: ele existe só para recortar a máscara e para ser MEDIDO. */
/* Branco puro pelo mesmo motivo: dentro de uma `<mask>` do SVG o branco e
   "deixa passar", e nao uma cor que alguem va ver. */
.clube-cifra-molde{font:800 52px var(--ui);fill:var(--clareia)}
/* A rampa do metal sai de `url(#clubeRampa)` no proprio SVG, e nao de um
   token: `fill` nao aceita gradiente escrito em CSS — so cor chapada ou
   referencia a um gradiente do documento. */
/* O VEIO. Turbulência esticada num eixo só, por cima da rampa: é ele que
   separa metal de plástico, e gradiente liso não tem veio nenhum. */
.clube-cifra-veio{filter:url(#clubeEscovado);opacity:.5;mix-blend-mode:overlay}
.clube-cifra-luz{fill:var(--clareia);opacity:.26}
.clube-cifra-sufixo{font:800 33px var(--ui);fill:var(--texto)}
.convite-clube .clube-acima{
  margin:0 0 2px;font-size:11.5px;letter-spacing:.06em;color:var(--texto-2);
}
.convite-clube .clube-abaixo{
  margin:6px 0 0;font-size:13px;font-weight:700;letter-spacing:.14em;color:var(--texto-2);
}
.convite-clube .clube-miudo{margin:4px 0 0;font-size:11.5px;color:var(--texto-3)}

.convite-clube .clube-risco{
  flex:none;width:1px;height:96px;
  background:linear-gradient(180deg,transparent,
    color-mix(in srgb,var(--marca) 55%,transparent) 50%,transparent);
}

/* ── Os dizeres ──────────────────────────────────────────────────── */
.convite-clube .clube-dizeres{flex:1;min-width:180px;position:relative;z-index:1}
.convite-clube .clube-selo{
  display:flex;align-items:center;gap:9px;margin:0 0 7px;
  font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--texto-2);
}
.clube-coroa{width:17px;height:17px;flex:none;fill:var(--marca-clara)}
.convite-clube .clube-titulo{
  margin:0;font-size:25px;font-weight:800;letter-spacing:-.02em;line-height:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--texto);
}
/* O nome inteiro na cor da marca: ele e a unica palavra da linha desde a
   1.170, quando o "Socio" fixo saiu da frente dele. */
.convite-clube .clube-titulo{color:var(--marca)}
.convite-clube .clube-vantagens{
  display:flex;gap:var(--respiro-3);margin:9px 0 0;padding:0;list-style:none;flex-wrap:wrap;
}
.convite-clube .clube-vantagens li{font-size:12px;color:var(--texto-2)}
.convite-clube .clube-acao{
  margin-top:13px;height:42px;padding:0 26px;border-radius:999px;cursor:pointer;border:0;
  background:linear-gradient(172deg,
    color-mix(in srgb,var(--marca) 62%,var(--clareia)) 0%, var(--marca) 44%,
    color-mix(in srgb,var(--marca) 80%,var(--escurece)) 100%);
  color:var(--sobre-marca);font:800 12px var(--ui);
  letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;
  box-shadow:0 7px 20px color-mix(in srgb,var(--marca) 38%,transparent),
             0 1px 0 color-mix(in srgb,var(--clareia) 50%,transparent) inset;
  transition:transform .12s;
}
.convite-clube .clube-acao:active{transform:scale(.985)}
/* O botão do sócio é de contorno. Ouro cheio é para quem ainda tem uma
   decisão a tomar — ele já tomou, e já pagou por ela. */
.convite-clube .clube-acao.calma{
  background:none;color:var(--marca-clara);box-shadow:none;font-weight:700;
  border:1px solid color-mix(in srgb,var(--marca) 42%,transparent);
}

/* ── O cartão ────────────────────────────────────────────────────────
   Encosta na borda direita e sangra um pouco para fora: é o que o faz
   parecer objeto atrás do vidro, e não figurinha colada na faixa. */
.convite-clube .clube-palco{
  flex:none;width:268px;align-self:stretch;position:relative;z-index:2;
  display:flex;align-items:center;
}
.clube-cartao{display:block;width:290px;height:auto;margin-right:-26px}
.clube-chao{fill:color-mix(in srgb,var(--marca) 30%,transparent)}
.clube-arcos{fill:none;stroke:color-mix(in srgb,var(--marca) 15%,transparent);stroke-width:.6}
.clube-escovado{opacity:.45;mix-blend-mode:overlay}
.clube-emenda{fill:color-mix(in srgb,var(--clareia) 40%,transparent)}
/* O que fica SOBRE a tarja é escuro: ela é a parte clara do cartão, e
   texto claro sobre ouro claro some. */
.clube-coroa-tarja{fill:var(--clube-sobre-tarja)}
.clube-texto-tarja{
  font:700 9px var(--ui);letter-spacing:.24em;fill:var(--clube-sobre-tarja);
}
.clube-aresta{stroke:color-mix(in srgb,var(--clareia) 34%,transparent);stroke-width:1;fill:none}
.clube-borda{fill:none;stroke-width:1.6}
.clube-moldura{fill:none;stroke-width:1.3}
.clube-inicial{font:700 34px var(--marca-fonte)}
.clube-nome-cartao{font:700 19px var(--marca-fonte);letter-spacing:.18em}
.clube-fios{stroke:color-mix(in srgb,var(--marca) 50%,transparent);stroke-width:.8;fill:none}
.clube-palavra-cartao{
  font:10px var(--marca-fonte);letter-spacing:.5em;
  fill:color-mix(in srgb,var(--marca) 72%,transparent);
}
/* O relevo: a mesma palavra duas vezes, e a escura um fio abaixo. Ela é a
   sombra que uma letra levantada faria — sem ela o texto fica pousado em
   cima do cartão, e não dentro dele. */
.clube-relevo{font-family:var(--ui);font-weight:700}
.clube-relevo-sombra{font-family:var(--ui);font-weight:700;fill:var(--clube-relevo-sombra)}
.clube-etiqueta-cartao{
  font:6.5px var(--ui);letter-spacing:.22em;
  fill:color-mix(in srgb,var(--clareia) 42%,transparent);
}
.clube-dado-cartao{
  font:9px var(--ui);letter-spacing:.08em;
  fill:color-mix(in srgb,var(--clareia) 72%,transparent);
}

@media(max-width:660px){
  main.container{padding-top:var(--respiro-3)}
  .faixa{padding:22px 18px;margin-bottom:var(--respiro-3)}
  .faixa-titulo{font-size:23px}
  /* Duas por linha, e nao quatro nem uma. Quatro nao cabem; uma so faria a
     faixa ocupar meia tela antes do primeiro produto. */
  .provas{grid-template-columns:1fr 1fr;border-radius:12px;
          margin-bottom:var(--respiro-3)}
  .prova{padding:12px;gap:10px}
  .prova-selo{width:26px;height:26px}
  /* A quebra passa a ser ENTRE as duas metades do titulo. Solto, o texto
     partia no meio de uma delas: "RETIRE GRATIS NA / LOJA". */
  .prova-titulo{font-size:10.5px;white-space:normal}
  .prova-titulo b{display:block}
  /* A linha de apoio sai: endereco e forma de pagamento cabem no checkout,
     e aqui custariam a altura que o primeiro produto precisa. */
  .prova-linha{display:none}
  /* No 2x2 a divisoria do computador cairia na borda esquerda da TERCEIRA
     coluna, que aqui e a primeira da segunda linha. Cada uma responde pela
     sua posicao na grade. */
  .prova+.prova::before{display:none}
  .prova:nth-child(even){border-left:1px solid var(--traco-da-prova)}
  .prova:nth-child(n+3){border-top:1px solid var(--traco-da-prova)}
  .sec h2{font-size:18px}
  /* Menos vao entre prateleiras: no celular a tela inteira tem a altura de
     um cartao e meio, e 40px de vazio custam meia dobra de rolagem. */
  .prateleira{margin-bottom:28px}
  /* E pelo mesmo motivo a fita respira menos embaixo: no computador ela
     precisa desgrudar do titulo, aqui ela precisa caber. */
  .cats{padding-bottom:var(--respiro-3)}
  /* O respiro que trocou de lado acompanha: ver a nota em `.cats`. */
  .cats + .fita-trilho{margin-bottom:var(--respiro-3)}
  /* 84px, e nao um numero redondo: e o MAIOR valor que ainda mostra tres
     blocos inteiros num aparelho de 320px, que e o menor que ainda se vende
     no Brasil. Com 92px cabiam dois — e ai o azulejo mostraria menos
     categorias que a pilula de texto, ou seja, trocar de desenho custaria
     informacao em vez de dar.

     O numero saiu da medida, e nao da escolha: `testar-colunas-da-grade`
     abre a loja num navegador em 320, 360, 390 e 430px e reprova se algum
     deles cair abaixo de tres. Foi ele que pegou o 92px. */
  [data-cats="AZULEJO"] .cats:not(.cats-dentro) button{width:84px}
  .azulejo-nome{padding:7px 5px 8px;font-size:11.5px}
  /* A faixa do clube empilha: em 360px as tres colunas viram tres linhas
     de qualquer jeito, e o `gap` de 32px entre elas abriria buracos. O
     botao passa a ocupar a largura porque, empilhado, ele fica no fim da
     faixa — e um alvo de 22px de lado no fim de um bloco e onde o dedo
     erra.

     A ALTURA SOLTA aqui, e travada no computador: empilhado, o conteudo
     manda. Manter os 190px cortaria o botao pela metade.

     O CARTAO SAI. Em 360px ele viraria um enfeite de 4cm espremido entre o
     numero e o botao — e e no celular que a maioria compra, onde ha menos
     espaco para vaidade. */
  .convite-clube{
    height:auto;flex-wrap:wrap;padding:var(--respiro-3);
    gap:var(--respiro-3);margin-bottom:28px;
  }
  .convite-clube .clube-risco{display:none}
  /* ── O cartão fica, e em pé ─────────────────────────────────────────
     Ate a 1.170 ele sumia aqui. Era no celular que a maioria compra, e
     esconder ali o que se chamou de premium e dizer que o premium nao
     existe onde o cliente esta.

     O problema nunca foi o cartao: era a LARGURA dele deitado, que gastava
     quase a altura de um card de produto e empurrava o botao para fora da
     primeira dobra. Em pe ele cabe ao lado do texto, e o botao volta a ser
     a primeira coisa que o dedo alcanca.

     `order` porque o cartao vem por ultimo no HTML — no computador ele fica
     a direita, e aqui precisa subir para o lado do numero. */
  .convite-clube{align-items:flex-start}
  .convite-clube .clube-palco{
    width:132px;flex:none;order:-1;align-self:center;
  }
  .convite-clube .clube-cartao-em-pe{width:100%;margin-right:0}
  /* O numero divide a linha com o cartao, e por isso nao ocupa tudo. */
  .convite-clube .clube-numero{width:auto;flex:1;min-width:0}
  .convite-clube .clube-dizeres{flex-basis:100%}
  .convite-clube .clube-acao{width:100%}
}

/* ── Modal ─────────────────────────────────────────────── */
/* `hidden` esconde com uma regra do navegador, e ela perde do `display`
   logo abaixo. Sem esta guarda o atributo nao esconde nada. */
.fundo-modal[hidden] {
  display: none;
}

.fundo-modal{
  position:fixed;inset:0;background:var(--cortina);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  display:flex;align-items:flex-start;justify-content:center;
  padding:24px 16px;overflow-y:auto;z-index:var(--camada-janela);
}
.modal{
  background:var(--superficie);border:1px solid var(--linha);box-shadow:var(--sombra);
  border-radius:var(--raio-g);padding:24px;width:100%;max-width:410px;
  animation:sobe .28s cubic-bezier(.2,.7,.3,1) both;
}
.modal-topo{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}


/* ══════════════════════════════════════════════════════════════════════
   A JANELA DO PRODUTO

   Ela usa a MESMA janela de todas as outras — `#modal` é um só na loja. O
   que muda é o vestido: sem respiro em volta, sem barra de título, e mais
   larga.

   ── Por que mais larga que as outras (480 contra 410) ─────────────────

   A foto é a única coisa aqui que o cliente não conseguia ver antes. Num
   quadrado de 362px ela fica do tamanho da miniatura que ele já viu no
   cartão — e aí a janela não responde à pergunta que fez ele tocar.
   ══════════════════════════════════════════════════════════════════════ */
.modal.janela-produto{max-width:480px;padding:0;overflow:hidden;position:relative}
/* A barra de título sai: o nome do produto tem tamanho e lugar próprios
   embaixo da foto, e repetido em cima seria a mesma frase duas vezes. */
.modal.janela-produto .modal-topo{display:none}

.foto-do-produto{
  width:100%;aspect-ratio:1/1;display:grid;place-items:center;
  background:var(--veu);border-bottom:1px solid var(--linha);
  /* ── O teto de altura ────────────────────────────────────────────────
     Quadrada e sem teto, a foto sozinha comia 326px de uma tela de 640 — a
     janela inteira dava 662px e NÃO CABIA. Medido em navegador: o cliente
     rolava para achar o "+ Adicionar", que é o motivo de ele ter aberto.
     Com 42vh ela encolhe onde a tela é curta e continua quadrada onde sobra
     espaço; `object-fit:contain` garante que a garrafa não é cortada — ela
     só fica menor. */
  max-height:42vh;
  /* A moldura e o bloco a que a foto se prende.

     ── O DEFEITO QUE ISTO CONSERTA ────────────────────────────────────
     A moldura obedecia ao teto de 42vh, e a FOTO nao. `height:100%` numa
     caixa cuja altura vem de `aspect-ratio` nao tem contra o que medir: a
     porcentagem fica indefinida, o navegador trata como `auto`, e a imagem
     assume a propria proporcao a partir da largura.

     Numa garrafa de 600x1600 isso dava 1540px de foto dentro de uma moldura
     de 380px — medido em navegador. A garrafa descia por cima do nome do
     produto, do preco e do botao Adicionar. E `object-fit:contain` nunca
     entrava em acao, porque a caixa ja tinha virado gigante antes dele.

     Nao pegava so garrafa alta: uma lata de 600x700, quase quadrada, ja
     vazava 314px. Passava despercebido apenas em foto MAIS LARGA que alta.

     Com a foto posicionada contra as quatro bordas, a altura passa a sair da
     moldura ja limitada — que e definida — e o `contain` volta a fazer o que
     o comentario acima promete: a garrafa encolhe, e nao e cortada. */
  position:relative;
}
.foto-do-produto img{position:absolute;inset:0;
 width:100%;height:100%;object-fit:contain;padding:18px}

/* ── A foto flutuando ───────────────────────────────────────────────────
   Tres intensidades, escolhidas pela loja em Aparencia. O atributo vem de
   `aplicarAnimacaoDoProduto`; sem ele a foto fica parada, que e o padrao.

   `.foto-recortada` NAO e detalhe: foto de fundo SOLIDO flutuando e um
   retangulo subindo e descendo. A loja escolhe a intensidade; o PRODUTO
   decide se participa, pelo `fotoFundo` gravado no envio da imagem.

   A marcacao e explicita, e nao um `:not(.foto-clara)`: aquela classe diz
   que a foto ganhou moldura clara — decisao de desenho do CARTAO, que a
   janela nem aplica. Apoiar a animacao nela funcionaria por acidente num
   lugar e em nenhum outro.

   Anima o `transform` e a `opacity` e nada mais: as duas o navegador resolve
   na placa de video, sem redesenhar a pagina. Animar `top` ou `height` aqui
   custaria recalculo de layout sessenta vezes por segundo, na janela em que
   a pessoa esta decidindo comprar. */
[data-animacao] .foto-do-produto.foto-recortada img{
  animation:flutuarProduto var(--tempo-da-flutuacao) ease-in-out infinite;
  filter:drop-shadow(0 16px 14px var(--sombra-cor));
}
/* A sombra no chao: ela encolhe quando a foto sobe, que e o que faz o olho
   ler "suspensa" em vez de "escorregando". Sem ela o movimento parece um
   defeito de rolagem. */
[data-animacao] .foto-do-produto.foto-recortada::after{
  content:'';position:absolute;bottom:11%;width:34%;height:13px;border-radius:50%;
  background:var(--sombra-cor);filter:blur(9px);pointer-events:none;
  animation:chaoDoProduto var(--tempo-da-flutuacao) ease-in-out infinite;
}
/* O halo sai da COR DA FOTO, que a loja ja calcula no envio — a mesma que
   pinta o quadro. Verde escrito aqui sairia verde no whisky. Sem cor
   guardada (foto antiga), ele simplesmente nao existe. */
[data-animacao] .foto-do-produto.cor-de-cada-produto.foto-recortada::before{
  animation:haloDoProduto var(--tempo-da-flutuacao) ease-in-out infinite;
}

[data-animacao="SUAVE"]{--tempo-da-flutuacao:4.5s;--sobe-da-flutuacao:3px;--gira-da-flutuacao:.35deg}
[data-animacao="MEDIA"]{--tempo-da-flutuacao:3.5s;--sobe-da-flutuacao:5px;--gira-da-flutuacao:.7deg}
[data-animacao="VISIVEL"]{--tempo-da-flutuacao:2.8s;--sobe-da-flutuacao:9px;--gira-da-flutuacao:1.3deg}

@keyframes flutuarProduto{
  0%,100%{transform:translateY(0) rotate(0)}
  35%{transform:translateY(calc(-1 * var(--sobe-da-flutuacao))) rotate(var(--gira-da-flutuacao))}
  70%{transform:translateY(calc(var(--sobe-da-flutuacao) * .4))
              rotate(calc(-1 * var(--gira-da-flutuacao) * .6))}
}
@keyframes chaoDoProduto{
  0%,100%{transform:scaleX(1);opacity:.45}
  35%{transform:scaleX(.8);opacity:.28}
  70%{transform:scaleX(1.05);opacity:.5}
}
@keyframes haloDoProduto{
  0%,100%{transform:scale(.94);opacity:.7}
  50%{transform:scale(1.08);opacity:1}
}

/* Quem pediu menos movimento no proprio sistema nao ve nenhum. Nao e
   preferencia de gosto: ha quem tenha enjoo e enxaqueca com movimento na
   tela, e a janela do produto e onde a pessoa fica parada olhando. */
@media (prefers-reduced-motion:reduce){
  [data-animacao] .foto-do-produto img,
  [data-animacao] .foto-do-produto::after,
  [data-animacao] .foto-do-produto::before{animation:none}
  [data-animacao] .foto-do-produto::after{display:none}
}
.foto-do-produto svg{width:74px;height:74px;fill:none;stroke:var(--texto-3);stroke-width:1.2}

.corpo-do-produto{padding:18px 20px 20px}
.categoria-do-produto{font-size:11px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--texto-3);display:block;margin-bottom:5px}
/* O último bloco não deixa respiro embaixo: o padding do corpo já faz esse
   trabalho, e somados viram um vão.
   Vale principalmente para o NOME, porque produto sem descrição é o caso
   comum — e era ele que abria um buraco entre o nome e a linha de compra. */
.corpo-do-produto > :last-child{margin-bottom:0}
.nome-do-produto{font-size:20px;font-weight:600;line-height:1.25;margin:0 0 10px}
.descricao-do-produto{font-size:13.5px;line-height:1.6;color:var(--texto-2);margin:0 0 16px}

/* ── As faixas do preço por quantidade na janela (1.338.0) ──────────────
   Uma caixa por faixa, a que o carrinho alcançou marcada. A primeira é o
   preço de sempre e não é botão. */
.faixas-do-produto{margin:2px 0 4px}
.titulo-das-faixas{margin:0 0 8px;font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--texto-3)}
.faixas-lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px}
.faixa-qtd{display:grid;gap:2px;align-content:start;padding:10px 12px;text-align:left;font:inherit;
  border:1px solid var(--linha);border-radius:var(--raio);background:var(--superficie);color:var(--texto);
  font-variant-numeric:tabular-nums}
button.faixa-qtd{cursor:pointer}
.faixa-qtd > span{font-size:12px;color:var(--texto-2)}
.faixa-qtd b{font-size:16px;font-weight:600;white-space:nowrap}
.faixa-qtd b i{font-style:normal;font-size:12px;font-weight:400;color:var(--texto-2)}
.faixa-qtd small{font-size:11px;color:var(--ok-texto)}
.faixa-qtd.atual{border-color:var(--marca);background:color-mix(in srgb,var(--marca) 10%,var(--superficie))}
button.faixa-qtd:focus-visible{outline:2px solid var(--marca);outline-offset:2px}
/* O mix de sabores (1.341.1): a mesma régua, com os membros embaixo, em
   texto corrido — é a resposta a "vale para qual?", e não um botão. */
.faixas-do-produto + .faixas-do-mix{margin-top:14px}
.membros-do-mix{margin:8px 0 0;font-size:12px;line-height:1.4;color:var(--texto-2)}
/* No celular (fotos da 1.341.1), três caixas lado a lado davam ~100px a
   cada degrau: "Levando 6 a / 11" quebrava no meio, e o "cada" caía sozinho
   embaixo do preço. Ali cada degrau vira uma linha inteira — o que leva à
   esquerda, o preço e o "Levar 6" à direita —, e nada quebra no meio. */
@media (max-width:520px){
  .faixas-lista{grid-template-columns:1fr;gap:6px}
  .faixa-qtd{grid-template-columns:minmax(0,1fr) auto;align-items:baseline;column-gap:12px;padding:9px 12px}
  .faixa-qtd > span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .faixa-qtd b{grid-column:2;grid-row:1;text-align:right}
  .faixa-qtd small{grid-column:2;text-align:right;white-space:nowrap}
}

/* O fechar POR CIMA da foto: dentro do corpo ele empurraria o nome, e a
   janela abre com a foto na frente. Fundo próprio porque a foto por baixo
   pode ser clara ou escura. */
.fechar-produto{
  position:absolute;top:12px;right:12px;z-index:2;
  width:34px;height:34px;border-radius:999px;border:0;cursor:pointer;
  display:grid;place-items:center;font-size:20px;line-height:1;
  background:color-mix(in srgb,var(--preto-fixo) 46%,transparent);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  color:var(--branco-fixo);
}

/* A linha de compra fica GRUDADA embaixo: com descrição comprida, o botão de
   adicionar sairia da tela e o cliente rolaria para achar o que veio fazer. */
.compra-do-produto{
  display:flex;align-items:center;gap:14px;
  padding:14px 20px;border-top:1px solid var(--linha);background:var(--superficie-alta);
}
.compra-do-produto .preco-da-janela{font-size:21px;font-weight:700;line-height:1.1}
.compra-do-produto .preco-desde.seu,.compra-do-produto .preco-do-varejo{display:block}
/* O preço da faixa alcançada (1.341.1): "cada" pequeno ao lado do número, e
   embaixo de onde ele vem e quanto sai sem a faixa. */
.compra-do-produto .preco-da-janela i{font-style:normal;font-size:13px;font-weight:500;color:var(--texto-2)}
.compra-do-produto .preco-da-faixa{display:block;margin-top:2px;font-size:11.5px;color:var(--texto-2);font-variant-numeric:tabular-nums}
.compra-do-produto .socio-da-janela{display:block;font-size:11.5px;color:var(--marca-texto);
  font-weight:500}
/* ── A ação encolhe, e não ocupa metade da janela ──────────────────────
   No cartão, o botão e o contador têm `flex:1` porque lá eles ocupam a
   largura inteira. Aqui dividem a linha com o preço, e esticados empurravam
   o valor para o canto — o contador amarelo tomava meia janela.

   O `.acao` também perde o `margin-top`: na linha de compra ele é um item de
   uma fila horizontal, e o respiro de cima o desalinhava do preço. */
.compra-do-produto .acao{margin-left:auto;margin-top:0;flex:none}
.compra-do-produto .acao-botao{width:auto;padding:0 22px;flex:none}
.compra-do-produto .acao-contador{width:auto;flex:none;min-width:124px}

/* Compartilhar é um ÍCONE, e não um botão escrito. Ele é a razão desta
   janela existir, e mesmo assim não pode competir com "Adicionar": quem
   abriu quer comprar, e mandar para um amigo é o segundo motivo. */
.compartilhar-produto{
  width:44px;height:44px;flex:none;border-radius:var(--raio);cursor:pointer;
  border:1px solid var(--linha);background:transparent;color:var(--texto-2);
  display:grid;place-items:center;
}
.compartilhar-produto svg{width:19px;height:19px;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.compartilhar-produto:hover{border-color:var(--marca);color:var(--marca-texto)}
.modal-topo strong{font-family:var(--ui);font-size:20px;font-weight:600}
.fechar{
  border:0;background:transparent;font-size:24px;line-height:1;
  color:var(--texto-3);cursor:pointer;padding:0 4px;font-family:var(--ui);
}
.fechar:hover{color:var(--texto)}

.escolha{display:flex;gap:4px;background:var(--fundo);border:1px solid var(--linha);border-radius:999px;padding:4px;margin:16px 0 6px}
.escolha button{
  flex:1;border:0;background:transparent;border-radius:999px;padding:9px 0;
  font-size:13px;cursor:pointer;color:var(--texto-2);font-family:var(--ui);
}
.escolha button.on{background:var(--superficie-alta);color:var(--texto)}

.modal label{
  display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;
  color:var(--texto-3);margin:18px 0 7px;
}
.modal input{
  width:100%;border:1px solid var(--linha);border-radius:var(--raio-g);
  padding:12px 14px;font-size:16px;background:var(--fundo);color:var(--texto);
  outline:0;font-family:var(--ui);transition:border-color .18s,box-shadow .18s;
}
.modal input:focus{border-color:var(--marca);box-shadow:0 0 0 3px color-mix(in srgb,var(--marca) 12%,transparent)}

.principal{
  width:100%;margin-top:20px;border:0;border-radius:999px;padding:14px;
  background:var(--marca-relevo);color:var(--sobre-marca);
  font-size:14px;font-weight:600;cursor:pointer;font-family:var(--ui);
}
.principal:hover{filter:brightness(1.08)}
.principal:disabled{opacity:.45;cursor:not-allowed;filter:none}
.aviso-erro{color:var(--erro-texto);font-size:12.5px;min-height:18px;margin:12px 0 0}

/* ── O erro nasce NO CAMPO ──────────────────────────────────────────────
   Ate a 1.230.2 o unico aviso do checkout era o `.aviso-erro` acima: uma
   linha vermelha no PE da tela, escrita depois do clique em Finalizar,
   falando de um campo que podia estar fora da vista.

   O caminho da pessoa era: preenche tudo, rola ate embaixo, aperta, le
   "Informe seu nome", e volta a procurar onde fica o nome. O aviso existia
   e ainda assim ela ficava perdida — dizer o que falta nao e o mesmo que
   mostrar ONDE falta.

   O `.aviso-erro` continua para o que e da tela inteira (recusa do
   servidor, por exemplo). O que e de um campo passou a morar nele. */
input.errado, select.errado{border-color:var(--erro)}
.erro-do-campo{color:var(--erro-texto);font-size:11.5px;margin:5px 0 0;display:none}
input.errado + .erro-do-campo{display:block}

/* Uma piscada so, quando o Finalizar leva a pessoa ate o campo. Serve para
   os olhos reencontrarem o ponto depois da rolagem — sem ela a tela para
   num lugar novo e nada diz qual dos campos e o assunto. */
.indo-para-o-campo{animation:piscar-campo 1.1s ease-out 1}
@keyframes piscar-campo{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--erro) 55%,transparent)}
  100%{box-shadow:0 0 0 10px transparent}
}
@media(prefers-reduced-motion:reduce){.indo-para-o-campo{animation:none}}

/* ── O opcional se declara; o obrigatorio nao precisa ───────────────────
   No checkout sao quatro obrigatorios e quatro opcionais. Marcar os quatro
   obrigatorios com asterisco obriga a pessoa a aprender o que o asterisco
   quer dizer, e enche a tela de simbolo. Escrever "(opcional)" nos outros
   quatro nao pede aprendizado nenhum — esta em portugues — e a regra que
   sobra e a mais facil de segurar: tudo e obrigatorio, menos o que diz que
   nao e. */
label .opcional{color:var(--texto-3);font-weight:400;text-transform:none;
 letter-spacing:0;font-size:11px;margin-left:5px}

/* ── O endereco so nasce quando o CEP responde ──────────────────────────
   Antes, sete campos vazios apareciam de uma vez, e tres deles — rua,
   bairro e cidade — o sistema ja saberia preencher sozinho assim que o CEP
   chegasse. A rua chegava a trazer a instrucao "preenchida pelo CEP" como
   dica, que e explicacao de mecanismo no lugar onde deveria haver exemplo
   da resposta — e explicacao que mentia enquanto nao houvesse CEP algum.

   Agora a tela pede uma coisa so. Depois do CEP pede numero e complemento,
   que sao as duas unicas que o CEP nao sabe. */
.endereco-do-cep{display:none}
.tem-endereco .endereco-do-cep{display:block}

/* O endereco achado, mostrado como TEXTO e nao como campo. Campo
   preenchido convida a corrigir; texto informa e sai da frente. */
.resumo-do-endereco{background:var(--coluna);border:1px solid var(--linha);
 border-radius:12px;padding:12px 14px;margin:10px 0 0;display:flex;
 align-items:flex-start;gap:10px}
.resumo-do-endereco .texto{flex:1;min-width:0}
.resumo-do-endereco .rua{font-size:14px;color:var(--texto);font-weight:600;line-height:1.3}
.resumo-do-endereco .resto{font-size:12.5px;color:var(--texto-2);margin:2px 0 0}
.resumo-do-endereco button{border:0;background:none;color:var(--marca-texto);
 cursor:pointer;font:600 12.5px var(--ui);padding:0;white-space:nowrap}

/* Os campos de verdade continuam existindo, escondidos: sao eles que o
   pedido le, e a busca do CEP escreve neles. O resumo acima e uma VISTA
   deles, e nao uma segunda fonte de verdade — dois lugares guardando o
   mesmo endereco e como eles passam a discordar.

   `corrigir` mostra os campos para quem mora em rua que o CEP erra. */
.campos-do-endereco{display:none}
.corrigindo .campos-do-endereco{display:block}
.corrigindo .resumo-do-endereco{display:none}
.dica{font-size:12px;color:var(--texto-3);margin:16px 0 0;line-height:1.6}
.troca{
  background:transparent;border:0;color:var(--marca);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--marca) 40%,transparent);font-size:12.5px;cursor:pointer;
  padding:0 0 2px;margin-top:14px;font-family:var(--ui);
}
.conta-linha{
  display:flex;justify-content:space-between;align-items:center;
  padding:13px 0;border-bottom:1px solid var(--linha);font-size:14px;
}

/* ── Carrinho ──────────────────────────────────────────── */
/* `hidden` esconde com uma regra do navegador, e ela perde do `display`
   logo abaixo. Sem esta guarda o atributo nao esconde nada. */
.tela-carrinho[hidden] {
  display: none;
}

.tela-carrinho{
  position:fixed;inset:0;background:var(--cortina-leve);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  z-index:var(--camada-gaveta);display:flex;justify-content:flex-end;
}
.painel-carrinho{
  background:var(--fundo);border-left:1px solid var(--linha);
  width:100%;max-width:452px;height:100%;overflow-y:auto;
  padding:22px 22px 48px;animation:entra .3s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes entra{from{transform:translateX(28px);opacity:0}to{transform:none;opacity:1}}
@media(max-width:520px){.painel-carrinho{max-width:100%}}
.topo-carrinho{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.topo-carrinho strong{font-family:var(--ui);font-size:21px;font-weight:600}

.escolha-modo{
  display:flex;gap:4px;background:var(--superficie);border:1px solid var(--linha);
  border-radius:999px;padding:4px;margin-bottom:18px;
}
.escolha-modo button{
  flex:1;border:0;background:transparent;border-radius:999px;padding:10px 0;
  font-size:13px;cursor:pointer;color:var(--texto-2);font-family:var(--ui);
}
.escolha-modo button.on{background:var(--superficie-alta);color:var(--texto)}

/* Serve o carrinho e a trilha lateral. A folga e a mesma nos dois: eram
   duas declaracoes com valores diferentes, e a de baixo vencia sempre. */
.linha-cep{display:flex;gap:6px}
.linha-cep input{
  flex:1;border:1px solid var(--linha);border-radius:var(--raio-g);padding:12px 14px;
  font-size:16px;background:var(--superficie);color:var(--texto);outline:0;font-family:var(--ui);
}
.linha-cep input:focus{border-color:var(--marca)}
.botao-secundario{
  border:1px solid var(--linha-forte);background:transparent;border-radius:var(--raio-g);
  padding:0 18px;font-size:13px;cursor:pointer;color:var(--texto);font-family:var(--ui);
}
.botao-secundario:hover{border-color:var(--marca);color:var(--marca-texto)}
.dica-cep{font-size:12.5px;color:var(--ok);margin:8px 0 0}
.painel-carrinho label{
  display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;
  color:var(--texto-3);margin:0 0 7px;
}

.itens{margin:20px 0 0}
.linha-item{display:flex;align-items:center;gap:12px;padding:15px 0;border-bottom:1px solid var(--linha)}
.info-item{flex:1;min-width:0}
.nome-item{margin:0;font-size:13.5px;line-height:1.35}
.preco-item{margin:3px 0 0;font-size:11.5px;color:var(--texto-3)}
.total-item{font-family:var(--ui);font-size:14px;font-weight:500;font-variant-numeric:tabular-nums;min-width:78px;text-align:right}

/* ── O preço por quantidade no carrinho (1.338.0) ──────────────────────
   A linha quebra para o "Leve mais 2" caber embaixo dela, na largura toda. */
.linha-item{flex-wrap:wrap}
.preco-item s{margin-left:4px;color:var(--texto-3)}
.selo-qtd{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;font-size:10.5px;
  font-weight:600;color:var(--ok-texto);background:var(--ok-fundo);vertical-align:1px}
.falta-pouco{flex-basis:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 12px;border-radius:var(--raio);background:transparent;cursor:pointer;text-align:left;
  border:1px dashed color-mix(in srgb,var(--ok) 55%,transparent);color:var(--texto-2);
  font:inherit;font-size:12.5px;line-height:1.35}
.falta-pouco b{color:var(--ok-texto);font-weight:600}
.falta-pouco .mais-n{flex:none;padding:4px 10px;border-radius:999px;background:var(--ok-fundo);
  color:var(--ok-texto);font-weight:600}
.falta-pouco:hover{border-style:solid}
.falta-pouco:focus-visible{outline:2px solid var(--marca);outline-offset:2px}
.economia-qtd{margin:8px 0 0;font-size:12px;color:var(--ok-texto);text-align:right}

.aviso-carrinho{
  background:color-mix(in srgb,var(--marca) 7%,transparent);border:1px solid color-mix(in srgb,var(--marca) 28%,transparent);
  color:var(--marca-texto);border-radius:var(--raio-g);padding:12px 14px;font-size:12.5px;
  margin:14px 0 0;display:flex;align-items:center;gap:10px;justify-content:space-between;
}
.botao-aviso{
  border:1px solid color-mix(in srgb,var(--marca) 45%,transparent);background:transparent;color:var(--marca-texto);
  border-radius:999px;padding:7px 14px;font-size:11.5px;cursor:pointer;
  white-space:nowrap;font-family:var(--ui);
}
.frete-gratis{
  background:color-mix(in srgb,var(--ok) 8%,transparent);border:1px solid color-mix(in srgb,var(--ok) 30%,transparent);color:var(--ok);
  border-radius:var(--raio-g);padding:12px 14px;font-size:12.5px;margin:14px 0 0;
}
.falta-frete{
  background:transparent;border:1px dashed var(--linha-forte);color:var(--texto-2);
  border-radius:var(--raio-g);padding:12px 14px;font-size:12.5px;margin:14px 0 0;
}

.resumo{
  margin-top:20px;background:var(--superficie);border:1px solid var(--linha);
  border-radius:var(--raio-g);padding:16px;
}
.linha-resumo{display:flex;justify-content:space-between;font-size:13.5px;padding:6px 0;color:var(--texto-2)}
.linha-resumo span:last-child{color:var(--texto);font-variant-numeric:tabular-nums}
.linha-resumo.desconto span{color:var(--ok)}
.linha-resumo.total{
  border-top:1px solid var(--linha);margin-top:10px;padding-top:14px;
  font-size:15px;color:var(--texto);
}
.linha-resumo.total span:last-child{font-family:var(--ui);font-weight:600;font-size:20px}

.botao-cheio{
  width:100%;margin-top:20px;border:0;border-radius:999px;padding:15px;
  background:var(--marca-relevo);color:var(--sobre-marca);
  font-size:14.5px;font-weight:600;cursor:pointer;font-family:var(--ui);
}
.botao-cheio:hover{filter:brightness(1.08)}
.botao-cheio:disabled{opacity:.4;cursor:not-allowed;filter:none}
.carrinho-vazio{text-align:center;color:var(--texto-3);font-size:14px;padding:60px 0}

/* ── Checkout ──────────────────────────────────────────── */
.voltar{
  border:0;background:transparent;color:var(--texto-3);font-size:12.5px;
  cursor:pointer;padding:0;margin-bottom:16px;font-family:var(--ui);
}
.voltar:hover{color:var(--texto)}
.titulo-etapa{
  font-family:var(--ui);font-size:16px;font-weight:600;
  margin:26px 0 12px;padding-top:20px;border-top:1px solid var(--linha);
}
.painel-carrinho input{
  width:100%;border:1px solid var(--linha);border-radius:var(--raio-g);
  padding:12px 14px;font-size:16px;background:var(--superficie);color:var(--texto);
  outline:0;font-family:var(--ui);margin-bottom:2px;
}
.painel-carrinho input:focus{border-color:var(--marca)}
.par-campos{display:grid;grid-template-columns:2fr 1fr;gap:10px}
.par-campos label{margin-top:12px}

.opcoes-pagamento{display:flex;flex-direction:column;gap:8px}
/* O campo que vem depois das formas de pagamento (o troco, a observacao)
   respira como o titulo de uma etapa: o rotulo colado no ultimo cartao de
   pagamento parecia legenda dele. */
.opcoes-pagamento + #blocoTroco,
.opcoes-pagamento ~ label[for="ckObs"]{margin-top:var(--respiro-4)}
#blocoTroco:not([hidden]) ~ label[for="ckObs"]{margin-top:var(--respiro-3)}
/* O total mudou entre a conta e o Confirmar (revisao da 1.341.1). */
.aviso-total-mudou{margin:var(--respiro-3) 0 0;padding:var(--respiro-2) var(--respiro-3);border-radius:var(--raio);
  background:var(--alerta-fundo);color:var(--alerta-texto);font-size:13px;line-height:1.4}
/* A conta sendo refeita (1.341.1): o resumo de antes fica apagado ate a
   nova chegar, e a linha de cima diz o porque. */
.resumo-do-checkout{transition:opacity .15s}
.resumo-do-checkout.recalculando{opacity:.45}
.aviso-recalculando{margin:var(--respiro-3) 0 0;font-size:13px;color:var(--texto-2)}
@media (prefers-reduced-motion:reduce){.resumo-do-checkout{transition:none}}
/* O total acima do formulario do cartao. */
.total-do-cartao{margin:var(--respiro-1) 0 var(--respiro-3);display:flex;justify-content:space-between;align-items:baseline;
  font-size:14px;color:var(--texto-2)}
.total-do-cartao b{font-size:18px;color:var(--texto);font-variant-numeric:tabular-nums}
/* O titulo de cada grupo do pagamento — "Pague agora" e "Pague na entrega".
   Separa as duas perguntas que o cliente faz nessa ordem: primeiro QUANDO,
   depois COMO. Sem ele, "Pix agora, pelo site" e "Pix na entrega" ficam lado
   a lado parecendo a mesma linha escrita duas vezes.
   A margem de cima some no primeiro: grupo inicial nao precisa de respiro
   contra o titulo da etapa, que ja veio logo acima. */
.grupo-pg{
  margin:14px 0 2px;font-size:11px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--texto-3);
}
.grupo-pg:first-child{margin-top:0}
/* Escrito com o `.painel-carrinho` na frente de propósito, e não por capricho
   de organização: a regra genérica `.painel-carrinho label` lá em cima é mais
   específica que um `.opcao-pg` sozinho (classe + elemento vence classe), e
   estava vencendo. O efeito era silencioso e feio — as formas de pagamento
   saíam EM CAIXA ALTA, com o botão empilhado em cima do texto, porque o
   `display:block` e o `text-transform` do rótulo de formulário passavam por
   cima deste bloco inteiro. Ninguém notou porque a tela continuava
   funcionando; só ficava com cara de campo de formulário, e não de escolha. */
.painel-carrinho .opcao-pg{
  display:flex;align-items:center;gap:12px;border:1px solid var(--linha);
  border-radius:var(--raio-g);padding:14px;background:var(--superficie);cursor:pointer;
  transition:border-color .18s;
  /* Desfaz o que a regra de rótulo impunha. Explícito, e não herdado por
     sorte: é o que impede o problema de voltar no dia em que alguém mexer
     na outra regra. */
  text-transform:none;letter-spacing:normal;font-size:13.5px;margin:0;
  color:var(--texto);
}
.opcao-pg:hover{border-color:var(--linha-forte)}
.opcao-pg:has(input:checked){border-color:var(--marca);background:color-mix(in srgb,var(--marca) 6%,transparent)}
.opcao-pg input{width:auto;margin:0;accent-color:var(--marca)}
.opcao-pg span{display:flex;flex-direction:column}
.opcao-pg strong{font-size:13.5px;font-weight:500}
.opcao-pg small{font-size:11.5px;color:var(--texto-3)}

/* O bloco da idade, no fechamento do pedido.

   Ele so existe quando ha item marcado como 18+ no carrinho. Antes da
   1.113.0 no lugar dele havia uma caixa de "declaro ter 18 anos" que
   aparecia em TODO pedido, inclusive num saco de gelo — e caixa que aparece
   sempre e caixa que ninguem le.

   Na cor da marca enquanto e um pedido, e na cor de erro quando o servidor
   recusa: sao dois recados diferentes e nao podem ter a mesma cara. */
.aviso-idade{
  margin-top:20px;padding:15px;border-radius:var(--raio-g);
  background:color-mix(in srgb,var(--marca) 6%,transparent);
  border:1px solid color-mix(in srgb,var(--marca) 24%,transparent);
}
.aviso-idade p{margin:0;font-size:12.5px;color:var(--texto-2);line-height:1.5}
.aviso-idade .titulo-idade{font-size:13.5px;font-weight:600;color:var(--marca-texto);margin-bottom:5px}
.aviso-idade label{display:block;margin:13px 0 5px}
.aviso-idade input{width:100%}
.aviso-idade .dica-idade{margin-top:6px;color:var(--texto-3);font-size:11.5px}

.aviso-idade.recusado{
  background:color-mix(in srgb,var(--erro) 7%,transparent);
  border-color:color-mix(in srgb,var(--erro) 34%,transparent);
}
.aviso-idade.recusado .titulo-idade{color:var(--erro-texto)}
.aviso-idade .itens-idade{margin:9px 0 14px;padding-left:18px;font-size:12.5px;color:var(--texto-2)}
.aviso-idade .itens-idade li{margin-bottom:3px}

.pedido-ok{text-align:center;padding:28px 0}
.selo-ok{
  display:inline-block;background:color-mix(in srgb,var(--ok) 10%,transparent);color:var(--ok);
  border:1px solid color-mix(in srgb,var(--ok) 30%,transparent);border-radius:999px;
  padding:7px 18px;font-size:11px;text-transform:uppercase;letter-spacing:.14em;margin:0;
}
.numero-pedido{font-family:var(--ui);font-size:36px;font-weight:500;margin:18px 0 6px;letter-spacing:-.02em}

/* ── Pagando pelo site ──────────────────────────────────────────────────
   O selo de espera e irmao do `.selo-ok`, e nao uma peca nova: a mesma
   pastilha, no tom de quem ainda esta esperando. `.atencao` cobre o
   pagamento que nao deu certo. */
.selo-espera{
  display:inline-block;background:color-mix(in srgb,var(--marca) 10%,transparent);
  color:var(--marca-texto);border:1px solid color-mix(in srgb,var(--marca) 30%,transparent);
  border-radius:999px;padding:7px 18px;font-size:11px;text-transform:uppercase;
  letter-spacing:.14em;margin:0;
}
.selo-espera.atencao{
  background:color-mix(in srgb,var(--erro) 10%,transparent);color:var(--erro-texto);
  border-color:color-mix(in srgb,var(--erro) 30%,transparent);
}
/* Fundo branco fixo, e nao a superficie do tema: o QR precisa de contraste
   real para a camera ler, e numa loja de tema escuro ele ficaria ilegivel. */
.qr-pix{
  display:block;width:220px;max-width:70%;margin:22px auto 14px;
  background:var(--branco-fixo);padding:10px;border-radius:12px;
}
.botao-vazado{
  width:100%;margin-top:12px;border:1px solid var(--linha);border-radius:999px;
  padding:13px;background:transparent;color:var(--texto);cursor:pointer;
  font-family:var(--ui);font-size:13.5px;
  /* O codigo Pix e longo: sem isto ele estoura a largura da caixa quando
     vira texto no navegador que recusa a area de transferencia. */
  overflow-wrap:anywhere;
}
.botao-vazado:hover{border-color:var(--marca)}

/* O contador da espera.
   Números tabulares porque um relógio que muda de largura a cada segundo
   treme na tela — e este fica no meio de quem está esperando um pagamento,
   que é a pior hora possível para a interface parecer nervosa. */
.contador-pagamento{
  font-family:var(--ui);font-size:34px;font-weight:500;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;color:var(--texto);margin:20px 0 4px;
}

/* As formas oferecidas quando a tentativa anterior é fechada.
   Botões grandes e empilhados, e não uma lista de rádios: aqui a pessoa está
   escolhendo uma SAÍDA, e cada toque já resolve. Pedir para marcar e depois
   confirmar seria um clique a mais no momento de menor paciência da compra. */
/* Na tela de escolha o número do pedido vira referência, não manchete: a
   decisão é que está pendente, e as opções precisam caber na primeira tela. */
.escolha-forma .numero-pedido{font-size:19px;margin:0 0 4px;color:var(--texto-3)}
.titulo-troca{
  font-family:var(--ui);font-size:26px;font-weight:600;letter-spacing:-.01em;
  margin:0 0 12px;color:var(--texto);
}

.formas-troca{display:flex;flex-direction:column;gap:8px;margin:18px 0 4px;text-align:left}
.opcao-troca{
  display:flex;flex-direction:column;gap:2px;width:100%;
  padding:13px 15px;border:1px solid var(--linha);border-radius:12px;
  background:var(--superficie-alta);color:var(--texto);cursor:pointer;
  font-family:var(--ui);text-align:left;
}
.opcao-troca:hover:not(:disabled){border-color:var(--marca)}
.opcao-troca strong{font-size:14px;font-weight:500}
.opcao-troca small{font-size:11.5px;color:var(--texto-3)}
/* Apagado, e não escondido: sumir com "tentar outro cartão" depois de três
   tentativas deixaria a pessoa procurando o botão que ela viu antes. Ver que
   ele existe e por que parou de valer é mais curto do que não achar. */
.opcao-troca:disabled{opacity:.45;cursor:not-allowed}

.pedido-num{margin:0;font-size:13.5px}
.pedido-itens{margin:3px 0 0;font-size:11.5px;color:var(--texto-3)}
.pedido-total{margin:3px 0 0;font-family:var(--ui);font-weight:600;font-size:15px}

.aviso-cep{font-size:11.5px;color:var(--texto-3);margin:7px 0 0;min-height:16px}
.aviso-cep.bom{color:var(--ok)}
.aviso-cep.ruim{color:var(--erro-texto)}
.par-numero{display:grid;grid-template-columns:110px 1fr;gap:10px}
@media(max-width:420px){.par-numero,.par-campos{grid-template-columns:1fr}}

/* ── Manutenção ────────────────────────────────────────── */
/* `hidden` esconde com uma regra do navegador, e ela perde do `display`
   logo abaixo. Sem esta guarda o atributo nao esconde nada. */
.manutencao[hidden] {
  display: none;
}

.manutencao{
  position:fixed;inset:0;background:var(--fundo);color:var(--texto);z-index:var(--camada-manutencao);
  display:flex;align-items:center;justify-content:center;padding:24px;
  background-image:radial-gradient(90% 50% at 50% 0%, color-mix(in srgb,var(--marca) 7%,transparent) 0%, transparent 60%);
}
.cartao-manutencao{max-width:440px;text-align:center}
.marca-manutencao{
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--apoio);margin:0 0 26px;
}
.cartao-manutencao h1{font-family:var(--marca-fonte);font-size:34px;font-weight:var(--marca-peso);margin:0 0 16px}
.texto-manutencao{font-size:15.5px;line-height:1.65;color:var(--texto-2);margin:0}
/* `hidden` esconde com uma regra do navegador, e ela perde do `display`
   logo abaixo. Sem esta guarda o atributo nao esconde nada. */
.previsao-manutencao[hidden] {
  display: none;
}

.previsao-manutencao{
  margin:28px 0 0;font-size:13px;color:var(--apoio-texto);
  border:1px solid color-mix(in srgb,var(--apoio) 35%,transparent);border-radius:999px;
  padding:10px 20px;display:inline-block;
}
.rodape-manutencao{margin:32px 0 0;font-size:12px;color:var(--texto-3)}

/* ── Acessibilidade ────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

/* ── Telas pequenas ────────────────────────────────────── */
@media(max-width:480px){
  :root{--beirada:16px}
  h1{font-size:21px}
  .modo{padding:8px 13px;font-size:11.5px}
  .topo-acoes{gap:6px}
  /* Sem margem propria: ela existia para afastar a busca quando as quatro
     pecas dividiam uma linha so, e somava com o `gap` da linha. */
  .busca{padding:12px 16px}
  .foto{margin-bottom:11px}
  .nome{font-size:12.5px;margin-bottom:10px}
  .preco{font-size:17px}
  /* A acao NAO encolhe no celular: e justamente ali que o alvo pequeno
     fazia o cliente tirar o produto quando queria adicionar. */
  .contador button{width:29px;height:29px}
  /* A barra do pedido nao tem mais linha aqui. Ela tinha duas — o total
     caindo para 19px e o botao com padding menor — e as duas existiam para
     encolher no celular o que a versao de computador tinha a mais. Agora o
     total ja e 19px em toda largura, e a altura do botao vem de
     `--barra-alvo`, que e alvo de dedo: encolher no celular seria encolher
     exatamente onde o dedo aperta. */
}

/* ── O aparelho estreito de verdade (1.134.1) ──────────────────────────
   2. Abaixo de 380px, a marca ganha a linha inteira e as acoes descem.

   Mesmo com o menu virado icone, sobram 132px para o nome num aparelho de
   360px — e "Adega New Trend" precisa de 138. Faltavam SEIS pixels, e o
   conserto de seis pixels seria apertar mais alguma coisa ate a proxima
   loja com nome uma letra mais longo quebrar de novo.

   Com a linha inteira, o nome cabe qualquer que seja: conferido de 320 a
   430px com nomes de ate 20 letras, em `scripts/testar-nome-no-topo.mjs`.
   Custa uma fileira de altura, e so nos aparelhos onde o aperto e real —
   de 400px para cima o cabecalho continua com as tres linhas de sempre.

   Era 379px ate a 1.338.0. A conta dos 132px acima era feita com o topo
   SEM respiro do lado (a `.topo-linha` zerava o da coluna, e o nome
   encostava na borda); com os 16px de cada lado devolvidos, o aperto chega
   aos 390px do iPhone, e o limite subiu junto. */
@media(max-width:399px){
  .marca{flex:1 1 100%}
  .topo-acoes{width:100%;justify-content:space-between}
}
@media(max-width:379px){
  /* Abaixo de 380px decide outra coisa, que nao mudou com o topo: aqui o rotulo da barra do pedido
     passa a caber em DUAS linhas — "12 itens · entrega R$ 12,90" precisa de
     mais do que sobra ao lado do "Ver carrinho". Com duas linhas o texto
     passa o botao e a barra vai de 60 para 71px, entao a folga do fim da
     pagina acompanha por aqui. Sem esta linha, a barra cresce e o espaco
     nao: o fim do rodape fica atras dela, que e justamente o defeito que
     `scripts/testar-barra-do-pedido.mjs` mede de 320 a 1280px.
     Os 11px vem da medida em navegador, e nao de conta no papel. */
  :root{--barra-sobra:15px}
}

/* ══════════════════════════════════════════════════════════════════════
   As faixas que rolam

   Grade e a forma certa para lista LONGA: quebra em linhas e ocupa a
   largura toda. Para duas ou tres pecas ela deixa 80% da linha vazia, e a
   pagina parece inacabada num dia em que a loja so tem um produto em
   promocao. A faixa serve aos dois casos com o mesmo desenho.
   ══════════════════════════════════════════════════════════════════════ */
.trilho{position:relative}
.rolo{
  display:flex;gap:var(--espaco-cartoes);overflow-x:auto;padding:4px 0 10px;
  scroll-snap-type:x proximity;scrollbar-width:none;
  /* O esmaecido das pontas, com o mesmo desenho da fita de categorias.
     Ele existe aqui desde a 1.132.0 e substitui o aviso que a largura fixa
     dava de graca: com o cartao valendo uma coluna inteira, o proximo
     comeca exatamente na borda e nao aparece mais pela metade. Quem liga e
     desliga as duas classes e `rolagem.js`, conforme sobra conteudo.

     O `linear-gradient` precisa ser escrito AQUI, e nao no `:root`: o
     navegador resolveria os `var()` la, onde as medidas de cada lado ainda
     valem zero — mascara verde no teste e invisivel na tela. */
  --fim-esquerdo:0px;
  --fim-direito:0px;
  -webkit-mask-image:linear-gradient(90deg,
    transparent 0, currentColor var(--fim-esquerdo),
    currentColor calc(100% - var(--fim-direito)), transparent 100%);
  mask-image:linear-gradient(90deg,
    transparent 0, currentColor var(--fim-esquerdo),
    currentColor calc(100% - var(--fim-direito)), transparent 100%);
}
.rolo.tem-antes{--fim-esquerdo:var(--esmaecido-ponta)}
.rolo.tem-depois{--fim-direito:var(--esmaecido-ponta)}
.rolo::-webkit-scrollbar{display:none}
/* A MESMA largura que a grade da a uma coluna, escrita como conta em vez de
   numero fixo — `100%` aqui e a largura util da faixa.

   Ate a 1.131 eram 190px cravados (e 158 no celular, escondidos dentro do
   bloco que arruma o TOPO em telas pequenas). O numero existia para o
   cartao da borda ficar meio a mostra e a faixa avisar sozinha que rolava.
   O aviso era legitimo; o preco dele nao: o mesmo produto saia com dois
   tamanhos na mesma pagina, e a diferenca chegava a 33% em 700px. O aviso
   passou para o esmaecido acima, que e o mesmo que a fita de categorias
   usa desde a 1.105 — e as setas do computador continuam onde estavam. */
.rolo .card{
  flex:0 0 calc((100% - (var(--colunas) - 1) * var(--espaco-cartoes)) / var(--colunas));
  scroll-snap-align:start;
}

/* As setas so existem no computador: no celular o dedo arrasta, e um botao
   flutuando sobre o cartao roubaria o toque de quem quis abrir o produto. */
.trilho-seta{display:none}
@media(hover:hover) and (min-width:760px){
  .trilho-seta{
    position:absolute;top:36%;z-index:3;width:36px;height:36px;border-radius:50%;
    display:grid;place-items:center;cursor:pointer;
    background:var(--vidro-forte,var(--superficie));
    backdrop-filter:saturate(150%) blur(12px);
    -webkit-backdrop-filter:saturate(150%) blur(12px);
    border:1px solid var(--linha-forte);color:var(--texto);
    opacity:0;transition:opacity .2s,transform .15s,border-color .18s;
  }
  .trilho:hover .trilho-seta,.trilho-seta:focus-visible{opacity:1}
  .trilho-seta:hover{transform:scale(1.08);border-color:var(--marca)}
  .trilho-seta svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;
   stroke-linecap:round;stroke-linejoin:round}
  .trilho-seta.esq{left:-14px}
  .trilho-seta.dir{right:-14px}

  /* ── Seta que nao leva a lugar nenhum nao aparece ────────────────────
     Ate a 1.132.1 as duas apareciam sempre que o mouse passava pela faixa,
     mesmo com UM cartao dentro. Numa loja com uma promocao so, o cliente
     via dois botoes de navegacao numa fila que nao anda — e clicar neles
     nao fazia nada. Pior no comeco da fila, onde a seta da esquerda e
     inutil por definicao: nao ha nada antes do primeiro.

     A pergunta "sobra conteudo para este lado?" ja estava respondida: sao
     as classes que `rolagem.js` liga e desliga para desenhar o esmaecido
     da ponta. As setas passam a ler a MESMA resposta, em vez de uma conta
     propria que poderia discordar dela.

     Sem `:has`, as duas voltam a aparecer sempre — que e o comportamento
     de antes, e nao uma tela quebrada. */
  .trilho:has(.rolo:not(.tem-antes)) .trilho-seta.esq,
  .trilho:has(.rolo:not(.tem-depois)) .trilho-seta.dir{display:none}
}

/* ══════════════════════════════════════════════════════════════════════
   A coluna única

   Ate a 1.94 existia uma barra lateral a partir de 900px, com Vitrine,
   Minha conta e Carrinho — os tres ja no topo. Ela custava 280px de
   largura para repetir o cabecalho, e no celular nem existia: abaixo de
   900px a loja SEMPRE foi esta coluna unica.

   Tirar a lateral nao tirou lugar nenhum: o que ela guardava foi para a
   faixa de contexto, para o menu, para a pagina `#entrega` e para o rodape,
   cada coisa onde a pergunta dela e feita.
   ══════════════════════════════════════════════════════════════════════ */
.app{display:block}

/* Texto que so o leitor de tela recebe. */
.sr-so-leitor{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;
}
/* O CEP dentro do carrinho: a unica linha de CEP que sobrou fora do topo. */
.linha-cep{display:flex;gap:6px}
.linha-cep input{
  flex:1;min-width:0;background:var(--fundo);border:1px solid var(--linha);
  border-radius:var(--raio);padding:9px 10px;color:var(--texto);
  font-family:var(--ui);font-size:12.5px;
}
.linha-cep input::placeholder{color:var(--texto-3)}
.linha-cep input:focus{outline:0;border-color:var(--linha-forte)}
.linha-cep button{
  flex:none;background:transparent;border:1px solid var(--linha-forte);
  border-radius:var(--raio);padding:0 12px;color:var(--marca-texto);
  font-family:var(--ui);font-size:12px;cursor:pointer;transition:border-color .18s;
}
.linha-cep button:hover{border-color:var(--marca)}
/* Pagamento e informacao de conferencia, nao de decisao. Fica legivel, sem
   borda e sem disputar atencao. */
.bandeiras{display:flex;flex-wrap:wrap;gap:4px 10px}
.bandeiras span{font-size:11px;color:var(--texto-3);white-space:nowrap}

/* Exigencia legal: fica visivel, nao escondida na ultima linha. */
/* O aviso de idade. Era vermelho ate a 1.226.0, e vermelho nesta loja e a
   cor de ERRO — a mesma do carrinho recusado e do pagamento negado. Aviso
   legal nao e um erro do cliente, e pintado assim ele lia como se algo
   tivesse dado errado na compra. O selo dourado ao lado ja o destaca.
   Sem `!important`: ele existia por causa de uma regra generica do rodape
   que saiu junto. */
/* `hidden` esconde com uma regra do navegador, e ela perde do `display`
   logo abaixo. Sem esta guarda o atributo nao esconde nada. */
.aviso-legal[hidden] {
  display: none;
}

.aviso-legal{
  margin:0;font-size:11.5px;line-height:1.5;color:var(--texto-2);
  display:flex;align-items:center;gap:12px;
}

/* a barra do pedido tem seu proprio container */
.barra-linha{
  max-width:1120px;margin:0 auto;padding:0 20px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}

@media(min-width:900px){
  :root{--beirada:28px}
  .container{max-width:1180px}
  .barra-linha{padding:0 28px}
  .rodape{text-align:left;padding-left:28px;padding-right:28px}
}

/* ── O topo no celular ────────────────────────────────────────────────
   Tres linhas, nesta ordem:

       endereco ...... estado       (a faixa de contexto)
       marca ......... acoes        (quem sou eu / o que eu faco)
       busca                        (o que voce quer)

   A busca ocupa a largura inteira, e nao 40% ao lado do endereco como ate a
   1.106.0: as duas dividiam a mesma linha e nenhuma das duas cabia. Com o
   endereco na faixa de cima, cada uma tem a sua.

   O estado so quebra para uma linha propria quando nao couber ao lado do
   endereco — e a faixa de contexto e a unica das tres que pode crescer sem
   empurrar o catalogo para baixo, porque as suas duas pecas sao curtas. */
@media(max-width:720px){
  /* `flex:1 1 0` para a marca receber o que sobrar depois dos botoes, em vez
     de crescer com o nome e empurra-los para uma linha so deles. */
  .marca{order:1;flex:1 1 0;min-width:0}
  .topo-acoes{order:2}
  /* A busca inteira na terceira linha: e o campo mais usado da vitrine, e
     partido ao meio ele mostrava tres palavras da dica. */
  .busca{order:3;flex:1 1 100%;min-width:0}
  /* O endereco leva a faixa de contexto quase toda; o estado vai atras e
     quebra sozinho quando a frase for longa. */
  .onde{flex:1 1 auto;max-width:none;min-width:0}
  /* Sem o `auto` da margem: quando a frase quebra para a linha de baixo, o
     estado empurrado para a direita ficaria sozinho no canto, longe do
     assunto dele. */
  .estado-loja{margin-left:0}
  /* "taxa e prazo" e conforto, e conforto e a primeira coisa que sai quando
     falta largura. A contagem de digitos que faltam CONTINUA: ela e o retorno
     de que o campo esta recebendo o que a pessoa digita. */
  .onde-dica:not(.onde-dica-contando){display:none}

  .marca-nome{font-size:17px}
  .marca img:not([hidden]){max-height:36px;max-width:104px}
  /* O mesmo teto por forma, na proporcao desta largura. No celular a marca
     ja divide a linha com os botoes, entao a folga e menor: 36 vira 46, e
     nao 60. Sem esta linha, a regra do computador nao chegaria aqui e a
     logo redonda voltaria a ficar pequena exatamente no aparelho em que a
     loja mais e aberta. */
  .marca img.marca-quadrada:not([hidden]){max-height:46px}
  .modo{padding:8px 13px;font-size:12px}

  /* ── O nome da loja cortado (1.134.1) ────────────────────────────────
     A linha da marca divide o espaco com tres botoes que nao cedem: modo
     (122px), menu (76px) e carrinho (40px), 250px no total. Num aparelho
     de 360px sobravam 96px para o nome — e "Adega New Trend" precisa de
     138. A loja que serviu de primeira instalacao aparecia como
     "Adega New Tre…" em metade dos celulares do Brasil.

     Ellipsis existe como ultimo recurso, e nao como desenho: o nome da
     loja e a unica peca do cabecalho que NAO se pode adivinhar pelo
     contexto. Duas medidas devolvem a largura, cada uma de um lado do
     problema. */

  /* 1. O menu vira icone. Ele economiza 36px e nao perde nada: o desenho da
        seta ja diz que abre, e o nome continua no `aria-label` para quem
        navega por leitor de tela. */
  #btnMenu{font-size:0;gap:0;padding:8px 11px}
  #btnMenu svg{width:16px;height:16px}

  /* O menu solta da borda direita e vira uma faixa: com 250px fixos ele
     encostava no canto e a sombra sumia. */
  .menu-solto{position:fixed;left:12px;right:12px;width:auto;top:auto}

  /* Aqui morava um `.rolo .card{flex:0 0 158px}`, dentro do bloco que
     arruma o TOPO em telas pequenas. A largura do cartao nao tem nada que
     ver com o cabecalho, e escondida aqui ela deixava de acompanhar a
     grade: a 700px o cartao da faixa media 158px e o da grade, 211. Quem
     decide a largura agora e `--colunas`, num lugar so, no alto da folha. */
}

/* Agenda de enderecos no checkout: escolher o de sempre em vez de digitar. */
.agenda-enderecos{display:grid;gap:8px;margin-bottom:16px}
.endereco-opcao{
  display:block;width:100%;text-align:left;font-family:var(--ui);cursor:pointer;
  background:var(--superficie);border:1px solid var(--linha);border-radius:var(--raio);
  padding:12px 14px;color:var(--texto-2);
}
.endereco-opcao strong{display:block;font-size:13.5px;font-weight:500;color:var(--texto)}
.endereco-opcao span{display:block;font-size:12.5px;margin-top:2px}
.endereco-opcao:hover{border-color:var(--linha-forte)}
.endereco-opcao.on{border-color:var(--marca);background:color-mix(in srgb,var(--marca) 6%,transparent)}

/* Para onde vai a entrega, no alto do carrinho. Quem já salvou endereço vê
   o endereço, e não um campo de CEP vazio pedindo o que ele já informou. */
.entrega-atual{
  display:flex;align-items:center;gap:12px;
  border:1px solid var(--linha);border-radius:var(--raio);
  background:var(--superficie);padding:12px 14px;
}
.rotulo-entrega{
  margin:0;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--texto-3);
}
.endereco-atual{margin:3px 0 0;font-size:14px;line-height:1.4}
.entrega-atual .botao-secundario{margin-left:auto;flex:none;white-space:nowrap}

/* Botão de ação sem volta: mesma forma dos outros, cor de alerta. A troca
   é só de cor porque mudar a forma faria a pessoa procurar o botão certo. */
.principal.perigosa{
  background:var(--erro);color:var(--sobre-erro);
}
.principal.perigosa:hover{filter:brightness(1.08)}

/* ── O banner do topo ──────────────────────────────────────────────────
   A arte enviada no painel, no lugar da faixa escrita. Duas artes por
   banner: o `<picture>` do JS entrega a deitada no computador e a quadrada
   no celular, e cada aparelho baixa SO a sua.

   A altura e reservada pela proporcao da imagem, e nao deixada para depois
   que ela chegar: sem isso a pagina inteira pula para baixo no meio do
   carregamento, e o dedo que ia tocar num produto acerta outro. */
.banner-topo{
  position:relative;overflow:hidden;border-radius:14px;margin-bottom:var(--respiro-4);
  border:1px solid var(--linha);box-shadow:var(--sombra-faixa);
}
/* ── A caixa do banner do MEIO ─────────────────────────────────────────
   Repetida de proposito, e nao herdada de uma classe comum.

   Na 1.269.0 eu tinha juntado as duas numa `.caixa-de-arte` para nao
   escrever a caixa duas vezes. O lojista pediu para NAO mexer no banner do
   topo, e tinha razao: ele nao pediu aquilo, e o topo e a primeira coisa que
   a loja mostra. Regra compartilhada faz um ajuste no meio chegar no topo
   sem ninguem perceber.

   Cinco propriedades repetidas custam menos que isso. Se um dia o topo e o
   meio precisarem mudar juntos, a repeticao aparece e alguem decide de novo
   — e nao o contrario. */
.banner-meio{
  position:relative;overflow:hidden;border-radius:14px;margin-bottom:var(--respiro-4);
  border:1px solid var(--linha);box-shadow:var(--sombra-faixa);
}
/* ── A proporcao do MEIO, agora com instrucao propria ──────────────────
   O painel pede 1920x250 para este lugar — banner de faixa, contra o
   1600x500 do topo. Referencia de mercado: plataformas de e-commerce
   recomendam o banner grande da home em 1920x600 e o de faixa em 1920x250.
   Escrever a proporcao aqui deixou de ser um segundo numero solto: ela
   corresponde a uma medida que o painel INSTRUI, e ha prova cruzando os
   dois. Antes disto o CSS decidia sozinho e cortava a arte. */
.banner-meio .arte-banner img{aspect-ratio:1920/250}
/* O trilho e a fila de artes lado a lado; o que se move e ele, e nao cada
   arte — assim a transicao e uma so, e nao uma por imagem. */
.trilho-banner{display:flex;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.arte-banner{
  flex:0 0 100%;display:block;width:100%;padding:0;border:0;background:none;
  cursor:pointer;font:inherit;color:inherit;
}
/* Sem destino, o banner nao e clicavel — e o cursor nao pode prometer que e. */
div.arte-banner{cursor:default}
.arte-banner picture{display:block}
.arte-banner img{
  display:block;width:100%;height:auto;
  /* A proporcao vem do CSS, e nao do arquivo: a arte deitada e 16:5 e a do
     celular e quadrada, e o navegador precisa saber disso ANTES de baixar. */
  aspect-ratio:16/5;object-fit:cover;
}
/* ── O do MEIO vai de ponta a ponta ────────────────────────────────────

   Duas tentativas minhas de deixar ele "menor" que o de cima, e as duas
   erradas:

     1.270.0  `aspect-ratio:6/1` — cortava a arte, porque o painel manda
              fazer 1600x500 px, e a conferencia do upload recusa acima de
              5:1. A proporcao que eu escolhi nao existia em lugar nenhum do
              sistema.
     1.270.2  `max-width:72%` — sobrava faixa vazia dos dois lados, e a loja
              inteira vai de ponta a ponta: a grade de produtos, os filtros,
              o banner do topo. Ele ficava encolhido no meio de uma pagina
              larga.

   Largura inteira, e proporcao herdada da instrucao. Ele fica com a mesma
   altura do de cima — mesma largura e mesma proporcao dao a mesma altura, e
   nao ha terceira saida que nao cobre pedaco da arte.

   Se um dia ele precisar ser mais baixo DE VERDADE, o caminho nao e mexer na
   caixa: e o painel instruir uma medida propria para este lugar, tipo
   1600x320 px, que e 5:1 e passa pela conferencia. Ai o lojista desenha uma
   arte de faixa, e ela chega inteira. */
@media(max-width:600px){
  .banner-topo{margin-bottom:var(--respiro-3)}
  .arte-banner img{aspect-ratio:1/1}
  /* Do meio, e numa linha propria: agrupado com o do topo, um ajuste aqui
     chegava no topo sem ninguem pedir. */
  .banner-meio{margin-bottom:var(--respiro-3)}
  /* No celular a faixa e menos comprida: 7:1 numa tela estreita viraria um
     fio. E a medida que o painel pede para este lugar, 1080x400. */
  .banner-meio .arte-banner img{aspect-ratio:1080/400}
}

/* ── As setas do carrossel ─────────────────────────────────────────────
   Para quem não quer esperar a arte virar sozinha. As bolinhas já levam a
   qualquer uma, mas exigem mirar num alvo de 8px — a seta é "a próxima", que
   é o que a pessoa quer noventa por cento das vezes.

   DISCRETAS de propósito: o banner é arte, e um controle chamativo por cima
   dela disputa a atenção com o que a loja quis mostrar. Elas ficam a 55% de
   opacidade e só ganham contorno sob o dedo ou o mouse.

   34px é menor que o alvo de 44px do balcão, e aqui isso é certo: errar a
   seta no celular vira um toque na arte, que é o comportamento normal do
   banner. Não há nada a perder no erro. Medido de 360 a 1280px: sempre
   dentro da borda e nunca por cima das bolinhas. */
.seta-banner{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:34px;height:34px;border-radius:999px;cursor:pointer;padding:0;
  display:grid;place-items:center;
  border:1px solid transparent;
  background:color-mix(in srgb,var(--preto-fixo) 34%,transparent);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  color:var(--branco-fixo);
  opacity:.55;transition:opacity .18s,border-color .18s;
}
.seta-banner:hover,.seta-banner:focus-visible{opacity:1;border-color:var(--vidro-forte)}
.seta-banner svg{width:16px;height:16px;fill:none;stroke:currentColor;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.seta-banner.antes{left:10px}
.seta-banner.depois{right:10px}

.bolinhas-banner{
  position:absolute;left:0;right:0;bottom:10px;z-index:2;
  display:flex;justify-content:center;gap:7px;
}
.bolinhas-banner button{
  width:8px;height:8px;padding:0;border-radius:999px;cursor:pointer;
  border:1px solid var(--vidro-forte);
  background:color-mix(in srgb,var(--texto) 45%,transparent);
  transition:width .2s,background .2s;
}
/* A bolinha da arte aberta vira um traco: forma, e nao so cor, para quem
   nao distingue os dois tons. */
.bolinhas-banner button[aria-selected="true"]{width:20px;background:var(--marca)}

/* ── Cartão pelo site ───────────────────────────────────────────────────
   O formulário quem desenha é o provedor, dentro de um quadro isolado. O
   que fica por nossa conta é a moldura em volta e o texto da recusa. */
.pagando{padding:20px 16px;display:grid;gap:12px}
/* Espaço para o quadro do provedor sem a tela pular quando ele carrega. */
.pagando #formularioDoCartao,.pagando #desafioDoBanco{min-height:240px}
.recusa-cartao{
  margin:0;padding:11px 13px;border-radius:10px;font-size:13.5px;line-height:1.5;
  background:var(--erro-fundo);color:var(--erro-texto);
}

/* ── A página do Clube ────────────────────────────────────────────────
   Página de venda: ela é compartilhada no WhatsApp e lida por quem ainda
   não é cliente. Por isso respira mais que o resto da loja — o catálogo é
   feito para varrer com o olho, esta é feita para ler. */
.clube-capa{text-align:center;padding:2px 0 30px;border-bottom:1px solid var(--linha)}
.clube-selo{
  display:inline-block;margin:0 0 14px;padding:6px 16px;border-radius:999px;
  background:color-mix(in srgb,var(--marca) 12%,transparent);color:var(--marca-texto);
  font-size:11px;text-transform:uppercase;letter-spacing:.14em;
}
.clube-capa h1{
  font-family:var(--marca-fonte);font-size:clamp(28px,7vw,42px);font-weight:var(--marca-peso);
  letter-spacing:-.02em;margin:0;color:var(--texto);
}
.clube-frase{margin:10px auto 0;max-width:40ch;font-size:15px;color:var(--texto-2);line-height:1.55}
.clube-preco{
  margin:22px 0 4px;font-family:var(--ui);font-size:38px;font-weight:500;
  color:var(--texto);font-variant-numeric:tabular-nums;
}
.clube-preco span{font-family:var(--ui);font-size:15px;color:var(--texto-3)}
/* O botao de assinar aparece duas vezes: no alto, para quem ja chegou
   decidido, e no fim, para quem leu a pagina inteira. O respiro embaixo e do
   segundo — encostado na borda da tela, ele parece cortado. */
.clube-assinar{max-width:340px;margin:18px auto 0}
.perguntas + .clube-assinar{margin-bottom:34px}

/* O que o membro ganha. Um por linha no celular; lado a lado quando cabe. */
.clube-ganhos{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:14px;margin:26px 0;
}
.clube-ganho{
  border:1px solid var(--linha);border-radius:var(--raio-g);padding:16px 17px;
  background:var(--superficie);
}
.clube-ganho h3{margin:0 0 6px;font-size:15px;font-weight:500;color:var(--texto)}
.clube-ganho p{margin:0;font-size:13px;color:var(--texto-2);line-height:1.55}

/* A simulação. */
.clube-conta{border-top:1px solid var(--linha);padding-top:26px;margin-bottom:26px}
.clube-conta h2,.perguntas h2{
  font-family:var(--ui);font-size:22px;font-weight:600;margin:0 0 6px;color:var(--texto);
}
.clube-ajuda{margin:0 0 16px;font-size:12.5px;color:var(--texto-3);line-height:1.55}
.clube-campos{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}
@media(max-width:520px){.clube-campos{grid-template-columns:1fr}}
.clube-campos label{display:block;font-size:12px;color:var(--texto-3);margin:0 0 6px}
.clube-campos input{
  width:100%;border:1px solid var(--linha);border-radius:var(--raio-g);
  padding:12px 13px;background:var(--superficie);color:var(--texto);
  font-family:var(--ui);font-size:15px;
}
.clube-campos input:focus{border-color:var(--marca);outline:none}

.clube-resultado{
  border:1px solid var(--linha);border-radius:var(--raio-g);
  padding:6px 16px;background:var(--superficie);
}
.clube-linha{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:11px 0;border-bottom:1px solid var(--linha);font-size:13.5px;color:var(--texto-2);
}
.clube-linha:last-of-type{border-bottom:0}
.clube-linha i{font-style:normal;font-size:11.5px;color:var(--texto-3)}
.clube-linha b{color:var(--texto);font-variant-numeric:tabular-nums;white-space:nowrap}
/* A linha do resultado é a única que muda de cor: é a resposta da pergunta
   que o bloco inteiro faz, e precisa ser lida antes do texto. */
.clube-linha.total{font-size:15px;border-top:1px solid var(--linha);border-bottom:0}
.clube-linha.total.bom b{color:var(--ok)}
.clube-linha.total.ruim b{color:var(--texto-3)}
.clube-resultado .clube-ajuda{margin:0 0 12px}

/* As dúvidas. `details` nativo: abre sem JavaScript, funciona com o teclado
   e o navegador já sabe fazer. */
/* ── As perguntas em sanfona ─────────────────────────────────────────
   Nasceu como `.clube-duvidas` e servia a uma pagina so. A pagina de
   instalar passou a usar a MESMA classe na 1.123.0 — funcionava, e era uma
   armadilha: mexer no visual das duvidas do clube mudaria a outra pagina
   junto, sem ninguem saber que ela existe.

   Nome pelo que a coisa E, e nao por onde ela nasceu. */
.perguntas{border-top:1px solid var(--linha);padding-top:26px}
.perguntas details{border-bottom:1px solid var(--linha)}
.perguntas summary{
  padding:14px 0;font-size:14px;color:var(--texto);cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
}
.perguntas summary::-webkit-details-marker{display:none}
.perguntas summary::after{content:"+";color:var(--texto-3);font-size:18px;line-height:1}
.perguntas details[open] summary::after{content:"−"}
.perguntas details p{margin:0 0 16px;font-size:13.5px;color:var(--texto-2);line-height:1.6}

/* Quem já é sócio. */
.clube-meu{margin-top:18px}
.clube-meu p{margin:0 0 10px;font-size:13.5px;color:var(--texto-2)}
.clube-meu .botao-vazado{max-width:280px;margin:8px auto 0}
.clube-alerta{
  margin:0 0 14px;padding:11px 13px;border-radius:var(--raio-g);
  background:var(--erro-fundo);color:var(--erro-texto);font-size:13px;line-height:1.5;
}

/* ══════════════════════════════════════════════════════════════════════
   A pagina "Entrega e retirada" (1.108.0)

   O que descia numa gaveta do cabecalho ate a 1.107.0. Vira pagina porque
   aquele conteudo tinha tres portas e nenhum endereco: sem URL, o atendente
   nao tem o que mandar quando chega "voces entregam aqui?" no WhatsApp.

   Coluna estreita (720px) de proposito: sao pares rotulo/valor e frases
   curtas. Na largura do catalogo, o rotulo ficaria a um palmo do numero que
   ele nomeia.
   ══════════════════════════════════════════════════════════════════════ */
/* A largura mora aqui e o cabecalho a le (`--coluna-info`): escrita duas
   vezes, a barra e a pagina discordariam no dia em que uma das duas mudasse
   — que e exatamente o desencontro que a 1.110.0 foi consertar. */
.pagina-info{max-width:var(--coluna-info);margin:0 auto;padding-bottom:40px}

.info-capa{padding:0 0 24px;border-bottom:1px solid var(--linha)}
.info-regiao{
  margin:0 0 8px;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--apoio);
}
.info-capa h1{margin:0 0 10px}
/* O estado da loja aparece aqui pelo mesmo `[data-estado-da-loja]` do topo,
   escrito pelo mesmo relogio. Quem chega por link nunca viu o cabecalho. */
.info-capa .estado-loja{margin:0}

.info-bloco{border-bottom:1px solid var(--linha);padding:22px 0}
.info-bloco:last-child{border-bottom:0}
.info-bloco h2{margin:0 0 14px;font-family:var(--ui);font-weight:600;font-size:19px}

/* Rotulo a esquerda, valor a direita: e a forma de tabela sem tabela, e o
   olho desce pela coluna dos numeros sem ler os rotulos de novo. */
.info-linhas{display:grid;gap:10px;margin:0 0 16px}
.info-linha{display:flex;align-items:baseline;justify-content:space-between;gap:18px;font-size:13.5px}
.info-linha dt{margin:0;color:var(--texto-3)}
.info-linha dd{
  margin:0;color:var(--texto);font-weight:500;text-align:right;
  font-variant-numeric:tabular-nums;
}
.info-linha dd.bom{color:var(--ok)}

.info-vazio{margin:0 0 14px;font-size:13.5px;color:var(--texto-2);line-height:1.55}
.info-vazio.ruim{color:var(--erro-texto)}
.info-endereco{margin:0 0 4px;font-size:15px;line-height:1.5;color:var(--texto)}
.info-detalhe{margin:0 0 14px;font-size:13px;color:var(--texto-2)}
/* Uma faixa de horario por linha: numa frase corrida de quatro faixas
   ninguem acha o dia de hoje. */
.info-horario{margin:0;font-size:13.5px;line-height:1.9;color:var(--texto-2)}

/* A acao do bloco. Mesma forma dos botoes do topo — pilula vazada — porque
   é a mesma familia de acao: leva para outro lugar, nao confirma nada. */
.info-acao{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--linha-forte);background:transparent;color:var(--texto);
  border-radius:999px;padding:10px 18px;
  font-size:12.5px;font-family:var(--ui);cursor:pointer;text-decoration:none;
  transition:border-color .18s,color .18s;
}
.info-acao:hover{border-color:var(--marca);color:var(--marca-texto)}
.info-acao svg{
  width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}

/* ══════════════════════════════════════════════════════════════════════
   O cabecalho das paginas internas (1.109.0)

   Conta, clube e entrega escondem o cabecalho da vitrine. Ate a 1.108.2
   nao ganhavam nada em troca: sobrava um "voltar" solto na margem da
   janela, com o conteudo numa coluna centralizada a 400px dali — e a
   marca sumia, inclusive para quem abrisse a pagina `#entrega` recebida
   por link, que nunca viu a loja.

   Tres pecas, e so tres: marca (que E a volta), e carrinho. Sem busca e
   sem faixa de contexto: escolher endereco nao e decisao destas telas.

   Desde a 1.110.0 ele e a MESMA barra da vitrine: a cor da marca, com a
   tinta calculada por cima. Dois cabecalhos com dois fundos diferentes
   fariam a loja mudar de cara ao abrir "meus pedidos" — e e a mesma loja.

   Duas coisas mudaram junto, porque a cor as tornou visiveis:

   1. A LARGURA. A barra usava `.container` (1180px) sobre uma pagina de
      720px: a logo ficava 200px a esquerda do titulo que ela encabeca, e
      sobravam 700px de nada no meio. Em preto sobre preto ninguem via; em
      cor, e uma faixa. Agora a barra acompanha a coluna da area aberta,
      pelo `data-area` que `mostrarSecaoDaLoja` escreve.

   2. A TRILHA subiu para a mesma linha. Ela dizia "Loja › Entrega e
      retirada" a 40px de um `<h1>` que dizia "Entrega e retirada" — o
      mesmo texto duas vezes, em duas alturas de cabecalho. Na linha da
      marca ela ocupa o vao que sobrava e o cabecalho passa de ~100px para
      um so. */
.topo-interno{
  position:sticky;top:0;z-index:10;
  background:var(--topo-fundo);
  backdrop-filter:saturate(150%) blur(18px);
  -webkit-backdrop-filter:saturate(150%) blur(18px);
  border-bottom:1px solid color-mix(in srgb,var(--topo-tinta) 22%,transparent);
}
.topo-interno-linha{
  display:flex;align-items:center;gap:12px;min-height:58px;
  color:var(--topo-tinta);
}
/* A coluna de cada area. `entrega` e a unica estreita hoje; conta e clube
   usam a largura do catalogo, que e o padrao herdado de `.container`. */
.topo-interno[data-area="entrega"] .container{
  max-width:calc(var(--coluna-info) + var(--beirada) * 2);
}

/* A marca e o botao. Nao um link ao lado dela: clicar na logo para voltar e
   o gesto que a maioria ja tem, e a seta existe para quem nao tem. */
.voltar-marca{
  display:inline-flex;align-items:center;gap:10px;min-width:0;flex:0 1 auto;
  background:transparent;border:0;padding:0;color:inherit;cursor:pointer;
}
.voltar-marca .seta{
  width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;
  border:1px solid color-mix(in srgb,var(--topo-tinta) 38%,transparent);
  transition:border-color .18s,background .18s;
}
.voltar-marca:hover .seta{
  border-color:var(--topo-realce);
  background:color-mix(in srgb,var(--topo-realce) 10%,transparent);
}
.voltar-marca svg{
  width:15px;height:15px;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
}
.voltar-marca img{max-height:34px;width:auto;border-radius:var(--raio);flex:none}
.voltar-marca .marca-nome{
  font-family:var(--ui);font-weight:600;font-size:19px;line-height:1.1;
  letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* O carrinho na ponta oposta, como na vitrine: mesma peca, mesmo lugar,
   para a mao nao precisar procurar de novo ao trocar de tela. As cores sao
   as mesmas da barra da vitrine, pelo mesmo motivo — sobre a marca so a
   tinta dela se le. */
.topo-interno .carrinho-topo{margin-left:auto}

/* ── A trilha ──────────────────────────────────────────────────────────
   Onde a pessoa esta. Ela nao substitui a volta — quem quer sair usa a
   marca, que e maior e vem antes. Ela existe para dizer QUE PAGINA e esta,
   coisa que o titulo la embaixo so responde depois de a pessoa rolar.

   Desde a 1.110.0 ela mora na MESMA linha da marca, separada por um filete.
   Numa linha propria abaixo ela repetia o `<h1>` a 40px de distancia e
   custava a segunda altura do cabecalho.

   Ela e quem encolhe quando a largura acaba: a marca e o carrinho tem
   tamanho fixo, e um titulo cortado com reticencias ainda diz onde a pessoa
   esta. */
.caminho{
  display:flex;align-items:center;gap:8px;min-width:0;flex:1 1 auto;
  font-size:11.5px;color:color-mix(in srgb,var(--topo-tinta) 62%,transparent);
}
.caminho::before{
  content:"";width:1px;height:16px;flex:none;
  background:color-mix(in srgb,var(--topo-tinta) 24%,transparent);
}
.caminho-loja{
  background:transparent;border:0;padding:0;cursor:pointer;flex:none;
  font:inherit;color:inherit;transition:color .18s;
}
.caminho-loja:hover{color:var(--topo-realce)}
.caminho span{color:color-mix(in srgb,var(--topo-tinta) 40%,transparent);flex:none}
.caminho b{
  color:var(--topo-tinta);font-weight:500;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

@media(max-width:720px){
  .topo-interno-linha{min-height:54px;gap:10px}
  .voltar-marca .marca-nome{font-size:17px}
  .voltar-marca img{max-height:30px}
  /* No celular a trilha perde o "Loja ›" e fica so com o nome da pagina: o
     caminho de volta ja e a seta ao lado, e duas palavras cortadas pela
     metade cada valem menos do que uma inteira. */
  .caminho{font-size:11px}
  .caminho-loja,.caminho span{display:none}
}

/* ══════════════════════════════════════════════════════════════════════
   Instalar na tela do celular

   Mesmo molde da página do Clube, e de propósito: as duas são páginas de
   convencimento que abrem do menu, no lugar da vitrine. Um desenho novo
   faria a loja parecer dois produtos.
   ══════════════════════════════════════════════════════════════════════ */
.app-capa{text-align:center;padding:8px 0 30px;border-bottom:1px solid var(--linha)}
.app-icone{
  width:72px;height:72px;margin:0 auto 16px;border-radius:16px;overflow:hidden;
  background:var(--marca-relevo);border:1px solid var(--linha);box-shadow:var(--sombra);
}
.app-icone img{width:100%;height:100%;object-fit:cover;display:block}
.app-selo{
  margin:0 0 8px;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--apoio);
}
.app-capa h1{
  margin:0;font-family:var(--marca-fonte);font-weight:var(--marca-peso);font-size:30px;letter-spacing:-.015em;
}
.app-frase{margin:10px auto 0;max-width:40ch;font-size:15px;color:var(--texto-2);line-height:1.55}
.app-capa .botao-cheio{max-width:320px;margin-left:auto;margin-right:auto}
.app-nota{margin:12px 0 0;font-size:12px;color:var(--texto-3)}

.app-ganhos{display:grid;gap:12px;padding:26px 0}
.app-ganho{
  background:var(--superficie);border:1px solid var(--linha);
  border-radius:var(--raio-g);padding:16px 18px;
}
.app-ganho h3{margin:0 0 6px;font-size:15px;font-weight:500;color:var(--texto)}
.app-ganho p{margin:0;font-size:13px;color:var(--texto-2);line-height:1.55}

/* Os passos do iPhone. Alinhados à esquerda mesmo dentro da capa centrada:
   instrução numerada que se lê pelo meio é instrução que se perde. */
.passos-instalar{display:grid;gap:14px;text-align:left;max-width:340px;margin:20px auto 0}
.passo-instalar{display:flex;align-items:flex-start;gap:12px;font-size:13.5px;line-height:1.55}
.passo-instalar i{
  width:24px;height:24px;flex:none;border-radius:50%;font-style:normal;font-size:12px;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--marca) 18%,transparent);color:var(--marca-texto);
}

/* ── O QR que atravessa do computador para o celular ──────────────────
   A loja se instala no celular. Quem abre esta página num computador não
   tem o que instalar — o código leva a loja para onde a compra acontece.

   O fundo é branco fixo, e não a superfície do tema: leitor de código
   precisa de contraste, e QR escuro sobre fundo escuro não é lido. Mesma
   razão do `--fundo-do-qr` no tema. */
.qr-da-loja{margin:22px auto 0;max-width:260px}
.qr-da-loja img{
  width:180px;height:180px;display:block;margin:0 auto;
  background:var(--fundo-do-qr);padding:10px;border-radius:10px;
}
.qr-da-loja .app-nota{margin:12px 0 0}

/* ── As fitas de filtro (1.241.0) ────────────────────────────────────────
   Na direita da linha "Whisky · 7 itens", que ate a 1.240 era espaco vazio.
   Uma faixa propria seria a TERCEIRA fileira de botao empilhada — e foi
   exatamente isso que a 1.236.0 resolveu tirando a segunda.

   O desenho e diferente de proposito. A fita de cima navega e gruda no topo;
   esta peneira o que ja esta na tela e rola junto. Iguais, a peneira seria
   lida como mais um nivel de categoria. */
.fitas-de-filtro{
  display:flex;gap:var(--respiro-2);flex-wrap:wrap;
  /* ── Colada no titulo, e nao empurrada para a direita (1.245.0) ────────
     A 1.241 punha `margin-left:auto` aqui, para a fita ocupar a sobra da
     linha em vez de altura. A sobra existe: num monitor largo sao quase mil
     pixels entre o "Resultados · 1 item" e os botoes, e ali eles ficam longe
     demais dos produtos que filtram para que o olho ligue uma coisa na
     outra. Leem-se como controles orfaos flutuando no canto.

     Alinhar a direita funciona para UM controle — o "Ordenar por" que o
     e-commerce poe no canto. Quatro pilulas soltas nao tem peso para ancorar
     aquele lado da tela.

     Coladas no titulo, a linha vira uma frase so: o que esta sendo mostrado,
     e como estreitar. Continua sem gastar altura nenhuma. */
}
.fita-de-filtro{display:flex;gap:4px;flex-wrap:wrap}
.fita-de-filtro button{
  border:1px solid var(--linha);background:transparent;color:var(--texto-3);
  border-radius:999px;padding:5px 11px;font-size:12px;cursor:pointer;
  font-family:inherit;white-space:nowrap;
  transition:color .18s,border-color .18s,background .18s;
}
.fita-de-filtro button:hover{color:var(--texto);border-color:var(--linha-forte)}
.fita-de-filtro button[aria-pressed="true"]{
  border-color:var(--marca);color:var(--marca-texto);
  background:color-mix(in srgb,var(--marca) 12%,transparent);
}

/* No celular a linha nao cabe: o titulo, a contagem e quatro botoes numa
   largura de 360px espremeriam o titulo a duas letras. A fita desce para a
   propria linha, alinhada a esquerda — continua sendo UMA linha a mais so
   onde ha filtro, e nao em toda a loja. */
@media (max-width:520px){
  .sec{flex-wrap:wrap}
  .fitas-de-filtro{width:100%;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .fitas-de-filtro::-webkit-scrollbar{display:none}
  .fita-de-filtro{flex-wrap:nowrap}
}