/* Selo — loja.hubcatolico.com — sistema visual
   Direção primária: aesop.com (e-commerce/retail editorial premium —
   sistema monocromático com um único acento, serif editorial sóbria, hero
   text-forward, loja única sem bifurcação de navegação por método de
   fabricação — ver site-corporate-refs.md §9, atualizado 25/09/2026 após
   reprovação do Thiago da 1ª versão, que tinha cara de SaaS/tech-corp).
   ramp.com segue como referência secundária só pro peso tipográfico
   (serif heroica, cor única dominante). oryzo.ai inspirou o tom narrativo
   do /sobre/. Tudo aplicado com Design Taste Stack (emil-design-eng /
   impeccable / taste-skill). Brand própria da Selo — sem diálogo com
   LA CERDA. Ver tokens.css para a origem de cada cor.
   tokens.css é carregado via <link> separado no <head> de cada página
   (antes deste arquivo) — NÃO via @import, que serializa a busca de
   tokens.css depois de baixar e parsear este arquivo inteiro (perf QA
   25/09/2026: ~150-300ms de LCP/FCP perdidos por página). */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--selo-cream);
  color: var(--selo-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; margin: 0 0 var(--space-4); line-height: 1.12; letter-spacing: -0.01em; }
p { margin: 0 0 var(--space-4); }

.container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-6); }
@media (max-width: 640px) { .container { padding: 0 var(--space-4); } }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; background: var(--selo-ink);
  color: var(--selo-text-on-dark); padding: var(--space-3) var(--space-4);
  z-index: 1000; border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--selo-gold); outline-offset: 2px; }

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 0.85rem 1.6rem; border-radius: var(--radius-sm); border: 1px solid transparent;
  font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--selo-ink); color: var(--selo-text-on-dark); }
.btn-primary:hover { background: var(--selo-ink-soft); }
.btn-gold { background: var(--selo-gold); color: var(--selo-ink); }
.btn-gold:hover { background: var(--selo-gold-dim); }
.btn-outline { background: transparent; border-color: currentColor; color: var(--selo-ink); }
.btn-outline:hover { background: var(--selo-ink); color: var(--selo-text-on-dark); }
.btn-ghost { background: transparent; color: var(--selo-ink); text-transform: none; font-weight: 500; }
.btn-ghost:hover { color: var(--selo-gold-dim); }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.45; pointer-events: none; }
.btn-sm { min-height: 44px; padding: 0.55rem 1rem; font-size: var(--fs-micro); } /* touch target — vv-design 26/09 mediu 38px */

/* ---------- header em 2 camadas (amazon.com.br — site-corporate-refs.md
   §9c): barra 1 = logo + busca dominante + carrinho; barra 2 (fundo escuro)
   = as 5 categorias reais como link direto + institucional (Sobre/Contato).
   Substitui o antigo menu hambúrguer/drawer mobile (só sobrava pra 2 links
   institucionais, que agora moram na barra 2, sempre visível). */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--selo-cream); border-bottom: 1px solid var(--selo-line-on-cream);
}
.site-header__bar { display: flex; align-items: center; gap: var(--space-6); padding-top: var(--space-3); padding-bottom: var(--space-3); }
.site-header__logo { flex: 0 0 auto; }
.site-header__logo img { height: 26px; width: auto; }

.site-search { flex: 1 1 auto; max-width: 640px; display: flex; align-items: center; border: 1.5px solid var(--selo-ink); border-radius: 999px; background: #fff; overflow: hidden; }
.site-search input { flex: 1 1 auto; border: 0; background: none; font: inherit; padding: 0.75rem 0 0.75rem 1.1rem; color: var(--selo-ink); min-width: 0; }
.site-search input:focus { outline: none; }
.site-search input::placeholder { color: var(--selo-text-muted); }
/* botão 44×44 (touch target mínimo AA/HIG — vv-design 26/09 mediu 44×38,
   abaixo do mínimo) — margin reduzida pra caber sem estourar a pill. */
.site-search button { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 46px; height: 44px; margin: 2px; border: 0; border-radius: 999px; background: var(--selo-ink); color: var(--selo-text-on-dark); transition: background-color var(--dur-fast) var(--ease-out); }
.site-search button:hover { background: var(--selo-ink-soft); }

.site-header__actions { flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-4); }
.account-link { font-size: var(--fs-small); font-weight: 600; white-space: nowrap; }
.account-link:hover { color: var(--selo-gold-dim-text); }
.cart-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); border: 1px solid var(--selo-ink);
  min-height: 44px; border-radius: 999px; padding: 0.4rem 0.9rem; font-size: var(--fs-small); font-weight: 600; white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.cart-pill:hover { background: var(--selo-ink); color: var(--selo-text-on-dark); }

