/* Мобильная версия сайта.
 *
 * У исходного магазина мобильная вёрстка отдавалась отдельными страницами, которые
 * при копировании сайта не сохранились, поэтому она написана заново.
 * Подключается на всех страницах сборкой tools/cms/build_site.py.
 */

/* Элементы мобильного интерфейса на широких экранах не нужны */
.ip-burger,
.ip-menu-close,
.ip-menu-overlay,
.ip-submenu-toggle { display: none !important; }

@media (max-width: 900px) {

  /* ------------------------------------------------- снимаем десктопные рамки
     У контейнеров магазина прописана минимальная ширина 960-1000px —
     без этого сброса страница просто не сжимается до экрана телефона. */
  .container,
  .wrapper,
  .main,
  .catalog,
  .catalog__middle,
  .catalog__middle-col,
  .catalog__content,
  .layout-wrap,
  .product,
  .footer__container,
  .header__container {
    min-width: 0 !important;
    width: auto !important;
    max-width: 100% !important;
  }

  html, body { max-width: 100%; overflow-x: hidden; }

  /* ---------------------------------------------------------------- шапка
     Десктопная шапка занимала треть экрана телефона, а переключатель языков
     не помещался в ширину и оставался за краем. Собираем всё в одну строку. */
  .header,
  .header__container,
  .header__middle,
  .header__wrapper {
    height: auto !important;
    min-height: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .header__layout--middle {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 6px;
    height: auto !important;
    min-height: 0 !important;
    padding: 8px 10px !important;
  }

  .header__column,
  .header__column--left,
  .header__column--right {
    flex: 0 0 auto;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
    gap: 4px;
  }

  /* логотип занимает свободное место между кнопкой меню и корзиной */
  .header__column--left { flex: 1 1 auto; min-width: 0 !important; overflow: hidden; }

  .ip-logo { font-size: 17px; white-space: nowrap; }

  .site-cart-toggle {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 auto;
  }

  /* языки — компактным рядом, иначе не помещаются рядом с корзиной */
  .lang-switch {
    flex: 0 0 auto;
    gap: 0;
    font-size: 11px;
  }

  .lang-switch__item { padding: 5px 4px; }

  .ip-burger { flex: 0 0 auto; margin-left: -4px; }

  /* меню каталога прячем за кнопкой */
  .header__column--right {
    position: static;
  }

  .products-menu {
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    width: min(86vw, 340px);
    /* dvh учитывает панели браузера на телефоне: с обычным vh низ списка
       уезжает под адресную строку и до него не долистать */
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    background: #fff;
    box-shadow: 0 0 40px rgba(0, 0, 0, .25);
    transform: translateX(-100%);
    transition: transform .22s ease;
    z-index: 1200;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 64px 0 40px;
  }

  .products-menu.is-open { transform: translateX(0); }

  .products-menu__container {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
  }

  .products-menu__item {
    display: block;
    width: 100%;
    border-bottom: 1px solid #eceff3;
  }

  .ip-submenu-toggle { display: inline-flex !important; align-items: center; justify-content: center; }

  .products-menu__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .products-menu__title-link {
    display: block;
    flex: 1 1 auto;
    text-align: left !important;   /* десктопный стиль центрировал названия марок */
    padding: 14px 18px;
    font-size: 16px;
    line-height: 1.2;
    color: #12151b;
  }

  /* На iPhone после нажатия пункт остаётся в «нажатом» состоянии, и скрипт
     магазина перекрашивал название марки в белый — на белой панели оно пропадало.
     Закрепляем цвет во всех состояниях. */
  .products-menu .products-menu__item .products-menu__title-link,
  .products-menu .products-menu__item .products-menu__title-link:hover,
  .products-menu .products-menu__item .products-menu__title-link:active,
  .products-menu .products-menu__item .products-menu__title-link:focus,
  .products-menu .products-menu__item.is-expanded .products-menu__title-link,
  .products-menu .products-menu__item:hover .products-menu__title-link {
    color: #12151b !important;
    opacity: 1 !important;
    visibility: visible !important;
    -webkit-text-fill-color: #12151b;
    background: transparent !important;
  }

  .products-menu .products-menu__item.is-expanded > .products-menu__title,
  .products-menu .products-menu__item.is-expanded .products-menu__title-link {
    font-weight: 700;
  }

  .products-menu__title-link { -webkit-tap-highlight-color: transparent; }

  /* выпадающий список моделей внутри панели раскрывается, а не всплывает */
  .productsMenu-submenu {
    position: static !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none;
    box-shadow: none;
    border-radius: 0;
    background: #f7f8fa;
    display: none;
  }

  .products-menu__item.is-expanded .productsMenu-submenu { display: block; }

  .productsMenu-submenu-w,
  .productsMenu-submenu.__fluidGrid .productsMenu-submenu-w {
    columns: auto !important;
    max-height: none;
    overflow: visible;
    padding: 4px 0 10px;
  }

  /* модели: плотный список, без огромных отступов десктопной сетки */
  .productsMenu-submenu-i {
    margin: 0 !important;
    padding: 0 !important;
    break-inside: auto;
  }

  .productsMenu-submenu-a {
    box-sizing: border-box !important;   /* отступы внутри высоты, иначе строка 60px вместо 44 */
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 8px 18px 8px 30px !important;
    min-height: 44px !important;
    height: auto !important;
    font-size: 15px;
    color: #12151b !important;
  }

  .productsMenu-submenu-t { margin: 0 !important; }

  .ip-submenu-all__link {
    font-weight: 600;
    color: #2F6BFF !important;
  }

  .productsMenu-submenu-w:has(img) .productsMenu-submenu-image,
  .productsMenu-submenu.__smallIcons .productsMenu-submenu-w:has(img) .productsMenu-submenu-image {
    height: 28px;
    width: 28px;
    margin-right: 10px;
  }

  /* кнопка открытия меню */
  .ip-burger {
    display: inline-flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    padding: 10px 9px;
    border: 0;
    background: none;
    cursor: pointer;
  }

  .ip-burger span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .2s, opacity .2s;
  }

  .ip-menu-close {
    display: block !important;
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    border: 0;
    background: none;
    font-size: 30px;
    line-height: 1;
    color: #12151b;
    cursor: pointer;
  }

  .ip-menu-overlay {
    display: block !important;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 1100;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s;
  }

  .ip-menu-overlay.is-open { opacity: 1; pointer-events: auto; }

  body.ip-menu-open { overflow: hidden; }

  /* ------------------------------------------------------------- каталог */
  .catalog-grid,
  .catalogGrid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 0 12px;
  }

  .catalog-grid__item { width: auto !important; margin: 0 !important; }

  .catalogCard,
  .catalogCard-box,
  .catalogCard-main,
  .catalogCard-image { width: auto !important; min-width: 0 !important; }

  /* Контейнер фото в карточке держится на абсолютном позиционировании и высоте,
     которую задаёт скрипт. Без него высота становится нулевой и фото обрезается,
     поэтому переводим контейнер в обычный поток. */
  .catalogCard-view,
  .catalogCard-image,
  .catalogCard-image-i {
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .catalogCard-img {
    width: auto !important;
    max-width: 100%;
    height: auto !important;
    max-height: 46vw;
    object-fit: contain;
  }

  .catalogCard-title { font-size: 13px; line-height: 1.3; }
  .catalogCard-price { font-size: 15px; }

  /* --------------------------------------------------------- товар */
  /* Страница товара свёрстана в две колонки внутри flex-контейнера.
     На узком экране колонка с фотографией сжималась до нескольких пикселей,
     и фото пропадало целиком — ставим колонки друг под другом. */
  .product__grid,
  .product__columns {
    display: block !important;
    width: auto !important;
  }

  .product__column,
  .product__column--left,
  .product__column--right,
  .product__column-container,
  .product__column-item {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    position: static !important;
  }

  .product__section { padding-left: 12px; padding-right: 12px; }

  /* Галерея держится на абсолютном позиционировании и размерах от скрипта,
     которого в копии сайта нет: разворачиваем её в обычную картинку. */
  .gallery,
  .gallery__photos,
  .gallery__photos-container,
  .gallery__photos-list,
  .gallery__item,
  .gallery__link {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
    list-style: none;
  }

  /* невидимая распорка резервировала место под фото, которое раньше лежало
     поверх неё; теперь картинка в обычном потоке, и распорка оставляет пустоту */
  .gallery__photos::before,
  .gallery__photos-container::before { display: none !important; content: none !important; }

  .gallery__photos-list > .gallery__item ~ .gallery__item { display: none !important; }

  .gallery__photo-img {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100%;
    object-fit: contain;
  }

  .gallery__thumbs,
  .gallery__arrow,
  .gallery__zoom { display: none !important; }

  /* кнопку покупки — во всю ширину: так удобнее нажимать пальцем */
  .product-order__row { display: block !important; }
  .product-order__block--buy { width: 100% !important; }

  .product__section--order .btn,
  .product-order__block--buy .btn {
    width: 100% !important;
    min-height: 48px;
    font-size: 16px;
  }

  .product-price__item { font-size: 22px; }

  .product-heading__title,
  .product h1 { font-size: 21px; line-height: 1.25; }

  .product-features__cell { font-size: 14px; padding: 6px 8px; }

  /* --------------------------------------------------------- главная */
  .ip-hero__inner { padding: 40px 16px 36px; gap: 16px; }
  .ip-hero__kicker { font-size: 11px; letter-spacing: .14em; }
  .ip-hero__title { font-size: clamp(26px, 7.4vw, 34px); line-height: 1.12; }
  .ip-hero__text { font-size: 15px; line-height: 1.45; }
  .ip-hero__btn { margin-top: 4px; padding: 14px 22px; font-size: 14px; }

  /* преимущества: пять пунктов столбиком занимали пол-экрана прокрутки */
  .benefits { padding: 22px 0 8px; }

  .benefits__list {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px 8px;
    padding: 0 12px;
    margin: 0;
  }

  .benefits__item {
    width: auto !important;
    margin: 0 !important;
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    background: #f7f8fa;
    border-radius: 10px;
  }

  .benefits__icon { width: auto !important; height: auto !important; }

  .benefits__icon-img {
    width: 38px !important;
    height: 38px !important;
    object-fit: contain;
  }

  .benefits__txt { width: auto !important; height: auto !important; }
  .benefits__txt-h { font-size: 12px; line-height: 1.25; height: auto !important; }

  /* Хиты продаж — карусель, которой нужен отсутствующий скрипт: без него она
     разъезжается за край экрана. Показываем обычной сеткой. */
  .promo { padding: 20px 0 8px; }

  .promo-container,
  .catalog-carousel,
  .catalog-carousel__container,
  .slideCarousel,
  .slideCarousel-screen {
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }

  /* карусель со стрелками собирается скриптом (.ip-slider__track),
     поэтому здесь только снимаем десктопные ограничения ширины */
  .catalog-carousel__wrap,
  .promo-slider-list,
  .slideCarousel-list {
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    transform: none !important;
    list-style: none;
  }

  /* ширину карточек в карусели задаёт .ip-slider__track > * ниже */
  .catalog-carousel__item,
  .promo-slider-list > li,
  .slideCarousel-list > li {
    min-width: 0 !important;
    margin: 0 !important;
  }

  .catalog-carousel__arrow,
  .slideCarousel-arrow,
  .slideCarousel-dots,
  .promo-slider-arrow { display: none !important; }

  .promo__title,
  .promo-container__title,
  .promo h2,
  .frontInfo-section h2 {
    font-size: 19px;
    line-height: 1.25;
    margin: 0 0 14px;
    padding: 0 12px;
    text-align: left;
  }

  /* текстовый блок внизу главной */
  .frontInfo-section { padding: 18px 0; }
  .frontInfo-section .layout-wrap { padding: 0 14px; }
  .frontInfo-section p,
  .frontInfo-section li { font-size: 15px; line-height: 1.55; }
  .frontInfo-section img { border-radius: 8px; }

  /* --------------------------------------------------------- заказ
     Окно оформления было шире экрана телефона. Центрирование у него через
     left: 50% и сдвиг на половину ширины — его сохраняем и ограничиваем
     только ширину. (Если прижать окно к left: 0, сдвиг уводит его за экран.) */
  .site-order__dialog {
    box-sizing: border-box !important;
    left: 50% !important;
    right: auto !important;
    width: calc(100vw - 24px) !important;
    max-width: 440px !important;
    margin: 0 !important;
  }

  .site-order__form,
  .site-order__dialog input,
  .site-order__dialog textarea,
  .site-order__dialog button {
    box-sizing: border-box;
    max-width: 100% !important;
  }

  .site-order__form input,
  .site-order__submit { width: 100% !important; }

  .site-order__dialog * { overflow-wrap: anywhere; }

  /* --------------------------------------------------------- подвал */
  .footer__columns {
    display: block !important;
    padding: 0 14px;
  }

  .footer__column { width: auto !important; margin-bottom: 18px; }

  /* --------------------------------------------------------- общее */
  .layout-wrap,
  .header__container { padding-left: 0; padding-right: 0; }

  img { max-width: 100%; height: auto; }

  h1 { font-size: 23px; line-height: 1.25; }
  h2 { font-size: 19px; }
}

