/* =====================================================================
   Vitrinela · estilos do site sobre o PASSI DS 1.1.0
   Regras (AGENTS.md do PASSI): só variáveis de assets/passi/passi.css.
   Cores com função (--cor-fundo-*, --cor-texto-*, --cor-borda-*), espaços
   da escala --espaco-*, cantos --raio-*, bordas --borda-*, textos --texto-*.
   Nada de cor solta; px só em bordas, cantos e sombras.
   Componentes do PASSI usados aqui: Botão, Botão de ícone, Campo de texto,
   Seleção, Etiqueta, Selo, Card, Card de produto, Acordeão, Alerta,
   Aviso rápido, Dica flutuante, Carregando (esqueleto), Proporção de imagem.
   Padrões: Cabeçalho do site, Seções de página, Busca, Rodapé do site.
   PASSI DS · João Passini · CC BY 4.0
   ===================================================================== */

/* Medidas próprias do site, montadas só com tokens do PASSI */
:root {
  --vitrinela-margem: var(--grade-celular-margem);
  --vitrinela-barra: calc(var(--espaco-12) + var(--espaco-2));
  --vitrinela-cabecalho: calc(var(--espaco-3) + var(--vitrinela-barra));
  --vitrinela-card-trilho: calc(var(--espaco-24) * 2 + var(--espaco-12));
}
@media (min-width: 48em) {
  :root {
    --vitrinela-margem: var(--grade-tablet-margem);
    --vitrinela-card-trilho: calc(var(--espaco-24) * 2 + var(--espaco-16));
  }
}
@media (min-width: 64em) {
  :root { --vitrinela-margem: var(--grade-computador-margem); }
}

/* ───────── Base ───────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--vitrinela-cabecalho) + var(--espaco-4)); }
@media (prefers-reduced-motion: no-preference) { html:focus-within { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--cor-fundo-pagina);
  color: var(--cor-texto-padrao);
  font: var(--texto-corpo-medio);
  letter-spacing: var(--texto-corpo-medio-espacamento-letras);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
h1, h2, h3, h4, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
button, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
[data-icone] { display: inline-flex; flex: none; }

.limite {
  width: 100%;
  max-width: calc(var(--conteudo-maximo) + var(--vitrinela-margem) * 2);
  margin-inline: auto;
  padding-inline: var(--vitrinela-margem);
}

.pular-para-conteudo {
  position: absolute;
  z-index: 100;
  left: var(--espaco-4);
  top: calc(var(--espaco-16) * -1);
  padding: var(--espaco-2) var(--espaco-4);
  border-radius: var(--raio-pilula);
  background: var(--cor-fundo-invertido);
  color: var(--cor-texto-invertido);
  font: var(--texto-rotulo-medio);
  text-decoration: none;
}
.pular-para-conteudo:focus { top: var(--espaco-2); }

/* ───────── Botão (para links com cara de botão; o PASSI usa <passi-botao> nas ações) ───────── */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-2);
  min-height: var(--espaco-10);
  padding: 0 var(--espaco-4);
  border: var(--borda-fina) solid transparent;
  border-radius: var(--raio-pilula);
  font: var(--texto-rotulo-medio);
  letter-spacing: var(--texto-rotulo-medio-espacamento-letras);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--duracao-rapida) var(--curva-padrao), border-color var(--duracao-rapida) var(--curva-padrao);
}
.botao { position: relative; }
.botao--secundario { background: var(--cor-fundo-invertido); color: var(--cor-texto-invertido); }
.botao--secundario:hover { background: var(--cor-fundo-invertido-hover); }
.botao--secundario:active { background: var(--cor-fundo-invertido-pressionado); }
.botao--bloco { width: 100%; }
.botao .passi-icone { width: var(--espaco-4); height: var(--espaco-4); }

/* ───────── Botão de ícone ───────── */
.botao-icone {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--espaco-10);
  height: var(--espaco-10);
  margin: 0;
  padding: 0;
  border: var(--borda-fina) solid transparent;
  border-radius: var(--raio-pilula);
  background: transparent;
  color: var(--cor-texto-padrao);
  cursor: pointer;
  transition: background-color var(--duracao-rapida) var(--curva-padrao), border-color var(--duracao-rapida) var(--curva-padrao);
}
.botao-icone--p { width: var(--espaco-8); height: var(--espaco-8); }
.botao-icone--p .passi-icone { width: var(--espaco-4); height: var(--espaco-4); }
@media (pointer: coarse) {
  .botao-icone--p::after { content: ""; position: absolute; inset: calc(var(--espaco-1) * -1); }
}
.botao-icone--contorno { border-color: var(--cor-borda-forte); background: var(--cor-fundo-superficie); }
.botao-icone--contorno:hover { background: var(--cor-fundo-sutil); }
.botao-icone--contorno:active { background: var(--cor-fundo-sutil-hover); }
.botao-icone--superficie { background: var(--cor-fundo-superficie); }
.botao-icone--superficie:hover { background: var(--cor-fundo-sutil-hover); }
.botao-icone--superficie:active { background: var(--cor-fundo-fantasma-pressionado); }
.botao-icone--fantasma:hover { background: var(--cor-fundo-fantasma-hover); }
.botao-icone--fantasma:active { background: var(--cor-fundo-fantasma-pressionado); }
.botao-icone--secundario { background: var(--cor-fundo-invertido); color: var(--cor-texto-invertido); }
.botao-icone--secundario:hover { background: var(--cor-fundo-invertido-hover); }
.botao-icone--secundario:active { background: var(--cor-fundo-invertido-pressionado); }
/* botão de alternar (favoritar): ligado vira Secundário, além do aria-pressed */
.botao-icone[aria-pressed="true"] { background: var(--cor-fundo-invertido); border-color: var(--cor-fundo-invertido); color: var(--cor-texto-invertido); }
.botao-icone[aria-pressed="true"]:hover { background: var(--cor-fundo-invertido-hover); }

