/* ==========================================================================
   Composants — carrousel Best Sellers
   ========================================================================== */

.carousel {
  position: relative;
}

.carousel-viewport {
  overflow: hidden;
  padding-block: var(--space-2);
  /* laisse respirer les ombres des cartes */
  margin-inline: calc(var(--space-2) * -1);
  padding-inline: var(--space-2);
}

.carousel-track {
  display: flex;
  gap: var(--space-5);
  will-change: transform;
}

.carousel-track > * {
  flex: 0 0 calc((100% - 2 * var(--space-5)) / 3);
}

.carousel-nav {
  position: absolute;
  top: 40%;
  z-index: var(--z-raised);
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  color: var(--color-text);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  transition: background var(--duration-fast) var(--ease-out-expo),
    color var(--duration-fast) var(--ease-out-expo),
    opacity var(--duration-fast) var(--ease-out-expo),
    transform var(--duration-base) var(--ease-out-expo);
}

.carousel-nav:hover {
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  transform: scale(1.08);
}

.carousel-nav:disabled {
  opacity: 0.35;
  pointer-events: none;
}

.carousel-nav svg {
  width: 22px;
  height: 22px;
}

.carousel-prev {
  left: calc(var(--space-5) * -0.5);
  transform: translateX(-50%);
}

.carousel-next {
  right: calc(var(--space-5) * -0.5);
  transform: translateX(50%);
}

.carousel-prev:hover {
  transform: translateX(-50%) scale(1.08);
}

.carousel-next:hover {
  transform: translateX(50%) scale(1.08);
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

.carousel-dot {
  width: 9px;
  height: 9px;
  border-radius: var(--radius-pill);
  background: var(--color-text-faint);
  transition: background var(--duration-fast) var(--ease-out-expo),
    width var(--duration-base) var(--ease-out-expo);
}

.carousel-dot.is-active {
  width: 26px;
  background: var(--color-accent);
}

@media (max-width: 1100px) {
  .carousel-track > * {
    flex-basis: calc((100% - var(--space-5)) / 2);
  }
}

@media (max-width: 640px) {
  .carousel-track > * {
    flex-basis: 100%;
  }

  .carousel-prev {
    left: 4px;
    transform: none;
  }

  .carousel-next {
    right: 4px;
    transform: none;
  }

  .carousel-prev:hover,
  .carousel-next:hover {
    transform: scale(1.08);
  }
}