.site-header__bar2 { background: var(--selo-ink); position: relative; }
/* padding-top/bottom só (nunca "padding: X 0", que zera left/right e
   vence a cascata sobre o gutter de .container — achado vv-design
   28/09/2026: barra de categorias colava na borda física da tela em
   qualquer viewport ≤1240px, link "Contato" sem margem de segurança). */
.site-header__bar2-inner { display: flex; align-items: center; gap: var(--space-6); padding-top: var(--space-2); padding-bottom: var(--space-2); overflow-x: auto; scrollbar-width: none; }
.site-header__bar2-inner::-webkit-scrollbar { display: none; }
.site-header__bar2-label { flex: 0 0 auto; font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--selo-muted-2); white-space: nowrap; }
.site-header__categories { flex: 1 1 auto; display: flex; gap: var(--space-6); white-space: nowrap; }
.site-header__categories a { font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--selo-text-on-dark); padding: var(--space-1) 0; border-bottom: 2px solid transparent; }
.site-header__categories a:hover, .site-header__categories a[aria-current="page"] { border-bottom-color: var(--selo-gold); color: #fff; }
.site-header__secondary { flex: 0 0 auto; display: flex; gap: var(--space-4); white-space: nowrap; }
.site-header__secondary a { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.06em; color: var(--selo-muted-2); }
.site-header__secondary a:hover, .site-header__secondary a[aria-current="page"] { color: #fff; }

@media (max-width: 760px) {
  .site-header__bar { flex-wrap: wrap; }
  .site-header__logo { order: 1; }
  .site-header__actions { order: 2; }
  .site-search { order: 3; flex-basis: 100%; max-width: none; margin-top: var(--space-2); }
  .account-link { display: none; } /* cabe em /conta/ pelo rodapé no mobile — evita apertar a barra 1 */
}
@media (max-width: 760px) {
  /* affordance de scroll horizontal na barra 2 — vv-design 26/09: a lista de
     categorias rola (confirmado via scrollWidth>clientWidth) mas "Utilidades"
     corta reto na borda sem nenhuma pista visual de que tem mais conteúdo. */
  .site-header__bar2::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 28px;
    background: linear-gradient(to right, transparent, var(--selo-ink));
    pointer-events: none;
  }
}

/* ---------- footer ---------- */
.site-footer { background: var(--selo-ink); color: var(--selo-text-on-dark); padding: var(--space-16) 0 var(--space-8); margin-top: var(--space-32); }
.site-footer a:hover { color: var(--selo-gold); }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-8); padding-bottom: var(--space-12); border-bottom: 1px solid var(--selo-line); }
.site-footer__brand img { height: 26px; margin-bottom: var(--space-4); filter: brightness(0) invert(1); }
.site-footer__manifesto { color: var(--selo-muted); font-size: var(--fs-small); max-width: 32ch; }
/* era h4 — rótulo de grupo de links do footer, não título de seção do
   conteúdo da página (páginas diferentes chegam no footer em profundidades
   de heading distintas, então nenhum nível fixo de heading funciona pra
   todas — a11y QA 25/09/2026, heading-order). Vira <p> + <nav aria-label>
   por grupo, padrão recomendado pra rótulo de navegação de rodapé. */
.site-footer__heading { font-family: var(--font-body); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.08em; color: var(--selo-muted); margin-bottom: var(--space-4); }
.site-footer li { margin-bottom: var(--space-2); font-size: var(--fs-small); }
.site-footer__bottom { display: flex; justify-content: space-between; align-items: center; padding-top: var(--space-6); font-size: var(--fs-micro); color: var(--selo-muted-2); flex-wrap: wrap; gap: var(--space-2); }
@media (max-width: 760px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .site-footer__grid { grid-template-columns: 1fr; } }

/* ---------- carrossel de categorias (home, modo browse) ----------
   amazon.com.br (site-corporate-refs.md §9c): hero = carrossel de MÚLTIPLOS
   banners lado a lado, nunca 1 banner de marca só. Cada slide é uma
   categoria REAL (nunca oferta/desconto inventado) — capa vem da 1ª foto
   real de produto daquela categoria quando existe; sem foto ainda, o
   próprio tom de cor da marca carrega o slide. */
