/* Lățimea cardurilor din rail-ul CategorySlider — chrome-ul comun (cap de secțiune,
   săgeți, fade) e generic, în `item-slider.css`. Fără border propriu pe `.category-item`:
   CategoryCard folosește deja border-ul nativ Bootstrap `.card`. */
.category-item {
    scroll-snap-align: start;
    /* 5 carduri vizibile pe desktop lat, cu gap-ul de 1rem scăzut proporțional — identic cu ProductSlider */
    width: calc((100% - 4rem) / 5);
    min-width: 220px;
}

@media (max-width: 991.98px) {
    .category-item {
        /* ~3 carduri întregi + un fragment din al 4-lea (fade), ca în design tabletă */
        width: calc((100% - 2rem) / 3.4);
    }
}

@media (max-width: 767.98px) {
    .category-item {
        /* 1 card întreg + o mare parte din al 2-lea (fade), ca în design mobil */
        width: calc((100% - 1rem) / 1.8);
        min-width: 0;
    }
}