/* Index page listing sliders: fewer, wider cards per view */
.cards-slider-view {
    --slider-gap: 12px;
    --cards-visible: 4;
}

.cards-slider-view .shops-scroll-container {
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.cards-slider-view .shops-horizontal-scroll,
.cards-slider-view .product-slider {
    display: flex;
    gap: var(--slider-gap);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    padding: 4px 0 2px;
}

.cards-slider-view .shops-horizontal-scroll::-webkit-scrollbar,
.cards-slider-view .product-slider::-webkit-scrollbar {
    display: none !important;
    height: 0 !important;
    width: 0 !important;
}

.cards-slider-view .shop-card-wrapper,
.cards-slider-view .product-slider > .slider-item,
.cards-slider-view .product-slider > .shop-card-wrapper {
    flex: 0 0 calc((100% - (var(--cards-visible) - 1) * var(--slider-gap)) / var(--cards-visible));
    max-width: calc((100% - (var(--cards-visible) - 1) * var(--slider-gap)) / var(--cards-visible));
    min-width: 0;
    min-height: 0 !important;
    height: auto !important;
    scroll-snap-align: start;
}

/* CMS chip rows — hide scrollbar, keep swipe */
.cms-chip-row,
.site-cms-category-slider .overflow-auto,
.site-cms-subcategory-slider .overflow-auto {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.cms-chip-row::-webkit-scrollbar,
.site-cms-category-slider .overflow-auto::-webkit-scrollbar,
.site-cms-subcategory-slider .overflow-auto::-webkit-scrollbar {
    display: none;
    height: 0;
}

/* Avoid page-level horizontal scroll from sliders */
.site-cms-section,
.cards-slider-view,
.full-width-slider-section {
    max-width: 100%;
    overflow-x: clip;
}

.site-cms-section.py-5 {
    padding-top: 1.75rem !important;
    padding-bottom: 1.75rem !important;
}

@media (max-width: 1199.98px) {
    .cards-slider-view {
        --cards-visible: 3;
    }
}

@media (max-width: 991.98px) {
    .cards-slider-view {
        --cards-visible: 3;
    }
}

@media (max-width: 767.98px) {
    .cards-slider-view {
        --cards-visible: 2;
    }
}

@media (max-width: 575.98px) {
    .cards-slider-view {
        --cards-visible: 1.15;
    }
}