/* ───────── Dica flutuante ───────── */
.com-dica { position: relative; }
.dica {
  position: absolute;
  z-index: 30;
  left: 50%;
  bottom: calc(100% + var(--espaco-2));
  transform: translateX(-50%);
  padding: var(--espaco-1) var(--espaco-2);
  border-radius: var(--raio-medio);
  background: var(--cor-fundo-invertido);
  color: var(--cor-texto-invertido);
  font: var(--texto-rotulo-pequeno);
  letter-spacing: var(--texto-rotulo-pequeno-espacamento-letras);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--duracao-rapida) var(--curva-padrao), visibility var(--duracao-rapida) var(--curva-padrao);
}
.com-dica:hover > .dica,
.com-dica:focus-visible > .dica { opacity: 1; visibility: visible; pointer-events: auto; }
.com-dica[data-dica-oculta] > .dica { opacity: 0; visibility: hidden; }
.dica--baixo { top: calc(100% + var(--espaco-2)); bottom: auto; }
.dica--esquerda { left: auto; right: 0; transform: none; }
.dica--esquerda-lado { left: auto; right: calc(100% + var(--espaco-2)); top: 50%; bottom: auto; transform: translateY(-50%); }
@media (hover: none) { .com-dica:hover > .dica { opacity: 0; visibility: hidden; } }

/* ───────── Selo ───────── */
.selo {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-1);
  min-height: var(--espaco-6);
  padding: 0 var(--espaco-2);
  border-radius: var(--raio-pilula);
  background: var(--cor-fundo-sutil);
  color: var(--cor-texto-secundario);
  font: var(--texto-rotulo-pequeno);
  letter-spacing: var(--texto-rotulo-pequeno-espacamento-letras);
  white-space: nowrap;
}
.selo .passi-icone { width: var(--espaco-3); height: var(--espaco-3); }
.selo--marca { background: var(--cor-fundo-marca-sutil); color: var(--cor-texto-marca); }
.selo--forte.selo--marca { background: var(--cor-fundo-marca); color: var(--cor-texto-sobre-marca); }
.selo--forte.selo--neutro { background: var(--cor-fundo-invertido); color: var(--cor-texto-invertido); }

/* ───────── Etiqueta (filtros clicáveis) ───────── */
.etiqueta {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--espaco-1);
  min-height: var(--espaco-8);
  margin: 0;
  padding: 0 var(--espaco-3);
  border: var(--borda-fina) solid var(--cor-borda-forte);
  border-radius: var(--raio-pilula);
  background: var(--cor-fundo-superficie);
  color: var(--cor-texto-padrao);
  font: var(--texto-rotulo-medio);
  letter-spacing: var(--texto-rotulo-medio-espacamento-letras);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--duracao-rapida) var(--curva-padrao), border-color var(--duracao-rapida) var(--curva-padrao);
}
.etiqueta:hover { background: var(--cor-fundo-sutil); }
.etiqueta:active { background: var(--cor-fundo-sutil-hover); }
.etiqueta[aria-pressed="true"] { background: var(--cor-fundo-marca-sutil); border-color: var(--cor-borda-marca); color: var(--cor-texto-marca); }
.etiqueta .passi-icone { width: var(--espaco-4); height: var(--espaco-4); }
.etiqueta__check { display: none; }
.etiqueta[aria-pressed="true"] .etiqueta__check { display: inline-flex; }
.etiqueta[aria-pressed="true"] .etiqueta__icone { display: none; }
.etiqueta--m { min-height: var(--espaco-10); padding: 0 var(--espaco-4); }
@media (pointer: coarse) { .etiqueta { min-height: var(--espaco-10); } }
.etiqueta__contador { color: var(--cor-texto-secundario); font: var(--texto-corpo-pequeno); }
.etiqueta[aria-pressed="true"] .etiqueta__contador { color: inherit; }

/* faixa de etiquetas que rola de lado no celular */
.faixa-rolavel {
  display: flex;
  gap: var(--espaco-2);
  overflow-x: auto;
  margin-inline: calc(var(--vitrinela-margem) * -1);
  padding: var(--espaco-1) var(--vitrinela-margem);
  scrollbar-width: none;
}
.faixa-rolavel::-webkit-scrollbar { display: none; }

/* ───────── Cabeçalho: pílula flutuante (identidade da Vitrinela) ─────────
   Padrão Cabeçalho do site do PASSI: marca, navegação e ações. A pílula fica
   solta do topo; o anel na cor da página separa a pílula do conteúdo que rola
   por baixo (não é sombra de elevação). */
