/*
Theme Name:   Clotya Child
Theme URI:    http://klbtheme.com/clotya/
Description:  Clotya Child Theme
Author:       KlbTheme
Author URI:   http://themeforest.net/user/KlbTheme
Template:     clotya
Version:      1.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain:  clotya-child
*/

/* ========================================
   Product Carousel and Related/Upsell Responsive Columns
   ======================================== */

/* Related Products, Upsell Products, and Cross Sells - Desktop (6 columns) */
.related.products ul.products,
.upsells.products ul.products,
.cross-sells ul.products {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 30px;
}

/* Ensure list items don't have fixed widths from parent theme */
.related.products ul.products li.product,
.upsells.products ul.products li.product,
.cross-sells ul.products li.product {
    width: auto !important;
    margin: 0 !important; /* Reset margins that might be used for spacing in flex/float layouts */
    float: none !important;
    max-width: 100% !important;
}

/* Tablet (4 columns) */
@media (max-width: 1024px) {
    .related.products ul.products,
    .upsells.products ul.products,
    .cross-sells ul.products {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 15px;
    }
}

/* Mobile (4 columns) - Explicitly overriding any smaller breakpoints */
@media (max-width: 768px) {
    .related.products ul.products,
    .upsells.products ul.products,
    .cross-sells ul.products {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 10px;
    }
}

/* Small Mobile (4 columns as requested) */
@media (max-width: 480px) {
    .related.products ul.products,
    .upsells.products ul.products,
    .cross-sells ul.products {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 5px; /* Very small gap to fit 4 items */
    }
}

/* Fallback for browsers without grid support using flex */
@supports not (display: grid) {
    .related.products ul.products,
    .upsells.products ul.products,
    .cross-sells ul.products {
        display: flex;
        flex-wrap: wrap;
    }
    
    .related.products ul.products li.product,
    .upsells.products ul.products li.product,
    .cross-sells ul.products li.product {
        flex: 0 0 calc(16.66% - 25px);
        margin-right: 30px;
        margin-bottom: 30px;
    }
    
    @media (max-width: 1024px) {
        .related.products ul.products li.product,
        .upsells.products ul.products li.product,
        .cross-sells ul.products li.product {
            flex: 0 0 calc(25% - 22.5px);
        }
    }
    
    @media (max-width: 768px) {
        .related.products ul.products li.product,
        .upsells.products ul.products li.product,
        .cross-sells ul.products li.product {
            flex: 0 0 calc(25% - 15px);
            margin-right: 20px;
            margin-bottom: 20px;
        }
    }
    
    @media (max-width: 480px) {
        .related.products ul.products li.product,
        .upsells.products ul.products li.product,
        .cross-sells ul.products li.product {
            flex: 0 0 calc(25% - 5px);
            margin-right: 5px;
            margin-bottom: 15px;
        }
    }
}