/* Unikalny namespace: wscl__*
   Wersja: slider działa zawsze (desktop/tablet/mobile).
   Strzałki (jeśli są w HTML) obsłuży JS – ale sam scroll działa bez nich.
*/

.wscl {
  width: 100%;
  position: relative;
}

.wscl__viewport {
  width: 100%;
}

/* Track – ZAWSZE slider (poziomy scroll) */
.wscl__track {
  display: flex;
  align-items: flex-start;

  gap: 26px;
  flex-wrap: nowrap;

  overflow-x: auto;
  overflow-y: hidden;

  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;

  /* Ukryj paski przewijania */
  scrollbar-width: none; /* Firefox */
  padding-bottom: 6px;
}

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

/* Item */
.wscl__item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  user-select: none;

  /* Desktop: 6 widocznych */
  flex: 0 0 calc((100% - (26px * 5)) / 6);
  scroll-snap-align: start;
  min-width: 0;
}

.wscl__imgWrap {
  width: 192px;
  height: 192px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wscl__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Tytuł – wg wymagań */
.wscl__title {
  margin-top: 10px;
  color: #333;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.2;
  text-align: center;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Nawigacja – Ty dodasz SVG (opcjonalnie, gdy elementów > 6) */
.wscl__nav {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.wscl__btn {
  pointer-events: auto;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wscl__btn--prev,
.wscl__btn--next {
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
}

.wscl__btn--prev {
  left: 20px;
}

.wscl__btn--next {
  right: 20px;
}

/* Tablet: 2 widoczne */
@media (max-width: 1024px) {
  .wscl__item {
    flex-basis: calc((100% - 26px) / 2);
  }
}

/* Telefon: 1 widoczna */
@media (max-width: 640px) {
  .wscl__track {
    gap: 16px;
  }

  .wscl__item {
    flex-basis: 100%;
  }

  .wscl__imgWrap {
    width: 188px;
    height: 188px;
  }
}
/* JS będzie sterował widocznością strzałek przez klasę .is-hidden */
.wscl__nav.is-hidden {
  display: none !important;
}

/* Dla pewności: strzałki są ponad trackiem */
.wscl__nav {
  z-index: 5;
}

/* Klikalny obszar */
.wscl__btn {
  width: 70px;
  height: 39px;
}