.category-carousel { position: relative; margin-bottom: var(--space-2); }
.category-carousel__track {
  display: flex; gap: var(--space-4); overflow-x: auto; scroll-snap-type: x proximity;
  padding-bottom: var(--space-2); scrollbar-width: none;
}
.category-carousel__track::-webkit-scrollbar { display: none; }
.category-banner {
  position: relative; flex: 0 0 auto; width: min(78vw, 360px); aspect-ratio: 16/9;
  border-radius: var(--radius-lg); overflow: hidden; scroll-snap-align: start;
  display: flex; align-items: flex-end;
}
.category-banner__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.category-banner.tone-ink { background: var(--selo-ink); color: var(--selo-text-on-dark); }
.category-banner.tone-gold { background: var(--selo-gold); color: var(--selo-ink); }
.category-banner.tone-cream { background: var(--selo-cream-soft); color: var(--selo-ink); border: 1px solid var(--selo-line-on-cream); }
.category-banner__body { position: relative; z-index: 1; padding: var(--space-6); }
.category-banner__eyebrow { display: block; text-transform: uppercase; letter-spacing: 0.14em; font-size: var(--fs-micro); font-weight: 700; opacity: 0.75; margin-bottom: var(--space-2); }
/* tone-gold precisa de opacity maior — vv-design 26/09 mediu 4.35:1 (abaixo
   de AA 4.5:1) com a mesma 0.75 usada nos tons ink/cream, que sobre fundo
   dourado dá menos contraste que sobre fundo escuro/creme claro. */
.category-banner.tone-gold .category-banner__eyebrow { opacity: 0.9; }
.category-banner__title { font-size: var(--fs-h2); margin-bottom: var(--space-2); }
.category-banner__cta { font-size: var(--fs-small); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.category-carousel__controls { display: flex; gap: var(--space-2); justify-content: flex-end; margin-top: var(--space-2); }
.category-carousel__btn {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--selo-line-on-cream); background: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.category-carousel__btn:hover { background: var(--selo-ink); color: var(--selo-text-on-dark); }
@media (max-width: 640px) { .category-carousel__controls { display: none; } } /* scroll por toque já cobre; menos alvo competindo com o dedo */

/* ---------- prateleiras por categoria (home, modo browse) ---------- */
.shelf { padding: var(--space-8) 0; border-bottom: 1px solid var(--selo-line-on-cream); }
.shelf:last-child { border-bottom: 0; }
.shelf__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-4); }
.shelf__head h2 { font-size: var(--fs-h3); margin: 0; }
/* min-height 44px = touch target mínimo (vv-design 26/09 mediu 22px de
   altura real de clique — o pior caso da auditoria). display:inline-flex +
   align-items:center mantém o texto do mesmo tamanho visual, só amplia a
   área clicável ao redor dele. */
.shelf__see-all { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-small); font-weight: 600; color: var(--selo-text-muted); white-space: nowrap; }
.shelf__see-all:hover { color: var(--selo-ink); }
.shelf__track { display: flex; gap: var(--space-4); overflow-x: auto; padding-bottom: var(--space-2); scroll-snap-type: x proximity; }
.shelf__card { flex: 0 0 auto; width: min(58vw, 260px); scroll-snap-align: start; }
.shelf__card .product-card__figure { margin-bottom: var(--space-2); }
.shelf__empty {
  flex: 1 1 auto; min-width: 260px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: var(--space-3); padding: var(--space-6); border: 1px dashed var(--selo-line-on-cream); border-radius: var(--radius-md);
  color: var(--selo-text-muted);
}
.shelf__empty p { margin: 0; }

