/* pa: vitrines da home (03/10/2026, régua §3.22 v1.21) — só tokens da régua, nenhum hex solto.
   Carrega só na home, depois de pa-vitrine.css. Cards e esqueleto montados por pa-home-vitrines.js.
   Card único: foto (marfim, multiply, contain, como a categoria) · marca · nome curto · ★ nota · preço · parcela · Comprar. */

/* ---------- seção e trilho ---------- */
.pa-vit { position: relative; }
.pa-vit[hidden] { display: none; }
.pa-vit .pa-sub { margin-bottom: var(--pa-e-16); }
/* celular: o trilho sangra até a borda e o 1º card começa no gutter (16px) */
.pa-vit .pa-vit__trilho { position: relative; max-width: none; margin-left: calc(-1 * var(--pa-gutter)); margin-right: calc(-1 * var(--pa-gutter)); }
.pa-vit .pa-vit__pista { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; gap: var(--pa-e-12); padding: 0 var(--pa-gutter); scroll-padding-left: var(--pa-gutter); scroll-snap-type: x proximity; }
.pa-vit .pa-vit__pista[hidden] { display: none; }
.pa-vit .pa-vit__pista > * { flex: 0 0 156px; min-width: 0; }
.pa-vit .pa-abas { max-width: none; margin-left: calc(-1 * var(--pa-gutter)); margin-right: calc(-1 * var(--pa-gutter)); padding: 0 var(--pa-gutter); }
.pa-vit .pa-abas[hidden] { display: none; }
.pa-vit .pa-vertodos-linha { margin-top: 0; }
.pa-vit__setas { display: none; }

