/* === PxlSlider base === */
.pxl-slider {
  position: relative;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

.pxl-slider__wrapper {
  display: flex;
  height: 100%;
  position: relative;
  transition: transform 0.4s ease;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.pxl-slider__wrapper.is-dragging {
  transition: none;
}

/* === Main slider === */
.pxl-slider--main {
  aspect-ratio: 768 / 515;
  border-radius: 8px;
  background: #f5f5f5;
  touch-action: pan-y;
}
.pxl-slider-container:not(:has(.pxl-slider--thumbs)) .pxl-slider--main {
  aspect-ratio: 768 / 596;
}

.pxl-slider--main .pxl-slider__slide {
  flex: 0 0 100%;
  height: 100%;
}

.pxl-slider--main .pxl-slider__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* === Thumbs === */
.pxl-slider--thumbs {
  margin-top: 20px;
  height: 111px;
  touch-action: pan-y;
}

.pxl-slider--thumbs .pxl-slider__wrapper {
  gap: 20px;
  padding: 0;
}

.pxl-slider--thumbs .pxl-slider__slide {
  flex: 0 0 177px;
  height: 100%;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  opacity: 0.5;
  transition: all 0.25s;
}

.pxl-slider--thumbs .pxl-slider__slide:hover {
  opacity: 0.8;
}

.pxl-slider--thumbs .pxl-slider__slide--active {
  pointer-events: none;
  opacity: 1 !important;
}

.pxl-slider--thumbs .pxl-slider__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* === Buttons === */
.pxl-slider__buttons {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  z-index: 5;
}

.pxl-slider__prev,
.pxl-slider__next {
  pointer-events: auto;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
  color: #333;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: background 0.2s;
}

.pxl-slider__prev:hover,
.pxl-slider__next:hover {
  background: rgba(255, 255, 255, 1);
}

/* Thumbs buttons — меньше */
.pxl-slider--thumbs .pxl-slider__buttons {
  padding: 0 2px;
}

.pxl-slider--thumbs .pxl-slider__prev,
.pxl-slider--thumbs .pxl-slider__next {
  width: 24px;
  height: 24px;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.85);
}

/* === Responsive === */
@media (max-width: 768px) {
  .pxl-slider--main { aspect-ratio: 16 / 9; }
  .pxl-slider--thumbs { height: 64px; }
  .pxl-slider--thumbs .pxl-slider__slide { flex: 0 0 64px; height: 64px; }
}