/* Мобильная версия.
 *
 * Вёрстка сайта построена на инлайновых стилях: ширины колонок, отступы и
 * направления флексов записаны прямо в атрибутах style. Инлайн выигрывает
 * у обычных правил, поэтому мобильные переопределения помечены !important —
 * это единственный способ перебить их, не переписывая двадцать шаблонов.
 *
 * Файл подключается после style.css и трогает только узкие экраны:
 * на десктопе ни одно правило отсюда не применяется.
 */

/* ===================================================================
   Планшеты и телефоны: до 900px
   =================================================================== */
@media (max-width: 900px) {

  /* --- Общее ------------------------------------------------------- */

  /* Ни одна страница не должна прокручиваться вбок: на телефоне это
     ощущается как сломанный сайт. */
  html, body { max-width: 100%; overflow-x: hidden; }

  .container { padding-left: 14px !important; padding-right: 14px !important; }

  /* Длинные слова — артикулы, адреса, названия инструментов —
     переносим, иначе они распирают карточку.
     Именно break-word, а не anywhere: anywhere разрешает браузеру считать
     минимальной шириной блока один символ, и флекс-колонки схлопывались
     в столбик по букве («Бесплат ная доставк а»). */
  h1, h2, h3, p, li, td, th, a, span, div { overflow-wrap: break-word; }

  /* Надписи на кнопках не переносим — «Подпис аться» выглядит поломкой. */
  button, .btn, [style*="border-radius"][style*="padding"] > button { white-space: nowrap; }

  /* --- Шапка ------------------------------------------------------- */

  .site-topbar { display: none !important; }

  .site-header__row {
    flex-wrap: wrap !important;
    gap: 10px 14px !important;
    padding: 10px 0 !important;
  }
  .site-header__search { order: 3; flex-basis: 100% !important; }
  .site-header__search input { font-size: 16px !important; }  /* iOS не зумит поле от 16px */
  .site-header__actions { margin-left: auto; gap: 16px !important; }
  .site-header__catalog { padding: 10px 14px !important; font-size: 14px !important; }

  /* --- Карточка товара --------------------------------------------- */

  .pd-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }
  /* Блок покупки идёт сразу за галереей: цена и кнопка «В корзину»
     не должны оказываться под отзывами. */
  .pd-buybox { order: -1; position: static !important; }
  .pd-main { order: 0; }

  /* --- Каталог ------------------------------------------------------ */

  .catalog-layout { flex-direction: column !important; gap: 16px !important; }
  .catalog-sidebar {
    width: 100% !important;
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .catalog-content { width: 100% !important; min-width: 0 !important; }

  .catalog-toolbar { flex-wrap: wrap !important; gap: 12px !important; }
  /* Сортировка прокручивается горизонтально внутри себя,
     а не растягивает страницу. */
  .toolbar-sort { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .toolbar-sort > * { flex-wrap: nowrap !important; }

  /* --- Кабинет покупателя ------------------------------------------- */

  .profile-layout { flex-direction: column !important; gap: 16px !important; }

  /* Боковые меню заданы фиксированной шириной и flex-shrink: 0 —
     на телефоне такая колонка съедала весь экран, а содержимое
     страницы сжималось в полоску в несколько символов.
     Второй селектор ловит «липкие» колонки (сводка корзины, подсказка
     в форме товара): они тоже прибиты к 280–360px и на экране 320px
     вылезали за край. Заодно снимаем sticky — прилипать некуда,
     колонка и так идёт отдельным блоком. */
  aside[style*="width:"],
  [style*="position: sticky"][style*="width:"] {
    width: 100% !important;
    flex-shrink: 1 !important;
    position: static !important;
  }

  /* --- Корзина ------------------------------------------------------ */

  .cart-layout { flex-direction: column !important; gap: 16px !important; }
  .cart-items { min-width: 0 !important; width: 100% !important; }
  .cart-summary {
    width: 100% !important;
    position: static !important;
  }

  /* --- Жёсткие ширины ------------------------------------------------ */

  /* В шаблонах десятки блоков с инлайновым min-width: 350–600px —
     так задавались колонки на десктопе. На экране в 390px такой блок
     просто не помещается и обрезается. Таблицы исключены: им ширина
     нужна, они прокручиваются внутри своей рамки (правило ниже). */
  [style*="min-width"]:not(table) { min-width: 0 !important; }

  /* Колонки макета помечены парой «flex: N + min-width». Раньше их
     разносил по строкам сам min-width; сняв его, мы обязаны сказать
     явно: каждая колонка занимает всю строку. Иначе они не переносятся,
     а сжимаются — две панели по 180px вместо двух полноценных. */
  [style*="flex: 1"][style*="min-width"],
  [style*="flex: 2"][style*="min-width"],
  [style*="flex: 3"][style*="min-width"] { flex-basis: 100% !important; }

  /* --- Кабинет продавца --------------------------------------------- */

  /* Внутри кабинета все сетки многоколоночные (2fr 1fr, 1fr 1fr и т.д.).
     На телефоне колонка одна. */
  .vendor-page [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .vendor-page [style*="gap: 30px"] { gap: 16px !important; }
  /* Тёмные шапки разделов кабинета: 40px отступа съедали пол-экрана. */
  .vendor-page [style*="padding: 40px"] { padding: 24px 16px !important; }
  .vendor-page [style*="padding: 35px"] { padding: 20px 16px !important; }

  /* Две строки ввода характеристик стояли рядом. При шрифте 16px
     (меньше нельзя — Safari зумит страницу) они не помещаются. */
  .attr-row { flex-wrap: wrap !important; }
  .attr-row > input { flex-basis: 100% !important; }

  /* Графики Chart.js: холст обязан ужиматься до ширины карточки. */
  .vendor-page canvas { max-width: 100% !important; }

  /* --- Вход и регистрация -------------------------------------------- */

  /* Экран входа растянут отрицательными полями (margin: -20px),
     из-за них он на 40px шире экрана. */
  [style*="margin: -20px -20px"] { margin-left: 0 !important; margin-right: 0 !important; }

  /* --- Уведомления --------------------------------------------------- */

  /* Всплывающие сообщения были прибиты к правому краю фиксированной
     шириной — длинный текст уезжал за экран. */
  #toast-container { left: 10px !important; right: 10px !important; top: 10px !important; }
  .toast-message { padding: 12px 16px !important; }

  /* --- Таблицы ------------------------------------------------------ */

  /* Таблицам заказов и отчётов ширина нужна — иначе колонки схлопнутся
     в кашу. Поэтому прокручиваем не саму таблицу, а её обёртку:
     страница остаётся на месте, таблица ездит внутри карточки. */
  .table-scroll,
  div:has(> table) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* --- Декор -------------------------------------------------------- */

  /* Размытые «шары» на фоне шапок позиционированы за краем блока.
     На широком экране их прячет overflow родителя, на узком — нет. */
  [style*="position: absolute"][style*="border-radius: 50%"] { display: none !important; }
}

/* ===================================================================
   Телефоны: до 600px
   =================================================================== */
@media (max-width: 600px) {

  /* --- Шапка ------------------------------------------------------- */

  /* Подписи под иконками занимают место, которого нет. */
  .site-header__actions a span:last-child { display: none; }
  .site-header__actions a { gap: 0 !important; }
  .site-header__actions { gap: 14px !important; }

  /* --- Типографика -------------------------------------------------- */

  h1, .page-title { font-size: 24px !important; line-height: 1.25 !important; }
  h2 { font-size: 20px !important; }
  .hero-title { font-size: 28px !important; }

  /* --- Главная ------------------------------------------------------ */

  .hero-banner { padding: 26px 20px !important; min-height: 0 !important; }
  .hero-banner > div { max-width: 100% !important; }
  /* Декоративные «шары» на фоне вылезали за край экрана. */
  .hero-orb { display: none !important; }
  /* Фотография товара в баннере на телефоне только мешает тексту. */
  .hero-banner img { display: none !important; }

  .stories-row { gap: 10px !important; }

  /* Плашки «Бесплатная доставка», «Гарантия качества» и т.д.: иконка 48px
     плюс отступы съедали всю ячейку, тексту оставалось 25px. */
  .trust-bar { grid-template-columns: 1fr !important; gap: 10px !important; }
  .trust-item { padding: 14px 16px !important; gap: 12px !important; }

  /* Форма подписки стояла с flex-shrink: 0 и не помещалась в экран. */
  .newsletter-form { flex-wrap: wrap !important; flex-shrink: 1 !important; width: 100% !important; }
  .newsletter-input { flex: 1 1 100% !important; min-width: 0 !important; }

  /* --- Карточки товара ---------------------------------------------- */

  .products-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .product-card { padding: 10px !important; }
  /* Цена не должна разрываться: «28990,00» на одной строке, «₽» на другой
     читается как две разные суммы. */
  .price-current, .price-old { white-space: nowrap; }
  .product-card .price-current { font-size: 17px !important; }
  .product-card .price-old { font-size: 12px !important; }
  /* Если пара «цена + старая цена» не влезает в узкую карточку,
     старая цена уходит на вторую строку целиком. */
  .product-card-price > div { flex-wrap: wrap !important; row-gap: 2px !important; }

  /* --- Карточка товара: галерея ------------------------------------- */

  /* Вертикальная лента миниатюр сбоку — под палец не попасть.
     Переносим её под фото горизонтальной лентой. */
  .pd-gallery { flex-direction: column !important; padding: 12px !important; }
  .pd-thumbs {
    flex-direction: row !important;
    width: 100% !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    order: 2;
  }
  .pd-thumbs > * { flex-shrink: 0 !important; }

  /* --- Формы -------------------------------------------------------- */

  /* Safari на iPhone увеличивает страницу, если шрифт поля меньше 16px. */
  input, select, textarea { font-size: 16px !important; }

  /* Кнопки на всю ширину: так в них проще попасть. */
  .btn-block-mobile { width: 100% !important; }

  /* --- Сетки -------------------------------------------------------- */

  /* Колонки в шаблонах записаны инлайном: «280px 1fr», «1fr 1fr»,
     «2fr 1fr». На телефоне колонка одна.
     Исключение одно — сетка товаров: она остаётся в две колонки (правило выше).
     Сетки на auto-fit тоже правим: у части из них minmax начинается с 400px,
     а это больше ширины телефона, и карточка вылезала за край. */
  [style*="grid-template-columns"]:not(.products-grid) {
    grid-template-columns: 1fr !important;
  }

  /* «grid-column: span 2» заставляет сетку держать вторую колонку даже
     после того, как мы свели её к одной, — и всё снова расползается.
     В одной колонке любой элемент и так во всю ширину. */
  [style*="grid-column: span"] { grid-column: auto !important; }

  /* Боковое меню информационных страниц уезжает под текст.
     min-width: 0 обязателен: по умолчанию элемент сетки не может стать
     уже своего содержимого, и колонка вылезала за край экрана. */
  .info-layout { gap: 20px !important; }
  .info-layout, .info-layout > * { min-width: 0 !important; }
  .info-layout > aside { position: static !important; padding: 12px !important; }
  .info-nav-link { padding: 14px 12px !important; gap: 10px !important; }
  /* Крупные отступы карточек: 40–80px на экране в 390px — это половина
     ширины, текст сжимался в узкий столбик. */
  [style*="padding: 40px"] { padding: 22px 18px !important; }
  [style*="padding: 80px 40px"] { padding: 40px 20px !important; }
  [style*="padding: 60px"] { padding: 30px 18px !important; }
  [style*="padding: 16px 40px"] { padding: 15px 24px !important; }

  /* --- Подвал ------------------------------------------------------- */

  .footer-grid { grid-template-columns: 1fr !important; gap: 28px !important; }

  /* --- Кабинет продавца --------------------------------------------- */

  .vendor-kpi { grid-template-columns: 1fr !important; }
}

/* ===================================================================
   Узкие телефоны: до 420px
   =================================================================== */
@media (max-width: 420px) {
  .container { padding-left: 12px !important; padding-right: 12px !important; }
  .products-grid { gap: 8px !important; }
  h1, .page-title { font-size: 21px !important; }
}

/* ===================================================================
   Прочее
   =================================================================== */

/* Нижняя панель навигации перекрывает последний блок страницы. */
@media (max-width: 768px) {
  body { padding-bottom: 76px !important; }
}

/* Крупные интерактивные элементы: минимальная цель нажатия 44×44,
   как требуют рекомендации по доступности на сенсорных экранах. */
@media (hover: none) and (pointer: coarse) {
  .mobile-nav-item { min-height: 44px; }
}