/* =========================================================================
   Catálogo digital Vaeso 026 — folha de estilo.

   Segue o design system da marca: verde como âncora, off-white como única
   superfície clara, tipografia carregando o peso visual, espaço generoso.
   Sem gradiente, sem vidro, sem sombra decorativa — a foto do produto é que
   dá profundidade.

   Escrito primeiro para o CELULAR. As media queries só acrescentam colunas.
   ========================================================================= */

@font-face { font-family:'Neue Haas Grotesk'; src:url('./fonts/NHaasGroteskTXPro-55Rg.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Neue Haas Grotesk'; src:url('./fonts/NHaasGroteskTXPro-65Md.ttf') format('truetype'); font-weight:500; font-display:swap; }
@font-face { font-family:'Neue Haas Grotesk'; src:url('./fonts/NHaasGroteskTXPro-75Bd.ttf') format('truetype'); font-weight:700; font-display:swap; }

:root{
  --verde:#375249;  --off:#F5F0E8;  --off2:#EAE3D6;  --preto:#1A1A1A;
  --tiffany:#A8D8D0; --rosa:#F2C4C4;
  /* o Rosa da marca escurecido até o peso do Verde — o aviso de esgotado */
  --vermelho:#9E3B34;
  --fio:rgba(26,26,26,.10);
  --fio-off:rgba(245,240,232,.16);
  --m:20px;                       /* margem lateral única, em toda tela */
  --topo:60px;                    /* altura da barra */
  --mola:cubic-bezier(.2,.7,.2,1);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--off); color:var(--preto);
  font-family:'Neue Haas Grotesk', -apple-system, system-ui, sans-serif;
  font-weight:500; font-size:16px; line-height:1.45;
  letter-spacing:-.01em; overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

/* ---------------------------------------------------------- barra fixa --- */
.barra{
  position:fixed; inset:0 0 auto 0; height:var(--topo); z-index:40;
  display:flex; align-items:center; gap:14px; padding:0 var(--m);
  background:var(--verde); color:var(--off);
}
.barra .marca{ height:19px; width:auto; }
.barra .voltar{ display:none; margin-left:-6px; padding:6px; }
body.interna .barra .voltar{ display:block; }
.barra .fim{ margin-left:auto; display:flex; align-items:center; gap:4px; }
.barra button{ padding:9px; border-radius:50%; display:grid; place-items:center; }
.barra button:active{ background:rgba(245,240,232,.14); }
.ico{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round; }

main{ padding-top:var(--topo); min-height:100vh; }

/* -------------------------------------------------------------- menu ----- */
.veu{
  position:fixed; inset:0; z-index:45; background:rgba(26,26,26,.42);
  opacity:0; pointer-events:none; transition:opacity .28s var(--mola);
}
.veu.on{ opacity:1; pointer-events:auto; }
.menu{
  position:fixed; z-index:50; top:0; right:0; bottom:0; width:min(84vw,360px);
  background:var(--verde); color:var(--off); overflow-y:auto;
  transform:translateX(100%); transition:transform .32s var(--mola);
  padding:0 0 40px; -webkit-overflow-scrolling:touch;
}
.menu.on{ transform:none; }
.menu .cab{
  height:var(--topo); display:flex; align-items:center;
  justify-content:space-between; padding:0 var(--m);
  border-bottom:1px solid var(--fio-off);
}
.menu .cab span{ font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  opacity:.62; }
.menu .grupo{ padding:26px var(--m) 0; }
.menu .grupo h3{
  margin:0 0 2px; font-size:11px; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; opacity:.55;
}
.menu .grupo p{ margin:0 0 12px; font-size:13px; opacity:.6; font-weight:400; }
.menu a{
  display:flex; align-items:baseline; gap:10px; padding:11px 0;
  border-top:1px solid var(--fio-off); font-size:17px;
}
.menu a b{ font-weight:500; }
.menu a i{ font-style:normal; font-size:12px; opacity:.55; margin-left:auto; }

/* -------------------------------------------------------------- home ----- */
.capa{
  position:relative; background:var(--verde); color:var(--off);
  padding:44px var(--m) 40px; overflow:hidden;
}
.capa .eyebrow{ font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  opacity:.62; margin-bottom:22px; }
.capa h1{
  margin:0; font-weight:700; font-size:clamp(46px,15vw,86px); line-height:.92;
  letter-spacing:-.035em;
}
.capa .logo{ height:clamp(30px,9vw,52px); width:auto; margin:14px 0 0; }
.capa p{ margin:22px 0 0; max-width:30ch; font-size:15px; opacity:.78;
  font-weight:400; }
.capa .num{
  margin-top:30px; padding-top:16px; border-top:1px solid var(--fio-off);
  display:flex; gap:26px; font-size:13px; opacity:.72;
}
.capa .num b{ display:block; font-size:26px; font-weight:700; opacity:1;
  letter-spacing:-.02em; }

.bloco{ padding:38px var(--m) 4px; }
.bloco h2{
  margin:0; font-size:11px; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(26,26,26,.5);
}
.bloco .chamada{ margin:4px 0 18px; font-size:15px; font-weight:400;
  color:rgba(26,26,26,.62); }

/* ⭐⭐ AS COLUNAS VÊM DO DADO (Iury, 05/ago), categoria por categoria. Ele foi
   olhando uma a uma no celular: o hermético tem 1 destaque + 3 cores, e em duas
   colunas sobrava uma peça sozinha na terceira linha; em três, a linha fecha.
   O `--col` chega no `style` do elemento, então uma categoria pode pedir 3 e a
   página seguinte da mesma categoria pedir 2 (é o caso da marmita). */
.grade{ display:grid; grid-template-columns:repeat(var(--col,2),1fr); gap:12px; }
.cartao{
  display:block; background:#FDFCF8; border:1px solid var(--fio);
  border-radius:16px; overflow:hidden;
  transition:transform .22s var(--mola);
}
.cartao:active{ transform:scale(.985); }
/* 🔴 A ALTURA É DO CONTAINER, NUNCA DO CONTEÚDO. Com a foto em `height:100%`
   dentro de uma caixa cuja altura vem do `aspect-ratio`, a conta fica circular
   e o navegador desempata pelo conteúdo: os cartões nasciam com 199, 225, 210px
   — cada um de uma altura, numa grade que só funciona se todos forem iguais.
   Tirando a foto do fluxo (`position:absolute`), quem manda é a proporção. */
.cartao .foto{
  position:relative; aspect-ratio:1; overflow:hidden; background:#FDFCF8;
}
.cartao .foto img{
  position:absolute; inset:14px; width:calc(100% - 28px);
  height:calc(100% - 28px); object-fit:contain;
}
.cartao .foto.cheia img{ inset:0; width:100%; height:100%; object-fit:cover; }
/* ⭐⭐ A FOTO AMBIENTADA GANHOU MOLDURA (Iury, 05/ago): *"você colocou elas
   chapadas assim (…) se você olhar no impresso está dentro de um retângulo com
   uma margem, isso dá um respiro interessante pro produto"*. No impresso a cena
   nunca encosta na borda do cartão — o branco em volta é o que faz a foto ler
   como PEÇA APRESENTADA e não como fundo de tela. */
.cartao .foto.cheia.moldada{ padding:10px; }
.cartao .foto.cheia.moldada img{ inset:10px; width:calc(100% - 20px);
  height:calc(100% - 20px); border-radius:10px; }

/* ⭐⭐ O CARTÃO DE DESTAQUE — o primeiro da página, com a cena (04/ago).
   Atravessa a grade inteira e é mais deitado que os outros, que é a proporção
   em que as cenas foram fotografadas. Reproduz na tela a mesma hierarquia da
   página impressa: uma peça em uso, e as outras cores como variação dela. */
.cartao.heroi{ grid-column:1 / -1; }
.cartao.heroi .foto{ aspect-ratio:4/3; }
.cartao.heroi .txt b{ font-size:17px; }
/* a cena sem código não tem rodapé — não representa item que se peça */
.cartao.heroi.so{ pointer-events:none; }
.cartao .txt{ padding:11px 14px 14px; border-top:1px solid var(--fio); }
.cartao .txt b{ display:block; font-weight:500; font-size:15px;
  letter-spacing:-.015em; }
.cartao .txt span{ display:block; margin-top:3px; font-size:12px;
  color:rgba(26,26,26,.55); font-weight:400; }

/* ⭐⭐ O SKU É UMA PÍLULA, COMO NO IMPRESSO (Iury, 05/ago): *"o SKU você colocou
   num padrão diferente e aí tirou bastante o peso do SKU"*. Ele estava como
   texto cinza de 12px sob o nome — lia como legenda. No impresso é uma pílula
   verde com "Cód" pequeno e o código em negrito, e é o elemento que o lojista
   procura primeiro na página. Mesmos valores do `_template.html`: `inline-flex`,
   `baseline`, gap 8, raio total. */
.cartao .txt .sku{
  display:inline-flex; align-items:baseline; gap:7px; margin-top:8px;
  background:var(--verde); color:var(--off); padding:6px 12px;
  border-radius:999px;
}
.cartao .txt .sku .k{ font-style:normal; font-size:8.5px; letter-spacing:.14em;
  text-transform:uppercase; opacity:.66; }
.cartao .txt .sku .c{ font-size:12px; font-weight:700; letter-spacing:.01em; }
/* no cartão de destaque a pílula acompanha o corpo maior do nome */
.cartao.heroi .txt .sku{ padding:7px 14px; }
.cartao.heroi .txt .sku .c{ font-size:13px; }

/* o preço — só o modo pedido desenha (a vitrine do cliente não fala de preço) */
.cartao .txt .preco{ display:block; margin-top:7px; font-size:14px;
  font-weight:700; color:var(--verde); letter-spacing:-.01em; }
.peca .preco{ margin-top:14px; font-size:22px; font-weight:700;
  color:var(--verde); letter-spacing:-.02em; }

/* ⭐ O ATALHO DA HOME: nome EM CIMA da foto, maior, até duas linhas (Iury,
   06/ago) — com a altura das DUAS linhas reservada, senão o card de nome curto
   desce a foto e a linha desalinha (a mesma armadilha do seletor da Ékos). */
/* o título do atalho: em cima, uma linha, minimalista, SEM fio até a foto
   (Iury, 06/ago — a moldura da foto já dá o respiro entre os dois).
   15px porque "Caixa Organizadora" a 16 quebrava em duas na célula de 375. */
.atalho .txt{ border-top:0; padding:14px 6px 2px; text-align:center; }
.atalho .txt b{ font-size:15px; font-weight:500; letter-spacing:-.015em; }

/* 🔴 EM CÉLULA ESTREITA A PÍLULA PERDE O RÓTULO, NÃO O PESO. MEDIDO: com 3
   colunas em 390px a célula tem 109px e sobram 81 para a pílula, que pede 106 —
   25px a menos. Some o "Cód" e o código sozinho cabe com folga, continuando
   verde e em negrito, que é o que ele pediu de volta.
   ⭐ A CONDIÇÃO É A LARGURA DA CÉLULA, não o número de colunas: as mesmas 3
   colunas num tablet dão 200px de célula, e ali o rótulo cabe. Uma regra presa
   ao `--col` esconderia o "Cód" numa tela onde ele sobra. */
.cartao{ container-type:inline-size; }
/* 🔴 O CASO DE PIOR AJUSTE É O HERMÉTICO, não a média: `PHD15001` tem 8
   caracteres e é o código mais longo do catálogo. Com padding 10 e corpo 12 ele
   ainda passava 2px da célula — dimensionar pelo código médio deixa justamente
   a categoria que ele mandou pôr em 3 colunas de fora. */
@container (max-width:132px){
  .cartao .txt .sku{ padding:5px 9px; gap:0; }
  .cartao .txt .sku .k{ display:none; }
  .cartao .txt .sku .c{ font-size:11.5px; }
  .cartao .txt b{ font-size:14px; }
}

/* ⭐ CARTÃO MAIS BAIXO onde ele pediu (pote Vaeso): *"pode manter de dois em dois
   mas só diminuir a altura dos cards, de todos eles que ficaram muito grandes"*.
   Mexe na PROPORÇÃO da foto, não na altura do cartão — a altura vem do
   `aspect-ratio`, e forçar `height` traria de volta a conta circular que já
   deixou os cartões com alturas diferentes. */
.cartaobaixo .grade .cartao .foto{ aspect-ratio:4/3; }
/* ⭐ E MAIS ALTO onde a peça estava sendo cortada (kids e Ékos): a cena delas é
   mais vertical que as outras, e no 4/3 do destaque a garrafa perdia a base. */
.cenaalta .cartao.heroi .foto{ aspect-ratio:1; }

/* --------------------------------------------------------- categoria ----- */
.cena{
  position:relative; margin-bottom:6px; background:var(--verde);
  aspect-ratio:4/5; max-height:74vh; overflow:hidden;
}
.cena img{ width:100%; height:100%; object-fit:cover; }
.cena .veu2{
  position:absolute; inset:0 0 auto 0; height:62%;
  background:linear-gradient(to bottom, rgba(18,18,18,.5), rgba(18,18,18,0));
}
.cena .frase{
  position:absolute; left:var(--m); right:var(--m); top:26px; margin:0;
  color:var(--off); font-weight:500; font-size:clamp(26px,7.6vw,40px);
  line-height:1.06; letter-spacing:-.03em; max-width:16ch;
}

.tit{ padding:30px var(--m) 0; }
.tit .linha{ font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(26,26,26,.5); }
.tit h1{ margin:6px 0 0; font-size:clamp(30px,8.6vw,44px); font-weight:700;
  letter-spacing:-.03em; line-height:1; }
.tit p{ margin:12px 0 0; font-size:15px; font-weight:400;
  color:rgba(26,26,26,.66); max-width:44ch; }

.tamanho{ padding:34px var(--m) 0; }
.tamanho > h2{
  margin:0 0 14px; font-size:26px; font-weight:700; letter-spacing:-.025em;
}
/* a ficha técnica: rótulo em cima, valor embaixo, dois por linha */
.ficha{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--fio); border:1px solid var(--fio); border-radius:14px;
  overflow:hidden; margin-bottom:18px;
}
.ficha div{ background:var(--tiffany); padding:11px 14px; }
/* 🔴 NÚMERO ÍMPAR DE CAMPOS DEIXAVA UM BURACO. A ficha é uma grade de 2 colunas
   com o fio feito de `gap` sobre fundo — com 3 campos, a 4ª célula não existe e
   o fundo cinza aparecia como um retângulo vazio ao lado de "Caixa master",
   lendo como dado que faltou carregar. O último campo passa a ocupar a linha. */
