/* Loja da inauguração do núcleo — layout da página.
   Os tokens e as classes .ldb-* de componente vêm de tokens.css e ds.css,
   copiados sem alteração do design system. Aqui fica só o layout.

   Lei 3 do sistema: profundidade é fio de cabelo, nunca box-shadow.
   Não há media query de largura: o layout responde por grid auto-fit. */

/* Verde do fundo definido pelo núcleo: #1e392c. O design system traz
   --agua:#1F392C (um ponto a mais no vermelho). A correção mora aqui, e
   não em tokens.css, porque aquele arquivo é cópia literal do sistema de
   design — editá-lo faria a próxima recópia desfazer isto em silêncio. */
:root{--agua:#1e392c}

/* Texto pequeno maior no celular (revisão de 06/08/2026). O sistema traz
   --t-peq:.875rem (14px) e --t-rotulo:.6875rem (11px) — confortável num
   monitor, apertado no telefone, onde está a maior parte dos acessos desta
   loja. Uma varredura da página encontrou 31 elementos em 14px (quase todo
   o texto corrido: passos, notas, rodapé, avisos do Pix) e 10 em 11px (os
   rótulos em versalete).

   Subir os DOIS TOKENS, e não as regras uma a uma, é o que faz a correção
   alcançar também o que mora em ds.css (chips, mensagens de erro, badge do
   carrinho) sem precisar caçar cada seletor.

   clamp() em vez de valor fixo porque a queixa é de celular. Atenção ao
   SINAL do termo vw: ele cresce com a largura, então para a fonte ser maior
   no telefone e voltar ao normal no desktop o vw tem que SUBTRAIR de uma
   base alta — com "+ Xvw" o efeito sai invertido (foi o primeiro erro
   aqui: 14px no celular crescendo no monitor, exatamente o contrário do
   pedido). Medido: 15.5px/12.1px numa tela de 390px e os 14px/11px
   originais já a partir de ~700px — o reforço fica onde a queixa era, e
   tablet e desktop continuam como o sistema de design definiu. Sem media
   query de largura, como o resto do projeto. Override aqui e não em
   tokens.css, pelo mesmo motivo do verde acima. */
:root{
  --t-peq:clamp(.875rem, 1.13rem - 0.66vw, 1.0rem);
  --t-rotulo:clamp(.6875rem, .87rem - 0.47vw, .78rem);
}

/* [hidden] tem que vencer as classes de layout abaixo. Sem isto, um
   .ldb-pilha-5[hidden] continua com display:flex e aparece na tela — a
   regra do user-agent perde para qualquer seletor de classe. */
[hidden]{display:none !important}

/* ---------- utilitários de pilha e limite ---------- */
.ldb-limite{max-width:var(--largura-max);margin:0 auto}
.ldb-pilha-2{display:flex;flex-direction:column;gap:var(--esp-2)}
.ldb-pilha-3{display:flex;flex-direction:column;gap:var(--esp-3)}
.ldb-pilha-4{display:flex;flex-direction:column;gap:var(--esp-4)}
.ldb-pilha-5{display:flex;flex-direction:column;gap:var(--esp-5)}
.ldb-pilha-6{display:flex;flex-direction:column;gap:var(--esp-6)}
.ldb-rel{position:relative}
.ldb-sem-linha{text-decoration:none}
.ldb-entre{display:flex;align-items:center;justify-content:space-between;gap:var(--esp-3);flex-wrap:wrap}

.ldb-secao{padding:var(--esp-8) var(--goteira)}
.ldb-secao--linha{border-top:1px solid var(--linha)}
.ldb-grade{display:grid;gap:var(--esp-4)}
.ldb-grade--info{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.ldb-grade--produtos{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.ldb-grade--revisao{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.ldb-grade--passos{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}

/* Cartões de "Valores/Pagamento/Entrega/Prazos" têm sempre os mesmos dois
   filhos (rótulo + nota): subgrid faz a nota começar na mesma linha nos
   quatro cartões, em vez de cada um flutuar conforme o tamanho do texto —
   mesma técnica de .ldb-grade--produtos, só que com duas faixas em vez
   de seis. Escopado à própria grade porque .ldb-cartao--info é reusado
   em #dados, #carrinho e #pagamento, que não fazem parte deste ajuste. */
.ldb-grade--info{grid-template-rows:auto auto;align-items:stretch}
.ldb-grade--info > .ldb-cartao--info{display:grid;grid-row:span 2;
  grid-template-rows:subgrid;row-gap:var(--esp-2)}
@supports not (grid-template-rows:subgrid){
  .ldb-grade--info > .ldb-cartao--info{display:flex;flex-direction:column;gap:var(--esp-2)}
}

/* "Do pedido à retirada": número do passo + texto nas mesmas duas faixas em
   todos os <li>.

   Os quadros empilham um por linha no celular e se espalham em fileira no
   desktop, pelo auto-fit do .ldb-grade--passos lá em cima — sem media query.
   Já foram um carrossel horizontal com scroll-snap e bolinhas, para encurtar
   a rolagem; a revisão de 06/08/2026 pediu o passo a passo "corrido pra
   baixo" de volta, para facilitar a leitura de quem tem mais dificuldade. A
   seção ficou mais alta no celular e essa é a troca aceita. */
.ldb-grade--passos{grid-template-rows:auto auto;align-items:stretch}
.ldb-grade--passos > .ldb-cartao--info{display:grid;grid-row:span 2;
  grid-template-rows:subgrid;row-gap:var(--esp-2)}
@supports not (grid-template-rows:subgrid){
  .ldb-grade--passos > .ldb-cartao--info{display:flex;flex-direction:column;gap:var(--esp-2)}
}

/* ---------- tipografia ---------- */
.ldb-display{margin:0;font-family:var(--fonte-display);font-weight:500;
  font-variation-settings:var(--display-settings);font-size:var(--t-display);
  line-height:1.02;letter-spacing:-.02em;max-width:16ch;text-wrap:pretty}
.ldb-titulo{margin:0;font-family:var(--fonte-display);font-weight:500;
  font-variation-settings:var(--display-settings);font-size:var(--t-secao);
  line-height:1.1;letter-spacing:-.01em}
.ldb-nome{margin:0;font-family:var(--fonte-display);font-weight:400;
  font-size:var(--t-sub);line-height:1.3}
.ldb-sub{margin:0;font-size:var(--t-corpo-g);color:var(--tinta-suave);
  max-width:48ch;text-wrap:pretty}
.ldb-prosa{margin:0;color:var(--tinta-suave);max-width:var(--medida-max);text-wrap:pretty}
/* A frase de inauguração é o dourado desta seção. O chip de cor marcado
   (ex.: "Off-white") também é dourado e pode aparecer na mesma tela ~785px
   abaixo — mas ele é ESTADO DE SELEÇÃO, devolvendo à pessoa a escolha que
   ela acabou de fazer, não um destaque disputando atenção com uma
   afirmação da loja. A Lei 1 continua valendo para destaques; não some um
   terceiro dourado nesta dobra. Só cor de tipografia, nunca linha ou
   preenchimento (Leis 2 e 5). --estrela sobre #1e392c = 7.20:1. */
/* O max-width sobrescreve a --medida-max (62ch) herdada de .ldb-prosa: com o
   cartão ligado a frase tem 79 caracteres e quebrava deixando duas palavras
   órfãs na segunda linha ("por peça."). O limite de leitura continua
   existindo — só é maior aqui, porque esta é uma frase única e curta, não um
   parágrafo corrido. tokens.css não é tocado: é cópia literal do design
   system, e --medida-max continua valendo para todo o resto. */
.ldb-precos-inauguracao{color:var(--estrela);font-weight:500;max-width:82ch}
/* Dourado como TIPOGRAFIA, nunca linha ou preenchimento (Leis 2 e 5). É a
   condição comercial que mais pesa na decisão de compra, e a única em destaque
   nesta seção. --estrela sobre --superficie (fundo do .ldb-cartao--info) =
   5.79:1, acima do mínimo AA de 4.5:1. */
.ldb-destaque-frete{color:var(--estrela);font-weight:500}
.ldb-nota{margin:0;font-size:var(--t-peq);color:var(--tinta-suave);line-height:1.6}
/* --tinta-fraca (#8E998B) só passa AA sobre --agua-funda (5.22:1); sobre
   --agua (4.21:1) e --superficie (3.39:1) fica abaixo de 4.5:1. As telas
   onde .ldb-nota--fraca aparece usam --agua ou --superficie de fundo, então
   a classe resolve para --tinta-suave (5.29–8.12:1 em qualquer fundo do
   sistema). Onde o fundo é --agua-funda (ex. #cores-caneca-label sobre
   .ldb-cartao--companheira), o contraste de --tinta-suave já folga AA. */
.ldb-nota--fraca{color:var(--tinta-suave)}
.ldb-opcional{font-weight:400;letter-spacing:0;text-transform:none;color:var(--tinta-suave)}
.ldb-rotulo{margin:0}

/* ---------- cabeçalho ---------- */
#cabecalho{position:sticky;top:0;z-index:20;background:var(--agua);
  border-bottom:1px solid var(--linha)}
.ldb-faixa{max-width:var(--largura-max);margin:0 auto;padding:0 var(--goteira);
  min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:var(--esp-4)}
/* "Inauguração do núcleo" é mais longa que a marca antiga e quebrava em duas
   linhas no celular, empurrando o cabeçalho para ~96px de altura. O corpo
   acompanha a largura da tela (clamp, sem media query) e a quebra fica
   proibida: em tela estreita a faixa encolhe a fonte em vez de crescer. */
.ldb-marca{font-family:var(--fonte-display);font-weight:500;
  font-size:clamp(1rem,3.6vw,1.25rem);white-space:nowrap;
  letter-spacing:-.01em;text-decoration:none;font-variation-settings:var(--display-settings)}
.ldb-marca--rodape{margin:0;font-size:1.125rem}
.ldb-faixa-fim{display:flex;align-items:center;gap:var(--esp-4)}
/* O prazo saiu do cabeçalho na revisão de 06/08/2026: repetia em versalete
   o que o hero já diz por extenso, e no celular disputava a faixa com a
   marca. Agora ele aparece uma vez só, em ouro, no hero — o que também
   resolve a Lei 1 (um dourado por tela) sem precisar de exceção. */
.ldb-btn-carrinho{display:inline-flex;align-items:center;gap:var(--esp-2);background:none;
  border:0;color:var(--tinta);cursor:pointer;min-height:44px;padding:0 var(--esp-2);font:inherit}
.ldb-badge{font-weight:700;font-size:var(--t-peq);font-variant-numeric:tabular-nums}

/* ---------- hero ---------- */
/* O respiro acima da arte é um só valor, --hero-topo, porque duas coisas
   dependem dele: o padding do hero e o topo das órbitas. Se as duas forem
   escritas separadas, mexer numa desalinha os anéis do disco que eles
   existem para circundar.

   No celular esse respiro era 128px fixos (--esp-9 + --esp-6): num aparelho
   de 360px de largura sobrava um quinto da tela vazio antes de qualquer
   coisa aparecer. clamp() resolve sem media query de largura — mesma
   técnica que --goteira já usa: 32px de piso no celular, crescendo com a
   viewport até os 128px originais no desktop, onde o espaço existe. */
:root{--hero-topo:clamp(var(--esp-6),13vw,calc(var(--esp-9) + var(--esp-6)));
  /* largura da arte do hero; as órbitas se dimensionam a partir dela */
  --arte-l:min(360px,72vw)}
.ldb-hero{position:relative;overflow:hidden;
  padding:var(--hero-topo) var(--goteira) var(--esp-8);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--esp-5)}
/* O efeito é dimensionado A PARTIR DA ARTE e centralizado NELA, não ancorado
   no padding do hero (revisão de 06/08/2026). Antes era uma caixa de 760px
   presa pelo topo: terminava 253px abaixo do disco, passava por baixo do
   título e dos botões, e ainda vazava 18px para fora do próprio hero — foi
   essa faixa que a revisão marcou com o colchete vermelho.

   --arte-l é a largura da arte, declarada uma vez e reusada por .ldb-arte,
   para as duas não poderem divergir. A altura renderizada da arte é
   ~1.363x a largura (o arquivo é 1174x1600); 1.55x a largura deixa os
   raios terminando acima do título. Abaixo de ~1.5x o anel encosta na arte
   e os fios somem; em 1.7x eles voltavam a cruzar o "Loja comemorativa".

   A caixa PRECISA continuar quadrada: a máscara de .ldb-raios apaga tudo
   fora do anel de 47%-51% do quadrado. Numa caixa retangular esse anel
   vira elipse e os raios deixam de encontrar a borda circular da arte.

   top/translate centralizam a caixa na arte: metade do padding do hero
   mais metade da altura da arte é o centro do disco; -50% em Y devolve a
   caixa para esse centro. */
.ldb-orbitas{position:absolute;left:50%;
  top:calc(var(--hero-topo) + (var(--arte-l) * 1.363 / 2));
  width:min(calc(var(--arte-l) * 1.55),96vw);
  height:min(calc(var(--arte-l) * 1.55),96vw);
  transform:translate(-50%,-50%);pointer-events:none}
.ldb-orbita{position:absolute;border-radius:50%;border:1px solid transparent;display:block}
.ldb-orbita--a{inset:0;border-top-color:var(--linha);border-left-color:var(--linha)}
.ldb-orbita--b{inset:9%;border-bottom-color:var(--linha);animation-direction:reverse}
/* Raios: a arte é um círculo (cardume girando a serra), então os "traços do
   centro até a borda" pedidos não podem nascer de um ponto matemático — ele
   fica atrás do próprio disco. Em vez disso, os fios nascem na borda da arte
   e se estendem até a órbita externa, como um leque de luz saindo do disco
   — a mesma lógica de auréola pontuada de arte devocional, só que em fio de
   cabelo. repeating-conic-gradient desenha N raios finos em uma única
   camada; a máscara radial apaga tudo antes da borda da arte e depois da
   órbita externa, deixando só o vão entre as duas.

   As porcentagens da máscara dependem do tamanho da caixa e precisam ser
   revistas junto com ele. Cuidado com a conta: a porcentagem de um
   radial-gradient já é fração do RAIO, não do diâmetro. A caixa é 1.55x a
   largura da arte, então a borda do disco cai em 1/1.55 = 65% do raio (não
   32% — dividir por dois de novo põe os raios dentro da arte, que foi o
   erro da primeira tentativa). Os fios vão de 68% (logo depois do disco)
   a 94% (antes da órbita externa, em 100%). Se mudar o multiplicador da
   caixa, refaça esta conta. */
.ldb-raios{position:absolute;inset:0;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,
    var(--linha) 0deg 0.6deg,
    transparent 0.6deg 15deg);
  -webkit-mask-image:radial-gradient(circle,transparent 0 68%,#000 72% 90%,transparent 94% 100%);
  mask-image:radial-gradient(circle,transparent 0 68%,#000 72% 90%,transparent 94% 100%)}
@media (prefers-reduced-motion:no-preference){
  .ldb-orbita{animation:ldb-girar 120s linear infinite}
  .ldb-raios{animation:ldb-cintilar 120s linear infinite}
}
/* Cintilação bem lenta do leque de raios — não gira (romperia o alinhamento
   radial com a borda da arte), só respira em opacidade, quase imperceptível,
   na mesma régua de discrição dos 120s das órbitas. */
@keyframes ldb-cintilar{
  0%,100%{opacity:.6}
  50%{opacity:1}
}
.ldb-arte{position:relative;width:var(--arte-l);height:auto;display:block}
.ldb-hero-acoes{position:relative;display:flex;flex-wrap:wrap;gap:var(--esp-3);
  justify-content:center;align-items:center}
/* A data limite é o dourado desta tela, e o único (o chip que
   repetia isto no cabeçalho saiu) — a decisão de comprar depende dela.
   --estrela sobre o fundo #1e392c dá 7.20:1, AA folgado até em corpo de
   texto. O ouro continua sem virar linha ou preenchimento (Leis 2 e 5):
   é só a cor da tipografia. */
.ldb-prazo-destaque{color:var(--estrela);font-weight:700}

/* ---------- cartões ---------- */
.ldb-cartao--info{padding:var(--esp-5);display:flex;flex-direction:column;gap:var(--esp-2)}
.ldb-cartao--produto{padding:var(--esp-6);display:flex;flex-direction:column;
  gap:var(--esp-4);align-items:flex-start}
/* Fotos de produto são quadradas, não circulares: .ldb-medalhao (ds.css,
   fora de alcance) vem com border-radius:var(--r-medalhao) (50%) porque a
   classe também é usada em contextos decorativos que continuam círculo
   (ver .ldb-vazio-anel e .ldb-aviso-icone, abaixo). Para foto de produto
   especificamente, a variante --img sobrescreve para --r-painel (4px) —
   raio pequeno, não círculo. Also cancela o rotate(8deg) de hover herdado
   de .ldb-medalhao: girar um quadrado 8 graus lê como acidente, não como
   intenção; a resposta ao hover do cartão já existe no fio do próprio
   .ldb-cartao (Lei 3), então a foto de produto fica parada. */
/* Sem width/height aqui: quem dimensiona são as variantes --grande e
   --pequena mais abaixo, que hoje mandam a foto ocupar a moldura toda.
   Um tamanho fixo neste bloco só voltaria a competir com elas por ordem
   de cascata (mesma especificidade, uma classe). */
.ldb-medalhao--img{object-fit:cover;align-self:center;
  border-radius:var(--r-painel)}
.ldb-cartao:hover .ldb-medalhao--img{transform:none}
.ldb-chips{display:flex;flex-wrap:wrap;gap:var(--esp-2);align-items:center}

/* Chip de cor: amostra do tecido + nome escrito (revisão de 06/08/2026).
   O nome fica, e não vai para tooltip: cor sozinha reprova no WCAG 1.4.1 e
   title não aparece em tela de toque — no celular ninguém leria o nome.
   Os tons saem de TOM em loja.js, amostrados das próprias fotos. */
.ldb-chip--cor{gap:var(--esp-2)}
/* O fio de contorno é obrigatório, não decorativo: o verde do tecido
   (#1E382B) é praticamente o fundo da página (#1e392c) e o off-white
   (#FEF7E4) é quase a tinta — sem o contorno, uma das duas amostras
   desapareceria contra o cartão. Fio, nunca sombra (Lei 3). */
.ldb-chip-amostra{width:14px;height:14px;border-radius:50%;flex:none;
  border:1px solid var(--linha-forte);display:inline-block}
.ldb-chips--abas{justify-content:flex-start}

/* Chip da escolha de meio de pagamento (#meio-pagamento). Único lugar da
   loja onde o chip marcado NÃO é dourado, e a Lei 1 é o motivo: com o
   cartão escolhido, o dourado da seção precisa ser o #btn-cartao, que é a
   ação daquele momento. O chip marcado é estado de seleção — devolve o que
   a pessoa acabou de escolher — e perde a disputa por atenção para o botão
   que a leva adiante. Nas outras telas o dourado da seção é uma frase, não
   um botão, então lá o chip continua dourado (ds.css, .ldb-chip--ativo).

   A seleção continua visível sem cor: preenchimento --superficie mais fio
   --linha-forte. O preenchimento carrega fio (Lei 4) e a profundidade é
   fio, nunca sombra (Lei 3). A especificidade de duas classes vence
   .ldb-chip--ativo sem !important. Nada disso é o único sinal de estado:
   o aria-checked do chip continua sendo escrito por chip() em loja.js. */
.ldb-chip--meio.ldb-chip--ativo{background:var(--superficie);
  border-color:var(--linha-forte);color:var(--tinta)}

/* Aviso do preço no cartão (#cartao-caixa). Dourado nas DUAS pontas da
   frase — "Aviso:" e o valor —, com o meio em tinta normal, que é o que faz
   o olho pousar no número antes de a pessoa sair da loja: é a última chance
   de ela ver o preço maior aqui, e não dentro da Stripe.

   Lei 1 (um dourado por viewport), que é o ponto delicado desta regra:

   - Os dois <span> são UM destaque, não dois. Estão na mesma linha, na
     mesma cor, dentro da mesma frase — a Lei conta elementos de destaque,
     não trechos de texto. Estão separados no HTML só porque loja.js não tem
     nenhum innerHTML: todo texto entra por txt(), então cada pedaço variável
     precisa do seu próprio nó. A classe, por isso, é uma só e mora no <p>.
   - O #btn-cartao continua dourado, e isso NÃO é um segundo destaque no
     mesmo peso: ele é PREENCHIMENTO --estrela (.ldb-botao--primario), o
     peso máximo do acento; aqui é tinta dourada sobre o fundo do cartão.
     A loja já usa essa distinção duas vezes — .ldb-precos-inauguracao e
     .ldb-prazo-destaque são tinta dourada convivendo com botões dourados
     em outras dobras, pelo mesmo motivo: uma afirmação da loja não disputa
     com um botão a leitura de "aperte aqui".
   - Rebaixar o botão para --secundario foi considerado e descartado: é
     exatamente o estado que a decisão 19 corrigiu (o único dourado à vista
     virava o "Enviar comprovante", que neste momento leva a uma mensagem
     sobre um comprovante de Pix que ainda não existe). O ouro da AÇÃO fica.
   - --alerta (#F09C8E), o único outro acento do sistema, foi descartado:
     é rosa, o design system o marca como "validation text only" e ele só
     aparece na loja com o fio à esquerda de .ldb-erro — a linha pareceria
     um cartão recusado.

   Só cor de tipografia: nunca linha nem preenchimento (Leis 2 e 3).
   Contraste: --estrela sobre --superficie (#2F473B, fundo de .ldb-cartao)
   = 5.79:1, acima dos 4.5:1 de AA para texto normal. */
.ldb-aviso-cartao > #cartao-aviso,
.ldb-aviso-cartao > #cartao-total{color:var(--estrela)}
.ldb-aviso-cartao > #cartao-aviso{font-weight:700}

/* Os dois meios de pagamento no passo 3 do "Como pedir". O passo pede uma
   ESCOLHA, e são estas duas palavras que a pessoa procura ao ler — o resto da
   frase explica cada caminho.

   Mesmo recurso de .ldb-precos-inauguracao e .ldb-prazo-destaque: dourado como
   TINTA, nunca como preenchimento nem linha (Leis 2 e 3). A Lei 1 conta um
   preenchimento dourado por viewport, que continua sendo só o botão primário.

   Vive dentro de .ldb-cartao (fundo --superficie): 5.79:1, acima dos 4.5:1 de
   AA. O 7.20:1 citado mais acima é sobre o fundo da página, que não é o caso
   aqui — conferir o fundo antes de reusar o token, como manda o CLAUDE.md.

   O elemento é <strong>: o destaque é semântico, não só visual, então quem usa
   leitor de tela também percebe a escolha. */
.ldb-meio{color:var(--estrela);font-weight:700}

/* ---------- vitrine de produtos ---------- */
/* A camisa (peça principal, 3 modelos × 3 cores) pesa mais que a caneca
   (companheira): 2fr/1fr em vez de duas colunas iguais. Sem media query —
   quando a segunda coluna não cabe (auto-fit + minmax), a grade original
   já colapsa para uma coluna; aqui só ajustamos a proporção quando as
   duas colunas convivem lado a lado. */
/* Peça principal maior que a companheira, sem media query: as duas colunas
   são frações de uma faixa que só existe quando há largura para as duas.
   `min(100%, 34rem)` deixa a coluna encolher junto com a tela — quando a
   soma dos mínimos não cabe mais, o próprio auto-fit empilha em uma coluna. */
.ldb-grade--produtos{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));
  align-items:stretch}

/* Os dois cartões partilham as MESMAS faixas horizontais: selo, imagem,
   texto, preço, chips, botão. Cada cartão é um subgrid das linhas da
   grade, então título, preço e botão caem na mesma altura nos dois — sem
   isso os cartões têm a mesma altura mas o conteúdo flutua solto.
   O cartão da caneca não tem selo nem chips: as faixas correspondentes
   ficam vazias nele, e é isso que mantém o resto alinhado. */
.ldb-grade--produtos{grid-template-rows:auto auto auto auto auto auto}
.ldb-cartao--produto{display:grid;grid-row:span 6;grid-template-rows:subgrid;
  align-items:start;row-gap:var(--esp-4)}
/* Sem subgrid (navegador antigo): volta ao empilhamento simples. Perde-se
   o alinhamento entre cartões, mas nada quebra. */
@supports not (grid-template-rows:subgrid){
  .ldb-cartao--produto{display:flex;flex-direction:column;gap:var(--esp-4)}
}
.ldb-cartao--destaque{padding:var(--esp-7)}
.ldb-cartao--companheira{padding:var(--esp-7);background:var(--agua-funda)}
/* O botão fica na última faixa, encostado na base: as duas chamadas de
   ação terminam na mesma linha, mesmo com quantidades de texto diferentes. */
.ldb-cartao--produto > .ldb-botao{align-self:end}

/* Rótulo pequeno acima da peça principal — mesma família do .ldb-rotulo,
   só de olho no espaçamento (não é uma cor nova nem elemento dourado). */
.ldb-rotulo--peca{color:var(--tinta-fraca)}

/* Moldura: dá ao medalhão o mesmo respiro que as órbitas do herói têm em
   volta da arte — um campo quieto antes do círculo, não o círculo colado
   na borda do cartão.
   Altura fixa e compartilhada pelas duas variantes: sem isso, a faixa da
   camisa (imagem 260px + trilho de setas sempre visível, 3 fotos) fica bem
   mais alta que a da caneca (imagem 140px + trilho oculto, 1 foto só), e os
   dois cartões lado a lado leem como desalinhados mesmo com o mesmo
   subgrid por baixo. 332px é a altura total (com padding) que a moldura da
   camisa já ocupa hoje — vira o piso das duas, não um valor novo. A
   hierarquia de tamanho entre as peças continua só pelo medalhão (260 vs
   140px); a moldura passa a ser um palco de profundidade igual para as
   duas, com align-items:center centralizando o conteúdo mais baixo (a
   caneca, sem trilho) dentro da mesma faixa. */
.ldb-moldura{width:100%;box-sizing:border-box;min-height:332px;display:flex;
  align-items:center;justify-content:center;padding:var(--esp-4) 0}
.ldb-moldura--pequena{padding:var(--esp-2) 0}

/* As duas fotos ocupam a largura inteira da moldura (revisão de
   06/08/2026). Antes eram 260px e 140px fixos dentro de uma moldura
   fluida, o que deixava faixa morta dos dois lados — foi exatamente o que
   a revisão marcou com setas na imagem de referência.

   Isto encerra a antiga hierarquia de tamanho entre camisa e copo: as duas
   peças agora aparecem no mesmo quadro. A liderança da camisa continua
   existindo, mas pela grade (2fr contra 1fr em .ldb-grade--produtos) e
   pelo selo "Peça principal", não pelo tamanho do medalhão.

   Sem max-width: a foto acompanha a largura do cartão, que é o "quadrado
   interno" que a revisão mandou preencher. aspect-ratio mantém o quadrado
   sem depender de height, para a moldura continuar respondendo ao subgrid. */
.ldb-medalhao--grande,
.ldb-medalhao--pequena{width:100%;height:auto;aspect-ratio:1}

/* ---------- slider de fotos ---------- */
/* Um componente só, reusado no cartão do produto e no painel de opções
   (#slider-camisa, #slider-caneca, #slider-painel): a foto, e uma faixa de
   controles abaixo — seta anterior, posição ("1 de 2"), seta seguinte.
   Quando o produto tem 1 foto só (caneca), o JS deixa a faixa de
   controles com [hidden] em vez de desenhar setas mortas ou um único
   ponto — degrada para imagem simples. */
.ldb-slider{display:flex;flex-direction:column;align-items:center;gap:var(--esp-2)}
.ldb-slider-controles{display:flex;align-items:center;gap:var(--esp-3)}
.ldb-slider-seta{display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:var(--r-controle);border:1px solid var(--linha);
  background:none;color:var(--tinta);cursor:pointer;
  transition:border-color 150ms ease-out}
.ldb-slider-seta:hover{border-color:var(--linha-forte)}
.ldb-slider-posicao{font-size:var(--t-peq);color:var(--tinta-suave);
  font-variant-numeric:tabular-nums;min-width:5ch;text-align:center}
/* Painel: a foto some por padrão (sem cor escolhida ainda) e a troca de
   foto respeita "reduzir movimento" — sem isso a troca é instantânea de
   qualquer forma (não há transição de opacidade/posição), então não há
   nada para desativar além de garantir que nunca haverá. */
@media (prefers-reduced-motion:no-preference){
  .ldb-painel-foto{transition:opacity 120ms ease-out}
}

.ldb-produto-txt{display:flex;flex-direction:column;gap:var(--esp-1)}

/* Preço e ficha técnica ganham mais ar entre si e os chips, para a área de
   compra não parecer colada na descrição. */
.ldb-cartao--produto .ldb-preco{margin-top:var(--esp-1)}

/* ---------- link discreto ---------- */
.ldb-link{background:none;border:0;padding:0 var(--esp-2);color:var(--tinta);font:inherit;
  font-size:var(--t-peq);text-decoration:underline;text-decoration-color:var(--linha-forte);
  cursor:pointer;min-height:44px}
.ldb-link:hover{text-decoration-color:var(--tinta)}

/* "Onde medir" ganha um ícone de régua e vira uma abertura com contorno
   próprio, para não se perder ao lado das abas de modelo — é o convite
   para o diagrama, não uma nota de rodapé do rótulo. */
.ldb-link--medir{display:inline-flex;align-items:center;gap:var(--esp-2);
  border:1px solid var(--linha);border-radius:var(--r-controle);
  padding:0 var(--esp-4);text-decoration:none;margin-left:auto}
.ldb-link--medir:hover{border-color:var(--linha-forte);text-decoration:none}

/* ---------- tabela de medidas ---------- */
/* A aba do modelo ativo e a caixa da tabela vivem juntas visualmente: a
   caixa herda o fio forte quando o rato passa perto, e o cabeçalho ganha
   fundo levemente distinto para ler como painel de instrumento, não como
   HTML de tabela cru. */
.ldb-tabela-caixa{padding:var(--esp-2) var(--esp-5) var(--esp-5);overflow-x:auto}
/* Dentro do modal "Onde medir" o cartão já tem o próprio respiro nas
   bordas, então a caixa da tabela não precisa repetir a margem lateral.
   flex-shrink:0 evita o colapso conhecido de item flex com overflow:auto
   no eixo principal — sem isto, o tamanho mínimo automático vira 0 em vez
   de acompanhar o conteúdo, e a tabela passa a vazar por cima da caixa. */
.ldb-tabela-caixa--diagrama{padding:var(--esp-2) 0 0;flex-shrink:0}
/* table-layout:fixed + larguras declaradas (revisão de 06/08/2026). Sem
   isso o navegador distribui as colunas pelo conteúdo: "TAMANHO" (7 letras
   em versalete espaçada) empurrava a coluna 1 para longe e as três colunas
   de números — todas de 2 dígitos — ficavam espalhadas pela largura, sem
   ler como um conjunto. Agora o rótulo fica com 34% e as medidas dividem o
   resto em três fatias iguais. */
.ldb-tabela{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;
  min-width:320px;table-layout:fixed}
/* Quatro colunas iguais desde que a de tamanho também passou a ser
   centrada: os 34% que ela tinha existiam para acomodar um rótulo alinhado
   à esquerda, e com tudo centrado aquela sobra só afastava a coluna das
   demais. */
.ldb-tabela th,.ldb-tabela td{width:25%}
/* As três colunas de medida ficam centradas na própria coluna (revisão de
   06/08/2026). Alinhadas à direita, cada número encostava na borda da sua
   fatia e a distância entre eles variava com a largura da tabela; com o
   centro, os valores caem sob o meio do cabeçalho e as três colunas leem
   como um conjunto. As QUATRO colunas são centradas, inclusive a de
   tamanho (revisão de 06/08/2026).

   tabular-nums (em .ldb-tabela) é o que faz a centralização não tremer —
   todos os dígitos têm a mesma largura, então "68" e "80" ocupam o mesmo
   espaço e ficam alinhados verticalmente mesmo centrados. */
.ldb-th{text-align:center;padding:var(--esp-4) var(--esp-3) var(--esp-3);border-bottom:1px solid var(--linha);
  font-family:var(--fonte-ui);font-weight:700;font-size:var(--t-rotulo);letter-spacing:.16em;
  text-transform:uppercase;color:var(--tinta-suave)}
/* .ldb-th--esq mantém o nome por causa do HTML, mas não alinha mais nem
   recua à esquerda: a coluna de tamanho passou a ser centrada como as
   outras. O padding-left:0 que existia aqui encolhia a coluna (114px
   contra 126px das demais, apesar do width:25%) e deslocava o "TAM." 6px
   do centro — padding entra no cálculo da largura da célula. */
/* O versalete tem espaçamento entre letras, e o vão sobra DEPOIS da última
   letra — o que empurra o texto centrado um fio para a direita. Um recuo
   extra à direita devolve o rótulo ao centro ótico sobre os números. */
.ldb-th:not(.ldb-th--esq){padding-right:calc(var(--esp-3) + .16em)}
.ldb-tabela td{padding:var(--esp-3);border-bottom:1px solid var(--linha);text-align:center;
  color:var(--tinta-suave);transition:background-color 150ms ease-out}
/* O tamanho continua com peso próprio (display, maior, tinta cheia) — é o
   que a pessoa procura na linha — mas agora centrado como o resto. */
.ldb-tabela td:first-child{font-weight:500;
  font-family:var(--fonte-display);font-size:var(--t-corpo-g);color:var(--tinta)}
/* (A última coluna não leva mais padding-right extra: aquilo existia para
   descolar os números da borda quando estavam alinhados à direita. Com o
   texto centrado, o recuo só empurraria os valores para fora do centro.) */
/* Ritmo de linha: cada linha ganha um leve realce ao passar o rato, para o
   olho seguir uma linha por vez numa tabela de quatro colunas numéricas. */
.ldb-tabela tbody tr:hover td{background:var(--agua-funda)}
.ldb-tabela tbody tr:last-child td{border-bottom:0}

/* A nota de rodapé some do peso do texto solto e ganha a mesma textura
   pontilhada do resto do sistema — não é aviso legal, é uma ficha técnica
   contínua da caixa da tabela acima. */
.ldb-nota--rodape{padding-top:var(--esp-4);border-top:1px dashed var(--linha)}

/* ---------- carrinho ---------- */
/* Estado vazio: convite, não desculpa. O anel pontilhado ecoa o medalhão
   vazio da caneca em #produtos — mesma linguagem de "espaço reservado por
   escolha" — e o botão retoma a ação em vez de deixar só um link solto
   dentro de uma frase. */
.ldb-vazio{padding:var(--esp-7) var(--esp-6);display:flex;flex-direction:column;
  align-items:center;text-align:center;gap:var(--esp-4)}
.ldb-vazio-anel{width:56px;height:56px;border-radius:var(--r-medalhao);
  border:1px dashed var(--linha-forte);flex:none}
.ldb-vazio-txt{display:flex;flex-direction:column;gap:var(--esp-1);max-width:38ch}
.ldb-vazio-titulo{color:var(--tinta)}

.ldb-item{display:flex;align-items:center;gap:var(--esp-4);padding:var(--esp-4);flex-wrap:wrap}
.ldb-item-foto{width:64px;height:64px;object-fit:cover;border-radius:var(--r-painel);
  border:1px solid var(--linha);flex:none}
.ldb-item-txt{flex:1 1 180px;display:flex;flex-direction:column;gap:var(--esp-1)}
.ldb-item-fim{display:flex;align-items:center;gap:var(--esp-4);margin-left:auto}
.ldb-remover{background:none;border:0;color:var(--tinta-suave);cursor:pointer;
  min-width:44px;min-height:44px;font:inherit;font-size:var(--t-peq);
  text-decoration:underline;text-decoration-color:var(--linha-forte)}
.ldb-remover:hover{color:var(--tinta)}
/* Subtotal de cada linha: largura mínima para os valores alinharem em
   coluna quando há mais de um item — lê como razão contábil, não como
   texto solto flutuando ao lado da quantidade. */
.ldb-item-fim .ldb-preco{min-width:6ch;text-align:right}
.ldb-total{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--esp-3);padding-top:var(--esp-3);border-top:1px solid var(--linha)}
.ldb-toast{padding:var(--esp-3) var(--esp-4);display:flex;align-items:center;
  justify-content:space-between;gap:var(--esp-3);flex-wrap:wrap}

/* ---------- formulário ---------- */
/* Quatro campos curtos (nome, WhatsApp, e-mail, núcleo) em duas colunas:
   o formulário fica com metade da altura de rolagem sem perder rótulo
   nenhum. auto-fit substitui a media query — abaixo de ~440px de coluna,
   colapsa para uma coluna sozinho. Observações fica fora da grade,
   full-width, porque é a única de resposta longa. */
.ldb-campos-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--esp-4) var(--esp-5)}
.ldb-campo-caixa{display:flex;flex-direction:column;gap:var(--esp-2)}
.ldb-campo{padding-top:var(--esp-2);padding-bottom:var(--esp-2);width:100%;box-sizing:border-box}
.ldb-campo--area{min-height:88px;padding:var(--esp-3);line-height:1.6;resize:vertical}
.ldb-check{display:flex;align-items:flex-start;gap:var(--esp-3);cursor:pointer;
  min-height:44px;padding:var(--esp-1) 0}
