/* ==========================================================================
   Villani Linhas — regras específicas do negócio
   O que é sistema de design mora em base.css, componentes.css, header.css,
   loja.css e home.css. Aqui fica só o que é particular desta loja: avisos de
   produção, nota de medidas artesanais e o rodapé.
   ========================================================================== */

/* ==========================================================================
   Prazo de produção — itens 5 e 10 do briefing
   ========================================================================== */

.vl-prazo-producao {
  display: flex;
  gap: var(--e-3);
  align-items: flex-start;
  padding: var(--e-4) var(--e-5);
  margin: var(--e-4) 0;
  border-radius: var(--r-md);
  border-left: 3px solid var(--vl-terra);
  background: var(--vl-terra-suave);
  font-size: 14px;
  line-height: 1.55;
}
.vl-prazo-producao strong {
  display: block;
  color: var(--vl-ink);
  font-size: 15px;
  margin-bottom: 2px;
}
.vl-prazo-producao small {
  display: block;
  color: var(--vl-ink-70);
  font-size: 13.5px;
  line-height: 1.5;
}

/* Pronta entrega: mesma caixa, no verde da paleta. */
.vl-prazo-producao--pronta {
  border-left-color: var(--vl-sage);
  background: color-mix(in srgb, var(--vl-sage) 14%, #fff);
}

/* O contêiner que o JavaScript preenche ao trocar a variação. */
.vl-prazo-variacao[hidden] { display: none; }

/* ==========================================================================
   Nota de variação artesanal — item 8 do briefing
   ========================================================================== */

.vl-nota-medidas {
  font-size: 13px;
  color: var(--vl-ink-50);
  font-style: italic;
  margin-top: var(--e-3);
}

/* Área de medidas na ficha — item G-05 dos ajustes de 24/09. */
.vl-medidas {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px var(--e-3);
  padding: var(--e-3) 0;
  margin: var(--e-3) 0 0;
  border-top: 1px solid var(--vl-linha);
  border-bottom: 1px solid var(--vl-linha);
  font-size: 14px;
  line-height: 1.5;
}
.vl-medidas__rotulo {
  font-family: var(--fonte-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--vl-ink-70);
}
.vl-medidas__valor { color: var(--vl-ink); }
.vl-medidas__valor--vazio { color: var(--vl-ink-50); }
.vl-medidas__valor a { color: var(--vl-terra-forte); }
.vl-medidas-aba { margin-bottom: var(--e-3); }

/* "Disponível para encomenda" não é alerta: sem o vermelho de estoque baixo. */
.stock.vl-encomenda { color: var(--vl-sage, var(--vl-ink-70)); }

/* ==========================================================================
   Rodapé
   ========================================================================== */

.site-footer {
  background: var(--vl-areia);
}

.site-footer .widget-area .widget-title,
.site-footer .widget_nav_menu h2 {
  font-family: var(--fonte-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vl-ink);
  margin-bottom: var(--e-4);
}

.site-footer .widget_nav_menu ul { list-style: none; margin: 0; padding: 0; }
.site-footer .widget_nav_menu li { margin: 0 0 var(--e-3); }
.site-footer .widget_nav_menu a {
  font-size: 14px;
  color: var(--vl-ink-50);
  text-decoration: none;
  transition: color var(--t-rapida);
}
.site-footer .widget_nav_menu a:hover { color: var(--vl-terra); }

.site-footer .footer-html { font-size: 13px; color: var(--vl-ink-50); }
/* Razão social, CNPJ e endereço: segunda linha, menor, sem competir com o copyright. */
.vl-rodape-empresa { display: inline-block; margin-top: 4px; font-size: 12px; line-height: 1.6; }
.vl-rodape-empresa a { color: inherit; }

/* ==========================================================================
   Formulários do Fluent Forms
   ========================================================================== */

.fluentform .ff-el-group { margin-bottom: var(--e-4); }
.fluentform .ff-el-input--label label { font-weight: 500; color: var(--vl-ink); }
.fluentform .ff-btn-submit { width: auto; }

/* Newsletter em linha única: campo e botão lado a lado. */
.vl-newsletter .fluentform .ff-el-group { margin-bottom: var(--e-3); }
@media (min-width: 640px) {
  .vl-newsletter .fluentform form { display: flex; gap: var(--e-2); align-items: flex-start; }
  .vl-newsletter .fluentform .ff-el-group { flex: 1; margin-bottom: 0; }
  .vl-newsletter .fluentform .ff-el-group.ff-text-left { flex: 0 0 auto; }
}

/* Área de toque do rodapé: o texto tem 14px e a linha ficava com 28px de
   altura, abaixo do mínimo confortável no celular. */
.site-footer .widget_nav_menu a {
  display: inline-block;
  padding-block: 7px;
}

/* O Fluent Forms traz o próprio azul no botão de envio, que não existe em
   lugar nenhum da loja. Ele sai de `--fluentform-primary`: redefinir a variável
   alcança botão, foco e destaque de uma vez, sem disputa de seletor. */
:root {
  --fluentform-primary: #1b1a18;
  --fluentform-secondary: #b5714f;
}

.fluentform .ff-btn,
.fluentform .ff-btn-submit,
.fluentform button[type="submit"] {
  min-height: 52px;
  padding: 0 32px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--vl-ink);
  color: var(--vl-branco);
  font-family: var(--fonte-ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--t-rapida), transform var(--t-rapida);
}
.fluentform .ff-btn:hover,
.fluentform .ff-btn-submit:hover,
.fluentform button[type="submit"]:hover {
  background: var(--vl-terra);
  transform: translateY(-1px);
}