.ficha div:last-child:nth-child(odd){ grid-column:1 / -1; }
.ficha dt{ font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(26,26,26,.5); margin:0; }
.ficha dd{ margin:2px 0 0; font-size:16px; font-weight:700;
  letter-spacing:-.02em; }

/* ⭐⭐⭐ O CARD DE SPECS, IGUAL AO IMPRESSO (Iury, 05/ago: *"as ilustrações vieram
   em um card separado, diferente do catálogo impresso"*). Na folha a ilustração
   é o PRIMEIRO BLOCO DE DENTRO do card, não um cartão vizinho: arte à esquerda,
   fio vertical, dados empilhados à direita e alinhados à direita.
   🔴 O FIO É O MESMO DAS COTAS — `rgba(55,82,73,.22)`, 1px. Decisão dele em
   31/jul: com espessuras ou cores diferentes, as duas linguagens de linha brigam
   dentro do mesmo card. Aqui vale igual.
   🔴 O SVG vem pronto do `_padrao.desenho_medidas`, então tela e folha desenham
   a MESMA peça a partir das MESMAS medidas — não há um desenho "para a web". */
.specs{
  display:flex; align-items:stretch; overflow:hidden; margin-bottom:18px;
  background:var(--tiffany); border:1px solid rgba(55,82,73,.22);
  border-radius:14px;
}
.specs .des{
  flex:none; display:flex; align-items:center; justify-content:center;
  padding:8px 10px; color:var(--verde);
  border-right:1px solid rgba(55,82,73,.22);
}
.specs .des svg{ display:block; width:126px; height:auto; overflow:visible; }
/* as cotas herdam o fio do card, como no impresso */
.specs .des .persp .cl{ stroke:rgba(55,82,73,.22); stroke-width:1; }
.specs .des .persp .ct{ fill:var(--verde); stroke:none; font-weight:600;
  font-size:8.5px; letter-spacing:.02em; text-anchor:middle; }