.ldb-check input{margin-top:.35em;flex:none;width:18px;height:18px;accent-color:var(--estrela)}
.ldb-fieldset{border:1px solid var(--linha);border-radius:var(--r-painel);
  padding:var(--esp-4) var(--esp-5);display:flex;flex-direction:column;gap:var(--esp-1);margin:0}
.ldb-fieldset legend{padding:0 var(--esp-2)}
/* Aviso de dados: contorno igual ao de qualquer cartão-info (Lei 4 — fio
   sempre presente), sem a borda mais forte de antes, que lia como alerta.
   Um selo circular com marca de checagem substitui o tom de "atenção" por
   um de "isso está cuidado" — reforço visual do texto de reasseguramento. */
.ldb-aviso{display:flex;gap:var(--esp-4);align-items:flex-start}
.ldb-aviso-icone{flex:none;width:32px;height:32px;border-radius:var(--r-medalhao);
  border:1px solid var(--linha-forte);color:var(--tinta-suave);
  display:flex;align-items:center;justify-content:center}

/* ---------- revisão ---------- */
.ldb-lista{margin:0;padding-left:var(--esp-5);display:flex;flex-direction:column;
  gap:var(--esp-2);font-size:var(--t-peq);color:var(--tinta-suave);line-height:1.6}
