/* carousel.css */
.section-alt { background: var(--color-muted); }
.carousel { position: relative; }
.carousel-track { display: flex; gap: var(--space-lg); overflow-x: auto; scroll-behavior: smooth;
  scroll-snap-type: x mandatory; padding-block-end: var(--space-sm); }
.carousel-track::-webkit-scrollbar { height: 4px; }
.carousel-track::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 4px; }
.carousel-track > * { scroll-snap-align: start; }
.carousel-arrow { position: absolute; inset-block-start: 40%; z-index: 2; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: 50%; width: 44px; height: 44px;
  display: grid; place-items: center; box-shadow: var(--shadow-md); color: var(--color-primary); }
/* In RTL inline-start = right, inline-end = left. Place each chevron on its matching side:
   prev (›, right-pointing) on the right; next (‹, left-pointing) on the left. */
.carousel-arrow.prev { inset-inline-start: -8px; }
.carousel-arrow.next { inset-inline-end: -8px; }
@media (max-width: 700px) { .carousel-arrow { display: none; } }
/* When arrows are hidden the track itself is keyboard-focusable and scrolls with arrow keys */
.carousel-track:focus-visible { outline: 2px solid var(--color-accent-strong); outline-offset: 4px; }

/* Real product cards in carousels need an explicit width (flex children otherwise collapse). */
.carousel-track .product-card { flex: 0 0 260px; min-width: 260px; }