/* ---------- listagem/busca (sidebar de filtros + grid denso, amazon.com.br §9c) ---------- */
.listing-layout { display: grid; grid-template-columns: 240px 1fr; gap: var(--space-8); align-items: start; padding-bottom: var(--space-8); }
.filters-sidebar { border: 0; }
.filters-sidebar summary { display: none; cursor: pointer; }
.filters-sidebar__body { display: flex; flex-direction: column; gap: var(--space-6); position: sticky; top: 96px; }
.filter-group__title { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-3); }
.filter-list li { margin-bottom: var(--space-2); }
.filter-list a { display: block; font-size: var(--fs-small); color: var(--selo-text-muted); padding: 0.2rem 0; }
.filter-list a:hover { color: var(--selo-ink); }
.filter-list a.is-active { color: var(--selo-ink); font-weight: 700; }
.filter-price__row { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.filter-price__row input { width: 0; flex: 1 1 auto; font: inherit; font-size: var(--fs-small); padding: 0.5rem 0.6rem; border: 1px solid var(--selo-line-on-cream); border-radius: var(--radius-sm); background: #fff; }
.filter-clear { display: inline-block; font-size: var(--fs-small); text-decoration: underline; text-underline-offset: 3px; color: var(--selo-text-muted); }
.filter-clear:hover { color: var(--selo-ink); }

.listing-toolbar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; padding: var(--space-6) 0 var(--space-4); border-bottom: 1px solid var(--selo-line-on-cream); margin-bottom: var(--space-6); }
.listing-toolbar__count { font-size: var(--fs-small); color: var(--selo-text-muted); }
.listing-toolbar__sort { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-small); }
.listing-toolbar__sort select { font: inherit; font-size: var(--fs-small); padding: 0.4rem 0.6rem; border: 1px solid var(--selo-line-on-cream); border-radius: var(--radius-sm); background: #fff; }

@media (max-width: 860px) {
  .listing-layout { grid-template-columns: 1fr; }
  .filters-sidebar { border-bottom: 1px solid var(--selo-line-on-cream); margin-bottom: var(--space-4); padding-bottom: var(--space-4); }
  .filters-sidebar summary {
    display: flex; align-items: center; justify-content: space-between; list-style: none;
    font-size: var(--fs-small); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: var(--space-2) 0;
  }
  .filters-sidebar summary::-webkit-details-marker { display: none; }
  .filters-sidebar summary::after { content: "+"; font-size: 1.1rem; }
  .filters-sidebar[open] summary::after { content: "–"; }
  .filters-sidebar__body { position: static; padding-top: var(--space-3); }
}

.section { padding: var(--space-24) 0; }
.section--tight { padding: var(--space-16) 0; }
.section__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-6); margin-bottom: var(--space-8); }
.section__head h2 { max-width: 20ch; }
.section__kicker { text-transform: uppercase; letter-spacing: 0.14em; font-size: var(--fs-micro); font-weight: 700; color: var(--selo-gold-dim-text); margin-bottom: var(--space-3); display: block; } /* sempre sobre creme — usa o tom AA (ver tokens.css) */

/* categorias — faceta de navegação, nunca fork de página (aesop.com:
   "loja única, sem bifurcação" — ver site-corporate-refs.md §9). A home
   (/) É a loja (allbirds.com — §9b): um catálogo só, filtro por
   categoria como faceta (?categoria=<slug>), nunca página separada. */
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.chip {
  display: inline-flex; align-items: center; padding: 0.55rem 1.2rem; border-radius: 999px;
  border: 1px solid var(--selo-line-on-cream); font-size: var(--fs-small); font-weight: 600;
  color: var(--selo-text-muted);
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.chip:hover { border-color: var(--selo-ink); color: var(--selo-ink); }
.chip[aria-current="true"] { background: var(--selo-ink); border-color: var(--selo-ink); color: var(--selo-text-on-dark); }

/* prova social / manifesto curto */
.strip { background: var(--selo-cream-soft); border-top: 1px solid var(--selo-line-on-cream); border-bottom: 1px solid var(--selo-line-on-cream); }
.strip__row { display: flex; gap: var(--space-12); justify-content: space-between; padding: var(--space-12) 0; flex-wrap: wrap; }
.strip__item { flex: 1 1 220px; }
.strip__item h3 { font-size: var(--fs-h3); margin-bottom: var(--space-2); }
.strip__item p { color: var(--selo-text-muted); font-size: var(--fs-small); margin: 0; }

/* ---------- listagem de coleção / loja unificada (agora em /) ---------- */
.collection-head, .store-head { padding: var(--space-16) 0 var(--space-8); border-bottom: 1px solid var(--selo-line-on-cream); }
.collection-head h1, .store-head h1, .store-head h2 { margin-bottom: var(--space-3); }
.collection-head p, .store-head > p { color: var(--selo-text-muted); max-width: 60ch; }
.store-head > p { margin-bottom: var(--space-6); }
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8) var(--space-6); padding: var(--space-12) 0; }
@media (max-width: 900px) { .product-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6) var(--space-4); } }
@media (max-width: 560px) { .product-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } }
/* grid denso da listagem/busca (categoria/busca/filtro, fora da home) —
   mais colunas, menos respiro que o grid "vitrine" da home: card compacto,
   imagem quadrada, título, preço. */
