/* ================================================================
   componentes.css — gerado por concatenacao de src-css/*.css
   Nao edite este arquivo: edite o fonte em src-css/ e rode
   ./consolidar_css.sh novamente.
   ================================================================ */

/* ===== banner-full ===== */
/* ==========================================================================
   Secao: banner-full
   Full-bleed de verdade: o elemento externo nao usa .wrap, entao ocupa a
   largura total de <main>. Evita de proposito o truque `width: 100vw`, que
   soma a largura da barra de rolagem e cria rolagem horizontal no desktop.
   ========================================================================== */

/* Medido na referencia (viewport 1600): este banner NAO e full-bleed. Ele fica
   dentro do container (1232x604, raio 8) e a secao inteira ocupa 676px —
   604 de imagem + 72 de respiro. A versao anterior sangrava os 1600px de
   largura e tinha 420px de altura: 256px a menos e proporcao errada. */
.bannerf {
  position: relative;
  display: grid;
  align-content: center;
  width: calc(100% - var(--gutter) * 2);
  max-width: calc(var(--largura) - var(--gutter) * 2);
  margin-inline: auto;
  margin-bottom: calc(var(--e-7) + var(--e-5));   /* 72px medidos */
  overflow: hidden;
  border-radius: var(--r-8);
  isolation: isolate; /* prende scrim/overlay a esta pilha, sem z-index alto */
  background: var(--c-fundo-3);
}

/* a altura passa a sair da proporcao da arte (1232/604 medidos), nao de um
   min-height fixo que ignorava a largura do container */
.bannerf--baixa { aspect-ratio: 1232 / 380; }
.bannerf--media { aspect-ratio: 1232 / 604; }
.bannerf--alta  { aspect-ratio: 1232 / 760; }

/* --- imagem --- */
.bannerf__midia {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.bannerf__midia picture { display: block; height: 100%; }

.bannerf__midia img,
.bannerf__placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.bannerf:hover .bannerf__midia img { transform: scale(1.03); }

.bannerf__scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: color-mix(in srgb, var(--c-texto) var(--bannerf-scrim, 30%), transparent);
}

/* --- texto sobreposto --- */
.bannerf__conteudo {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-4);
  padding-block: var(--e-8);
}

.bannerf--centro .bannerf__conteudo { align-items: center; text-align: center; }
.bannerf--direita .bannerf__conteudo { align-items: flex-end; text-align: right; }

.bannerf--texto-claro { --bannerf-cor: var(--c-fundo); }
.bannerf--texto-escuro { --bannerf-cor: var(--c-texto); }

.bannerf__titulo {
  margin: 0;
  color: var(--bannerf-cor);
  font-size: var(--t-40);
  max-width: 20ch;
}

.bannerf__texto {
  margin: 0;
  color: var(--bannerf-cor);
  font-size: var(--t-16);
  max-width: 46ch;
}

/* O CTA e um span com cara de botao: o link real cobre o banner inteiro e
   um <a> dentro de <a> quebraria a navegacao por teclado. */
.bannerf__btn--primario { background: var(--c-azul); color: var(--c-fundo); }
.bannerf__btn--claro { background: var(--c-fundo); color: var(--c-azul); }

.bannerf:hover .bannerf__btn--primario { background: var(--c-azul-claro); }
.bannerf:hover .bannerf__btn--claro { background: var(--c-tint); }

/* --- link que cobre o banner --- */
.bannerf__area {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.bannerf__area:focus-visible {
  outline: 3px solid var(--c-fundo);
  outline-offset: -6px;
}

@media (max-width: 640px) {
  .bannerf__conteudo { padding-block: var(--e-6); }
  .bannerf__titulo { font-size: var(--t-24); }
  .bannerf__texto { font-size: var(--t-14); }
}

/* imagem de fallback preenche a faixa como a do editor faria */
.bannerf__img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ===== banner-split ===== */
/* ==========================================================================
   Secao: banner-split
   Duas colunas iguais: midia arredondada de um lado, bloco de texto + CTA do
   outro. O lado da imagem e a cor de fundo vem de setting.
   ========================================================================== */

.bsplit--fundo-branco { background: var(--c-fundo); }
.bsplit--fundo-suave  { background: var(--c-fundo-2); }
.bsplit--fundo-tint   { background: var(--c-tint); }

/* Medido na referencia (viewport 1600): a secao ocupa 518px, sendo 444px de
   conteudo e 74px de respiro embaixo; nao ha padding em cima. A foto e o
   cartao de texto tem 606/610px com 16px entre eles — nao os 48px de antes. */
.bsplit { padding-block: 0 calc(var(--e-7) + var(--e-5)); }

.bsplit__grade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: var(--e-4);
}

/* inverter e so ordem visual — o DOM continua imagem antes do texto */
.bsplit__grade--invertida .bsplit__midia { order: 2; }

.bsplit__midia {
  border-radius: var(--r-8);        /* referencia usa raio 8, nao 16 */
  overflow: hidden;
  background: var(--c-fundo-3);
}

/* proporcao medida na referencia: 606x444 */
.bsplit__midia img,
.bsplit__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 606 / 444;
  object-fit: cover;
}

.bsplit__placeholder { fill: var(--c-borda-2); }

/* na referencia o texto mora dentro de um cartao branco com borda 1px e
   raio 16, com 64px de folga interna — nao solto sobre o fundo da secao */
.bsplit__conteudo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--e-8);
  background: var(--c-fundo);
  border: 1px solid var(--c-borda);
  border-radius: var(--r-16);
}

.bsplit__sobretitulo {
  margin: 0 0 var(--e-2);
  font-size: var(--t-12);
  font-weight: var(--p-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  /* ciano nao alcanca contraste em texto pequeno; fica reservado para
     elementos grandes e aqui entra o cinza secundario */
  color: var(--c-texto-2);
}

/* referencia: 32/40 em azul-link (#489ef9), nao no azul cheio dos titulos */
.bsplit__titulo {
  font-size: var(--t-32);
  line-height: 1.25;
  color: var(--c-azul-link);
  margin-bottom: var(--e-4);
}

.bsplit__texto {
  font-size: var(--t-18);          /* referencia: 18/24; antes 16 */
  line-height: 1.334;
  color: var(--c-texto-2);
  max-width: 46ch;
}

.bsplit__texto > :last-child { margin-bottom: 0; }

.bsplit__acao { margin-top: var(--e-5); }

@media (max-width: 900px) {
  .bsplit__grade {
    grid-template-columns: 1fr;
    gap: var(--e-5);
  }

  .bsplit__conteudo { padding: var(--e-5); }

  /* empilhado, a imagem volta para o topo nas duas variacoes */
  .bsplit__grade--invertida .bsplit__midia { order: 0; }

  .bsplit__titulo { font-size: var(--t-24); }
  .bsplit__texto { max-width: none; }
}

/* ===== barra-anuncio ===== */
/* ==========================================================================
   Secao: barra-anuncio
   Faixa azul no topo, com os cantos de baixo arredondados. A esquerda a
   mensagem rotativa; a direita os links utilitarios (so no desktop).

   Medidas conferidas no site de referencia a 1470px de viewport:
     altura 52px, raio 0 0 8px 8px, mensagem 14px / line-height 18px branca,
     links 14px / line-height 21px brancos com 16px de intervalo.
   ========================================================================== */

.anuncio {
  background: var(--c-azul);
  color: var(--c-fundo);
  font-size: var(--t-14);
  font-weight: var(--p-regular);

  /* Faixa sangrando de ponta a ponta, sem raio: na referencia ela encosta nas
     bordas da janela e o hero comeca imediatamente abaixo. O raio que existia
     aqui abria uma falha clara nos cantos por cima da foto do hero. */
  position: relative;
  z-index: 3;
}

/* variante clara: sobre ciano o texto escuro tem contraste melhor que o branco */
.anuncio--ciano {
  background: var(--c-ciano);
  color: var(--c-texto);
}

/* O card do cabecalho cobre os ultimos --cab-encaixe pixels da faixa.
   Centralizar o conteudo nos 52px cheios joga o texto para o meio da faixa
   INTEIRA — inclusive a parte escondida —, e ele acaba encostado na borda do
   card.

   Recuar embaixo exatamente o tanto que fica coberto tira essa parte da conta:
   o texto centraliza na tira que se ve. Medido na referencia: centro do texto
   em y=17, que e (52 - 17) / 2. */
.anuncio__wrap {
  display: flex;
  align-items: center;
  gap: var(--e-6);
  min-height: 52px;
  padding-bottom: var(--cab-encaixe, 17px);
}

/* A lista toma o espaco que sobra a esquerda dos atalhos e centra a mensagem
   nele — e assim que a referencia posiciona o texto, nem colado na borda nem
   no meio da janela.

   overflow hidden porque as mensagens entram por baixo e saem por cima: sem o
   corte elas apareceriam invadindo a faixa durante a transicao. */
.anuncio__lista {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}

/* sem links utilitarios configurados a lista e o ultimo filho: ai ela toma a
   faixa inteira e a mensagem volta ao centro, em vez de ficar encolhida na
   esquerda com um vazio enorme do lado */
.anuncio__lista:last-child {
  flex: 1 1 auto;
}

/* Todas as mensagens ocupam a mesma celula: a altura da faixa fica constante
   na troca e o cabecalho logo abaixo nao pula.

   O giro e vertical, como na referencia: a mensagem que entra sobe de baixo e
   a que sai continua subindo e some por cima. Nao e um fade de uma sobre a
   outra — sao tres estados, e por isso o JS marca tambem quem esta saindo. */
.anuncio__item {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  line-height: 1.3;
  text-align: center;

  /* estado de espera: abaixo da faixa, fora do corte */
  transform: translateY(115%);
  opacity: 0;
  visibility: hidden;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1), opacity .3s linear;
}

/* visibility (e nao display) mantem o grid estavel e ainda tira o item
   inativo do foco de teclado e do leitor de tela */
.anuncio__item.is-ativo {
  transform: none;
  opacity: 1;
  visibility: visible;
}

/* quem sai sobe: sem este estado o item voltaria para baixo, e a mensagem
   pareceria descer em vez de rolar */
.anuncio__item.is-saindo {
  transform: translateY(-115%);
  opacity: 0;
  visibility: visible;
}

.anuncio__link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.anuncio__link:hover {
  opacity: .8;
}

/* --- links utilitarios, encostados a direita --- */
.anuncio__nav {
  margin-left: auto;
  min-width: 0;
}

.anuncio__links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--e-1) var(--e-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.anuncio__link-util {
  color: inherit;
  font-size: var(--t-14);
  line-height: 1.5;
  white-space: nowrap;
}

.anuncio__link-util:hover {
  opacity: .8;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- abaixo do desktop largo ---
   Medido: mensagem (~369px) + 32 de intervalo + os 7 atalhos (~696px) pedem
   1129px de viewport. Abaixo disso eles quebrariam em duas linhas e a faixa
   passaria dos 52px, entao saem de cena e a mensagem volta a ocupar a faixa
   inteira. Os mesmos destinos continuam nas colunas do rodape. */
@media (max-width: 1199px) {
  .anuncio__nav {
    display: none;
  }

  .anuncio__lista {
    flex: 1 1 auto;
  }
}

/* O encaixe do card nao muda por breakpoint, entao o recuo tambem nao: o que
   muda e so a altura da faixa. */
@media (max-width: 899px) {
  .anuncio__wrap {
    min-height: 44px;
  }
}

@media (max-width: 640px) {
  .anuncio {
    font-size: var(--t-12);
  }

  .anuncio__wrap {
    min-height: 40px;
  }
}

/* Sem animacao, a troca vira corte seco: o item so aparece ou some, sem
   deslocamento — o movimento vertical e justamente o que incomoda quem pediu
   para reduzir. */
@media (prefers-reduced-motion: reduce) {
  .anuncio__item {
    transform: none;
    transition: none;
  }

  .anuncio__item:not(.is-ativo) {
    opacity: 0;
    visibility: hidden;
  }
}

/* ===== blog-creamy ===== */
/* ==========================================================================
   Secao: blog-creamy

   Mesmo cabecalho das prateleiras (titulo azul de 28px a esquerda, "Ver tudo"
   com seta diagonal ao lado, subtitulo embaixo), e uma grade de tres cards.
   O card e so foto, data, titulo e resumo — sem borda, como na referencia.
   ========================================================================== */

.blog__cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e-2) var(--e-3);
  margin-bottom: var(--e-6);
}

.blog__intro {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e-2) var(--e-3);
  /* o subtitulo quebra para a linha de baixo, abaixo do titulo */
  flex: 1 1 100%;
  order: 3;
}

.blog__titulo {
  flex: 0 0 auto;
  order: 1;
  margin: 0;
  font-family: var(--f-wide, var(--f-titulo));
  font-size: var(--t-28);
  font-weight: var(--p-bold);
  line-height: 1.5;
  letter-spacing: normal;
  text-transform: none;
  color: var(--c-azul);
}

/* o link fica colado no titulo, nao encostado na borda direita da secao */
.blog__ver-todos {
  order: 2;
  margin-left: 0;
}

.blog__lista {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.blog__card {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.blog__foto {
  overflow: hidden;
  border-radius: var(--r-8);
  background: var(--c-fundo-2);
  aspect-ratio: 16 / 10;
}

.blog__foto img,
.blog__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transicao);
}

.blog__card:hover .blog__foto img { transform: scale(1.03); }

.blog__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
}

.blog__data {
  margin: 0;
  font-size: var(--t-12);
  color: var(--c-texto-4);
}

.blog__post-titulo {
  margin: 0;
  font-size: var(--t-18);
  font-weight: var(--p-semi);
  line-height: 1.3;
  color: var(--c-azul);
}

.blog__card:hover .blog__post-titulo { text-decoration: underline; text-underline-offset: 3px; }

.blog__resumo {
  margin: 0;
  font-size: var(--t-14);
  line-height: 1.6;
  color: var(--c-texto-2);
}

@media (max-width: 900px) {
  .blog__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .blog__lista { grid-template-columns: minmax(0, 1fr); }
}

/* ===== busca-carrinho ===== */
/* --- busca ---------------------------------------------------------------
   O cabecalho separa rotulo e termo em duas linhas: o termo sozinho no h1
   deixa claro o que foi buscado sem repetir a frase inteira do titulo.
   A grade, a barra e a paginacao reaproveitam .colecao__* de colecao.css.
   ------------------------------------------------------------------------ */

.busca__cabecalho {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  margin-bottom: var(--e-5);
}

.busca__rotulo {
  margin: 0;
  font-size: var(--t-14);
  color: var(--c-texto-3);
}

.busca__termo {
  margin: 0;
  font-family: var(--f-wide, var(--f-titulo));
  font-size: var(--t-32);
  color: var(--c-azul);
}

.busca__form {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  max-width: 520px;
  margin-top: var(--e-3);
  padding: 0 var(--e-3);
  border: 1px solid var(--c-borda);
  border-radius: var(--r-pill);
  background: var(--c-fundo-2);
}

.busca__campo {
  flex: 1 1 auto;
  min-width: 0;               /* sem isso o input estoura o flex no mobile */
  padding: var(--e-3) 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
}
.busca__campo:focus { outline: none; }
.busca__form:focus-within { border-color: var(--c-azul); }

.busca__enviar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--r-circ);
  background: transparent;
  color: var(--c-azul);
  cursor: pointer;
}
.busca__enviar svg { width: 18px; height: 18px; }

/* --- carrinho ------------------------------------------------------------ */

.carrinho__titulo {
  margin: 0 0 var(--e-5);
  font-family: var(--f-wide, var(--f-titulo));
  font-size: var(--t-32);
  color: var(--c-azul);
}

.carrinho__vazio {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-4);
  padding: var(--e-6) 0;
}

/* --- barra de frete --- */
.carrinho__frete {
  margin-bottom: var(--e-5);
  padding: var(--e-4);
  border-radius: var(--r-16);
  background: var(--c-tint);
}
.carrinho__frete p { margin: 0 0 var(--e-3); font-size: var(--t-14); }
.carrinho__frete-ok { color: var(--c-azul); font-weight: var(--p-bold); }

.carrinho__barra {
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--c-fundo-3);
  overflow: hidden;
}
.carrinho__barra-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--c-azul);
  transition: width var(--transicao);
}
@media (prefers-reduced-motion: reduce) {
  .carrinho__barra-fill { transition: none; }
}

/* --- linhas --- */
.carrinho__lista { list-style: none; margin: 0; padding: 0; }

/* Grade em vez de flex: as colunas de quantidade e de remover ficam alinhadas
   entre linhas mesmo quando um nome de produto ocupa duas linhas. */
.carrinho__item {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  grid-template-areas:
    "midia corpo quant"
    "midia remover remover";
  gap: var(--e-3) var(--e-4);
  align-items: start;
  padding: var(--e-4) 0;
  border-bottom: 1px solid var(--c-borda);
}

