/* ============================================================
   mobile-fixes.css — надстройка над adaptive.css
   Правки мобильной версии mhtron.ru (25.08.2026)
   Подключается ПОСЛЕ style.css и adaptive.css
   ============================================================ */

/* --- Токены цвета (в духе существующей палитры сайта) --- */
:root {
    --mfx-brand:      #00437f;   /* тёмно-синий шапки */
    --mfx-brand-2:    #080c43;   /* глубокий синий */
    --mfx-accent:     #4a8000;   /* зелёный «Купить» */
    --mfx-accent-2:   #99cf16;   /* светло-зелёный «в наличии» */
    --mfx-ink:        #1f2937;
    --mfx-muted:      #6b7280;
    --mfx-surface:    #ffffff;
    --mfx-bg:         #f5f6f7;
    --mfx-border:     #e5e7eb;
    --mfx-danger:     #b91c1c;
    --mfx-tap:        44px;      /* минимальный тап-таргет */
}

/* ============================================================
   1. МОБИЛА <= 900px — общие фиксы
   ============================================================ */
@media (max-width: 900px) {

    /* --- 1.1 Форма поиска в шапке: кнопка ▶ помещается в экран --- */
    #search_frm {
        left: 0;
        right: 0;
        width: 100% !important;
        box-sizing: border-box;
    }
    #search_frm table {
        width: 100% !important;
        table-layout: fixed;
    }
    #search_frm table td:first-child {
        width: auto !important;
    }
    #search_frm table td:last-child {
        width: 40px !important;
        text-align: center !important;
    }
    #search_frm table input[type="button"] {
        width: 32px !important;
        height: 32px !important;
        margin-left: 0 !important;
        flex-shrink: 0;
    }

    /* --- 1.2 Bitrix24-виджет не перекрывает контент --- */
    .b24-widget-button-wrapper {
        bottom: 12px !important;
        right: 10px !important;
        opacity: 0.82;
        transition: opacity .25s;
    }
    .b24-widget-button-wrapper:hover,
    .b24-widget-button-wrapper:active,
    .b24-widget-button-wrapper.b24-widget-button-inner-container_active {
        opacity: 1;
    }

    /* --- 1.3 Список брендов A-Z: крупнее тап-таргеты --- */
    .mark-list #ml > tbody > tr > td {
        padding: 8px 0 !important;
    }
    .mark-list #ml > tbody > tr > td a {
        display: inline-block;
        min-height: var(--mfx-tap);
        line-height: 1.2;
        padding: 12px 6px;
        font-size: 15px;
        margin: 0 !important;
    }

    /* --- 1.4 Хлебные крошки — компактно и в одну строку --- */
    .breadcrumbs, .breadcrumb, .crumbs {
        font-size: 13px;
        line-height: 1.35;
        padding: 8px 10px !important;
        color: var(--mfx-muted);
        word-break: break-word;
    }
    .breadcrumbs a, .breadcrumb a, .crumbs a { color: var(--mfx-brand); }

    /* --- 1.0a Компактная шапка: целевая высота ~48px.
       flex в adaptive.css сломан (опечатка space-betwween) — починим его, чтобы align-items:center работал --- */
    .the_new.newhead {
        padding: 3px 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    /* Гамбургер-кнопка слева: сокращаем padding 10→5 */
    .the_new.newhead .adapt_menu a { padding: 5px 8px !important; }

    /* Логотип: HTML задаёт width=180 height=48 (неправильные пропорции),
       реальный файл 135×129 (квадратный). Отменяем inline width, высота 32px */
    .the_new.newhead .newlogo img,
    .newlogo img {
        width: auto !important;
        height: 32px !important;
        max-height: 32px !important;
        object-fit: contain !important;
        display: block;
    }
    .newlogo { line-height: 0 !important; }

    /* Иконки справа: flex-контейнер выравнивает все иконки по центру (был block+vertical-align:top, телефон выступал);
       gap 8px — больше воздуха между кнопками (было ~3.75px) */
    .the_new.newhead .newicons {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }
    .the_new.newhead .newicons a,
    .the_new.newhead .newicons .mobsearch {
        padding: 4px !important;
        line-height: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: content-box !important;
    }
    .the_new.newhead .newicons a svg,
    .the_new.newhead .newicons .mobsearch svg {
        display: block !important;
    }

    /* --- 1.0c mmenu-плагин ставит padding-top: 65px инлайном — переопределяем под новую высоту шапки (~46-48px) --- */
    body { padding-top: 0 !important; }
    #mm-0.mm-page, .mm-page.mm-slideout {
        padding-top: 60px !important;
    }

    /* --- 1.0d Фоновый чертёж body (vfm6a.png) на мобиле лишний — выключаем его --- */
    body {
        background-image: none !important;
        background-color: #fff !important;
    }

    /* --- 1.4a Показываем колонку Фото на планшетах 641-900px —
       переопределяем adaptive.css .nomob{display:none}. На <=640 откат в № 2.0 ниже --- */
    table td.nomob, table th.nomob { display: table-cell !important; text-align: center !important; padding: 2px 4px !important; vertical-align: middle !important; }

    /* --- 1.5 Скрываем дубликат хлебных крошек --- */
    .breadcrumbs + .breadcrumbs,
    .breadcrumb + .breadcrumb,
    .crumbs + .crumbs { display: none !important; }
    /* Старая табличная навигация «Главная » Производители » X» на страницах брендов/каталога */
    .breadcrumbs ~ * #navigate,
    #navigate { display: none !important; }

    /* --- 1.6 Телефоны на странице контактов — больший тап-таргет --- */
    a[href^="tel:"] {
        display: inline-block;
        min-height: var(--mfx-tap);
        padding: 8px 4px;
        line-height: var(--mfx-tap);
        font-size: 17px;
        font-weight: 600;
        color: var(--mfx-brand);
    }

    /* --- 1.7 Обёртка широких таблиц: горизонтальный скролл + тень-подсказка --- */
    .tablewrap {
        position: relative;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }
    .tablewrap::after {
        content: '';
        position: absolute;
        top: 0; right: 0; bottom: 8px;
        width: 24px;
        pointer-events: none;
        background: linear-gradient(90deg, rgba(255,255,255,0), rgba(0,0,0,0.10));
    }

    /* --- 1.8 Плейсхолдер «свайпните таблицу →» перед широкими таблицами --- */
    .tablewrap::before {
        content: 'Проведите пальцем по таблице →';
        display: block;
        font-size: 12px;
        color: var(--mfx-muted);
        margin: 4px 6px 6px;
        font-style: italic;
    }

}

