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

/* =========================================================
   GRID PRODUTOS ALE — VERSÃO FINAL RESPONSIVA
   - Tipografia e espaçamentos fluidos com clamp()
   - Título bold
   - Sem gap branco entre imagem e base
   - Colunas definidas pelo Elementor
========================================================= */

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

:root {
  --ale-azul:    #323366;
  --ale-amarelo: #ffd500;
  --ale-raio:    clamp(14px, 1.5vw, 22px);

  --ale-img-h: clamp(160px, 20vw, 320px);

  --ale-font-title: clamp(12px, 1.1vw, 16px);
  --ale-font-price: clamp(12px, 1vw, 15px);
  --ale-font-btn:   clamp(11px, 0.95vw, 14px);

  --ale-pad-h:           clamp(12px, 1.4vw, 20px);
  --ale-title-space:     clamp(50px, 5.5vw, 80px);

  --ale-btn-h:      clamp(36px, 3.5vw, 46px);
  --ale-btn-side:   clamp(12px, 1.4vw, 20px);
  --ale-btn-bottom: clamp(12px, 1.4vw, 20px);
  --ale-btn-gap:    clamp(10px, 1.2vw, 16px);

  --ale-gap: clamp(10px, 1.4vw, 20px);
}

/* =========================================================
   POPPINS EM TUDO
========================================================= */
.grid-produtos-ale,
.grid-produtos-ale * {
  font-family: 'Poppins', sans-serif !important;
}

/* =========================================================
   GRID — reset apenas, colunas ficam no Elementor
========================================================= */
.grid-produtos-ale .woocommerce ul.products {
  display: grid !important;
  gap: var(--ale-gap) !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* =========================================================
   CARD
========================================================= */
.grid-produtos-ale .woocommerce ul.products li.product {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 0 calc(var(--ale-btn-bottom) + var(--ale-btn-h) + var(--ale-btn-gap)) 0 !important;

  list-style: none;
  position: relative;

  background: var(--ale-azul) !important;
  border-radius: var(--ale-raio) !important;
  overflow: hidden !important;

  display: flex !important;
  flex-direction: column !important;

  box-shadow: 0 8px 24px rgba(50, 51, 102, 0.18);
  transition: transform .25s ease, box-shadow .25s ease;
}

.grid-produtos-ale .woocommerce ul.products li.product:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 36px rgba(50, 51, 102, 0.26);
}

/* Remove ::after desnecessário */
.grid-produtos-ale .woocommerce ul.products li.product::after {
  display: none !important;
}

/* =========================================================
   BLOCO DA IMAGEM
========================================================= */
.grid-produtos-ale .woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
  display: block !important;
  background: #ffffff !important;

  height: var(--ale-img-h) !important;
  min-height: var(--ale-img-h) !important;
  max-height: var(--ale-img-h) !important;
  flex: 0 0 var(--ale-img-h) !important;

  padding: 0 !important;
  margin: 0 !important;
  position: relative;
  overflow: hidden !important;
  border-radius: 0 !important;
}

.grid-produtos-ale .woocommerce ul.products li.product a.woocommerce-LoopProduct-link img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  vertical-align: top !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: none !important;
  transition: transform .35s ease;
}

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

/* Badge oferta */
.grid-produtos-ale .woocommerce ul.products li.product .onsale {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  border-radius: 20px;
  padding: clamp(4px, 0.5vw, 8px) clamp(8px, 0.8vw, 12px);
  font-size: clamp(10px, 0.9vw, 13px);
  line-height: 1;
}

/* =========================================================
   TÍTULO — bold, espaçamento reduzido (metade do anterior)
========================================================= */
.grid-produtos-ale .woocommerce ul.products li.product .woocommerce-loop-product__title {
  position: relative;
  z-index: 2;
  margin: 0 !important;

  /* topo e base pela metade em relação à versão anterior */
  padding:
    clamp(6px, 0.6vw, 9px)
    var(--ale-pad-h)
    clamp(3px, 0.4vw, 6px)
    var(--ale-pad-h) !important;

  color: #ffffff !important;
  font-size: var(--ale-font-title) !important;
  font-weight: 800 !important;
  line-height: 1.4;

  min-height: var(--ale-title-space);
  overflow: hidden;
}

/* =========================================================
   PREÇO — padding top zerado, base mantida
========================================================= */
.grid-produtos-ale .woocommerce ul.products li.product .price {
  position: relative;
  z-index: 2;
  margin: 0 !important;

  padding:
    0
    var(--ale-pad-h)
    clamp(8px, 1vw, 14px)
    var(--ale-pad-h) !important;

  color: #ffffff !important;
  font-size: var(--ale-font-price) !important;
  font-weight: 600;
  line-height: 1.3;
}

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

/* =========================================================
   BOTÃO — fixo no rodapé, amarelo com texto azul
========================================================= */
.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: 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;

  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: clamp(8px, 0.9vw, 12px) clamp(10px, 1vw, 16px) !important;

  font-size: var(--ale-font-btn) !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(.93) !important;
  transform: scale(1.02) !important;
}

/* =========================================================
   OCULTAR ELEMENTOS QUE QUEBRAM LAYOUT
========================================================= */
.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;
}

/* =========================================================
   PAGINAÇÃO — sempre clicável
========================================================= */
.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;
}

/* =========================================================
   AJUSTES RESPONSIVOS PONTUAIS
   Apenas refinamentos de escala — colunas ficam no Elementor
========================================================= */

/* Ultrawide ≥ 1920px */
@media (min-width: 1920px) {
  :root {
    --ale-img-h: clamp(280px, 18vw, 360px);
  }
}

/* Tablet landscape ≤ 1024px */
@media (max-width: 1024px) {
  :root {
    --ale-font-title: clamp(11px, 1.4vw, 15px);
    --ale-font-price: clamp(11px, 1.3vw, 14px);
    --ale-font-btn:   clamp(10px, 1.2vw, 13px);
    --ale-img-h:      clamp(140px, 22vw, 240px);
  }
}

/* Tablet portrait / iPad ≤ 768px */
@media (max-width: 768px) {
  :root {
    --ale-img-h:       clamp(130px, 28vw, 200px);
    --ale-font-title:  clamp(11px, 2.2vw, 14px);
    --ale-font-price:  clamp(11px, 2vw, 13px);
    --ale-font-btn:    clamp(10px, 1.9vw, 13px);
    --ale-title-space: clamp(44px, 6vw, 64px);
    --ale-pad-h:       clamp(10px, 2.2vw, 16px);
    --ale-btn-side:    clamp(10px, 2.2vw, 16px);
    --ale-btn-bottom:  clamp(10px, 2vw, 14px);
    --ale-btn-h:       clamp(32px, 5vw, 40px);
  }
}

/* Mobile ≤ 480px */
@media (max-width: 480px) {
  :root {
    --ale-img-h:       clamp(150px, 48vw, 220px);
    --ale-font-title:  clamp(12px, 3.5vw, 15px);
    --ale-font-price:  clamp(12px, 3.2vw, 14px);
    --ale-font-btn:    clamp(11px, 3vw, 13px);
    --ale-title-space: clamp(48px, 10vw, 64px);
    --ale-pad-h:       clamp(14px, 4vw, 18px);
    --ale-btn-side:    clamp(14px, 4vw, 18px);
    --ale-btn-bottom:  clamp(12px, 3.5vw, 16px);
    --ale-btn-h:       clamp(38px, 10vw, 44px);
    --ale-raio:        16px;
  }
}