.carrinho__midia { grid-area: midia; }
.carrinho__midia img {
  width: 100%;
  border-radius: var(--r-8);
  background: var(--c-fundo-3);
}

.carrinho__corpo { grid-area: corpo; }
.carrinho__nome {
  font-family: var(--f-titulo);
  font-weight: var(--p-bold);
  color: var(--c-texto);
  text-decoration: none;
}
.carrinho__nome:hover { text-decoration: underline; }
.carrinho__variante { margin: var(--e-1) 0 0; font-size: var(--t-12); color: var(--c-texto-3); }
.carrinho__preco { margin: var(--e-2) 0 0; font-weight: var(--p-bold); }

.carrinho__quant {
  grid-area: quant;
  display: flex;
  align-items: center;
  gap: var(--e-2);
}
.carrinho__passo {
  width: 32px;
  height: 32px;
  border: 1px solid var(--c-borda);
  border-radius: var(--r-circ);
  background: var(--c-fundo);
  font-size: var(--t-16);
  line-height: 1;
  cursor: pointer;
}
.carrinho__passo:hover { border-color: var(--c-azul); color: var(--c-azul); }
/* tabular-nums evita o contador "pular" de largura ao passar de 9 para 10 */
.carrinho__valor { min-width: 24px; text-align: center; font-variant-numeric: tabular-nums; }

.carrinho__remover {
  grid-area: remover;
  justify-self: start;
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--t-12);
  color: var(--c-texto-3);
  text-decoration: underline;
  cursor: pointer;
}
.carrinho__remover:hover { color: var(--c-azul); }

/* --- rodape --- */
.carrinho__rodape {
  margin-top: var(--e-5);
  margin-left: auto;
  max-width: 420px;
}

.carrinho__subtotal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0;
  font-size: var(--t-18);
}
.carrinho__subtotal strong { font-size: var(--t-24); color: var(--c-azul); }

.carrinho__aviso {
  margin: var(--e-2) 0 var(--e-4);
  font-size: var(--t-12);
  color: var(--c-texto-3);
}

.carrinho__acoes { display: flex; gap: var(--e-3); }
.carrinho__finalizar { flex: 1 1 auto; }

@media (max-width: 640px) {
  .carrinho__item {
    grid-template-columns: 72px 1fr;
    grid-template-areas:
      "midia corpo"
      "midia quant"
      "remover remover";
  }
  .carrinho__rodape { max-width: none; }
  .carrinho__acoes { flex-direction: column; }
  .busca__termo, .carrinho__titulo { font-size: var(--t-24); }
}

/* ===== cabecalho ===== */
/* ==========================================================================
   Secao: cabecalho
   Card branco flutuante com logo | menu | acoes. Abaixo de 1281px a busca
   recolhe no botao de lupa; abaixo de 1080px o menu vira drawer lateral.

   Medidas conferidas no site de referencia a 1470px de viewport:
     card 1232x80 com raio 8px, sombra rgba(99,116,133,.06) 0 4px 8px 3px,
     recuo interno 32px, encaixado 17px por cima da barra de anuncio;
     logo 112px; menu 14px/400 sem caixa alta em #757575 com 16px de intervalo;
     busca em pill 199x40 de fundo #efeff0; icones de 16px, bloco de 263px.
   ========================================================================== */

/* O sticky precisa morar no wrapper que a Shopify gera (classe vinda do
   schema): grudado no .cab de dentro ele descolaria assim que o wrapper,
   que tem a mesma altura, saisse da viewport. O :has le a opcao do editor
   e, onde nao houver suporte, o cabecalho apenas nao fixa. */
/* Quanto o card do cabecalho sobe por cima da faixa de anuncio. Mora no :root
   porque a barra de anuncio tambem precisa do valor: e por ele que ela sabe
   quanto do proprio corpo fica escondido, para centralizar o texto no que
   sobra a vista. */
:root {
  --cab-encaixe: 17px;
}

.secao-cabecalho {
  position: relative;
  z-index: 30;
}

/* o card sobe por cima da faixa azul: 52 (faixa) + 80 (card) - 17 = 115px de
   altura total, igual ao referencia. So vale quando a faixa esta logo acima —
   sem ela o cabecalho nao teria em que encaixar e ficaria cortado no topo. */
.secao-anuncio + .secao-cabecalho {
  margin-top: calc(var(--cab-encaixe) * -1);
}

/* Quanto o card ainda ocupa de fluxo depois de encaixar na faixa (80 - 17).
   Na referencia esse espaco nao existe: o hero comeca colado na faixa azul e o
   card branco flutua por cima dele. Quem usa isso e a primeira secao da pagina
   (ver `main > :first-child` em hero-slider.css); fica aqui porque o valor e
   do cabecalho e muda junto com a altura dele. */
:root {
  --cab-ocupa: 63px;
}

@media (max-width: 1079px) {
  :root {
    --cab-ocupa: 43px;
  }
}

.secao-cabecalho:has(.cab--fixo) {
  position: sticky;
  top: 0;
}

.cab {
  --cab-overlay: rgba(0, 0, 0, .45);
  --cab-drawer-largura: 320px;
  --cab-altura: 80px;
  /* azul lavado dos chevrons do menu, medido na referencia */
  --cab-seta-cor: color-mix(in srgb, var(--c-azul) 35%, #fff);

  position: relative;
}

/* referencia de posicao da faixa de busca recolhida: presa aqui, e nao no
   .cab, ela abre alinhada com as bordas do card em vez de sangrar na tela */
.cab__envoltorio {
  position: relative;
}

/* o card branco: e o .cab__barra que carrega o desenho, nao o .cab, para o
   azul da faixa continuar aparecendo nas laterais e por tras do topo */
.cab__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-5);
  min-height: var(--cab-altura);
  padding-inline: var(--e-6);
  background: var(--c-fundo);
  border-radius: var(--r-8);
  box-shadow: 0 4px 8px 3px color-mix(in srgb, var(--c-texto-2) 6%, transparent);
}

.cab__lado {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  min-width: 0;
}

.cab__lado--dir {
  justify-content: flex-end;
  /* busca 199 + 8 + acao 24 + 8 + acao 24 = 263px, igual ao referencia */
  gap: var(--e-2);
}

/* --- logo --- */
.cab__logo {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
}

.cab__logo img {
  width: var(--cab-logo, 112px);
  height: auto;
  /* sem isto o logo estoura o container em telas de 320px e passa por cima
     dos icones da direita (medido: sobreposicao de 47px) */
  max-width: 100%;
}

.cab__logo-texto {
  font-family: var(--f-titulo);
  font-size: var(--t-20);
  font-weight: var(--p-black);
  color: var(--c-azul);
  letter-spacing: -.01em;
}

/* --- botoes de icone --- */
.cab__acao {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  /* 24px e o minimo de alvo de toque da WCAG 2.5.8; o referencia usa so os
     16px do desenho, o que reprovaria no criterio */
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--r-circ);
  background: transparent;
  color: var(--c-texto);
  cursor: pointer;
  transition: color var(--transicao);
}

.cab__acao:hover {
  color: var(--c-azul);
  opacity: 1;
}

.cab__acao svg {
  width: 16px;
  height: 16px;
}

/* O contador era absoluto no canto do botao e cobria o desenho da sacola assim
   que entrava o primeiro item. Na referencia ele fica AO LADO do icone, como
   uma pilula — entao o botao do carrinho cresce em largura e os dois dividem a
   linha. Os outros .cab__acao continuam quadrados de 24px. */
.cab__acao--carrinho {
  width: auto;
  min-width: 24px;
  gap: var(--e-1);
  padding-inline: 2px;
}

.cab__contador {
  flex: 0 0 auto;
  min-width: 18px;
  height: 18px;
  padding-inline: var(--e-1);
  border-radius: var(--r-pill);
  background: var(--c-azul);
  color: #fff;
  font-size: var(--t-10);
  font-weight: var(--p-bold);
  line-height: 18px;
  text-align: center;
}

/* hamburguer desenhado em CSS: evita depender de um icone a mais no snippet */
.cab__hamburguer,
.cab__hamburguer::before,
.cab__hamburguer::after {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: var(--r-4);
  background: currentColor;
}

.cab__hamburguer {
  position: relative;
}

.cab__hamburguer::before,
.cab__hamburguer::after {
  content: "";
  position: absolute;
  left: 0;
}

.cab__hamburguer::before { top: -6px; }
.cab__hamburguer::after  { top: 6px; }

/* --- menu do desktop --- */
.cab__nav {
  min-width: 0;
}

/* Sem overflow aqui de proposito: um container de rolagem cortaria o
   .cab__submenu, que e absoluto e sai da caixa. O que impede a quebra de
   linha (barra de 80 -> 176px, medido a 900 e 1024px) e a busca virar botao
   abaixo de 1281px, liberando os 175px que faltavam ao menu. */
.cab__nav-lista {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: var(--e-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cab__nav-item {
  position: relative;
  flex: 0 0 auto;
}

/* o link ocupa a altura toda do card para o submenu abrir colado nele */
.cab__nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  min-height: var(--cab-altura);
  color: var(--c-texto-3);
  font-size: var(--t-14);
  font-weight: var(--p-regular);
  letter-spacing: normal;
  line-height: 1.4;
  text-transform: none;
  white-space: nowrap;
}

.cab__nav-link:hover,
.cab__nav-link[aria-current="page"] {
  color: var(--c-azul);
  opacity: 1;
}

/* Chevron de 12px do item com submenu. Desenhado em CSS porque a biblioteca
   de icones so tem seta com haste: girada, ela vira uma flecha pesada, e nao
   o traco fino que o referencia usa. */
.cab__nav-seta {
  display: inline-block;
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  position: relative;
  transition: transform var(--transicao);
}

/* O chevron NAO herda a cor do link. Em currentColor ele saia no mesmo tom do
   texto e ficava pesado — na referencia o traco e visivelmente mais claro que
   a palavra, quase um azul lavado, e mais fino (1.2 contra 1.5). */
.cab__nav-seta::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 2px;
  width: 6px;
  height: 6px;
  border-right: 1.2px solid var(--cab-seta-cor);
  border-bottom: 1.2px solid var(--cab-seta-cor);
  transform: rotate(45deg);
}

/* no hover o item inteiro escurece, entao a seta acompanha o link */
.cab__nav-item--pai:hover .cab__nav-seta::before,
.cab__nav-item--pai:focus-within .cab__nav-seta::before {
  border-color: var(--c-azul);
}

.cab__nav-item--pai:hover .cab__nav-seta,
.cab__nav-item--pai:focus-within .cab__nav-seta {
  transform: rotate(180deg);
}

.cab__submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 2;
  min-width: 200px;
  margin: 0;
  padding: var(--e-2);
  list-style: none;
  background: var(--c-fundo);
  border: 1px solid var(--c-borda);
  border-radius: var(--r-8);
  box-shadow: var(--sombra-2);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 4px);
  transition: opacity var(--transicao), transform var(--transicao);
}

/* focus-within junto do hover: o submenu tambem abre navegando por teclado */
.cab__nav-item--pai:hover .cab__submenu,
.cab__nav-item--pai:focus-within .cab__submenu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.cab__submenu-link {
  display: block;
  padding: var(--e-2) var(--e-3);
  border-radius: var(--r-4);
  color: var(--c-texto);
  font-size: var(--t-14);
}

.cab__submenu-link:hover {
  background: var(--c-tint);
  color: var(--c-azul);
  opacity: 1;
}

/* --- busca --- */
.cab__busca {
  flex: 0 1 auto;
  min-width: 0;
}

/* pill cinza sem contorno; o cinza sai do mix de dois tokens porque o
   #efeff0 medido no referencia cai entre --c-fundo-3 e --c-borda */
.cab__busca-form {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  width: 199px;
  max-width: 100%;
  height: 40px;
  padding-inline: var(--e-4);
  border: 0;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--c-fundo-3) 70%, var(--c-borda));
}

.cab__busca-form:focus-within {
  outline: 2px solid var(--c-azul);
  outline-offset: 1px;
}

.cab__busca-campo {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--f-corpo);
  font-size: var(--t-12);
  line-height: 1.5;
  color: var(--c-texto);
}

.cab__busca-campo::placeholder {
  color: var(--c-texto-4);
}

.cab__busca-campo:focus {
  outline: none;
}

/* lupa sem botao azul: no referencia e so o desenho dentro do pill */
.cab__busca-enviar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--c-texto-4);
  cursor: pointer;
  transition: color var(--transicao);
}

.cab__busca-enviar:hover {
  color: var(--c-azul);
}

.cab__busca-enviar svg {
  width: 16px;
  height: 16px;
}

/* botao lupa: so existe no mobile, onde o campo fica escondido */
.cab__acao--busca {
  display: none;
}

/* --- drawer mobile --- */
.cab__drawer {
  display: none;
}

.cab__drawer.is-aberto {
  display: block;
}

.cab__drawer-fundo {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--cab-overlay);
}

.cab__drawer-painel {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 41;
  width: min(var(--cab-drawer-largura), 88vw);
  padding: var(--e-4);
  overflow-y: auto;
  background: var(--c-fundo);
  box-shadow: var(--sombra-2);
}

.cab__drawer-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding-bottom: var(--e-3);
  border-bottom: 1px solid var(--c-borda);
}

.cab__drawer-titulo {
  font-family: var(--f-titulo);
  font-size: var(--t-14);
  font-weight: var(--p-bold);
  color: var(--c-azul);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.cab__drawer-lista,
.cab__drawer-sub {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cab__drawer-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  padding: var(--e-3) 0;
  border-bottom: 1px solid var(--c-borda);
  color: var(--c-texto);
  font-size: var(--t-14);
  font-weight: var(--p-semi);
  cursor: pointer;
}

.cab__drawer-grupo summary {
  list-style: none;
}

.cab__drawer-grupo summary::-webkit-details-marker {
  display: none;
}

.cab__drawer-seta {
  display: inline-flex;
  color: var(--c-texto-3);
  transition: transform var(--transicao);
}

.cab__drawer-seta svg {
  width: 16px;
  height: 16px;
}

.cab__drawer-grupo[open] .cab__drawer-seta {
  transform: rotate(90deg);
}

.cab__drawer-sub {
  padding: var(--e-2) 0 var(--e-3) var(--e-4);
}

.cab__drawer-sublink {
  display: block;
  padding: var(--e-2) 0;
  color: var(--c-texto-2);
  font-size: var(--t-14);
}

.cab__drawer-conta {
  margin-top: var(--e-5);
}

/* trava o scroll do documento enquanto o drawer esta aberto */
body.cab-sem-scroll {
  overflow: hidden;
}

/* --- tablet largo: menu ainda visivel, busca recolhida ---
   Medido com o menu de 6 itens do referencia (~700px de lista): a barra so
   cabe em uma linha se o card interno tiver >=1121px com a busca aberta
   (viewport >=1217) ou >=946px com ela recolhida (viewport >=1042). Os dois
   cortes abaixo levam folga sobre esses numeros; sem eles a barra passava de
   80px para 176px em 1025 e 1201px. */
@media (max-width: 1280px) {
  .cab__acao--busca {
    display: inline-flex;
  }

  /* a busca sai do fluxo da barra e vira uma faixa sob o cabecalho */
  .cab__busca {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    padding: var(--e-3) var(--gutter);
    background: var(--c-fundo);
    border-bottom: 1px solid var(--c-borda);
    border-radius: 0 0 var(--r-8) var(--r-8);
    box-shadow: var(--sombra);
    z-index: 3;
  }

  .cab__busca.is-aberta {
    display: block;
  }

  .cab__busca-form {
    width: 100%;
    height: 44px;
  }

  .cab__busca-campo {
    font-size: var(--t-14);
  }
}

/* --- mobile: menu vira drawer --- */
@media (max-width: 1079px) {
  .cab {
    --cab-altura: 60px;
  }

  .cab__barra {
    padding-inline: var(--e-4);
  }

  .cab__nav {
    display: none;
  }

  /* no toque os alvos voltam para 40px; a conta de 263px do desktop nao vale
     aqui porque a busca ja saiu da barra */
  .cab__acao {
    width: 40px;
    height: 40px;
  }

  .cab__acao svg {
    width: 20px;
    height: 20px;
  }
}

@media (min-width: 1080px) {
  .cab__acao--menu {
    display: none;
  }

  /* garante o drawer fechado no desktop mesmo se a classe ficou pendurada */
  .cab__drawer,
  .cab__drawer.is-aberto {
    display: none;
  }
}

/* telas estreitas: o logo cede espaco antes de encostar nos icones */
@media (max-width: 400px) {
  .cab__barra {
    gap: var(--e-2);
  }

  .cab__logo img {
    width: auto;
    height: 28px;
  }
}

/* --- buscas populares ----------------------------------------------------
   Nasce escondido e so aparece quando o campo recebe foco: e um atalho, nao
   conteudo, e nao deve competir com a pagina. :focus-within cobre o caminho
   de teclado tambem, sem uma linha de JS.
   ------------------------------------------------------------------------ */

.cab__busca-populares {
  position: absolute;
  z-index: 30;
  inset-inline: 0;
  top: calc(100% + var(--e-2));
  padding: var(--e-4);
  border: 1px solid var(--c-borda);
  border-radius: var(--r-16);
  background: var(--c-fundo);
  box-shadow: var(--sombra);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transicao);
}