/* ============================================================
   2. МОБИЛА <= 640px — карточная раскладка широких таблиц
   ============================================================ */
@media (max-width: 640px) {

    /* --- 2.0 На узких экранах колонка Фото — скрыта обратно (плац важнее маленького превью).
       Откат переопределения из № 1.4a --- */
    table td.nomob, table th.nomob { display: none !important; }

    /* --- 2.1 Верхняя .list_tab на карточке товара (Артикул/Производитель/Цена/Вес)
       Превращаем 5 колонок с декоративными углами в чистый список --- */
    .list_tab {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        border: 1px solid var(--mfx-border);
        border-radius: 10px;
        background: var(--mfx-surface);
        overflow: hidden;
        margin: 0 0 16px 0;
    }
    .list_tab tr, .list_tab td, .list_tab th {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .list_tab tbody, .list_tab tr, .list_tab td, .list_tab th {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        box-sizing: border-box;
    }
    /* Прячем декоративные угловые ячейки (td1_left/td1_right/td2_left/td2_right) и разделители */
    .list_tab td[class*="_left"],
    .list_tab td[class*="_right"],
    .list_tab td.sep_tr,
    .list_tab td.sep_head,
    .list_tab th {
        display: none !important;
    }
    /* Строка = блок с двумя значениями подряд (метка + значение) */
    .list_tab tr.tr_str {
        display: flex !important;
        flex-wrap: wrap;
        gap: 4px 8px;
        padding: 10px 14px !important;
        border-bottom: 1px solid var(--mfx-border);
        background: var(--mfx-surface) !important;
    }
    .list_tab tr.tr_str:last-child { border-bottom: 0; }
    .list_tab tr.tr_str > td {
        display: inline !important;
        width: auto !important;
        padding: 0 !important;
        text-align: left !important;
        line-height: 1.4;
        font-size: 15px;
        word-break: break-word;
        overflow-wrap: anywhere;
        max-width: 100%;
    }
    /* Длинные списки аналогов через запятую — переносить в любом месте */
    .list_tab tr.tr_str > td:last-of-type {
        flex: 1 1 100%;
    }
    /* Первая осмысленная ячейка — метка (Артикул/Цена/Вес) */
    .list_tab tr.tr_str > td:not([class*="_left"]):not([class*="_right"]):first-of-type,
    .list_tab tr.tr_str > td span:first-child {
        color: var(--mfx-muted);
        font-size: 13px;
        min-width: 100px;
    }
    /* Цена — жирная и синяя */
    .list_tab tr.tr_str td span:only-child,
    .list_tab tr.tr_str td span + span {
        color: var(--mfx-ink);
    }

    /* --- 2.2 Таблица со списком товаров (spec/каталог) --- */
    /* Прячем декоративные угловые колонки */
    .prod-table .list_tab td[class*="_left"],
    .prod-table .list_tab td[class*="_right"],
    .prod-table .list_tab th {
        display: none !important;
    }

    /* --- 2.3 Sticky-колонка «Купить» в широких таблицах товаров ---
       Работает, только когда таблица сохраняет табличную раскладку (сопутствующие).
       Здесь мы не переверстываем таблицу — оставляем горизонтальный скролл,
       но липнет последняя пара колонок «Купить/В корзине». --- */
    .prod-table > .list_tab { table-layout: auto; }

    /* --- 2.4 Кнопки/ссылки «Купить»/«В корзину» — крупнее --- */
    .prod-table a[href*="cart.php"],
    a.tocart,
    a[href*="action=tocart"] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: var(--mfx-tap);
        min-height: var(--mfx-tap);
        padding: 8px 14px;
        background: var(--mfx-accent);
        color: #fff !important;
        border-radius: 8px;
        text-decoration: none;
        font-weight: 600;
        font-size: 15px;
    }
    .prod-table a[href*="cart.php"] img,
    a.tocart img {
        width: 22px;
        height: 22px;
        filter: brightness(0) invert(1);
    }

    /* --- 2.5 Инпут "К-во" — крупнее --- */
    .chkol .field input {
        width: 60px !important;
        height: 40px !important;
        padding: 6px 8px !important;
        font-size: 17px !important;
        text-align: center;
        border: 1px solid var(--mfx-border);
        border-radius: 6px;
    }

    /* --- 2.6 Читаемость шрифта в таблицах --- */
    .list_tab td, .list_tab th,
    .prod-table td, .prod-table th {
        font-size: 14px;
        line-height: 1.4;
    }

    /* --- 2.7 Ссылки в списках/меню — компактный тап-таргет --- */
    .mm-listitem > a,
    .mm-listitem > span {
        padding-top: 14px !important;
        padding-bottom: 14px !important;
        font-size: 16px !important;
    }
}

