@layer components {

    /* Slider outer wrapper */
    .slider-outer {
        position: relative;
    }

    /* Scrollable container */
    .slider-wrap {
        --slides-gap: 48px;
        --slider-items-per-slide: 1;          /* Default: 1 item per slide */
        --slider-card-margin: 20px;           /* Default: 20px gap */
        --slider-min-width: 100%;            /* Default: no minimum */
        --slider-max-width: 100%;            /* Default: no maximum */
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding: 4px;
        margin: -4px;
        touch-action: pan-x;
    }

    .slider-wrap::-webkit-scrollbar {
        display: none;
    }

    /* Cards row */
    .slider-track {
        display: flex;
        gap: var(--slides-gap, 48px);
    }

    /* Slider card — snap + responsive width (calculated by CSS from variables) */
    .slider-track .slider-card {
        flex-shrink: 0;
        /* Calculate base width from CSS variables */
        --base-width: calc(
            (100% - (var(--slides-gap)) - ((var(--slider-items-per-slide) - 1) * var(--slider-card-margin)))
            / var(--slider-items-per-slide)
        );
        /* Apply width with optional min/max constraints */
        width: clamp(
            var(--slider-min-width, var(--base-width)),
            var(--base-width),
            var(--slider-max-width, 100vw)
        );
        scroll-snap-align: start;
        scroll-margin: 4px;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    /* Control buttons */
    .slider-navs {
        position: absolute;
        inset: 0;
        pointer-events: none;
    }

    .slider-navs .slider-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        transform: translateY(-80%);
        width: 40px;
        height: 40px;
        background-color: var(--bg-neutral-primary, #fff);
        border: 1px solid var(--border-neutral-secondary, #e6e6e6);
        border-radius: 4px;
        color: var(--text-neutral-primary, #1e1e1e);
        font-size: 24px;
        line-height: 1;
        cursor: pointer;
        pointer-events: all;
        user-select: none;
        transition: background-color 0.2s, opacity 0.2s, border-color 0.2s, outline-color 0.2s, color 0.2s;
    }

    .slider-navs .slider-btn:hover,
    .slider-navs .slider-btn:active {
        border-color: var(--border-neutral-primary, #f5f5f5);
    }

    .slider-navs .slider-btn:active {
        color: var(--text-neutral-secondary, #505050);
    }

    .slider-navs .slider-btn:is(:focus, :focus-visible) {
        outline: 2px solid var(--focus);
        outline-offset: 4px;
    }

    .slider-navs .slider-prev {
        left: 16px;
    }

    .slider-navs .slider-next {
        right: 16px;
    }

    /* Disabled button state */
    .slider-navs .slider-btn:disabled {
        opacity: 0.65;
        /*pointer-events: none;*/
        cursor: not-allowed;
        color: var(--text-neutral-secondary, #808080);
        border-color: var(--border-neutral-secondary, #e6e6e6);
    }

    @media all and (min-width: 0px) {

        .slider-wrap {
            --slides-gap: 24px;
        }
    }

    @media all and (min-width: 576px) {
        .slider-wrap {
            --slides-gap: 36px;
        }
    }

    @media all and (min-width: 1024px) {
        .slider-wrap {
            --slides-gap: 48px;
        }
    }

    /* Tablet */
    @media (max-width: 1023px) {
        .slider-navs {
            display: none;
        }
        .slider-wrap {
            scrollbar-width: thin;
            gap: 36px;
        }
    }

}