/**
 * Atelier — Product carousel (C13). A horizontally-scrolling row of
 * .atl-product-card items (from _product-card.css) with prev/next arrow
 * controls. Scrolling itself uses native CSS scroll-snap so it works with
 * touch/trackpad/keyboard with no JS required; the arrow buttons are a
 * progressive-enhancement convenience layered on top via scrollBy().
 */
.atl-carousel { position: relative; }
.atl-carousel-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 4px;
  padding-bottom: 4px;
  /* Hide the native scrollbar visually -- scroll-snap + arrow buttons are
     the primary interaction; touch/trackpad users still scroll normally. */
  scrollbar-width: none;
}
.atl-carousel-track::-webkit-scrollbar { display: none; }
.atl-carousel-track > * { flex: 0 0 auto; width: 260px; scroll-snap-align: start; }

.atl-carousel-arrow {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border: 1px solid var(--atl-border-strong);
  background: var(--atl-surface);
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 16px;
  color: var(--atl-text);
  z-index: 2;
}
.atl-carousel-arrow:focus-visible { outline: 2px solid var(--atl-focus-ring); outline-offset: 2px; }
.atl-carousel-arrow--prev { left: -21px; }
.atl-carousel-arrow--next { right: -21px; }

@media (max-width: 767px) {
  .atl-carousel-track > * { width: 200px; }
  .atl-carousel-arrow { display: none; }
}