.fluentform .ff-el-form-control {
  min-height: 52px;
  padding: 0 18px;
  border: 1px solid var(--vl-linha);
  border-radius: var(--r-md);
  background: var(--vl-branco);
  font-size: 16px;
  color: var(--vl-ink);
}
.fluentform textarea.ff-el-form-control { padding-block: 14px; min-height: 130px; }
.fluentform .ff-el-form-control:focus {
  border-color: var(--vl-terra);
  outline: none;
  box-shadow: 0 0 0 3px var(--vl-terra-suave);
}

/* ==========================================================================
   Faixa de garantias, acima do rodapé
   ========================================================================== */

.vl-garantias {
  padding-block: clamp(26px, 3.2vw, 42px);
  background: var(--vl-cru);
  border-top: 1px solid var(--vl-linha);
}
.vl-garantias__grade {
  width: min(1272px, 100% - 2 * var(--gutter));
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.4vw, 20px);
}
/* Cada garantia é um cartão. As réguas verticais entre elas cortavam a faixa
   em três e competiam com as divisórias do rodapé logo abaixo. */
.vl-garantia {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-4) clamp(16px, 1.8vw, 24px);
  border: 0;
  border-radius: var(--r-lg);
  background: var(--vl-branco);
  box-shadow: var(--sombra-suave);
}
.vl-garantia__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: var(--r-pill);
  background: var(--vl-terra-suave);
  color: var(--vl-terra);
}
.vl-garantia__texto strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--vl-ink);
  line-height: 1.3;
}
.vl-garantia__texto small {
  display: block;
  font-size: 13px;
  color: var(--vl-ink-50);
  line-height: 1.45;
}

@media (max-width: 860px) {
  .vl-garantias__grade { grid-template-columns: 1fr; gap: var(--e-4); }

}

/* ==========================================================================
   Redes da marca
   ========================================================================== */

.vl-sociais {
  display: flex;
  gap: var(--e-2);
  margin-top: var(--e-4);
}
.vl-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--r-pill);
  border: 1px solid var(--vl-linha);
  color: var(--vl-ink-70);
  text-decoration: none;
  transition: background var(--t-rapida), border-color var(--t-rapida), color var(--t-rapida), transform var(--t-rapida);
}
.vl-social svg { flex: 0 0 auto; }
.vl-social:hover {
  background: var(--vl-terra);
  border-color: var(--vl-terra);
  color: var(--vl-branco);
  transform: translateY(-2px);
}

/* ==========================================================================
   Rodapé: coluna da marca
   ========================================================================== */

