/* ==========================================================================
   Villani Linhas — componentes
   Botão, campo, selo e card. O que aparece em mais de uma página mora aqui.
   ========================================================================== */

/* ==========================================================================
   Botões
   Um só desenho para todos: o WooCommerce e o Kadence geram botões com
   classes diferentes, e sem unificá-los a loja fica com três aparências.
   ========================================================================== */

.vl-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .button,
.wp-element-button,
.wp-block-button__link,
.wc-block-components-button,
.woocommerce #respond input#submit,
.fluentform .ff-btn-submit {
  --btn-bg: var(--vl-ink);
  --btn-fg: #fff;
  --btn-bd: var(--vl-ink);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: 52px;
  padding: 0 var(--e-6);
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--fonte-ui);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .005em;
  text-transform: none;    /* caixa alta em botão grita; o peso já destaca */
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-rapida), color var(--t-rapida),
              border-color var(--t-rapida), transform var(--t-rapida),
              box-shadow var(--t-rapida);
}

.vl-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .button:hover,
.wp-element-button:hover,
.wc-block-components-button:hover,
.fluentform .ff-btn-submit:hover {
  --btn-bg: var(--vl-terra);
  --btn-bd: var(--vl-terra);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--sombra-suave);
}

.vl-btn:active { transform: translateY(0); }

/* Secundário: mesma silhueta, sem peso visual. */
.vl-btn--contorno,
.woocommerce a.button.alt--outline {
  --btn-bg: transparent;
  --btn-fg: var(--vl-ink);
  --btn-bd: var(--vl-linha);
}
.vl-btn--contorno:hover {
  --btn-bg: transparent;
  --btn-bd: var(--vl-ink);
  color: var(--vl-ink);
}

/* Sobre foto. */
.vl-btn--claro {
  --btn-bg: #fff;
  --btn-fg: var(--vl-ink);
  --btn-bd: #fff;
}
.vl-btn--claro:hover {
  --btn-bg: transparent;
  --btn-fg: #fff;
  --btn-bd: #fff;
  color: #fff;
}

.vl-btn--bloco { width: 100%; }
.vl-btn--pequeno { min-height: 42px; padding: 0 var(--e-5); font-size: 14px; }

.vl-btn[disabled],
.vl-btn.is-carregando,
.woocommerce button.button:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Estado de carregando: o giro nasce do próprio botão, sem elemento extra. */
.vl-btn.is-carregando { position: relative; color: transparent !important; }
.vl-btn.is-carregando::after {
  content: "";
  position: absolute;
  width: 17px; height: 17px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: #fff;
  animation: vl-girar .62s linear infinite;
}
@keyframes vl-girar { to { transform: rotate(360deg); } }

/* Botão só de ícone. */
.vl-btn-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--vl-ink);
  cursor: pointer;
  transition: background var(--t-rapida), color var(--t-rapida);
}
.vl-btn-icone:hover { background: var(--vl-areia); }
.vl-btn-icone svg { width: 20px; height: 20px; }

/* ==========================================================================
   Campos
   ========================================================================== */

.vl-campo,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.wc-block-components-text-input input,
.fluentform .ff-el-form-control,
input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="number"], input[type="search"],
textarea, select {
  width: 100%;
  min-height: 52px;
  padding: 14px 18px;
  border: 1px solid var(--vl-linha);
  border-radius: var(--r-sm);
  background: var(--vl-branco);
  color: var(--vl-ink);
  font-family: var(--fonte-ui);
  font-size: 16px;   /* 16px evita o zoom automático do iOS ao focar */
  line-height: 1.4;
  transition: border-color var(--t-rapida), box-shadow var(--t-rapida);
}

.vl-campo:focus,
.woocommerce form .form-row input.input-text:focus,
.wc-block-components-text-input input:focus,
.fluentform .ff-el-form-control:focus,
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--vl-ink-30);
  box-shadow: 0 0 0 4px rgba(125, 140, 111, .14);
}