.product-grid--dense { grid-template-columns: repeat(4, 1fr); gap: var(--space-5, 1.25rem) var(--space-4); padding: var(--space-6) 0; }
@media (max-width: 1080px) { .product-grid--dense { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .product-grid--dense { grid-template-columns: repeat(2, 1fr); } }

/* grid "vitrine" da HOME (única view quando só existe 1 categoria povoada —
   caso real da Selo hoje, coleção Regra: 12-13 camisetas, 1 categoria só).
   representclo.com §9d: imagem grande encostando direto no fundo, sem
   moldura/sombra de card, texto em 2 linhas curtas por baixo — nunca
   miniatura de prateleira de marketplace (o antigo .shelf__card de 190px). */
.collection-grid { padding: var(--space-8) 0 var(--space-12); }
.collection-grid .product-card__figure { border-radius: var(--radius-sm); }

.product-card__figure { position: relative; aspect-ratio: 1/1; border-radius: var(--radius-md); overflow: hidden; background: var(--selo-cream-soft); margin-bottom: var(--space-4); }
.product-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity var(--dur-base) var(--ease-out), transform 480ms var(--ease-out); }
.product-card__img--primary { position: relative; } /* garante dimensão base mesmo sem a 2ª foto */
.product-card__img--hover { opacity: 0; }
.product-card:hover .product-card__img--primary { opacity: 0; }
.product-card:hover .product-card__img--hover { opacity: 1; }
.product-card:hover .product-card__img { transform: scale(1.025); }

.product-card__meta { display: flex; flex-direction: column; gap: var(--space-1); }
/* rótulo de categoria — só aparece na vista "Todos" da busca/listagem, onde
   o cliente vê peças misturadas de categorias diferentes (mesmo padrão de
   .pdp__category, eyebrow discreto acima do nome). Na home (1 categoria só)
   fica de fora — repetir "Vestuário" em 13 cards seguidos é ruído, não
   informação. */
.product-card__cat { text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--fs-micro); font-weight: 700; color: var(--selo-gold-dim-text); } /* sempre sobre creme — usa o tom AA (ver tokens.css) */
/* eyebrow derivado do próprio nome do produto (ex. "Camiseta Oversized" em
   "Camiseta Oversized — Redentoristas") — mesmo dado, só reordenado
   visualmente: tipo de peça pequeno e discreto, nome da ordem religiosa
   grande — igual ao padrão editorial de streetwear curado (representclo.com
   §9d: rótulo de coleção pequeno, nome da peça em destaque). Nunca inventa
   texto que não esteja em product.nome. */
.product-card__eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--fs-micro); font-weight: 600; color: var(--selo-text-muted); }
.product-card__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.product-card__name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; line-height: 1.2; }
.product-card__price { font-size: var(--fs-small); font-weight: 600; color: var(--selo-ink); white-space: nowrap; flex: 0 0 auto; }
.shelf__card .product-card__name { font-size: 1rem; }
.empty-state { text-align: center; padding: var(--space-24) 0; color: var(--selo-text-muted); }
/* era h3 (pulava do h1 da página direto pro h3 — falha de heading-order,
   a11y QA 25/09/2026); promovido a h2 mantendo o tamanho visual com
   --fs-h3, mesmo padrão já usado em .pdp__context h2/.summary-card h2. */
