/**
 * Theme Name:     Hello Elementor Child - Ale
 * Author:         Elementor Team
 * Template:       hello-elementor
 * Text Domain:	   hello-elementor-child-ale
 */

/* =========================================================
   GRID PRODUTOS ALE (Elementor Woo Products) - CSS ONLY
   Divisão visual em 2 "containers":
   1) TOPO (IMAGEM): fundo branco, imagem ocupa 100% do espaço
   2) BASE (INFO): fundo azul, título + preço + botão alinhados
   Regras:
   - Todos os cards com mesma altura
   - Título com área maior (sem corte), alinhado entre cards
   - Botão amarelo com texto azul, arredondado, padding menor
   - Fontes em Poppins
========================================================= */

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

:root{
  --ale-azul:#0076BC;
  --ale-amarelo:#FFD400;
  --ale-raio:30px;
  --ale-gap:30px;

  --ale-img-h:340px;          /* altura fixa do topo (imagem) */
  --ale-info-pad:22px;        /* padding lateral da base */
  --ale-title-space:78px;     /* área reservada para título (maior e sem corte) */
}

/* Força Poppins em tudo do widget */
.grid-produtos-ale,
.grid-produtos-ale *{
  font-family:'Poppins', sans-serif !important;
}

/* =========================================================
   GRID + RESET
========================================================= */
.grid-produtos-ale .woocommerce ul.products{
  display:grid !important;
  gap:var(--ale-gap);
  margin:0 !important;
  padding:0 !important;
}

.grid-produtos-ale .woocommerce ul.products li.product{
  float:none !important;
  width:auto !important;
  margin:0 !important;
  padding:0 !important;
  list-style:none;

  border-radius:var(--ale-raio);
  overflow:hidden;
  background:#ffffff;

  display:flex;
  flex-direction:column;

  box-shadow:0 10px 25px rgba(0,0,0,0.08);
  transition:transform .25s ease, box-shadow .25s ease;

  position:relative; /* fundo azul da base via ::after */
}

.grid-produtos-ale .woocommerce ul.products li.product:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 35px rgba(0,0,0,0.12);
}

