/* Lățimea cardurilor din rail-ul ProductSlider — border-ul/padding-ul „boxului" de
   produs e pe ProductCard însuși (`.product-card`, în `product-card.css`), identic
   indiferent de context; chrome-ul comun (cap de secțiune, săgeți, fade) e generic,
   în `item-slider.css`. */
.product-item {
    scroll-snap-align: start;
    /* 5 carduri vizibile pe desktop lat, cu gap-ul de 1rem scăzut proporțional */
    width: calc((100% - 4rem) / 5);
    min-width: 220px;
}

@media (max-width: 991.98px) {
    .product-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) {
    .product-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;
    }
}