/**
 * Production Grid Override - HIGHEST PRIORITY
 * This file ensures desktop product grid works regardless of caching, plugins, or other CSS conflicts
 */

/* ===============================================
   NUCLEAR OPTION: FORCE DESKTOP GRID LAYOUT
   =============================================== */

/* Use extremely high specificity to override any plugin or cached CSS */
html body.woocommerce .main-content .row .product-item,
html body.woocommerce .woocommerce .main-content .row .product-item,
html body .woocommerce .main-content .row .product-item,
html body .main-content .row .product-item,
html body .woocommerce .product-item,
html body .product-item {
    /* Desktop 4-column layout - Force with !important */
    flex: 0 0 25% !important;
    max-width: 25% !important;
    width: 25% !important;
    margin-bottom: 2rem !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    float: none !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Override any inline styles that might be applied by JavaScript or plugins */
html body .product-item[style*="width: 100%"],
html body .product-item[style*="flex: 0 0 100%"],
html body .product-item[style*="max-width: 100%"] {
    flex: 0 0 25% !important;
    max-width: 25% !important;
    width: 25% !important;
}

/* Force flexbox container behavior */
html body .main-content .row,
html body .woocommerce .main-content .row,
html body .products.row,
html body .woocommerce .row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-left: -0.75rem !important;
    margin-right: -0.75rem !important;
}

/* Large desktop - 4 columns */
@media (min-width: 1400px) {
    html body.woocommerce .main-content .row .product-item,
    html body.woocommerce .woocommerce .main-content .row .product-item,
    html body .woocommerce .main-content .row .product-item,
    html body .main-content .row .product-item,
    html body .woocommerce .product-item,
    html body .product-item {
        flex: 0 0 25% !important;
        max-width: 25% !important;
        width: 25% !important;
    }
    
    html body .product-item[style*="width: 100%"],
    html body .product-item[style*="flex: 0 0 100%"],
    html body .product-item[style*="max-width: 100%"] {
        flex: 0 0 25% !important;
        max-width: 25% !important;
        width: 25% !important;
    }
}

/* Mobile override - only apply single column on actual mobile devices */
@media (max-width: 767px) {
    html body.woocommerce .main-content .row .product-item,
    html body.woocommerce .woocommerce .main-content .row .product-item,
    html body .woocommerce .main-content .row .product-item,
    html body .main-content .row .product-item,
    html body .woocommerce .product-item,
    html body .product-item {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* Tablet override - 2-3 columns */
@media (min-width: 768px) and (max-width: 991px) {
    html body.woocommerce .main-content .row .product-item,
    html body.woocommerce .woocommerce .main-content .row .product-item,
    html body .woocommerce .main-content .row .product-item,
    html body .main-content .row .product-item,
    html body .woocommerce .product-item,
    html body .product-item {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
        width: 33.333333% !important;
    }
}

/* ===============================================
   PLUGIN CONFLICT PREVENTION
   =============================================== */

/* Override common plugin CSS that might interfere */
.woocommerce .product-item,
.woocommerce .product,
.woocommerce .products .product,
.woocommerce .products li,
ul.products li {
    /* Reset any plugin-applied styles */
    transform: none !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
}

/* Ensure product cards don't get hidden or displaced */
.product-default,
.product-item .product-default {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    transform: none !important;
}

/* ===============================================
   CACHING PREVENTION
   =============================================== */

/* Add a unique identifier to ensure this CSS is loaded fresh */
body::before {
    content: "Production Grid Override Active - v" attr(data-cache-bust, "1.0");
    display: none;
}