/* Мобильная типографика.
 *
 * Весь лейаут сайта построен на rem, привязанных к масштабируемому корню:
 * на десктопе html{font-size:.0481vw}, на ширине <=991px — 0.75px.
 * Из-за этого font-size:14rem в коде рисуется как 10.5px на телефоне.
 *
 * Поднимать корень нельзя — вместе со шрифтами вырастут все отступы и ширины,
 * и блоки вылезут за экран. Поэтому здесь размеры текста заданы в px и тем самым
 * отвязаны от rem-масштаба. Лейаут не трогаем.
 *
 * Файл подключается последним в header.php, min-версии не имеет.
 */

@media (max-width: 991px) {
    :root {
        --fs-xs: 12px;   /* бейджи, подписи, даты */
        --fs-sm: 13px;   /* второстепенный текст */
        --fs-base: 14px; /* основной текст */
        --fs-md: 16px;   /* поля ввода и цена */
        --fs-lg: 18px;
    }

    /* --- Поля ввода ---
       Строго 16px: при меньшем размере iOS Safari зумит страницу при фокусе
       и пользователь оказывается в увеличенной форме без возможности вернуться. */
    input[type="text"],
    input[type="tel"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="number"],
    textarea,
    select,
    .input,
    .modal-login__field,
    .orderform__field,
    .modal-review__area {
        font-size: var(--fs-md);
    }

    /* --- Карточка товара --- */
    .prodcard__title {
        font-size: var(--fs-base);
        line-height: 1.3;
    }

    .prodcard__price {
        font-size: var(--fs-md);
    }

    .prodcard__price strong {
        font-size: var(--fs-md);
    }

    .prodcard__size,
    .prodcard__size b {
        font-size: var(--fs-xs);
    }

    /* Бейджу жёстко задана width:44px под шрифт 6px. Текст туда не влезал —
       ломался на две строки и налезал на точки карусели. Отпускаем ширину.
       11px, а не 12: бейдж меньше перекрывает точки карусели. */
    .prodcard__hit {
        font-size: 11px;
        width: auto;
        padding: 0 8px;
        white-space: nowrap;
    }

    .prodcard__price_sale span {
        font-size: var(--fs-xs);
    }

    .prodcard__rating span,
    .prodcard__review span {
        font-size: var(--fs-sm);
    }

    /* --- Плитка категорий --- */
    .categories__item-title {
        font-size: var(--fs-base);
    }

    /* --- Отзывы --- */
    .reviews-item__txt {
        font-size: var(--fs-base);
        line-height: 1.5;
    }

    .reviews-item__name {
        font-size: var(--fs-base);
    }

    .reviews-item__date {
        font-size: var(--fs-xs);
    }

    /* --- Подвал --- */
    .footer__subtitle {
        font-size: var(--fs-base);
    }

    .footer__contact {
        font-size: var(--fs-sm);
    }

    .footer__bottom-txt {
        font-size: var(--fs-xs);
    }

    /* --- Модальные окна: вход, регистрация, восстановление --- */
    .modal-login__title {
        font-size: var(--fs-lg);
    }

    .modal-login__txt,
    .modal-login__descr,
    .modal-login__sendinfo,
    .forgetsend__txt {
        font-size: var(--fs-sm);
        line-height: 1.45;
    }

    .modal-login__submit,
    .modal-login__otherv,
    .modal-login__link {
        font-size: var(--fs-base);
    }

    /* --- Модальное окно отзыва --- */
    .modal-review__title {
        font-size: var(--fs-base);
    }

    /* --- Плашка cookie --- */
    .modalCookies__title {
        font-size: var(--fs-base);
    }

    .modalCookies__txt {
        font-size: var(--fs-sm);
        line-height: 1.45;
    }

    .modalCookies__accept {
        font-size: var(--fs-base);
    }

    .modal-login__save label,
    .modal-login__or p {
        font-size: var(--fs-sm);
    }

    .modal-login__variants-email p {
        font-size: var(--fs-base);
    }

    /* --- Поиск в шапке --- */
    .searchmodal__left-title span,
    .searchmodal__left li a {
        font-size: var(--fs-base);
    }

    /* --- Фильтры-чипсы на главной ---
       Текст 13px не влезал в исходные отступы и ломался на две строки,
       из-за чего чип «Хиты продаж» был выше соседних. Сжимаем отступы. */
    .popular__types-item label {
        font-size: var(--fs-sm);
        padding-left: 10px;
        padding-right: 10px;
        white-space: nowrap;
    }

    /* --- Форма обратного звонка --- */
    .uploadButton span {
        font-size: var(--fs-sm);
    }

    /* Юридическая мелочь: 12px — нижняя граница читаемости, ниже опускаться нельзя */
    .callform__agree label,
    .callform__agree label a {
        font-size: var(--fs-xs);
        line-height: 1.4;
    }

    /* --- Навигация в подвале --- */
    .footer__list a strong,
    .footer__col a strong {
        font-size: var(--fs-base);
    }

    /* --- Каталог: шапка раздела ---
       Селекторы повторяют исходные из app.css (.breadcrumbs__row a), иначе
       не перебивают их по специфичности. */
    .breadcrumbs__row a,
    .breadcrumbs__row span,
    .breadcrumbs__row a:after {
        font-size: var(--fs-xs);
    }

    .typicalcat__short-txt,
    .typicalcat__short-canceled {
        font-size: var(--fs-sm);
    }

    .typicalcat__filter {
        font-size: var(--fs-sm);
    }

    .catalog-sort-dd__trigger-text,
    .catalog-sort-dd__label {
        font-size: var(--fs-base);
    }

    /* --- Каталог: фильтры --- */
    .filters__open span,
    .catalog-in-stock-switch__text {
        font-size: var(--fs-base);
    }

    .form-check.bx_filter_param_label,
    .form-check.bx_filter_param_label strong,
    .filters-price__group span,
    .filters__reset {
        font-size: var(--fs-sm);
    }

    /* --- Каталог: метки на карточке --- */
    .prodcard__tags li,
    .prodcard__tags li.sale {
        font-size: var(--fs-xs);
    }

    .prodcard__price span {
        font-size: var(--fs-xs);
    }

    /* --- Пагинация: это ещё и тап-таргеты, мельче 14px попадать тяжело --- */
    .pagination__link,
    .pagination__btn {
        font-size: var(--fs-base);
    }

    /* --- Карточка товара --- */
    .product__articul {
        font-size: var(--fs-sm);
    }

    .product-about__content {
        font-size: var(--fs-base);
        line-height: 1.55;
    }

    .product-about__open span,
    .product-acc__btn-more b {
        font-size: var(--fs-sm);
    }

    .modal-product__colors-title {
        font-size: var(--fs-base);
    }

    /* Главная кнопка покупки — на неё целятся пальцем */
    .modal-product__tocart {
        font-size: var(--fs-md);
    }

    /* --- Карточка товара: аккордеоны «Оплата», «Доставка» --- */
    .product-acc__btn-txt,
    .product-acc__content {
        font-size: var(--fs-base);
        line-height: 1.5;
    }

    /* --- Карточка товара: характеристики --- */
    .product-tab__list li,
    .product-tab__title {
        font-size: var(--fs-base);
    }

    .product-tab__item-label,
    .product-tab__item-value {
        font-size: var(--fs-sm);
    }

    /* --- Блок преимуществ под карточкой --- */
    .advantages_website__items .item h4 {
        font-size: var(--fs-base);
    }

    .advantages_website__items .item p {
        font-size: var(--fs-sm);
        line-height: 1.45;
    }

    /* --- Иконочные контролы: область нажатия ---
       Бургер и кнопка звонка в шапке — 20x20px, иконки нижней панели — 22x22px.
       Пальцем в такую цель попадать тяжело. Расширяем зону нажатия
       псевдоэлементом до ~44px: иконки остаются на месте, запаса внутри шапки
       и панели (по 21-22px сверху и снизу) хватает, соседние зоны не пересекаются. */
    .header__burger,
    .header__call {
        position: relative;
    }

    .header__burger::after,
    .header__call::after,
    .bottomnav__links a::after,
    .bottomnav__links button::after {
        content: '';
        position: absolute;
        top: -11px;
        right: -11px;
        bottom: -11px;
        left: -11px;
    }

    /* --- Мобильное меню: область нажатия ---
       Пункты меню — строка текста высотой 16px, а шаг между ними 48px:
       32px между пунктами не реагируют на тап, палец промахивается.
       Растягиваем зону нажатия псевдоэлементом ровно на половину промежутка
       сверху и снизу — получается 48px на пункт, вёрстка при этом не едет
       и соседние зоны не перекрываются. */
    .mobnav__content .header__catalog > a,
    .mobnav__content .header__redlink,
    .mobnav__content .header__nav a {
        position: relative;
    }

    .mobnav__content .header__catalog > a::after,
    .mobnav__content .header__redlink::after,
    .mobnav__content .header__nav a::after {
        content: '';
        position: absolute;
        top: -16px;
        right: 0;
        bottom: -16px;
        left: 0;
    }

    /* --- Счётчики в шапке и нижней навигации ---
       Селекторы повторяют исходные из app.css: там в группе есть #header_cart_count,
       и без ID правило не перебить. 11px, потому что 12px уже не влезает в кружок. */
    #header_cart_count,
    #wishlist_counter span,
    #wishlist_countermob span,
    .header__controls-item > span,
    .bottomnav__links a > span {
        font-size: 11px;
    }

    /* --- Пустые состояния (корзина, избранное, поиск) ---
       Заголовок и текст были 12px, а кнопка — 10.5px, хотя это
       единственное действие на экране. */
    /* Через .empty__headline — в app.css размер задан как «.empty__headline p»,
       по одному классу такое правило не перебить. */
    .empty__headline .empty__title {
        font-size: var(--fs-lg);
    }

    .empty__headline .empty__text {
        font-size: var(--fs-base);
        line-height: 1.45;
    }

    .empty__link {
        font-size: var(--fs-md);
    }

    /* --- Корзина --- */
    /* Счётчик товаров рядом с заголовком 24px выглядел потерянным на 10.5px */
    .cartpage__title span {
        font-size: var(--fs-base);
    }

    .backwrap__back {
        font-size: var(--fs-base);
    }

    .cart-item__info-name a {
        font-size: var(--fs-base);
        line-height: 1.35;
    }

    .cart-item__info-price {
        font-size: var(--fs-md);
    }

    .cart-item__info-old_price {
        font-size: var(--fs-sm);
    }

    .cart-item__info-props ul li {
        font-size: var(--fs-sm);
    }

    /* --- Оформление заказа (sale.order.ajax) --- */
    .bx-soa-pp-company-description,
    .bx-soa-pp-list-termin,
    .bx-soa-pp-list-description {
        font-size: var(--fs-sm);
        line-height: 1.45;
    }

    .bx-soa-coupon-header span,
    .bx-soa-item-title,
    .bx-soa-section-title {
        font-size: var(--fs-base);
    }

    /* Согласие на обработку данных — юридическая мелочь, ниже 12px не опускаем.
       Исходное правило задано через #bx-soa-total, иначе не перебить. */
    #bx-soa-total .user-consest,
    #bx-soa-total .user-consest a {
        font-size: var(--fs-xs);
        line-height: 1.4;
    }

    /* --- Mandarin ART --- */
    .colprods__nav-item label {
        font-size: var(--fs-sm);
        white-space: nowrap;
    }

    .collections__item-txt,
    .arters-item__txt {
        font-size: var(--fs-base);
        line-height: 1.5;
    }

    .stalant__block a {
        font-size: var(--fs-base);
    }

    /* --- Статические страницы --- */
    .page-about__promo-text {
        font-size: var(--fs-base);
        line-height: 1.55;
    }

    /* Селекторы повторяют исходные из delivery.css — там они заданы через
       .page-header и .vozvrat, по одному классу их не перебить. */
    .page-header .infoheader__list a {
        font-size: var(--fs-base);
    }

    .vozvrat__btn {
        font-size: var(--fs-base);
    }

    .vozvrat .vozvrat__ps {
        font-size: var(--fs-xs);
        line-height: 1.4;
    }

    .page-cooperation__form-text {
        font-size: var(--fs-base);
        line-height: 1.45;
    }

    .page-cooperation__form-notice {
        font-size: var(--fs-xs);
        line-height: 1.4;
    }
}