/* Custom Products Grid with Flexbox and Square Images */

/* Modificar la grilla para usar Flexbox */
.products-grid {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0 -10px;
}

.products-grid:after {
  display: none; /* Ya no necesitamos clearfix con flexbox */
}

.products-grid li {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 10px 10px 0;
}

/* Hacer que el contenedor del producto use flex */
.products-grid .product {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}

/* Forzar imágenes cuadradas 1:1 */
.products-grid .product .product-image-area {
  position: relative;
  width: 100%;
  padding-bottom: 100%; /* Aspect ratio 1:1 */
  overflow: hidden;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 6.99px;
}

.products-grid .product .product-image-area .product-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 3px;
}

.products-grid .product .product-image-area .product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* La imagen cubrirá todo el espacio manteniendo proporción */
  object-position: center;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

/* Asegurar que los detalles del producto se ajusten */
.products-grid .product .product-details-area {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Responsive - Móvil */
@media (min-width: 480px) {
  .products-grid li {
    width: 50%; /* 2 columnas */
  }
  
  .products-grid.columns5 li,
  .products-grid.columns6 li,
  .products-grid.columns7 li,
  .products-grid.columns8 li {
    width: 33.33%; /* 3 columnas */
  }
}

/* Responsive - Tablet */
@media (min-width: 768px) {
  .products-grid.columns3 li,
  .products-grid.columns4 li {
    width: 33.33%; /* 3 columnas */
  }
  
  .products-grid.columns5 li,
  .products-grid.columns6 li,
  .products-grid.columns7 li,
  .products-grid.columns8 li {
    width: 25%; /* 4 columnas */
  }
}

/* Responsive - Desktop pequeño */
@media (min-width: 992px) {
  .products-grid.columns6 li,
  .products-grid.columns7 li,
  .products-grid.columns8 li {
    width: 20%; /* 5 columnas */
  }
}

/* Responsive - Desktop grande */
@media (min-width: 1200px) {
  .products-grid.columns4 li {
    width: 25%; /* 4 columnas */
  }
  
  .products-grid.columns5 li {
    width: 20%; /* 5 columnas */
  }
  
  .products-grid.columns6 li {
    width: 16.66%; /* 6 columnas */
  }
  
  .products-grid.columns7 li {
    width: 14.25%; /* 7 columnas */
  }
  
  .products-grid.columns8 li {
    width: 12.5%; /* 8 columnas */
  }
}

/* Eliminar floats y clears ya que usamos flexbox */
.products-grid li:nth-child(2n + 1),
.products-grid li:nth-child(3n + 1),
.products-grid li:nth-child(4n + 1),
.products-grid li:nth-child(5n + 1),
.products-grid li:nth-child(6n + 1),
.products-grid li:nth-child(7n + 1),
.products-grid li:nth-child(8n + 1) {
  clear: none !important;
  float: none !important;
}

.products-grid li {
  float: none !important;
}