/**
 * Column Switcher CSS
 */
/* Image quality enhancements for 3-column layout */
.products-columns-3 .attachment-woocommerce_thumbnail,
.products-columns-3 .gallery-image {
    width: 100% !important;
    height: auto !important;
    transform: translateZ(0);
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Ensure Perfmatters lazy loading functions properly */
/* .products-columns-3 img.perfmatters-lazy.entered.pmloaded {
    width: 100% !important;
    height: auto !important;
} */

.shoptimizer-column-switcher {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 15px;
}

.column-switcher-label {
    margin-right: 10px;
    font-size: 0.7rem;
}

.column-switcher-buttons {
    display: flex;
    gap: 15px;
}

.column-switcher-button {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 2px 2px;
    font-size: 0.7rem;
    position: relative;
}

.column-switcher-button.active {
    font-weight: regular;
}

.column-switcher-button.active::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0px;
    width: 100%;
    height: 1px;
    background-color: currentColor;
}

/* Mobile-specific buttons */
.mobile-only {
    display: none;
}

/* Desktop-specific buttons */
.desktop-only {
    display: block;
}

/* Mobile layout */
@media (max-width: 991px) {
    /* Hide badge wrapper only for 3 columns on mobile */
    body.products-columns-3 .ckit-badge_wrapper {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .mobile-only {
        display: block;
    }

    .desktop-only {
        display: none;
    }
    
    .column-switcher-button {
        padding: 8px 8px;
    }
    
    .column-switcher-buttons {
        gap: 6px;
    }
    
    .column-switcher-button.active::after {
        bottom: 2px;
    }
    
    .shoptimizer-column-switcher {
        margin-bottom: 28px;
        margin-top: -32px;
        left: 15px;
        position: absolute;
    }
    
    /* Mobile column layouts */
    body.products-columns-1 ul.products,
    .columns-1 ul.products {
        display: grid !important;
        grid-template-columns: repeat(1, 1fr) !important;
    }
    
    body.products-columns-2 ul.products,
    .columns-2 ul.products {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    body.products-columns-3 ul.products,
    .columns-3 ul.products {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Desktop positioning */
@media (min-width: 768px) {
    .shoptimizer-column-switcher {
        top: -23px !important;
        position: relative !important;
        margin-bottom: 0;
    }
    
    .column-switcher-label {
        margin-right: 15px;
    }
    
    .column-switcher-buttons {
        gap: 20px;
    }
    
    /* Desktop column layouts */
    body.products-columns-3 ul.products,
    .columns-3 ul.products {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(10px, 1fr)) !important;
    }
    
    body.products-columns-4 ul.products,
    .columns-4 ul.products {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(10px, 1fr)) !important;
    }
    
    body.products-columns-6 ul.products,
    .columns-6 ul.products {
        display: grid !important;
        grid-template-columns: repeat(6, minmax(10px, 1fr)) !important;
    }
}

/* Reset product styling to work with grid */
body.products-columns-1 ul.products li.product,
body.products-columns-2 ul.products li.product, 
body.products-columns-3 ul.products li.product,
body.products-columns-4 ul.products li.product,
body.products-columns-6 ul.products li.product,
.columns-1 ul.products li.product,
.columns-2 ul.products li.product,
.columns-3 ul.products li.product,
.columns-4 ul.products li.product,
.columns-6 ul.products li.product {
    width: 100% !important;
    float: none !important;
    margin-right: 0 !important;
    clear: none !important;
}