/* ============================================================
   carousel.css — Componente de carousel com setas
   ============================================================ */

.carousel {
  position: relative;
}

/* ── SETAS ── */

/* Calcula o topo aproximado do track (exclui dots ≈ 2rem abaixo) */
.carousel__arrow {
  position: absolute;
  top: calc(50% - 1.25rem);
  transform: translateY(-50%);
  z-index: var(--ecom-z-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--ecom-radius-full);
  background-color: var(--ecom-bg-surface);
  border: 1px solid var(--ecom-border-default);
  box-shadow: var(--ecom-shadow-md);
  color: var(--ecom-text-primary);
  cursor: pointer;
  transition:
    background-color var(--ecom-duration-fast) var(--ecom-ease-default),
    box-shadow var(--ecom-duration-fast) var(--ecom-ease-default),
    opacity var(--ecom-duration-fast) var(--ecom-ease-default);
}

.carousel__arrow:hover {
  background-color: var(--ecom-color-neutral-800);
  color: var(--ecom-color-neutral-0);
  box-shadow: var(--ecom-shadow-lg);
}

.carousel__arrow:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

.carousel__arrow svg {
  width: 1.25rem;
  height: 1.25rem;
}

.carousel__arrow--prev {
  left: -0.75rem;
}

.carousel__arrow--next {
  right: -0.75rem;
}

/* Em telas menores, posicionar dentro do container */
@media (max-width: 1023px) {
  .carousel__arrow--prev {
    left: var(--ecom-space-2);
  }

  .carousel__arrow--next {
    right: var(--ecom-space-2);
  }
}

/* ── TRACK ── */

.carousel__track {
  scroll-behavior: smooth;
}

/* ── MARCAS: items no scroll horizontal ── */

.brands__track {
  gap: var(--ecom-space-6);
}

.brands__track .brand-card {
  flex-shrink: 0;
  min-width: 11rem;
}

@media (min-width: 768px) {
  .brands__track .brand-card {
    min-width: 13rem;
  }
}

/* ── PRODUTOS: vitrine em slider ── */

.products__track {
  gap: var(--ecom-space-5);
  padding-bottom: var(--ecom-space-4);
}

.products__track > * {
  width: calc(100vw - var(--ecom-space-8));
  flex-shrink: 0;
  scroll-snap-align: start;
}

@media (min-width: 640px) {
  .products__track > * {
    width: 20rem;
  }
}

.products__track .promo-banner {
  width: 14rem;
  flex-shrink: 0;
}

.products__track .promo-banner__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--ecom-radius-xl);
}

/* ── DESKTOP: products com largura fixa de 320px (slider mantido) ── */
@media (min-width: 1024px) {
  .products__track > * {
    width: 320px;
    min-width: 320px;
  }

  .products__track .promo-banner {
    width: 320px;
  }
}


/* ── MÁQUINAS: vitrine em slider ── */

.machines__track {
  gap: var(--ecom-space-5);
  padding-bottom: var(--ecom-space-4);
}

.machines__track > * {
  width: calc(100vw - var(--ecom-space-8));
  flex-shrink: 0;
  scroll-snap-align: start;
}

@media (min-width: 640px) {
  .machines__track > * {
    width: 22rem;
  }
}

@media (min-width: 1024px) {
  .machines__track > * {
    width: calc((100% - var(--ecom-space-5) * 3) / 4);
    min-width: 18rem;
  }
}

/* ── MOBILE: setas menores, dentro do container ── */
@media (max-width: 767px) {
  .carousel__arrow {
    width: 2rem;
    height: 2rem;
    background-color: rgb(255 255 255 / 0.92);
    box-shadow: var(--ecom-shadow-sm);
  }

  .carousel__arrow svg {
    width: 1rem;
    height: 1rem;
  }
}

/* ── DOTS ── */

.carousel__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--ecom-space-2);
  margin-top: var(--ecom-space-4);
}

.carousel__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--ecom-radius-full);
  background-color: var(--ecom-color-neutral-300);
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition:
    background-color var(--ecom-duration-fast) var(--ecom-ease-default),
    width var(--ecom-duration-fast) var(--ecom-ease-default);
}

.carousel__dot:hover {
  background-color: var(--ecom-color-neutral-400);
}

.carousel__dot--active {
  background-color: var(--ecom-color-primary-500);
  width: 1.5rem;
}