/* Товарный слайдер Каспер/Света: одна карточка в кадре, свайп + точки.
   Стрелок нет (как у Tesla) — их не добавляет slider-ui.js. Логика
   активного индекса — в lib/slider.js. Фото на белом сливаются с белой
   секцией: трек без рамки и тени, шва не видно. */

.slider {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

.slider__track {
  display: flex;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain; /* свайп карусели не «тащит» всю страницу вбок */
  background: transparent;     /* сливается с белой секцией */
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.slider__track::-webkit-scrollbar { display: none; }

.slider__slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.slider__slide img {
  width: auto;
  height: 100%;
  max-height: 100%;
  /* contain: товар целиком, фон фото (белый/прозрачный) совпадает с фоном секции. */
  object-fit: contain;
}

/* ===== Точки (Tesla-style: круглые, активная чёрная, неактивные серые) ===== */
.slider__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  flex: 0 0 auto;
}
.slider__dot {
  position: relative;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: none; padding: 0; cursor: pointer;
  background: rgba(23, 26, 32, 0.45);
  transition: background-color 0.2s var(--ease-out);
}
.slider__dot::before {
  content: "";
  position: absolute;
  inset: -14px;
}
.slider__dot.is-active { background: #171a20; }

/* Товарный слайдер — явная высота (секции центрируют контент по содержимому). */
.section--casper .slider,
.section--sveta .slider {
  height: clamp(350px, 56svh, 680px);
  max-width: min(100vw, 900px);
  margin-inline: auto;
}
/* «Света»: кадр вытянутый (contain делает его уже) — даём больше высоты,
   чтобы панель не казалась мелкой и далёкой рядом с крупным Каспером. */
.section--sveta .slider { height: clamp(430px, 64svh, 800px); }
.section--sveta .slider__slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 480px) {
  .section--casper .slider,
  .section--sveta .slider {
    width: calc(100vw - 8px);
    height: clamp(330px, 48svh, 500px);
  }
  .section--sveta .slider { height: clamp(430px, 60svh, 620px); }
}