.carousel {
    position: relative;
    width: 100%;
    outline: none;
    --spv: var(--spv-base, 1);
    --space: var(--space-base, 12px);
}

    .carousel.rtl {
        direction: rtl;
        --rtl-dir: -1;
    }

    /* Viewport: contain overflow, improve touch on iOS */
    .carousel .viewport {
        overflow: hidden;
        width: 100%;
        touch-action: pan-y pinch-zoom;
        -webkit-overflow-scrolling: touch;
    }

        .carousel .viewport.dragging a {
            pointer-events: none;
        }

    /* Track: simple flex row that moves with transform */
    .carousel .track {
        display: flex;
        flex-wrap: nowrap;
        transition: transform ease;
        will-change: transform;
        transform: translateZ(0);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }

    .carousel .viewport.dragging .track {
        transition-duration: 0ms !important;
    }

    /* Slides: width based on slides-per-view and spacing */
    .carousel .slide {
        flex: 0 0 calc((100% - (var(--space) * (var(--spv) - 1))) / var(--spv));
        min-width: 0;
        margin-right: var(--space);
    }

        /* Remove margin on the last slide to prevent extra gap */
        .carousel .slide:last-child {
            margin-right: 0;
        }

        /* Optional compact product variant */
        .carousel .slide.Products {
            max-width: 200px;
        }

            .carousel .slide.Products:nth-child(2) .product-card {
                border-top-right-radius: 10px !important;
            }

            .carousel .slide.Products:last-child .product-card {
                border-bottom-right-radius: 10px !important;
            }

        .carousel .slide .slide-content {
            height: auto;
        }

    /* Navigation arrows */
    .carousel .nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        border: none;
        background: rgba(0,0,0,.4);
        color: #fff;
        width: 28px;
        height: 44px;
        cursor: pointer;
        display: grid;
        place-items: center;
        z-index: 2;
    }

        .carousel .nav:hover {
            background: rgba(0,0,0,.6);
        }

        .carousel .nav.disabled {
            opacity: 0;
            pointer-events: none;
        }

        .carousel .nav.prev {
            left: 0;
            border-radius: 999px 0 0 999px;
        }

        .carousel .nav.next {
            right: 0;
            border-radius: 0 999px 999px 0;
        }

    .carousel.rtl .nav.prev {
        right: 0;
        left: auto;
    }

    .carousel.rtl .nav.next {
        left: 0;
        right: auto;
    }

    /* Dots */
    .carousel .dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 8px;
        align-items: center;
    }

    .carousel .dot {
        width: 8px;
        height: 8px;
        padding: 0;
        border-radius: 999px;
        border: none;
        background: #ccc;
        cursor: pointer;
    }

        .carousel .dot.active {
            width: 20px;
            background: #333;
        }

/* Simple responsive helpers via inline variables (kept minimal to avoid complexity) */
@media (min-width: 576px) {
    .carousel {
        --spv: var(--spv-sm, var(--spv));
        --space: var(--space-sm, var(--space));
    }
}

@media (min-width: 768px) {
    .carousel {
        --spv: var(--spv-md, var(--spv));
        --space: var(--space-md, var(--space));
    }
}

@media (min-width: 992px) {
    .carousel {
        --spv: var(--spv-lg, var(--spv));
        --space: var(--space-lg, var(--space));
    }
}

@media (min-width: 1200px) {
    .carousel {
        --spv: var(--spv-xl, var(--spv));
        --space: var(--space-xl, var(--space));
    }
}