/* ==========================================================================
   Neulis Alt — a tipografia de interface da marca
   Hospedada no tema, não no Google Fonts: a família é licenciada e os
   arquivos vieram do cliente. Convertidos de TTF para WOFF2, os seis pesos
   somam 292 KB em vez de 928 KB.

   `font-display: swap` deixa o texto aparecer na fonte do sistema enquanto a
   Neulis carrega — melhor um instante de fonte trocada do que meio segundo de
   página em branco.
   ========================================================================== */

@font-face {
  font-family: "Neulis Alt";
  src: url("../fontes/NeulisAlt-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neulis Alt";
  src: url("../fontes/NeulisAlt-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neulis Alt";
  src: url("../fontes/NeulisAlt-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Neulis Alt";
  src: url("../fontes/NeulisAlt-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neulis Alt";
  src: url("../fontes/NeulisAlt-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neulis Alt";
  src: url("../fontes/NeulisAlt-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   Villani Linhas — fundação
   Tokens, tipografia e utilitários. Tudo que se repete na loja nasce daqui:
   nenhum valor solto deve aparecer nos outros arquivos.
   ========================================================================== */

:root {
  /* Tipografia: a de interface e a dos títulos. */
  --fonte-ui: "Neulis Alt", system-ui, -apple-system, sans-serif;
  --fonte-titulo: var(--fonte-titulo);

  /* A coluna do site. Tudo que é conteúdo alinha por ela: sem um valor
     único, cada seção escolhia a sua e o site ficava com três margens
     laterais diferentes convivendo na mesma página. */
  --largura-conteudo: 1272px;

  /* ---------------------------------------------------------- superfícies
     A loja vende peça de algodão cru. Os fundos saem da própria matéria-prima
     — nada de branco clínico, nada de cinza de painel administrativo. */
  --vl-branco:      #ffffff;
  --vl-cru:         #faf8f4;   /* fundo da página */
  --vl-areia:       #f2ede4;   /* seções alternadas */
  --vl-areia-forte: #e8e0d2;   /* faixas e estados */
  --vl-linha:       #e7e0d5;   /* divisórias, quando inevitáveis */

  /* ------------------------------------------------------------- tinta */
  --vl-ink:      #1b1a18;
  --vl-ink-70:   #4a4741;
  --vl-ink-50:   #6f6a62;
  --vl-ink-30:   #9a948a;

  /* ------------------------------------------------------------ acento
     Terracota para o comercial (preço, selo, destaque) e sálvia para
     interação (foco, link). Dois acentos discretos em vez de um colorido. */
  --vl-terra:       #b5714f;
  --vl-terra-forte: #96593a;
  --vl-terra-suave: #f6ece5;
  --vl-sage:        #7d8c6f;
  --vl-dourado:     #c8a476;

  /* ----------------------------------------------------------- estados */
  --vl-ok:     #3f6b53;
  --vl-aviso:  #9a7326;
  --vl-erro:   #a8402f;

  /* ------------------------------------------------------------- raios
     Propositalmente irregulares. Card, botão e imagem têm funções
     diferentes e não precisam do mesmo canto — é o que separa interface
     desenhada de interface montada em caixas iguais. */
  --r-xs:   8px;
  --r-sm:   12px;
  --r-md:   16px;
  --r-lg:   22px;
  --r-xl:   28px;
  --r-2xl:  40px;
  --r-pill: 999px;

  /* ------------------------------------------------------------ sombra
     Sombra aqui é profundidade, não contorno. Sempre com tom quente —
     preto puro sobre fundo bege suja a cor. */
  --sombra-suave:    0 1px 2px rgba(45, 37, 28, .04), 0 4px 16px rgba(45, 37, 28, .045);
  --sombra-card:     0 2px 6px rgba(45, 37, 28, .05), 0 12px 32px rgba(45, 37, 28, .06);
  --sombra-elevada:  0 6px 18px rgba(45, 37, 28, .08), 0 24px 56px rgba(45, 37, 28, .10);
  --sombra-drawer:  -18px 0 60px rgba(45, 37, 28, .16);

  /* ------------------------------------------------------------ espaço */
  --e-1:  4px;
  --e-2:  8px;
  --e-3:  12px;
  --e-4:  16px;
  --e-5:  24px;
  --e-6:  32px;
  --e-7:  48px;
  --e-8:  64px;
  --e-9:  88px;
  --e-10: 120px;

  /* Respiro vertical entre seções, proporcional à largura da tela:
     em telas grandes o ar é maior sem virar buraco no celular. */
  --secao-y: clamp(28px, 3.5vw, 52px);
  /* 24px no celular é o recuo do container do tema; com 16 as seções próprias
     ficavam mais largas que as do tema e a margem lateral oscilava durante a
     rolagem. */
  --gutter:  clamp(24px, 4vw, 40px);

  /* --------------------------------------------------------- transição */
  --t-rapida: 140ms cubic-bezier(.32, .72, .38, 1);
  --t-normal: 260ms cubic-bezier(.32, .72, .38, 1);
  --t-lenta:  460ms cubic-bezier(.22, .68, .28, 1);

  /* ------------------------------------------------------------ camada */
  --z-header:  100;
  --z-overlay: 900;
  --z-drawer:  910;
}

/* ==========================================================================
   Tipografia
   Duas famílias: Cormorant Garamond dá o tom artesanal nos títulos, Inter
   sustenta leitura e interface. Nenhum texto de interface abaixo de 13px.
   ========================================================================== */

body {
  background: var(--vl-cru);
  color: var(--vl-ink-70);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { color: var(--vl-ink); text-wrap: balance; }

.vl-titulo-secao {
  font-size: clamp(27px, 3.2vw, 40px);
  line-height: 1.12;
  margin: 0;
  letter-spacing: -.015em;
}

/* Rótulo que antecede o título: cria hierarquia sem aumentar o título. */
.vl-rotulo {
  display: block;
  font-family: var(--fonte-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--vl-terra);
  margin: 0 0 var(--e-3);
}
.vl-rotulo--claro { color: rgba(255, 255, 255, .8); }

.vl-apoio {
  font-size: 16px;
  line-height: 1.65;
  color: var(--vl-ink-50);
  max-width: 56ch;
}

/* Cabeçalho de seção: rótulo, título e apoio com espaço já resolvido, para
   não sobrar o vão entre título e conteúdo que havia na home antiga. */
.vl-secao__cabecalho { margin-bottom: clamp(28px, 3.5vw, 44px); }
.vl-secao__cabecalho--centro { text-align: center; }
.vl-secao__cabecalho--centro .vl-apoio { margin-inline: auto; }
.vl-secao__cabecalho .vl-titulo-secao + .vl-apoio { margin-top: var(--e-3); }

/* Linha de título com ação à direita ("Novidades … ver todos") */
.vl-secao__linha {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e-5);
  flex-wrap: wrap;
}

.vl-link-seta {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-size: 14px;
  font-weight: 500;
  color: var(--vl-ink);
  text-decoration: none;
  white-space: nowrap;
}
.vl-link-seta svg { transition: transform var(--t-rapida); }
.vl-link-seta:hover svg { transform: translateX(3px); }

/* ==========================================================================
   Utilitários
   ========================================================================== */

.vl-secao { padding-block: var(--secao-y); }
.vl-secao--areia { background: var(--vl-areia); }

/* As seções da home ficam dentro do container do tema, que já aplica o recuo
   lateral. Descontar o gutter de novo aqui tirava mais 40px de cada lado e
   deixava a home mais estreita que o rodapé e que o resto do site. */
.vl-container {
  width: 100%;
  max-width: var(--largura-conteudo);
  margin-inline: auto;
}

/* Acessibilidade: visível só para leitor de tela. */
.vl-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Foco consistente em toda a loja — o reset do tema apaga o padrão. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--vl-sage);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Ícones em linha
   Um SVG dentro de um contêiner flex é o único item encolhível quando o
   conteúdo passa da largura disponível — e encolhe até zero, sumindo da tela
   sem erro nenhum. Aconteceu duas vezes: no ícone do carrinho e no X de fechar
   a gaveta. A regra vale para todos os ícones do tema.
   ========================================================================== */

.vl-acao svg,
.vl-btn-icone svg,
.vl-drawer svg,
.vl-beneficio svg,
.vl-painel__atalho svg,
.vl-produto-vantagens svg,
.vl-estado-pedido svg,
.vl-garantia svg,
.vl-social svg,
.vl-link-seta svg {
  flex: 0 0 auto;
}

.vl-btn-icone {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--vl-ink);
  cursor: pointer;
}

/* O Kadence dá 60px de margem superior a h2 dentro do conteúdo, e isso vence
   o `margin: 0` do próprio título. Dentro de um cabeçalho de seção o rótulo
   ficava a 60px do título que ele apresenta. */
.vl-secao__cabecalho > .vl-titulo-secao,
.vl-secao__cabecalho h2,
.vl-secao__cabecalho h3 {
  margin-top: 0;
}
.vl-secao__cabecalho .vl-apoio { margin-top: var(--e-3); }

/* Todo título que vem logo depois de um rótulo herdava os 60px de margem que
   o tema dá a h2 dentro do conteúdo. Corrigi isso antes só para o cabeçalho
   de seção; o mesmo vão aparecia no bloco editorial e em qualquer outro lugar
   com o par rótulo + título. A regra agora vale para o par, onde ele estiver. */
.entry-content .vl-rotulo + h1,
.entry-content .vl-rotulo + h2,
.entry-content .vl-rotulo + h3,
.entry-content .vl-rotulo + .vl-titulo-secao,
.vl-home .vl-rotulo + h1,
.vl-home .vl-rotulo + h2,
.vl-home .vl-rotulo + h3 {
  margin-top: var(--e-3);
}

/* ==========================================================================
   Espaço entre o header e o conteúdo
   O Kadence dá 80px de margem ao #primary. Na home isso abria uma faixa creme
   entre o menu e o hero; nas outras páginas empurrava a trilha para o meio da
   tela. Aqui a home cola e o resto fica com um respiro curto.
   ========================================================================== */

#primary.content-area { margin-top: clamp(16px, 2vw, 28px); }
.home #primary.content-area { margin-top: 0; }

/* ==========================================================================
   Faixa do título de página
   O Kadence reserva 200px de altura fixa para um título de 62px — 138px de ar
   antes de qualquer conteúdo. A altura passa a vir do próprio título, com um
   respiro proporcional.
   ========================================================================== */

.entry-hero,
.entry-hero-container-inner,
.entry-hero .entry-header {
  min-height: 0;
}
.entry-hero .entry-header {
  padding-block: clamp(26px, 3.4vw, 46px);
}

/* ==========================================================================
   Coluna única em todo o site
   O container do tema, o rodapé e as seções da home vinham com larguras
   diferentes: 1320, 1272 e 1192. Na rolagem isso aparecia como uma borda que
   entra e sai conforme a seção.
   ========================================================================== */

/* Só o rodapé precisa de ajuste: o container do conteúdo já entrega 1272px
   úteis. Mexer nele com `content-box` alargava a caixa e a sangria do hero,
   calculada a partir dela, passava da largura da tela. */
.site-footer .site-container,
.site-footer .site-container.site-footer-row-container-inner {
  max-width: calc(var(--largura-conteudo) + 48px);
}

/* ==========================================================================
   Alvos de toque no celular
   O mínimo confortável para o polegar é 44px. Estes elementos ficavam entre
   16 e 38, e são todos caminhos que o cliente usa: fechar o menu, ver a
   coleção inteira, mudar a quantidade, recuperar a senha.
   ========================================================================== */

@media (max-width: 767px) {
  /* X de fechar o menu lateral: tinha 31px de largura. */
  #mobile-drawer .menu-toggle-close {
    min-width: 48px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* "Ver tudo", "Ver todos" e outros links com seta. */
  .vl-link-seta,
  .vl-secao__cabecalho a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Mais e menos da quantidade, na gaveta e no carrinho. */
  .vl-qtd button,
  .wc-block-components-quantity-selector__button {
    width: 44px;
    height: 44px;
  }
  .vl-qtd__valor,
  .wc-block-components-quantity-selector__input { min-height: 44px; }

  /* Links de apoio: recuperar senha, termos, entrar. */
  .woocommerce-LostPassword a,
  .wc-block-components-checkout-policies a,
  .wc-block-checkout__login-prompt a,
  .woocommerce-privacy-policy-text a {
    display: inline-block;
    padding-block: 10px;
  }

  /* O botão que revela a senha vinha com 17px. */
  .woocommerce form .show-password-input,
  .wc-block-components-password-strength__meter + button,
  input[type="password"] + button {
    min-width: 44px;
    min-height: 44px;
  }

  /* Nome do produto no cartão. */
  .woocommerce ul.products li.product a.woocommerce-LoopProduct-link-title {
    padding-block: 8px;
  }
}