/* 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;
    }
}

/* ==========================================================================
   Gutter between cards — "More for you" and "Recently viewed"
   The theme's gutter is --grid-horizontal-space: .grid carries a negative
   margin of half of it and each item half as padding, so raising the variable
   widens the gaps while the row's outer edges stay flush with the page.

   It is set on the .grid element rather than the section wrapper because
   base.css re-declares the variable ON .grid inside a max-width:959px query;
   an id here outranks that at both breakpoints.
   ========================================================================== */
#shopline-section-product-recommendations .grid,
#shopline-section-recently-viewed-products .grid {
    --grid-horizontal-space: 16px;
}

@media screen and (max-width: 959px) {
    #shopline-section-product-recommendations .grid,
    #shopline-section-recently-viewed-products .grid {
        --grid-horizontal-space: 12px;
    }
}