/* ============================================================
   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);
  -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" */
.num {
  font-family: var(--fonte-corpo);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: .015em;
}

/* --- Estrutura de página ----------------------------------- */
.container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.secao     { max-width: 1280px; margin: 0 auto; padding: 92px 32px 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 --------------------------------------------- */
.titulo-hero {
  font-family: var(--fonte-titulo); font-weight: 300;
  font-size: clamp(52px, 6.2vw, 92px); line-height: .98;
  letter-spacing: -.01em; margin: 0 0 26px; text-wrap: balance;
}
.titulo-secao { font-family: var(--fonte-titulo); font-weight: 400; font-size: 40px; margin: 0; }
.titulo-card  { font-family: var(--fonte-titulo); font-weight: 500; font-size: 21px; margin: 16px 0 4px; }

.eyebrow {
  font-size: 11.5px; letter-spacing: .3em; 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) {
  :root { --grade-vitrine: 2; --grade-catalogo: 2; }
  .grade-vitrine, .grade-catalogo { gap: 14px; }
  .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; }
}