.specs .dados{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column;
  justify-content:center; }
.specs .dados .it{ flex:1; display:flex; flex-direction:column;
  justify-content:center; padding:9px 14px; text-align:right; }
.specs .dados .it + .it{ border-top:1px solid rgba(55,82,73,.22); }
.specs .it .a{ font-weight:500; font-size:8.5px; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(26,50,44,.62); }
.specs .it .b{ font-weight:700; font-size:15px; letter-spacing:-.01em;
  color:var(--verde); margin-top:3px; }
/* 🔴 SEM ILUSTRAÇÃO os dados voltam a ser LINHA COM QUEBRA, não uma coluna alta —
   é o `:not(.comdesenho)` do impresso. Com 4 campos empilhados o card viraria uma
   torre de 200px onde deviam caber duas linhas. */
.specs:not(.comdesenho) .dados{ flex-flow:row wrap; }
.specs:not(.comdesenho) .dados .it{ flex:1 1 auto; text-align:left; }
.specs:not(.comdesenho) .dados .it + .it{ border-top:0;
  border-left:1px solid rgba(55,82,73,.22); }
/* no celular mais estreito a arte encolhe em vez de empurrar os dados para fora:
   126px de desenho + 2 colunas de dados não cabem em 320px */
@media (max-width:359px){
  .specs .des{ padding:6px; }
  .specs .des svg{ width:98px; }
}

