/* ==========================================================================
   Queenie-B Honey — Auto-advancing carousel
   Native CSS scroll-snap track; see js/carousel.js for the auto-advance,
   pause-on-hover/focus behavior. Cards keep using existing component
   classes (.product-card, .testimonial-card, etc.) — this only governs
   the track/viewport around them.
   ========================================================================== */

.carousel {
  position: relative;
  /* Any flex/grid ancestor (grid-2, grid-3, product-card grids, etc.) gives
     its items an implicit min-width:auto, sized to the LARGEST min-content
     of their descendants. Since .carousel__track holds many non-shrinking
     flex:0 0 auto cards (tripled by the clone-for-looping logic in
     carousel.js), that min-content is huge — several thousand px — and
     without this override the whole grid track balloons to match, blowing
     out the page width instead of letting .carousel__viewport's overflow-x
     do its job. min-width: 0 here is what actually lets the scroll-clipping
     apply. */
  min-width: 0;
}

.carousel__viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  min-width: 0;
}
.carousel__viewport::-webkit-scrollbar { display: none; }

.carousel__track {
  display: flex;
  gap: var(--grid-gap);
}

.carousel__track > * {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: min(32rem, 82vw);
}

/* Cloned cards exist only to make the infinite-scroll wrap seamless — they
   should never be reachable by keyboard/click, only ever glimpsed mid-animation. */
.carousel__clone { pointer-events: none; }

.carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.carousel__dot {
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: var(--color-line-strong);
  transition: background var(--duration-base) var(--ease-primary), transform var(--duration-base) var(--ease-primary);
}
.carousel__dot.is-active {
  background: var(--color-accent);
  transform: scale(1.25);
}

/* Arrows float over the viewport edges so they work at every breakpoint
   without restructuring markup — just two buttons as direct children of
   .carousel, absolutely positioned relative to it. */
.carousel__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  border: var(--border-thin) solid var(--color-line);
  background: var(--color-white);
  color: var(--color-ink);
  box-shadow: var(--shadow-sm);
  transition: background var(--duration-base) var(--ease-primary), border-color var(--duration-base) var(--ease-primary), transform var(--duration-fast) var(--ease-primary);
}
.carousel__arrow:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-white); transform: translateY(-50%) scale(1.06); }
.carousel__arrow:active { transform: translateY(-50%) scale(0.96); }
.carousel__arrow svg { width: 1.8rem; height: 1.8rem; }
.carousel__arrow--prev { left: -1.6rem; }
.carousel__arrow--next { right: -1.6rem; }

@media (max-width: 640px) {
  .carousel__arrow { width: 3.6rem; height: 3.6rem; }
  .carousel__arrow svg { width: 1.5rem; height: 1.5rem; }
  .carousel__arrow--prev { left: 0.4rem; }
  .carousel__arrow--next { right: 0.4rem; }
}