/*
Theme Name: Hayfar
Theme URI: https://hayfar.com.br
Description: Tema filho do Twenty Twenty-Five, com a estética Hayfar aplicada à loja, carrinho, checkout, mini-carrinho e recomendações.
Author: Hayfar
Version: 4.8.1
Template: twentytwentyfive
Text Domain: hayfar
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');


/* ==================================================================
   PAINEL DE CONTROLE

   Tudo que você vai querer ajustar está neste primeiro bloco.
   Trocou um número aqui, mudou em todos os lugares que usam.
   Daqui para baixo você não precisa mexer.
   ================================================================== */

:root {

  /* ---- CORES: azuis ---- */
  --hf-azul:        #0057ff;
  --hf-azul-claro:  #56c2ff;
  --hf-azul-cyan:   #69d3ff;
  --hf-azul-escuro: #101b68;
  --hf-azul-titulo: #0f2cff;
  --hf-azul-foco:   #0E00FF;
  --hf-verde-suave-btn: #34c77b;

  /* ---- CORES: neutros ---- */
  --hf-fundo:         #ffffff;
  --hf-branco:        #ffffff;
  --hf-texto:         #172033;
  --hf-texto-medio:   #5a6682;
  --hf-texto-fraco:   #7a86a0;
  --hf-borda:         #dbe2ee;
  --hf-borda-campo:   #ccd3e2;
  --hf-divisor:       #d3dbe9;
  --hf-divisor-forte: #b9c3d6;
  --hf-azul-suave:    #f6f9ff;

  /* ---- CORES: sinalização ---- */
  --hf-verde:        #0a7a43;  /* verde principal */
  --hf-verde-claro:  #12a05a;  /* fim do degradê do botão */
  --hf-verde-suave:  #e8f6ee;  /* fundo do selo e da barra */
  --hf-vermelho:     #c02626;

  /* ---- LOJA (página de produtos) ---- */
  --hf-loja-colunas:        4;
  --hf-loja-colunas-tab:    3;
  --hf-loja-colunas-cel:    2;
  --hf-loja-gap:            28px;
  --hf-fs-loja-titulo:      18px;
  --hf-peso-loja-titulo:    800;
  --hf-fs-loja-preco:       26px;
  --hf-fs-loja-preco-velho: 18px;
  --hf-fs-loja-pagamento:   15px;
  --hf-altura-loja-btn:     50px;

  /* Espessura extra do nome do produto.
     Serve quando a fonte não tem um peso 800 de verdade e o
     navegador mostra uma variante mais fina.
     0 desliga. 0.2 é sutil. 0.6 é bem grosso. */
  --hf-contorno-titulo:     0.4px;

  /* Versões para o celular */
  --hf-fs-loja-titulo-cel:    16px;
  --hf-fs-loja-preco-cel:     20px;
  --hf-fs-loja-velho-cel:     15px;
  --hf-fs-loja-pagamento-cel: 16px;

  /* ---- PREÇOS NO CARRINHO E NO MINI-CARRINHO ----
     As mesmas variáveis valem nos dois lugares, para que os
     números tenham exatamente o mesmo padrão. */
  --hf-fs-mini-nome:        16px;  /* nome do produto */
  --hf-fs-mini-preco-velho: 15px;  /* preço antigo riscado */
  --hf-fs-mini-preco-atual: 18px;  /* preço unitário, em azul */
  --hf-fs-mini-total-linha: 18px;  /* soma da linha, em preto */

  /* ---- RESUMO DO PEDIDO ----
     Vale para a gaveta e para a página do carrinho. */
  --hf-fs-resumo-titulo:    17px;  /* "Resumo do pedido" */
  --hf-fs-resumo-total:     28px;  /* o total, em azul */
  --hf-fs-resumo-cheio:     17px;  /* o preço cheio riscado */
  --hf-fs-resumo-economia:  14px;  /* "Você economizou" */
  --hf-fs-resumo-pagamento: 14px;  /* a frase de parcelamento */
  --hf-altura-continuar:    48px;  /* botão "Continuar comprando" */

  /* ---- BARRA DO FRETE GRÁTIS (só na gaveta) ---- */
  --hf-frete-altura:   10px;   /* espessura da barra */
  --hf-fs-frete-texto: 13.5px; /* o texto abaixo dela */

  /* ---- CARRINHO FLUTUANTE ---- */
  --hf-flut-baixo:   24px;
  --hf-flut-direita: 24px;

  /* ---- TAMANHOS DE LETRA ---- */
  --hf-fs-titulo-pagina: clamp(26px, 3.2vw, 36px);
  --hf-fs-titulo-card:   17px;
  --hf-fs-total:         24px;
  --hf-fs-total-label:   15px;
  --hf-fs-botao:         15.5px;
  --hf-fs-botao-sec:     13.5px;

  /* O botão do cross-sell do carrinho. Menor que o da loja porque
     a coluna ali é estreita e o texto quebrava em duas linhas.
     Se um dia o texto voltar a quebrar, diminua este número. */
  --hf-fs-botao-cross:   13px;

  --hf-fs-produto-nome:  16px;

  --hf-fs-qtd:           13.5px;
  --hf-fs-preco-item:    14px;
  --hf-fs-preco-unit:    13px;
  --hf-fs-rotulo-unit:   11px;
  --hf-fs-linha-total:   14px;
  --hf-fs-campo:         14px;
  --hf-fs-rotulo:        12.5px;
  --hf-fs-legenda:       12px;
  --hf-fs-cabecalho:     11.5px;
  --hf-fs-aviso:         13.5px;

  /* ---- ESPAÇAMENTOS ---- */
  --hf-pad-card:      24px;
  --hf-gap-card:      22px;
  --hf-pad-item:      14px;
  --hf-pad-campo:     10px 13px;
  --hf-altura-campo:  46px;
  --hf-altura-botao:  54px;

  /* ---- ESPESSURA DAS LINHAS ---- */
  --hf-linha:        1px;
  --hf-linha-forte:  2px;

  /* ---- FORMAS ---- */
  --hf-raio-card:   20px;
  --hf-raio-btn:    14px;
  --hf-raio-campo:  10px;
  --hf-sombra-card: 0 12px 30px rgba(16, 27, 104, 0.05);
  --hf-sombra-btn:  0 14px 30px rgba(0, 87, 255, 0.26);

  /* ---- FONTE ---- */
  --hf-fonte: "Inter", sans-serif;
}


/* ==================================================================
   1. PÁGINA DA LOJA

   IMPORTANTE: cada regra aqui começa com .wc-block-product ou
   ul.products li.product — ou seja, só vale DENTRO de um card de
   produto na listagem. Sem isso, as regras vazam para o carrinho
   e o mini-carrinho, porque as classes de preço são as mesmas.
   ================================================================== */

.wp-block-woocommerce-product-collection,
.wc-block-product-template,
ul.products {
  font-family: var(--hf-fonte);
}


/* ---- A GRADE ---- */

.wc-block-product-template,
.wp-block-post-template.products-block-post-template,
ul.products {
  display: grid !important;
  grid-template-columns: repeat(var(--hf-loja-colunas), minmax(0, 1fr)) !important;
  gap: var(--hf-loja-gap) !important;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 1100px) {
  .wc-block-product-template,
  .wp-block-post-template.products-block-post-template,
  ul.products {
    grid-template-columns: repeat(var(--hf-loja-colunas-tab), minmax(0, 1fr)) !important;
  }
}

