/* ==========================================================================
 * afx-config.css — the theme's responsive-grid / container / font CSS, baked
 * from the rendered output of config.phtml's inline <style> for the spares_usa store.
 * (Values come from theme-admin layout/product-listing config; if those admin
 * settings change, re-generate this file.) Moved out of the inline <style>.
 * ========================================================================== */
@media (min-width: 1200px) {

        .cms-index-index .page.messages,
        .container {
            max-width:
                1320px            ;
        }

        .layout-boxed .page-wrapper {
            max-width:
                1350px            ;
        }

        /*==1 COLUMN==*/
        
        .col1-layout .products.wrapper.products-grid .item {
            width:
                20%            ;
        }

        .col1-layout .products.wrapper.products-grid .item:nth-child(5n+1) {
            clear: both;
        }

        /*==2 COLUMNS==*/
        
        .col2-layout .products.wrapper.products-grid .item {
            width:
                25%            ;
        }

        .col2-layout .products.wrapper.products-grid .item:nth-child(4n+1) {
            clear: both;
        }

        /*==3 COLUMNS==*/
        
        .col3-layout .products.wrapper.products-grid .item {
            width:
                33.333333333333%            ;
        }

        .col3-layout .products.wrapper.products-grid .item:nth-child(3n+1) {
            clear: both;
        }
    }

    @media (min-width: 992px) and (max-width: 1199px) {

        /*==1 COLUMN==*/
        
        .col1-layout .products.wrapper.products-grid .item {
            width:
                25%            ;
        }

        .col1-layout .products.wrapper.products-grid .item:nth-child(4n+1) {
            clear: both;
        }

        /*==2 COLUMNS==*/
        
        .col2-layout .products.wrapper.products-grid .item {
            width:
                33.333333333333%            ;
        }

        .col2-layout .products.wrapper.products-grid .item:nth-child(3n+1) {
            clear: both;
        }

        /*==3 COLUMNS==*/
        
        .col3-layout .products.wrapper.products-grid .item {
            width:
                50%            ;
        }

        .col3-layout .products.wrapper.products-grid .item:nth-child(2n+1) {
            clear: both;
        }
    }

    @media (min-width: 768px) and (max-width: 991px) {

        /*==1 COLUMN==*/
        
        .col1-layout .products.wrapper.products-grid .item {
            width:
                33.333333333333%            ;
        }

        .col1-layout .products.wrapper.products-grid .item:nth-child(3n+1) {
            clear: both;
        }

        /*==2 COLUMNS==*/
        
        .col2-layout .products.wrapper.products-grid .item {
            width:
                33.333333333333%            ;
        }

        .col2-layout .products.wrapper.products-grid .item:nth-child(3n+1) {
            clear: both;
        }

        /*==3 COLUMNS==*/
        
        .col3-layout .products.wrapper.products-grid .item {
            width:
                33.333333333333%            ;
        }

        .col3-layout .products.wrapper.products-grid .item:nth-child(3n+1) {
            clear: both;
        }
    }

    @media (min-width: 481px) and (max-width: 767px) {

        /*==1 COLUMN==*/
        
        .col1-layout .products.wrapper.products-grid .item {
            width:
                50%            ;
        }

        .col1-layout .products.wrapper.products-grid .item:nth-child(2n+1) {
            clear: both;
        }

        /*==2 COLUMNS==*/
        
        .col2-layout .products.wrapper.products-grid .item {
            width:
                50%            ;
        }

        .col2-layout .products.wrapper.products-grid .item:nth-child(2n+1) {
            clear: both;
        }

        /*==3 COLUMNS==*/
        
        .col3-layout .products.wrapper.products-grid .item {
            width:
                100%            ;
        }

        .col3-layout .products.wrapper.products-grid .item:nth-child(1n+1) {
            clear: both;
        }
    }

    @media (max-width: 480px) {

        /*==1 COLUMN==*/
        
        .col1-layout .products.wrapper.products-grid .item {
            width:
                100%            ;
        }

        .col1-layout .products.wrapper.products-grid .item:nth-child(1n+1) {
            clear: both;
        }

        /*==2 COLUMNS==*/
        
        .col2-layout .products.wrapper.products-grid .item {
            width:
                100%            ;
        }

        .col2-layout .products.wrapper.products-grid .item:nth-child(1n+1) {
            clear: both;
        }

        /*==3 COLUMNS==*/
        
        .col3-layout .products.wrapper.products-grid .item {
            width:
                100%            ;
        }

        .col3-layout .products.wrapper.products-grid .item:nth-child(1n+1) {
            clear: both;
        }
    }