/* Fix para el grid de productos en la página de tienda */

/* Ocultar la fila de Visual Composer que contiene los productos duplicados */
.woocommerce .vc_row.wpb_row.vc_row-fluid.margin-lg-120t.margin-lg-100b.margin-md-100t.margin-md-80b.margin-sm-75t.margin-sm-55b.margin-xs-45t.margin-xs-25b {
    display: none !important;
}

/* Corregir el overflow del grid de productos - aplicar a todos los ul.products */
.woocommerce ul.products,
.woocommerce-page ul.products,
.woocommerce .products,
.woocommerce-page .products {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 30px !important;
    overflow: visible !important;
}

/* Resetear float para evitar conflictos */
.woocommerce ul.products > li.product,
.woocommerce-page ul.products > li.product {
    float: none !important;
}

/* Reducir tamaño de las imágenes 20% */
.woocommerce ul.products > li.product a.woocommerce-loop-product__link img,
.woocommerce-page ul.products > li.product a.woocommerce-loop-product__link img {
    max-width: 80% !important;
    margin: 0 auto !important;
    display: block !important;
}

/* Ajustar el ancho de los productos en 4 columnas */
.woocommerce ul.products.columns-4 > li.product,
.woocommerce-page ul.products.columns-4 > li.product,
.woocommerce ul.products > li.product,
.woocommerce-page ul.products > li.product {
    width: calc(25% - 22.5px) !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    margin-bottom: 30px !important;
}

/* Ajustar el ancho de los productos en 3 columnas */
.woocommerce ul.products.columns-3 > li.product,
.woocommerce-page ul.products.columns-3 > li.product {
    width: calc(33.33% - 20px) !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    margin-bottom: 30px !important;
}

/* Ajustar el ancho de los productos en 2 columnas */
.woocommerce ul.products.columns-2 > li.product,
.woocommerce-page ul.products.columns-2 > li.product {
    width: calc(50% - 15px) !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    margin-bottom: 30px !important;
}

/* Responsive - 1440px y menos: 3 columnas */
@media only screen and (max-width: 1440px) {
    .woocommerce ul.products.columns-4 > li.product,
    .woocommerce-page ul.products.columns-4 > li.product {
        width: calc(33.33% - 20px) !important;
    }
}

/* Responsive - 1100px y menos: 2 columnas */
@media only screen and (max-width: 1100px) {
    .woocommerce ul.products.columns-3 > li.product,
    .woocommerce ul.products.columns-4 > li.product,
    .woocommerce-page ul.products.columns-3 > li.product,
    .woocommerce-page ul.products.columns-4 > li.product {
        width: calc(50% - 15px) !important;
    }
}

/* Responsive - 768px y menos: 2 columnas */
@media only screen and (max-width: 768px) {
    .woocommerce .related ul.products.columns-4 > li.product,
    .woocommerce ul.products[class*="columns-"] > li.product,
    .woocommerce-page .related ul.products.columns-4 > li.product,
    .woocommerce-page ul.products[class*="columns-"] > li.product {
        width: calc(50% - 15px) !important;
    }
}

/* Responsive - 550px y menos: 1 columna */
@media only screen and (max-width: 550px) {
    .woocommerce .related ul.products.columns-4 > li.product,
    .woocommerce ul.products[class*="columns-"] > li.product,
    .woocommerce-page .related ul.products.columns-4 > li.product,
    .woocommerce-page ul.products[class*="columns-"] > li.product {
        width: 100% !important;
    }
    
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        gap: 15px !important;
    }
}