@media (max-width: 780px) {
  .wc-block-product-template,
  .wp-block-post-template.products-block-post-template,
  ul.products {
    grid-template-columns: repeat(var(--hf-loja-colunas-cel), minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
}


/* ---- Cada produto da grade ---- */

.wc-block-product,
.wc-block-product-template li,
ul.products li.product {
  width: 100% !important;
  margin: 0 !important;
  padding: 0;
  text-align: center;
  float: none !important;
}


/* ---- Foto ---- */

.wc-block-product .wc-block-components-product-image img,
ul.products li.product img {
  width: 100%;
  border-radius: var(--hf-raio-campo);
  background: linear-gradient(135deg, #f4f8ff, #eaf2ff);
  object-fit: contain;
}


/* ---- Nome do produto ---- */

.wc-block-product .wc-block-components-product-title,
.wc-block-product .wc-block-components-product-title a,
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2,
ul.products li.product h3 {
  display: block;
  margin: 14px 0 8px !important;
  color: var(--hf-azul-escuro) !important;
  font-family: var(--hf-fonte) !important;
  font-size: var(--hf-fs-loja-titulo) !important;
  font-weight: var(--hf-peso-loja-titulo) !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em;
  text-align: center !important;
  text-decoration: none !important;
}


/* ---- Preço ---- */

.wc-block-product .wc-block-components-product-price,
.wc-block-product .wc-block-components-product-price .wc-block-components-product-price__value,
ul.products li.product .price,
ul.products li.product .price .woocommerce-Price-amount {
  color: var(--hf-azul-titulo) !important;
  font-family: var(--hf-fonte) !important;
  font-size: var(--hf-fs-loja-preco) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  text-align: center !important;
}

.wc-block-product .wc-block-components-product-price del,
.wc-block-product .wc-block-components-product-price del .wc-block-components-product-price__value,
.wc-block-product .wc-block-components-product-price__regular,
ul.products li.product .price del,
ul.products li.product .price del .woocommerce-Price-amount {
  color: var(--hf-texto-fraco) !important;
  font-size: var(--hf-fs-loja-preco-velho) !important;
  font-weight: 600 !important;
}


/* ---- Parcelamento e Pix ----
   O bloco fica centralizado no card, mas o texto alinha à
   esquerda junto com o ícone. */

.hayfar-pagamento--catalogo {
  display: inline-block !important;
  margin: 0 auto 14px !important;
  text-align: left !important;
}

.hayfar-pagamento--catalogo .hayfar-pagamento__linha {
  justify-content: flex-start !important;
  font-size: var(--hf-fs-loja-pagamento) !important;
  line-height: 1.4 !important;
}

.hayfar-pagamento--catalogo .hayfar-pagamento__marca {
  margin-top: 4px;
}

/* Ambas as marcas em verde */
.hayfar-pagamento__marca {
  background: var(--hf-verde) !important;
}


/* ---- Botão "Adicionar ao carrinho" — sem sombra ---- */

.wc-block-product .wp-block-button__link,
.wc-block-product .wc-block-components-product-button__button,
ul.products li.product .button,
ul.products li.product .add_to_cart_button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--hf-altura-loja-btn) !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border: none !important;
  border-radius: var(--hf-raio-btn) !important;
  background: linear-gradient(135deg, var(--hf-azul), var(--hf-azul-claro)) !important;
  background-image: linear-gradient(135deg, var(--hf-azul), var(--hf-azul-claro)) !important;
  color: var(--hf-branco) !important;
  font-family: var(--hf-fonte) !important;
  font-size: var(--hf-fs-botao) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-align: center;
  text-transform: none !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: transform 0.2s ease, filter 0.2s ease !important;
}

.wc-block-product .wp-block-button__link:hover,
.wc-block-product .wc-block-components-product-button__button:hover,
ul.products li.product .button:hover,
ul.products li.product .add_to_cart_button:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  color: var(--hf-branco) !important;
}

/* O link "Ver carrinho" que aparece depois de adicionar */
.added_to_cart {
  display: none !important;
}


/* ---- Loja no celular ---- */

@media (max-width: 780px) {

  .wc-block-product .wc-block-components-product-title,
  .wc-block-product .wc-block-components-product-title a,
  ul.products li.product .woocommerce-loop-product__title,
  ul.products li.product h2,
  ul.products li.product h3 {
    margin: 10px 0 6px !important;
    font-size: var(--hf-fs-loja-titulo-cel) !important;
  }

  .wc-block-product .wc-block-components-product-price,
  .wc-block-product .wc-block-components-product-price .wc-block-components-product-price__value,
  ul.products li.product .price,
  ul.products li.product .price .woocommerce-Price-amount {
    font-size: var(--hf-fs-loja-preco-cel) !important;
  }

  .wc-block-product .wc-block-components-product-price del,
  .wc-block-product .wc-block-components-product-price del .wc-block-components-product-price__value,
  ul.products li.product .price del,
  ul.products li.product .price del .woocommerce-Price-amount {
    font-size: var(--hf-fs-loja-velho-cel) !important;
  }

  .hayfar-pagamento--catalogo .hayfar-pagamento__linha {
    font-size: var(--hf-fs-loja-pagamento-cel) !important;
  }

  .wc-block-product .wp-block-button__link,
  .wc-block-product .wc-block-components-product-button__button,
  ul.products li.product .button,
  ul.products li.product .add_to_cart_button {
    min-height: 44px !important;
    padding: 0 10px !important;
    font-size: 13.5px !important;
  }

}


/* ==================================================================
   2. CARRINHO FLUTUANTE — canto inferior direito

   Isto NÃO cria um botão novo: reposiciona o bloco de
   mini-carrinho que já existe na página.
   ================================================================== */

.wp-block-woocommerce-mini-cart {
  position: fixed !important;
  right: var(--hf-flut-direita);
  bottom: var(--hf-flut-baixo);
  z-index: 999;
  margin: 0 !important;
}

.wp-block-woocommerce-mini-cart .wc-block-mini-cart__button {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 22px !important;
  border: none !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--hf-azul), var(--hf-azul-claro)) !important;
  color: var(--hf-branco) !important;
  font-family: var(--hf-fonte) !important;
  font-size: var(--hf-fs-botao) !important;
  font-weight: 800 !important;
  box-shadow: var(--hf-sombra-btn) !important;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.wp-block-woocommerce-mini-cart .wc-block-mini-cart__button:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}

.wp-block-woocommerce-mini-cart .wc-block-mini-cart__button svg,
.wp-block-woocommerce-mini-cart .wc-block-mini-cart__amount {
  color: var(--hf-branco) !important;
  fill: var(--hf-branco) !important;
}

.wp-block-woocommerce-mini-cart .wc-block-mini-cart__badge {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--hf-branco) !important;
  color: var(--hf-azul) !important;
  font-family: var(--hf-fonte);
  font-size: 12.5px;
  font-weight: 800;
  line-height: 22px;
  text-align: center;
}

@media (max-width: 780px) {
  .wp-block-woocommerce-mini-cart {
    right: 14px;
    bottom: 14px;
  }
}


/* ==================================================================
   3. GAVETA DO MINI-CARRINHO — os produtos

   A gaveta é uma janela modal: o WordPress a desenha FORA do
   corpo normal da página, então ela não herda a fonte junto com
   o resto. Por isso a primeira regra alcança todo elemento lá
   dentro com o asterisco.
   ================================================================== */

.wc-block-mini-cart__drawer,
.wc-block-mini-cart__drawer *,
.wc-block-mini-cart__drawer .components-modal__content {
  font-family: var(--hf-fonte) !important;
}

.wc-block-mini-cart__drawer .components-modal__content {
  background: var(--hf-fundo);
}

/* O título "Seu carrinho (itens: X)" — escondido */
.wc-block-mini-cart__drawer .wc-block-mini-cart__title,
.wc-block-mini-cart__drawer .wc-block-mini-cart__title-wrapper {
  display: none !important;
}

/* O total de cada linha some — o seletor de quantidade ocupa o lugar */
.wc-block-mini-cart__drawer .wc-block-cart-item__total {
  display: none !important;
}

/* A linha do produto vira duas colunas: foto e conteúdo */
.wc-block-mini-cart__drawer .wc-block-cart-items__row {
  display: flex !important;
  align-items: flex-start;
  gap: 14px;
}

.wc-block-mini-cart__drawer .wc-block-cart-item__image {
  flex: 0 0 auto;
  width: 74px;
}

.wc-block-mini-cart__drawer .wc-block-cart-item__product {
  flex: 1 1 auto;
  min-width: 0;
}

/* A quantidade e a lixeira, lado a lado */
.wc-block-mini-cart__drawer .wc-block-cart-item__quantity {
  display: flex !important;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}

/* Divisória entre itens */
.wc-block-mini-cart__drawer .wc-block-cart-items__row,
.wc-block-mini-cart__drawer .wc-block-mini-cart-item {
  border-bottom: var(--hf-linha) solid var(--hf-divisor);
  padding-bottom: var(--hf-pad-item);
  margin-bottom: var(--hf-pad-item);
}


/* ==================================================================
   4. OS PREÇOS — mesmo padrão na gaveta e no carrinho

   As duas telas usam as mesmas classes e as mesmas variáveis.
   Escrever junto garante que os números fiquem idênticos.
   ================================================================== */

/* ---- Nome do produto ---- */

.wc-block-mini-cart__drawer .wc-block-components-product-name,
.woocommerce-cart .wc-block-components-product-name {
  color: var(--hf-texto) !important;
  font-family: var(--hf-fonte) !important;
  font-size: var(--hf-fs-mini-nome) !important;
  font-weight: 600 !important;
  line-height: 1.35;
  text-decoration: none;
}