.cabecalho {
  position: sticky;
  top: var(--espaco-3);
  z-index: 40;
  display: flex;
  justify-content: center;
  padding-inline: var(--espaco-3);
  pointer-events: none;
}
.cabecalho__barra {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  width: 100%;
  max-width: calc(var(--espaco-24) * 10 + var(--espaco-20));
  min-height: var(--vitrinela-barra);
  padding: calc(var(--espaco-1) + var(--espaco-0-5)) calc(var(--espaco-1) + var(--espaco-0-5)) calc(var(--espaco-1) + var(--espaco-0-5)) var(--espaco-4);
  border-radius: var(--raio-pilula);
  background: var(--cor-fundo-sutil);
  box-shadow: 0 0 0 6px var(--cor-fundo-pagina);
  pointer-events: auto;
}
.cabecalho__marca { display: inline-flex; margin-right: auto; border-radius: var(--raio-pequeno); }
.cabecalho__marca img { height: calc(var(--espaco-5) + var(--espaco-0-5)); width: auto; }
.cabecalho__nav { display: none; }
.cabecalho__nav ul { display: flex; gap: var(--espaco-0-5); }
.cabecalho__cta { flex: none; }
@media (min-width: 56.25em) {
  .cabecalho__nav { display: block; }
  .cabecalho__menu { display: none; }
}
@media (max-width: 22.5em) { .cabecalho__cta { display: none; } }

/* Item de navegação dentro da pílula: o Ativo ganha fundo de superfície, como no Controle segmentado */
.item-nav {
  display: inline-flex;
  align-items: center;
  min-height: var(--espaco-10);
  padding: 0 var(--espaco-3);
  border-radius: var(--raio-pilula);
  color: var(--cor-texto-padrao);
  font: var(--texto-rotulo-medio);
  letter-spacing: var(--texto-rotulo-medio-espacamento-letras);
  text-decoration: none;
  transition: background-color var(--duracao-rapida) var(--curva-padrao);
}
.item-nav:hover { background: var(--cor-fundo-sutil-hover); text-decoration: underline; }
.item-nav:active { background: var(--cor-fundo-fantasma-pressionado); }
.item-nav[aria-current] { background: var(--cor-fundo-superficie); box-shadow: var(--sombra-pequena); }

/* Menu do celular, em tela cheia */
.menu-celular { position: fixed; inset: 0; z-index: 60; overflow-y: auto; background: var(--cor-fundo-pagina); }
.menu-celular__topo { display: flex; align-items: center; justify-content: space-between; min-height: var(--vitrinela-cabecalho); border-bottom: var(--borda-fina) solid var(--cor-borda-padrao); }
.menu-celular__topo img { height: var(--espaco-6); width: auto; }
.menu-celular__lista { padding-block: var(--espaco-4); }
.menu-celular__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-4);
  min-height: var(--espaco-12);
  padding: var(--espaco-3) var(--espaco-2);
  border-bottom: var(--borda-fina) solid var(--cor-borda-padrao);
  border-radius: var(--raio-medio);
  color: var(--cor-texto-padrao);
  font: var(--texto-titulo-4);
  letter-spacing: var(--texto-titulo-4-espacamento-letras);
  text-decoration: none;
}
.menu-celular__item:hover { background: var(--cor-fundo-fantasma-hover); }
.menu-celular__item:active { background: var(--cor-fundo-fantasma-pressionado); }
.menu-celular__item .passi-icone { color: var(--cor-texto-terciario); }
body.menu-aberto { overflow: hidden; }

/* ───────── Seções ───────── */
.secao { padding-top: var(--espaco-12); }
@media (min-width: 64em) { .secao { padding-top: var(--espaco-16); } }
.secao--sutil { margin-top: var(--espaco-16); padding-block: var(--espaco-12); background: var(--cor-fundo-sutil); }
.secao__topo { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--espaco-4); margin-bottom: var(--espaco-5); }
.secao__topo--dentro { padding-inline: 0; }
.secao__titulo {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  font: var(--texto-titulo-3);
  letter-spacing: var(--texto-titulo-3-espacamento-letras);
  text-wrap: balance;
}
@media (min-width: 48em) { .secao__titulo { font: var(--texto-titulo-2); letter-spacing: var(--texto-titulo-2-espacamento-letras); } }
.secao__icone { color: var(--cor-texto-marca); }
.secao__icone .passi-icone { width: var(--espaco-6); height: var(--espaco-6); }
.secao__apoio { margin-top: var(--espaco-1); color: var(--cor-texto-secundario); }
.secao__topo passi-botao { flex: none; }

/* ───────── Abertura ───────── */
.abertura { padding-block: var(--espaco-8) 0; }
@media (min-width: 64em) { .abertura { padding-top: var(--espaco-16); } }
.abertura__grade {
  display: grid;
  gap: var(--espaco-5);
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "texto" "busca" "vitrine" "categorias" "numeros";
}
@media (min-width: 64em) {
  .abertura__grade {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas: "texto vitrine" "busca vitrine" "categorias vitrine" "numeros vitrine";
    column-gap: var(--espaco-12);
    row-gap: var(--espaco-6);
    align-items: start;
  }
}
.abertura__texto { grid-area: texto; display: grid; gap: var(--espaco-4); }
.abertura__titulo { font: var(--texto-titulo-1); letter-spacing: var(--texto-titulo-1-espacamento-letras); text-wrap: balance; }
@media (min-width: 64em) { .abertura__titulo { font: var(--texto-display-medio); letter-spacing: var(--texto-display-medio-espacamento-letras); } }
.abertura__apoio { max-width: 34em; color: var(--cor-texto-secundario); font: var(--texto-corpo-grande); letter-spacing: var(--texto-corpo-grande-espacamento-letras); }
.abertura__busca { grid-area: busca; }

