/* ==========================================================================
   Onda 3 — Homepage
   Estilos para o Hero, Trust Badges (beneficios) e Grid de Produtos na Home.
   Consome tokens do design-system.css.
   ========================================================================== */

/* ---------- Hero Section (Gutenberg Columns / Group) ---------- */
.home .wp-block-columns.is-layout-flex,
.home .wp-block-group.has-background {
  /* Garante fonte padrao do design system */
  font-family: var(--lobo-font-family);
}

/* Refinar titulos dentro do Hero (ex. "O capacete certo para cada role") */
.home .wp-block-column h1,
.home .wp-block-column h2,
.home .wp-block-column h3 {
  font-family: var(--lobo-font-family);
  font-weight: var(--lobo-font-bold);
  line-height: var(--lobo-leading-tight);
}

/* Ajuste de destaques no Hero (ex. palavra em amarela/dourada -> Secundario Lobo) */
.home .wp-block-column h1 mark,
.home .wp-block-column h2 mark,
.home .wp-block-column span.has-inline-color {
  color: var(--lobo-secondary) !important;
  background: transparent !important;
}

/* Botoes no Hero gerados pelo Gutenberg */
.home .wp-block-buttons .wp-block-button__link {
  font-family: var(--lobo-font-family);
  font-weight: var(--lobo-font-semibold);
  border-radius: var(--lobo-radius-md);
  transition: background var(--lobo-transition-base), color var(--lobo-transition-base);
  box-shadow: none !important;
}

/* Botao amarelo/laranja original do WP deve virar o nosso estilo customizado (Secondary/Primary) */
.home .wp-block-button.is-style-fill .wp-block-button__link,
.home .wp-block-button__link:not(.has-background) {
  background: var(--lobo-secondary);
  color: #000000;
}

.home .wp-block-button.is-style-fill .wp-block-button__link:hover,
.home .wp-block-button__link:not(.has-background):hover {
  background: var(--lobo-primary);
  color: var(--lobo-secondary);
}

/* Botao Outline secundario no Hero */
.home .wp-block-button.is-style-outline .wp-block-button__link {
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
}

.home .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: #ffffff !important;
}

/* ---------- Trust Badges (Cards de Beneficios) ---------- */
.home .wp-block-column.has-luminous-vivid-orange-color, /* Assumindo classes padrao de cor */
.home .wp-block-columns .wp-block-column {
  border-radius: var(--lobo-radius-lg);
}

/* Container que engloba os 4 badges */
.wp-block-columns.has-4-columns {
  gap: var(--lobo-space-4);
}

/* Estilizando o card de Trust Badge propriamente dito */
.wp-block-columns.has-4-columns > .wp-block-column {
  background: var(--lobo-bg);
  border: 1px solid var(--lobo-border);
  padding: var(--lobo-space-5);
  text-align: center;
  transition: border-color var(--lobo-transition-fast), transform var(--lobo-transition-fast);
  box-shadow: var(--lobo-shadow-sm);
}

/* Hover com deslocamento só em ponteiros precisos (desktop). */
@media (hover: hover) and (pointer: fine) {
  .wp-block-columns.has-4-columns > .wp-block-column:hover {
    border-color: var(--lobo-secondary);
    transform: translateY(-2px);
    box-shadow: var(--lobo-shadow-md);
  }
}

/* Icones e titulos nos Trust Badges */
.wp-block-columns.has-4-columns > .wp-block-column p {
  font-family: var(--lobo-font-family);
}

.wp-block-columns.has-4-columns > .wp-block-column strong {
  display: block;
  color: var(--lobo-primary);
  font-size: var(--lobo-text-base);
  margin-bottom: var(--lobo-space-2);
}

/* ---------- Woo Grid na Home ---------- */
/* Titulo Catálogo */
.home h2.has-text-align-center {
  font-family: var(--lobo-font-family);
  font-weight: var(--lobo-font-bold);
  text-transform: uppercase;
  color: var(--lobo-primary);
  margin-bottom: var(--lobo-space-6);
}

/* Filtros (Sidebar HUSKY) */
.home .woof_container {
  font-family: var(--lobo-font-family);
}