/* ---- Preço antigo riscado ---- */

.wc-block-mini-cart__drawer del,
.wc-block-mini-cart__drawer del .wc-block-components-product-price__value,
.wc-block-mini-cart__drawer .wc-block-components-product-price__regular,
.woocommerce-cart .wc-block-cart-item__prices del,
.woocommerce-cart .wc-block-cart-item__prices del .wc-block-components-product-price__value,
.woocommerce-cart .wc-block-components-product-price__regular {
  color: var(--hf-texto-fraco) !important;
  font-size: var(--hf-fs-mini-preco-velho) !important;
  font-weight: 600 !important;
}


/* ---- Preço unitário, em azul ---- */

.wc-block-mini-cart__drawer .wc-block-cart-item__prices .wc-block-components-product-price__value,
.wc-block-mini-cart__drawer .wc-block-cart-item__prices ins,
.woocommerce-cart .wc-block-cart-item__prices .wc-block-components-product-price__value,
.woocommerce-cart .wc-block-cart-item__prices ins {
  color: var(--hf-azul-titulo) !important;
  font-size: var(--hf-fs-mini-preco-atual) !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}


/* ---- Soma da linha, em preto ----
   Na gaveta ela some. Aqui no carrinho ela aparece. */

.woocommerce-cart .wc-block-cart-item__total,
.woocommerce-cart .wc-block-cart-item__total .wc-block-components-product-price,
.woocommerce-cart .wc-block-cart-item__total .wc-block-components-product-price__value {
  color: var(--hf-texto) !important;
  font-size: var(--hf-fs-mini-total-linha) !important;
  font-weight: 800 !important;
}


/* ---- O selo "Economize R$ xx" — fora nos dois lugares ----
   O resumo do pedido já mostra a economia total. */

.wc-block-mini-cart__drawer .wc-block-components-sale-badge,
.woocommerce-cart .wc-block-components-sale-badge {
  display: none !important;
}


/* ==================================================================
   5. RESUMO DO PEDIDO

   Montado pelo arquivo hayfar-minicarrinho.js. Sem ele, nada
   disto aparece.

   Aparece nos dois lugares: na gaveta (com barra de frete) e na
   página do carrinho (sem barra).
   ================================================================== */

/* ---- O título ---- */

.hf-resumo__titulo {
  margin-bottom: 10px;
  color: var(--hf-azul-escuro);
  font-family: var(--hf-fonte);
  font-size: var(--hf-fs-resumo-titulo);
  font-weight: 800;
  letter-spacing: -0.01em;
}


/* ---- O bloco ---- */

.hf-resumo {
  margin-bottom: 16px;
}


/* ---- A linha do total ---- */

.hf-resumo__linha-total {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
}

.hf-resumo__cheio {
  color: var(--hf-texto-fraco);
  font-size: var(--hf-fs-resumo-cheio);
  font-weight: 600;
  text-decoration: line-through;
}

.hf-resumo__total {
  color: var(--hf-azul-titulo);
  font-size: var(--hf-fs-resumo-total);
  font-weight: 800;
  letter-spacing: -0.02em;
}


/* ---- O selo de economia ---- */

.hf-resumo__economia {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--hf-verde-suave);
  color: var(--hf-verde);
  font-size: var(--hf-fs-resumo-economia);
  font-weight: 700;
}


/* ---- A frase de pagamento ---- */

.hf-resumo__pagamento {
  margin: 12px 0 0;
  color: var(--hf-texto-medio);
  font-size: var(--hf-fs-resumo-pagamento);
  font-weight: 500;
  line-height: 1.5;
}

.hf-resumo__pagamento strong {
  color: var(--hf-azul-escuro);
  font-weight: 800;
}


/* ---- A barra do frete grátis — só na gaveta ----

   O trilho é o fundo claro. A barra é o preenchimento verde, e
   sua largura é escrita pelo JavaScript conforme o quanto já foi
   atingido. */

.hf-frete {
  margin-top: 14px;
}

.hf-frete__trilho {
  width: 100%;
  height: var(--hf-frete-altura);
  border-radius: 999px;
  background: var(--hf-verde-suave);
  overflow: hidden;
}

.hf-frete__barra {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--hf-verde), var(--hf-verde-claro));
  transition: width 0.35s ease;
}

.hf-frete__texto {
  margin-top: 7px;
  color: var(--hf-texto-medio);
  font-size: var(--hf-fs-frete-texto);
  font-weight: 700;
}

/* Quando a barra completa, o texto fica verde */
.hf-frete--pronto .hf-frete__texto {
  color: var(--hf-verde);
  font-weight: 800;
}


/* ==================================================================
   6. O RODAPÉ DA GAVETA
   ================================================================== */

.wc-block-mini-cart__footer {
  background: var(--hf-branco);
  border-top: var(--hf-linha) solid var(--hf-borda);
}

/* O subtotal original do WooCommerce some — o resumo o substitui */
.wc-block-mini-cart__footer .wc-block-components-totals-item {
  display: none !important;
}

/* O texto "Entrega e descontos calculados na finalização" */
.wc-block-mini-cart__footer .wc-block-mini-cart__footer-actions p,
.wc-block-mini-cart__footer > p {
  display: none !important;
}


/* ---- Botão "Continuar comprando" — verde ---- */

.hf-continuar {
  display: block;
  width: 100%;
  min-height: var(--hf-altura-continuar);
  margin: 0 0 18px;
  padding: 0 20px;
  border: none;
  border-radius: var(--hf-raio-btn);
  background: linear-gradient(135deg, var(--hf-verde), var(--hf-verde-claro));
  color: var(--hf-branco);
  font-family: var(--hf-fonte);
  font-size: var(--hf-fs-botao);
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.hf-continuar:hover {
  transform: translateY(-2px);
  filter: brightness(1.07);
}


/* ---- Um botão só, com o texto trocado.
   O DESTINO continua sendo a página do carrinho. ---- */

.wc-block-mini-cart__footer-checkout {
  display: none !important;
}

.wc-block-mini-cart__footer-cart {
  display: block !important;
  width: 100%;
  min-height: var(--hf-altura-botao);
  padding: 0 !important;
  border: none !important;
  border-radius: var(--hf-raio-btn) !important;
  background: linear-gradient(135deg, var(--hf-azul), var(--hf-azul-claro)) !important;
  color: var(--hf-branco) !important;
  font-size: 0 !important;
  text-align: center;
  text-decoration: none !important;
  box-shadow: var(--hf-sombra-btn);
  transition: transform 0.2s ease, filter 0.2s ease;
}

.wc-block-mini-cart__footer-cart::after {
  content: "Finalizar compra";
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--hf-altura-botao);
  color: var(--hf-branco);
  font-family: var(--hf-fonte);
  font-size: var(--hf-fs-botao);
  font-weight: 800;
}

.wc-block-mini-cart__footer-cart:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}


/* ==================================================================
   7. BASE DAS PÁGINAS DE CARRINHO E CHECKOUT
   ================================================================== */

.woocommerce-cart,
.woocommerce-checkout {
  background: var(--hf-fundo);
  font-family: var(--hf-fonte);
  color: var(--hf-texto);
}

.woocommerce-cart .wp-block-woocommerce-cart,
.woocommerce-checkout .wp-block-woocommerce-checkout,
.woocommerce-cart .wp-block-group,
.woocommerce-checkout .wp-block-group {
  background: transparent;
  font-family: var(--hf-fonte);
}

/* O h1 aqui NAO e decorativo, e essencial.

   O bloco de cross-sell do carrinho ("Voce pode se interessar
   por...") e o mesmo bloco da loja, e os nomes dos produtos dentro
   dele tambem sao .wp-block-post-title. Sem o h1, cada nome de
   produto virava um titulo de pagina: azul, negrito e enorme.

   O titulo da pagina e h1; os produtos sao h2. */

.woocommerce-cart h1.wp-block-post-title,
.woocommerce-checkout h1.wp-block-post-title {
  color: var(--hf-azul-titulo);
  font-size: var(--hf-fs-titulo-pagina);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.025em;
}


/* ==================================================================
   8. OS CARDS BRANCOS
   ================================================================== */

.wc-block-cart__sidebar .wc-block-components-sidebar,
.wc-block-checkout__sidebar .wc-block-components-sidebar,
.wc-block-components-order-summary {
  background: var(--hf-branco);
  border: var(--hf-linha) solid var(--hf-borda);
  border-radius: var(--hf-raio-card);
  padding: var(--hf-pad-card);
  box-shadow: var(--hf-sombra-card);
}

