/* Пользовательская галерея продукта */
.product-gallery {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
  width: 100%;
}

/* Контейнер для миниатюр */
.gallery-thumbnails-container {
  position: relative;
  width: 75px; /* Уменьшаем ширину для соотношения 3:4 */
  min-width: 75px;
  height: 600px;
}

/* Колонка с миниатюрами */
.gallery-thumbnails {
  height: 100%;
  overflow-y: auto;
  
  /* Полностью скрываем скроллбар */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE и Edge */
  
  /* Скрыть полосу прокрутки для Chrome, Safari */
  &::-webkit-scrollbar {
    width: 0;
    display: none;
  }
}

/* Миниатюра */
.gallery-thumbnails .thumbnail {
  padding: 0; /* Убираем паддинг */
  border: 1px solid transparent; /* Убираем видимую границу контейнера */
  margin-bottom: 10px;
  cursor: pointer;
  opacity: 0.7;
  transition: all 0.2s ease;
  height: 100px;
  width: 75px; /* Фиксированная ширина */
  aspect-ratio: 3/4; /* Соотношение сторон 3:4 */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0; /* Убираем скругление с контейнера */
}

.gallery-thumbnails .thumbnail:hover,
.gallery-thumbnails .thumbnail.active {
  opacity: 1;
}

/* Изображения в миниатюрах */
.gallery-thumbnails .thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Вместо contain используем cover для заполнения всего контейнера */
  display: block;
  border-radius: 12px; /* Увеличиваем скругление для изображений */
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); /* Добавляем легкую тень */
  border: 1px solid #d0d0d0; /* Меняем цвет обводки на #d0d0d0 */
  transition: all 0.2s ease;
}

.gallery-thumbnails .thumbnail:hover img,
.gallery-thumbnails .thumbnail.active img {
  border-color: #0D0D0D; /* Подсветка границы при наведении/активации */
  box-shadow: 0 0 8px rgba(74, 144, 226, 0.3);
}

/* Главное изображение */
.gallery-main-image {
  flex: 1;
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none; /* Убираем границу контейнера */
  background-color: transparent; /* Делаем фон прозрачным */
  overflow: hidden;
  border-radius: 0; /* Убираем скругление с контейнера */
  box-shadow: none; /* Убираем тень с контейнера */
}

.gallery-main-image img {
  max-width: 100%;
  max-height: 600px;
  width: 100%; /* Добавляем ширину 100% */
  height: 600px; /* Фиксируем высоту */
  object-fit: cover; /* Сохраняем пропорции, но заполняем весь контейнер */
  border-radius: 16px; /* Больше скругление для основного изображения */
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.15); /* Более заметная тень */
}

/* Кнопки навигации */
.gallery-nav-prev,
.gallery-nav-next {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 50%;
  z-index: 5;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  color: #999;
  transition: all 0.2s ease;
}

.gallery-nav-prev:hover,
.gallery-nav-next:hover {
  color: #333;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.gallery-nav-prev {
  top: 0;
}

.gallery-nav-next {
  bottom: 0;
}

.gallery-nav-prev svg,
.gallery-nav-next svg {
  width: 16px;
  height: 16px;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
  .product-gallery {
    flex-direction: column-reverse;
  }
  
  .gallery-thumbnails-container {
    width: 100%;
    height: 90px; /* Уменьшаем высоту */
    margin-top: 20px;
  }
  
  .gallery-thumbnails {
    height: 75px; /* Уменьшаем высоту */
    overflow-y: hidden;
    overflow-x: auto;
    display: flex;
    flex-direction: row;
    gap: 10px;
  }
  
  .gallery-thumbnails .thumbnail {
    width: 60px; /* Уменьшаем ширину */
    height: 75px; /* Сохраняем соотношение сторон 3:4 */
    min-width: 60px;
    margin-bottom: 0;
  }
  
  .gallery-nav-prev,
  .gallery-nav-next {
    top: 40px;
    bottom: auto;
    transform: translateY(0) rotate(90deg);
  }
  
  .gallery-nav-prev {
    left: 0;
    right: auto;
  }
  
  .gallery-nav-next {
    left: auto;
    right: 0;
  }
  
  .gallery-main-image {
    height: 400px;
  }
  
  .gallery-main-image img {
    max-height: 400px;
  }
}