/**
 * Desktop Grid Fix for Product Category Pages
 * This file ensures all 4 columns are visible on desktop screens
 * by overriding container constraints that were cutting off the rightmost column
 */

/* Desktop-specific fixes for product category grid visibility */
@media (min-width: 1441px) {
    /* Override main container constraints for product category pages */
    body.tax-product_cat .ast-separate-container .site-main>.ast-row,
    body.tax-product_cat article.ast-article-single {
        max-width: none !important;
        width: 100% !important;
    }
    
    /* Ensure the main container can expand to show all 4 columns */
    body.tax-product_cat .ast-container {
        max-width: none !important;
        width: 100% !important;
    }
    
    /* Override any other max-width constraints that might affect the grid */
    body.tax-product_cat .entry-content,
    body.tax-product_cat .ast-woocommerce-container {
        max-width: none !important;
        width: 100% !important;
    }
    
    /* Ensure the product grid takes full available width */
    body.tax-product_cat ul.products {
        max-width: none !important;
        width: 100% !important;
        min-width: 0;
        /* Ensure proper grid layout */
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr 1fr !important;
        grid-gap: 50px 45px !important;
    }
    
    /* Ensure the primary content area can expand */
    body.tax-product_cat #primary {
        width: 73% !important;
        max-width: none !important;
        min-width: 0;
    }
}

/* Additional optimization for very wide screens */
@media (min-width: 1920px) {
    body.tax-product_cat .ast-woocommerce-container {
        padding: 0 50px;
    }
    
    body.tax-product_cat ul.products {
        /* Optimize grid gap for very wide screens */
        grid-gap: 60px 55px !important;
    }
}

/* Ensure the grid items don't overflow */
body.tax-product_cat ul.products li.product {
    min-width: 0;
    width: 100% !important;
    max-width: none;
}

/* Override any conflicting CSS that might affect the grid */
body.tax-product_cat ul.products::before,
body.tax-product_cat ul.products::after {
    display: none !important;
}