/**
 * SES Featured Products Carousel
 *
 * Independent carousel styling.
 *
 * Uses existing SES structure:
 *
 * .ses-featured-products
 *     .ses-products
 *         .ses-product
 *
 * Existing SES product classes are not renamed
 * or structurally modified.
 *
 * Compatible with:
 * - SES Product Cards
 * - SES Search Pagination
 * - Responsive layout
 *
 * Version: 2.0.0
 */


/* -------------------------------------------------------
 * Carousel Container
 * ------------------------------------------------------- */

.ses-featured-products {
    position: relative;
    width: 100%;
    overflow: hidden;
}


/* -------------------------------------------------------
 * Products Track
 * ------------------------------------------------------- */

.ses-featured-products .ses-products {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;

    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;

    transition: transform 0.35s ease;
    will-change: transform;

    direction: rtl;
}


/* -------------------------------------------------------
 * Product Cards
 * ------------------------------------------------------- */

.ses-featured-products .ses-product {
    flex: 0 0 25%;
    width: 25%;
    max-width: 25%;

    box-sizing: border-box;

    margin: 0;
    padding-left: 8px;
    padding-right: 8px;

    direction: rtl;
}


/* -------------------------------------------------------
 * Prevent Horizontal Overflow
 * ------------------------------------------------------- */

.ses-featured-products .ses-product {
    min-width: 0;
}


/* -------------------------------------------------------
 * Navigation Buttons
 * ------------------------------------------------------- */

.ses-featured-products
.ses-featured-carousel__prev,

.ses-featured-products
.ses-featured-carousel__next {
    position: absolute;

    top: 50%;
    z-index: 20;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    padding: 0;
    margin: 0;

    border: 0;
    border-radius: 50%;

    cursor: pointer;

    transform: translateY(-50%);

    line-height: 1;
}


/* -------------------------------------------------------
 * Previous Button
 * ------------------------------------------------------- */

.ses-featured-products
.ses-featured-carousel__prev {
    right: 8px;
}


/* -------------------------------------------------------
 * Next Button
 * ------------------------------------------------------- */

.ses-featured-products
.ses-featured-carousel__next {
    left: 8px;
}


/* -------------------------------------------------------
 * Navigation Hover
 * ------------------------------------------------------- */

.ses-featured-products
.ses-featured-carousel__prev:hover,

.ses-featured-products
.ses-featured-carousel__next:hover {
    cursor: pointer;
}


/* -------------------------------------------------------
 * Navigation Focus
 * ------------------------------------------------------- */

.ses-featured-products
.ses-featured-carousel__prev:focus-visible,

.ses-featured-products
.ses-featured-carousel__next:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}


/* -------------------------------------------------------
 * Tablet
 *
 * 901px - 1200px
 *
 * 3 cards
 * ------------------------------------------------------- */

@media (max-width: 1200px) {

    .ses-featured-products .ses-product {
        flex-basis: 33.333333%;
        width: 33.333333%;
        max-width: 33.333333%;
    }

}


/* -------------------------------------------------------
 * Small Tablet
 *
 * 601px - 900px
 *
 * 2 cards
 * ------------------------------------------------------- */

@media (max-width: 900px) {

    .ses-featured-products .ses-product {
        flex-basis: 50%;
        width: 50%;
        max-width: 50%;
    }

}


/* -------------------------------------------------------
 * Mobile
 *
 * 600px and below
 *
 * 1 card
 * ------------------------------------------------------- */

@media (max-width: 600px) {

    .ses-featured-products .ses-product {
        flex-basis: 100%;
        width: 100%;
        max-width: 100%;
    }


    .ses-featured-products
    .ses-featured-carousel__prev,

    .ses-featured-products
    .ses-featured-carousel__next {
        width: 36px;
        height: 36px;
    }


    .ses-featured-products
    .ses-featured-carousel__prev {
        right: 6px;
    }


    .ses-featured-products
    .ses-featured-carousel__next {
        left: 6px;
    }

}


/* -------------------------------------------------------
 * Reduced Motion
 * ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .ses-featured-products .ses-products {
        transition: none;
    }

}