/*
 * IKD_PRODUCT_DETAIL_IMAGE_V5
 *
 * Главное фото товара:
 * - квадратная стабильная область;
 * - исходник никогда не обрезается;
 * - 1200x1200 / 1254x1254 показывается целиком;
 * - горизонтальные и вертикальные старые фото тоже показываются целиком;
 * - никаких cover / scale / transform.
 */

.detail-gallery,
.detail-gallery-main,
.detail-photo {
  box-sizing: border-box !important;
}

.detail-gallery-main {
  position: relative !important;

  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 1 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;

  background: #faf7f3 !important;
  border-radius: 18px !important;
}

/*
 * Жёсткий contain через естественные пропорции.
 * width/height = auto, ограничиваем только max-*.
 */
.detail-gallery-main > img,
.detail-gallery-main img,
.detail-photo > img,
.detail-photo img {
  position: static !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  display: block !important;

  width: auto !important;
  height: auto !important;

  min-width: 0 !important;
  min-height: 0 !important;

  max-width: 100% !important;
  max-height: 100% !important;

  aspect-ratio: auto !important;

  object-fit: contain !important;
  object-position: center center !important;

  margin: auto !important;
  padding: 0 !important;

  transform: none !important;
  translate: none !important;
  rotate: none !important;
  scale: 1 !important;
  zoom: 1 !important;

  clip: auto !important;
  clip-path: none !important;
}

/* Никакого увеличения при наведении. */
.detail-gallery-main:hover img,
.detail-photo:hover img {
  transform: none !important;
  scale: 1 !important;
}

/* Миниатюры также показывают весь кадр, а не его фрагмент. */
.detail-thumb {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  overflow: hidden !important;
  background: #fff !important;
}

.detail-thumb > img,
.detail-thumb img {
  position: static !important;

  display: block !important;

  width: auto !important;
  height: auto !important;

  max-width: 100% !important;
  max-height: 100% !important;

  object-fit: contain !important;
  object-position: center center !important;

  margin: auto !important;

  transform: none !important;
  scale: 1 !important;
}

/* На широком экране не раздуваем галерею бесконечно. */
@media (min-width: 901px) {
  .detail-gallery-main {
    max-height: 640px !important;
  }
}

/* На телефоне сохраняем полный кадр. */
@media (max-width: 900px) {
  .detail-gallery-main {
    width: 100% !important;
    max-height: none !important;
    aspect-ratio: 1 / 1 !important;
  }
}