/* ---------- card único ---------- */
/* foto contrasta com a seção (§3.22): branca em seção marfim; os kits ficam em marfim (decisão do Bruno) */
.pa-vit.pa-claro .pa-vc__foto { background: var(--pa-branco); }
.pa-vit.pa-vit--kits .pa-vc__foto { background: var(--pa-marfim); }
.pa-vit.pa-claro .pa-vc--esq .pa-vc__foto { background: var(--pa-branco); }
.pa-vit.pa-vit--kits .pa-vc--esq .pa-vc__foto { background: var(--pa-marfim); }
.pa-vc { position: relative; display: flex; flex-direction: column; background: transparent; color: var(--pa-tinta); text-decoration: none; }
.pa-vc__foto { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: var(--pa-r-4); background: var(--pa-marfim); overflow: hidden; transition: transform var(--pa-t), box-shadow var(--pa-t); }
.pa-vc__foto img { display: block; width: 100%; height: 100%; max-width: none; padding: 9%; box-sizing: border-box; object-fit: contain; mix-blend-mode: multiply; }
.pa-vc .pa-selo { position: absolute; top: var(--pa-e-8); left: var(--pa-e-8); z-index: 1; background: var(--pa-noite); color: var(--pa-marfim); padding: var(--pa-e-4) var(--pa-e-8); border-radius: var(--pa-r-4); font-size: var(--pa-fs-12); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.pa-vc__texto { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; padding-top: var(--pa-e-8); }
.pa-vc__marca { display: block; min-height: 16px; font: 600 var(--pa-fs-12)/1.4 var(--pa-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--pa-tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-vc__nome { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: var(--pa-e-4); min-height: 2.7em; font: 400 var(--pa-fs-14)/1.35 var(--pa-sans); color: var(--pa-tinta); text-decoration: none; }
.pa-vc__nome::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* o card inteiro é o link */
.pa-vc__nota { display: flex; align-items: center; gap: var(--pa-e-4); min-height: 18px; margin-top: var(--pa-e-4); font: 500 var(--pa-fs-12)/1.4 var(--pa-sans); color: var(--pa-tinta-2); white-space: nowrap; overflow: hidden; }
.pa-vc__nota b { font-weight: 600; color: var(--pa-tinta); }
.pa-vc__estrela { width: 14px; height: 14px; flex: 0 0 14px; fill: var(--pa-ambar-contorno); }
.pa-vc__votos { overflow: hidden; text-overflow: ellipsis; }
.pa-vc__nota:not(.pa-vc__nota--grande) .pa-vc__votos { margin-left: var(--pa-e-4); }
.pa-vc__precos { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--pa-e-8); margin-top: var(--pa-e-8); }
.pa-vc__preco { font: 600 var(--pa-fs-18)/1.2 var(--pa-sans); letter-spacing: -.01em; color: var(--pa-tinta); }
.pa-top5 .pa-card--top5 .pa-card__preco { font: 600 var(--pa-fs-18)/1.2 var(--pa-sans); letter-spacing: -.01em; }
.pa-vc__antes { font: 400 var(--pa-fs-12)/1.2 var(--pa-sans); color: var(--pa-tinta-2); text-decoration: line-through; }
.pa-vc__parcela { display: block; min-height: 17px; margin-top: var(--pa-e-4); font: 400 var(--pa-fs-12)/1.4 var(--pa-sans); color: var(--pa-tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-vc__form { position: relative; z-index: 2; margin: auto 0 0; padding-top: var(--pa-e-12); }
/* "Comprar" = o botão compacto da categoria (§3.3/§3.20): 44px, largura total, noite-2, 12/600, caixa normal, raio 4 */
.pa-vc__btn { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; margin: 0; padding: var(--pa-e-8) var(--pa-e-12); box-sizing: border-box; border: 0; border-radius: var(--pa-r-4); background: var(--pa-noite-2); color: var(--pa-marfim); font: 600 var(--pa-fs-12)/1.2 var(--pa-sans); letter-spacing: 0; text-transform: none; text-decoration: none; cursor: pointer; -webkit-appearance: none; appearance: none; transition: background var(--pa-t); }
.pa-vc__btn:hover { background: var(--pa-tinta); }
.pa-vc__btn:focus-visible { outline: 2px solid var(--pa-ambar); outline-offset: 2px; }
.pa-vc__btn--ver { margin-top: auto; }
.pa-vc__texto > .pa-vc__btn--ver { margin-top: auto; }
.pa-vc__btn--espera { cursor: default; }
@media (hover: hover) { .pa-vc:hover .pa-vc__foto { transform: translateY(-3px); box-shadow: var(--pa-sombra-1); } }
.pa-vc:focus-within .pa-vc__foto { transform: translateY(-3px); box-shadow: var(--pa-sombra-1); }
@media (prefers-reduced-motion: reduce) { .pa-vc__foto { transition: none; transform: none !important; } .pa-vc__btn { transition-duration: .01ms; } }

/* ---------- esqueleto (parecer 03/10): 5 cards no próprio .tpl, na MESMA caixa do card real; o JS os troca sem pulo ---------- */
.pa-vc--esq .pa-vc__nome::after { display: none; }
.pa-vc--esq .pa-vc__btn { background: var(--pa-linha); }
.pa-vc--esq .pa-vc__foto, .pa-vl--esq .pa-vl__foto { background: var(--pa-marfim); }
.pa-vl--esq .pa-vl__foto { background: transparent; }

/* ---------- TOP 5 (03/10, opção C): card branco, borda âmbar, ★ e "Comprar" noite-2 como nas outras vitrines ---------- */
.pa-top5 .pa-titulo { color: var(--pa-tinta); }
.pa-top5 .pa-sub { color: var(--pa-tinta-2); }
.pa-top5 .pa-vc__nota { color: var(--pa-tinta-2); }
.pa-top5 .pa-vc__nota b { color: var(--pa-tinta); }
.pa-top5 .pa-vc__estrela { fill: var(--pa-ambar-contorno); }
.pa-top5 .pa-card--top5 .pa-card__familia { color: var(--pa-tinta-2); }
.pa-top5 .pa-card--top5 .pa-card__texto { display: flex; flex-direction: column; flex: 1 1 auto; }
.pa-top5 .pa-card--top5 .pa-card__nome { margin-top: var(--pa-e-4); }
.pa-top5 .pa-card--top5 .pa-card__form { display: block; position: relative; z-index: 2; margin-top: auto; padding-top: var(--pa-e-12); }
.pa-top5 .pa-card--top5 .pa-btn-add { display: flex; min-height: 44px; margin-top: 0; border-radius: var(--pa-r-4); background: var(--pa-noite-2); color: var(--pa-marfim); font-size: var(--pa-fs-12); letter-spacing: 0; text-transform: none; padding-left: var(--pa-e-12); padding-right: var(--pa-e-12); }
.pa-top5 .pa-card--top5 .pa-btn-add:hover { background: var(--pa-tinta); }
.pa-top5 .pa-card--top5 .pa-btn-add__longo { display: none; }
.pa-top5 .pa-card--top5 .pa-btn-add__curto { display: inline; }
.pa-top5 .pa-card--top5 .pa-card__texto > .pa-btn-add { margin-top: auto; }

/* ---------- Kits: bloco dividido (única exceção ao título centrado, §3.22) ---------- */
.pa-vit--kits .pa-vit__kits-chamada { padding: 0; }
.pa-vit__btn-kits { display: none; }
.pa-vit--kits .pa-vit__pista > * { flex-basis: 156px; }
.pa-vit--kits .pa-vc__nome { min-height: 4.05em; -webkit-line-clamp: 3; } /* nome de kit inteiro: 3 linhas */
.pa-vit--kits .pa-vit__kits-cel { margin-top: var(--pa-e-8); }

/* ---------- Os mais bem avaliados: LÍDER (nº 1, horizontal em marfim) + carrossel dos nºs 2–8 com pontos (mix C+D, Bruno 03/10) ---------- */
.pa-vit--avaliados .pa-vit__aval { display: block; }
.pa-vit__lider { margin-bottom: var(--pa-e-8); }
.pa-vl { position: relative; display: grid; grid-template-columns: 44% minmax(0, 1fr); gap: var(--pa-e-12); padding: var(--pa-e-12); box-sizing: border-box; background: var(--pa-marfim); border-radius: var(--pa-r-8); color: var(--pa-tinta); }
.pa-vl__foto { display: block; align-self: center; aspect-ratio: 3 / 4; }
.pa-vl__foto img { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; mix-blend-mode: multiply; }
.pa-vl__texto { display: flex; flex-direction: column; min-width: 0; justify-content: center; }
.pa-vl__rotulo { font: 600 var(--pa-fs-12)/1.2 var(--pa-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--pa-tinta); margin-bottom: var(--pa-e-8); }
.pa-vl__nota { display: flex; align-items: center; gap: var(--pa-e-8); }
.pa-vl__nota b { font: 600 var(--pa-fs-32)/1 var(--pa-serif); color: var(--pa-tinta); }
.pa-vl__nota .pa-vc__estrela { width: 26px; height: 26px; flex-basis: 26px; }
.pa-vl__votos { font: 400 var(--pa-fs-12)/1.3 var(--pa-sans); color: var(--pa-tinta-2); margin-top: var(--pa-e-4); }
.pa-vl .pa-vc__marca { margin-top: var(--pa-e-12); }
.pa-vl__nome { min-height: 2.6em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: var(--pa-e-4); font: 500 var(--pa-fs-14)/1.3 var(--pa-sans); color: var(--pa-tinta); text-decoration: none; }
.pa-vl__nome::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pa-vl .pa-vc__precos { margin-top: var(--pa-e-8); }
.pa-vl .pa-vc__preco { font-size: var(--pa-fs-22); }
.pa-vl .pa-vc__form { margin: 0; padding-top: var(--pa-e-12); }
/* carrossel: nota grande no estilo do D (número em serifa) + ★ + votos ao lado; 2 cards por tela no celular */
.pa-vit--avaliados .pa-vit__pista { gap: var(--pa-e-16); }
.pa-vit--avaliados .pa-vit__pista > * { flex: 0 0 calc((100% - var(--pa-e-16)) / 2); }
.pa-vit--avaliados .pa-vit__pista { padding-bottom: var(--pa-e-4); }
.pa-vc__nota--grande { min-height: 36px; margin-top: var(--pa-e-4); gap: var(--pa-e-4); }
.pa-vc__nota--grande b { font: 600 var(--pa-fs-32)/1 var(--pa-serif); letter-spacing: 0; margin-right: var(--pa-e-4); }
.pa-vc__nota--grande .pa-vc__estrela { margin-top: 2px; }
.pa-vit--avaliados .pa-vc__marca { margin-top: var(--pa-e-8); }
.pa-vit--avaliados .pa-vc__nome { min-height: 2.7em; }
.pa-vit__pontos { display: flex; justify-content: center; gap: var(--pa-e-8); margin-top: var(--pa-e-8); min-height: 6px; }
.pa-vit__pontos i { width: 6px; height: 6px; border-radius: 3px; background: var(--pa-linha); transition: width var(--pa-t), background var(--pa-t); }
.pa-vit__pontos i.on { width: 18px; background: var(--pa-ambar-contorno); }

/* ---------- Compre por casa: o nome da casa em serifa, como wordmark (§3.9, sem logo de terceiro) ---------- */
.pa-vit__abas-casa button { font-family: var(--pa-serif); font-size: var(--pa-fs-18); font-weight: 600; text-transform: none; letter-spacing: .02em; }
.pa-vit--casas .pa-vc__marca { display: none; } /* a aba já diz a casa */

/* ---------- desktop ---------- */
@media (min-width: 900px) {
  .pa-vit .pa-vit__trilho { margin-left: auto; margin-right: auto; max-width: var(--pa-max); }
  .pa-vit .pa-vit__pista { gap: var(--pa-e-24); padding: 0; scroll-padding-left: 0; }
  .pa-vit .pa-vit__pista > * { flex: 0 0 220px; }
  .pa-vit .pa-abas { max-width: var(--pa-max); margin-left: auto; margin-right: auto; padding: 0; justify-content: center; }
  .pa-vc__texto { padding-top: var(--pa-e-12); }
  .pa-vit__setas { display: block; }
  .pa-vit__seta { position: absolute; top: 88px; z-index: 3; width: 44px; height: 44px; padding: 0; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--pa-tinta); font: 400 var(--pa-fs-32)/1 var(--pa-serif); cursor: pointer; }
  .pa-vit__seta[hidden] { display: none; }
  .pa-vit__seta:hover { background: transparent; color: var(--pa-ambar-contorno); }
  .pa-vit__seta:focus-visible { outline: 2px solid var(--pa-ambar); outline-offset: 2px; }
  .pa-vit__seta[data-dir="-1"] { left: var(--pa-e-8); }
  .pa-vit__seta[data-dir="1"] { right: var(--pa-e-8); }
  .pa-vit__abas-casa button { font-size: var(--pa-fs-22); padding: 0 var(--pa-e-24); }
  /* Kits: coluna de texto 300px + gap 40 + trilho; título, sub e botão à esquerda */
  .pa-vit__kits-grade { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--pa-e-40); align-items: center; max-width: var(--pa-max); margin: 0 auto; }
  .pa-vit__kits-grade > * { min-width: 0; }
  .pa-vit--kits .pa-vit__trilho { margin: 0; max-width: none; width: 100%; }
  .pa-vit--kits .pa-vit__kits-chamada .pa-titulo, .pa-vit--kits .pa-vit__kits-chamada .pa-sub { text-align: left !important; margin-left: 0 !important; margin-right: 0 !important; }
  .pa-vit--kits .pa-vit__kits-chamada .pa-titulo::before { margin-left: 0; }
  .pa-vit__btn-kits { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 28px; border-radius: var(--pa-r-pill); background: var(--pa-noite); color: var(--pa-marfim); font: 600 var(--pa-fs-12)/1 var(--pa-sans); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; margin-top: var(--pa-e-16); }
  .pa-vit__btn-kits:hover { background: var(--pa-tinta); }
  .pa-vit__kits-cel { display: none; }
  /* Avaliados: líder à esquerda (40%) e carrossel de 3 cards à direita */
  .pa-vit--avaliados .pa-vit__aval { display: grid; grid-template-columns: 40% minmax(0, 1fr); gap: var(--pa-e-24); align-items: stretch; max-width: var(--pa-max); margin: 0 auto; }
  .pa-vit--avaliados .pa-sub { max-width: 760px; }
  .pa-vit__lider { display: flex; }
  .pa-vl { flex: 1; align-items: center; }
  .pa-vit--avaliados .pa-vit__aval > * { min-width: 0; }
  .pa-vit__lider { margin: 0; }
  .pa-vl { grid-template-columns: 46% minmax(0, 1fr); gap: var(--pa-e-16); padding: var(--pa-e-24); }
  .pa-vl__nota b { font-size: var(--pa-fs-48); }
  .pa-vl__nome { font-size: var(--pa-fs-16); }
  .pa-vit--avaliados .pa-vit__trilho { margin: 0; max-width: none; }
  .pa-vit--avaliados .pa-vit__pista { gap: var(--pa-e-24); }
  .pa-vit--avaliados .pa-vit__pista > * { flex: 0 0 calc((100% - 2 * var(--pa-e-24)) / 3); }
  .pa-vit--avaliados .pa-vit__seta { top: 80px; }
  .pa-vit--avaliados .pa-vit__seta[data-dir="-1"] { left: var(--pa-e-8); }
  .pa-vit--avaliados .pa-vit__seta[data-dir="1"] { right: var(--pa-e-8); }
}
/* setas fora do trilho (64px) só onde cabem; abaixo disso ficam sobre a borda da foto */
@media (min-width: 1360px) {
  .pa-vit__seta[data-dir="-1"] { left: -64px; }
  .pa-vit__seta[data-dir="1"] { right: -64px; }
  .pa-vit--kits .pa-vit__seta[data-dir="1"], .pa-vit--avaliados .pa-vit__seta[data-dir="1"] { right: -64px; }
  .pa-vit--avaliados .pa-vit__seta[data-dir="-1"] { left: var(--pa-e-8); }
}

/* ---------- Novidades | Mais vendidos (04/10, pedido do Bruno, modelo goldglow): abas no estilo das abas de categoria (pa-categoria.css) ---------- */
.pa-vit .pa-abas--vitrine { justify-content: center; gap: var(--pa-e-8); margin-bottom: var(--pa-e-16); }
.pa-abas--vitrine button { padding: 0 var(--pa-e-12); font: 500 var(--pa-fs-14)/1.35 var(--pa-sans); letter-spacing: 0; text-transform: none; color: var(--pa-tinta-2); border-bottom: 2px solid transparent; }
.pa-abas--vitrine button[aria-selected="true"] { font-weight: 600; color: var(--pa-tinta); border-bottom-color: var(--pa-ambar-contorno); }
.pa-abas--vitrine button:focus-visible { outline: 2px solid var(--pa-ambar-contorno); outline-offset: 2px; }
@media (min-width: 900px) { .pa-abas--vitrine button { font-size: var(--pa-fs-16); padding: 0 var(--pa-e-16); } }

/* "Chega em breve" (05/10): selo no card da home; o botão Avise-me herda .pa-vc__btn--ver / .pa-btn-add */
.pa-embreve-selo { display: block; width: fit-content; margin: 4px 0; padding: 2px 8px; border: 1px solid var(--pa-ambar-contorno, #B08A4A); border-radius: 4px; color: var(--pa-ambar-texto, #3B1E0F); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
/* Espaço 12/10 (B2): abas coladas no título; celular mantém 44px de toque, computador 36px. */
body.template-home .pa-vit .pa-abas--vitrine{margin-bottom:8px}
@media (min-width:900px){ body.template-home .pa-vit .pa-abas--vitrine button{min-height:36px} }