.home .woof_container h4 {
  font-weight: var(--lobo-font-semibold);
  text-transform: uppercase;
  font-size: var(--lobo-text-sm);
  margin-bottom: var(--lobo-space-3);
}

/* WooCommerce Products Grid */
.home ul.products.columns-4 li.product,
.home ul.products li.product {
  background: var(--lobo-bg);
  border: 1px solid var(--lobo-border);
  border-radius: var(--lobo-radius-md);
  padding: var(--lobo-space-3) !important;
  transition: transform var(--lobo-transition-base), box-shadow var(--lobo-transition-base);
}

/* Hover com deslocamento só em ponteiros precisos (desktop). */
@media (hover: hover) and (pointer: fine) {
  .home ul.products li.product:hover {
    transform: translateY(-4px);
    box-shadow: var(--lobo-shadow-lg);
  }
}

/* ---------- Faixa de vantagens ([lobo_vantagens], abaixo do hero) ---------- */
.lobo-vantagens {
  list-style: none;
  margin: var(--lobo-space-6) 0;
  padding: var(--lobo-space-3) var(--lobo-space-4);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--lobo-space-3);
  background: #111111;
  border-radius: var(--lobo-radius-md);
}

.lobo-vantagem {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: var(--lobo-text-xs);
  line-height: 1.3;
  color: #d4d4d4;
}

.lobo-vantagem a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}

.lobo-vantagem svg {
  flex: none;
  width: 28px;
  height: 28px;
  color: var(--lobo-secondary);
}

.lobo-vantagem strong {
  display: block;
  color: #ffffff;
  font-size: var(--lobo-text-sm);
}

@media (max-width: 860px) {
  .lobo-vantagens {
    grid-template-columns: repeat(2, 1fr);
  }

  .lobo-vantagem:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 480px) {
  .lobo-vantagens {
    grid-template-columns: 1fr;
  }
}

/* Na home a grade fica dentro do conteúdo da página, onde o
   a11y-performance.css sublinha todo link (`.entry-content a:not()...`,
   especificidade 0,4,1); o card não é texto corrido. Seletor com 0,4,2 para
   vencer. */
.home .entry-content ul.products li.product a {
  text-decoration: none;
}

.home ul.products li.product h2.woocommerce-loop-product__title {
  font-family: var(--lobo-font-family);
  font-size: var(--lobo-text-base);
  font-weight: var(--lobo-font-semibold);
  margin-bottom: var(--lobo-space-2);
  color: var(--lobo-primary);
}

.home ul.products li.product .price {
  color: var(--lobo-text);
  font-family: var(--lobo-font-family);
  font-size: var(--lobo-text-lg);
  font-weight: var(--lobo-font-bold);
}

/* Sem o verde: em promoção o preço novo continua sendo o preço do produto, e
   o verde disputava com o vermelho do PIX logo abaixo. Esta regra tem
   especificidade maior que a do `plp.css` (0,5,3 contra 0,4,3) e continuava
   pintando o card da home de verde depois da correção lá (30/08/2026). */
.home ul.products li.product .price ins {
  color: var(--lobo-primary);
  text-decoration: none;
}

.home ul.products li.product .price del {
  color: var(--lobo-text-muted);
  font-size: var(--lobo-text-sm);
  font-weight: var(--lobo-font-regular);
  margin-right: var(--lobo-space-2);
}

/* Botao de Adicionar (Ver opcoes) */
.home ul.products li.product .button {
  display: block;
  text-align: center;
  background: var(--lobo-secondary);
  color: #000000;
  font-family: var(--lobo-font-family);
  font-weight: var(--lobo-font-semibold);
  border-radius: var(--lobo-radius-sm);
  margin-top: var(--lobo-space-4);
}

.home ul.products li.product .button:hover {
  background: var(--lobo-primary);
  color: var(--lobo-secondary);
}

/* ---------- H02: faixa de categorias ----------
   Entre as vantagens e o catálogo. Quatro cards, as mesmas categorias do menu,
   para navegação e conteúdo contarem a mesma história. */
.lobo-categorias {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--lobo-space-4);
  list-style: none;
  margin: var(--lobo-space-8) 0;
  padding: 0;
}