.cab__busca { position: relative; }
.cab__busca:focus-within .cab__busca-populares { opacity: 1; visibility: visible; }

@media (prefers-reduced-motion: reduce) {
  .cab__busca-populares { transition: none; }
}

.cab__busca-populares-titulo {
  margin: 0 0 var(--e-3);
  font-size: var(--t-12);
  color: var(--c-texto-3);
}

.cab__busca-populares-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}

.cab__busca-populares-lista li { display: flex; align-items: baseline; gap: var(--e-2); }

.cab__busca-ordem {
  min-width: 18px;
  font-size: var(--t-12);
  font-weight: var(--p-bold);
  color: var(--c-azul);
  font-variant-numeric: tabular-nums;
}

.cab__busca-populares-lista a { color: var(--c-texto); text-decoration: none; }
.cab__busca-populares-lista a:hover { color: var(--c-azul); text-decoration: underline; }

/* ===== card-produto ===== */
/* --- card-produto --------------------------------------------------------
   Medido no card da referencia (viewport 1600, coluna de 296px):

     cartao      borda 1px #eee, raio 24, padding-bottom 16, 296x594
     foto        294x294 (quadrada, largura cheia), cantos de cima arredondados
     rating      "4.5" 12/700 em #757575 + 5 estrelas de 12px cinza-escuro
     titulo      18/24, peso 600, #054d99, caixa fixa de 3 linhas (72px)
     acoes       48px de altura, gap 8: "SAIBA MAIS" 15/700 pill com fundo
                 azul-claro e borda azul + botao de carrinho 78x48 azul cheio
     selo        pill BRANCO com texto azul no topo esquerdo (top 10, left ~15)

   A versao anterior partia de "a referencia nao usa borda no card" e separava
   os itens com um `border-right`: errado — o card e uma caixa fechada com
   raio 24. Tambem faltava altura/tipografia: titulo 14px contra 18px da
   referencia e botoes de 44px contra 48px.
   ------------------------------------------------------------------------ */

.cardp {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--c-fundo);
  border: 1px solid var(--c-borda);
  border-radius: calc(var(--r-16) + var(--e-2));  /* 24px medidos */
  overflow: hidden;
  padding-bottom: var(--e-4);
}

.cardp__midia {
  position: relative;
  display: block;
  background: var(--c-fundo-3);
  aspect-ratio: 1;
  overflow: hidden;
}
.cardp__midia img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;   /* fotos de produto vem com fundo claro chapado */
}

/* Na referencia o selo do topo e um pill branco com texto azul ("Lancamento"),
   nao um pill azul cheio. O percentual de desconto NAO entra aqui: ele ja sai
   em `preco__selo`. O texto vem da tag `selo:...` do produto (ver o snippet). */
.cardp__selo {
  position: absolute;
  top: var(--e-3);
  left: var(--e-4);
  background: var(--c-fundo);
  color: var(--c-azul);
  font-size: var(--t-12);
  font-weight: var(--p-bold);
  line-height: 1.5;
  padding: var(--e-1) var(--e-4);
  border-radius: var(--r-pill);
}

.cardp__corpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--e-4) var(--e-4) 0;
}

/* A referencia nao imprime a marca no card — todos os produtos sao da mesma
   casa, e a linha extra empurrava o titulo para fora do ritmo de 594px. */
.cardp__marca { display: none; }

/* linha de avaliacao no topo do bloco de texto, como na referencia */
.cardp__rating {
  display: flex;
  align-items: center;
  gap: var(--e-1);
  font-size: var(--t-12);
  color: var(--c-texto-3);
  margin: 0 0 var(--e-2);
}
.cardp__rating-num { font-weight: var(--p-bold); }

/* Duas camadas de estrela: a de baixo e o contorno vazio (a propria caixa,
   em cinza claro) e a de cima e a cheia, cortada em --nota por cento. E o que
   permite 4,6 desenhar 92% da largura em vez de arredondar para 4,5 ou 5. */
.cardp__estrelas {
  position: relative;
  display: inline-block;
  font-size: var(--t-12);
  letter-spacing: 2px;
  line-height: 1;
  color: var(--c-borda);
}

.cardp__estrelas::before {
  content: "★★★★★";
}

.cardp__estrelas-cheias {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--nota, 0%);
  overflow: hidden;
  white-space: nowrap;
  color: var(--c-texto);
}

.cardp__titulo {
  font-family: var(--f-corpo);
  font-size: var(--t-18);
  font-weight: var(--p-semi);
  line-height: 1.334;                 /* 24/18 medidos */
  color: var(--c-azul);
  margin: 0 0 var(--e-3);
  /* caixa fixa de 3 linhas: e o que mantem preco e botoes alinhados entre
     cards de nomes curtos e longos */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 4em;
}
.cardp__titulo a { color: inherit; }

/* empurra as acoes para a base, independente do tamanho do titulo */
/* sem padding-top: o respiro de 12px ate os botoes ja vem da margem inferior
   do bloco de preco, como na referencia (productPrices margin-bottom 12) */
.cardp__acoes {
  display: flex;
  align-items: stretch;
  gap: var(--e-2);
  margin-top: auto;
}
.cardp__acoes .btn {
  flex: 1;
  min-height: 48px;
  font-size: var(--t-15);
  padding-inline: var(--e-3);
}
/* na referencia o "SAIBA MAIS" tem fundo azul-claro e borda azul cheia,
   nao contorno azul-suave sobre branco */
.cardp__acoes .btn--contorno {
  background: var(--c-tint);
  border-color: var(--c-azul);
}
.cardp__acoes .btn--contorno:hover { background: var(--c-azul); color: var(--c-fundo); }

.cardp__form { display: flex; }

.cardp__carrinho {
  width: 78px;
  flex: 0 0 78px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-azul);
  border-radius: var(--r-pill);
  background: var(--c-azul);
  color: var(--c-fundo);
  cursor: pointer;
  transition: background var(--transicao);
}
.cardp__carrinho:hover { background: var(--c-azul-escuro); }
.cardp__carrinho svg { width: 26px; height: 26px; }

.cardp__placeholder { width: 100%; height: 100%; }

/* --- 3 e 2 colunas: a referencia encolhe tipografia, padding e botoes ---
   medido a 1024: padding lateral 10px, titulo 16/22 em 3 linhas (66px),
   "SAIBA MAIS" 14px; a 390 o mesmo card so troca o botao para 12px. */
@media (max-width: 1024px) {
  .cardp__corpo { padding-inline: calc(var(--e-2) + 2px); }
  .cardp__acoes { padding-inline: 0; }
  .cardp__titulo {
    font-size: var(--t-16);
    line-height: 1.375;          /* 22/16 medidos */
    min-height: 4.125em;         /* 3 linhas = 66px */
  }
  .cardp__acoes .btn { font-size: var(--t-14); }
}

@media (max-width: 640px) {
  .cardp__acoes { gap: var(--e-1); }
  .cardp__acoes .btn { font-size: var(--t-12); padding-inline: var(--e-2); white-space: nowrap; }
}

/* Abaixo de 480 a coluna fica ~8px mais estreita que a da referencia (o
   gutter do tema e 16px contra 8px la), e "SAIBA MAIS" nao cabe ao lado de
   um carrinho de 78px — so aqui ele encolhe. */
@media (max-width: 480px) {
  .cardp__carrinho { width: 56px; flex: 0 0 56px; }
  .cardp__carrinho svg { width: 20px; height: 20px; }
  .cardp__acoes .btn { padding-inline: var(--e-1); }
}

/* ===== carrossel-videos ===== */
/* --- carrossel-videos ---------------------------------------------------- */

.cvideos--suave { background: var(--c-fundo-2); }

.cvideos__cabecalho { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-4); }

.cvideos__area { position: relative; }

/* Sangria ate a borda da viewport: a margem negativa tira o gutter e o padding
   devolve, para o primeiro item alinhar com o texto e o proximo aparecer
   cortado, sinalizando que da para arrastar. */
.cvideos__pista {
  list-style: none;
  margin: 0;
  padding: 0 var(--gutter);
  margin-inline: calc(var(--gutter) * -1);
  display: flex;
  gap: var(--e-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.cvideos__pista::-webkit-scrollbar { display: none; }

.cvideos__item {
  flex: 0 0 auto;
  width: min(72%, 264px);
  scroll-snap-align: start;
}

.cvideos__quadro {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: var(--r-16);
  overflow: hidden;
  background: var(--c-fundo-3);
}

.cvideos__capa,
.cvideos__frame {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}
.cvideos__capa { object-fit: cover; }

/* --- botao de play --- */
.cvideos__play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.cvideos__play-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--r-circ);
  background: rgba(255, 255, 255, .92);
  color: var(--c-azul);
  font-size: var(--t-18);
  padding-left: 4px;              /* centro optico do triangulo */
  transition: transform var(--transicao);
}
.cvideos__play:hover .cvideos__play-icone { transform: scale(1.08); }
.cvideos__play:focus-visible { outline: 2px solid var(--c-azul); outline-offset: -4px; }

@media (prefers-reduced-motion: reduce) {
  .cvideos__play-icone { transition: none; }
  .cvideos__play:hover .cvideos__play-icone { transform: none; }
}

.cvideos__legenda {
  margin: var(--e-3) 0 0;
  font-size: var(--t-12);
  color: var(--c-texto-2);
  line-height: 1.4;
}

/* --- setas: so no desktop, onde nao ha gesto de arraste --- */
.cvideos__seta { display: none; }

@media (min-width: 1025px) {
  .cvideos__item { width: 264px; }

  .cvideos__seta {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--c-borda);
    border-radius: var(--r-circ);
    background: var(--c-fundo);
    color: var(--c-azul);
    cursor: pointer;
    box-shadow: var(--sombra);
  }
  .cvideos__seta:hover { background: var(--c-fundo-2); }
  .cvideos__seta--ant { left: calc(var(--e-5) * -1); }
  .cvideos__seta--prox { right: calc(var(--e-5) * -1); }
  .cvideos__seta svg { width: 18px; height: 18px; }
}

@media (max-width: 640px) {
  .cvideos__cabecalho { flex-direction: column; align-items: flex-start; gap: var(--e-2); }
}

/* ===== colecao ===== */
/* --- main-colecao --------------------------------------------------------
   Medido na referencia (https://www.creamy.com.br/produtos/antiacne) com
   Chrome headless + CDP, viewport 1600:

     conteudo         1232px centrado
     grade            4 x 296px, column-gap 16px, row-gap 32px
     breakpoints      >=1025 -> 4 col | 769..1024 -> 3 col (gap 16/8)
                      <=768  -> 2 col (gap 16/8)
     cabecalho        cartao branco de meia largura (608 de 1232), borda 1px,
                      raio 16, padding 24/24/24/64, titulo 32/40 em #489ef9,
                      e 72px de respiro ate a barra
     barra            contagem a esquerda, "Ordenar por" + grupo segmentado
                      a direita; sem divisoria inferior
     segmentado       trilho #fafafa, raio 50px, padding 8; opcao 12/700 em
                      #bdbdbd, ativa em branco com raio 50px e texto #616161
     paginacao        pill azul de 344x56 a 72px da grade

   O arquivo anterior definia `.colecao__ordenar select` (a secao nao usa
   select) e nao tinha uma unica regra para `.segm*` — o grupo de ordenacao
   caia como links azuis soltos, quebrando em duas linhas.
   ------------------------------------------------------------------------ */

.colecao { padding-block: var(--e-5) var(--e-9); }

/* --- cabecalho -----------------------------------------------------------
   Duas colunas iguais: o texto ocupa a primeira, a capa (quando existe) a
   segunda. Sem capa o cartao fica com meia largura, que e exatamente o que a
   referencia mostra nas colecoes sem banner. */
.colecao__cabecalho {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-4);
  align-items: stretch;
  margin-bottom: calc(var(--e-7) + var(--e-5));   /* 72px medidos */
}

.colecao__texto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-height: 106px;
  background: var(--c-fundo);
  border: 1px solid var(--c-borda);
  border-radius: var(--r-16);
  padding: var(--e-5) var(--e-5) var(--e-5) var(--e-8);
}

.colecao__titulo {
  font-size: var(--t-32);
  line-height: 1.25;                              /* 40/32 medidos */
  color: var(--c-azul-link);
  margin: 0 0 var(--e-4);
}

.colecao__descricao {
  max-width: 68ch;
  color: var(--c-texto-2);
  font-size: var(--t-14);
  margin: 0;
}
.colecao__descricao > :last-child { margin-bottom: 0; }

.colecao__capa {
  border-radius: var(--r-16);
  overflow: hidden;
  min-height: 106px;
}
.colecao__capa img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- barra de contagem e ordenacao ---------------------------------------
   A referencia nao usa divisoria aqui: a separacao vem do respiro de 24px
   ate a primeira linha de cards. */
.colecao__barra {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  flex-wrap: wrap;
  margin-bottom: var(--e-5);
}

/* A referencia usa #9e9e9e; ficamos em --c-texto-3 (#757575) porque a 12px
   o cinza claro da 2,7:1 de contraste e reprova no AA. */
.colecao__contagem {
  margin: 0;
  font-size: var(--t-12);
  font-weight: var(--p-semi);
  color: var(--c-texto-3);
  white-space: nowrap;
}

/* O `.chip` de base.css so pinta o estado ativo em [aria-selected="true"],
   mas a secao marca o chip corrente com [aria-current="page"] (o correto para
   navegacao por link). Fechamos a lacuna aqui em vez de mexer no base.css. */
.colecao__chips { flex: 0 1 auto; }
.colecao__chips .chip[aria-current="page"] {
  background: var(--c-azul);
  border-color: var(--c-azul);
  color: var(--c-fundo);
}

.colecao__ordenar {
  display: flex;
  align-items: center;
  gap: var(--e-5);
  margin-left: auto;
}

.colecao__ordenar-rotulo {
  font-size: var(--t-12);
  font-weight: var(--p-bold);
  color: var(--c-texto-2);
  white-space: nowrap;
}

/* --- grupo segmentado de ordenacao --- */
.segm {
  display: flex;
  align-items: center;
  background: var(--c-fundo-2);
  border-radius: var(--r-pill);
  padding: var(--e-2);
}

.segm__opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--e-2) + 2px) var(--e-5);     /* 10px 24px medidos */
  font-size: var(--t-12);
  font-weight: var(--p-bold);
  line-height: 1.5;
  color: var(--c-borda-2);
  border-radius: var(--r-pill);
  white-space: nowrap;
  transition: background var(--transicao), color var(--transicao);
}
.segm__opt:hover { color: var(--c-texto-2); opacity: 1; }

/* aria-current (e nao aria-selected): cada opcao e um link que troca de
   pagina, entao a secao nao usa role="tab" — ver o comentario no liquid. */
.segm__opt[aria-current] {
  background: var(--c-fundo);
  color: var(--c-texto-2);
}

/* Em tela sensivel ao toque o alvo de 38px da referencia fica abaixo do
   minimo recomendado; so ali o trilho cresce. */
@media (pointer: coarse) {
  .segm__opt { padding-block: var(--e-3); min-height: 44px; }
}

/* --- grade ---------------------------------------------------------------
   `--col-colunas-desktop` vem inline da secao (setting do editor); o valor
   so vale no desktop porque as media queries abaixo o sobrescrevem. */
.colecao__grade {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--col-colunas-desktop, 4), minmax(0, 1fr));
  gap: var(--e-6) var(--e-4);
}

.colecao__item { min-width: 0; display: flex; }
.colecao__item > * { width: 100%; }

/* --- estado vazio --- */
.colecao__vazia {
  grid-column: 1 / -1;
  padding-block: var(--e-9);
  text-align: center;
}

.colecao__vazia-texto { color: var(--c-texto-3); font-size: var(--t-14); }

/* --- paginacao -----------------------------------------------------------
   A referencia troca de pagina com um unico pill azul ("Carregar mais
   produtos", 344x56, a 72px da grade). Mantemos os numeros abaixo dele
   porque o nosso avanco e por URL: sem eles nao ha como voltar. */
.colecao__paginacao {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-4);
  margin-top: calc(var(--e-7) + var(--e-5));      /* 72px medidos */
}

/* o pill da referencia nao usa caixa alta nem tracking: 16/700 em caixa
   normal, ao contrario do resto dos botoes do tema */
.colecao__mais {
  min-width: 344px;
  min-height: 56px;
  font-size: var(--t-16);
  letter-spacing: normal;
  text-transform: none;
}

.colecao__paginas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-1);
  flex-wrap: wrap;
}