/* Busca · Barra: um campo só, com o ícone e o botão Buscar dentro */
.busca {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  max-width: 40em;
  padding: var(--espaco-1) var(--espaco-1) var(--espaco-1) var(--espaco-4);
  border: var(--borda-fina) solid transparent;
  border-radius: var(--raio-grande);
  background: var(--cor-fundo-sutil);
  transition: border-color var(--duracao-rapida) var(--curva-padrao);
}
.busca:hover { border-color: var(--cor-borda-forte); }
.busca:focus-within { border-color: var(--cor-borda-marca); outline: var(--borda-fina) solid var(--cor-borda-marca); outline-offset: 0; }
.busca__icone { color: var(--cor-texto-secundario); }
.busca__campo {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--espaco-12);
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--cor-texto-padrao);
  font: var(--texto-corpo-medio);
}
.busca__campo::placeholder { color: var(--cor-texto-terciario); opacity: 1; }
.busca passi-botao { flex: none; }
.abertura__vitrine { grid-area: vitrine; }
.abertura__categorias { grid-area: categorias; }
@media (max-width: 63.99em) { .abertura__categorias { display: flex; flex-wrap: nowrap; gap: var(--espaco-2); overflow-x: auto; margin-inline: calc(var(--vitrinela-margem) * -1); padding: var(--espaco-1) var(--vitrinela-margem); scrollbar-width: none; } }
@media (min-width: 64em) { .abertura__categorias { display: flex; flex-wrap: wrap; gap: var(--espaco-2); } }
.atalho {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--espaco-2);
  min-height: var(--espaco-10);
  margin: 0;
  padding: 0 var(--espaco-4) 0 calc(var(--espaco-1) + var(--espaco-0-5));
  border: var(--borda-fina) solid transparent;
  border-radius: var(--raio-pilula);
  background: var(--cor-fundo-sutil);
  color: var(--cor-texto-padrao);
  font: var(--texto-rotulo-medio);
  letter-spacing: var(--texto-rotulo-medio-espacamento-letras);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--duracao-rapida) var(--curva-padrao);
}
.atalho:hover { background: var(--cor-fundo-sutil-hover); }
.atalho:active { background: var(--cor-fundo-fantasma-pressionado); }
.atalho__icone { display: grid; place-items: center; width: calc(var(--espaco-6) + var(--espaco-1)); height: calc(var(--espaco-6) + var(--espaco-1)); border-radius: var(--raio-medio); background: var(--cor-fundo-superficie); color: var(--cor-texto-marca); }
.atalho__icone .passi-icone { width: var(--espaco-4); height: var(--espaco-4); }
.abertura__numeros { grid-area: numeros; display: flex; flex-wrap: wrap; gap: var(--espaco-1) var(--espaco-4); color: var(--cor-texto-secundario); font: var(--texto-legenda); font-variant-numeric: tabular-nums; }
.abertura__numeros b { color: var(--cor-texto-padrao); font-weight: var(--peso-seminegrito); }

/* Vitrine da abertura: Achado do dia + dois destaques (mosaico da Vitrinela) */
.abertura__vitrine { display: grid; gap: var(--espaco-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vitrine-item {
  position: relative;
  display: block;
  min-width: 0;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border-radius: var(--raio-extra);
  background: var(--cor-fundo-sutil);
  color: var(--cor-texto-padrao);
  text-decoration: none;
  transition: background-color var(--duracao-rapida) var(--curva-padrao);
}
.vitrine-item:hover { background: var(--cor-fundo-sutil-hover); }
.vitrine-item--principal { grid-column: 1 / -1; aspect-ratio: 5 / 4; background: var(--cor-fundo-marca-sutil); }
.vitrine-item--principal:hover { background: var(--cor-fundo-marca-sutil); }
@media (min-width: 40em) {
  .abertura__vitrine { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espaco-4); }
  .vitrine-item--principal { grid-column: 1 / span 2; grid-row: 1 / span 2; aspect-ratio: auto; }
}
.vitrine-item__arte { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--espaco-10) var(--espaco-4) var(--espaco-16); }
.vitrine-item--principal .vitrine-item__arte { padding: var(--espaco-12) var(--espaco-5) calc(var(--espaco-24) + var(--espaco-4)); }
.vitrine-item__arte img { width: 100%; height: 100%; object-fit: contain; transition: transform var(--duracao-media) var(--curva-padrao); }
.vitrine-item__arte .passi-icone { width: var(--espaco-12); height: var(--espaco-12); color: var(--cor-texto-terciario); }
/* no claro, o fundo branco da foto some sobre a cor do mosaico */
@media (prefers-color-scheme: light) { .vitrine-item__arte img { mix-blend-mode: multiply; } }
@media (hover: hover) { .vitrine-item:hover .vitrine-item__arte img { transform: scale(1.06) rotate(-3deg); } }
.vitrine-item__selos { position: absolute; top: var(--espaco-3); left: var(--espaco-3); display: flex; flex-wrap: wrap; gap: var(--espaco-1); max-width: calc(100% - var(--espaco-6)); }