/* o que vem dentro do kit infantil */
.contem{ margin-top:16px; }
.contem .rot{ font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(26,26,26,.5); margin-bottom:8px; }
.contem .pc{
  display:flex; align-items:center; gap:14px; padding:10px 14px;
  background:#FDFCF8; border:1px solid var(--fio); border-radius:14px;
  margin-bottom:8px;
}
/* 🔴 A MINIATURA É UMA CAIXA, NUNCA O CONTEÚDO. `max-height:100%` dentro de
   grid não tem referência de altura (a linha implícita é `auto`) e o navegador
   IGNORA o teto: toda foto vertical renderizava 46×94 e atravessava o cartão
   de baixo. Mesma lição dos cartões: imagem fora do fluxo. O fundo off dá
   contorno à peça clara — a garrafa rosé sumia no branco (Iury, 06/ago). */
.contem .pc .th{ width:46px; height:46px; flex:none; position:relative;
  background:var(--off); border-radius:10px; overflow:hidden; }
.contem .pc .th img{ position:absolute; inset:4px; width:calc(100% - 8px);
  height:calc(100% - 8px); object-fit:contain; }
.contem .pc .nm{ min-width:0; }
.contem .pc .nm b{ display:block; font-weight:500; font-size:15px; }
.contem .pc .nm span{ font-size:12px; color:rgba(26,26,26,.55); font-weight:400; }
.contem .pc .sk{ margin-left:auto; font-size:13px; font-weight:700;
  color:var(--verde); letter-spacing:.01em; }

/* ------------------------------------------------------------- ficha ----- */
.peca{ padding:0 0 40px; }
/* 🔴🔴 A FOTO ESTAVA ESTOURANDO A TELA (Iury, 05/ago: *"quando abro um produto
   ele expande, está ocupando mais que 100% de tela, até cortando"*). MEDIDO em
   390px: a caixa saía com **390 × 602** em vez dos 390 × 390 que o
   `aspect-ratio:1` promete.
   É a MESMA armadilha já registrada nos cartões: imagem no fluxo com
   `max-height:100%` dentro de caixa cuja altura vem do `aspect-ratio` é conta
   circular, e o navegador desempata pelo CONTEÚDO. Como o `body` tem
   `overflow-x:hidden`, nada disso aparecia como barra de rolagem — só como
   conteúdo cortado, que é exatamente o sintoma difícil de nomear.
   O conserto é o mesmo de lá: tirar a imagem do fluxo. */