.colecao__pagina,
.colecao__seta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding-inline: var(--e-2);
  font-size: var(--t-12);
  font-weight: var(--p-bold);
  color: var(--c-borda-2);
  border-radius: var(--r-pill);
  transition: background var(--transicao), color var(--transicao);
}

.colecao__pagina:hover,
.colecao__seta:hover { background: var(--c-fundo-2); color: var(--c-texto-2); opacity: 1; }

.colecao__pagina[aria-current="page"] {
  background: var(--c-azul);
  color: var(--c-fundo);
}

.colecao__pagina--vazio {
  min-width: 24px;
  color: var(--c-texto-4);
  pointer-events: none;
}

.colecao__seta { color: var(--c-texto-2); }
.colecao__seta svg { width: 18px; height: 18px; }
.colecao__seta--ant svg { transform: rotate(180deg); }

/* --- breakpoints medidos na referencia --------------------------------
   3 colunas de 769 a 1024, 2 colunas ate 768; nos dois casos os gaps caem
   para 16/8 e o respiro do cabecalho ate a barra cai de 72 para 32.

   Abaixo de 1024 a referencia troca o trilho segmentado por um dropdown em
   modal. Aqui ele continua sendo o mesmo trilho, so que rolavel na
   horizontal: e o mesmo controle sem JavaScript, e evita empurrar a grade
   duas linhas para baixo. */
@media (max-width: 1024px) {
  .colecao__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-4) var(--e-2); }
  .colecao__cabecalho { margin-bottom: var(--e-6); }

  .colecao__ordenar { margin-left: 0; width: 100%; min-width: 0; gap: var(--e-3); }
  .segm {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .segm::-webkit-scrollbar { display: none; }
  .segm__opt { padding-inline: var(--e-4); }
}

@media (max-width: 768px) {
  .colecao__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .colecao__cabecalho { grid-template-columns: 1fr; }
  .colecao__texto { padding: var(--e-5); min-height: 90px; }
  .colecao__titulo { font-size: var(--t-24); margin-bottom: var(--e-2); }
  .colecao__capa { min-height: 0; }
}

@media (max-width: 640px) {
  .colecao__barra { align-items: flex-start; flex-direction: column; gap: var(--e-3); }
  .colecao__mais { min-width: 100%; }
}

/* ===== contagem-regressiva ===== */
/* --- contagem-regressiva ------------------------------------------------- */

.contagem { padding-block: var(--e-5); }

.contagem--claro { background: var(--c-fundo); }
.contagem--tint  { background: var(--c-tint); }
.contagem--azul  { background: var(--c-azul); color: var(--c-fundo); }

.contagem--azul .contagem__titulo,
.contagem--azul .contagem__num,
.contagem--azul .contagem__sep { color: var(--c-fundo); }
.contagem--azul .contagem__rotulo { color: var(--c-fundo); opacity: .8; }

.contagem__int {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--e-4) var(--e-6);
}

.contagem__titulo {
  margin: 0;
  font-family: var(--f-titulo);
  font-size: var(--t-18);
  font-weight: var(--p-bold);
  color: var(--c-azul);
}

/* --- relogio --- */
.contagem__relogio {
  display: flex;
  align-items: flex-start;
  gap: var(--e-2);
}

.contagem__unidade {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 48px;
}

/* tabular-nums impede o relogio de "pular" a cada segundo: sem isso o 1 e
   mais estreito que os outros digitos e a linha inteira se desloca */
.contagem__num {
  font-family: var(--f-titulo);
  font-size: var(--t-32);
  font-weight: var(--p-bold);
  line-height: 1;
  color: var(--c-azul);
  font-variant-numeric: tabular-nums;
}

.contagem__rotulo {
  margin-top: var(--e-1);
  font-size: var(--t-10);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--c-texto-3);
}

.contagem__sep {
  font-size: var(--t-24);
  font-weight: var(--p-bold);
  line-height: 1.2;
  color: var(--c-texto-4);
}

.contagem__btn { flex: 0 0 auto; }

.contagem__aviso {
  margin: var(--e-3) 0 0;
  text-align: center;
  font-size: var(--t-12);
  color: var(--c-texto-3);
}

@media (max-width: 640px) {
  .contagem__int { gap: var(--e-3); }
  .contagem__titulo { font-size: var(--t-14); text-align: center; width: 100%; }
  .contagem__num { font-size: var(--t-24); }
  .contagem__unidade { min-width: 40px; }
  .contagem__btn { width: 100%; }
}

/* ===== faixa-beneficios ===== */
/* ==========================================================================
   Secao: faixa-beneficios
   Quatro cartoes horizontais (icone + texto). No mobile a grade vira trilho
   com scroll-snap nativo — sem JS, porque o unico comportamento necessario e
   o arrasto que o proprio navegador ja entrega.
   ========================================================================== */

.benef--fundo-branco { background: var(--c-fundo); }
.benef--fundo-suave  { background: var(--c-fundo-2); }
.benef--fundo-tint   { background: var(--c-tint); }

/* Medido na referencia (viewport 1600): a faixa nao e uma fileira de quatro
   cartoes, e UMA caixa de 1232x148 com borda 1px, raio 16 e padding 32/24;
   dentro dela os quatro itens sao colunas de 296px centralizadas, sem moldura
   propria. Depois da caixa vem 72px ate a proxima secao. */
.benef { padding-block: 0 calc(var(--e-7) + var(--e-5)); }

.benef__lista {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--e-4);
  margin: 0;
  padding: var(--e-6) var(--e-5);        /* 32/24 medidos */
  list-style: none;
  background: var(--c-fundo);
  border: 1px solid var(--c-borda);
  border-radius: var(--r-16);
}

.benef__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--e-2);
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

/* referencia: pictograma solto de ~24px, sem disco de fundo */
.benef__icone {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--e-5);
  height: var(--e-5);
  border-radius: 0;
  background: transparent;
  color: var(--c-azul-claro);
}

.benef__icone svg {
  width: var(--e-5);
  height: var(--e-5);
}

/* pictograma do merchant: contain para nao cortar o logo */
.benef__icone img {
  width: var(--e-5);
  height: var(--e-5);
  object-fit: contain;
}

.benef__titulo {
  font-size: var(--t-14);
  font-weight: var(--p-bold);
  line-height: 1.5;
  color: var(--c-texto-2);               /* referencia usa cinza, nao azul */
  margin: 0;
}

.benef__apoio {
  margin: 0;
  font-size: var(--t-14);                /* referencia: 14/21, nao 12 */
  line-height: 1.5;
  color: var(--c-texto-4);
}

@media (max-width: 1024px) {
  .benef__lista { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  /* flex em vez de grid-auto-flow: com grid o template de 4 colunas ainda
     mandaria no posicionamento e os itens continuariam encolhendo */
  /* no trilho horizontal a caixa unica nao serve: cada item volta a ser um
     cartao proprio, como ja era antes do ajuste de desktop */
  .benef__lista {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: transparent;
    border: 0;
    border-radius: 0;
    /* sangra ate a borda da tela: o trilho precisa comecar e terminar fora do
       gutter para o proximo cartao "espiar" e sinalizar que da para arrastar */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-block: 0 var(--e-2);
  }

  .benef__lista::-webkit-scrollbar { display: none; }

  .benef__item {
    flex: 0 0 78%;
    scroll-snap-align: start;
    padding: var(--e-4);
    background: var(--c-fundo);
    border: 1px solid var(--c-borda);
    border-radius: var(--r-8);
  }
}

/* ===== grid-banners ===== */
/* ==========================================================================
   Secao: grid-banners
   2 a 4 banners lado a lado. As colunas saem de .grade--2|3|4 de base.css,
   escolhidas no Liquid pela quantidade de blocos.
   ========================================================================== */

/* Medido na referencia (viewport 1600): a fileira ocupa 397px — 325 de arte e
   72 de respiro embaixo, sem padding em cima. */
.gbanners { padding-block: 0 calc(var(--e-7) + var(--e-5)); }

.gbanners__titulos { display: flex; flex-direction: column; gap: var(--e-1); }

.gbanners__titulo {
  margin: 0;
  font-family: var(--f-wide, var(--f-titulo));
  font-size: var(--t-28);   /* 28px medidos na referencia */
  line-height: 1.5;
}

.gbanners__grade {
  margin: 0;
  padding: 0;
  list-style: none;
}

.gbanner {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-8);       /* raio 8 medido na arte da referencia */
  background: var(--c-fundo-3);
  isolation: isolate;
  transition: box-shadow var(--transicao);
}

.gbanner:hover { box-shadow: var(--sombra-2); }

.gbanners--foto-quadrada .gbanner { aspect-ratio: 1 / 1; }
.gbanners--foto-retrato .gbanner { aspect-ratio: 3 / 4; }
/* 396x325 medidos nos tres banners da referencia (era 4/3 = 405x304) */
.gbanners--foto-paisagem .gbanner { aspect-ratio: 396 / 325; }
.gbanners--foto-larga .gbanner { aspect-ratio: 16 / 9; }

.gbanner__midia {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.gbanner__midia img,
.gbanner__placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.gbanner:hover .gbanner__midia img { transform: scale(1.05); }

/* Degrade parte do lado onde o texto fica, para dar contraste sem apagar a
   foto inteira. No centro nao ha "lado", entao vira um veu uniforme. */
.gbanner__scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--c-texto) var(--gbanner-scrim, 45%), transparent) 0%,
    transparent 65%
  );
}

.gbanners--v-topo .gbanner__scrim {
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--c-texto) var(--gbanner-scrim, 45%), transparent) 0%,
    transparent 65%
  );
}

.gbanners--v-centro .gbanner__scrim {
  background: color-mix(in srgb, var(--c-texto) var(--gbanner-scrim, 45%), transparent);
}

.gbanner__conteudo {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--e-2);
  padding: var(--e-5);
}

.gbanners--v-topo .gbanner__conteudo { justify-content: flex-start; }
.gbanners--v-centro .gbanner__conteudo {
  justify-content: center;
  align-items: center;
  text-align: center;
}

.gbanner__titulo {
  margin: 0;
  color: var(--c-fundo);
  font-size: var(--t-24);
}

.gbanner__texto {
  margin: 0;
  max-width: 34ch;
  color: var(--c-fundo);
  font-size: var(--t-14);
}

/* Link em overlay: cobre o banner inteiro sem embrulhar o <h3>. */
.gbanner__area {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.gbanner__area:focus-visible {
  outline: 3px solid var(--c-fundo);
  outline-offset: -6px;
  border-radius: var(--r-8);
}

@media (max-width: 640px) {
  .gbanner__conteudo { padding: var(--e-4); }
  .gbanner__titulo { font-size: var(--t-18); }
  .gbanner__texto { font-size: var(--t-12); }
}

/* ===== grid-tipos-pele ===== */
/* ==========================================================================
   Secao: grid-tipos-pele
   Grade de ate 6 cards (foto + titulo + texto curto). Colunas, container e
   moldura do card vem das classes de base.css (.grade, .wrap, .card).
   ========================================================================== */

/* Medido na referencia (viewport 1600): a faixa e cinza (#fafafa) com 40px de
   padding em cima e embaixo e 72px de margem ate a proxima secao — 580px no
   total. O default de base.css dava 48/48 e nenhuma margem (506px). */
.tipos {
  padding-block: calc(var(--e-6) + var(--e-2));   /* 40px medidos */
  margin-bottom: calc(var(--e-7) + var(--e-5));   /* 72px medidos */
}

/* mesmo truque do cabecalho da prateleira: dissolve o embrulho para o
   "Ver tudo" ficar ao lado do titulo, como na referencia (x 1047 com o h2
   terminando em 1023), e nao encostado na borda direita */
.secao__cabecalho .tipos__titulos { display: contents; }

.tipos .secao__cabecalho {
  justify-content: flex-start;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 0;
  row-gap: calc(var(--e-1) + 2px);
}

/* descendente, e nao filho direto: display:contents nao muda o DOM */
.tipos .secao__cabecalho .secao__sub {
  flex-basis: 100%;
  order: 3;
  font-size: var(--t-15);         /* referencia: 15/22,5 */
  line-height: 1.5;
}

.tipos__titulo {
  margin: 0;
  order: 1;
  font-family: var(--f-wide, var(--f-titulo));
  font-size: var(--t-28);   /* 28px medidos na referencia */
  line-height: 1.5;                            /* 42px medidos */
}

.tipos__link-topo {
  flex: none;
  order: 2;
  margin-left: var(--e-5);        /* 24px medidos */
  font-size: var(--t-12);
  font-weight: var(--p-bold);
  letter-spacing: normal;
  text-transform: none;
  color: var(--c-texto-4);
  white-space: nowrap;
}

.tipos__grade {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Na referencia o card nao tem moldura: e so a foto de raio 8 com o texto
   solto embaixo, sobre a propria faixa cinza. A classe .card de base.css
   trazia borda, fundo branco e overflow hidden — tudo indevido aqui. */
.tipo.card {
  position: relative; /* ancora o ::after que estica o link do titulo */
  display: flex;
  flex-direction: column;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
  transition: none;
}

.tipo.card:hover { box-shadow: none; }

/* O link esticado cobre o card mas seu contorno de foco fica invisivel atras
   da imagem; o focus-within devolve o indicador para navegacao por teclado. */
.tipo:focus-within {
  outline: 2px solid var(--c-azul);
  outline-offset: 2px;
}

.tipo__midia {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-8);       /* raio 8 medido na foto da referencia */
  background: var(--c-fundo-3);
}

.tipo__midia img,
.tipo__midia .tipo__placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.tipo:hover .tipo__midia img { transform: scale(1.04); }

.tipos--foto-quadrada .tipo__midia { aspect-ratio: 1 / 1; }
.tipos--foto-retrato .tipo__midia { aspect-ratio: 3 / 4; }
.tipos--foto-paisagem .tipo__midia { aspect-ratio: 16 / 9; }

/* referencia: 16px da foto ate o titulo e 8px do titulo ate o texto, sem
   recuo lateral (o texto alinha com a borda esquerda da foto) */
.tipo__corpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--e-2);
  padding: var(--e-4) 0 0;
}

.tipo__titulo {
  margin: 0;
  font-size: var(--t-18);
  font-weight: var(--p-bold);
  line-height: 1.167;              /* 21/18 medidos */
  color: var(--c-texto);           /* referencia usa quase-preto, nao azul */
}

.tipo__titulo a { color: inherit; }
.tipo__titulo a:hover { opacity: 1; }

.tipo__titulo a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.tipo__texto {
  margin: 0;
  color: var(--c-texto-2);
  font-size: var(--t-14);
  line-height: 1.5;                /* 21/14 medidos */
}

/* A referencia nao imprime um CTA textual embaixo do texto — o card inteiro e
   clicavel e o unico indicio e o disco com seta no canto da foto. O span e
   aria-hidden, entao escondê-lo nao tira nada do leitor de tela. */
.tipo__cta { display: none; }

@media (max-width: 640px) {
  .tipo__corpo { padding: var(--e-3) 0 0; }
  .tipo__titulo { font-size: var(--t-16); }
  .tipo__texto { font-size: var(--t-12); }
}


/* colunas 5 e 6, adicionadas para casar com a referencia (6 tipos em linha).
   .grade--4 NAO e redeclarado aqui: base.css ja o define com o mesmo valor e,
   como componentes.css vem depois, uma copia aqui teria a mesma especificidade
   e venceria por ordem de fonte os colapsos mobile de base.css — 4 colunas
   sobreviveriam ate no celular. */
.grade--5 { grid-template-columns: repeat(5, 1fr); }
.grade--6 { grid-template-columns: repeat(6, 1fr); }

/* base.css so colapsa .grade--2/3/4; 5 e 6 nasceram aqui, entao o colapso
   deles mora aqui tambem, na mesma escada (2 colunas a partir de 1024px) */
@media (max-width: 1024px) {
  .grade--5,
  .grade--6 { grid-template-columns: repeat(2, 1fr); }
}

/* ===== hero-slider ===== */
/* ==========================================================================
   hero-slider — carrossel de banners split
   Texto branco sobre foto: todo o contraste vem do veu tingido de --c-azul,
   feito com color-mix para nao introduzir cor fora dos tokens.
   ========================================================================== */

.hero {
  --hero-altura: 520px;
  --hero-veu: 35%;               /* sobrescrito por slide, via style inline */
  position: relative;
  overflow: hidden;
  background: var(--c-azul);     /* evita flash branco enquanto a foto carrega */
  color: var(--c-fundo);
  /* Medido na referencia (viewport 1600): o banner ocupa 249..901 = 652px,
     dos quais 576px sao a foto e 76px sao respiro branco ate o titulo da
     prateleira seguinte. O respiro entra como margem (nao padding) para nao
     pintar de azul a faixa nem deslocar os controles absolutos. */
  margin-bottom: calc(var(--e-7) + var(--e-5));   /* 72px medidos */
}

