/* TASK-0167 — мобильное переполнение на enterer.ru: шапка, плитки подкатегорий,
   пагинация, контакты, плитка листинга. Только узкие экраны, десктоп не затронут.

   Замеры 11.08.2026 на живом сайте, 360 px (OnePlus 9RT = 1080/DPR 3):
   контент шапки требует 342 px при доступных 330 -> правый край кнопки «Искать!»
   и последняя категория срезались краем экрана.
   Часть правил (страховка от увеличенного масштаба текста Chrome, плитка листинга)
   перенесена из heavytop-версии этой же задачи. */

@media (max-width: 768px) {
    /* 0. Страховка: страница физически не может уехать вбок. */
    html,
    body {
        overflow-x: hidden;
        max-width: 100%;
    }

    /* 1. Шапка: flex-элементы не сжимались из-за min-width:auto -> контент 342 px при
          доступных 330 px, правый край кнопки «Искать!» и последняя категория срезались. */
    header .topnav .menu,
    header .topnav .products-nav,
    header .topnav .header_search-form,
    header .topnav .header-category-links,
    header .topnav .header-category-links > ul {
        min-width: 0;
    }

    header .topnav .header_search-form input[name="query"] {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
    }

    header .topnav .header_search-form button[type="submit"] {
        flex: 0 0 auto;
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Строка категорий: вместо обрезания — горизонтальная прокрутка. */
    header .topnav .header-category-links {
        flex: 0 1 auto;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    header .topnav .header-category-links::-webkit-scrollbar {
        display: none;
    }

    /* 3. Пагинация листинга (409 px при 330 px доступных). */
    .mse2_pagination .pagination {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 8px;
    }

    /* 3b. Карточка листинга: текстовый столбец — flex-item с min-width:auto,
           длинные названия и характеристики выходили на соседнюю карточку. */
    .goods-item .flex.flex-col.grow,
    .goods-item .flex > * {
        min-width: 0;
    }

    .goods-item .title,
    .goods-item .text {
        overflow-wrap: break-word;
    }

    /* 3c. То же при увеличенном масштабе текста в браузере (Chrome → Спец.
           возможности → Масштабирование текста): характеристики переносятся,
           длинные значения ломаются, иконки не тянут строку. */
    .goods-item,
    .goods-item.item {
        min-width: 0;
    }

    .goods-item .advantages {
        flex-wrap: wrap;
        min-width: 0;
        max-width: 100%;
    }

    .goods-item .advantages > *,
    .goods-item .full-properties,
    .goods-item .full-properties > * {
        min-width: 0;
        max-width: 100%;
    }

    .goods-item .full-properties {
        overflow-wrap: anywhere;
    }

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

    .goods-item svg,
    .goods-item i,
    .goods-item .icon {
        flex: 0 0 auto;
        max-width: 100%;
    }

    /* 3d. Таблицы характеристик — со своей горизонтальной прокруткой. */
    .tabcontent table,
    .goods-properties table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }

    /* 4. Контактная строка: nowrap выносил текст за экран. */
    .contact-item .phone.ya-phone {
        white-space: normal;
    }
}

/* 2. Плитки подкатегорий: ссылка — flex-item, min-width:auto = min-content длинного
      слова («Хромированные» = 127 px в плитке 110 px), текст наезжал на соседнюю плитку. */
@media (max-width: 450px) {
    li.listing-subcats__item {
        width: 50%;
    }

    .listing-subcats__item a {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
        overflow-wrap: break-word;
    }
}