.vl-campo--erro,
.woocommerce form .form-row.woocommerce-invalid input.input-text {
  border-color: var(--vl-erro);
  box-shadow: 0 0 0 4px rgba(168, 64, 47, .1);
}

label, .wc-block-components-checkout-step__title {
  font-size: 14px;
  font-weight: 500;
  color: var(--vl-ink);
}

/* ==========================================================================
   Selos
   ========================================================================== */

.vl-selo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--vl-areia);
  color: var(--vl-ink-70);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1;
}
.vl-selo--oferta  { background: var(--vl-terra); color: #fff; }
.vl-selo--novo    { background: var(--vl-ink); color: #fff; }
.vl-selo--esgotado{ background: var(--vl-areia-forte); color: var(--vl-ink-50); }
.vl-selo--encomenda { background: var(--vl-terra-suave); color: var(--vl-terra-forte); }
/* Pronta entrega: verde da paleta, para não se confundir com oferta nem novidade. */
.vl-selo--pronta  { background: var(--vl-sage); color: #fff; }

/* ==========================================================================
   Card de produto
   O elemento mais repetido da loja. A separação vem de espaço, imagem e
   sombra — não de borda: uma grade cheia de retângulos contornados é
   exatamente a aparência de template que queremos evitar.
   ========================================================================== */

.woocommerce ul.products,
.wc-block-grid__products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: clamp(16px, 2vw, 30px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.woocommerce ul.products li.product,
.wc-block-grid__product {
  position: relative;
  margin: 0 !important;
  padding: 0;
  width: auto !important;
  float: none !important;
  border: 0;
  background: transparent;
  text-align: left;
  list-style: none;
}

/* A foto manda: proporção fixa, canto arredondado e fundo areia enquanto
   carrega, para a grade não "pular" durante o carregamento. */
.woocommerce ul.products li.product a img,
.wc-block-grid__product-image img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-lg);
  background: var(--vl-areia);
  margin: 0 0 var(--e-4);
  transition: transform var(--t-lenta), box-shadow var(--t-normal);
}

.woocommerce ul.products li.product:hover a img,
.wc-block-grid__product:hover .wc-block-grid__product-image img {
  transform: translateY(-4px) scale(1.012);
  box-shadow: var(--sombra-card);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title {
  font-family: var(--fonte-ui);
  font-size: 15px !important;
  font-weight: 500;
  line-height: 1.35;
  color: var(--vl-ink);
  margin: 0 0 6px;
  padding: 0;
}

.woocommerce ul.products li.product .price,
.wc-block-grid__product-price {
  display: flex;
  align-items: baseline;
  gap: var(--e-2);
  font-family: var(--fonte-ui);
  font-size: 16px;
  font-weight: 600;
  color: var(--vl-ink);
  margin: 0;
}
.woocommerce ul.products li.product .price del,
.wc-block-grid__product-price del {
  font-size: 14px;
  font-weight: 400;
  color: var(--vl-ink-30);
  opacity: 1;
}
.woocommerce ul.products li.product .price ins,
.wc-block-grid__product-price ins {
  text-decoration: none;
  color: var(--vl-terra);
}

/* O botão de compra surge no hover em telas com ponteiro; no toque ele fica
   sempre visível, porque lá não existe hover. */
.woocommerce ul.products li.product .button {
  min-height: 44px;
  margin-top: var(--e-3);
  font-size: 14px;
  width: 100%;
}

@media (hover: hover) and (min-width: 768px) {
  .woocommerce ul.products li.product .button {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--t-normal), transform var(--t-normal);
  }
  .woocommerce ul.products li.product:hover .button,
  .woocommerce ul.products li.product:focus-within .button {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Selo sobre a foto */
.woocommerce ul.products li.product .onsale,
.wc-block-grid__product-onsale {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 2;
  min-height: 0;
  margin: 0;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--vl-terra);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1;
}

/* ==========================================================================
   Cartão genérico (conta, pedidos, resumo)
   ========================================================================== */

.vl-card {
  background: var(--vl-branco);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-suave);
  padding: clamp(20px, 2.5vw, 32px);
}
.vl-card--areia { background: var(--vl-areia); box-shadow: none; }
.vl-card--contorno { background: transparent; box-shadow: none; border: 1px solid var(--vl-linha); }

/* ==========================================================================
   Overlay compartilhado (drawer de carrinho, busca, filtros)
   ========================================================================== */

.vl-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgba(27, 26, 24, .34);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-normal), visibility var(--t-normal);
}
.vl-overlay.is-aberto { opacity: 1; visibility: visible; }