/* O hero comeca colado na faixa azul, com o card branco do cabecalho flutuando
   por cima dele — e assim na referencia. O card e sticky, entao continua
   ocupando fluxo; sem esta subida sobrava uma faixa branca entre o anuncio e a
   arte, que foi o espaco que nao devia existir.

   Restrito a primeira secao do <main>: em pagina de produto ou de colecao o
   conteudo nao pode subir para baixo do cabecalho. */
main > .secao-hero:first-child {
  margin-top: calc(var(--cab-ocupa) * -1);
}

/* Toda a arte e o link, como na referencia. Fica abaixo dos controles
   (z-index 3) para as setas e os dots continuarem clicaveis. */
.hero__link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* A referencia serve o banner em largura total, entao a altura acompanha a
   largura da janela: 576 / 1600 = 36vw. Antes eram 520px fixos — 56px a menos
   que a referencia em 1600 e proporcao errada em qualquer outra largura. */
.hero--compacto { --hero-altura: clamp(320px, 25vw, 500px); }
.hero--medio    { --hero-altura: clamp(420px, 36vw, 720px); }
.hero--alto     { --hero-altura: clamp(480px, 45vw, 900px); }

/* Os slides ocupam a mesma celula do grid: a troca vira crossfade, sem
   reflow, sem carrossel horizontal e sem mexer no scroll da pagina. */
.hero__palco { display: grid; }

.hero__slide {
  grid-area: 1 / 1;
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--hero-altura);
  opacity: 0;
  /* visibility tira o slide inativo da ordem de tabulacao e do leitor de
     tela — dispensa aria-hidden em cima de link focavel */
  visibility: hidden;
  transition: opacity .5s ease, visibility .5s ease;
}

.hero__slide.is-ativo {
  opacity: 1;
  visibility: visible;
}

.hero__fundo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* o veu escurece mais do lado do texto e abre do lado da imagem */
.hero__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--c-azul) var(--hero-veu), transparent),
    color-mix(in srgb, var(--c-azul) calc(var(--hero-veu) / 3), transparent)
  );
}

.hero__slide:has(.hero__interior--invertido)::after {
  background: linear-gradient(
    to left,
    color-mix(in srgb, var(--c-azul) var(--hero-veu), transparent),
    color-mix(in srgb, var(--c-azul) calc(var(--hero-veu) / 3), transparent)
  );
}

.hero__interior {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--e-7);
  width: 100%;
  padding-block: var(--e-7);
}

.hero__interior--simples { grid-template-columns: minmax(0, 1fr); }
.hero__interior--simples .hero__conteudo { max-width: 640px; }

.hero__interior--invertido .hero__conteudo { order: 2; }

/* --- conteudo --- */

.hero__titulo {
  color: var(--c-fundo);
  font-size: clamp(var(--t-32), 4.5vw, var(--t-56));
  font-weight: var(--p-black);
  line-height: 1.05;
  letter-spacing: -.01em;
  margin: 0 0 var(--e-3);
}

.hero__sub {
  font-family: var(--f-titulo);
  font-size: var(--t-20);
  font-weight: var(--p-semi);
  color: var(--c-fundo);
  margin: 0 0 var(--e-3);
}

.hero__texto {
  font-size: var(--t-16);
  max-width: 46ch;
  margin-bottom: var(--e-5);
  color: color-mix(in srgb, var(--c-fundo) 88%, transparent);
}

.hero__texto p:last-child { margin-bottom: 0; }

.hero__botao { margin-top: var(--e-2); }

.hero__destaque img {
  margin-inline: auto;
  border-radius: var(--r-16);
  box-shadow: var(--sombra-2);
}

/* --- controles ---
   Ficam escondidos ate o script marcar data-pronto: sem JS eles nao
   navegariam nada e so confundiriam. */

.hero__seta,
.hero__controles { display: none; }

.hero[data-pronto="true"] .hero__seta { display: grid; }
.hero[data-pronto="true"] .hero__controles { display: flex; }

/* Recuo ate a caixa de conteudo do .wrap: os controles nao ficam colados na
   borda da tela, alinham com o texto do banner. Abaixo de --largura o max()
   cai no gutter e nada encosta na borda. */
.hero {
  --hero-recuo: max(var(--gutter), calc((100% - var(--largura)) / 2 + var(--gutter)));
}

/* Na referencia as duas setas ficam juntas no canto inferior direito, nao uma
   em cada lateral na altura do meio: ali elas cobririam o rosto da modelo. */
/* 34px de disco com chevron de 16, medido na referencia. Os 44px de antes
   faziam duas bolas grandes sobre a arte — foi o que destoou. O alvo de toque
   volta aos 44px pelo ::before, que estende a area clicavel sem inchar o
   desenho (WCAG 2.5.8 pede o alvo, nao o disco visivel). */
.hero__seta {
  position: absolute;
  top: auto;
  bottom: var(--e-5);
  z-index: 3;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  transform: none;
  border: 0;
  border-radius: var(--r-circ);
  background: color-mix(in srgb, var(--c-fundo) 88%, transparent);
  color: var(--c-azul);
  cursor: pointer;
  transition: background var(--transicao);
}

.hero__seta::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: inherit;
}

.hero__seta:hover { background: var(--c-fundo); }
.hero__seta--prox { left: auto; right: var(--hero-recuo); }
.hero__seta--ant  { left: auto; right: calc(var(--hero-recuo) + 34px + var(--e-2)); }

/* Bolinhas no canto inferior esquerdo, alinhadas com o texto do banner. */
.hero__controles {
  position: absolute;
  left: var(--hero-recuo);
  bottom: var(--e-5);
  /* acima do .hero__link, senao o link do slide comeria o clique dos dots */
  z-index: 3;
  align-items: center;
  gap: var(--e-4);
  transform: none;
}

.hero__dots {
  display: flex;
  align-items: center;
  gap: var(--e-2);
}

.hero__dot {
  position: relative;
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: var(--r-circ);
  background: color-mix(in srgb, var(--c-fundo) 45%, transparent);
  cursor: pointer;
  transition: width var(--transicao), background var(--transicao);
}

/* area de toque de 34px sem inchar a bolinha desenhada */
.hero__dot::before {
  content: "";
  position: absolute;
  inset: -12px;
}

.hero__dot[aria-current="true"] {
  width: 28px;
  border-radius: var(--r-pill);
  background: var(--c-fundo);
}

.hero__play {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--r-circ);
  background: color-mix(in srgb, var(--c-fundo) 88%, transparent);
  color: var(--c-azul);
  cursor: pointer;
}

.hero__icone { grid-area: 1 / 1; }
.hero__icone--tocar { display: none; }

.hero[data-tocando="false"] .hero__icone--pausa { display: none; }
.hero[data-tocando="false"] .hero__icone--tocar { display: block; }

.hero :is(.hero__seta, .hero__dot, .hero__play, .hero__botao):focus-visible {
  outline: 2px solid var(--c-ciano);
  outline-offset: 3px;
}

@media (max-width: 900px) {
  .hero { --hero-altura: 460px; }

  .hero__interior,
  .hero__interior--invertido {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e-5);
    padding-block: var(--e-6) var(--e-8);  /* folga embaixo para as bolinhas */
  }

  .hero__interior--invertido .hero__conteudo { order: 0; }

  .hero__destaque { max-width: 300px; }
}

@media (max-width: 640px) {
  .hero { --hero-altura: 420px; }

  /* em tela pequena a navegacao e por swipe e bolinha: as setas cobririam
     o proprio conteudo do banner */
  .hero[data-pronto="true"] .hero__seta { display: none; }

  .hero__texto { font-size: var(--t-14); }
  .hero__sub { font-size: var(--t-16); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__slide { transition: none; }
}

/* ===== logos-imprensa ===== */
/* ==========================================================================
   Secao: logos-imprensa — "Creamy na midia"

   Medido na referencia (viewport 1600): titulo de 28px em azul alinhado a
   esquerda, subtitulo de 15px em cinza logo abaixo, e uma caixa contornada de
   raio 8 com padding 16 guardando cartoes brancos de ~400x253. Dentro de cada
   cartao a citacao vem primeiro e o logo do veiculo assina embaixo.

   Abaixo da caixa, os pontos a esquerda e as setas a direita.
   ========================================================================== */

.logos--tint { background: var(--c-tint); }

/* Na referencia o h2 comeca no topo da secao (padding-top 0) e embaixo sobram
   143px — mas esse espaco e ocupado pelas bolinhas e pelas setas, nao e
   respiro. Reservado fixo, ele virava um vao vazio sempre que as tres mencoes
   cabem de uma vez e os controles nao aparecem. Agora a base e o respiro, e
   quem ocupa o resto sao os controles, com a margem deles. */
.logos .secao { padding-block: 0 var(--e-8); }

.midia__cabecalho { margin-bottom: var(--e-5); }

.midia__titulo {
  font-family: var(--f-wide, var(--f-titulo));
  font-size: var(--t-28);        /* 28px medidos na referencia */
  font-weight: var(--p-bold);
  line-height: 1.5;                                 /* 42px medidos */
  letter-spacing: normal;
  text-transform: none;
  color: var(--c-azul);
  text-align: left;
  margin: 0;
}

.midia__sub {
  margin: 0;
  font-size: var(--t-15, var(--t-14));
  line-height: 1.6;
  color: var(--c-texto-2);
}

/* --- caixa e trilho --- */

.midia__caixa {
  padding: var(--e-4);
  background: var(--c-fundo);
  border: 1px solid var(--c-borda);
  border-radius: var(--r-8);
}

/* Trilho horizontal com snap. As colunas sao fracoes do proprio trilho, entao
   uma "pagina" e exatamente a largura visivel — e o que o script usa para
   contar os pontos e para o passo das setas. */
.midia__trilho {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - var(--e-4) * 2) / 3);
  gap: var(--e-4);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* contain evita que o swipe no fim do trilho vire navegacao de volta no iOS */
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.midia__trilho::-webkit-scrollbar { display: none; }

.midia__item { scroll-snap-align: start; }

.midia__card {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  height: 100%;
  min-height: 253px;                /* altura medida no cartao da referencia */
  padding: var(--e-5);
  background: var(--c-fundo);
  border: 1px solid var(--c-borda);
  border-radius: var(--r-8);
  color: inherit;
  text-decoration: none;
}

/* a citacao empurra a marca para o rodape do cartao: as tres assinaturas ficam
   na mesma linha mesmo com textos de tamanhos diferentes */
.midia__citacao {
  margin: 0;
  font-size: var(--t-15, var(--t-14));
  line-height: 1.75;
  color: var(--c-texto-2);
}

.midia__marca {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  margin-top: auto;
}

.midia__marca img,
.logos__placeholder {
  height: var(--logos-altura, 40px);
  width: auto;
  max-width: 200px;
  object-fit: contain;
}

/* o cinza e opcional (checkbox) */
.logos--cinza .midia__marca { filter: grayscale(1); }

a.midia__card:hover { border-color: var(--c-azul); }

a.midia__card:focus-visible {
  outline: 2px solid var(--c-azul);
  outline-offset: var(--e-1);
}

/* nome ao lado da marca, como "Business of Fashion" e "Mundo do Marketing"
   aparecem na referencia ao lado do simbolo */
.midia__veiculo {
  font-family: var(--f-titulo);
  font-size: var(--t-14);
  font-weight: var(--p-bold);
  color: var(--c-texto);
}

/* fallback textual quando o veiculo nao tem logo carregado */
.logos__nome {
  font-family: var(--f-titulo);
  font-size: var(--t-18);
  font-weight: var(--p-bold);
  letter-spacing: .02em;
  color: var(--c-texto-2);
}

/* --- controles ---
   Escondidos ate o script confirmar que ha o que rolar: com todos os cartoes
   visiveis eles nao navegariam nada. */

.midia__controles {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  margin-top: var(--e-5);
}

.midia[data-pronto="true"] .midia__controles { display: flex; }

.midia__pontos {
  display: flex;
  align-items: center;
  gap: var(--e-2);
}

.midia__ponto {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: var(--r-circ);
  background: var(--c-borda);
  cursor: pointer;
  transition: background var(--transicao);
}

.midia__ponto[aria-current="true"] { background: var(--c-azul); }

.midia__setas {
  display: flex;
  align-items: center;
  gap: var(--e-2);
}

/* mesmo disco de 34px das setas do hero, para o carrossel ter uma linguagem so */
.midia__seta {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--c-borda);
  border-radius: var(--r-circ);
  background: var(--c-fundo);
  color: var(--c-texto-2);
  cursor: pointer;
  transition: color var(--transicao), border-color var(--transicao);
}

.midia__seta:hover {
  color: var(--c-azul);
  border-color: var(--c-azul);
}

.midia__seta:focus-visible,
.midia__ponto:focus-visible {
  outline: 2px solid var(--c-azul);
  outline-offset: 2px;
}

@media (max-width: 900px) {
  .midia__trilho { grid-auto-columns: calc((100% - var(--e-4)) / 2); }
  .midia__card { min-height: 200px; }
}

@media (max-width: 640px) {
  .midia__trilho { grid-auto-columns: 100%; }
  .midia__card { min-height: 0; padding: var(--e-4); }

  .midia__marca img,
  .logos__placeholder { height: calc(var(--logos-altura, 40px) * .8); }
}

/* ===== main-produto ===== */
/* --- main-produto --------------------------------------------------------- */

.pdp { padding-block: var(--e-5) var(--e-7); }

/* Medido na referencia a 1600px de viewport: galeria 721,2px e coluna de
   compra 480,8px dentro de uma faixa de 1232px — proporcao exata de 1,5 : 1,
   com 30px de intervalo. O nosso container util e 1248px, entao 1.5fr/1fr com
   --e-6 (32px) cai em 729,6 / 486,4 — menos de 1,2% de desvio. */
.pdp__topo {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--e-6);
  align-items: start;
}

/* --- galeria --- */
/* Referencia: coluna de miniaturas de 80px, intervalo de 24px e palco de
   617px. Antes o intervalo era 16px e comprimia a leitura das miniaturas. */
.pdp__galeria {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: var(--e-5);
}

.pdp__thumbs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}

.pdp__thumb {
  width: 80px;
  padding: 0;
  border: 1px solid var(--c-borda);
  border-radius: var(--r-8);
  background: var(--c-fundo-2);
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--transicao);
}
.pdp__thumb[aria-selected="true"] { border-color: var(--c-azul); }

/* A referencia mantem o palco quadrado (617x617) e usa `contain`, para o
   frasco nunca ser cortado quando a foto nao for quadrada. O raio la e de
   24px; base.css nao tem --r-24, entao uso --e-5, que vale exatamente 24px
   (ver relatorio: falta um token de raio 24). */
.pdp__palco {
  background: var(--c-fundo-2);
  border-radius: var(--e-5);
  overflow: hidden;
  aspect-ratio: 1;
}
.pdp__foto,
.pdp__foto img { width: 100%; height: 100%; }
.pdp__foto img { object-fit: contain; }
/* produto sem foto: o SVG de placeholder tambem tem de preencher o palco,
   senao sai no tamanho natural e estoura o quadrado. */
.pdp__placeholder { width: 100%; height: 100%; }

/* --- coluna de compra --- */
/* Referencia: 12px em negrito, cinza --c-texto-3, e a contagem sublinhada. */
.pdp__rating {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-12);
  font-weight: var(--p-bold);
  color: var(--c-texto-3);
  margin-bottom: var(--e-2);
}
.pdp__estrelas { color: var(--c-ciano); letter-spacing: 2px; }
.pdp__rating-txt { text-decoration: underline; }

.pdp__titulo { font-size: var(--t-32); margin-bottom: var(--e-1); }

.pdp__sub {
  color: var(--c-texto-2);
  font-size: var(--t-14);
  margin-bottom: var(--e-2);
}

/* A linha de ativos e a primeira frase que a pessoa le depois do titulo: na
   referencia ela tem 15px e o cinza medio, nao os 12px apagados de rodape. */
.pdp__ativos {
  color: var(--c-texto-2);
  font-size: var(--t-15);
  margin-bottom: var(--e-4);
}

/* Na referencia este rotulo e um ::before da lista: 16px/700 no azul, com 28px
   de respiro acima e 7px abaixo. Estava em 14px e colado na linha de ativos. */
.pdp__benef-titulo {
  font-weight: var(--p-bold);
  color: var(--c-azul);
  font-size: var(--t-16);
  margin-top: var(--e-6);
  margin-bottom: var(--e-2);
}

/* Referencia: item de 15px, entrelinha 22,5px e 8px entre itens. */
.pdp__lista { list-style: none; margin: 0 0 var(--e-5); padding: 0; }
.pdp__lista li {
  display: flex;
  align-items: flex-start;
  gap: var(--e-2);
  font-size: var(--t-15);
  line-height: 1.5;
  margin-bottom: var(--e-2);
}
.pdp__lista svg { flex: 0 0 auto; color: var(--c-ciano); margin-top: 2px; }