.wc-block-checkout__main .wc-block-components-checkout-step {
  background: var(--hf-branco);
  border: var(--hf-linha) solid var(--hf-borda);
  border-radius: var(--hf-raio-card);
  padding: var(--hf-pad-card);
  margin-bottom: var(--hf-gap-card);
  box-shadow: var(--hf-sombra-card);
}

@media (min-width: 900px) {
  .wc-block-cart__sidebar,
  .wc-block-checkout__sidebar {
    position: sticky;
    top: 20px;
  }
}


/* ==================================================================
   9. TÍTULOS INTERNOS E CABEÇALHO DAS COLUNAS
   ================================================================== */

.woocommerce-cart .wc-block-components-title,
.woocommerce-checkout .wc-block-components-title,
.wc-block-components-checkout-step__title,
.wc-block-components-order-summary__title {
  color: var(--hf-azul-escuro);
  font-family: var(--hf-fonte);
  font-size: var(--hf-fs-titulo-card);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__title::before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-right: 10px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--hf-azul-cyan), var(--hf-azul));
  color: var(--hf-branco);
  font-size: 13px;
  font-weight: 800;
}

.wc-block-cart-items__header {
  color: var(--hf-texto-fraco);
  font-size: var(--hf-fs-cabecalho);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-bottom: var(--hf-linha) solid var(--hf-divisor);
}


/* ---- A coluna "TOTAL" vira "Subtotal" ----

   O font-size 0 apaga a palavra original e o ::after escreve a
   nova por cima. O \0000E9 é o "é" — acento dentro de content
   nem sempre é lido direito pelo navegador. */

.wc-block-cart-items__header-total {
  font-size: 0 !important;
}

.wc-block-cart-items__header-total::after {
  content: "Subtotal";
  color: var(--hf-texto-fraco);
  font-family: var(--hf-fonte);
  font-size: var(--hf-fs-cabecalho);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}


/* ==================================================================
   10. LINHAS DE PRODUTO NO CARRINHO
   ================================================================== */

.woocommerce-cart .wc-block-cart-items__row,
.wc-block-components-order-summary-item {
  padding: var(--hf-pad-item) 0;
  border-bottom: var(--hf-linha) solid var(--hf-divisor);
}

.wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img {
  border: var(--hf-linha) solid var(--hf-borda);
  border-radius: var(--hf-raio-campo);
  background: linear-gradient(135deg, #f4f8ff, #eaf2ff);
  padding: 4px;
  object-fit: contain;
}

.wc-block-cart-item__remove-link {
  color: var(--hf-vermelho);
  font-size: var(--hf-fs-legenda);
  font-weight: 700;
  text-decoration: none;
}

.wc-block-cart-item__remove-link:hover {
  text-decoration: underline;
}


/* ==================================================================
   11. CONTROLE DE QUANTIDADE
   ================================================================== */

.wc-block-components-quantity-selector {
  border: var(--hf-linha) solid rgba(0, 87, 255, 0.28);
  border-radius: var(--hf-raio-campo);
  background: var(--hf-azul-suave);
  overflow: hidden;
}

.wc-block-components-quantity-selector::after {
  display: none;
}

.wc-block-components-quantity-selector__button {
  color: var(--hf-azul);
  font-size: 16px;
  font-weight: 800;
  background: transparent;
  border: none;
}

.wc-block-components-quantity-selector__button:hover {
  background: rgba(0, 87, 255, 0.08);
}

.wc-block-components-quantity-selector__input {
  color: var(--hf-azul-escuro);
  font-size: var(--hf-fs-qtd);
  font-weight: 800;
  background: transparent;
}


/* ==================================================================
   12. TOTAIS (carrinho e checkout)
   ================================================================== */

.woocommerce-cart .wc-block-components-totals-item,
.woocommerce-checkout .wc-block-components-totals-item {
  color: var(--hf-texto-medio);
  font-size: var(--hf-fs-linha-total);
}

.woocommerce-cart .wc-block-components-totals-item__value,
.woocommerce-checkout .wc-block-components-totals-item__value {
  color: var(--hf-texto);
  font-weight: 700;
}

.wc-block-components-totals-wrapper {
  border-top: var(--hf-linha) solid var(--hf-divisor);
}

/* No CARRINHO, a linha "Total estimado" some — o resumo a
   substitui. No CHECKOUT ela continua, porque lá o valor já
   inclui frete e é o número final. */

.woocommerce-cart .wc-block-components-totals-footer-item {
  display: none !important;
}

.woocommerce-checkout .wc-block-components-totals-footer-item {
  padding-top: var(--hf-pad-item);
  border-top: var(--hf-linha-forte) solid var(--hf-divisor-forte);
}

.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  color: var(--hf-azul-escuro);
  font-size: var(--hf-fs-total-label);
  font-weight: 700;
}

.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  color: var(--hf-azul-titulo);
  font-size: var(--hf-fs-total);
  font-weight: 800;
}

.wc-block-components-totals-shipping .wc-block-components-totals-item__value {
  color: var(--hf-verde);
  font-weight: 800;
}


/* ==================================================================
   13. BOTÃO PRINCIPAL
   ================================================================== */

.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  width: 100%;
  min-height: var(--hf-altura-botao);
  border: none;
  border-radius: var(--hf-raio-btn);
  background: linear-gradient(135deg, var(--hf-azul), var(--hf-azul-claro));
  color: var(--hf-branco);
  font-family: var(--hf-fonte);
  font-size: var(--hf-fs-botao);
  font-weight: 800;
  box-shadow: var(--hf-sombra-btn);
  transition: transform 0.2s ease, filter 0.2s ease;
}

.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  color: var(--hf-branco);
}


/* ==================================================================
   14. BOTÕES SECUNDÁRIOS
   ================================================================== */

.wc-block-components-totals-coupon__button,
.wc-block-components-totals-coupon form button {
  min-height: var(--hf-altura-campo);
  padding: 0 22px;
  border: none;
  border-radius: var(--hf-raio-campo);
  background: var(--hf-azul);
  color: var(--hf-branco);
  font-family: var(--hf-fonte);
  font-size: var(--hf-fs-botao-sec);
  font-weight: 700;
  box-shadow: none;
  transition: filter 0.2s ease;
}

.wc-block-components-totals-coupon__button:hover,
.wc-block-components-totals-coupon form button:hover {
  filter: brightness(1.08);
  color: var(--hf-branco);
}

.wc-block-components-button.is-link {
  color: var(--hf-azul);
  font-weight: 700;
  text-decoration: none;
}

.wc-block-components-panel__button {
  color: var(--hf-azul);
  font-size: var(--hf-fs-linha-total);
  font-weight: 700;
}


/* ==================================================================
   15. CAMPOS DO FORMULÁRIO
   ================================================================== */

.wc-block-components-text-input input,
.wc-block-components-form .wc-block-components-text-input input,
.wc-block-components-totals-coupon__input input,
.wc-block-components-combobox-control input,
.wc-block-components-textarea,
.wc-block-components-select__container select {
  min-height: var(--hf-altura-campo);
  border: var(--hf-linha) solid var(--hf-borda-campo);
  border-radius: var(--hf-raio-campo);
  padding: var(--hf-pad-campo);
  background: var(--hf-branco);
  color: #333;
  font-family: var(--hf-fonte);
  font-size: var(--hf-fs-campo);
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wc-block-components-text-input input:focus,
.wc-block-components-totals-coupon__input input:focus,
.wc-block-components-combobox-control input:focus,
.wc-block-components-textarea:focus,
.wc-block-components-select__container select:focus {
  border-color: var(--hf-azul-foco);
  box-shadow: 0 0 0 3px rgba(14, 0, 255, 0.1);
  outline: none;
}

.wc-block-components-text-input label,
.wc-block-components-totals-coupon__input label,
.wc-block-components-checkout-step__description {
  color: var(--hf-texto-medio);
  font-size: var(--hf-fs-rotulo);
  font-weight: 600;
}


/* ==================================================================
   16. AVISOS E MENSAGENS
   ================================================================== */

.wc-block-components-notice-banner {
  border-radius: 12px;
  font-size: var(--hf-fs-aviso);
  font-weight: 600;
}

.wc-block-components-notice-banner.is-success {
  border-color: var(--hf-verde);
}


/* ==================================================================
   17. CELULAR — cabeçalho do carrinho
   ================================================================== */

@media (max-width: 700px) {

  .woocommerce-cart .wc-block-cart-items__header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 0 10px;
  }

  .wc-block-cart-items__header-image {
    display: none !important;
  }

  .wc-block-cart-items__header-product,
  .wc-block-cart-items__header-total {
    display: block !important;
    width: auto !important;
    padding: 0 !important;
  }

  .wc-block-cart-items__header-product {
    font-size: var(--hf-fs-cabecalho);
  }

  .wc-block-cart-items__header-total {
    text-align: right;
  }

}


