.recommendations { background: var(--color-border-subtle); }
.recommendations__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); margin-block-end: var(--space-12); }
.recommendations__heading { min-inline-size: 0; }
.recommendations__navigation:not([hidden]) { display: flex; flex-shrink: 0; gap: var(--space-6); margin-inline-start: auto; }
.recommendations__viewport { min-inline-size: 0; }
.recommendations__track { align-items: flex-start; }
.recommendations__slide { min-inline-size: 0; block-size: auto; }
.recommendations__viewport:focus-visible { outline: 2px solid var(--color-accent); outline-offset: var(--space-1); }

/* Keep every letter reachable by native horizontal scrolling before JS loads. */
.recommendations__viewport:not(.swiper-initialized) { overflow-x: auto; scroll-snap-type: x mandatory; }
.recommendations__viewport:not(.swiper-initialized) .recommendations__slide { flex: 0 0 20%; scroll-snap-align: start; }
@media (width < 75rem) and (width >= 48rem) {
    .recommendations__viewport:not(.swiper-initialized) .recommendations__slide { flex-basis: calc(100% / 3); }
}
@media (width < 48rem) {
    .recommendations__header { flex-wrap: wrap; gap: var(--space-4); margin-block-end: var(--space-8); }
    .recommendations__heading { flex-basis: 100%; font-size: clamp(var(--fs-body), 4.6vw, var(--fs-card-title-max)); }
    .recommendations__viewport:not(.swiper-initialized) .recommendations__slide { flex-basis: 100%; }
}