.pdp__variantes { display: grid; gap: var(--e-3); margin-bottom: var(--e-4); }
.pdp__opt { display: grid; gap: var(--e-1); font-size: var(--t-12); }
.pdp__opt select {
  padding: var(--e-3);
  border: 1px solid var(--c-borda);
  border-radius: var(--r-8);
  font: inherit;
  background: var(--c-fundo);
}

.pdp__linha-compra {
  display: flex;
  gap: var(--e-3);
  align-items: stretch;
  margin-block: var(--e-4);
}

.stepper {
  display: flex;
  align-items: center;
  border: 1px solid var(--c-borda);
  border-radius: var(--r-pill);
  padding-inline: var(--e-2);
  flex: 0 0 auto;
}
.stepper button {
  border: 0;
  background: none;
  cursor: pointer;
  padding: var(--e-2);
  color: var(--c-azul);
  display: flex;
}
.stepper input {
  width: 40px;
  border: 0;
  text-align: center;
  font: inherit;
  -moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.pdp__aviso {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  background: var(--c-tint);
  color: var(--c-azul);
  font-size: var(--t-12);
  font-weight: var(--p-semi);
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-8);
}

/* --- accordions ---
   Na referencia os accordions da PDP nao sao caixas soltas: e um painel cinza
   (--c-fundo-3) de raio 16 e 8px de recheio, com cada item em branco dentro
   dele. E esse painel que separa a ficha do produto do resto da pagina. */
.pdp__detalhes {
  margin-top: var(--e-7);
  display: grid;
  gap: var(--e-2);
  background: var(--c-fundo-3);
  border-radius: var(--r-16);
  padding: var(--e-2);
}

.acordeao {
  background: var(--c-fundo);
  border: 1px solid var(--c-borda);
  border-radius: var(--r-8);
  overflow: hidden;
}
/* Dentro do painel a borda cinza vira ruido: la a borda e da cor do painel. */
.pdp__detalhes .acordeao { border-color: var(--c-fundo-3); }

/* A referencia usa DUAS escalas para o mesmo componente: na FAQ o cabecalho e
   16px/600 no cinza --c-texto-3 (altura 51), e no painel da ficha do produto e
   18px/700 em --c-texto (altura 57). Este e o caso base — a FAQ. */
.acordeao summary {
  cursor: pointer;
  padding: var(--e-4) var(--e-5);
  font-weight: var(--p-semi);
  color: var(--c-texto-3);
  font-size: var(--t-16);
  list-style: none;
}
/* ...e esta e a variacao mais pesada, so dentro do painel da ficha. */
.pdp__detalhes .acordeao summary {
  font-weight: var(--p-bold);
  color: var(--c-texto);
  font-size: var(--t-18);
}
.acordeao summary::-webkit-details-marker { display: none; }
.acordeao summary::after { content: '+'; float: right; font-size: var(--t-18); }
.acordeao[open] summary::after { content: '−'; }
.acordeao__corpo { padding: 0 var(--e-5) var(--e-4); font-size: var(--t-14); }

@media (max-width: 900px) {
  .pdp__topo { grid-template-columns: 1fr; gap: var(--e-5); }
  .pdp__galeria { grid-template-columns: 1fr; }
  .pdp__thumbs { flex-direction: row; overflow-x: auto; order: 2; }
  .pdp__titulo { font-size: var(--t-24); }
  .pdp__linha-compra { flex-wrap: wrap; }
}

/* ===== mini-banners ===== */
/* --- mini-banners --------------------------------------------------------
   Proporcao 720/324 (2,22) medida na referencia. Linha rolavel em vez de
   grade fixa porque a quantidade de pecas muda a cada campanha — com grade,
   duas ou cinco quebrariam o alinhamento.
   ------------------------------------------------------------------------ */

.minib--suave { background: var(--c-fundo-2); }

/* Sangria ate a borda: margem negativa tira o gutter, padding devolve. Assim
   o primeiro item alinha com o texto e o proximo aparece cortado, sinalizando
   que da para arrastar. */
.minib__pista {
  list-style: none;
  margin: 0;
  margin-inline: calc(var(--gutter) * -1);
  padding: 0 var(--gutter);
  display: flex;
  gap: var(--e-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.minib__pista::-webkit-scrollbar { display: none; }

.minib__item {
  flex: 0 0 auto;
  width: min(80%, 400px);
  scroll-snap-align: start;
}

.minib__quadro {
  position: relative;
  display: block;
  aspect-ratio: 720 / 324;
  border-radius: var(--r-8);
  overflow: hidden;
  background: var(--c-fundo-3);
}

.minib__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transicao);
}
a.minib__quadro:hover .minib__img { transform: scale(1.03); }

@media (prefers-reduced-motion: reduce) {
  .minib__img { transition: none; }
  a.minib__quadro:hover .minib__img { transform: none; }
}

/* Rotulo com gradiente atras: a arte varia por campanha, entao texto direto
   sobre a foto pode cair num trecho claro e sumir. */
.minib__rotulo {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--e-5) var(--e-4) var(--e-3);
  font-family: var(--f-titulo);
  font-size: var(--t-14);
  font-weight: var(--p-bold);
  color: var(--c-fundo);
  background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent);
}

a.minib__quadro:focus-visible { outline: 2px solid var(--c-azul); outline-offset: 2px; }

/* A partir de 3 por linha o carrossel vira grade: nao ha o que rolar */
@media (min-width: 900px) {
  .minib__pista {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
  .minib__item { width: auto; }
}

/* ===== mosaico-ugc ===== */
/* ==========================================================================
   Secao: mosaico-ugc
   Galeria estilo Instagram com blocos de tamanhos variados.
   ========================================================================== */

.mosaico--tint { background: var(--c-tint); }

/* Medido na referencia (viewport 1600): a faixa cinza tem 48px de padding em
   cima e embaixo, 72px de margem ate a proxima secao e o mosaico dentro dela
   ocupa 1232x604 — 772px no total. O default de base.css (48/48, sem margem)
   e um mosaico de uma linha so davam 422px. */
/* .mosaico vem do "class" do schema, que a Shopify poe no wrapper
   <div id="shopify-section-...">; por isso o seletor e descendente */
.mosaico .secao {
  padding-block: var(--e-7);
  margin-bottom: calc(var(--e-7) + var(--e-5));
}

/* A altura de linha e fixa (clamp em vw) de proposito: item que ocupa 2 linhas
   nao tem como referenciar uma linha automatica, e com grid-auto-rows: auto o
   mosaico colapsaria nas linhas ocupadas so por destaques.
   18,5vw = 296px em 1600, o que fecha 2 linhas + 12 de gap nos 604 medidos. */
.mosaico__grade {
  --mosaico-linha: clamp(140px, 18.5vw, 320px);

  display: grid;
  grid-template-columns: repeat(var(--mosaico-colunas, 4), 1fr);
  grid-auto-rows: var(--mosaico-linha);
  grid-auto-flow: dense; /* preenche os buracos que os destaques deixam atras */
  gap: var(--e-3);
}

.mosaico__item {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-8);
  background: var(--c-fundo-3);
  color: var(--c-borda-2); /* cor do placeholder, que herda currentColor */
}

.mosaico__item--largura { grid-column: span 2; }
.mosaico__item--altura { grid-row: span 2; }
.mosaico__item--grande { grid-column: span 2; grid-row: span 2; }

.mosaico__item img,
.mosaico__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transicao);
}

.mosaico__item:hover img { transform: scale(1.04); }

/* opacity 1 no hover anula o a:hover global da base, que apagaria a foto */
a.mosaico__item:hover { opacity: 1; }

a.mosaico__item:focus-visible {
  outline: 2px solid var(--c-azul);
  outline-offset: 2px;
}

.mosaico__over {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e-2);
  padding: var(--e-3);
  color: var(--c-fundo);
  /* degrade a partir do token de texto: escurece o pe da foto sem hex solto */
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--c-texto) 72%, transparent),
    transparent 62%
  );
  opacity: 0;
  transition: opacity var(--transicao);
}

.mosaico__item:hover .mosaico__over,
.mosaico__item:focus-visible .mosaico__over,
.mosaico__item:focus-within .mosaico__over { opacity: 1; }

.mosaico__legenda {
  font-size: var(--t-12);
  font-weight: var(--p-semi);
  line-height: 1.3;
}

.mosaico__icone {
  flex: 0 0 auto;
  display: inline-flex;
}

.mosaico__icone svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 900px) {
  .mosaico__grade { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  .mosaico__grade {
    --mosaico-linha: clamp(110px, 34vw, 200px);

    grid-template-columns: repeat(2, 1fr);
    gap: var(--e-2);
  }

  /* no toque nao existe hover: a legenda fica sempre visivel */
  .mosaico__over { opacity: 1; }
}

/* idem no mosaico: a foto padrao ocupa a celula inteira */
.mosaico__img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ===== pagina-rte ===== */
/* --- main-pagina e .rte --------------------------------------------------
   Faltavam por inteiro: as 6 classes `pagina__*` e o `.rte` usado em
   faq.liquid e main-produto.liquid nao tinham nenhuma regra.

   O `.rte` e o wrapper de conteudo vindo do editor da Shopify — o merchant
   escreve la e o HTML sai sem classe nos filhos, entao a estilizacao precisa
   descer por seletor de elemento.
   ------------------------------------------------------------------------ */

.pagina { padding-block: var(--e-6) var(--e-9); }

.pagina__coluna { max-width: 68ch; margin-inline: auto; }

.pagina__cabecalho {
  margin-bottom: var(--e-6);
  padding-bottom: var(--e-5);
  border-bottom: 1px solid var(--c-borda);
}

.pagina__titulo { font-size: var(--t-32); margin-bottom: var(--e-2); }

.pagina__subtitulo {
  color: var(--c-texto-2);
  font-size: var(--t-16);
  margin: 0;
}

.pagina__conteudo { font-size: var(--t-16); line-height: 1.75; }

.pagina__voltar {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  margin-top: var(--e-7);
  min-height: 44px;
  font-size: var(--t-12);
  color: var(--c-azul);
  border-bottom: 1px solid currentColor;
}

/* --- .rte: conteudo do editor, sem classe nos filhos --- */
.rte { line-height: 1.7; }

.rte > *:first-child { margin-top: 0; }
.rte > *:last-child { margin-bottom: 0; }

.rte h2 { font-size: var(--t-24); margin: var(--e-7) 0 var(--e-3); }
.rte h3 { font-size: var(--t-18); margin: var(--e-6) 0 var(--e-2); }
.rte h4 { font-size: var(--t-16); margin: var(--e-5) 0 var(--e-2); }

.rte p { margin-bottom: var(--e-4); }

.rte a {
  color: var(--c-azul);
  border-bottom: 1px solid currentColor;
}

.rte ul,
.rte ol { margin: 0 0 var(--e-4); padding-left: var(--e-5); }
.rte li { margin-bottom: var(--e-2); }

.rte img {
  border-radius: var(--r-8);
  margin-block: var(--e-5);
}

.rte blockquote {
  margin: var(--e-6) 0;
  padding-left: var(--e-5);
  border-left: 3px solid var(--c-azul);
  color: var(--c-texto-2);
}

.rte table {
  width: 100%;
  border-collapse: collapse;
  margin-block: var(--e-5);
  font-size: var(--t-14);
}
.rte th,
.rte td {
  padding: var(--e-3);
  border-bottom: 1px solid var(--c-borda);
  text-align: left;
}

@media (max-width: 640px) {
  .pagina__titulo { font-size: var(--t-24); }
  .pagina__conteudo,
  .rte { font-size: var(--t-14); }
}

/* --- migalha (breadcrumb) ------------------------------------------------
   Compartilhada por colecao, produto, pagina e busca. O separador vem do CSS,
   nao do markup: assim ele nao e lido em voz alta pelo leitor de tela nem
   entra no texto copiado.
   ------------------------------------------------------------------------ */

.migalha { margin-bottom: var(--e-4); }

.migalha__lista {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--t-12);
  color: var(--c-texto-3);
}

.migalha__item { display: flex; align-items: center; gap: var(--e-2); }

.migalha__item + .migalha__item::before {
  content: "•";
  color: var(--c-texto-4);
}

.migalha__item a { color: inherit; text-decoration: none; }
.migalha__item a:hover { color: var(--c-azul); text-decoration: underline; }
.migalha__item [aria-current="page"] { color: var(--c-texto); }

/* ===== pdp-compra ===== */
/* --- bloco de compra da PDP ----------------------------------------------
   A referencia agrupa preco, stepper, CTA e aviso de frete dentro de um card.
   Medido a 1600px de viewport: o card tem 464px (a coluna inteira), recheio de
   20x8, raio 16 e fundo quase branco (#f6fbfe) com borda azul quase invisivel;
   quem carrega o azul e a barra de frete la dentro.

   Antes estava invertido — card azul com barra branca —, o que empurrava o
   olho para a moldura em vez do preco. O recheio horizontal tambem era 24px, e
   isso estreitava a linha stepper + CTA em 32px.
   ------------------------------------------------------------------------ */

.pdp__caixa-compra {
  background: var(--c-fundo);
  border: 1px solid var(--c-tint);
  border-radius: var(--r-16);
  padding: var(--e-5) var(--e-2);
  margin-block: var(--e-4);
}

.pdp__caixa-compra .preco { margin-bottom: var(--e-4); }

/* Escala de preco medida na referencia:
   "De R$ 84,00" 14px/500 · valor PIX 24px/700 · "no PIX" 12,8px ·
   "ou a vista no cartao" 15px. O valor principal estava em 32px, grande
   demais para o card e brigando com o titulo do produto (que tambem e 32).

   O `:not(.preco--compacto)` nao e decoracao: preco.css declara essas mesmas
   propriedades com esse seletor e entra depois na concatenacao, entao sem
   repetir o :not() aqui a regra de la ganharia por ordem. */
.pdp__caixa-compra .preco:not(.preco--compacto) .preco__principal strong {
  font-size: var(--t-24);
}
.pdp__caixa-compra .preco:not(.preco--compacto) .preco__meio { font-size: var(--t-12); }
.pdp__caixa-compra .preco:not(.preco--compacto) .preco__cartao { font-size: var(--t-15); }
.pdp__caixa-compra .preco__de {
  font-size: var(--t-14);
  font-weight: var(--p-medio);
}

/* Os selos de desconto na referencia sao retangulos de raio 8 com 12px de
   texto, nao pills minusculas de 10px. */
.pdp__caixa-compra .preco__selo {
  font-size: var(--t-12);
  padding: var(--e-2) var(--e-1);
  border-radius: var(--r-8);
}

/* stepper: pill branco de borda fina — 138x56 na referencia */
.pdp__linha-compra .stepper {
  background: var(--c-fundo);
  border-color: var(--c-borda);
  padding-inline: var(--e-3);
  min-height: 56px;
}
.pdp__linha-compra .stepper input { width: 34px; font-weight: var(--p-semi); }

/* Referencia: 8px entre o stepper e o CTA (estava 12). */
.pdp__linha-compra { gap: var(--e-2); }

/* CTA: pill, texto a esquerda do centro, icone encostado na direita.
   Altura medida na referencia: 58px. */
.pdp__cta {
  position: relative;
  flex: 1;
  min-height: 58px;
  border-radius: var(--r-pill);
  padding-inline: var(--e-6);
}
.pdp__cta .pdp__cta-icone {
  position: absolute;
  right: var(--e-5);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  opacity: .9;
}
.pdp__cta .pdp__cta-icone svg { width: 20px; height: 20px; }

/* aviso de frete: e ele que carrega o azul do bloco. Referencia: 52,5px de
   altura (recheio 16,5), raio 12 e fundo azul-claro. */
.pdp__aviso {
  width: 100%;
  justify-content: center;
  background: var(--c-tint);
  color: var(--c-azul);
  border-radius: var(--r-8);
  padding: var(--e-4);
  margin: 0;
  font-size: var(--t-14);
}
.pdp__aviso svg { width: 20px; height: 20px; color: var(--c-azul); }

@media (max-width: 640px) {
  .pdp__caixa-compra { padding: var(--e-4) var(--e-2); }
  .pdp__cta { padding-inline: var(--e-5); }
}

/* ===== pdp-extras ===== */
/* --- video-produto ------------------------------------------------------- */
.vidp { padding-block: var(--e-6); }
.vidp__lista { list-style:none; margin:0; padding:0; display:flex; gap:var(--e-3);
  overflow-x:auto; scroll-snap-type:x mandatory; }
.vidp__item { flex:0 0 200px; scroll-snap-align:start; }
.vidp__botao { position:relative; width:100%; aspect-ratio:9/16; padding:0; border:0;
  border-radius:var(--r-16); overflow:hidden; background:var(--c-fundo-3); cursor:pointer; display:block; }
.vidp__botao img { width:100%; height:100%; object-fit:cover; }
.vidp__play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--c-fundo); font-size:var(--t-24); text-shadow:0 2px 8px rgba(0,0,0,.4); }
.vidp__botao iframe { width:100%; height:100%; border:0; }