.peca .grande{
  position:relative; background:#FDFCF8; aspect-ratio:1;
  border-bottom:1px solid var(--fio); overflow:hidden;
}
.peca .grande img{
  position:absolute; inset:26px; width:calc(100% - 52px);
  height:calc(100% - 52px); max-width:none; object-fit:contain;
}
.peca .info{ padding:24px var(--m) 0; }
.peca .info .de{ font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(26,26,26,.5); }
.peca .info h1{ margin:8px 0 0; font-size:clamp(26px,7.4vw,36px);
  font-weight:700; letter-spacing:-.03em; line-height:1.05; }
.cod{
  display:inline-flex; align-items:baseline; gap:9px; margin-top:16px;
  background:var(--verde); color:var(--off); padding:9px 17px;
  border-radius:999px;
}
.cod i{ font-style:normal; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; opacity:.66; }
.cod b{ font-size:17px; font-weight:700; letter-spacing:.01em; }
.cenafoto{ margin-top:24px; border-radius:16px; overflow:hidden;
  border:1px solid var(--fio); }

/* a pílula da cor, com a cor medida na própria foto */
.corpin{
  display:inline-flex; align-items:center; gap:9px; margin-top:14px;
  padding:7px 15px; border-radius:999px; font-size:14px; font-weight:500;
  background:var(--cor,var(--off2)); color:var(--off);
}
.corpin.clara{ color:var(--preto); box-shadow:inset 0 0 0 1px rgba(26,26,26,.18); }

/* ------------------------------------------------------------- busca ----- */
.busca{ padding:26px var(--m) 40px; }
.busca .campo{
  display:flex; align-items:center; gap:11px; background:#FDFCF8;
  border:1px solid var(--fio); border-radius:999px; padding:13px 18px;
}
.busca input{
  flex:1; min-width:0; border:0; background:none; font:inherit; font-size:16px;
  outline:none;
}
.busca input::placeholder{ color:rgba(26,26,26,.4); }
.busca .resumo{ margin:20px 0 12px; font-size:13px; font-weight:400;
  color:rgba(26,26,26,.55); }
.lista{ display:flex; flex-direction:column; gap:1px; background:var(--fio);
  border:1px solid var(--fio); border-radius:14px; overflow:hidden; }
