/* ============================================
   CSS Scroll Snap Carousel — zero CLS
   Layout jest identyczny przed i po załadowaniu JS.
   JS dodaje tylko: drag myszką + strzałki nawigacji.
   ============================================ */

/* Kontener karuzeli */
.css-carousel {
  position: relative;
}

/* Track (scrollowalny kontener z kartami) */
.css-carousel__track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; /* Smooth scroll na iOS */

  /* Ukryj natywny scrollbar */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.css-carousel__track::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

/* Pojedynczy slajd */
.css-carousel__slide {
  flex: 0 0 calc(50% - 5px); /* 2 slajdy na mobile */
  scroll-snap-align: start;
  min-width: 0; /* Zapobiega overflow z długimi nazwami */
}

/* Karta produktu wewnątrz slajdu — pełna szerokość i wysokość */
.css-carousel__slide .product-card {
  width: 100%;
  height: 100%;
}

/* Kursor "grab" podczas drag na desktop */
.css-carousel__track.is-grabbing {
  cursor: grabbing;
  scroll-snap-type: none; /* Wyłącz snap podczas drag */
  scroll-behavior: auto; /* Natychmiastowy scroll podczas drag */
  user-select: none;
}

.css-carousel__track.is-grab {
  cursor: grab;
}

/* Podczas drag wyłącz pointer-events na linkach (zapobiegaj przypadkowym kliknięciom) */
.css-carousel__track.is-grabbing a,
.css-carousel__track.is-grabbing button {
  pointer-events: none;
}

/* ---- Strzałki nawigacji ---- */
.css-carousel__nav {
  display: none; /* Domyślnie ukryte na mobile */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s, background-color 0.2s;
  color: var(--bs-primary, #007bff);
  font-size: 18px;
  padding: 0;
}

.css-carousel__nav:hover {
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.css-carousel__nav:disabled {
  opacity: 0.3;
  cursor: default;
}

.css-carousel__nav--prev {
  left: -15px;
}

.css-carousel__nav--next {
  right: -15px;
}

/* ---- Breakpoints (dopasowane do Swipera: 2 → 4 → 6) ---- */

/* Tablet ≥768px — 4 slajdy */
@media (min-width: 768px) {
  .css-carousel__slide {
    flex: 0 0 calc(25% - 8px);
  }
}

/* Desktop ≥992px — 6 slajdów + strzałki */
@media (min-width: 992px) {
  .css-carousel__slide {
    flex: 0 0 calc(16.666% - 9px);
  }

  .css-carousel {
    padding-left: 25px;
    padding-right: 25px;
  }

  .css-carousel__nav {
    display: flex; /* Pokaż strzałki na desktop */
  }
}

/* ---- Rezerwacja miejsca (anti-CLS, tak samo jak Swiper) ---- */
.css-carousel__track {
  min-height: 340px;
}

@media (min-width: 992px) {
  .css-carousel__track {
    min-height: 420px;
  }
}