/* Estas regras moram aqui, e não em loja.css, porque o cartão de produto
   também aparece na home — e loja.css só é carregado nas páginas do
   WooCommerce. Fora dele, a segunda foto caía no fluxo e dobrava a altura
   do cartão, desalinhando a grade inteira. */
/* ==========================================================================
   Cartão de produto — selos e segunda foto
   ========================================================================== */

.woocommerce ul.products li.product a.woocommerce-LoopProduct-link,
.woocommerce ul.products li.product > a:first-of-type {
  position: relative;
  display: block;
}

.vl-selos {
  position: absolute;
  top: var(--e-3);
  left: var(--e-3);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  pointer-events: none;
}

/* A segunda foto fica empilhada sobre a primeira e só aparece no ponteiro.
   Em tela de toque não há hover, então ela nunca atrapalha. */
.vl-cartao__hover {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 1;
  opacity: 0;
  margin: 0 !important;
  transition: opacity var(--t-normal);
  pointer-events: none;
}
.woocommerce ul.products li.product:hover .vl-cartao__hover { opacity: 1; }

@media (hover: none) {
  .vl-cartao__hover { display: none; }
}

/* O Kadence põe fundo branco no bloco de texto do cartão. Sobre o creme da
   loja isso vira um degrau visível sob cada foto; a separação já vem do
   espaço e da sombra. */
.woocommerce ul.products li.product .product-details {
  background: transparent;
  padding-inline: 0;
  padding-bottom: 0;
}

/* Duas colunas no celular. A regra existia só em loja.css, que não é carregado
   na home — lá a grade caía para uma coluna e a página passava de 11.000px de
   altura. Cabe aqui porque o cartão de produto também mora fora da loja. */
@media (max-width: 767px) {
  .woocommerce ul.products,
  .wc-block-grid__products {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--e-3);
  }
  .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 14px; }
  .woocommerce ul.products li.product .price { font-size: 14px; }
}

/* Alvos de toque no celular: o botão do cartão ficava com 30px de altura e o
   título do produto, como link, com menos de 32. */
@media (max-width: 767px) {
  /* Precisa da classe no seletor: uma regra mais específica devolvia o botão
     para `display: inline`, e min-height não tem efeito em elemento inline. */
  /* A classe repetida sobe a especificidade acima da regra do Kadence que
     devolve o botão para `display: inline` — sem recorrer a !important. */
  .woocommerce ul.products li.product a.button.button,
  .woocommerce ul.products li.product button.button.button {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: 16px;
  }
  .woocommerce ul.products li.product .woocommerce-loop-product__title,
  .woocommerce ul.products li.product .woocommerce-loop-product__title a {
    display: inline-block;
    padding-block: 5px;
  }
}

/* O `.content-bg` do Kadence vence um seletor mais curto: o fundo branco
   continuava desenhando um degrau sob cada foto. */
.woocommerce ul.products li.product .product-details.content-bg,
.woocommerce ul.products li.product .product-details {
  background: none;
  box-shadow: none;
}

/* O título do cartão é um <a> com classe própria do Kadence, não o <h2> — o
   padding precisa ir nele para o alvo de toque valer. */