/* ==================================================================
   18. REFORÇOS — sempre no fim do arquivo

   Regras iguais em força vencem pela ordem: a última manda.
   Por isso os ajustes mais teimosos ficam aqui embaixo.
   ================================================================== */


/* ---- NOME DO PRODUTO NA LOJA: NEGRITO ----

   O font-weight 800 sozinho não bastou. Quando a fonte carregada
   não tem um peso 800 de verdade, o navegador mostra a variante
   mais próxima — que pode ser bem mais fina.

   O text-stroke desenha um contorno finíssimo na própria cor da
   letra. Isso engrossa de verdade, independente da fonte.

   A espessura está em --hf-contorno-titulo, lá no painel. */

.wc-block-product .wc-block-components-product-title,
.wc-block-product .wc-block-components-product-title a,
.wc-block-product h2.wc-block-components-product-title,
.wc-block-product h3.wc-block-components-product-title,
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2,
ul.products li.product h3 {
  font-family: "Inter", var(--hf-fonte) !important;
  font-weight: 800 !important;
  -webkit-text-stroke: var(--hf-contorno-titulo) currentColor;
  paint-order: stroke fill;
}


/* ---- TEXTOS DE PAGAMENTO NA LOJA ----

   Última palavra sobre o tamanho. O functions.php também escreve
   uma regra para isto, e este bloco garante que a variável do
   painel vença. */

.hayfar-pagamento--catalogo .hayfar-pagamento__linha,
.hayfar-pagamento--catalogo .hayfar-pagamento__linha span,
.wc-block-product .hayfar-pagamento__linha,
.wc-block-product .hayfar-pagamento__linha span {
  font-size: var(--hf-fs-loja-pagamento) !important;
}

@media (max-width: 780px) {
  .hayfar-pagamento--catalogo .hayfar-pagamento__linha,
  .hayfar-pagamento--catalogo .hayfar-pagamento__linha span,
  .wc-block-product .hayfar-pagamento__linha,
  .wc-block-product .hayfar-pagamento__linha span {
    font-size: var(--hf-fs-loja-pagamento-cel) !important;
  }
}


/* ---- BOTÃO DO PRODUTO JÁ NO CARRINHO ----

   A classe hf-no-carrinho é colocada pelo JavaScript, que
   identifica o botão pelo texto "X no carrinho". */

.hf-no-carrinho,
.wc-block-product .hf-no-carrinho,
ul.products li.product .hf-no-carrinho {
  background: linear-gradient(135deg, var(--hf-verde), var(--hf-verde-claro)) !important;
  background-image: linear-gradient(135deg, var(--hf-verde), var(--hf-verde-claro)) !important;
}


/* ---- "CONTINUAR COMPRANDO" DA PÁGINA DO CARRINHO ----

   Na gaveta do mini-carrinho esse botão é um <button>. Na página
   do carrinho ele é um <a>, porque leva de volta à loja em vez de
   fechar uma janela.

   E é essa diferença que quebrava o visual: o tema aplica
   sublinhado, cor e alinhamento próprios em qualquer link, e
   essas regras venciam as do .hf-continuar. Por isso cada
   propriedade precisa ser reafirmada aqui, com !important e com
   seletores mais específicos.

   O display:flex com align-items e justify-content é o que
   centraliza o texto — num <button> isso acontece sozinho, num
   <a> não. */

a.hf-continuar,
.woocommerce-cart a.hf-continuar,
.wc-block-cart a.hf-continuar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: var(--hf-altura-continuar);
  margin: 0 0 18px !important;
  padding: 0 20px !important;
  border: none !important;
  border-radius: var(--hf-raio-btn) !important;
  background: linear-gradient(135deg, var(--hf-verde), var(--hf-verde-claro)) !important;
  color: var(--hf-branco) !important;
  font-family: var(--hf-fonte) !important;
  font-size: var(--hf-fs-botao) !important;
  font-weight: 800 !important;
  text-align: center !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: transform 0.2s ease, filter 0.2s ease;
}

a.hf-continuar:hover,
a.hf-continuar:focus,
.woocommerce-cart a.hf-continuar:hover,
.woocommerce-cart a.hf-continuar:focus {
  color: var(--hf-branco) !important;
  text-decoration: none !important;
  transform: translateY(-2px);
  filter: brightness(1.07);
}


/* ==================================================================
   19. CARRINHO VAZIO

   O conteúdo vem de um bloco HTML personalizado dentro da
   visualização "Carrinho vazio" do bloco Carrinho. Sem ele, nada
   disto aparece.

   O ícone é um SVG traçado em currentColor: ele herda a cor do
   elemento pai, então basta mudar a cor do .hf-vazio__icone para
   repintar o desenho inteiro.
   ================================================================== */

.hf-vazio {
  padding: 24px 0 12px;
  font-family: var(--hf-fonte);
  text-align: center;
}

.hf-vazio__icone {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  color: var(--hf-azul-escuro);
}

.hf-vazio__icone svg {
  width: 88px;
  height: 88px;
}

