/* ---------- Faixa listrada da home ----------
   O topo da home (faixa, logo, frase e botões) cabe na tela sem rolagem: as
   alturas seguem `svh` (altura visível mínima, já descontada a barra do
   navegador no celular) e só usam o valor fixo quando a tela é alta. */
.hero-stripe {
  width: 100%;
  background: repeating-linear-gradient(90deg, var(--stripe-cream) 0 34px, var(--stripe-green) 34px 68px);
  display: flex;
  justify-content: center;
  padding: clamp(14px, 2.6svh, 38px) 0;
}
.hero-stripe .hero-logo {
  width: min(62vw, 35svh, 360px);
  height: min(62vw, 35svh, 360px);
  display: block;
  margin: 0 auto;
  background: url('/assets/img/logo-selo.png') center/contain no-repeat;
}

/* ============================================================
   catalog.css — vitrine (hero, grade, cards, paginação)
   Complementa tokens/base/components.
   ============================================================ */

/* ---------- Hero ---------- */
.hero {
  text-align: center;
  padding: clamp(18px, 3.4svh, 56px) 0 clamp(18px, 3svh, 40px);
}
.hero .cta-row {
  margin-top: clamp(14px, 2.4svh, 22px);
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
/* Assinatura da marca: fonte desenhada, sempre em uma linha só.
   `nowrap` + clamp por viewport garantem que caiba de 360px ao desktop —
   sem max-width, que era o que quebrava a frase em duas linhas. */
.hero h1 {
  font-family: var(--font-display);
  font-size: min(clamp(30px, 9.5vw, 46px), 8.5svh);
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: 1px;
  color: var(--sage-deep);
  white-space: nowrap;
  margin: clamp(4px, 1svh, 10px) auto 0;
}
.hero .hero-lead {
  margin: clamp(10px, 1.8svh, 18px) auto 0;
  color: var(--muted);
  max-width: 48ch;
  font-size: 15.5px;
}

/* ---------- Cabeçalho da coleção ---------- */
.catalog-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.catalog-head h2 { font-size: 28px; }
.result-meta { font-size: 13px; color: var(--muted); }

/* ---------- Chips de categoria ---------- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}

/* ---------- Card: thumb com glifo (placeholder de arte) ---------- */
.pcard .thumb {
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  background: var(--sage-tint);
  overflow: hidden;
}
.pcard .thumb img { width: 100%; height: 100%; object-fit: cover; }
.pcard .thumb svg { width: 42%; height: 42%; color: var(--sage); opacity: .55; }
.pcard .body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 2px; }
.pcard .price { margin-top: 8px; font-size: 15px; color: var(--ink); font-weight: 500; }
.pcard .soldout { margin-top: 6px; font-size: 12px; color: var(--rose); font-weight: 600; }

/* ---------- Paginação ---------- */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 36px;
}
.pager-info { font-size: 13.5px; color: var(--muted); }
.pager button:disabled { opacity: .4; cursor: not-allowed; }


@media (max-width: 620px) {
  .pcard .add { display: none; }
  .hero-stripe { padding: clamp(14px, 3.4svh, 26px) 0; }
}

/* Em telas bem estreitas (320px) os dois botões não cabem lado a lado e
   empurravam a chamada para baixo da dobra. Um pouco menos de respiro
   horizontal mantém os dois na mesma linha. */
@media (max-width: 380px) {
  /* Aqui a largura é que manda no tamanho do logo, e um logo de 62vw não
     deixa folga para os botões. */
  .hero-stripe .hero-logo {
    width: min(56vw, 33svh, 360px);
    height: min(56vw, 33svh, 360px);
  }
  .hero .hero-lead { font-size: 14.5px; }
  .hero .cta-row { gap: 8px; }
  .hero .cta-row .btn-lg { padding: 14px 16px; font-size: 14px; }
}

/* Telas muito baixas (celular deitado, notebooks antigos): a linha de apoio
   sai para que a marca e os botões continuem acima da dobra. O texto segue
   logo abaixo, na própria seção da coleção. */
@media (max-height: 560px) {
  .hero .eyebrow { display: none; }
  .hero .hero-lead { display: none; }
  .hero-stripe { padding: 10px 0; }
  .hero-stripe .hero-logo {
    width: min(56vw, 28svh, 300px);
    height: min(56vw, 28svh, 300px);
  }
  .hero { padding: 12px 0 18px; }
  .hero h1 { font-size: min(clamp(26px, 9.5vw, 46px), 8.5svh); }
}