/* ============================================================
   3. Пустая корзина / гостевой блок (для .cart-empty)
   Используется в cart.php вместо редиректа
   ============================================================ */
.cart-empty {
    max-width: 520px;
    margin: 32px auto;
    padding: 28px 22px;
    background: var(--mfx-surface);
    border: 1px solid var(--mfx-border);
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.cart-empty__icon {
    width: 64px; height: 64px;
    margin: 0 auto 14px;
    color: var(--mfx-muted);
}
.cart-empty__title {
    font-size: 20px;
    font-weight: 700;
    color: var(--mfx-ink);
    margin: 0 0 8px;
    line-height: 1.3;
}
.cart-empty__text {
    font-size: 15px;
    color: var(--mfx-muted);
    line-height: 1.5;
    margin: 0 0 20px;
}
.cart-empty__actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}
.cart-empty__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--mfx-tap);
    padding: 10px 22px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    line-height: 1;
    border: 1px solid transparent;
    cursor: pointer;
    transition: filter .15s, background .15s;
}
.cart-empty__btn--primary {
    background: var(--mfx-brand);
    color: #fff;
}
.cart-empty__btn--primary:hover { filter: brightness(1.1); }
.cart-empty__btn--ghost {
    background: transparent;
    color: var(--mfx-brand);
    border-color: var(--mfx-brand);
}
.cart-empty__btn--ghost:hover { background: rgba(0,67,127,0.05); }

@media (max-width: 640px) {
    .cart-empty {
        margin: 20px 12px;
        padding: 22px 16px;
    }
    .cart-empty__title { font-size: 18px; }
    .cart-empty__btn { width: 100%; }
}