.empty-state h2 { color: var(--selo-ink); font-size: var(--fs-h3); }
.skeleton { background: linear-gradient(90deg, var(--selo-cream-soft) 25%, #e3d8c4 37%, var(--selo-cream-soft) 63%); background-size: 400% 100%; animation: skeleton-loading 1.4s ease infinite; border-radius: var(--radius-md); }
@keyframes skeleton-loading { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; background: var(--selo-cream-soft); } }

/* ---------- PDP ----------
   Fotos reais on-model são quadradas (1254×1254, mesmo set/enquadramento em
   toda a coleção — confirmado 28/09/2026) e a moldura 4:5 abaixo recorta as
   LATERAIS de um sujeito centralizado, nunca topo/base — enquadramento
   editorial deliberado (mesma proporção de ALD/Kith/Represent, §9d/9f),
   seguro porque todo o set usa o mesmo fundo neutro e a mesma distância de
   câmera em todas as 13 peças. */
.pdp { padding: var(--space-8) 0 var(--space-24); }
.pdp__grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-16); align-items: start; }
.pdp__gallery-main { position: relative; aspect-ratio: 4/5; border-radius: var(--radius-md); overflow: hidden; background: var(--selo-cream-soft); margin-bottom: var(--space-3); }
.pdp__gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.pdp__thumbs { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.pdp__thumbs button { width: 64px; aspect-ratio: 4/5; border-radius: var(--radius-sm); overflow: hidden; border: 1.5px solid transparent; padding: 0; background: var(--selo-cream-soft); transition: border-color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out); opacity: 0.6; }
.pdp__thumbs button:hover { opacity: 1; }
.pdp__thumbs button[aria-current="true"] { border-color: var(--selo-ink); opacity: 1; }
.pdp__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.pdp__info { position: sticky; top: 96px; padding-top: var(--space-2); }
.pdp__category { text-transform: uppercase; letter-spacing: 0.1em; font-size: var(--fs-micro); font-weight: 700; color: var(--selo-gold-dim-text); } /* sempre sobre creme — usa o tom AA (ver tokens.css) */
.pdp__info h1 { margin-top: var(--space-2); font-size: var(--fs-h1); }
.pdp__price { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; margin: var(--space-3) 0 var(--space-6); color: var(--selo-ink); }
.pdp__desc { color: var(--selo-text-muted); margin-bottom: var(--space-6); font-size: 1.02rem; line-height: 1.65; }
.field-group { margin-bottom: var(--space-6); }
.field-group__label { display: block; font-size: var(--fs-small); font-weight: 600; margin-bottom: var(--space-2); }
.swatch-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.swatch { min-height: 44px; border: 1px solid var(--selo-line-on-cream); background: #fff; border-radius: var(--radius-sm); padding: 0.55rem 1.1rem; font-size: var(--fs-small); font-weight: 600; transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.swatch:hover { border-color: var(--selo-ink); }
.swatch[aria-pressed="true"] { border-color: var(--selo-ink); background: var(--selo-ink); color: var(--selo-text-on-dark); }
.swatch[disabled] { opacity: 0.35; text-decoration: line-through; pointer-events: none; }
.stock-note { font-size: var(--fs-small); margin: var(--space-3) 0; }
.stock-note--low { color: var(--selo-danger); }
.stock-note--ok { color: var(--selo-success); }
.pdp__context { margin-top: var(--space-10, 2.5rem); padding-top: var(--space-8); border-top: 1px solid var(--selo-line-on-cream); }
.pdp__context h2 { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.08em; color: var(--selo-text-muted); font-family: var(--font-body); font-weight: 700; margin-bottom: var(--space-3); }
.pdp__context p { color: var(--selo-text-muted); font-size: 0.98rem; }
@media (max-width: 860px) { .pdp__grid { grid-template-columns: 1fr; gap: var(--space-8); } .pdp__info { position: static; padding-top: 0; } }

/* ---------- carrinho / checkout (clareza > espetáculo) ---------- */
.commerce-page { padding: var(--space-12) 0 var(--space-24); }
.commerce-page h1 { margin-bottom: var(--space-8); }

/* Reserva de altura pros containers preenchidos via JS (skeleton -> dado real OU
   estado vazio) — sem isso, catálogo vazio (estado de hoje, antes do 1º produto
   cadastrado) faz o layout colapsar do tamanho do skeleton pro tamanho de 2 linhas
   de texto, gerando CLS crítico (medido: até 0,999 em /colecoes/vestuario/, achado
   real da auditoria wq-performance/Lighthouse). min-height não limita conteúdo
   maior (checkout preenchido, carrinho com item) — só evita o colapso quando o
   conteúdo final é pequeno (estado vazio, formulário curto). */
#product-grid, #cart-root, #pdp-root, #checkout-root, #conta-root { min-height: 60vh; }
#shelves-root { min-height: 40vh; }
/* #category-carousel NÃO usa min-height em vh — vv-design 26/09 mediu 101px
   (desktop) e 166px (mobile) de vazio morto entre o carrossel e o título da
   1ª prateleira, porque o conteúdo real (banner 16:9 + setas) é bem menor
   que 40vh. Reserva só a altura que o conteúdo de fato ocupa. */
#category-carousel { min-height: 260px; }
@media (max-width: 640px) { #category-carousel { min-height: 190px; } }
#product-grid:has(.empty-state), #cart-root:has(.empty-state), #checkout-root:has(.empty-state) {
  display: flex; align-items: center; justify-content: center;
}
/* Na home (a loja É a home — allbirds.com, §9b), 60vh de vão morto logo
   abaixo do hero enquanto o catálogo estiver zerado contradiz a própria
   razão da reestruturação. Reduz só o caso vazio do grid da loja (mantém
   60vh nos outros containers dinâmicos, decisão de CLS já medida acima). */
#product-grid:has(.empty-state) { min-height: 30vh; }
.cart-layout, .checkout-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--space-12); align-items: start; }
@media (max-width: 900px) { .cart-layout, .checkout-layout { grid-template-columns: 1fr; } }