.vl-rodape-logo {
  display: block;
  width: clamp(70px, 6vw, 86px);
  height: auto;
  margin-bottom: var(--e-4);
  /* O arquivo do logo tem fundo branco. Sobre a areia do rodapé isso vira um
     retângulo visível; `multiply` deixa o branco passar e só o traço fica. */
  mix-blend-mode: multiply;
}

.vl-rodape-sobre {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--vl-ink-50);
  margin: 0 0 var(--e-3);
}

/* Sem título, a coluna da marca não precisa do espaço reservado a ele. */
.site-footer .footer-widget1 .widget-title,
.site-footer .footer-widget1 .widgettitle { display: none; }

/* ==========================================================================
   Rodapé: listas de links
   As linhas ficavam a 50px uma da outra — a coluna virava uma escada.
   ========================================================================== */

.site-footer .widget_nav_menu li { margin: 0; }
.site-footer .widget_nav_menu a { padding-block: 5px; }
.site-footer .widget_nav_menu ul { display: grid; gap: 2px; }

/* ==========================================================================
   Rodapé: redes
   ========================================================================== */

.vl-social:hover,
.vl-social:focus-visible {
  background: var(--vl-terra);
  border-color: var(--vl-terra);
  color: var(--vl-branco);
}
/* O SVG herda a cor do link; sem isto o traço continuava escuro sobre o
   terracota e o ícone sumia. */
.vl-social:hover svg,
.vl-social:focus-visible svg {
  color: var(--vl-branco);
  stroke: currentColor;
}

/* ==========================================================================
   Gaveta do carrinho
   ========================================================================== */

/* O resumo é um cartão só: a régua que o separava do topo duplicava a
   divisória que já existe acima dele. */
.vl-drawer__rodape {
  border-top: 0;
  border-radius: var(--r-lg);
}

/* Os sinais de mais e menos não ficavam no meio do botão: o glifo tem altura
   menor que a caixa e a altura de linha herdada empurrava tudo para baixo. */
.vl-qtd button,
.vl-qtd .vl-btn-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
}

/* ==========================================================================
   Confirmação de formulário em modal
   A mensagem aparecia como uma caixa cinza no lugar do formulário, fácil de
   não ver em página longa. Agora ela interrompe o que a pessoa está fazendo,
   como uma confirmação deve fazer.
   ========================================================================== */

.vl-confirmacao {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: rgba(27, 26, 24, .55);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-normal), visibility var(--t-normal);
}
.vl-confirmacao.is-aberta { opacity: 1; visibility: visible; }

.vl-confirmacao__caixa {
  width: min(430px, 100%);
  padding: clamp(28px, 4vw, 44px);
  border-radius: var(--r-xl);
  background: var(--vl-branco);
  box-shadow: var(--sombra-elevada);
  text-align: center;
  transform: translateY(12px) scale(.98);
  transition: transform var(--t-normal);
}
.vl-confirmacao.is-aberta .vl-confirmacao__caixa { transform: none; }

.vl-confirmacao__selo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin-bottom: var(--e-4);
  border-radius: var(--r-pill);
  background: var(--vl-terra-suave);
  color: var(--vl-terra);
}
.vl-confirmacao__selo svg { flex: 0 0 auto; }

.vl-confirmacao__titulo {
  font-family: var(--fonte-titulo);
  font-size: 26px;
  color: var(--vl-ink);
  margin: 0 0 var(--e-3);
}
.vl-confirmacao__texto {
  font-size: 15px;
  line-height: 1.6;
  color: var(--vl-ink-50);
  margin: 0 0 var(--e-5);
}
.vl-confirmacao__fechar { min-width: 160px; }

/* A caixa original do plugin não aparece mais: seu texto é lido e levado para
   o modal. */
.fluentform .ff-message-success { display: none; }

/* Os títulos das colunas do rodapé em caixa alta com muito espaçamento
   pareciam etiqueta de formulário, não cabeçalho de seção. */
.site-footer .widget-area .widget-title,
.site-footer .widget_nav_menu h2 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--vl-ink);
}

/* Os links das listas do rodapé ficavam com 35px de altura no celular. */
@media (max-width: 767px) {
  .site-footer .widget_nav_menu a {
    padding-block: 11px;
  }
}