.ldb-dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:var(--esp-2) var(--esp-4);
  font-size:var(--t-peq);line-height:1.6}
.ldb-dl dt{color:var(--tinta-suave)}
.ldb-dl dd{margin:0;color:var(--tinta-suave)}
/* Estado vazio de "Seus dados": ocupa as duas colunas da grade, senão o
   texto cairia só na coluna da direita, alinhado como se fosse o valor de
   um rótulo que não existe. A cor acompanha o "Nenhum item no carrinho."
   do quadro ao lado — os dois são a mesma coisa, um aviso de que ainda
   falta preencher, e não podem ler com pesos diferentes. */
.ldb-dl-vazio{grid-column:1 / -1;color:var(--tinta-suave);
  font-size:var(--t-peq);line-height:1.6}
.ldb-finalizar{display:flex;align-items:center;gap:var(--esp-4);flex-wrap:wrap}

/* "Itens" (lista que cresce com o carrinho) e "Seus dados" (ficha fixa)
   têm alturas naturalmente diferentes — isso é legítimo, carrinho grande
   é carrinho grande. O problema não é a diferença de altura entre os
   dois cartões, é o vão morto DENTRO do cartão mais curto quando a grade
   estica os dois para a altura do mais alto.
   Subgrid foi tentado aqui e descartado: um item com grid-template-rows:
   subgrid é obrigado a ocupar as faixas inteiras do pai (a "área" que ele
   herda), então align-self:start não encolhe o cartão — ele continua alto
   e o vão só migra de "abaixo do texto" para "dentro da faixa subgrid",
   mesmo problema com outro nome. A saída simples: tirar o esticamento
   (align-items:start em vez de stretch, que é o padrão do Grid) para cada
   cartão ocupar só a altura do próprio conteúdo. Os rótulos "Itens" e
   "Seus dados" já caem na mesma linha de qualquer forma, porque os dois
   cartões começam no mesmo topo de grade e têm o mesmo padding — não
   precisa de subgrid para isso. */