/* --- compre-junto --------------------------------------------------------
   Medido a 1600px: os 3 cards ocupam 852px e o painel de acao 340px (mais
   24px de folga) dentro dos 1232px da faixa. O painel estava com 280px, o que
   comprimia o preco do combo e o botao em duas linhas. Com 340px os cards
   caem em 286,6px cada — exatamente o passo da referencia. */
.cjunto { padding-block: var(--e-7); }
.cjunto__grade { display:grid; grid-template-columns:repeat(3,1fr) 340px; gap:var(--e-4); align-items:stretch; }
.cjunto__item { position:relative; background:var(--c-fundo); border:1px solid var(--c-borda);
  border-radius:var(--r-8); padding:var(--e-4); text-align:center; }
.cjunto__mais { position:absolute; left:calc(var(--e-4) * -1); top:50%; transform:translateY(-50%);
  color:var(--c-texto-4); font-size:var(--t-18); font-weight:var(--p-bold); }
.cjunto__foto { display:block; background:var(--c-fundo-3); border-radius:var(--r-8);
  aspect-ratio:1; overflow:hidden; margin-bottom:var(--e-3); }
.cjunto__foto img { width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; }
.cjunto__nome { font-size:var(--t-12); font-weight:var(--p-bold); color:var(--c-azul); margin:0 0 var(--e-1); }
.cjunto__nome a { color:inherit; }
.cjunto__preco { font-size:var(--t-14); font-weight:var(--p-bold); margin:0; }
.cjunto__tag { font-size:var(--t-10); color:var(--c-texto-4); margin:var(--e-1) 0 0; }
/* Painel de acao: referencia usa recheio 16, borda cinza e azul bem lavado. */
.cjunto__total { background:var(--c-tint); border:1px solid var(--c-borda);
  border-radius:var(--r-8); padding:var(--e-4);
  display:flex; flex-direction:column; justify-content:center; text-align:center; gap:var(--e-2); }
.cjunto__total-rot { font-size:var(--t-14); font-weight:var(--p-bold); color:var(--c-texto-2); margin:0; }
.cjunto__total-de { font-size:var(--t-14); color:var(--c-texto-2); }
/* Referencia: 24px, no cinza de texto — o azul cheio competia com o botao. */
.cjunto__total-val { font-size:var(--t-24); font-weight:var(--p-bold); color:var(--c-texto-2); margin:var(--e-1) 0 var(--e-3); }
/* Botao do combo: 56px de altura na referencia (o padrao do .btn dava ~40). */
.cjunto__total .btn { min-height:56px; }

/* --- resultados ----------------------------------------------------------
   Na referencia esta caixa ocupa METADE da faixa (616px de 1232) e fica
   encostada na margem esquerda — a outra metade fica vazia de proposito. Aqui
   ela vinha em largura cheia, o que espalhava os quatro numeros e matava o
   contraste. `.stats__caixa` acumula a classe .wrap, entao a margem esquerda
   precisa reproduzir na mao o recuo que o .wrap centralizado daria. */
.stats__caixa {
  background:var(--c-fundo-2);
  border-radius:var(--r-16);
  padding:var(--e-7);
  max-width:calc((var(--largura) - 2 * var(--gutter)) / 2);
  margin-inline:max(var(--gutter), calc((100vw - var(--largura)) / 2 + var(--gutter))) auto;
}
/* Referencia usa o azul-link no titulo, nao o azul cheio dos demais H2. */
.stats__titulo { font-size:var(--t-32); color:var(--c-azul-link); max-width:14ch; }
.stats__pill { display:inline-block; background:var(--c-fundo); border:1px solid var(--c-fundo-3);
  border-radius:var(--r-pill); padding:var(--e-2) var(--e-4); font-size:var(--t-12);
  font-weight:var(--p-bold); color:var(--c-texto-2); }
.stats__grade { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--e-4); margin:var(--e-5) 0 0; }
/* Referencia: numero 32px e legenda 16px. Estavam em 40 e 12 — o numero
   gritava e a legenda ficava ilegivel ao lado dele. */
.stats__num { font-size:var(--t-32); font-weight:var(--p-bold); color:var(--c-azul); margin:0; }
.stats__leg { font-size:var(--t-16); color:var(--c-texto-3); margin:0; }

/* --- faq -----------------------------------------------------------------
   Referencia: banner de 556px, 120px de intervalo e a coluna de perguntas com
   os mesmos 556px. --e-9 (96px) e o token mais proximo do intervalo. */
/* Duas colunas so quando o banner existe (`--midia`); sem imagem a coluna de
   perguntas ficava com 556px e os outros 556px saiam em branco. */
.faq__caixa { display:grid; grid-template-columns:1fr; gap:var(--e-9); align-items:center; }
.faq__caixa--midia { grid-template-columns:1fr 1fr; }
.faq__midia img { border-radius:var(--r-8); width:100%; }
.faq__lista { display:grid; gap:var(--e-2); }
/* O titulo da FAQ na referencia e 32px no azul-link, nao o H2 padrao de 24. */
.faq__lista h2 { font-size:var(--t-32); color:var(--c-azul-link); margin-bottom:var(--e-4); }

/* --- banner-cta ---------------------------------------------------------- */
.cta__caixa { background:var(--c-azul); border-radius:var(--r-16); padding:var(--e-7);
  display:grid; grid-template-columns:1fr auto; gap:var(--e-5); align-items:center; color:var(--c-fundo); }
.cta__texto h2 { color:var(--c-fundo); }
.cta__texto p { opacity:.9; font-size:var(--t-14); }
.cta__btn { background:var(--c-fundo); color:var(--c-azul); }
.cta__midia img { border-radius:var(--r-8); }

/* --- avaliacoes ----------------------------------------------------------
   Na referencia a secao inteira e um painel azul-claro de raio 24 e recheio
   vertical 24, com o titulo centralizado em 32px e o conteudo numa coluna de
   926px (75% da faixa) tambem centralizada. Aqui era conteudo solto sobre
   branco, alinhado a esquerda — perdia a leitura de "bloco de prova social".
   base.css nao tem token de raio 24; --e-5 vale exatamente 24px. */
.aval .wrap {
  background:var(--c-tint);
  border-radius:var(--e-5);
  padding-block:var(--e-5);
}
.aval .secao__cabecalho { justify-content:center; margin-bottom:var(--e-5); }
.aval .secao__cabecalho h2 { font-size:var(--t-32); }

.aval__resumo { display:grid; grid-template-columns:1fr 1fr; gap:var(--e-2);
  max-width:75%; margin-inline:auto; }
.aval__nota, .aval__rec { background:var(--c-fundo); border:1px solid var(--c-borda);
  border-radius:var(--r-8); padding:var(--e-5); text-align:center; }
.aval__num { font-size:var(--t-40); font-weight:var(--p-bold); color:var(--c-azul); margin:0; }
.aval__num span { font-size:var(--t-18); color:var(--c-texto-4); }
.aval__estrelas { color:var(--c-ciano); letter-spacing:3px; margin:0; }
.aval__base { font-size:var(--t-12); color:var(--c-texto-2); margin:var(--e-1) 0 0; }
.aval__rec-num { font-size:var(--t-32); font-weight:var(--p-bold); color:var(--c-azul); margin:0; }
.aval__rec-txt { font-size:var(--t-12); color:var(--c-texto-2); margin:0; }
.aval__lista { margin-top:var(--e-5); max-width:75%; margin-inline:auto; }

@media (max-width: 900px) {
  .cjunto__grade { grid-template-columns:1fr 1fr; }
  .faq__caixa--midia, .cta__caixa, .aval__resumo { grid-template-columns:1fr; }
  .faq__caixa { gap:var(--e-5); }
  .cjunto__mais { display:none; }
  .aval__resumo, .aval__lista { max-width:none; }
  /* No mobile a caixa de resultados volta a ocupar a faixa toda. */
  .stats__caixa { max-width:none; margin-inline:auto; padding:var(--e-5); }
}

/* ===== prateleira-produtos ===== */
/* ==========================================================================
   Secao: prateleira-produtos
   Carrossel horizontal de cards. Um so mecanismo nos dois breakpoints: o
   trilho e sempre um scroller com scroll-snap; o que muda e quantos cards
   cabem e se as setas aparecem. Isso evita ter duas implementacoes (grade no
   desktop, carrossel no mobile) que divergem com o tempo.
   ========================================================================== */

prateleira-produtos { display: block; }

/* --- ritmo vertical -------------------------------------------------------
   Medido na referencia (viewport 1600): a prateleira comeca no proprio h2
   (padding-top 0) e a separacao ate o bloco seguinte e de 72px — o mesmo
   valor que a referencia usa entre todas as faixas da home. O default de
   base.css (.secao { padding-block: 48px }) dava 48/48 e encurtava a secao
   inteira em ~94px contra os 829px da referencia.
   O respiro de baixo e maior (144px) porque na referencia e ali que ficam as
   bolinhas e as setas do carrossel: do ultimo card ate o bloco seguinte sao
   1730 - 1586 = 144px. */
.prateleira { padding-block: 0 calc(var(--e-9) + var(--e-7)); }

/* --- cabecalho ---
   Na referencia o "Ver tudo" fica colado no titulo (x 523 com o h2 terminando
   em 507), nao encostado na borda direita do container. Como o Liquid embrulha
   titulo+subtitulo num .prateleira__intro, o display:contents dissolve esse
   embrulho e deixa os tres elementos serem itens do flex do cabecalho:
   linha 1 = [h2][Ver tudo], linha 2 = subtitulo. */

.prateleira__cabecalho {
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: baseline;
  column-gap: var(--e-4);
  row-gap: calc(var(--e-1) + 2px);   /* 6px medidos entre titulo e subtitulo */
}

.prateleira__intro { display: contents; }

/* descendente, e nao filho direto: com display:contents o subtitulo vira item
   do flex mas continua sendo filho de .prateleira__intro no DOM */
.prateleira__cabecalho .secao__sub {
  flex-basis: 100%;
  order: 3;
  /* referencia: 15/22,5 em #616161 — o default de base.css era 14/21 */
  font-size: var(--t-15);
  line-height: 1.5;
}

.prateleira__titulo {
  margin-bottom: 0;
  font-family: var(--f-wide, var(--f-titulo));
  /* 28/42 medidos na referencia */
  font-size: var(--t-28);
  line-height: 1.5;
}

/* "Ver tudo" e azul na referencia, nao cinza, e a seta e a diagonal para
   cima-a-direita — a horizontal que estava aqui lia como "avancar", nao como
   "abrir a listagem". */
.prateleira__ver-todos {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  flex-shrink: 0;
  order: 2;
  /* referencia: 14/700, caixa normal (nao caixa alta) */
  font-size: var(--t-14);
  font-weight: var(--p-bold);
  letter-spacing: normal;
  text-transform: none;
  color: var(--c-azul);
  white-space: nowrap;
}

.prateleira__ver-todos:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prateleira__ver-todos svg {
  width: 14px;
  height: 14px;
}

/* --- chips de filtro --- */

/* Dentro do flex do cabecalho: margin-left auto encosta os chips a direita, na
   mesma linha do titulo. `order: 2` os poe depois do "Ver tudo" e antes do
   subtitulo, que tem order 3 e quebra a linha com flex-basis 100%.

   Na referencia o grupo inteiro vive dentro de uma caixa branca contornada, em
   pill: os chips nao tem contorno proprio: quem desenha a borda e o container,
   e so o selecionado vira pilula azul. Solto, como estava, o grupo parecia
   quatro botoes avulsos. */
.prateleira__chips {
  order: 2;
  margin-left: auto;
  margin-bottom: 0;
  gap: var(--e-1);
  padding: 5px;
  border: 1px solid var(--c-borda);
  border-radius: var(--r-pill);
  background: var(--c-fundo);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--c-texto-2) 8%, transparent);
}

/* dentro do container o chip e so texto ate ser escolhido */
.prateleira__chips .chip {
  border-color: transparent;
  background: transparent;
  padding-inline: var(--e-3);
}

.prateleira__chips .chip:hover {
  color: var(--c-azul);
}

.prateleira__chips .chip[aria-selected="true"] {
  background: var(--c-azul);
  border-color: var(--c-azul);
  color: #fff;
}

/* Abaixo disso o titulo mais os chips nao cabem lado a lado: os chips descem
   para uma linha propria, ja depois do subtitulo. */
@media (max-width: 1024px) {
  .prateleira__chips {
    order: 4;
    flex-basis: 100%;
    margin-left: 0;
    margin-top: var(--e-3);
  }
}

/* referencia: pill de 39px, 15/700, ativo em azul-claro cheio */
.prateleira__chips .chip {
  padding: calc(var(--e-2) + 2px) var(--e-5);
  border-color: transparent;
  border-radius: var(--r-pill);
  font-size: var(--t-15);
  font-weight: var(--p-bold);
}

.prateleira__chips .chip[aria-selected="true"] {
  background: var(--c-azul-claro);
  border-color: var(--c-azul-claro);
}

.prateleira__chips .chip {
  transition: background var(--transicao), color var(--transicao), border-color var(--transicao);
}

.prateleira__chips .chip:hover { border-color: var(--c-borda-2); }

.prateleira__chips .chip:focus-visible,
.prateleira__seta:focus-visible,
.prateleira__painel:focus-visible {
  outline: 2px solid var(--c-azul);
  outline-offset: 2px;
}

/* --- trilho --- */

.prateleira__palco { position: relative; }

.prateleira__trilho {
  display: flex;
  align-items: stretch;
  gap: var(--e-4);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  /* contain evita que o swipe no fim do trilho vire navegacao de volta no iOS */
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.prateleira__trilho::-webkit-scrollbar { width: 0; height: 0; }

.prateleira__item {
  flex: 0 0 auto;
  scroll-snap-align: start;
  /* colunas fracionarias sao intencionais no mobile: o card cortado na borda
     e o que sinaliza que da para arrastar */
  width: calc((100% - (var(--pr-colunas) - 1) * var(--e-4)) / var(--pr-colunas));
}

/* cards da mesma prateleira terminam na mesma altura */
.prateleira__item > * { height: 100%; }

.prateleira__vazia {
  margin: 0;
  color: var(--c-texto-2);
  font-size: var(--t-14);
}

/* --- setas (desktop) --- */

/* Barra de controle abaixo da fileira: bolinhas na esquerda, setas na direita.
   Antes as setas eram absolutas nas laterais do trilho, na altura do meio, e
   cobriam a foto do primeiro e do ultimo card — na referencia elas nunca ficam
   por cima do produto. */
.prateleira__controles {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  margin-top: var(--e-5);
}

.prateleira__pontos {
  display: flex;
  align-items: center;
  gap: var(--e-2);
}

.prateleira__ponto {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: var(--r-circ);
  background: var(--c-borda);
  cursor: pointer;
  transition: background var(--transicao);
}

.prateleira__ponto[aria-current="true"] { background: var(--c-azul); }

.prateleira__setas {
  display: flex;
  align-items: center;
  gap: var(--e-2);
}

.prateleira__seta {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--c-borda);
  border-radius: var(--r-circ);
  background: var(--c-fundo);
  color: var(--c-texto-2);
  cursor: pointer;
  transition: opacity var(--transicao), border-color var(--transicao), color var(--transicao);
}

/* o deslocamento de um gutter poe a seta exatamente na margem do .wrap: mais
   que isso e a seta vaza do viewport em telas de 1280px e cria scroll no body */
.prateleira__seta svg { width: 16px; height: 16px; }

/* O giro de 180deg que existia aqui era para a seta-dir servir de seta-esq.
   Agora cada botao ja renderiza o chevron do seu lado — girar de novo apontaria
   os dois para o mesmo lugar. */

.prateleira__seta:hover {
  border-color: var(--c-azul);
  color: var(--c-azul);
}
.prateleira__seta:disabled { opacity: .35; cursor: default; }
.prateleira__seta:disabled:hover { border-color: var(--c-borda); }

/* --- breakpoints: so a contagem de colunas muda --- */

.prateleira { --pr-colunas: 1.35; }

@media (min-width: 641px) {
  .prateleira { --pr-colunas: 2.4; }
}

@media (min-width: 1024px) {
  /* aqui, e so aqui, vale o numero escolhido no editor de tema */
  .prateleira { --pr-colunas: var(--pr-colunas-desktop, 4); }

  .prateleira__seta:not([hidden]) { display: flex; }
}

@media (max-width: 1023px) {
  /* sangria ate a borda da tela: o trilho ignora o gutter do .wrap e devolve
     ele como padding, para o primeiro card continuar alinhado ao titulo */
  .prateleira__trilho {
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-padding-inline-start: var(--gutter);
  }
}