/* faixa branca dos destaques pequenos */
.vitrine-item__info {
  position: absolute;
  left: var(--espaco-2);
  right: var(--espaco-2);
  bottom: var(--espaco-2);
  display: grid;
  gap: var(--espaco-0-5);
  padding: var(--espaco-2) var(--espaco-3);
  border-radius: var(--raio-grande);
  background: var(--cor-fundo-superficie);
}
.vitrine-item__nome { overflow: hidden; color: var(--cor-texto-secundario); font: var(--texto-legenda); white-space: nowrap; text-overflow: ellipsis; }
.vitrine-item__preco { font: var(--texto-rotulo-grande); letter-spacing: var(--texto-rotulo-grande-espacamento-letras); font-variant-numeric: tabular-nums; }
.vitrine-item__preco small { color: var(--cor-texto-secundario); font: var(--texto-legenda); }

/* cartão branco do Achado do dia */
.vitrine-item__cartao {
  position: absolute;
  left: var(--espaco-2);
  right: var(--espaco-2);
  bottom: var(--espaco-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-3);
  padding: var(--espaco-3) var(--espaco-3) var(--espaco-3) var(--espaco-4);
  border-radius: var(--raio-grande);
  background: var(--cor-fundo-superficie);
}
.vitrine-item__texto { display: grid; gap: var(--espaco-0-5); min-width: 0; }
.vitrine-item__categoria { color: var(--cor-texto-secundario); font: var(--texto-legenda); }
.vitrine-item__titulo { overflow: hidden; font: var(--texto-rotulo-medio); letter-spacing: var(--texto-rotulo-medio-espacamento-letras); white-space: nowrap; text-overflow: ellipsis; }
.vitrine-item__valor { margin-top: var(--espaco-0-5); font: var(--texto-titulo-4); letter-spacing: var(--texto-titulo-4-espacamento-letras); font-variant-numeric: tabular-nums; }
.vitrine-item__valor small { margin-right: var(--espaco-1); color: var(--cor-texto-secundario); font: var(--texto-legenda); }
.vitrine-item__cta { flex: none; width: var(--espaco-10); padding: 0; pointer-events: none; }
.vitrine-item__cta-texto { display: none; }
.vitrine-item:hover .vitrine-item__cta { background: var(--cor-fundo-invertido-hover); }
@media (min-width: 30em) {
  .vitrine-item__cta { width: auto; padding: 0 var(--espaco-4); }
  .vitrine-item__cta-texto { display: inline; }
}
@media (min-width: 40em) {
  .vitrine-item__cartao { left: var(--espaco-3); right: var(--espaco-3); bottom: var(--espaco-3); padding: var(--espaco-4); }
  .vitrine-item__titulo { font: var(--texto-rotulo-grande); white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .vitrine-item__valor { font: var(--texto-titulo-3); letter-spacing: var(--texto-titulo-3-espacamento-letras); }
}
@media (min-width: 64em) {
  .abertura__vitrine { align-self: stretch; min-height: calc(var(--espaco-24) * 5); max-height: calc(var(--espaco-24) * 6 + var(--espaco-6)); grid-template-rows: 1fr 1fr; }
  .vitrine-item { aspect-ratio: auto; }
  .vitrine-item__cartao { flex-direction: column; align-items: stretch; }
  .vitrine-item__cta { width: 100%; }
  .vitrine-item--principal .vitrine-item__arte { padding-bottom: calc(var(--espaco-24) * 2); }
}
.abertura__vitrine .esqueleto { aspect-ratio: 1 / 1; border-radius: var(--raio-extra); }
.abertura__vitrine .esqueleto.vitrine-item--principal { aspect-ratio: 5 / 4; }
@media (min-width: 40em) { .abertura__vitrine .esqueleto.vitrine-item--principal { aspect-ratio: auto; } }

/* ───────── Trilhos (vitrines que rolam de lado) ───────── */
.trilho {
  --vitrinela-recuo: max(var(--vitrinela-margem), calc((100% - var(--conteudo-maximo)) / 2));
  display: flex;
  gap: var(--espaco-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: var(--espaco-1) var(--vitrinela-recuo) var(--espaco-3);
  scroll-padding-inline: var(--vitrinela-recuo);
  scrollbar-width: thin;
  scrollbar-color: var(--cor-borda-forte) transparent;
}
@media (min-width: 48em) { .trilho { gap: var(--espaco-4); } }
.trilho > * { flex: 0 0 min(72vw, var(--vitrinela-card-trilho)); scroll-snap-align: start; }
.trilho__vazio { padding-inline: var(--vitrinela-recuo); color: var(--cor-texto-secundario); }

/* ───────── Card de produto ───────── */
.produto {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
  min-width: 0;
  padding: var(--espaco-2);
  border: var(--borda-fina) solid var(--cor-borda-padrao);
  border-radius: var(--raio-grande);
  background: var(--cor-fundo-superficie);
}
@media (min-width: 48em) { .produto { gap: var(--espaco-3); padding: var(--espaco-3); } }
.produto__capa { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--raio-medio); background: var(--cor-fundo-sutil); }
.produto__capa img { width: 100%; height: 100%; object-fit: contain; background: var(--cor-fundo-superficie); }
.produto__sem-foto { display: grid; place-items: center; height: 100%; color: var(--cor-texto-terciario); }
.produto__sem-foto .passi-icone { width: var(--espaco-10); height: var(--espaco-10); }
.produto__selos { position: absolute; top: var(--espaco-2); left: var(--espaco-2); display: flex; flex-wrap: wrap; gap: var(--espaco-1); max-width: calc(100% - var(--espaco-12)); }
.produto__acoes { position: absolute; top: var(--espaco-2); right: var(--espaco-2); display: flex; flex-direction: column; gap: var(--espaco-1); }
.produto__acoes .dica { left: auto; right: calc(100% + var(--espaco-2)); top: 50%; bottom: auto; transform: translateY(-50%); }
.produto__corpo { display: flex; flex-direction: column; gap: var(--espaco-1); padding-inline: var(--espaco-0-5); }
.produto__categoria { color: var(--cor-texto-terciario); font: var(--texto-legenda); letter-spacing: var(--texto-legenda-espacamento-letras); }
.produto__titulo {
  min-height: calc(var(--entrelinha-20) * 2);
  font: var(--texto-rotulo-medio);
  letter-spacing: var(--texto-rotulo-medio-espacamento-letras);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 48em) { .produto__titulo { min-height: calc(var(--entrelinha-24) * 2); font: var(--texto-rotulo-grande); letter-spacing: var(--texto-rotulo-grande-espacamento-letras); } }
.produto__avaliacao { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espaco-1); color: var(--cor-texto-secundario); font: var(--texto-legenda); font-variant-numeric: tabular-nums; }
.produto__avaliacao b { color: var(--cor-texto-padrao); font-weight: var(--peso-seminegrito); }
.produto__estrela { color: var(--cor-fundo-alerta); }
.produto__estrela .passi-icone { width: var(--espaco-4); height: var(--espaco-4); }
.produto__preco { margin-top: var(--espaco-1); font: var(--texto-titulo-4); letter-spacing: var(--texto-titulo-4-espacamento-letras); font-variant-numeric: tabular-nums; }
@media (min-width: 48em) { .produto__preco { font: var(--texto-titulo-3); letter-spacing: var(--texto-titulo-3-espacamento-letras); } }
.produto__preco small { display: block; color: var(--cor-texto-secundario); font: var(--texto-legenda); letter-spacing: var(--texto-legenda-espacamento-letras); }
.produto__preco--sem { color: var(--cor-texto-secundario); font: var(--texto-rotulo-medio); }
.produto__nota { color: var(--cor-texto-terciario); font: var(--texto-legenda); }
.produto .botao { margin-top: auto; }

