/* ============================================================
   BASE — reset, tipografia, layout, responsividade
   NÃO CONTÉM COR NEM NOME DE MARCA. Só var().
   Compartilhado por todas as lojas. Editar aqui afeta todas.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

/* O atributo `hidden` vale display:none na folha do navegador — que perde
   para QUALQUER display de folha de autor. Sem isto, .sacola{display:flex}
   e .modal{display:flex} deixam sacola e modal SEMPRE visiveis. */
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--fundo);
  color: var(--marca-escura);
  font-family: var(--fonte-corpo);
  /* Montserrat tem altura de x maior e desenho mais estreito que a
     Lora: no mesmo corpo ela parece menor e mais apertada. 16/26 e
     a medida do design system, e o que devolve o ar ao parágrafo. */
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  /* Retangulo cinza que o iOS pisca a cada toque */
  -webkit-tap-highlight-color: transparent;
  /* Impede o "puxa e solta" da pagina no Safari */
  overscroll-behavior-y: none;
}

/* iOS DA ZOOM sozinho ao focar campo com fonte menor que 16px,
   e nao desfaz depois. Vale para todo campo, de toda loja. */
input, select, textarea, button { font-size: 16px; }

a { color: var(--marca-detalhe); text-decoration: none; }
a:hover { color: var(--marca-realce); }

:focus-visible {
  outline: 2px solid var(--marca-primaria);
  outline-offset: 2px;
}
::selection { background: var(--marca-primaria-alt); }

img { max-width: 100%; display: block; }

/* Números sempre alinhados — preços não podem "dançar".

   A fonte aqui e OUTRA, de propósito: Inter, só para número. Fonte
   de texto usa algarismo old-style, que desce abaixo da linha de
   base e faz coluna de preço parecer torta. O painel resolveu isso
   em 08/09/2026; a loja passa a resolver igual. */
.num,
.preco,
.preco-pix,
.pdp-preco-valor,
.pdp-preco-pix {
  font-family: var(--fonte-numero);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: 0;
}

/* --- Estrutura de página ----------------------------------- */
/* Largura e margem saem dos tokens: mudar o respiro da loja
   inteira passa a ser uma linha em tema.css, não uma caçada. */
.container { max-width: var(--largura-max); margin: 0 auto; padding: 0 var(--margem-lateral); }
.secao     { max-width: var(--largura-max); margin: 0 auto; padding: var(--espaco-4xl) var(--margem-lateral) 0; }

.secao-cabecalho {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 24px; padding-bottom: 18px; margin-bottom: 40px;
  border-bottom: 1px solid color-mix(in srgb, var(--marca-escura) 14%, transparent);
}

/* --- Tipografia --------------------------------------------- */
/* EB Garamond não tem peso 300 — pedir 300 faria o navegador
   sintetizar um afinamento falso, que borra a serifa. Os pesos que
   existem são 400 e 500, e o desenho já e leve por natureza. */
.titulo-hero {
  font-family: var(--fonte-titulo); font-weight: 400;
  font-size: clamp(44px, 6vw, 84px); line-height: 1.02;
  letter-spacing: -.02em; margin: 0 0 26px; text-wrap: balance;
}
.titulo-secao { font-family: var(--fonte-titulo); font-weight: 400; font-size: 40px; line-height: 1.2; letter-spacing: -.015em; margin: 0; }
.titulo-card  { font-family: var(--fonte-titulo); font-weight: 500; font-size: 21px; line-height: 1.3; margin: 16px 0 4px; }

/* Montserrat já nasce larga: .3em de entreletra, que servia à
   Georgia, aqui separa demais e a palavra deixa de ser palavra.
   O sistema pede .14em. */
.eyebrow {
  font-size: 11px; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--marca-detalhe);
}

/* --- Grades -------------------------------------------------- */
.grade-vitrine  { display: grid; gap: 28px; grid-template-columns: repeat(var(--grade-vitrine), 1fr); }
.grade-catalogo { display: grid; gap: 28px; grid-template-columns: repeat(var(--grade-catalogo), 1fr); }

/* --- Animações ---------------------------------------------- */
@keyframes yzRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes yzTurn { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes yzMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================================================
   RESPONSIVO — o bundle original não tinha nada disto.
   Mobile é onde o público de moda entra (Instagram).
   ============================================================ */

@media (max-width: 1024px) {
  :root { --grade-vitrine: 3; --grade-catalogo: 3; }
  .secao { padding: 72px 24px 0; }
  .container { padding: 0 24px; }
}

@media (max-width: 768px) {
  :root { --grade-vitrine: 2; --grade-catalogo: 2; --hero-altura: auto; }
  .titulo-secao { font-size: 30px; }
  .secao { padding: 56px 20px 0; }
  .container { padding: 0 20px; }
  .secao-cabecalho { flex-direction: column; align-items: flex-start; gap: 10px; }
}

@media (max-width: 480px) {
  /* Card rico (rotulo de tamanho + 2 botoes de largura cheia) nao
     cabe em 2 colunas num telefone — uma coluna so, como Alo/Vuori. */
  :root { --grade-vitrine: 1; --grade-catalogo: 1; }
  .grade-vitrine, .grade-catalogo { gap: 16px; }
  .titulo-card { font-size: 17px; }
  .secao { padding: 44px 16px 0; }
  .container { padding: 0 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}