/**
 * FORCE-GRID.CSS (VERSIÓN OPTIMIZADA)
 * Estilos forzados para cuadrícula de productos WooCommerce
 * Configurado para mostrar siempre 3 columnas x 3 filas (9 productos)
 *
 * @package WC_Productos_Template
 */

/* ===== 1. CONFIGURACIÓN BÁSICA DEL GRID ===== */
/* Selector universal para todos los contenedores de productos */
html body ul.products,
html body.woocommerce ul.products,
html body.woocommerce-page ul.products,
html body .woocommerce ul.products,
html body .productos-grid,
html body #main ul.products,
html body #content ul.products,
html body .woocommerce .products,
html body .wc-productos-template ul.products,
html body .productos-grid,
.three-column-grid,
.force-grid {
    /* Configuración principal del grid: SIEMPRE 3 COLUMNAS */
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    
    /* Resetear estilos que puedan interferir */
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 30px 0 !important;
    padding: 0 !important;
    list-style: none !important;
    float: none !important;
    clear: both !important;
    box-sizing: border-box !important;
}

/* Eliminar flotadores y clearfix que pueden romper la cuadrícula */
html body ul.products::before,
html body ul.products::after,
html body.woocommerce ul.products::before,
html body.woocommerce ul.products::after,
html body .woocommerce .products::before,
html body .woocommerce .products::after,
html body .productos-grid::before,
html body .productos-grid::after {
    display: none !important;
    content: none !important;
    clear: none !important;
    visibility: hidden !important;
}

/* Estilo base para cada producto */
html body ul.products li.product,
html body.woocommerce ul.products li.product,
html body.woocommerce-page ul.products li.product,
html body .woocommerce ul.products li.product,
html body .productos-grid li.product,
html body #main ul.products li.product,
html body #content ul.products li.product,
html body .woocommerce .products li.product,
html body .wc-productos-template ul.products li.product,
html body .productos-grid li.product {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: none !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    opacity: 1 !important;
    position: relative !important;
    visibility: visible !important;
}

/* Estilos específicos para tarjetas de producto en nuestro template */
.wc-productos-template ul.products li.product,
.productos-grid li.product {
    border: 1px solid #e2e2e2 !important;
    border-radius: 8px !important;
    background-color: #fff !important;
    padding: 15px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.3s ease !important;
    overflow: hidden !important;
}

/* Estilo de imágenes de producto */
.wc-productos-template .producto-imagen,
.wc-productos-template .producto-imagen-link,
.wc-productos-template .producto-imagen img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: 200px !important;
    object-fit: contain !important;
    margin: 0 auto 15px auto !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Restablecer márgenes en contenido interior */
.producto-interior {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Clase para la cuadrícula de 3 columnas específicamente */
.three-column-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    width: 100% !important;
    margin: 0 0 30px 0 !important;
    padding: 0 !important;
    list-style: none !important;
    float: none !important;
    clear: both !important;
}

/* ===== 2. CONTROL DE PRODUCTOS VISIBLES ===== */
/* Garantizar que sólo se muestren exactamente 9 productos */
body ul.products li.product:nth-child(n+10),
body.woocommerce ul.products li.product:nth-child(n+10),
body.woocommerce-page ul.products li.product:nth-child(n+10),
body .woocommerce ul.products li.product:nth-child(n+10),
html body .productos-grid li.product:nth-child(n+10),
#main ul.products li.product:nth-child(n+10),
#content ul.products li.product:nth-child(n+10),
.woocommerce .products li.product:nth-child(n+10),
.wc-productos-template ul.products li.product:nth-child(n+10),
.productos-grid li.product:nth-child(n+10),
html body ul.products li.product:nth-child(n+10),
html body .productos-grid li.product:nth-child(n+10) {
    display: none !important;
}

/* Asegurar que los primeros 9 productos sean visibles */
.wc-productos-template ul.products li.product:nth-child(-n+9),
.wc-productos-template .productos-grid li.product:nth-child(-n+9),
html body ul.products li.product:nth-child(-n+9),
html body .productos-grid li.product:nth-child(-n+9) {
    display: flex !important;
}

/* Clase para ocultar productos explícitamente */
.hide-product {
    display: none !important;
}

/* ===== 3. MEDIA QUERIES PARA RESPONSIVE (MANTIENEN 3 COLUMNAS EN PANTALLAS GRANDES) ===== */
/* Pantallas grandes (SIEMPRE 3 columnas) */
@media (min-width: 992px) {
    html body ul.products,
    html body.woocommerce ul.products,
    html body.woocommerce-page ul.products,
    html body .woocommerce ul.products,
    html body .wc-productos-template ul.products,
    html body .productos-grid,
    html body #main ul.products,
    html body #content ul.products,
    html body .woocommerce .products,
    .three-column-grid,
    .force-grid,
    body.screen-large .force-grid,
    body.screen-large .three-column-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Pantallas medianas (3 columnas) */
@media (max-width: 991px) and (min-width: 769px) {
    html body ul.products,
    html body.woocommerce ul.products,
    html body.woocommerce-page ul.products,
    html body .woocommerce ul.products,
    html body .wc-productos-template ul.products,
    html body .productos-grid,
    body.screen-medium .force-grid,
    body.screen-medium .three-column-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Pantallas pequeñas (2 columnas) */
@media (max-width: 768px) {
    html body ul.products,
    html body.woocommerce ul.products,
    html body.woocommerce-page ul.products,
    html body .woocommerce ul.products,
    html body .wc-productos-template ul.products,
    html body .productos-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }
    
    body.screen-small .force-grid,
    body.screen-small .three-column-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }
}

/* Dispositivos muy pequeños (2 columnas más ajustadas) */
@media (max-width: 480px) {
    html body ul.products,
    html body.woocommerce ul.products,
    html body.woocommerce-page ul.products,
    html body .woocommerce ul.products,
    html body .wc-productos-template ul.products,
    html body .productos-grid {
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 10px !important;
    }
    
    body .force-grid,
    body .three-column-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
}

/* ===== 4. CORRECCIONES ESPECÍFICAS PARA TEMAS COMUNES ===== */
/* Corrige el estilo de los botones en varios temas */
.theme-storefront ul.products li.product .button,
.theme-storefront ul.products li.product .wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link,
.theme-astra ul.products li.product .button,
.theme-astra .astra-shop-summary-wrap,
.theme-oceanwp ul.products li.product .button {
    width: auto !important;
    margin-bottom: 0 !important;
}

/* ===== 5. CORRECTIVOS PARA LA ESTRUCTURA DE PRODUCTOS ===== */
/* Corrección de posición del header de productos */
.productos-header {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    margin-bottom: 30px !important;
    position: relative !important;
    z-index: 10 !important;
}

/* Estilos para mantener visible el botón de añadir al carrito */
.productos-boton.add_to_cart_button,
.product_type_simple.add_to_cart_button {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
}

/* ===== 6. ANULACIÓN DE CUADRÍCULA (ÚLTIMA PRIORIDAD) ===== */
/* Esta sección anula CUALQUIER otra definición de columnas */
html body ul.products,
html body.woocommerce ul.products,
html body.woocommerce-page ul.products,
html body .woocommerce ul.products,
html body .productos-grid,
html body #main ul.products,
html body #content ul.products,
html body .woocommerce .products,
html body .wc-productos-template ul.products,
html body .productos-grid,
.three-column-grid,
.force-grid {
    grid-template-columns: repeat(3, 1fr) !important;
}