/* Esqueleto (Carregando) */
.esqueleto {
  border-radius: var(--raio-medio);
  background: linear-gradient(90deg, var(--cor-fundo-sutil-hover) 0%, var(--cor-fundo-sutil) 50%, var(--cor-fundo-sutil-hover) 100%);
  background-size: 200% 100%;
  animation: vitrinela-brilho calc(var(--duracao-expressiva) * 2) linear infinite;
}
@keyframes vitrinela-brilho { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .esqueleto { animation: none; } }
.produto--esqueleto .produto__capa { background: none; }
.esqueleto--linha { height: var(--espaco-3); border-radius: var(--raio-pilula); }
.esqueleto--curta { width: 60%; }
.esqueleto--botao { height: var(--espaco-10); border-radius: var(--raio-pilula); margin-top: auto; }

/* ───────── Categorias (cards clicáveis: só o título recebe Tab) ───────── */
.grade-categorias { display: grid; gap: var(--espaco-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 40em) { .grade-categorias { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espaco-4); } }
@media (min-width: 64em) { .grade-categorias { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.categoria {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
  min-height: calc(var(--espaco-24) + var(--espaco-20));
  padding: var(--espaco-4);
  border: var(--borda-fina) solid var(--cor-borda-padrao);
  border-radius: var(--raio-grande);
  background: var(--cor-fundo-superficie);
  transition: background-color var(--duracao-rapida) var(--curva-padrao), border-color var(--duracao-rapida) var(--curva-padrao);
}
.categoria:hover { background: var(--cor-fundo-sutil); border-color: var(--cor-borda-forte); }
.categoria:active { background: var(--cor-fundo-sutil-hover); border-color: var(--cor-borda-controle); }
.categoria:has(.categoria__botao:focus-visible) { outline: var(--borda-grossa) solid var(--cor-borda-foco); outline-offset: var(--borda-grossa); }
.categoria__icone { display: grid; place-items: center; width: var(--espaco-12); height: var(--espaco-12); margin-bottom: var(--espaco-2); border-radius: var(--raio-medio); background: var(--cor-fundo-marca-sutil); color: var(--cor-texto-marca); }
.categoria__icone .passi-icone { width: var(--espaco-6); height: var(--espaco-6); }
.categoria__botao {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cor-texto-padrao);
  font: var(--texto-rotulo-grande);
  letter-spacing: var(--texto-rotulo-grande-espacamento-letras);
  text-align: left;
  cursor: pointer;
}
.categoria__botao::after { content: ""; position: absolute; inset: 0; border-radius: var(--raio-grande); }
.categoria__botao:focus-visible { outline: none; } /* passi-ignorar: o anel de foco vai em volta do card inteiro (Card · Acessibilidade), na regra .categoria:has(...) */
.categoria__descricao { color: var(--cor-texto-secundario); font: var(--texto-corpo-pequeno); }
.categoria__quantidade { margin-top: auto; color: var(--cor-texto-terciario); font: var(--texto-legenda); }

/* ───────── Catálogo ───────── */
.filtros {
  position: sticky;
  top: calc(var(--vitrinela-cabecalho) + var(--espaco-2));
  z-index: 20;
  display: grid;
  gap: var(--espaco-2);
  margin-bottom: var(--espaco-4);
  padding-block: var(--espaco-3);
  background: var(--cor-fundo-pagina);
  border-bottom: var(--borda-fina) solid var(--cor-borda-padrao);
}
.filtros__grupo { display: flex; gap: var(--espaco-2); overflow-x: auto; margin-inline: calc(var(--vitrinela-margem) * -1); padding: var(--espaco-1) var(--vitrinela-margem); scrollbar-width: none; }
.filtros__grupo::-webkit-scrollbar { display: none; }
.filtros > * { min-width: 0; }
/* a ordenação divide a linha com os filtros, para a barra presa no topo ocupar só 2 linhas no celular */
.filtros__linha { display: flex; align-items: center; gap: var(--espaco-2); }
.filtros__linha .filtros__grupo { flex: 1 1 auto; min-width: 0; margin-right: 0; padding-right: var(--espaco-1); }
@media (min-width: 48em) {
  .filtros__linha { justify-content: space-between; gap: var(--espaco-4); }
}
/* no celular o rótulo "Ordenar por" fica só para leitor de tela; a opção escolhida já diz o que é */
@media (max-width: 47.99em) {
  .selecao { position: relative; }
  .selecao__rotulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* Seleção (select nativo do navegador, com a aparência do Campo de texto) */
.selecao { display: flex; flex: none; align-items: center; gap: var(--espaco-2); }
.selecao__rotulo { color: var(--cor-texto-padrao); font: var(--texto-rotulo-medio); white-space: nowrap; }
.selecao__caixa { position: relative; display: inline-flex; }
.selecao__campo {
  appearance: none;
  -webkit-appearance: none;
  min-height: var(--espaco-10);
  margin: 0;
  padding: 0 var(--espaco-10) 0 var(--espaco-3);
  border: var(--borda-fina) solid var(--cor-borda-controle);
  border-radius: var(--raio-medio);
  background: var(--cor-fundo-superficie);
  color: var(--cor-texto-padrao);
  font: var(--texto-corpo-medio);
  cursor: pointer;
  transition: border-color var(--duracao-rapida) var(--curva-padrao);
}
.selecao__campo:hover { border-color: var(--cor-texto-terciario); }
.selecao__campo:focus-visible { border-color: var(--cor-borda-marca); outline: var(--borda-fina) solid var(--cor-borda-marca); outline-offset: 0; }
.selecao__seta { position: absolute; top: 50%; right: var(--espaco-3); transform: translateY(-50%); color: var(--cor-texto-secundario); pointer-events: none; }

.catalogo__aviso { margin-bottom: var(--espaco-4); }
.resultados { display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-3); min-height: var(--espaco-10); margin-bottom: var(--espaco-3); }
.resultados__contagem { color: var(--cor-texto-secundario); font: var(--texto-corpo-pequeno); }
.resultados__contagem b { color: var(--cor-texto-padrao); font-weight: var(--peso-seminegrito); }
.grade-produtos { display: grid; gap: var(--espaco-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 40em) { .grade-produtos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espaco-4); } }
@media (min-width: 64em) { .grade-produtos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mais { display: flex; justify-content: center; margin-top: var(--espaco-6); }

/* Tela vazia e vitrine em atualização */
.vazio {
  grid-column: 1 / -1;
  display: grid;
  justify-items: center;
  gap: var(--espaco-3);
  padding: var(--espaco-12) var(--espaco-6);
  border: var(--borda-fina) solid var(--cor-borda-padrao);
  border-radius: var(--raio-grande);
  background: var(--cor-fundo-superficie);
  text-align: center;
}
.vazio__icone { display: grid; place-items: center; width: var(--espaco-12); height: var(--espaco-12); border-radius: var(--raio-pilula); background: var(--cor-fundo-sutil); color: var(--cor-texto-secundario); }
.vazio__titulo { font: var(--texto-titulo-4); letter-spacing: var(--texto-titulo-4-espacamento-letras); }
.vazio__texto { max-width: 32em; color: var(--cor-texto-secundario); }
.abertura__vitrine passi-alerta { grid-column: 1 / -1; }

/* ───────── Como funciona (Acordeão sobre uma superfície) ───────── */
.sobre { display: grid; gap: var(--espaco-2); }
.acordeao { max-width: 48em; overflow: hidden; border: var(--borda-fina) solid var(--cor-borda-padrao); border-radius: var(--raio-grande); background: var(--cor-fundo-superficie); }
.acordeao__item + .acordeao__item { border-top: var(--borda-fina) solid var(--cor-borda-padrao); }
.acordeao__botao {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-4);
  margin: 0;
  padding: var(--espaco-5) var(--espaco-4);
  border: 0;
  background: transparent;
  color: var(--cor-texto-padrao);
  font: var(--texto-rotulo-grande);
  letter-spacing: var(--texto-rotulo-grande-espacamento-letras);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--duracao-rapida) var(--curva-padrao);
}
.acordeao__botao:hover { background: var(--cor-fundo-sutil); }
.acordeao__botao:active { background: var(--cor-fundo-sutil-hover); }
.acordeao__botao:focus-visible { outline: var(--borda-grossa) solid var(--cor-borda-foco); outline-offset: calc(var(--borda-grossa) * -1); }
.acordeao__icone { color: var(--cor-texto-secundario); transition: transform var(--duracao-media) var(--curva-padrao); }
.acordeao__botao[aria-expanded="true"] .acordeao__icone { transform: rotate(180deg); }
.acordeao__resposta { padding: 0 var(--espaco-4) var(--espaco-5); color: var(--cor-texto-secundario); }
.acordeao__resposta p { max-width: 65ch; }