.lobo-categorias > li {
  margin: 0;
}

.lobo-categoria a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--lobo-space-2);
  height: 100%;
  padding: var(--lobo-space-4);
  background: var(--lobo-bg);
  border: 1px solid var(--lobo-border);
  border-radius: var(--lobo-radius-md);
  color: var(--lobo-text);
  text-decoration: none;
  text-align: center;
  transition: box-shadow var(--lobo-transition-fast), transform var(--lobo-transition-fast), border-color var(--lobo-transition-fast);
}

@media (hover: hover) and (pointer: fine) {
  .lobo-categoria a:hover {
    transform: translateY(-2px);
    box-shadow: var(--lobo-shadow-lg);
    border-color: var(--lobo-secondary);
  }
}

.lobo-categoria__foto {
  display: block;
  width: 100%;
  max-width: 160px;
}

.lobo-categoria__img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #f4f4f4;
  border-radius: var(--lobo-radius-sm);
}

.lobo-categoria--sem-foto .lobo-categoria__foto {
  display: none;
}

.lobo-categoria__nome {
  font-size: var(--lobo-text-base);
  font-weight: var(--lobo-font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.lobo-categoria__contagem {
  font-size: var(--lobo-text-xs);
  color: var(--lobo-text-muted);
}

@media (max-width: 782px) {
  .lobo-categorias {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--lobo-space-3);
    margin: var(--lobo-space-6) 0;
  }

  .lobo-categoria__foto {
    max-width: 110px;
  }
}

/* O `a11y-performance.css` sublinha todo link em `.entry-content` com
   especificidade 0,4,1, e a home renderiza a grade dentro dela. O card de
   categoria é um bloco clicável inteiro: sublinhar nome e contagem vira ruído,
   e ele já se distingue por borda e hover.

   `!important` em vez de subir a especificidade daqui, e em vez de acrescentar
   um `:not()` lá: mexer naquela regra afeta todos os links da home. Foi o que
   aconteceu na primeira tentativa — o `:not()` levou a regra para 0,5,1 e
   derrubou a correção do título dos cards. */
.lobo-categoria a.lobo-card-link {
  text-decoration: none !important;
}

/* ==========================================================================
   H01 — encurtar a home no mobile.

   Medido em 30/08/2026 no 390×844: página de 10.103px e primeiro produto a
   3.021px, três telas abaixo. Os blocos que mais pesavam, em ordem: filtros
   (1.029px), hero (750px), categorias (424px) e vantagens (241px).

   A gaveta "Filtrar" resolve o maior deles pelo JS (o mesmo do L01, que agora
   também monta o wrapper em volta do `[woof]` da coluna). Aqui ficam os
   outros dois cortes.

   O CSS do hero vive num `<style>` dentro do conteúdo da home, então as
   regras precisam vencê-lo por ordem e especificidade.
   ========================================================================== */
@media (max-width: 782px) {
  /* O carrossel manda na altura do hero: `aspect-ratio: 4/3` sobre a largura
     quase inteira da tela. Estreitá-lo encurta o hero proporcionalmente. */
  /* `!important` porque o <style> do post traz
     `@media (max-width:860px){.lobo-hero .carousel{max-width:520px}}`: mesma
     especificidade e vindo depois no documento, ganharia por ordem. */
  .lobo-hero .carousel {
    max-width: 260px !important;
    margin-inline: auto;
  }

  .lobo-hero {
    padding: var(--lobo-space-5) var(--lobo-space-4) !important;
  }

  .lobo-hero .hero-grid {
    gap: var(--lobo-space-5);
  }

  .lobo-hero .sub {
    margin-top: var(--lobo-space-3);
  }

  .lobo-hero .cta {
    margin-top: var(--lobo-space-4);
  }

  /* Cinco vantagens empilhadas gastavam 241px. Em duas colunas cabem em
     metade disso; a última (WhatsApp) ocupa a linha inteira, porque é a
     única clicável e o texto é mais longo. */
  .lobo-vantagens {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--lobo-space-2);
  }

  .lobo-vantagens > .lobo-vantagem:last-child {
    grid-column: 1 / -1;
  }
}