.ldb-grade--revisao{align-items:start}

/* ---------- pagamento ---------- */
/* O QR é o herói do momento de pagar: a coluna do QR usa auto-fit com uma
   base de 260px, igual à técnica de .ldb-grade--produtos — quando as duas
   colunas não cabem lado a lado (telas estreitas), a grade empilha para
   uma coluna sozinha em vez de espremer o QR contra a coluna de dados.
   Sem isso, minmax fixo nas duas colunas encolhia o QR abaixo do legível
   em telas de celular. */
.ldb-pix{padding:var(--esp-6);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:var(--esp-6);align-items:center}
/* A coluna do QR não deve esticar além do necessário quando sobra espaço
   ao lado da coluna de dados — mantém o círculo de leitura num tamanho
   estável em vez de crescer para preencher metade da grade. */
.ldb-pix-qr{display:flex;flex-direction:column;gap:var(--esp-3);align-items:center;
  grid-column:span 1;max-width:320px;justify-self:start}
/* Zona quieta ao redor do QR: moldura clara com respiro generoso antes do
   módulo escuro começar, para o código nunca ficar colado no fio do
   cartão — mantém a área de silêncio que o leitor de QR precisa. */
.ldb-pix-qr-moldura{padding:var(--esp-4);background:var(--tinta);
  border-radius:var(--r-painel);display:inline-flex}