@media (max-width: 420px) {
  /* каталог в одну колонку: карточки крупнее, названия читаемы.
     Преимущества и хиты остаются в две — они компактные. */
  .catalog-grid,
  .catalogGrid { grid-template-columns: 1fr; }

  .catalogCard-title { font-size: 15px; }
}

/* ---------------------------------------------------------------- языки
   Вместо трёх букв подряд — кнопка «планета + язык» с выпадающим списком:
   так понятнее, что это выбор языка, и занимает меньше места. */
.ip-lang { position: relative; flex: 0 0 auto; }

.ip-lang__button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 6px;
  background: none;
  color: inherit;
  font: 600 13px/1 'Manrope', system-ui, sans-serif;
  cursor: pointer;
  white-space: nowrap;
}

.ip-lang__button:hover { border-color: rgba(255, 255, 255, .5); }
.ip-lang__globe { width: 16px; height: 16px; flex: 0 0 auto; }
.ip-lang__caret { width: 10px; height: 10px; opacity: .7; transition: transform .18s; }
.ip-lang.is-open .ip-lang__caret { transform: rotate(180deg); }

.ip-lang__list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 150px;
  padding: 6px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  list-style: none;
  margin: 0;
  z-index: 1300;
  display: none;
}

.ip-lang.is-open .ip-lang__list { display: block; }

