/* ==========================================================================
   CSS CUSTOMIZADO — ANJA FLORES (Loja Integrada)
   Objetivo:
   1. Melhorar a disposição/grade dos produtos
   2. Padronizar o tamanho das imagens dos produtos
   3. Reduzir a altura do banner principal
   4. Melhorar a responsividade em mobile
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) GRADE DE PRODUTOS (vitrines / prateleiras / listagem)
   -------------------------------------------------------------------------- */
.vitrine-produtos ul,
.prateleira-produtos ul,
.lista-produtos,
ul.produtos,
.produtos-lista {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 auto !important;
}

/* Cada "card" de produto — 4 por linha no desktop (25% menos a margem) */
.produtos-lista li,
ul.produtos li,
.item-produto,
.produto-box,
.vitrine-produtos li,
.prateleira-produtos li {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  background: #fff !important;
  border: 1px solid #eee !important;
  border-radius: 10px !important;
  box-sizing: border-box !important;
  width: 23% !important;
  margin: 1% !important;
  padding: 14px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.produtos-lista li:hover,
ul.produtos li:hover,
.item-produto:hover,
.produto-box:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1) !important;
}

/* --------------------------------------------------------------------------
   2) IMAGENS DOS PRODUTOS — TAMANHO ÚNICO
   Todo container de imagem de produto vira um quadrado fixo,
   e a imagem lá dentro se ajusta sem distorcer (object-fit: cover)
   -------------------------------------------------------------------------- */
.item-produto a,
.produto-box a,
.produtos-lista li a,
ul.produtos li a {
  display: block !important;
  width: 100% !important;
}

.item-produto img,
.produto-box img,
.produtos-lista li img,
ul.produtos li img,
.vitrine-produtos img,
.prateleira-produtos img,
a[href*="anjaflores.com.br/"] img[src*="cdn.awsli.com.br"][src*="/produto/"] {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  max-width: 260px !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 8px !important;
  background: #f7f7f7 !important;
  margin: 0 auto 10px auto !important;
}

/* Fallback para navegadores muito antigos sem aspect-ratio */
@supports not (aspect-ratio: 1 / 1) {
  .item-produto img,
  .produto-box img,
  a[href*="cdn.awsli.com.br"] img {
    height: 260px !important;
    object-fit: cover !important;
  }
}

/* Nome e preço do produto alinhados e com altura mínima para não
   deixar os cards desalinhados quando o título tem tamanhos diferentes */
.item-produto .nome-produto,
.produto-box .nome-produto,
.produtos-lista li a:nth-of-type(2) {
  min-height: 42px !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* --------------------------------------------------------------------------
   3) BANNER PRINCIPAL — REDUZIR ALTURA
   -------------------------------------------------------------------------- */
.banner-rotativo,
.banner-principal,
.slider-banner,
#slider-home,
.owl-carousel.banners {
  max-height: 420px !important;
  overflow: hidden !important;
}

.banner-rotativo img,
.banner-principal img,
.slider-banner img,
#slider-home img,
.owl-carousel.banners img {
  width: 100% !important;
  height: 420px !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* --------------------------------------------------------------------------
   4) RESPONSIVO MOBILE
   -------------------------------------------------------------------------- */

/* Tablets — 3 produtos por linha */
@media (max-width: 1024px) {
  .produtos-lista li,
  ul.produtos li,
  .item-produto,
  .produto-box,
  .vitrine-produtos li,
  .prateleira-produtos li {
    width: 31% !important;
    margin: 1.16% !important;
  }

  .banner-rotativo img,
  .banner-principal img,
  .slider-banner img,
  #slider-home img {
    height: 320px !important;
  }
}

/* Celulares grandes — 2 produtos por linha */
@media (max-width: 768px) {
  .produtos-lista li,
  ul.produtos li,
  .item-produto,
  .produto-box,
  .vitrine-produtos li,
  .prateleira-produtos li {
    width: 47% !important;
    margin: 1.5% !important;
    padding: 8px !important;
  }

  .item-produto img,
  .produto-box img,
  .produtos-lista li img,
  ul.produtos li img {
    max-width: 100% !important;
  }

  .banner-rotativo img,
  .banner-principal img,
  .slider-banner img,
  #slider-home img {
    height: 220px !important;
  }
}

/* Celulares pequenos — 2 produtos por linha, ajustes finos */
@media (max-width: 420px) {
  .produtos-lista li,
  ul.produtos li,
  .item-produto,
  .produto-box,
  .vitrine-produtos li,
  .prateleira-produtos li {
    width: 46% !important;
    margin: 2% !important;
  }

  .item-produto .nome-produto,
  .produto-box .nome-produto {
    font-size: 12.5px !important;
  }

  .banner-rotativo img,
  .banner-principal img,
  .slider-banner img,
  #slider-home img {
    height: 180px !important;
  }
}