@media (max-width: 767px) {
  .woocommerce ul.products li.product a.woocommerce-LoopProduct-link-title {
    display: inline-block;
    padding-block: 6px;
  }
}

/* O Kadence tira o botão do fluxo e o pendura em `bottom: -32px`, fora do
   cartão: no ponteiro ele aparecia por cima do preço e invadia a linha de
   baixo. Aqui ele volta ao fluxo e o espaço fica reservado desde o começo —
   nada salta quando o ponteiro entra. */
.woocommerce ul.products li.product .product-action-wrap.product-action-wrap {
  position: static;
  opacity: 0;
  transition: opacity var(--t-normal);
}
.woocommerce ul.products li.product:hover .product-action-wrap.product-action-wrap,
.woocommerce ul.products li.product:focus-within .product-action-wrap.product-action-wrap {
  opacity: 1;
}

/* Em tela de toque não há ponteiro: o botão fica visível o tempo todo, senão
   ninguém alcança "Ver opções" sem abrir o produto. */
@media (hover: none) {
  .woocommerce ul.products li.product .product-action-wrap.product-action-wrap { opacity: 1; }
}

/* Preço e botão ficavam encostados: o bloco do botão começava exatamente onde
   o preço termina, e o deslocamento de 6px do tema só piorava. */
.woocommerce ul.products li.product .product-action-wrap.product-action-wrap {
  margin-top: var(--e-3);
}
.woocommerce ul.products li.product .product-action-wrap .button {
  margin-top: 0;
  transform: none;
}

/* ==========================================================================
   Cartão de produto — desenho definitivo
   Substitui o cartão sem moldura das primeiras versões. O bloco de texto
   agora é uma grade de três linhas: categoria, nome e, na última, preço à
   esquerda com o botão à direita. O botão fica visível o tempo todo — não
   depende de ponteiro, então funciona igual no celular.
   ========================================================================== */

.woocommerce ul.products li.product,
.wc-block-grid__product {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 10px;
  background: var(--vl-branco);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-suave);
  transition: box-shadow var(--t-normal), transform var(--t-normal);
}
.woocommerce ul.products li.product:hover {
  box-shadow: var(--sombra-card);
  transform: translateY(-3px);
}

/* A foto não sai mais do lugar no ponteiro: o cartão inteiro é que sobe.
   Duas animações ao mesmo tempo deixavam a grade inquieta. */
.woocommerce ul.products li.product a img,
.wc-block-grid__product-image img {
  margin: 0;
  border-radius: var(--r-md);
  transition: none;
}
.woocommerce ul.products li.product:hover a img,
.wc-block-grid__product:hover .wc-block-grid__product-image img {
  transform: none;
  box-shadow: none;
}

.vl-selos { top: 18px; left: 18px; }

/* Grade do texto */
.woocommerce ul.products li.product .product-details {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "categoria categoria"
    "nome      nome"
    "preco     acao";
  align-items: end;
  column-gap: var(--e-3);
  row-gap: 5px;
  margin-top: auto;
  padding: var(--e-4) 6px 6px;
}

.vl-cartao__categoria {
  grid-area: categoria;
  display: block;
  font-family: var(--fonte-ui);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--vl-ink-30);
  line-height: 1.4;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  grid-area: nome;
  margin: 0;
  font-size: 18px;
  line-height: 1.25;
}

.woocommerce ul.products li.product .price {
  grid-area: preco;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 7px;
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  color: var(--vl-ink);
}
.woocommerce ul.products li.product .price del {
  order: -1;
  flex-basis: 100%;
  font-size: 13px;
  font-weight: 400;
  color: var(--vl-ink-30);
  text-decoration: line-through;
  opacity: 1;
}
.woocommerce ul.products li.product .price ins {
  background: none;
  text-decoration: none;
  color: inherit;
  font-weight: 600;
}

/* Quanto a peça está mais barata */
.vl-cartao__abate {
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--vl-terra-suave);
  color: var(--vl-terra-forte);
  font-family: var(--fonte-ui);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  white-space: nowrap;
}