.cart-line { display: grid; grid-template-columns: 88px 1fr auto; gap: var(--space-4); padding: var(--space-6) 0; border-bottom: 1px solid var(--selo-line-on-cream); align-items: center; }
.cart-line__figure { width: 88px; aspect-ratio: 4/5; border-radius: var(--radius-sm); overflow: hidden; background: var(--selo-cream-soft); }
.cart-line__figure img { width: 100%; height: 100%; object-fit: cover; }
.cart-line__name { font-family: var(--font-display); font-size: 1.05rem; margin-bottom: var(--space-1); }
.cart-line__meta { font-size: var(--fs-small); color: var(--selo-text-muted); margin-bottom: var(--space-2); }
.qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--selo-line-on-cream); border-radius: var(--radius-sm); }
.qty-stepper button { width: 32px; height: 32px; background: none; border: 0; font-size: 1rem; }
.qty-stepper input { width: 36px; text-align: center; border: 0; background: none; font: inherit; }
.cart-line__price { text-align: right; font-weight: 600; }
.cart-line__remove { display: block; margin-top: var(--space-2); font-size: var(--fs-micro); color: var(--selo-text-muted); text-decoration: underline; text-underline-offset: 3px; }

.summary-card { background: var(--selo-cream-soft); border-radius: var(--radius-lg); padding: var(--space-8); position: sticky; top: 96px; }
.summary-card h2 { font-size: var(--fs-h3); }
.summary-row { display: flex; justify-content: space-between; font-size: var(--fs-small); padding: var(--space-2) 0; }
.summary-row--total { font-size: 1.15rem; font-family: var(--font-display); border-top: 1px solid var(--selo-line-on-cream); margin-top: var(--space-3); padding-top: var(--space-4); }
.summary-note { font-size: var(--fs-micro); color: var(--selo-text-muted); margin-top: var(--space-4); }