#qr-canvas{width:100%;max-width:288px;height:auto;display:block}
.ldb-pix-dados{display:flex;flex-direction:column;gap:var(--esp-4);align-self:stretch;
  justify-content:center}
/* Código do pedido e valor lado a lado: a mesma leitura rápida de par
   rótulo/valor que os cartões de #informacoes usam, sem disputar atenção
   com o QR à esquerda. */
.ldb-pix-par{display:flex;flex-wrap:wrap;gap:var(--esp-5) var(--esp-6)}
.ldb-pix-acoes{display:flex;flex-wrap:wrap;gap:var(--esp-2);margin-top:var(--esp-1)}
.ldb-codigo{margin:0;font-family:var(--fonte-display);font-size:var(--t-sub);
  letter-spacing:.08em;font-variant-numeric:tabular-nums}
.ldb-detalhes{padding:var(--esp-4) var(--esp-5)}
.ldb-detalhes summary{cursor:pointer;min-height:44px;display:flex;align-items:center}
.ldb-payload{display:block;margin-top:var(--esp-3);padding:var(--esp-3);
  background:var(--agua-funda);border-radius:var(--r-painel);font-size:var(--t-peq);
  line-height:1.7;word-break:break-all;user-select:all;color:var(--tinta-suave)}

/* Pedidos anteriores: cada linha vira uma faixa com fio e respiro em vez
   de texto de lista corrido — mesmo tratamento de "razão" do carrinho,
   aplicado a um histórico que também é dinheiro. */