.ip-lang__link {
  display: block;
  padding: 9px 12px;
  border-radius: 6px;
  color: #12151b;
  font: 500 14px/1.2 'Manrope', system-ui, sans-serif;
  text-decoration: none;
}

.ip-lang__link:hover { background: #f2f4f7; color: #12151b; }
.ip-lang__link.is-active { background: #2F6BFF; color: #fff; }

@media (max-width: 900px) {
  .ip-lang__button { padding: 6px 8px; font-size: 12px; gap: 4px; }
  .ip-lang__globe { width: 15px; height: 15px; }
  .ip-lang__list { min-width: 140px; }
}

/* --------------------------------------------------------- хиты продаж
   Стрелки листания: карусель магазина без своего скрипта не работала. */
.ip-slider { position: relative; }

.ip-slider__track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 4px 0 10px;
  scrollbar-width: none;
}

.ip-slider__track::-webkit-scrollbar { display: none; }

.ip-slider__track > * {
  flex: 0 0 clamp(170px, 23%, 250px) !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  scroll-snap-align: start;
}

.ip-slider__arrow {
  position: absolute;
  top: 40%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
  color: #12151b;
  cursor: pointer;
  z-index: 5;
  transition: opacity .15s;
}

.ip-slider__arrow--prev { left: 2px; }
.ip-slider__arrow--next { right: 2px; }
.ip-slider__arrow[disabled] { opacity: .3; cursor: default; }

@media (max-width: 900px) {
  .ip-slider__track { gap: 10px; padding: 4px 12px 10px; }
  .ip-slider__track > * { flex: 0 0 47% !important; }
  .ip-slider__arrow { width: 34px; height: 34px; }
}