/* Colunas via classes do Elementor no widget */
.grid-produtos-ale.elementor-grid-4 .woocommerce ul.products{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.grid-produtos-ale.elementor-grid-3 .woocommerce ul.products{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid-produtos-ale.elementor-grid-2 .woocommerce ul.products{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-produtos-ale.elementor-grid-1 .woocommerce ul.products{ grid-template-columns:1fr; }

@media (max-width:1024px){
  .grid-produtos-ale.elementor-grid-tablet-3 .woocommerce ul.products{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .grid-produtos-ale.elementor-grid-tablet-2 .woocommerce ul.products{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .grid-produtos-ale.elementor-grid-tablet-1 .woocommerce ul.products{ grid-template-columns:1fr; }
}
@media (max-width:767px){
  .grid-produtos-ale.elementor-grid-mobile-2 .woocommerce ul.products{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .grid-produtos-ale.elementor-grid-mobile-1 .woocommerce ul.products{ grid-template-columns:1fr; }
}

/* =========================================================
   CONTAINER 1 (TOPO): IMAGEM
   Usamos o link do produto como container da imagem (branco)
========================================================= */
.grid-produtos-ale .woocommerce ul.products li.product a.woocommerce-LoopProduct-link{
  display:block;
  background:#ffffff;
  height:var(--ale-img-h);
  padding:0 !important;
  margin:0 !important;
  position:relative;
  z-index:2; /* acima do fundo azul */
}

.grid-produtos-ale .woocommerce ul.products li.product a.woocommerce-LoopProduct-link img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;   /* imagem completa no espaço */
  display:block;
  margin:0 !important;
  transition:transform .35s ease;
}

.grid-produtos-ale .woocommerce ul.products li.product:hover a.woocommerce-LoopProduct-link img{
  transform:scale(1.03);
}

/* Badge oferta na área da imagem */
.grid-produtos-ale .woocommerce ul.products li.product .onsale{
  position:absolute;
  top:10px;
  left:10px;
  z-index:3;
  border-radius:20px;
  padding:10px 10px;
  font-size:12px;
  line-height:1;
}

/* =========================================================
   CONTAINER 2 (BASE): FUNDO AZUL (virtual via ::after)
   Pinta toda a área abaixo da imagem
========================================================= */
.grid-produtos-ale .woocommerce ul.products li.product::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:var(--ale-img-h);
  bottom:0;
  background:var(--ale-azul);
  z-index:1;
}

/* =========================================================
   BASE: TÍTULO + PREÇO + BOTÃO (alinhados)
========================================================= */

/* TÍTULO: sem corte, com área maior reservada */
.grid-produtos-ale .woocommerce ul.products li.product .woocommerce-loop-product__title{
  position:relative;
  z-index:2;
  margin:0 !important;

  padding:18px var(--ale-info-pad) 10px var(--ale-info-pad);

  color:#ffffff !important;
  font-size:15px;
  font-weight:700;
  line-height:1.35;

  min-height:var(--ale-title-space); /* reserva espaço igual em todos */
  overflow:hidden;                   /* evita quebrar o layout em títulos gigantes */
}

/* PREÇO */
.grid-produtos-ale .woocommerce ul.products li.product .price{
  position:relative;
  z-index:2;
  margin:0 !important;

  padding:0 var(--ale-info-pad) 12px var(--ale-info-pad);

  color:#ffffff !important;
  font-weight:600;
  font-size:14px;
}

.grid-produtos-ale .woocommerce ul.products li.product .price del{
  opacity:.75;
  margin-right:8px;
}
.grid-produtos-ale .woocommerce ul.products li.product .price ins{
  text-decoration:none;
}

/* BOTÃO: amarelo, texto azul, arredondado, padding menor, sempre no final */
.grid-produtos-ale .woocommerce ul.products li.product a.button,
.grid-produtos-ale .woocommerce ul.products li.product a.button:visited,
.grid-produtos-ale .woocommerce ul.products li.product a.add_to_cart_button,
.grid-produtos-ale .woocommerce ul.products li.product a.product_type_simple,
.grid-produtos-ale .woocommerce ul.products li.product a.product_type_variable,
.grid-produtos-ale .woocommerce ul.products li.product a.product_type_grouped{
  position:relative;
  z-index:2;

  margin-top:auto !important; /* alinha no rodapé do card */
  margin-left:var(--ale-info-pad) !important;
  margin-right:var(--ale-info-pad) !important;
  margin-bottom:var(--ale-info-pad) !important;

  width:calc(100% - (var(--ale-info-pad) * 2)) !important;
  display:block !important;

  background:var(--ale-amarelo) !important;
  background-image:none !important;

  color:var(--ale-azul) !important;
  -webkit-text-fill-color:var(--ale-azul) !important;

  border:none !important;
  border-radius:999px !important;
  padding:10px 14px !important; /* menor padding */
  font-size:14px !important;

  font-weight:800 !important;
  text-align:center !important;
  text-decoration:none !important;

  box-shadow:none !important;
  opacity:1 !important;
  filter:none !important;

  transition:transform .2s ease, filter .2s ease;
}

.grid-produtos-ale .woocommerce ul.products li.product a.button:hover,
.grid-produtos-ale .woocommerce ul.products li.product a.button:focus{
  filter:brightness(.95);
  transform:scale(1.02);
}

/* Remove elementos opcionais que podem quebrar alinhamento (se aparecerem) */
.grid-produtos-ale .woocommerce ul.products li.product .star-rating,
.grid-produtos-ale .woocommerce ul.products li.product .woocommerce-product-details__short-description{
  display:none !important;
}

/* =========================================================
   FORÇAR BOTÃO SEMPRE ALINHADO NO RODAPÉ (CSS ONLY)
   Estável no widget "Produtos" do Elementor
========================================================= */

:root{
  --ale-btn-bottom:22px;   /* distância do botão até o fundo do card */
  --ale-btn-side:22px;     /* margem lateral do botão */
  --ale-btn-h:44px;        /* altura aproximada do botão */
  --ale-btn-gap:18px;      /* espaço entre conteúdo e botão */
}

/* o card vira referência do botão */
.grid-produtos-ale .woocommerce ul.products li.product{
  position:relative;
  padding-bottom: calc(var(--ale-btn-bottom) + var(--ale-btn-h) + var(--ale-btn-gap)) !important;
}

/* botão fixo no rodapé, sempre no mesmo lugar */
.grid-produtos-ale .woocommerce ul.products li.product a.button,
.grid-produtos-ale .woocommerce ul.products li.product a.add_to_cart_button,
.grid-produtos-ale .woocommerce ul.products li.product a.product_type_simple,
.grid-produtos-ale .woocommerce ul.products li.product a.product_type_variable,
.grid-produtos-ale .woocommerce ul.products li.product a.product_type_grouped{
  position:absolute !important;
  left: var(--ale-btn-side) !important;
  right: var(--ale-btn-side) !important;
  bottom: var(--ale-btn-bottom) !important;
  margin:0 !important;
  width:auto !important;
  display:block !important;
  z-index:5;
}

/* garante que título e preço não fiquem "por baixo" do botão */
.grid-produtos-ale .woocommerce ul.products li.product .woocommerce-loop-product__title,
.grid-produtos-ale .woocommerce ul.products li.product .price{
  position:relative;
  z-index:2;
}


/* Garantir que a paginação fique clicável e acima de qualquer overlay */
.grid-produtos-ale .elementor-pagination,
.grid-produtos-ale nav.woocommerce-pagination,
.grid-produtos-ale .woocommerce-pagination{
  position: relative !important;
  z-index: 9999 !important;
  pointer-events: auto !important;
}

/* Evitar que algum pseudo-elemento cubra a área abaixo do grid */
.grid-produtos-ale .woocommerce ul.products li.product::after{
  pointer-events: none !important;
}