.lista a{ display:flex; align-items:center; gap:14px; padding:11px 14px;
  background:#FDFCF8; }
.lista .th{ width:46px; height:46px; flex:none; position:relative;
  background:var(--off); border-radius:10px; overflow:hidden; }
.lista .th img{ position:absolute; inset:4px; width:calc(100% - 8px);
  height:calc(100% - 8px); object-fit:contain; }
.lista .nm{ min-width:0; }
.lista .nm b{ display:block; font-weight:500; font-size:15px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lista .nm span{ font-size:12px; color:rgba(26,26,26,.55); font-weight:400; }
.lista .sk{ margin-left:auto; font-size:13px; font-weight:700;
  color:var(--verde); letter-spacing:.01em; }

.vazio{ padding:40px 0; text-align:center; color:rgba(26,26,26,.5);
  font-weight:400; }

/* ------------------------------------------------------------- rodapé ---- */
.rodape{
  margin-top:46px; padding:34px var(--m) 40px; background:var(--verde);
  color:var(--off);
}
.rodape img{ height:26px; width:auto; opacity:.9; }
.rodape p{ margin:16px 0 0; font-size:13px; opacity:.7; font-weight:400;
  max-width:34ch; }
.rodape .baixar{
  display:inline-flex; align-items:center; gap:9px; margin-top:20px;
  padding:12px 20px; border:1px solid var(--fio-off); border-radius:999px;
  font-size:14px;
}

/* ⭐ NO CELULAR A CAPA E O RODAPÉ SÃO CENTRADOS (Iury, 06/ago: *"podemos deixar
   centralizado"*; *"o rodapé está tudo alinhado à esquerda, muito respiro do
   lado direito"*). O desktop segue ancorado à esquerda como está. */
@media (max-width:599px){
  .capa{ text-align:center; }
  .capa .logo, .capa p{ margin-left:auto; margin-right:auto; }
  .capa .num{ justify-content:center; }
  .rodape{ text-align:center; }
  .rodape img{ margin-left:auto; margin-right:auto; }
  .rodape p{ margin-left:auto; margin-right:auto; }
}

/* --------------------------------------------------------- telas maiores - */
@media (min-width:600px){
  :root{ --m:32px; }
  /* 🔴 A TELA MAIOR SOMA UMA COLUNA À ESCOLHA DELE, em vez de fixar 3. Fixando,
     a categoria que ele pediu em 3 e a que ele pediu em 2 ficariam idênticas
     aqui — e a escolha, que é sobre quantas peças a linha precisa fechar, valeria
     só no celular. */
  .grade{ grid-template-columns:repeat(calc(var(--col,2) + 1),1fr); gap:16px; }
  .ficha{ grid-template-columns:repeat(4,1fr); }
  .cena{ aspect-ratio:16/9; }
}
@media (min-width:980px){
  :root{ --m:48px; }
  .grade{ grid-template-columns:repeat(calc(var(--col,2) + 2),1fr); }
  .capa{ padding:70px var(--m) 60px; }
  .peca{ display:grid; grid-template-columns:1fr 1fr; gap:40px;
    align-items:start; padding:0 var(--m) 60px; }
  .peca .grande{ border:1px solid var(--fio); border-radius:18px;
    margin-top:30px; }
  .peca .info{ padding:30px 0 0; }
  main > .interno{ max-width:1180px; margin:0 auto; }
}

/* ====================================================== MODO PEDIDO ========
   Só a versão `/pedido/` carrega estas telas — a vitrine usa a mesma folha e
   simplesmente nunca desenha estes elementos. */

/* a barra fixa embaixo, com o resumo do que já foi lançado */
.barrapedido{
  position:fixed; left:0; right:0; bottom:0; z-index:44;
  display:flex; align-items:center; gap:12px;
  padding:14px var(--m) calc(14px + env(safe-area-inset-bottom));
  background:var(--verde); color:var(--off);
  box-shadow:0 -6px 24px rgba(26,26,26,.16);
}
/* 🔴 `display:flex` VENCE O ATRIBUTO `hidden`. O `hidden` do HTML só vale por um
   `display:none` da folha do navegador, e qualquer `display` declarado por nós
   passa por cima — a barra aparecia com "0 itens · 0 peças" no pedido vazio,
   convidando a tocar num carrinho que não existe. */
.barrapedido[hidden]{ display:none; }
.barrapedido b{ margin-left:auto; font-size:15px; font-weight:700;
  white-space:nowrap; }
.barrapedido span{ font-size:13px; opacity:.78; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* 🔴 O RODAPÉ PRECISA DE FOLGA quando a barra está no ar, senão o botão de
   baixar o PDF fica embaixo dela e não dá para tocar. */
body.compedido .rodape{ padding-bottom:120px; }

/* o seletor de quantidade
   ⭐ SEM LINHA DIVIDINDO O − DO NÚMERO E DO + (Iury, 06/ago: *"não gostei das
   linhas que dividem"*) — a forma vem da SUPERFÍCIE (off sobre o cartão claro),
   não de fios. E os botões subiram de corpo e peso: o seletor "meio apagado"
   era símbolo fino de 20px em cima de fio fraco. */
.qtd{ display:inline-flex; align-items:center; gap:0; flex:none;
  border-radius:999px; overflow:hidden; background:var(--off); }
.qtd button{
  width:46px; height:44px; display:grid; place-items:center; flex:none;
  font-size:22px; font-weight:700; color:var(--verde);
}
.qtd button:active{ background:var(--off2); }
.qtd input{
  width:60px; border:0; background:none; font:inherit;
  font-size:16px; font-weight:700; text-align:center; height:44px; outline:none;
  -moz-appearance:textfield;
}
.qtd input::-webkit-outer-spin-button,
.qtd input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* ⭐⭐ O SELETOR DENTRO DO CARTÃO DA GRADE (Iury, 05/ago: *"preciso poder
   adicionar a quantidade sem abrir o produto"*). O cartão deixa de ser um link
   inteiro e vira caixa: o `<a class="alvo">` cobre foto e nome, e o seletor é
   irmão dele. Dentro do link, cada toque no + navegaria antes de somar. */
.cartao.compra{ display:flex; flex-direction:column; }
.cartao.compra .alvo{ display:block; color:inherit; text-decoration:none; }
/* ⭐ dentro do cartão ele vira um chip, sem linha nenhuma — e ANCORADO NA BASE
   (`margin-top:auto`): o cartão vizinho com nome de duas linhas fica mais alto,
   e sem a âncora os seletores da mesma linha paravam em alturas diferentes
   (o desalinhamento que ele apontou na Ékos). */
.cartao.compra > .qtd{
  margin:auto 8px 8px; border:0; border-radius:12px;
  justify-content:space-between;
}
.cartao.compra > .qtd button{ width:40px; height:42px; font-size:20px; }
.cartao.compra > .qtd input{
  flex:1; min-width:0; width:auto; height:42px; font-size:15px;
}
/* 🔴 O CARTÃO COM SELETOR NÃO ENCOLHE NO TOQUE. O `scale(.985)` do cartão-link
   fazia a grade inteira pulsar a cada + apertado, e num lançamento de trinta
   itens isso vira tremor de tela. */
.cartao.compra:active{ transform:none; }
.cartao.compra .alvo:active{ opacity:.86; }
/* em célula estreita (3 colunas no celular) o campo perde os números laterais
   antes de perder a legibilidade */
@container (max-width:132px){
  .cartao.compra > .qtd button{ width:30px; font-size:17px; }
  .cartao.compra > .qtd input{ font-size:14px; }
}

/* o bloco de lançamento dentro da ficha do produto */
.lancar{ margin-top:24px; padding:18px; background:var(--off2);
  border-radius:16px; }
/* sobre o off2 do bloco, o chip off sumiria — aqui ele volta ao claro */
.lancar .qtd{ background:#FDFCF8; }
.lancar .rot{ font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(26,26,26,.5); margin-bottom:10px; }
.lancar .dica{ margin-top:10px; font-size:12.5px; font-weight:400;
  color:rgba(26,26,26,.55); }

/* a tela do pedido */
.pedido{ padding:26px var(--m) 140px; }
.pedido h1{ margin:0; font-size:clamp(30px,8.6vw,44px); font-weight:700;
  letter-spacing:-.03em; }
.pedido .resumo{ margin:6px 0 18px; font-size:13px; font-weight:400;
  color:rgba(26,26,26,.55); }
.pedido .linhas{ display:flex; flex-direction:column; gap:10px; }
.pedido .li{
  display:flex; align-items:center; gap:12px; padding:10px 12px;
  background:#FDFCF8; border:1px solid var(--fio); border-radius:16px;
}
.pedido .li .th{ width:56px; height:56px; flex:none; position:relative;
  background:var(--off); border-radius:12px; overflow:hidden; }
.pedido .li .th img{ position:absolute; inset:5px; width:calc(100% - 10px);
  height:calc(100% - 10px); object-fit:contain; }
.pedido .li .nm{ min-width:0; flex:1; }
.pedido .li .nm b{ display:block; font-weight:500; font-size:15px;
  letter-spacing:-.015em; }
.pedido .li .nm span{ font-size:12px; color:rgba(26,26,26,.55);
  font-weight:400; }
/* preço unitário e subtotal da linha */
.pedido .li .nm i{ font-style:normal; display:block; margin-top:3px;
  font-size:12.5px; font-weight:700; color:var(--verde); }
/* a conta de caixas master da linha — meta-informação, cinza discreto */
.pedido .li .nm em{ font-style:normal; display:block; margin-top:2px;
  font-size:12px; color:rgba(26,26,26,.55); font-weight:400; }
/* o aviso de valores de demonstração, enquanto a tabela real não chega */
.pedido .aviso{ margin:-12px 0 16px; font-size:12px; font-weight:400;
  color:rgba(26,26,26,.45); }
.pedido .li .tira{ width:34px; height:34px; flex:none; border-radius:50%;
  font-size:20px; color:rgba(26,26,26,.45); display:grid; place-items:center; }
.pedido .li .tira:active{ background:var(--off2); }
/* 🔴 EM CELULAR A LINHA VIRA GRADE, NÃO FLEX COM QUEBRA. Com foto, nome, seletor
   e o × na mesma linha em 390px, o nome ficava com ~60px e virava reticências —
   e um pedido em que não se lê o nome do produto não dá para conferir.
   Mas `flex-wrap` sozinho não resolveu: o nome longo ("Pote Hermético Dosador
   Preto - 1500ml") quebrava para a linha de baixo e passava POR TRÁS da foto,
   porque no flex quem quebra leva a largura inteira. A grade fixa a foto numa
   coluna que atravessa as duas linhas e o texto nunca invade. */
@media (max-width:539px){
  .pedido .li{
    display:grid; align-items:center;
    grid-template-columns:56px 1fr auto;
    grid-template-areas:"th nm tira" "th qtd qtd";
    column-gap:12px; row-gap:10px;
  }
  .pedido .li .th{ grid-area:th; align-self:start; }
  .pedido .li .nm{ grid-area:nm; }
  .pedido .li .qtd{ grid-area:qtd; justify-self:start; }
  .pedido .li .tira{ grid-area:tira; }
}

.pedido .loja{ display:block; margin-top:22px; }
.pedido .loja span{ display:block; font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(26,26,26,.5); margin-bottom:7px; }
.pedido .loja input{
  width:100%; padding:13px 16px; font:inherit; font-size:16px;
  background:#FDFCF8; border:1px solid var(--fio); border-radius:14px;
  outline:none;
}
.pedido .loja input::placeholder{ color:rgba(26,26,26,.38); font-weight:400; }

.pedido .enviar{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; margin-top:18px; padding:16px; border-radius:999px;
  background:var(--verde); color:var(--off); font-size:16px; font-weight:700;
}
.pedido .enviar:active{ opacity:.88; }
.pedido .previa{ margin-top:18px; }
.pedido .previa summary{ font-size:13px; font-weight:500; color:var(--verde);
  cursor:pointer; }
.pedido .previa pre{
  margin:10px 0 0; padding:14px; background:#FDFCF8; border:1px solid var(--fio);
  border-radius:14px; font-size:12.5px; line-height:1.55; white-space:pre-wrap;
  word-break:break-word; font-family:inherit; font-weight:400;
}
.pedido .limpar{ display:block; margin:20px auto 0; font-size:13px;
  font-weight:500; color:rgba(26,26,26,.5); text-decoration:underline; }

/* a confirmação na identidade do sistema (06/ago) — substitui o confirm()
   nativo no "Limpar o pedido". Acima do menu (50) e da barra (44). */
.dlgveu{
  position:fixed; inset:0; z-index:60; background:rgba(26,26,26,.42);
  display:grid; place-items:center; padding:32px var(--m); opacity:0;
  transition:opacity .24s var(--mola);
}
.dlgveu.on{ opacity:1; }
.dlg{
  background:var(--off); border-radius:18px; padding:22px 20px 16px;
  max-width:340px; width:100%; transform:translateY(10px);
  transition:transform .24s var(--mola);
}
.dlgveu.on .dlg{ transform:none; }
.dlg p{ margin:0 0 18px; font-size:16px; font-weight:500; line-height:1.4; }
.dlg .acoes{ display:flex; gap:8px; justify-content:flex-end; }
.dlg .acoes button{ padding:11px 18px; border-radius:999px; font-size:14px;
  font-weight:700; }
.dlg .acoes [data-cancela]{ color:rgba(26,26,26,.6); }
.dlg .acoes [data-cancela]:active{ background:var(--off2); }
.dlg .acoes [data-segue]{ background:var(--verde); color:var(--off); }
.dlg .acoes [data-segue]:active{ opacity:.88; }

/* ---------------------------------------------------------- esgotado -----
   ⭐⭐⭐ O QUE SAIU DE LINHA CONTINUA À VISTA (01/set/2026). O impresso de
   outubro sai com sete linhas; aqui as seis que saíram ficam, marcadas — quem
   procura o código antigo o encontra e vê que acabou. Some da lista e a mesma
   busca devolve nada, que lê como catálogo quebrado, não como produto fora.
   ⭐⭐⭐ O SELO É VERMELHO, E O VERMELHO É DERIVADO DA MARCA (Iury, 02/set:
   *"muda a cor do pill, para uma cor que destaque um pouco mais, talvez um
   vermelho que combine com a nossa palheta"*). A paleta é fechada em cinco
   cores e nenhuma delas é vermelha — então este saiu do **Rosa #F2C4C4**, que
   é a única quente da casa: mesma família de matiz, escurecido até o peso do
   Verde e aquecido 4° para conversar com o creme do fundo.
   🔴 MEDIDO: `#9E3B34` dá **5,9:1** com o off por cima e **6,5:1** sobre o
   cartão. O tijolo de 41% de luz foi escolhido contra um coral mais claro
   (`#B4503F`, 4,5:1) justamente porque o selo é corpo pequeno em caixa alta.
   🔴 E ELE NÃO BRIGA COM A PÍLULA DO CÓDIGO: verde e vermelho ficam lado a lado
   no mesmo cartão, mas em papéis diferentes — um é dado, o outro é aviso.
   🔴 E A PÍLULA DO CÓDIGO NÃO MUDA DE COR. Passá-la a cinza junto com a foto
   foi a primeira ideia e está medido que não serve: `rgba(26,26,26,.5)` sobre o
   cartão dá ~#8B8B8A, e o off por cima fica em 3,0:1 — abaixo do mínimo para
   corpo pequeno. O código é DADO, e dado esgotado se lê igual. */
.selo{
  position:absolute; z-index:2; top:10px; left:10px;
  background:var(--vermelho); color:var(--off);
  font-size:9.5px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; padding:5px 9px; border-radius:999px;
}
/* na foto com moldura o selo entra junto com ela, senão encosta na quina */
.cartao .foto.moldada .selo{ top:18px; left:18px; }
.cartao.esgotado .foto img{ opacity:.5; filter:grayscale(.5); }

/* no modo pedido, o chip que ocupa a caixa do seletor. Mesmas medidas do
   `.cartao.compra > .qtd` — é o que mantém as alturas da linha casadas. */
.cartao.compra > .semqtd{
  margin:auto 8px 8px; height:42px; border-radius:12px;
  display:grid; place-items:center; background:var(--off);
  font-size:10px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(26,26,26,.5);
}
@container (max-width:132px){
  .cartao.compra > .semqtd{ font-size:9px; letter-spacing:.1em; }
}

/* o aviso no alto da linha inteira que esgotou */
.tit .avisoesg{
  display:inline-block; margin-top:16px; padding:9px 14px; max-width:44ch;
  background:rgba(26,26,26,.045); border:1px solid rgba(26,26,26,.16);
  border-radius:12px; font-size:13px; color:rgba(26,26,26,.7);
}

/* a ficha do produto — o selo entra na MESMA LINHA da pílula do código.
   🔴 MEDIDO, porque "parece torto" não decide nada: as duas pílulas têm
   alturas diferentes (42,6 × 29,2) e, alinhadas pela baseline, os centros
   ficavam 2,8px fora. `vertical-align:middle` nas duas põe os centros no
   mesmo eixo. */
.peca .cod, .peca .tagesg{ vertical-align:middle; }
.peca .tagesg{
  display:inline-block; margin-top:14px; padding:7px 13px;
  background:var(--vermelho); color:var(--off);
  font-size:10.5px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; border-radius:999px;
}

/* a linha da busca e a da matriz */
.lista a.esg .th img{ opacity:.5; filter:grayscale(.5); }
.lista a.esg .nm span{ color:rgba(26,26,26,.72); font-weight:500; }

/* o menu: a palavra no lugar do número (um "0" ali leria como erro) */
.menu a i.esg{
  font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  opacity:.66; align-self:center;
}

/* respeita quem pediu menos movimento */
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
}