/* ───────── Rodapé do site (Completo, modo escuro) ───────── */
.rodape { padding-block: var(--espaco-16) var(--espaco-8); background: var(--cor-fundo-pagina); color: var(--cor-texto-padrao); }
.rodape__marca { display: grid; gap: var(--espaco-3); }
.rodape__logo { height: var(--espaco-12); width: auto; }
@media (min-width: 48em) { .rodape__logo { height: var(--espaco-20); } }
.rodape__frase { color: var(--cor-texto-secundario); font: var(--texto-corpo-grande); }
.rodape__colunas { display: grid; gap: var(--espaco-8); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--espaco-12); }
@media (min-width: 48em) { .rodape__colunas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rodape__titulo { margin-bottom: var(--espaco-3); color: var(--cor-texto-terciario); font: var(--texto-sobretitulo); letter-spacing: var(--texto-sobretitulo-espacamento-letras); text-transform: uppercase; }
.rodape__links { display: grid; gap: var(--espaco-2); }
.rodape__links a { display: inline-flex; min-height: var(--espaco-6); align-items: center; color: var(--cor-texto-secundario); font: var(--texto-corpo-pequeno); text-decoration: none; }
.rodape__links a:hover { color: var(--cor-texto-padrao); text-decoration: underline; }
/* Grupo de ofertas no WhatsApp: ocupa o lugar da newsletter do padrão Rodapé do site (à esquerda, antes dos links) */
.rodape__whatsapp { display: grid; grid-column: 1 / -1; align-content: start; justify-items: start; gap: var(--espaco-4); padding: var(--espaco-6); border-radius: var(--raio-grande); background: var(--cor-fundo-sutil); }
@media (min-width: 48em) { .rodape__whatsapp { grid-column: span 2; } }
.rodape__whatsapp-icone { display: grid; place-items: center; width: var(--espaco-12); height: var(--espaco-12); border-radius: var(--raio-medio); background: var(--cor-fundo-marca-sutil); color: var(--cor-texto-marca); }
.rodape__whatsapp-icone .passi-icone { width: var(--espaco-6); height: var(--espaco-6); }
.rodape__whatsapp-texto .rodape__titulo { margin-bottom: var(--espaco-1); }
.rodape__whatsapp-titulo { color: var(--cor-texto-padrao); font: var(--texto-titulo-4); letter-spacing: var(--texto-titulo-4-espacamento-letras); }
.rodape__whatsapp-descricao { max-width: 42ch; margin-top: var(--espaco-2); color: var(--cor-texto-secundario); font: var(--texto-corpo-medio); }
.rodape__legal { display: grid; gap: var(--espaco-2); max-width: 48em; margin-top: var(--espaco-12); padding-top: var(--espaco-6); border-top: var(--borda-fina) solid var(--cor-borda-padrao); color: var(--cor-texto-terciario); font: var(--texto-legenda); letter-spacing: var(--texto-legenda-espacamento-letras); }
.rodape__legal b { color: var(--cor-texto-padrao); font-weight: var(--peso-seminegrito); }

/* ───────── Voltar ao topo e Aviso rápido ───────── */
.voltar-ao-topo { position: fixed; right: var(--espaco-4); bottom: var(--espaco-4); z-index: 45; }
.aviso-rapido {
  position: fixed;
  left: 50%;
  bottom: var(--espaco-4);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  max-width: calc(100vw - var(--espaco-8));
  padding: var(--espaco-3) var(--espaco-4);
  transform: translateX(-50%);
  border-radius: var(--raio-grande);
  background: var(--cor-fundo-invertido);
  color: var(--cor-texto-invertido);
  box-shadow: var(--sombra-grande);
  font: var(--texto-rotulo-medio);
}
.aviso-rapido .passi-icone { color: var(--cor-fundo-sucesso); }