/* Product Recommendations Slider Styles */

.slider-product-recommendations {
    position: relative;
}

/* Desktop slider peek effect */
@media screen and (min-width: 960px) {
    .grid-cols-4-desktop>* {
        width: 24%;
    }
    
    .slider-product-recommendations .slider--desktop {
        overflow-x: auto;
        overflow-y: hidden;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Firefox */
        -ms-overflow-style: none;
        /* IE/Edge */
    }

    .slider-product-recommendations .slider--desktop::-webkit-scrollbar {
        display: none;
        /* Chrome/Safari */
    }

    /* Show peek of next card */
    .slider-product-recommendations .slider--desktop.grid-cols-4-desktop {
        grid-template-columns: repeat(auto-fill, calc((100% - 3 * 16px) / 4.3)) !important;
    }

    /* Arrow buttons */
    .slider-product-recommendations .colletionlist__arrow {
        position: absolute;
        left: -10px;
        top: calc(50% - 50px);
        align-items: center;
        background-color: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        color: rgb(var(--color-text));
        cursor: pointer;
        display: flex;
        height: 30px;
        width: 55px;
        justify-content: center;
        outline: none;
        transition: box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1),
            transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 2;
    }

    .slider-product-recommendations .colletionlist__arrow svg {
        width: 16px;
        height: 16px;
    }

    .slider-product-recommendations .colletionlist__arrow:hover {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
        transform: scale(1.1);
    }

    .slider-product-recommendations .colletionlist__arrow:disabled {
        cursor: not-allowed;
        opacity: 0.3;
    }

    .slider-product-recommendations .colletionlist__arrow--right {
        right: -10px;
        left: unset;
    }

    /* Rotate arrows to point left/right */
    .slider-product-recommendations .colletionlist__arrow {
        transform: rotate(90deg);
    }

    .slider-product-recommendations .colletionlist__arrow:hover {
        transform: rotate(90deg) scale(1.1);
    }

    .slider-product-recommendations .colletionlist__arrow--right {
        transform: rotate(-90deg);
    }

    .slider-product-recommendations .colletionlist__arrow--right:hover {
        transform: rotate(-90deg) scale(1.1);
    }
}

/* Mobile slider peek effect */
@media screen and (max-width: 959px) {
    .grid-cols-2>li {
            width: 46%;
    }
    
    .slider-product-recommendations .slider--mobile {
        overflow-x: auto;
        overflow-y: hidden;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .slider-product-recommendations .slider--mobile::-webkit-scrollbar {
        display: none;
    }

    /* Show peek of 3rd card on mobile */
    .slider-product-recommendations .slider--mobile.grid-cols-2 {
        grid-template-columns: repeat(auto-fill, calc((100% - 16px) / 2.4)) !important;
    }

    .slider-product-recommendations .slider--mobile.grid-cols-1 {
        grid-template-columns: repeat(auto-fill, calc(100% / 1.3)) !important;
    }
}