/* A descrição curta não entra no cartão: a foto e o nome já dizem o que é. */
.woocommerce ul.products li.product .product-excerpt { display: none; }

/* Botão, sempre visível */
.woocommerce ul.products li.product .product-action-wrap.product-action-wrap {
  grid-area: acao;
  position: static;
  margin: 0;
  opacity: 1;
}
.woocommerce ul.products li.product a.button.button,
.woocommerce ul.products li.product button.button.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--vl-ink);
  color: var(--vl-branco);
  font-family: var(--fonte-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none;
  white-space: nowrap;
  transition: background var(--t-rapida);
}
.woocommerce ul.products li.product a.button.button:hover,
.woocommerce ul.products li.product button.button.button:hover {
  background: var(--vl-terra);
  color: var(--vl-branco);
}
.woocommerce ul.products li.product .button svg { flex: 0 0 auto; }

/* Onde a coluna é estreita, o botão desce para a própria linha em vez de
   espremer o preço. */
@media (max-width: 1100px) {
  .woocommerce ul.products li.product .product-details {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "categoria"
      "nome"
      "preco"
      "acao";
    row-gap: 8px;
  }
  .woocommerce ul.products li.product .product-action-wrap.product-action-wrap { justify-self: stretch; }
  .woocommerce ul.products li.product a.button.button { width: 100%; }
}

/* O Kadence esconde o botão por opacidade no próprio <a>, não no contêiner —
   e define o nome do produto em Inter 15px. Ambas as regras vencem seletores
   mais curtos, daí a classe repetida. */
.woocommerce ul.products li.product a.button.button,
.woocommerce ul.products li.product button.button.button {
  opacity: 1;
}
.woocommerce ul.products li.product .product-details h2.woocommerce-loop-product__title,
.woocommerce ul.products li.product .product-details h2.woocommerce-loop-product__title a,
.woocommerce ul.products li.product h2.woocommerce-loop-product__title {
  font-family: var(--fonte-titulo);
  font-size: 19px;
  font-weight: 400;
  color: var(--vl-ink);
  letter-spacing: -.005em;
}

/* O Kadence põe uma seta depois do rótulo do botão. Com ela, mais o ícone de
   sacola e o preço na mesma linha, o conteúdo passava da largura do cartão e
   o botão montava em cima do preço. A seta sai: o ícone da sacola já diz o
   que o botão faz. */
.woocommerce ul.products li.product .button .kadence-arrow-right-alt-svg,
.woocommerce ul.products li.product .button svg.kadence-svg-iconset {
  display: none;
}
.woocommerce ul.products li.product a.button.button,
.woocommerce ul.products li.product button.button.button {
  min-width: 0;
  padding: 0 15px;
  font-size: 12.5px;
}

/* ==========================================================================
   Correções do cartão
   ========================================================================== */

/* O preço dividia a coluna com o botão e quebrava caractere a caractere
   ("R$ 1 / 34, / 90"). Agora ele reserva a largura que precisa e o botão fica
   com o que sobra, à direita. */
/* `max-content` na primeira coluna somado a `space-between` deixava a segunda
   coluna com largura zero, e o botão, alinhado à direita, era desenhado por
   cima do preço. Duas colunas simples resolvem: o preço não estica mais
   (tem width: max-content) e o botão fica com o resto. */
.woocommerce ul.products li.product .product-details {
  grid-template-columns: minmax(0, 1fr) auto;
}
.woocommerce ul.products li.product .price {
  white-space: nowrap;
}
.woocommerce ul.products li.product .product-action-wrap.product-action-wrap {
  justify-self: end;
}