/* ---------- lista do modal "Meus pedidos" ---------- */
/* Herda o desenho da antiga lista de pedidos anteriores, que vivia dentro da
   seção de pagamento até 07/08/2026: faixas separadas por fio, sem fundo nem
   sombra próprios (Lei 3 — profundidade é hairline). O flex-wrap é
   load-bearing: uma linha pode ter duas ações ("Ver QR e código" e "Pagar com
   cartão") e, no celular, elas descem em vez de espremer o código. */
.ldb-pedidos-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.ldb-pedido-linha{display:flex;align-items:center;justify-content:space-between;
  gap:var(--esp-3);flex-wrap:wrap;padding:var(--esp-4) 0;border-top:1px solid var(--linha)}
.ldb-pedido-linha:first-child{border-top:0}
.ldb-pedido-txt{display:flex;flex-direction:column;gap:var(--esp-1)}
/* A data existe para desempatar dois pedidos parecidos, não para ser lida
   antes deles: fica no menor corpo do sistema e em --tinta-suave, que passa
   AA em qualquer fundo (ao contrário de --tinta-fraca, que reprova sobre
   --superficie, o fundo desta caixa). tabular-nums alinha os dígitos em
   coluna, para a diferença entre 23h39 e 23h46 saltar aos olhos. */