/* ===== preco ===== */
/* --- preco ---------------------------------------------------------------
   Hierarquia medida no card da referencia (bloco de 94px de altura):

     linha 1  preco cheio riscado 13/500 #757575 + pill "15% OFF" 12/700
              azul sobre azul-claro, raio 8            -> 26px
     linha 2  valor no PIX 24/700 #212121 + "no PIX" 14/700 #212121
              + pill "+5% OFF"                          -> 28px
     linha 3  "R$ 80,52 a vista no cartao" 15/500 #616161 -> 22,5px
     gap entre linhas: 4px

   O que estava aqui usava 20px no valor PIX (referencia: 24), 12/400 no
   "no PIX" (referencia: 14/700) e 12px no cartao (referencia: 15/500) — o
   bloco todo lia com um nivel de hierarquia a menos.

   As regras sem prefixo valem para o card/prateleira; a PDP fica isolada em
   `.preco:not(.preco--compacto)` no fim do arquivo.
   ------------------------------------------------------------------------- */

.preco { margin: 0 0 var(--e-3); }

.preco__linha-de {
  display: flex;
  align-items: center;
  gap: calc(var(--e-1) + 2px);   /* 6px medidos */
  margin-bottom: var(--e-1);
}

.preco__de {
  display: inline-block;
  font-size: var(--t-12);        /* referencia usa 13px; nao ha token de 13 */
  font-weight: var(--p-medio);
  color: var(--c-texto-3);
  text-decoration: line-through;
  margin: 0;
}

.preco__principal {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--e-1) + 2px);
  margin: 0 0 var(--e-1);
}

.preco__principal strong {
  font-size: var(--t-24);
  font-weight: var(--p-bold);
  color: var(--c-texto);
  line-height: 1.167;            /* 28/24 medidos */
}

/* "no PIX" acompanha o valor: mesmo tom, peso cheio, um degrau menor */
.preco__meio {
  font-size: var(--t-14);
  font-weight: var(--p-bold);
  color: var(--c-texto);
  line-height: 1.5;
}

.preco__selo {
  /* referencia usa pill de fundo azul-claro com texto azul e raio 8 */
  background: var(--c-tint);
  color: var(--c-azul);
  font-size: var(--t-12);
  font-weight: var(--p-bold);
  line-height: 1.5;
  padding: var(--e-1) var(--e-2);
  border-radius: var(--r-8);
  white-space: nowrap;
}

.preco__cartao {
  font-size: var(--t-15);
  font-weight: var(--p-medio);
  color: var(--c-texto-2);
  line-height: 1.5;
  margin: 0;
}

.preco__parcelas {
  font-size: var(--t-12);
  color: var(--c-texto-3);
  margin: 2px 0 0;
}

/* Abaixo de 1024 a referencia baixa o valor PIX de 24 para 18 e a linha do
   cartao de 15 para 14; o "no PIX" e o pill ficam iguais. */
@media (max-width: 1024px) {
  .preco--compacto .preco__principal strong { font-size: var(--t-18); line-height: 1.556; }
  .preco--compacto .preco__cartao { font-size: var(--t-14); }
}

/* --- versao da PDP: mesma estrutura, escala maior --- */
.preco:not(.preco--compacto) .preco__principal strong { font-size: var(--t-32); }
.preco:not(.preco--compacto) .preco__meio { font-size: var(--t-16); }
.preco:not(.preco--compacto) .preco__cartao { font-size: var(--t-14); }
.preco:not(.preco--compacto) .preco__selo {
  font-size: var(--t-10);
  padding: 2px var(--e-2);
  border-radius: var(--r-pill);
}

/* ===== rodape ===== */
/* ==========================================================================
   Secao: rodape
   Bloco azul de cantos superiores arredondados: card claro de newsletter a
   esquerda, colunas de links a direita, marca d'agua ao pe.

   Medidas conferidas no site de referencia a 1470px de viewport:
     bloco raio 40px 40px 0 0, recuo 88px em cima / 80px embaixo;
     card 344px de largura, fundo #fafafa, raio 16px, recuo 48/24/24;
     titulo do card 20px/600 em #489ef9, texto 16px/lh21 em #9e9e9e;
     campo de e-mail 296x56 com botao de 98x40 e raio 8px por dentro;
     colunas 3x254.7 com 32px de intervalo; titulo 18px/600, link 15px/400,
     ambos brancos, 16px entre linhas.

   As variacoes de claro/escuro saem de color-mix sobre os tokens
   (--c-fundo sobre --c-azul), para o rodape acompanhar a cor que o merchant
   escolher no editor sem nenhum valor de cor solto aqui.
   ========================================================================== */

.rodape {
  --rodape-fg: var(--c-fundo);
  --rodape-fg-2: color-mix(in srgb, var(--c-fundo) 74%, var(--c-azul));
  --rodape-linha: color-mix(in srgb, var(--c-fundo) 20%, var(--c-azul));
  --rodape-hover: color-mix(in srgb, var(--c-fundo) 14%, var(--c-azul));
  --rodape-seta: color-mix(in srgb, var(--c-azul-link) 55%, var(--c-azul));
  --rodape-raio-topo: calc(var(--r-16) + var(--e-5));

  display: block;
  position: relative;
  overflow: hidden;
  background: var(--c-azul);
  color: var(--rodape-fg);
  border-start-start-radius: var(--rodape-raio-topo);
  border-start-end-radius: var(--rodape-raio-topo);
}

.rodape__wrap {
  position: relative;
  z-index: 1;
  padding-block: calc(var(--e-8) + var(--e-5)) calc(var(--e-8) + var(--e-4));
}

/* card fixo a esquerda; o espaco que sobra vai todo entre ele e as colunas,
   igual ao space-between do referencia */
.rodape__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e-6);
}

/* --- card claro de newsletter --- */
/* card branco: sobre o azul do rodape o #fafafa de antes lia como cinza sujo,
   e na referencia ele e branco. O campo de e-mail e que fica cinza, logo
   abaixo, para se distinguir do card */
.rodape__news {
  flex: 0 1 344px;
  background: var(--c-fundo);
  border-radius: var(--r-16);
  padding: var(--e-7) var(--e-5) var(--e-5);
  color: var(--c-texto);
}

.rodape__news-logo {
  width: 195px;
  max-width: 100%;
  height: auto;
  margin-bottom: var(--e-5);
}

.rodape__news-titulo {
  color: var(--c-azul-link);
  font-size: var(--t-20);
  font-weight: var(--p-semi);
  line-height: 1;
  margin-bottom: var(--e-1);
}

.rodape__news-texto {
  color: var(--c-texto-4);
  font-size: var(--t-16);
  line-height: 1.3;
  margin-bottom: var(--e-5);
}

/* o campo e o botao dividem a mesma caixa branca, como no referencia */
.rodape__form {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-2) var(--e-2) var(--e-2) var(--e-5);
  background: var(--c-fundo-2);
  border-radius: var(--r-8);
}

.rodape__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--f-corpo);
  font-size: var(--t-14);
  color: var(--c-texto);
}

.rodape__input::placeholder { color: var(--c-texto-4); }

.rodape__input:focus { outline: none; }

.rodape__form:focus-within {
  outline: 2px solid var(--c-azul);
  outline-offset: 1px;
}

/* o botao do rodape nao e pill: 8px de raio, 13px/700 em caixa alta, como o
   "ASSINAR" da referencia */
.rodape__enviar.btn {
  flex: 0 0 auto;
  height: 40px;
  padding: 0 var(--e-4);
  border-radius: var(--r-8);
  font-size: var(--t-13, var(--t-12));
  font-weight: var(--p-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ocupa a linha inteira do flex para nao espremer input e botao */
.rodape__form-aviso {
  flex: 1 0 100%;
  margin: 0;
  font-size: var(--t-12);
  color: var(--c-ok);
}

.rodape__form-aviso--erro { color: var(--c-erro); }

/* --- colunas de links --- */
/* grid-auto-flow: column gera exatamente uma coluna por bloco; o
   repeat(auto-fit, ...) de antes criava uma faixa vazia a mais e comia 32px
   de largura (medido: "252px 252px 252px 0px") */
.rodape__colunas {
  flex: 0 1 auto;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 254px);
  gap: var(--e-6);
}

.rodape__col {
  min-width: 0;
}

.rodape__col-titulo {
  color: var(--rodape-fg);
  font-size: var(--t-18);
  font-weight: var(--p-semi);
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: none;
  margin-bottom: var(--e-4);
}

.rodape__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--e-4);
}

.rodape__lista a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
  color: var(--rodape-fg);
  font-size: var(--t-15);
  line-height: 1.15;
}

.rodape__lista a:hover {
  color: var(--rodape-fg);
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* A seta ja e diagonal na biblioteca (seta-diagonal), entao nao gira mais nada
   aqui: o rotate de -45deg sobre a seta horizontal deixava a haste mais longa
   que o desenho da referencia e desalinhava a ponta com a borda da coluna. */
.rodape__seta {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--rodape-seta);
}

.rodape__seta svg {
  width: 14px;
  height: 14px;
}

/* --- selo de compra segura ---
   Cartao claro abaixo da coluna do Social, com a nota em destaque. Na
   referencia ele e o widget do Reclame Aqui; aqui o desenho e proprio e a nota
   sai do editor, sem embutir marca de terceiro no tema. */
.rodape__selo {
  margin-top: var(--e-7);
}

.rodape__selo-card {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--e-2) var(--e-4);
  background: var(--c-fundo);
  border-radius: var(--r-4);
  color: var(--c-texto);
}

.rodape__selo-nota {
  display: flex;
  align-items: center;
  gap: var(--e-2);
}

.rodape__selo-estrelas {
  color: #f5a623;
  font-size: var(--t-14);
  letter-spacing: 1px;
}

.rodape__selo-valor {
  font-size: var(--t-18);
  font-weight: var(--p-bold);
  line-height: 1;
}

.rodape__selo-texto {
  margin: 0;
  font-size: var(--t-10);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--c-texto-4);
}

/* --- redes sociais --- */
.rodape__social {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  flex-wrap: wrap;
  margin-top: var(--e-7);
}

.rodape__social-titulo {
  color: var(--rodape-fg);
  font-size: var(--t-18);
  font-weight: var(--p-semi);
  letter-spacing: normal;
  text-transform: none;
  margin: 0;
}

.rodape__social-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--e-2);
}

.rodape__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-circ);
  border: 1px solid var(--rodape-linha);
  color: var(--rodape-fg);
  transition: background var(--transicao);
}

.rodape__social-link:hover { background: var(--rodape-hover); opacity: 1; }

.rodape__social-link svg {
  width: 18px;
  height: 18px;
}

/* --- barra inferior --- */
.rodape__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2) var(--e-4);
  margin-top: var(--e-7);
  color: var(--rodape-fg-2);
  font-size: var(--t-12);
}

.rodape__copy {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin: 0;
}

.rodape__legal { margin: 0; }

/* --- marca d'agua ao pe --- */
/* O logotipo em contorno, sangrando na largura toda e cortado pela base do
   bloco — e o desenho da referencia. O SVG ja vem com opacidade baixa, entao
   nao ha filtro de cor aqui. */
.rodape__marca {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  margin: 0;
  line-height: 0;
  user-select: none;
  pointer-events: none;
}

.rodape__marca img {
  display: block;
  width: 100%;
  height: auto;
  /* a base do desenho fica para fora do bloco, como na referencia */
  margin-bottom: calc(var(--e-7) * -1);
}

@media (max-width: 1024px) {
  .rodape__colunas {
    grid-auto-columns: minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .rodape__topo {
    flex-direction: column;
    gap: var(--e-6);
  }

  .rodape__news,
  .rodape__colunas {
    flex: 1 1 100%;
    width: 100%;
  }

  .rodape__colunas {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--e-6);
  }
}

@media (max-width: 640px) {
  .rodape__wrap {
    padding-block: var(--e-7) var(--e-6);
  }

  .rodape__colunas {
    grid-template-columns: minmax(0, 1fr);
  }

  .rodape__base { justify-content: flex-start; }

  .rodape__marca {
    bottom: calc(var(--e-6) * -1);
  }
}

/* ===== texto-seo ===== */
/* ==========================================================================
   Secao: texto-seo
   Texto longo recolhido atras de um <details>. Sem JavaScript.
   ========================================================================== */

.seo--tint { background: var(--c-tint); }

/* Medido na referencia (viewport 1600): o bloco de SEO e uma caixa de 1232px
   com borda 1px, raio 8 e padding 24, alinhada a esquerda e com 72px ate o
   rodape — 250px no total. Aqui era uma coluna estreita centralizada. */
.seo .secao { padding-block: 0 calc(var(--e-7) + var(--e-5)); }

.seo__conteudo {
  padding: var(--e-5);
  border: 1px solid var(--c-borda);
  border-radius: var(--r-8);
}

.seo__conteudo--estreito {
  /* ch em vez de px: a medida acompanha a fonte e para em ~75 caracteres */
  max-width: 75ch;
  margin-inline: auto;
}

/* referencia: 18/700 em cinza, no corpo do texto — nao um h2 azul de 24 */
.seo__titulo {
  font-family: var(--f-corpo);
  font-size: var(--t-18);
  font-weight: var(--p-bold);
  line-height: 1.5;
  color: var(--c-texto-2);
  margin-bottom: var(--e-2);
}

/* --- corpo de texto rico --- */
.seo__rte {
  color: var(--c-texto-2);
  font-size: var(--t-16);          /* referencia: 16/24 */
  line-height: 1.5;
}

.seo__rte > :last-child { margin-bottom: 0; }

.seo__rte p { margin: 0 0 var(--e-4); }
.seo__rte a { text-decoration: underline; }
.seo__rte strong { color: var(--c-texto); font-weight: var(--p-semi); }

.seo__rte ul,
.seo__rte ol {
  margin: 0 0 var(--e-4);
  padding-left: var(--e-5);
}

.seo__rte li { margin-bottom: var(--e-2); }

/* --- botao Ler mais --- */
.seo__caixa { margin-top: var(--e-4); }

.seo__toggle {
  /* display diferente de list-item + as duas regras abaixo somem com o
     triangulo padrao do <summary> em todos os motores */
  display: inline-flex;
  list-style: none;
}

.seo__toggle::marker,
.seo__toggle::-webkit-details-marker { display: none; content: ""; }

.seo__toggle:focus-visible {
  outline: 2px solid var(--c-azul);
  outline-offset: 2px;
}

/* os dois rotulos existem no HTML porque o texto vem do locale: trocar por
   content: "" no CSS deixaria a traducao presa na folha de estilo */
.seo__rotulo {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
}

.seo__rotulo svg {
  width: 12px;
  height: 12px;
}

.seo__rotulo--menos { display: none; }
.seo__caixa[open] .seo__rotulo--mais { display: none; }
.seo__caixa[open] .seo__rotulo--menos { display: inline-flex; }

/* --- conteudo expandido --- */
.seo__mais {
  padding-top: var(--e-5);
  margin-top: var(--e-5);
  border-top: 1px solid var(--c-borda);
}

.seo__topico { margin-top: var(--e-5); }

.seo__topico-titulo {
  font-size: var(--t-16);
  margin-bottom: var(--e-2);
}

@media (max-width: 640px) {
  .seo__toggle { width: 100%; }
}


/* ==========================================================================
   Correcoes do porte para WooCommerce
   Tudo o que precisou mudar em relacao ao CSS do tema Shopify fica aqui, junto,
   para a diferenca entre os dois temas ser facil de auditar.
   ========================================================================== */

/* --- trilhos horizontais nao podem esticar a pagina --------------------------

   Sintoma: a home ganhava ~860px de rolagem horizontal vazia — a barra aparecia
   no rodape da janela e nao havia nada para ver ao rolar.

   Causa: as prateleiras, os mini-banners, o carrossel de videos e a faixa de
   imprensa rolam por dentro (overflow-x: auto). O Chrome propaga a regiao de
   overflow desses containers para os ancestrais posicionados — .prateleira__palco
   e position: relative — e ela acaba somando na largura rolavel do documento.
   Nem overflow:hidden no pai nem overflow-x:clip no proprio trilho seguram isso;
   so a containment de pintura segura.

   `contain: paint` apenas declara o que ja e verdade: o trilho ja recorta o
   proprio conteudo. Com isso o documento volta a 100% de largura e a rolagem
   interna (com scroll-snap) continua funcionando igual.

   Nao e defeito do porte: a estrutura HTML aqui e a mesma do tema Shopify, entao
   o problema existe la tambem. So ficou visivel quando a loja passou a ter
   catalogo de verdade, com mais cards do que cabe na fileira.
   -------------------------------------------------------------------------- */
.prateleira__trilho,
.minib__pista,
.cvideos__pista,
.midia__trilho {
  contain: paint;
}

/* --- paginas do WooCommerce em largura cheia --------------------------------

   Carrinho, checkout e minha conta sao paginas comuns com um shortcode (ou um
   bloco) do WooCommerce dentro, entao caem no page.php — que foi desenhado para
   as 94 paginas de glossario, em coluna estreita de leitura. A tabela do
   carrinho e o formulario de checkout nao cabem ali.
   -------------------------------------------------------------------------- */
.pagina--larga .pagina__coluna--larga {
  max-width: none;
  width: 100%;
}

.pagina--larga .pagina__cabecalho {
  text-align: left;
}