/*NOTE: This file is intended for programmers. Aspro technical support is not advised to work with him.*/

/* ============================================================
   АДАПТИВНАЯ ВЁРСТКА КАРТОЧКИ ТОВАРА (ТЗ)

   Что делает page bundle (style.min.css — менять нельзя):
     - catalog-detail__item → grid 27%/1fr (1000-1199px), 30%/1fr (750-999px)
     - catalog-detail__top-info → grid-column: 1  ← НАМ НУЖНО ПЕРЕОПРЕДЕЛИТЬ
     - catalog-detail__bottom-info → grid-column: 1/-1
     - catalog-detail__main-parts → flex-row 55/45% (1000-1199) / flex-col (750-999)

   Реальная DOM-структура:
     catalog-detail__item [grid page bundle]
       catalog-detail__top-info      ← прямой ребёнок item
         detail-gallery-big          ← прямой ребёнок top-info (галерея + спецификация)
         catalog-detail__main        ← прямой ребёнок top-info (характеристики+цены+forms)
           catalog-detail__main-parts [flex-row из page bundle]
             main-part--left (характеристики)
             main-part--right (блок покупки)
           [forms-блок (цена/статус/доставка/дешевле/гарантия)]
       catalog-detail__bottom-info   ← прямой ребёнок item (доставка/оплата)
   ============================================================ */

/*
 * ГЛОБАЛЬНЫЙ ФИК: catalog-detail__main от page bundle — display:flex flex-direction:row nowrap.
 * Это выбрасывает grid-list__item (forms) вправо за экран.
 * Меняем на column, чтобы main-parts и forms шли вертикально на всех брейкпоинтах.
 */
body .detail .catalog-detail .catalog-detail__top-info > .catalog-detail__main {
  flex-direction: column !important;
}

/* --- 3 колонки: 1000px–1199px --- */
@media (min-width: 1000px) and (max-width: 1199px) {

  body .detail .catalog-detail > .catalog-detail__item > .catalog-detail__top-info {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: 27% 1fr !important;
    gap: 0 20px !important;
    align-items: start !important;
    width: 100% !important;
    box-sizing: border-box !important;
    flex-direction: unset !important;
  }

  body .detail .catalog-detail .catalog-detail__top-info > .detail-gallery-big {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body .detail .catalog-detail .catalog-detail__top-info > .catalog-detail__main {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  body .detail .catalog-detail .catalog-detail__main-part--right .sticky-block {
    position: relative !important;
    top: 0 !important;
    width: 100% !important;
    min-width: 100% !important;
  }
}

/* --- 2 колонки: 750px–999px (галерея 30% | характеристики+покупка) --- */
@media (min-width: 750px) and (max-width: 999px) {

  body .detail .catalog-detail > .catalog-detail__item > .catalog-detail__top-info {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: 30% 1fr !important;
    gap: 0 16px !important;
    align-items: start !important;
    width: 100% !important;
    box-sizing: border-box !important;
    flex-direction: unset !important;
  }

  body .detail .catalog-detail .catalog-detail__top-info > .detail-gallery-big {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body .detail .catalog-detail .catalog-detail__top-info > .catalog-detail__main {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  body .detail .catalog-detail .catalog-detail__main-part--right .sticky-block {
    position: relative !important;
    top: 0 !important;
    width: 100% !important;
    min-width: 100% !important;
  }
}

/* --- 1 колонка: < 750px --- */
@media (max-width: 749px) {

  body .detail .catalog-detail > .catalog-detail__item > .catalog-detail__top-info {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    grid-column: 1 / -1 !important;
  }

  body .detail .catalog-detail .catalog-detail__top-info > .detail-gallery-big,
  body .detail .catalog-detail .catalog-detail__top-info > .catalog-detail__main {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}