.ldb-pedido-quando{font-size:var(--t-rotulo);color:var(--tinta-suave);
  font-variant-numeric:tabular-nums}
/* margin-left:auto empurra as ações para a direita mesmo quando o texto é
   curto, mantendo a coluna de botões alinhada entre as linhas. */
.ldb-pedido-acoes{display:flex;flex-wrap:wrap;gap:var(--esp-3);margin-left:auto}
/* No modal o código é referência, não o herói da tela como no #pagamento:
   cai para o corpo, mantendo o rastreamento e os dígitos tabulares. */
.ldb-codigo--peq{font-size:var(--t-corpo)}

/* ---------- passos ---------- */
.ldb-passos{list-style:none;margin:0;padding:0;counter-reset:passo}
/* O rótulo "Entrega" do último quadro divide esta regra com os números 1-4
   de propósito. Antes ele era um .ldb-rotulo (Karla 11px maiúsculo, tinta
   suave) contra os números em Fraunces 22px dourado: 18px de diferença de
   altura, e o texto do quadro começava numa linha diferente dos outros
   quatro. Mesma declaração = mesma caixa = quadros alinhados, e continua
   assim se o tamanho do número mudar um dia.

   text-transform:none preserva o "Entrega" em caixa alta e baixa: o rótulo
   veio de .ldb-rotulo, que é versalete, e --t-rotulo é a única família
   maiúscula do sistema (Voz). Aqui ele deixa de ser rótulo e passa a ser
   o par dos algarismos. */