/* A categoria também não quebra em duas linhas por causa de uma palavra. */
.vl-cartao__categoria {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Sem o deslocamento no ponteiro: o cartão subia e o bloco de texto passava
   por cima da foto do cartão de baixo. Fica só a sombra, que já dá o retorno
   de "isto é clicável" sem mexer no layout. */
.woocommerce ul.products li.product:hover {
  transform: none;
}

/* Botão em areia com texto escuro. */
.woocommerce ul.products li.product a.button.button,
.woocommerce ul.products li.product button.button.button {
  background: var(--vl-areia);
  color: var(--vl-ink);
}
.woocommerce ul.products li.product a.button.button:hover,
.woocommerce ul.products li.product button.button.button:hover {
  background: var(--vl-terra-suave);
  color: var(--vl-terra-forte);
}

/* O rótulo das ações do header herdava a cor de link do tema e saía azul. */
.vl-acao,
.vl-acao:visited,
.vl-acao__rotulo {
  color: var(--vl-ink);
}

/* O bloco do preço esticava até o fim da coluna e cobria a área do botão. */
.woocommerce ul.products li.product .price {
  width: max-content;
  max-width: 100%;
  justify-self: start;
}

/* O Kadence sobe o bloco de texto 32px quando o ponteiro entra, para abrir
   espaço ao botão que ele deixa pendurado fora do cartão. Como o botão voltou
   ao fluxo, esse deslocamento só servia para o texto passar por cima da foto. */
.woocommerce ul.products li.product:hover .product-details.product-details,
.woocommerce ul.products li.product:focus-within .product-details.product-details,
.woocommerce ul.products li.product .product-details.product-details {
  transform: none;
}

/* ==========================================================================
   Cartão: botão abaixo do preço
   Lado a lado, o botão espremia o preço em cartão estreito e a linha ficava
   apertada. Embaixo, ocupando a largura toda, ele também vira um alvo maior.
   ========================================================================== */

.woocommerce ul.products li.product .product-details {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "categoria"
    "nome"
    "preco"
    "acao";
  row-gap: 7px;
}
.woocommerce ul.products li.product .product-action-wrap.product-action-wrap {
  justify-self: stretch;
  margin-top: var(--e-2);
}
.woocommerce ul.products li.product a.button.button,
.woocommerce ul.products li.product button.button.button {
  width: 100%;
}

/* Zoom discreto e sombra um pouco mais densa quando o ponteiro entra. */
.woocommerce ul.products li.product {
  transition: box-shadow var(--t-normal), transform var(--t-normal);
}
.woocommerce ul.products li.product:hover {
  transform: scale(1.015);
  box-shadow: var(--sombra-elevada);
}

/* O selo "Novidade" passa a bege com texto branco. */
.vl-selo--novo {
  background: var(--vl-dourado);
  color: var(--vl-branco);
}

/* O Kadence deixa três <span> vazios no botão, reservados para os ícones de
   carregando e concluído. Eles têm largura zero, mas o `gap` do flex conta
   cada um: eram 21px de espaço invisível à direita, e o conteúdo parecia
   descentralizado. Ficam escondidos enquanto o botão está em repouso e voltam
   quando ele entra nos estados que os usam. */
.woocommerce ul.products li.product .button:not(.loading):not(.added) span.kadence-svg-iconset {
  display: none;
}

/* ==========================================================================
   Logo com respiro
   O logo encostava nas bordas da linha do header. A altura da fileira é um mod
   do Kadence; o respiro vem daqui para não mexer na altura dos outros itens.
   ========================================================================== */

#masthead .site-main-header-wrap .site-branding,
#mobile-header .site-main-header-wrap .site-branding {
  padding-block: clamp(14px, 1.6vw, 22px);
}

/* ==========================================================================
   Visualização em lista
   O Kadence centraliza o conteúdo na vertical e estica o botão pela largura
   toda da coluna — num cartão largo isso vira uma barra de 800px. O texto sobe
   para o topo, junto da foto, e o botão volta ao tamanho do seu conteúdo.
   ========================================================================== */

