/* Ограничиваем ширину попапа */
.t-store__prod-popup__container {
    max-width: 1100px !important;
    margin: 60px auto !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}

/* Затемняем фон мягче */
.t-popup {
    background-color: rgba(0,0,0,0.6) !important;
}

/* ================== POPUP SIZE + CLOSE INSIDE POPUP ================== */

/* 1) Делаем контейнер попапа ограниченным и прокручиваемым */
.t-store__prod-popup .t-popup__container,
.t-store__prod-popup .t-popup__content,
.t-popup.t-store__prod-popup .t-popup__container,
.t-popup.t-store__prod-popup .t-popup__content {
  max-width: 1100px !important;   /* ширина белого окна */
  width: 92vw !important;
  max-height: 88vh !important;    /* высота окна */
  overflow: auto !important;      /* чтобы контент скроллился внутри */
  margin: 0 auto !important;
}

/* На всякий — родитель делаем relative, чтобы absolute у крестика работал */
.t-store__prod-popup .t-popup__container,
.t-popup.t-store__prod-popup .t-popup__container {
  position: relative !important;
}

/* 2) Переклеиваем крестик ВНУТРЬ белого окна (а не в угол экрана) */
.t-store__prod-popup .t-popup__close,
.t-popup.t-store__prod-popup .t-popup__close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  left: auto !important;
  z-index: 9999999 !important;
}

/* 3) Ограничиваем размер блока с фото (левая часть) */
.t-store__prod-popup .t-store__prod-popup__col-left,
.t-popup.t-store__prod-popup .t-store__prod-popup__col-left {
  width: 44% !important;         /* было слишком жирно */
  max-width: 460px !important;
}

/* 4) Ограничиваем само фото внутри попапа */
.t-store__prod-popup .t-store__prod-popup__img,
.t-store__prod-popup .t-store__prod-popup__img img,
.t-popup.t-store__prod-popup .t-store__prod-popup__img,
.t-popup.t-store__prod-popup .t-store__prod-popup__img img {
  max-width: 100% !important;
  height: auto !important;
  max-height: 62vh !important;   /* чтобы фото не занимало весь экран */
  object-fit: contain !important;
}

/* 5) На мобильных — делаем колонку с фото на всю ширину */
@media (max-width: 980px) {
  .t-store__prod-popup .t-store__prod-popup__col-left,
  .t-popup.t-store__prod-popup .t-store__prod-popup__col-left {
    width: 100% !important;
    max-width: none !important;
  }
}

/* ================== FORCE CLOSE ICON (NO ARROW) ================== */
.t-popup__close-icon_arrow,
.t-store__prod-popup .t-popup__close-icon_arrow,
.t-popup .t-popup__close-icon_arrow {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Оставляем только крестик */
.t-popup__close-icon_cross,
.t-store__prod-popup .t-popup__close-icon_cross,
.t-popup .t-popup__close-icon_cross {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ================== CLOSE BUTTON LOOK & POSITION ================== */
/* Важно: убираем fixed (из-за него крестик улетает в угол экрана) */
.t-popup__close,
.t-store__prod-popup .t-popup__close,
.t-popup .t-popup__close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  left: auto !important;
  bottom: auto !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;
  background: #8c000c !important; /* твой бордовый */
  z-index: 9999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Крестик делаем белым (перебиваем fill внутри SVG) */
.t-popup__close .t-popup__close-icon_cross *,
.t-store__prod-popup .t-popup__close .t-popup__close-icon_cross *,
.t-popup .t-popup__close .t-popup__close-icon_cross * {
  fill: #ffffff !important;
}

/* Ховер: можно чуть темнее */
.t-popup__close:hover,
.t-store__prod-popup .t-popup__close:hover,
.t-popup .t-popup__close:hover {
  background: #6f0009 !important;
}

/* ================== POPUP SIZE (NOT FULLSCREEN) ================== */
/* Белое окно попапа — ограничиваем */
.t-popup__container,
.t-popup__content,
.t-store__prod-popup .t-popup__container,
.t-store__prod-popup .t-popup__content {
  max-width: 1100px !important;
  width: 92vw !important;
  max-height: 88vh !important;
  overflow: auto !important;
  margin: 0 auto !important;
}

/* Чтобы absolute-крестик позиционировался относительно белого окна */
.t-popup__container,
.t-store__prod-popup .t-popup__container {
  position: relative !important;
}

/* ================== PRODUCT IMAGE SIZE IN POPUP ================== */
/* Ограничиваем картинки в попапе */
.t-store__prod-popup img,
.t-popup.t-store__prod-popup img {
  max-height: 62vh !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
}

/* На всякий — если у галереи контейнеры */
.t-store__prod-popup .t-slds__img,
.t-store__prod-popup .t-slds__item,
.t-popup.t-store__prod-popup .t-slds__img,
.t-popup.t-store__prod-popup .t-slds__item {
  max-height: 62vh !important;
}

/* ================== 1) КНОПКА "НАЗАД" (чтобы было видно) ================== */
/* Это обычно t-popup__back / t-store__prod-popup__back (у Тильды бывает по-разному) */
.t-popup__back,
.t-store__prod-popup__back,
.t-popup .t-popup__back,
.t-store__prod-popup .t-store__prod-popup__back {
  color: #ffffff !important;
  opacity: 0.9 !important;
}

/* Если там не текст, а svg-стрелка */
.t-popup__back svg *,
.t-store__prod-popup__back svg * {
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

.t-popup__back:hover,
.t-store__prod-popup__back:hover {
  opacity: 1 !important;
}

/* На всякий случай добавим подложку, если "Назад" лежит на тёмном фоне */
.t-popup__back,
.t-store__prod-popup__back {
  padding: 6px 10px !important;
  border-radius: 999px !important;
  background: rgba(0,0,0,0.45) !important;
}


/* ================== 2) ФОТО В ПОПАПЕ (убрать растягивание) ================== */
/* Часто растягивает не img, а контейнер галереи. Делаем его нормальным. */
.t-store__prod-popup .t-slds,
.t-store__prod-popup .t-slds__container,
.t-store__prod-popup .t-slds__wrapper,
.t-store__prod-popup .t-slds__item,
.t-store__prod-popup .t-slds__img {
  height: auto !important;
  max-height: 62vh !important;
}

/* Само изображение: строго contain, без 100% по высоте */
.t-store__prod-popup img,
.t-store__prod-popup .t-slds__img img {
  width: auto !important;
  height: auto !important;
  max-width: 520px !important;   /* <- ключ: фиксируем адекватную ширину */
  max-height: 62vh !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
}

/* Миниатюры снизу — чтобы не растягивали блок */
.t-store__prod-popup .t-slds__thumbsbullet,
.t-store__prod-popup .t-slds__thumbs,
.t-store__prod-popup .t-slds__thumbsbullet-wrapper {
  max-width: 520px !important;
}


/* ================== 3) КРЕСТИК (если хочешь: красный всегда, бордовый на hover) ================== */
.t-popup__close,
.t-store__prod-popup .t-popup__close {
  background: #b0000f !important;   /* красный */
}

.t-popup__close:hover,
.t-store__prod-popup .t-popup__close:hover {
  background: #8c000c !important;   /* бордовый */
}