.ldb-passo-n,
.ldb-passo--entrega .ldb-rotulo{font-family:var(--fonte-display);
  font-size:var(--t-sub);color:var(--estrela);
  letter-spacing:normal;text-transform:none;font-weight:400}

/* ---------- FAQ ---------- */
.ldb-faq{padding:var(--esp-4) var(--esp-5)}
.ldb-faq summary{cursor:pointer;min-height:44px;display:flex;align-items:center;
  gap:var(--esp-3);font-weight:500;list-style:none}
.ldb-faq summary::-webkit-details-marker{display:none}
.ldb-faq summary::before{content:'';width:8px;height:8px;border-radius:50%;
  border:1px solid var(--linha-forte);flex:none;transition:background-color 150ms ease-out}
.ldb-faq[open] summary::before{background:var(--estrela);border-color:var(--estrela)}
.ldb-faq p{margin:var(--esp-3) 0 0;padding-left:calc(8px + var(--esp-3));
  font-size:var(--t-peq);color:var(--tinta-suave);line-height:1.7;max-width:var(--medida-max)}

/* ---------- rodapé ---------- */
.ldb-rodape{background:var(--agua-funda);border-top:1px solid var(--linha);
  padding:var(--esp-7) var(--goteira)}
.ldb-rodape-caixa{display:flex;flex-direction:column;gap:var(--esp-2)}

/* ---------- modais ---------- */
.ldb-modal{position:fixed;inset:0;z-index:40;display:flex;align-items:center;
  justify-content:center;padding:var(--goteira)}
.ldb-modal[hidden]{display:none}
.ldb-modal-fundo{position:absolute;inset:0;background:rgba(22,40,31,.72)}
.ldb-modal-painel{position:relative;width:min(560px,100%);max-height:86vh;overflow-y:auto;
  padding:var(--esp-5);display:flex;flex-direction:column;gap:var(--esp-4)}
.ldb-modal-topo{display:flex;align-items:center;justify-content:space-between;gap:var(--esp-3)}
.ldb-fechar{background:none;border:0;color:var(--tinta);cursor:pointer;
  min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.ldb-diagrama{width:100%;max-width:280px;height:auto;align-self:center;display:block}

/* folha inferior: no celular sobe de baixo, ocupa a largura toda */
.ldb-modal--folha{align-items:flex-end;padding:0}
.ldb-folha{width:min(560px,100%);max-height:92vh;border-radius:var(--r-painel);
  margin:0 auto;gap:var(--esp-4)}
.ldb-folha-corpo{display:flex;flex-direction:column;gap:var(--esp-4);overflow-y:auto}
.ldb-folha-pe{display:flex;flex-direction:column;gap:var(--esp-3);
  padding-top:var(--esp-4);border-top:1px solid var(--linha)}
/* A foto do painel acompanha a largura da folha (revisão de 06/08/2026):
   antes havia um teto de 220px dentro de um modal de 560px, e a peça
   aparecia pequena justamente na tela em que se decide cor e tamanho.

   O teto agora é de ALTURA, não de largura, e por um motivo concreto: numa
   tela de 700px a foto quadrada de 547px sozinha empurrava os chips de
   modelo e cor para fora do viewport, exigindo rolar mais de 500px antes
   de conseguir escolher qualquer coisa. O painel existe para escolher, não
   para exibir. Com 38vh a foto cresce nas telas altas e cede nas baixas,
   sem media query. */
.ldb-slider--painel{width:100%;align-self:center}
/* A foto acompanha a largura da folha, mas com teto de ALTURA (38vh): numa
   tela de 700px a foto quadrada cheia sozinha empurrava os chips de modelo
   e cor para fora do viewport, exigindo rolar mais de 500px antes de poder
   escolher qualquer coisa. aspect-ratio + width:auto fazem a largura ceder
   junto com a altura, senão sobrariam faixas vazias dos lados. */
.ldb-painel-foto{width:auto;max-width:100%;max-height:38vh;aspect-ratio:1;
  object-fit:cover;margin-inline:auto;display:block;
  border-radius:var(--r-painel);border:1px solid var(--linha)}

/* trava o scroll do fundo quando um modal está aberto */
body.ldb-travado{overflow:hidden}

/* "Ver medidas" abre o diagrama por cima do painel de opções, sem fechá-lo
   — a classe entra só quando os dois modais estão empilhados, para o
   diagrama ficar acima do painel na pilha e o painel ganhar inert (a
   navegação por teclado não deve escapar para a camada de baixo). */
.ldb-modal--empilhado{z-index:41}

/* ---------- zoom da foto ---------- */
/* A foto de produto vira botão: cursor e um fio no hover avisam que dá
   para ampliar, sem ícone extra sobre a imagem (Lei 3 — profundidade é
   fio, nunca sombra). */
.ldb-ampliavel{cursor:zoom-in}
.ldb-ampliavel:focus-visible{outline:2px solid var(--estrela);outline-offset:3px}

/* O zoom não usa .ldb-modal-painel: aquele é uma caixa de 560px com
   scroll, e aqui a foto é o conteúdo — a caixa acompanha a imagem, não o
   contrário. Sem fundo de superfície, para a peça aparecer contra o
   escurecido e nada competir com ela. */
/* Escurecido bem mais forte que o dos outros modais (.72): aqui o conteúdo
   é uma foto sem caixa por baixo, então o texto da página aparecia através
   do fundo e disputava com a peça. */
.ldb-modal--zoom .ldb-modal-fundo{background:rgba(11,20,16,.94)}
.ldb-zoom-caixa{position:relative;display:flex;flex-direction:column;
  gap:var(--esp-3);max-width:min(900px,100%);max-height:92vh}
.ldb-zoom-topo{display:flex;align-items:center;justify-content:space-between;
  gap:var(--esp-3);min-height:44px}
/* min-height:0 é o que permite o palco encolher: um item flex tem mínimo
   automático igual ao conteúdo, então sem isto a foto empurraria as setas
   para fora da tela em telas baixas. */
.ldb-zoom-palco{flex:1;min-height:0;display:flex;align-items:center;
  justify-content:center}
.ldb-zoom-foto{max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;border-radius:var(--r-painel);border:1px solid var(--linha);
  display:block}
.ldb-zoom-pe{display:flex;align-items:center;justify-content:center;
  gap:var(--esp-3);min-height:44px}