:root { --main-h: 685px; }

.main-wrapper {
  display: flex; gap: 15px;
  height: var(--main-h); min-height: var(--main-h);
  max-width: 1100px; margin: auto;
}

/* Миниатюры */
.thumb-section {
  display: flex; flex-direction: column;
  width: 100px; height: 100%;
}
.thumbnails-container {
  flex-grow: 1; overflow: hidden; /* Скрываем лишнее */
  position: relative; cursor: grab;
}
.thumbnails-track {
  display: flex; flex-direction: column; gap: 10px;
  transition: transform 0.3s ease;
}
.thumb {
  pointer-events: auto !important; 
  user-select: none;
  -webkit-user-drag: none;
}

.thumb-section {
  position: relative;
  z-index: 10;
}
.thumb.active { opacity: 1; border: 2px solid #007bff; }
.thumb-nav { background: #eee; border: none; cursor: pointer; padding: 5px; }

.dots-container {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 15px; /* Точки под фото */
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ccc;
  cursor: pointer;
  transition: 0.3s;
}

.dot.active {
  background: #007bff;
  transform: scale(1.2);
}

/* Основной слайдер */
.slider-container {
  flex-grow: 1; position: relative;
  height: 100%; overflow: hidden;
    width: calc(100% - 200px);
}
.slider-track { display: flex; height: 100%; transition: transform 0.4s ease; }
.slide { min-width: 100%; height: 100%; }
.slide img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }

/* В дополнение к вашим стилям */
.slider-container, .thumb-section {
  user-select: none; /* Запрещаем выделение текста */
  -webkit-user-drag: none; /* Запрещаем стандартный drag браузера */
}

.slide img, .thumb {
  pointer-events: none; /* Картинка не перехватывает клик мыши, давая работать родителю */
  user-select: none;
  -webkit-user-drag: none;
}

.slider-track, .thumbnails-track {
  will-change: transform;
  cursor: grab;
}

.slider-track:active, .thumbnails-track:active {
  cursor: grabbing;
}

/* Модалка (упрощенно) */
.modal {
  display: none; position: fixed; z-index: 9999;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.9);
}
.modal-content {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
}
.modal-slide-wrap img { max-width: 80vw; max-height: 80vh; }
.modal-nav { background: none; color: white; border: none; font-size: 3rem; cursor: pointer; padding: 20px; }