/* ============================================
   FORZAR GRID DE 3 COLUMNAS EN LA TIENDA
   ============================================ */

/* Contenedor principal de WooCommerce */
.woocommerce .products,
.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2rem !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Items individuales */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
}

/* Asegurar que cada card ocupe su espacio */
.producto-card {
    width: 100% !important;
    height: 100% !important;
}

/* Limpiar floats de WooCommerce */
.woocommerce ul.products::after,
.woocommerce ul.products::before {
    display: none !important;
}

/* RESPONSIVE */

/* Tablets - 2 columnas */
@media (max-width: 1024px) {
    .woocommerce .products,
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem !important;
    }
}

/* Móviles - 1 columna */
@media (max-width: 768px) {
    .woocommerce .products,
    .woocommerce ul.products {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
}