/* stepper de checkout */
.checkout-steps { display: flex; gap: var(--space-6); margin-bottom: var(--space-8); font-size: var(--fs-small); font-weight: 600; color: var(--selo-text-muted); flex-wrap: wrap; }
.checkout-steps li { display: flex; align-items: center; gap: var(--space-2); }
.checkout-steps li.is-active { color: var(--selo-ink); }
.checkout-steps li .num { width: 22px; height: 22px; border-radius: 50%; border: 1px solid currentColor; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-micro); }
.checkout-steps li.is-active .num { background: var(--selo-gold); border-color: var(--selo-gold); color: var(--selo-ink); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.form-grid .span-2 { grid-column: 1 / -1; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } .form-grid .span-2 { grid-column: auto; } }
.field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.field label { font-size: var(--fs-small); font-weight: 600; }
.field input, .field select, .field textarea {
  font: inherit; padding: 0.75rem 0.9rem; border: 1px solid var(--selo-line-on-cream); border-radius: var(--radius-sm);
  background: #fff; color: var(--selo-ink); transition: border-color var(--dur-fast) var(--ease-out);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--selo-gold-dim); }
.field-error { color: var(--selo-danger); font-size: var(--fs-micro); min-height: 1em; }
.field.has-error input, .field.has-error select { border-color: var(--selo-danger); }
.checkout-panel { background: #fff; border: 1px solid var(--selo-line-on-cream); border-radius: var(--radius-lg); padding: var(--space-8); margin-bottom: var(--space-6); }
.shipping-options { display: flex; flex-direction: column; gap: var(--space-3); }
.shipping-option { display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--selo-line-on-cream); border-radius: var(--radius-sm); padding: var(--space-4); cursor: pointer; }
.shipping-option[data-selected="true"] { border-color: var(--selo-gold-dim); background: var(--selo-cream-soft); }
.review-line { display: flex; justify-content: space-between; padding: var(--space-2) 0; font-size: var(--fs-small); }
.alert { border-radius: var(--radius-sm); padding: var(--space-4); font-size: var(--fs-small); margin-bottom: var(--space-4); }
.alert-error { background: #f7e2dc; color: #7a2f1e; }
.alert-success { background: #e3ead8; color: #3a4f2c; }
.alert-pending { background: #f3e6c9; color: #6b511b; }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.35); border-top-color: currentColor; animation: spin 700ms linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 1.4s; } }

/* ---------- página de status do pedido ---------- */
.order-status { text-align: center; padding: var(--space-32) 0; }
.order-status__icon { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto var(--space-6); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; }
.order-status__icon--ok { background: var(--selo-success); color: #fff; }
.order-status__icon--falhou { background: var(--selo-danger); color: #fff; }
.order-status__icon--pendente { background: var(--selo-gold); color: var(--selo-ink); }
.order-status h1 { margin-bottom: var(--space-3); }
.order-status p { color: var(--selo-text-muted); max-width: 46ch; margin: 0 auto var(--space-8); }

/* ---------- sobre / contato ---------- */
/* .prose fica só pra composição inline (ex. dentro de .contact-card); pra
   envolver um .container inteiro (ex. /sobre/), usar .manifesto-prose —
   evitar empilhar .container + .prose no mesmo nó (os dois disputam
   max-width com a mesma especificidade, resultado dependia de ordem no
   arquivo; achado do vv-design 25/09). */
.prose { max-width: 68ch; }
.prose p { color: var(--selo-text-muted, #6b6558); font-size: 1.05rem; }
.manifesto-prose { max-width: 68ch; margin: 0 auto; }
.manifesto-page .manifesto-prose p { font-size: 1.15rem; line-height: 1.7; color: #4a463c; }
.manifesto-page h1 { margin-bottom: var(--space-8); }

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); }
@media (max-width: 760px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-card { background: var(--selo-ink); color: var(--selo-text-on-dark); border-radius: var(--radius-lg); padding: var(--space-8); }
.contact-card a { color: var(--selo-gold); font-weight: 600; }

/* ---------- conta ---------- */
.order-row { display: grid; grid-template-columns: auto 1fr auto auto; gap: var(--space-4); align-items: center; padding: var(--space-4) 0; border-bottom: 1px solid var(--selo-line-on-cream); font-size: var(--fs-small); }
.status-chip { padding: 0.25rem 0.7rem; border-radius: 999px; font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; background: var(--selo-cream-soft); }
.status-chip--pago, .status-chip--enviado, .status-chip--entregue { background: #e3ead8; color: #3a4f2c; }
.status-chip--cancelado { background: #f7e2dc; color: #7a2f1e; }

/* placeholder de asset pendente (Regra 3 — nunca redesenhar logo em código).
   --selo-text-muted é calibrado pra fundo CLARO (4.94:1 AA); em fundo
   ESCURO (.site-footer) usa --selo-muted-2 (4.65:1 AA) — ver tokens.css.
   perf/a11y QA 25/09/2026: token errado no footer dava só 2.88:1, falha AA. */
.asset-pending {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px dashed var(--selo-text-muted); color: var(--selo-text-muted);
  font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.05em;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
}
.site-footer .asset-pending { border-color: var(--selo-muted-2); color: var(--selo-muted-2); }

/* variante que preenche uma figura inteira (ex. .hero__figure) em vez do
   selo compacto de logo — mesmo princípio (Regra 3: nunca esconder um
   asset ausente sem rótulo), aplicado a uma foto de produto pendente.
   V&V design 26/09/2026: onerror que só removia a <img> deixava uma caixa
   escura vazia sem nenhuma explicação — corrigido pra sempre rotular. */
.asset-pending--figure {
  width: 100%; height: 100%; border: none; border-radius: inherit;
  color: var(--selo-muted-2); font-size: var(--fs-small); text-transform: none;
  letter-spacing: 0.02em; padding: var(--space-4); text-align: center;
}