.woocommerce ul.products.products-list-view li.product {
  align-items: start;
}
.woocommerce ul.products.products-list-view li.product .product-details {
  margin-top: 0;
  align-content: start;
  align-items: start;
}
.woocommerce ul.products.products-list-view li.product .product-action-wrap.product-action-wrap {
  justify-self: start;
}
.woocommerce ul.products.products-list-view li.product a.button.button,
.woocommerce ul.products.products-list-view li.product button.button.button {
  width: auto;
  min-width: 190px;
}
/* Na lista a descrição curta faz sentido: há largura para ela. */
.woocommerce ul.products.products-list-view li.product .product-excerpt {
  display: block;
  grid-area: auto;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--vl-ink-50);
}

/* ==========================================================================
   Cartão de produto no celular
   Em duas colunas de 160px, o cartão precisa de outra proporção: a foto mais
   baixa para caber mais produto na tela, o texto menor e o botão ocupando a
   largura inteira.
   ========================================================================== */

@media (max-width: 767px) {
  /* A linha de categoria sempre cortava no meio de uma palavra — "HOME DECOR
     · S…". Nesta largura ela atrapalha mais do que informa; o nome do produto
     e a foto já dizem o que é. */
  .vl-cartao__categoria { display: none; }

  .woocommerce ul.products li.product a img,
  .wc-block-grid__product-image img {
    aspect-ratio: 1 / 1;
  }

  .woocommerce ul.products li.product .product-details {
    padding: var(--e-3) 4px 4px;
    row-gap: 5px;
  }

  .woocommerce ul.products li.product .product-details h2.woocommerce-loop-product__title,
  .woocommerce ul.products li.product .product-details h2.woocommerce-loop-product__title a {
    font-size: 16px;
    line-height: 1.2;
  }

  .woocommerce ul.products li.product .price {
    font-size: 16px;
  }
  .woocommerce ul.products li.product .price del { font-size: 12px; }

  .woocommerce ul.products li.product a.button.button,
  .woocommerce ul.products li.product button.button.button {
    width: 100%;
    min-height: 40px;
    padding-inline: 10px;
    font-size: 12px;
  }
  .woocommerce ul.products li.product .product-action-wrap.product-action-wrap {
    justify-self: stretch;
    margin-top: var(--e-2);
  }

  .vl-selos { top: 12px; left: 12px; }
  .vl-selo { font-size: 10px; padding: 3px 9px; }
}

/* O botão precisa da classe repetida para vencer a largura automática que a
   regra da visualização em lista aplica. */
@media (max-width: 767px) {
  .woocommerce ul.products li.product a.button.button.button,
  .woocommerce ul.products li.product button.button.button.button {
    width: 100%;
    min-width: 0;
  }
}

/* No celular o bloco de texto vira uma coluna só: preço numa linha, botão na
   seguinte. Com duas colunas o botão herdava a largura da coluna estreita e
   o `width: 100%` dele resolvia para 89px. */
@media (max-width: 767px) {
  .woocommerce ul.products li.product .product-details {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "categoria"
      "nome"
      "preco"
      "acao";
  }
}

/* O contêiner do botão tem recuo próprio no celular; em vez de caçar de onde
   vem, ele vira flex e o botão cresce para preencher. */
@media (max-width: 767px) {
  .woocommerce ul.products li.product .product-action-wrap.product-action-wrap {
    display: flex;
    padding: 0;
  }
  .woocommerce ul.products li.product .product-action-wrap.product-action-wrap > * {
    flex: 1 1 auto;
  }
}

/* O nome do produto é o alvo que a pessoa mira depois da foto; com 28 a 31px
   de altura ele exigia precisão demais no polegar. */
@media (max-width: 767px) {
  .woocommerce ul.products li.product .woocommerce-loop-product__title a,
  .woocommerce ul.products li.product h2.woocommerce-loop-product__title a,
  .woocommerce ul.products li.product a.woocommerce-LoopProduct-link-title {
    display: block;
    padding-block: 10px;
  }
}