.hf-vazio__titulo {
  margin: 0 0 10px !important;
  color: var(--hf-azul-escuro) !important;
  font-family: var(--hf-fonte) !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.hf-vazio__texto {
  max-width: 420px;
  margin: 0 auto 26px !important;
  color: var(--hf-texto-medio) !important;
  font-size: 15.5px !important;
  font-weight: 500;
  line-height: 1.55;
}


/* ---- O botão azul, igual ao "Finalizar compra" ----

   Mesmo cuidado do "Continuar comprando": é um <a>, então cada
   propriedade precisa ser reafirmada, e o box-sizing evita que o
   espaçamento lateral estoure a largura. */

a.hf-botao-loja,
.woocommerce-cart a.hf-botao-loja {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  min-height: var(--hf-altura-botao);
  max-width: 100%;
  padding: 0 40px !important;
  border: none !important;
  border-radius: var(--hf-raio-btn) !important;
  background: linear-gradient(135deg, var(--hf-azul), var(--hf-azul-claro)) !important;
  color: var(--hf-branco) !important;
  font-family: var(--hf-fonte) !important;
  font-size: var(--hf-fs-botao) !important;
  font-weight: 800 !important;
  text-align: center !important;
  text-decoration: none !important;
  box-shadow: var(--hf-sombra-btn);
  transition: transform 0.2s ease, filter 0.2s ease;
}

a.hf-botao-loja:hover,
a.hf-botao-loja:focus,
.woocommerce-cart a.hf-botao-loja:hover,
.woocommerce-cart a.hf-botao-loja:focus {
  color: var(--hf-branco) !important;
  text-decoration: none !important;
  transform: translateY(-2px);
  filter: brightness(1.05);
}


/* ---- Carrinho vazio no celular ---- */

@media (max-width: 600px) {

  .hf-vazio__icone svg {
    width: 72px;
    height: 72px;
  }

  .hf-vazio__titulo {
    font-size: 21px !important;
  }

  .hf-vazio__texto {
    font-size: 15px !important;
  }

  /* Em tela estreita o botão ocupa a largura toda */
  a.hf-botao-loja,
  .woocommerce-cart a.hf-botao-loja {
    display: flex !important;
    width: 100%;
    padding: 0 20px !important;
  }

}


/* ==================================================================
   20. BLOCO ANTIGO DE PRODUTOS (wc-block-grid)

   O WooCommerce tem dois blocos de listagem de produtos:

   - "Coleção de produtos", o novo, que gera .wc-block-product e é
     o que a loja usa. Já está coberto lá na seção 1.
   - "Produtos mais recentes", o antigo, que gera .wc-block-grid.
     É o que vem de fábrica no carrinho vazio.

   As classes não se parecem em nada, então nenhuma regra da
   seção 1 alcança o antigo. Este bloco repete os mesmos valores
   usando as classes dele, para que os dois fiquem idênticos.

   As variáveis são as MESMAS da loja — mudou no painel, muda nos
   dois lugares.
   ================================================================== */

.wc-block-grid {
  font-family: var(--hf-fonte);
}


/* ---- A grade ---- */

.wc-block-grid__products {
  display: grid !important;
  grid-template-columns: repeat(var(--hf-loja-colunas), minmax(0, 1fr)) !important;
  gap: var(--hf-loja-gap) !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

@media (max-width: 1100px) {
  .wc-block-grid__products {
    grid-template-columns: repeat(var(--hf-loja-colunas-tab), minmax(0, 1fr)) !important;
  }
}

@media (max-width: 780px) {
  .wc-block-grid__products {
    grid-template-columns: repeat(var(--hf-loja-colunas-cel), minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
}

.wc-block-grid__product {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center;
  float: none !important;
}


/* ---- Foto ---- */

.wc-block-grid__product-image img {
  width: 100%;
  border-radius: var(--hf-raio-campo);
  background: linear-gradient(135deg, #f4f8ff, #eaf2ff);
  object-fit: contain;
}


/* ---- Nome do produto ----

   Sem negrito e sem contorno: é assim que o título aparece na
   loja. O sublinhado precisa ser removido explicitamente, porque
   aqui o título é um link solto e o tema sublinha links. */

.wc-block-grid__product-title,
.wc-block-grid__product-title a,
.wc-block-grid__product-link,
.wc-block-grid__product-link a {
  display: block;
  margin: 14px 0 8px !important;
  color: var(--hf-azul-escuro) !important;
  font-family: "Inter", var(--hf-fonte) !important;
  font-size: var(--hf-fs-loja-titulo) !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em;
  text-align: center !important;
  text-decoration: none !important;
  -webkit-text-stroke: 0 !important;
}


/* ---- Preço ---- */

.wc-block-grid__product-price,
.wc-block-grid__product-price .woocommerce-Price-amount,
.wc-block-grid__product-price ins,
.wc-block-grid__product-price ins .woocommerce-Price-amount {
  color: var(--hf-azul-titulo) !important;
  font-family: var(--hf-fonte) !important;
  font-size: var(--hf-fs-loja-preco) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  text-align: center !important;
  text-decoration: none !important;
}

.wc-block-grid__product-price del,
.wc-block-grid__product-price del .woocommerce-Price-amount,
.wc-block-grid__product-price .wc-block-grid__product-price__regular {
  color: var(--hf-texto-fraco) !important;
  font-size: var(--hf-fs-loja-preco-velho) !important;
  font-weight: 600 !important;
}


/* ---- O selo de oferta ----

   Caixa branca com borda fina, igual ao da loja. */

.wc-block-grid__product-onsale {
  padding: 8px 16px !important;
  border: var(--hf-linha) solid var(--hf-borda) !important;
  border-radius: 8px !important;
  background: var(--hf-branco) !important;
  color: var(--hf-texto) !important;
  font-family: var(--hf-fonte) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}


/* ---- Botão "Adicionar ao carrinho" ---- */

.wc-block-grid__product-add-to-cart .wp-block-button__link,
.wc-block-grid__product-add-to-cart .add_to_cart_button,
.wc-block-grid__product .wp-block-button__link,
.wc-block-grid__product .add_to_cart_button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: var(--hf-altura-loja-btn) !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border: none !important;
  border-radius: var(--hf-raio-btn) !important;
  background: linear-gradient(135deg, var(--hf-azul), var(--hf-azul-claro)) !important;
  background-image: linear-gradient(135deg, var(--hf-azul), var(--hf-azul-claro)) !important;
  color: var(--hf-branco) !important;
  font-family: var(--hf-fonte) !important;
  font-size: var(--hf-fs-botao) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-transform: none !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: transform 0.2s ease, filter 0.2s ease !important;
}

.wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
.wc-block-grid__product-add-to-cart .add_to_cart_button:hover,
.wc-block-grid__product .wp-block-button__link:hover,
.wc-block-grid__product .add_to_cart_button:hover {
  color: var(--hf-branco) !important;
  transform: translateY(-2px);
  filter: brightness(1.05);
}


/* ---- Bloco antigo no celular ---- */

@media (max-width: 780px) {

  .wc-block-grid__product-title,
  .wc-block-grid__product-title a,
  .wc-block-grid__product-link a {
    margin: 10px 0 6px !important;
    font-size: var(--hf-fs-loja-titulo-cel) !important;
  }

  .wc-block-grid__product-price,
  .wc-block-grid__product-price .woocommerce-Price-amount {
    font-size: var(--hf-fs-loja-preco-cel) !important;
  }

  .wc-block-grid__product-price del,
  .wc-block-grid__product-price del .woocommerce-Price-amount {
    font-size: var(--hf-fs-loja-velho-cel) !important;
  }

  .wc-block-grid__product-add-to-cart .wp-block-button__link,
  .wc-block-grid__product-add-to-cart .add_to_cart_button {
    min-height: 44px !important;
    padding: 0 10px !important;
    font-size: 13.5px !important;
  }

}


/* ==================================================================
   21. O BOTÃO DO CARRINHO VAZIO

   É um bloco de botão comum do WordPress, colocado à mão dentro da
   visualização "Carrinho vazio". Sem isto ele fica preto, no padrão
   do Twenty Twenty-Five.

   O seletor é preso ao bloco do carrinho vazio de propósito: assim
   nenhum outro botão do site é afetado por engano.
   ================================================================== */

.wp-block-woocommerce-empty-cart-block .wp-block-button__link,
.woocommerce-cart .wc-block-cart__empty-cart__title ~ * .wp-block-button__link,
.woocommerce-cart .is-empty ~ * .wp-block-button__link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  min-height: var(--hf-altura-botao) !important;
  max-width: 100%;
  padding: 0 40px !important;
  border: none !important;
  border-radius: var(--hf-raio-btn) !important;
  background: linear-gradient(135deg, var(--hf-azul), var(--hf-azul-claro)) !important;
  background-image: linear-gradient(135deg, var(--hf-azul), var(--hf-azul-claro)) !important;
  background-color: transparent !important;
  color: var(--hf-branco) !important;
  font-family: var(--hf-fonte) !important;
  font-size: var(--hf-fs-botao) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-decoration: none !important;
  box-shadow: var(--hf-sombra-btn) !important;
  transition: transform 0.2s ease, filter 0.2s ease !important;
}

.wp-block-woocommerce-empty-cart-block .wp-block-button__link:hover,
.wp-block-woocommerce-empty-cart-block .wp-block-button__link:focus {
  color: var(--hf-branco) !important;
  text-decoration: none !important;
  transform: translateY(-2px);
  filter: brightness(1.05);
}


/* ---- No celular, largura total ---- */

@media (max-width: 600px) {
  .wp-block-woocommerce-empty-cart-block .wp-block-button__link {
    display: flex !important;
    width: 100%;
    padding: 0 20px !important;
  }
}


/* ==================================================================
   22. O BOTÃO DO MINI-CARRINHO VAZIO

   Mesma situação da seção 21, agora dentro da gaveta.

   Aqui ele fica em largura total, e não centralizado com folga dos
   lados: é o padrão dos outros dois botões daquele painel, o
   "Continuar comprando" e o "Finalizar compra".

   O seletor é preso à gaveta, então nenhum botão de bloco no resto
   do site é afetado.
   ================================================================== */

.wc-block-mini-cart__drawer .wp-block-button__link,
.wc-block-mini-cart__drawer .wc-block-mini-cart__shopping-button,
.wc-block-mini-cart__drawer .wc-block-mini-cart__shopping-button a,
.wc-block-mini-cart__drawer .wc-block-mini-cart__empty-cart-wrapper a,
.wc-block-mini-cart__drawer .wc-block-mini-cart__empty-cart-wrapper button,
.wc-block-mini-cart__shopping-button,
.wc-block-mini-cart__shopping-button a,
.wp-block-woocommerce-empty-mini-cart-contents-block .wp-block-button__link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: var(--hf-altura-botao) !important;
  margin: 0 !important;
  padding: 0 20px !important;
  border: none !important;
  border-radius: var(--hf-raio-btn) !important;
  background: linear-gradient(135deg, var(--hf-azul), var(--hf-azul-claro)) !important;
  background-image: linear-gradient(135deg, var(--hf-azul), var(--hf-azul-claro)) !important;
  background-color: transparent !important;
  color: var(--hf-branco) !important;
  font-family: var(--hf-fonte) !important;
  font-size: var(--hf-fs-botao) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-decoration: none !important;
  box-shadow: var(--hf-sombra-btn) !important;
  transition: transform 0.2s ease, filter 0.2s ease !important;
}

.wc-block-mini-cart__drawer .wp-block-button__link:hover,
.wc-block-mini-cart__drawer .wp-block-button__link:focus,
.wc-block-mini-cart__drawer .wc-block-mini-cart__shopping-button:hover,
.wc-block-mini-cart__drawer .wc-block-mini-cart__shopping-button:focus,
.wc-block-mini-cart__drawer .wc-block-mini-cart__shopping-button a:hover,
.wc-block-mini-cart__drawer .wc-block-mini-cart__empty-cart-wrapper a:hover {
  color: var(--hf-branco) !important;
  text-decoration: none !important;
  transform: translateY(-2px);
  filter: brightness(1.05);
}


/* O bloco do botão não pode ficar preso à largura padrão do tema */

.wc-block-mini-cart__drawer .wp-block-button,
.wc-block-mini-cart__drawer .wp-block-buttons {
  width: 100% !important;
  max-width: 100% !important;
}


/* ==================================================================
   23. PREÇO PROMOCIONAL NO CELULAR

   O problema: num produto em promoção o preço com desconto saía
   um pouco maior que o preço de um produto sem promoção. Só no
   celular.

   A causa é que o preço promocional vem embrulhado em um elemento
   a mais — um <ins>, ou um <span> com classe própria — e as regras
   da seção 1 não alcançavam esse invólucro. Ele então ficava com um
   tamanho herdado de outro lugar.

   A solução aqui não depende de saber qual é o elemento: o
   asterisco alcança TUDO que estiver dentro do bloco de preço e
   iguala o tamanho. A exceção é o riscado, declarado logo abaixo,
   que continua menor.

   Fica no fim do arquivo de propósito — assim vence as regras da
   seção 1, que têm a mesma força.
   ================================================================== */

@media (max-width: 780px) {

  /* Tudo dentro do preço, no mesmo tamanho */
  .wc-block-product .wc-block-components-product-price,
  .wc-block-product .wc-block-components-product-price *,
  .wc-block-grid__product-price,
  .wc-block-grid__product-price *,
  ul.products li.product .price,
  ul.products li.product .price * {
    font-size: var(--hf-fs-loja-preco-cel) !important;
    line-height: 1.2 !important;
  }

  /* A exceção: o preço antigo riscado continua menor */
  .wc-block-product .wc-block-components-product-price del,
  .wc-block-product .wc-block-components-product-price del *,
  .wc-block-grid__product-price del,
  .wc-block-grid__product-price del *,
  ul.products li.product .price del,
  ul.products li.product .price del * {
    font-size: var(--hf-fs-loja-velho-cel) !important;
  }

}


/* ==================================================================
   24. PREÇO PROMOCIONAL NO CELULAR — SEGUNDA VIA

   A seção 23 iguala tudo que está DENTRO do contêiner de preço.
   Se o preço com desconto estiver fora dele — o que acontece em
   algumas versões do WooCommerce —, aquela regra não alcança.

   Aqui a mira é outra: o elemento <ins>, que é onde o WooCommerce
   coloca o preço com desconto, procurado em qualquer lugar dentro
   do card do produto. Não depende de saber o nome do contêiner.

   As duas seções fazem a mesma coisa por caminhos diferentes. É
   redundante de propósito: uma das duas vai pegar.
   ================================================================== */

@media (max-width: 780px) {

  .wc-block-product ins,
  .wc-block-product ins *,
  .wc-block-grid__product ins,
  .wc-block-grid__product ins *,
  ul.products li.product ins,
  ul.products li.product ins * {
    font-size: var(--hf-fs-loja-preco-cel) !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
  }

  /* E o riscado, de novo, para o caso de estar dentro de um <ins>
     por alguma esquisitice de marcação */
  .wc-block-product ins del,
  .wc-block-product ins del *,
  .wc-block-grid__product ins del,
  ul.products li.product ins del {
    font-size: var(--hf-fs-loja-velho-cel) !important;
  }

}


/* ==================================================================
   25. O PREÇO DO CROSS-SELL

   O bloco "Você pode se interessar por..." usa o mesmo bloco da
   loja, então o preço dele herda o tamanho grande do catálogo —
   26px, contra 18px do preço dos itens do carrinho logo acima.
   Dois azuis de tamanhos diferentes na mesma tela.

   Aqui ele passa a usar a MESMA variável do carrinho. Mudou no
   painel, muda nos dois lugares juntos.

   Sobre a largura dos seletores: como o alvo é justamente igualar
   ao preço do carrinho, se alguma destas regras encostar por
   acidente num item do carrinho, o valor aplicado é o mesmo que
   ele já tinha. Sem efeito colateral possível.

   Fica no fim do arquivo de propósito: precisa vencer as regras
   da seção 1 e as do celular, nas seções 23 e 24.
   ================================================================== */

/* ---- O PREÇO ----

   O valor fica dentro de um <bdi>, um elemento que o WooCommerce
   usa para proteger a formatação do número.

   Alcançar não era o problema — o asterisco já pegava o bdi. O
   problema era FORÇA: a seção 1 tem uma regra com três classes
   (.wc-block-product .wc-block-components-product-price
   .wc-block-components-product-price__value) e ela vencia.

   Por isso aqui os seletores também têm três classes ou mais, e
   o bdi é nomeado. Empate de força é decidido pela ordem, e como
   esta seção está no fim do arquivo, ela ganha. */

.woocommerce-cart .wc-block-product .wc-block-components-product-price,
.woocommerce-cart .wc-block-product .wc-block-components-product-price *,
.woocommerce-cart .wc-block-product .wc-block-components-product-price bdi,
.woocommerce-cart .wc-block-product .wc-block-components-product-price .wc-block-components-product-price__value,
.woocommerce-cart .wc-block-product .wc-block-components-product-price .wc-block-components-product-price__value bdi,
.woocommerce-cart .wc-block-product .wc-block-components-product-price .woocommerce-Price-amount,
.woocommerce-cart .wc-block-product .wc-block-components-product-price .woocommerce-Price-currencySymbol,
.woocommerce-cart .wc-block-components-product-price,
.woocommerce-cart .wc-block-components-product-price *,
.woocommerce-cart .wc-block-components-product-price bdi,
.woocommerce-cart .wc-block-components-product-price .wc-block-components-product-price__value,
.woocommerce-cart .wc-block-components-product-price .wc-block-components-product-price__value bdi,
.woocommerce-cart .wc-block-components-product-price .woocommerce-Price-amount,
.woocommerce-cart .wc-block-components-product-price .woocommerce-Price-currencySymbol,
.woocommerce-cart .wc-block-components-product-price ins,
.woocommerce-cart .wc-block-components-product-price ins *,
.woocommerce-cart .wc-block-components-product-price ins bdi,
.woocommerce-cart .wc-block-grid__product-price,
.woocommerce-cart .wc-block-grid__product-price *,
.woocommerce-cart .wc-block-grid__product-price bdi,
.woocommerce-cart .wc-block-grid__product-price .woocommerce-Price-amount,
.woocommerce-cart .wc-block-grid__product-price .woocommerce-Price-currencySymbol,
.woocommerce-cart .wc-block-grid__product-price ins,
.woocommerce-cart .wc-block-grid__product-price ins * {
  font-size: var(--hf-fs-mini-preco-atual) !important;
  line-height: 1.3 !important;
}


/* O riscado acompanha, também no tamanho do carrinho */

.woocommerce-cart .wc-block-product .wc-block-components-product-price del,
.woocommerce-cart .wc-block-product .wc-block-components-product-price del *,
.woocommerce-cart .wc-block-product .wc-block-components-product-price del bdi,
.woocommerce-cart .wc-block-components-product-price del,
.woocommerce-cart .wc-block-components-product-price del *,
.woocommerce-cart .wc-block-components-product-price del bdi,
.woocommerce-cart .wc-block-components-product-price del .woocommerce-Price-amount,
.woocommerce-cart .wc-block-grid__product-price del,
.woocommerce-cart .wc-block-grid__product-price del *,
.woocommerce-cart .wc-block-grid__product-price del bdi {
  font-size: var(--hf-fs-mini-preco-velho) !important;
}


/* No celular vale o mesmo — as seções 23 e 24 mexem no tamanho do
   preço lá, e estas regras são mais específicas que as de lá. */

@media (max-width: 780px) {

  .woocommerce-cart .wc-block-product .wc-block-components-product-price,
  .woocommerce-cart .wc-block-product .wc-block-components-product-price *,
  .woocommerce-cart .wc-block-components-product-price,
  .woocommerce-cart .wc-block-components-product-price *,
  .woocommerce-cart .wc-block-components-product-price ins,
  .woocommerce-cart .wc-block-components-product-price ins * {
    font-size: var(--hf-fs-mini-preco-atual) !important;
  }

  .woocommerce-cart .wc-block-product .wc-block-components-product-price del,
  .woocommerce-cart .wc-block-product .wc-block-components-product-price del *,
  .woocommerce-cart .wc-block-components-product-price del,
  .woocommerce-cart .wc-block-components-product-price del * {
    font-size: var(--hf-fs-mini-preco-velho) !important;
  }

}


/* ==================================================================
   26. O BOTÃO DO CROSS-SELL

   Na loja o card ocupa um quarto da largura. No carrinho, o
   cross-sell divide o espaço com a coluna do resumo, e a coluna
   fica bem mais estreita — o "Adicionar ao carrinho" não cabia e
   quebrava em duas linhas.

   Três ajustes juntos resolvem: letra menor, menos espaçamento
   lateral e a trava de quebra de linha.

   O nowrap é o que garante a linha única. Ele obriga o texto a
   ficar inteiro na mesma linha, custe o que custar — por isso vem
   acompanhado da letra menor, senão o texto vazaria para fora do
   botão em vez de quebrar.

   Fica no fim do arquivo para vencer as regras da seção 1, que
   têm a mesma força.
   ================================================================== */

.woocommerce-cart .wc-block-components-product-button__button,
.woocommerce-cart .wc-block-product .wc-block-components-product-button__button,
.woocommerce-cart .wc-block-components-product-button .wp-block-button__link {
  padding: 0 10px !important;
  font-size: var(--hf-fs-botao-cross) !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}


/* ==================================================================
   27. O CONTORNO DE FOCO NO CARRINHO

   O Twenty Twenty-Five desenha um contorno preto de 2px em volta de
   qualquer elemento que receba foco. No carrinho isso aparece ao
   clicar nos itens, nos botões de quantidade e na lixeira.

   Aqui ele fica TRANSPARENTE, e não removido.

   A diferença importa: com outline:none o contorno deixa de
   existir, e quem navega por teclado fica sem saber onde está.
   Com a cor transparente ele continua lá — invisível ao olho, mas
   presente para o navegador e para leitores de tela.

   ------------------------------------------------------------------
   HISTÓRICO — LEIA ANTES DE MEXER

   Já existiu aqui uma seção parecida que usava seletores com
   asterisco (.wc-block-cart-items *). Ela foi acusada de travar o
   botão do cross-sell no celular e removida.

   Depois descobriu-se que o culpado era outro: o plugin de cálculo
   de frete, que injeta HTML dentro do carrinho em blocos e disputa
   a ordem de carregamento com o WooCommerce.

   Mesmo assim, esta versão evita o asterisco de propósito. Cada
   elemento é nomeado. Custa mais linhas e não alcança nada por
   engano.
   ------------------------------------------------------------------
   ================================================================== */

/* ---- Sem o brilho cinza do toque no celular ---- */

.wc-block-cart-item__wrap,
.wc-block-cart-item__remove-link,
.wc-block-components-quantity-selector,
.wc-block-components-quantity-selector__input,
.wc-block-components-quantity-selector__button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  -webkit-tap-highlight-color: transparent;
}


/* ---- O contorno vira transparente ---- */

.woocommerce-cart .wc-block-cart-items:focus,
.woocommerce-cart .wc-block-cart-items:focus-within,
.woocommerce-cart .wc-block-cart-items:focus-visible,
.woocommerce-cart table.wc-block-cart-items:focus,
.woocommerce-cart table.wc-block-cart-items:focus-within,
.woocommerce-cart .wc-block-cart-items__header:focus,
.woocommerce-cart .wc-block-cart__main:focus,
.woocommerce-cart .wc-block-cart__main:focus-within,
.woocommerce-cart .wc-block-cart__sidebar:focus,
.woocommerce-cart .wc-block-cart__sidebar:focus-within,
.woocommerce-cart .wp-block-woocommerce-cart-items-block:focus,
.woocommerce-cart .wp-block-woocommerce-cart-items-block:focus-within,
.woocommerce-cart .wp-block-woocommerce-cart-line-items-block:focus,
.woocommerce-cart .wp-block-woocommerce-cart-line-items-block:focus-within,
.woocommerce-cart .wc-block-cart:focus,
.woocommerce-cart .wc-block-cart:focus-within,
.woocommerce-cart .wc-block-cart-items__row:focus,
.woocommerce-cart .wc-block-cart-items__row:focus-within,
.woocommerce-cart .wc-block-cart-items__row:focus-visible,
.woocommerce-cart .wc-block-cart-item__wrap:focus,
.woocommerce-cart .wc-block-cart-item__wrap:focus-within,
.woocommerce-cart .wc-block-cart-item__wrap:focus-visible,
.woocommerce-cart .wc-block-cart-item__remove-link:focus,
.woocommerce-cart .wc-block-cart-item__remove-link:focus-visible,
.woocommerce-cart .wc-block-cart-item__image:focus,
.woocommerce-cart .wc-block-cart-item__image a:focus,
.woocommerce-cart .wc-block-components-product-name:focus,
.wc-block-components-quantity-selector:focus,
.wc-block-components-quantity-selector:focus-within,
.wc-block-components-quantity-selector:focus-visible,
.wc-block-components-quantity-selector__input:focus,
.wc-block-components-quantity-selector__input:focus-visible,
.wc-block-components-quantity-selector__button:focus,
.wc-block-components-quantity-selector__button:focus-visible,
.wc-block-components-quantity-selector__button:active,
.wc-block-cart__submit-button:focus,
.wc-block-cart__submit-button:focus-visible,
.wc-block-components-checkout-place-order-button:focus,
.wc-block-components-checkout-place-order-button:focus-visible,
.wc-block-components-totals-coupon__button:focus,
.wc-block-components-panel__button:focus,
a.hf-continuar:focus,
a.hf-continuar:focus-visible {
  outline-color: transparent !important;
  box-shadow: none !important;
}


/* ---- A borda do seletor de quantidade não muda ao focar ---- */

.wc-block-components-quantity-selector:focus,
.wc-block-components-quantity-selector:focus-within {
  border-color: rgba(0, 87, 255, 0.28) !important;
}


/* ==================================================================
   28. O RESUMO RECOLHIDO DO TOPO, NO CELULAR

   No celular o WooCommerce mostra o resumo do pedido DUAS vezes:
   recolhido no topo, e aberto no fim da página. É o mesmo bloco,
   com as mesmas classes — o que muda é o estado.

   Como as classes são idênticas, não dá para separá-los pelo nome.
   O que os distingue é o atributo aria-expanded no cabeçalho:
   "false" no de cima, que está fechado, e "true" no de baixo.

   O seletor abaixo usa exatamente isso.

   ------------------------------------------------------------------
   O EFEITO COLATERAL QUE VOCÊ PRECISA CONHECER

   Se a pessoa ABRIR o painel de baixo e depois FECHAR, ele passa a
   ter aria-expanded="false" também — e some junto.

   Não achei jeito de contornar sem saber o nome do invólucro de
   cada um. Se isso incomodar, o caminho é inspecionar o elemento
   que envolve o painel do topo e trocar o seletor por ele.
   ------------------------------------------------------------------
   ================================================================== */

@media (max-width: 782px) {

  .woocommerce-checkout .wc-block-components-checkout-order-summary__title[aria-expanded="false"] {
    display: none !important;
  }

}

/* ==================================================================
   29. O SELO "OFERTA"

   Antes: caixa branca com borda cinza e letra em 13px.
   Agora: verde-claro, sem borda, menor — no mesmo padrão do selo
   "Você economizou" do resumo do pedido.

   As cores são as MESMAS variáveis daquele selo, então se um dia
   você trocar o verde no painel, os dois mudam juntos.
   ================================================================== */

.wc-block-product .wc-block-components-product-sale-badge,
.wc-block-grid__product-onsale,
ul.products li.product .onsale,
ul.products li.product span.onsale {
  padding: 5px 12px !important;
  border: none !important;
  border-radius: 999px !important;
  background: var(--hf-verde-suave) !important;
  color: var(--hf-verde) !important;
  font-family: var(--hf-fonte) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  box-shadow: none !important;
}

@media (max-width: 780px) {
  .wc-block-product .wc-block-components-product-sale-badge,
  .wc-block-grid__product-onsale,
  ul.products li.product .onsale {
padding: 4px 9px !important;
    font-size: 10.5px !important;
  }
}