/* Chrome generic reutilizat de orice slider orizontal de „iteme" (ProductSlider, CategorySlider):
   cap de secțiune (titlu + linie + acțiuni) + rail cu scroll-snap + fade-out + săgeți prev/next.
   Lățimea/border-ul/padding-ul FIECĂRUI item rămân în CSS-ul propriu componentei
   (`product-slider.css` → `.product-item`, `category-slider.css` → `.category-item`) — nu aici. */
.item-slider-title {
    font-size: var(--heading-s-size);
    line-height: var(--heading-s-line);
    color: var(--color-content-primary);
    white-space: nowrap;
}

.item-slider-rule {
    height: 1px;
    background-color: var(--color-border-primary);
}

.item-slider-see-all {
    background-color: transparent;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    padding: 0.75rem 1.25rem;
    color: var(--color-content-primary);
    white-space: nowrap;
}

.item-slider-nav {
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    color: var(--color-content-primary);
}

.item-slider-nav:hover {
    background-color: var(--color-bg-secondary);
}

/* ascuns de `initItemRails` (app.js) când rail-ul nu are ce derula (nu overflow-uiește);
   `.d-flex` e utility Bootstrap cu !important, deci suprascrierea are nevoie și ea de !important */
.item-slider-nav-group[hidden] {
    display: none !important;
}

/* Rail orizontal cu scroll-snap; bara de scroll ascunsă (navigare prin săgeți/drag).
   Fade-out în dreapta (mask-image) cât timp mai e conținut de derulat — indiciu vizual
   de scroll din design (ultimul item vizibil e parțial estompat); `app.js` (initItemRails)
   adaugă clasa `item-slider-rail-end` când s-a ajuns la capăt, ceea ce dezactivează masca. */
.item-slider-rail {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.25rem;
    mask-image: linear-gradient(to right, #000 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 80%, transparent 100%);
}

.item-slider-rail::-webkit-scrollbar {
    display: none;
}

.item-slider-rail-end {
    mask-image: none;
    -webkit-mask-image: none;
}