/* =========================================================
   ADAPTIVE.CSS — базовый адаптив для medstern.ru
   Подключать ПОСЛЕДНИМ файлом в <head>, после styles.css,
   чтобы правила переопределяли фиксированные значения.
   ========================================================= */

*, *::before, *::after {
    box-sizing: border-box;
}

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

/* Видео-обзор (rutube-плеер) внутри .block-characters-sinuscopepro — вшит
   как <iframe width="800" height="500"> HTML-атрибутами. Не медиа-запрос:
   работает одинаково на любой ширине, десктоп не меняется (800px и так
   макс. ширина колонки). Встречается на нескольких товарных страницах —
   держим тут одним общим правилом вместо копии в css каждой страницы. */
.block-characters-sinuscopepro iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 800 / 500;
    max-width: 800px;
}

/* Списки внутри аккордеонов (.accordion .item-content ul li) — на
   некоторых страницах (vakansii.html и т.п.) аккордеон используется без
   обёртки .block-innovations-2, у которой уже есть своя чёрточка-маркер
   (.block-innovations-2 .accordion .item ul li:before) — без неё список
   остаётся с браузерным маркером по умолчанию, не в стиле сайта. Не
   медиа-запрос — тот же вид нужен и на десктопе. Ниже по специфичности,
   чем .block-innovations-2 .accordion .item ul li:before (там 3 класса в
   цепочке против 2 здесь), поэтому существующим страницам не мешает. */
.accordion .item-content ul,
.checklist-branded {
    list-style: none;
    padding: 0;
    margin: 15px 0;
}
.accordion .item-content ul li,
.checklist-branded li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 10px;
}
.accordion .item-content ul li:before,
.checklist-branded li:before {
    content: '\2713';
    position: absolute;
    left: 0;
    top: 0;
    color: #66c6ba;
    font-weight: bold;
}

/* .block-characters-zhiraf ul li (chehol_na_stetoskop_infant_zhiraf.html,
   "Характеристики чехла... Материал - Плюш") — этому конкретному варианту
   .block-characters-* забыли добавить фирменную галочку :before (все
   остальные варианты — audiometr, stern-lift, derma и т.д. — её имеют).
   Тут уже зарезервирован padding-left:70px под иконку 40×40 (десктоп),
   тот же фирменный ✓, отцентрованный в этом пространстве. Не медиа-запрос
   — баг был и на десктопе тоже. */
.block-characters-zhiraf ul li:before {
    content: '\2713';
    position: absolute;
    left: 20px;
    top: 0;
    color: #66c6ba;
    font-weight: bold;
    font-size: 20px;
}

/* ===== БАЗОВЫЙ КОНТЕЙНЕР: было width:1170px фикс, делаем резиновым ===== */
.container,
.price-block__inner {
    width: 100%;
    max-width: 1170px;
}

/* ===== ШАПКА / БУРГЕР-МЕНЮ =====
   Прячем десктопное меню и телефон-текст, показываем кнопку-бургер.
   ВАЖНО: нужна разметка кнопки в header.html, см. комментарий ниже. */
.burger-btn {
    display: none;
    width: 30px;
    height: 24px;
    position: relative;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    z-index: 1000000;
}
.burger-btn span,
.burger-btn::before,
.burger-btn::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: #fff;
    transition: transform .2s, opacity .2s;
}
.burger-btn::before { top: 0; }
.burger-btn span { top: 11px; }
.burger-btn::after { bottom: 0; }
.burger-btn.active::before { transform: translateY(11px) rotate(45deg); }
.burger-btn.active::after  { transform: translateY(-11px) rotate(-45deg); }
.burger-btn.active span    { opacity: 0; }

/* Ссылка "← Все разделы" внутри выпадающих подменю — нужна только в
   мобильном drill-down (см. @media ниже), на десктопном hover-дропдауне
   не показываем */
.sub-menu-back {
    display: none;
}

/* Подпись под заголовком слайдера — на всех товарных страницах в разметке
   на <h3> висит инлайновый style="width:600px" (расчёт под десктопный
   баннер), внешний CSS инлайн-стиль не перебивает — стало нормой убирать
   этот style="" из HTML и держать ширину здесь. */
.slider h3 {
    max-width: 600px;
}

/* Переключение "десктопное фото / мобильное фото" в слайдере.
   Раньше пробовали через <picture><source media="..."> — ненадёжно:
   bxSlider клонирует слайды для infinite:true, и клонирование <picture> в
   части браузеров не переносит корректно выбор нужного <source> на клон,
   часть слайдов "залипает" на десктопной картинке независимо от экрана.
   Два обычных <img> в разметке (класс slide-img--desktop / --mobile),
   виден только один — переключение чистым CSS, к клонированию узлов
   никаких вопросов (класс и стили копируются с элементом всегда надёжно). */
.slider .slider-image .slide-img--mobile {
    display: none;
}
@media (max-width: 860px) {
    .slider .slider-image .slide-img--desktop {
        display: none;
    }
    .slider .slider-image .slide-img--mobile {
        display: block;
    }
}

/* Пункт с языками (ENG/DEU) внутри .header-menu — дублирует десктопный
   переключатель .lang, на десктопе .header-menu виден всегда, поэтому этот
   пункт нужен только на мобильном (см. @media ниже). Специфичность важна:
   ".header-menu li" в styles.css — (0,1,1), это больше чем просто
   ".header-menu__lang" (0,1,0) и раньше перебивало скрытие. */
.header-menu .header-menu__lang {
    display: none;
}

@media (max-width: 860px) {

    /* Цепочки из нескольких подряд идущих <br> прямо в разметке (найдено
       от 4 до 22(!) штук подряд на 14 товарных страницах — proektor_znakov_
       opton.html, sinuscope.html, recirkulyator_stern.html, Talmo/Talmo2,
       Otoview, Кольпоскоп, LOR-комбайн, Otoscan-201/202, Lift, Derma и
       Derma-i) — на десктопе высокие блоки визуально "проглатывают" такой
       отступ, на мобильном это чистая "простыня" пустого места в
       несколько экранов. Не переписываем HTML на 14 страницах — один раз
       схлопываем: у любого <br>, перед которым сразу идёт другой <br>,
       просто убираем высоту строки, остаётся только первый <br> из цепочки
       (сама навигация по html/css игнорирует текстовые узлы-пробелы между
       тегами, так что это работает независимо от переносов строк в
       исходнике). Только мобильный — на десктопе так же не трогаем. */
    br + br {
        display: none;
    }

    /* Полоса превью-миниатюр в открытом Fancybox (thumbs:{autoStart:true})
       — на нескольких страницах (o_kompanii.html, sertifikaty.html,
       oem_odm_razrabotka.html) занимает четверть экрана снизу на
       мобильном, куда её впихнули десктопные 95px высоты. Убираем на
       мобильном совсем — открытое фото само по себе, только фото и
       стрелки навигации, без очереди превью. */
    .fancybox-thumbs {
        display: none !important;
    }
    .fancybox-show-thumbs .fancybox-inner {
        right: 0 !important;
        bottom: 0 !important;
    }

    /* Старые страницы иногда обтекают текстом картинку через легаси HTML-
       атрибут align="right"/"left" (эквивалент float, приоритет как у
       ширины/высоты — обычное CSS-правило перебивает без !important).
       На мобильном узкая колонка с обтекающим текстом вокруг ~200px фото
       смотрится плохо — картинка обычным блоком по центру, без обтекания. */
    img[align="right"],
    img[align="left"] {
        float: none;
        display: block;
        margin: 0 auto 15px;
    }

    /* html/body в styles.css имеют min-width:1170px — это буквально не даёт
       странице сжаться на телефоне (будет либо горизонтальный скролл, либо
       зум вместо адаптивной вёрстки). Снимаем на мобильных ширинах. */
    html, body {
        min-width: 0;
        /* защитная сетка: если где-то ещё остался десктопный элемент с
           фиксированной шириной, который мы не поймали руками — прячем
           горизонтальный оверфлоу, а не даём странице "уезжать" вбок */
        overflow-x: hidden;
    }

    /* --- контейнеры и отступы --- */
    .container {
        padding: 0 15px;
    }

    /* --- шапка --- */
    .header-holder {
        height: 56px;
    }
    .header {
        height: 56px;
    }
    .header .header-box {
        height: 56px;
        padding: 14px 15px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    /* лого — раньше держалось на десктопном хаке (padding-top:50 +
       overflow:hidden под высоту шапки 70px), на 56px шапке от него
       лого обрезалось. На мобильном сбрасываем хак и показываем лого
       целиком, чистым размером, по центру строки (flex-строка шапки). */
    .header .logo,
    .header .logo-en {
        margin: 0;
        float: none;
        display: block;
        width: 132px;
        height: 36px;
        padding: 0;
        overflow: hidden;
        /* Раньше пробовал text-indent:-9999px — не сработало: у .header
           стоит text-align:right (наследуется), а text-indent вместе с
           text-align:right в паре ведёт себя ненадёжно и не всегда реально
           уводит текст за пределы блока — известная особенность CSS.
           font-size:0 надёжнее — текст просто схлопывается, никаких
           зависимостей от выравнивания. */
        font-size: 0;
        line-height: 0;
        text-align: left;
        background-size: 132px 36px;
        background-position: left center;
        background-repeat: no-repeat;
    }
    .header .tel {
        display: none; /* телефон переезжает в мобильное меню — см. ниже */
    }
    /* десктопный переключатель языка в строке шапки прячем — на мобильном
       он переехал внутрь бургер-меню (пункт .header-menu__lang) */
    .header .header-box > .lang {
        display: none;
    }
    .burger-btn {
        display: block;
        flex: none;
    }

    /* Само меню — по умолчанию скрыто, показывается по классу .active,
       который навешивает JS на клик по .burger-btn */
    .header-menu {
        display: none;
        position: fixed;
        top: 56px;
        left: 0;
        right: 0;
        bottom: 0;
        background: #191919;
        overflow-y: auto;
        padding: 20px 0;
        z-index: 999998;
    }
    .header-menu.active {
        display: block;
    }
    .header-menu li {
        display: block;
        margin: 0;
        padding: 14px 20px;
        border-bottom: 1px solid rgba(255,255,255,.08);
        white-space: normal;
    }
    /* пункт с языками внутри мобильного меню */
    .header-menu .header-menu__lang {
        display: block;
    }
    .header-menu__lang a {
        color: #66c6ba;
    }

    /* Выпадающие подменю на мобильном — отдельный полноэкранный слой поверх
       списка разделов (z-index выше .header-menu), а не абсолютный блок
       (тот улетел бы за экран) — тап по разделу "открывает" его, "← Все
       разделы" возвращает к списку. */
    .sub-menu-holder,
    .sub-menu-2-holder,
    .sub-menu-3-holder {
        position: fixed;
        top: 56px;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 999999;
        overflow-y: auto;
        padding: 20px;
    }
    .sub-menu-back {
        display: block;
        color: #66c6ba;
        text-decoration: none;
        font-size: 15px;
        margin-bottom: 16px;
    }
    .sub-menu ul,
    .sub-menu-2 ul,
    .sub-menu-3 ul {
        display: block;
        width: 100%;
        padding: 0 0 20px;
    }
    /* "Услуги" и "О компании и контакты" в десктопной вёрстке разбиты на
       несколько <ul> просто ради колонок — без заголовков групп (в отличие
       от "Все приборы", там у групп есть .item-title, это осмысленное
       разделение). На мобильном, сложенные в один список, эти колонки без
       заголовков давали двойной отступ (padding низа <ul> + margin низа
       последнего <li>) — визуально "большой пробел" между парами пунктов.
       Убираем нижний паддинг <ul>, пункты идут единым списком подряд. */
    .sub-menu-2 ul,
    .sub-menu-3 ul {
        padding-bottom: 0;
    }

    /* блокируем прокрутку страницы под открытым мобильным меню
       (класс .mobile-menu-open навешивается JS на <html>) */
    html.mobile-menu-open {
        overflow: hidden;
    }

    /* --- слайдер-баннер в шапке товарных страниц (.slider-holder) ---
       Общее для всех товарных страниц — раньше правил отдельно на каждой,
       теперь один раз здесь. Текст поверх фото на весь экран телефона не
       влезает (десктопный h1:72px + фиксированный слайд-контент
       bottom:230px), переводим в обычный поток под фото. */
    .slider .slider-image:before {
        display: none;
    }
    .slider .slide-content {
        position: static;
        padding: 20px 0;
        background: #fff;
        text-align: center;
    }
    .slider h1 {
        font-size: 32px;
        margin: 0 0 10px;
        color: #4e4e4e;
    }
    .slider h1 span {
        color: #66c6ba;
    }
    .slider .reverse h1 span {
        color: #66c6ba;
    }
    .slider h3 {
        font-size: 16px;
        line-height: 1.5;
        margin: 0 auto;
        max-width: 100%;
    }
    /* превью-пейджер — на десктопе абсолютно спозиционирован поверх фото,
       миниатюры по 100px не влезают в экран телефона по ширине —
       переводим под фото обычным потоком, миниатюры мельче и без
       собственного горизонтального паддинга (он уже есть у родительского
       .container), чтобы все влезали в один ряд даже на маленьких
       телефонах */
    .slider-pager {
        position: static;
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 6px;
        padding: 12px 0;
    }
    .slider-pager a {
        width: 50px;
        height: 36px;
        margin-right: 0;
        flex: none;
    }

    /* --- порядок блоков в слайдере: фото → миниатюры пейджера → текст ---
       По умолчанию DOM-порядок даёт фото → текст (оба внутри одного <li>),
       а пейджер идёт последним — он вообще вне .slider, отдельным блоком
       после него. При длинном тексте это "съезжает" визуально непонятно.
       Просьба: фото, сразу под ним миниатюры-переключатели, ниже текст.

       .slider-pager физически лежит СНАРУЖИ .slider (сосед на уровне
       .slider-holder), а текст (.slide-content) лежит ВНУТРИ .slider,
       вложен в <li> рядом с фото — это не братья на одном уровне, чистым
       CSS order их между собой не переставить. Решение — display:contents
       на промежуточных обёртках (ul, li, .rel.reverse, .container.rel),
       чтобы фото/пейджер/текст стали настоящими flex-элементами одного
       уровня (.slider-holder), и обычный flex order.

       Ограничение: только для слайдеров с ОДНИМ слайдом (li:only-child) —
       это подавляющее большинство товарных страниц. На мобильном bxSlider
       вообще не запускается (см. custom.js: `if (html.mobile)` — ручной
       hide()/show() по индексу вместо карусели), а не единственный <li>
       скрывается через инлайновый style="display:none", который
       display:contents с !important тут же перебил бы — карусель
       переключения слайдов сломалась бы. Для мульти-слайдовых страниц
       (например Kinesio) эту перестановку не делаем, оставляем как было
       (фото → текст → пейджер) — их мало, и там реальное переключение. */
    .slider-holder {
        display: flex;
        flex-direction: column;
    }
    .slider,
    .slider ul {
        display: contents;
    }
    .slider ul li:only-child {
        display: contents !important;
    }
    .slider ul li:only-child .rel {
        display: contents;
    }
    .slider-holder > .container.rel {
        display: contents;
    }
    .slider-image {
        order: 1;
    }
    .slider-pager {
        order: 2;
        margin-bottom: 8px;
    }
    .slide-content {
        order: 3;
    }

    /* --- заголовки секций (.block-title) ---
       Базовый .block-title — 48px, рассчитан на десктопный контейнер;
       почти на каждой товарной странице встречается несколько раз
       ("Характеристики", "Инновации", "Технические характеристики" и
       т.п.) и почти всегда на телефоне слишком крупный. Раньше правили
       это перечислением конкретных родительских классов на каждой
       странице отдельно — после третьей страницы с одинаковой правкой
       выносим сюда одним общим правилом. Если где-то понадобится другой
       размер — переопределяется на странице более специфичным селектором
       (.какой-то-блок .block-title{...}), он и так специфичнее этого. */
    .block-title {
        font-size: 24px !important;
        line-height: 1.35 !important;
        margin-bottom: 22px !important;
    }

    /* --- вертикальные отступы секций-обёрток ---
       Десктопный padding у большинства секций 60–100px сверху/снизу —
       рассчитан на просторный десктопный контейнер, на телефоне между
       каждым блоком образуется "простыня" пустого места. Компактнее, но
       не до нуля — сохраняем реальное разделение секций. Где паддинг был
       только с одной стороны (например .block-innovations — только
       сверху, т.к. снизу разделение даёт float-блок внутри), меняем
       только эту сторону, не добавляем то, чего не было. */
    .features-talmo,
    .block-innovations-2,
    .block-comparison,
    .block-faq {
        padding-top: 28px !important;
        padding-bottom: 28px !important;
    }
    .block-innovations {
        padding-top: 28px !important;
    }
    .block-question {
        padding-top: 32px !important;
        padding-bottom: 40px !important;
    }
    /* Ещё одна волна тех же "простыней" — секции с десктопным паддингом
       60-100px, встречаются на десятках товарных страниц каждая (особенно
       .block-reviews — отзывы есть почти на каждой карточке товара). */
    .block-innovations-audiometr,
    .block-innovations-lift,
    .block-zhiraf-1,
    .block-oftalmoskop-stern-optoview,
    .block-oftalmoskop-stern-optoview-pro,
    .block-otoskop-stern-otoview,
    .block-rec-stern-timer,
    .features-talmo2,
    .block-characters-pros,
    .block-reviews,
    .features-buy {
        padding-top: 28px !important;
        padding-bottom: 28px !important;
    }
    /* .block-characters (+ варианты -talmo/-talmo2/-stanok) — отдельный
       случай, пропущенный раньше: тут не только большой padding блока
       (20px 0 59px), но и огромные margin у заголовка (54px сверху,
       50px снизу) и у текста-описания (59px снизу) — на десктопе это
       "воздух" вокруг короткого текста про рег.удостоверение, но
       встречается и в блоке "Характеристики" с более длинным списком, и
       всё вместе даёт 150-200px пустоты на мобильном. margin-bottom у
       .block-title уже сжат общим правилом выше — тут дожимаем
       padding блока, margin-top заголовка и margin-bottom текста. */
    .block-characters,
    .block-characters-talmo,
    .block-characters-talmo2,
    .block-characters-stanok,
    .block-characters-audiometr,
    .block-characters-audiometr-201,
    .block-characters-stern-lift {
        padding: 16px 0 24px !important;
    }
    .block-characters .block-title,
    .block-characters-talmo .block-title,
    .block-characters-talmo2 .block-title,
    .block-characters-stanok .block-title,
    .block-characters-audiometr .block-title,
    .block-characters-audiometr-201 .block-title,
    .block-characters-stern-lift .block-title {
        margin-top: 0 !important;
    }
    .block-characters .item-text,
    .block-characters-talmo .item-text,
    .block-characters-talmo2 .item-text,
    .block-characters-stanok .item-text,
    .block-characters-audiometr .item-text,
    .block-characters-audiometr-201 .item-text,
    .block-characters-stern-lift .item-text {
        margin-bottom: 24px !important;
    }
    .block-characters ul li,
    .block-characters-talmo ul li,
    .block-characters-talmo2 ul li,
    .block-characters-stanok ul li,
    .block-characters-audiometr ul li,
    .block-characters-audiometr-201 ul li,
    .block-characters-stern-lift ul li {
        margin-bottom: 20px !important;
    }
    /* .block-characters-zhiraf — тот же паттерн (margin-top:54px у
       заголовка), но padding и margin-bottom текста другие (меньше),
       трогаем только то, что реально большое. */
    .block-characters-zhiraf .block-title {
        margin-top: 0 !important;
    }
    /* .block-sternotoscopefo (страница Otoview Pro, highcri) — 30px с
       обеих сторон, компактнее вместе с остальными "простынями". */
    .block-sternotoscopefo {
        padding: 16px 0 !important;
    }

    /* --- голые <h1> внутри .features-stanok (design.html, metall_frezer.html,
       proizvodstvo.html — "портфолио"-страницы, заголовок каждого блока
       станка/проекта прямо в <h1>, не через .block-title) ---
       Базовый h1 — 2em без переноса длинных слов, на мобильном упирается
       в край контейнера/вылезает за него. */
    .features-stanok h1 {
        font-size: 22px !important;
        line-height: 1.3 !important;
        margin: 0 0 12px !important;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    /* --- блоки с белым текстом на декоративном фоне (.block-characters) ---
       Белый текст держится на декоративной фоновой картинке
       (bg-characters.jpg, без background-size, не растягивается) —
       на мобильном контент часто становится выше исходной картинки,
       и низ проваливается в белый текст на белом. Плюс в списках внутри
       галочка-иконка перед пунктом — :before с position:absolute,
       не учитывается в высоте <li>, у однострочных пунктов вылезает за
       нижний край и накладывается на следующий пункт. Меняем на
       фирменный синий фон с сеткой узлов (тот же, что на карточках
       главной), растянутый на cover — покрывает любую высоту, плюс
       гарантируем минимальную высоту под иконку. Разные страницы иногда
       используют вариант класса с суффиксом под конкретный товар
       (например .block-characters-sternotoscopefo) для того же самого
       паттерна — добавляйте такой класс в этот список по мере
       обнаружения, а не заводите новое правило на странице. */
    .block-characters,
    .block-characters-sternotoscopefo,
    .block-characters-audiometr-201,
    .block-characters-audiometr,
    .block-characters-sinuscopepro,
    .block-characters-talmo,
    .block-characters-stern-lift {
        background: #1a6e73 url(../main-images/bg-blue.jpg) center top / cover no-repeat !important;
    }
    .block-characters ul,
    .block-characters-sternotoscopefo ul,
    .block-characters-audiometr-201 ul,
    .block-characters-audiometr ul,
    .block-characters-sinuscopepro ul,
    .block-characters-stern-lift ul,
    .block-characters-talmo ul {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }
    .block-characters ul li,
    .block-characters-sternotoscopefo ul li,
    .block-characters-audiometr-201 ul li,
    .block-characters-audiometr ul li,
    .block-characters-sinuscopepro ul li,
    .block-characters-stern-lift ul li,
    .block-characters-talmo ul li {
        display: block;
        width: 100% !important;
        min-height: 46px;
        margin: 0 0 22px;
        white-space: normal;
    }

    /* --- .variants-left — сетка-переключатель модификаций/вариантов
       товара (кнопки с item-title + индикатором активности), 2 колонки
       minmax(200px,260px) — на мобильном не помещается. CSS самого
       компонента у каждой страницы свой инлайновый <style> в <head> (не
       через styles.css), но имя класса и структура совпадают один-в-один
       на нескольких страницах (Otoview Pro, синускоп) — переключатель то
       рядом с фото-панелью (.painting-variants-layout), то один. Держим
       эту одну строчку общей, остальное (панель фото, если есть) —
       по месту в page-css. */
    .variants-left {
        grid-template-columns: 1fr !important;
    }

    /* --- .block-innovations-audiometr / .block-innovations-talmo ---
       Фиксированная высота под десктопную 2-колоночную раскладку float-
       блока внутри (690px / 800px), встречается на нескольких страницах
       под этими именами класса (обе страницы аудиометров, обе страницы
       Talmo) — снимаем, чтобы контент в одну колонку не обрезался. */
    .block-innovations-audiometr,
    .block-innovations-talmo {
        height: auto;
    }

    /* --- .block-reviews — карточки отзывов (используется на нескольких
       товарных страницах под одним и тем же именем класса) ---
       На десктопе 2 карточки в ряд (.reviews .item{width:50%}) и внутри
       каждой карточки заголовок в 2 ячейки (.table.table-user-info —
       имя+рейтинг слева фиксированной шириной 270px, специальность+стаж
       справа). На мобильном оба паттерна сжимаются до нечитаемого —
       карточки в одну колонку, ячейки заголовка друг под другом. */
    .block-reviews .reviews .item {
        display: block;
        width: 100% !important;
        padding: 0 0 24px !important;
    }
    .block-reviews .table.table-user-info {
        display: block;
    }
    .block-reviews .table.table-user-info .cell {
        display: block;
    }
    .block-reviews .table.table-user-info .cell:first-of-type {
        width: 100%;
        margin-bottom: 12px;
    }

    /* --- выбор цвета корпуса (.select-table / .painting / .img-full-box) ---
       Компонент цветового пикера — впервые чинили на странице рециркулятора,
       встретился один-в-один (те же имена классов) на странице отоскопа
       Otoview, теперь общий. .select-table — это display:table с
       фиксированной .cell-images шириной 585px (десктопная колонка под
       фото) — на мобильном тащит страницу вбок. Порядок на мобильном не
       "просто сложить как есть": сначала фото (второе в разметке), потом
       кнопки цветов (первые в разметке) — .select-table становится flex-
       контейнером с переворотом визуального порядка, разметку не трогаем. */
    .select-table {
        display: flex;
        flex-direction: column-reverse;
    }
    .select-table .cell,
    .select-table .cell-images {
        display: block;
        width: 100% !important;
    }

    /* список цветов — было 2 колонки по 220px через nth-child(odd) с
       margin-right, теперь настоящая сетка 2 в ряд, ровно по центру
       колонки в каждой ячейке */
    .painting {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    /* десктопная подсветка активного пункта — это фоновая подложка
       (:before) вылезающая за границы item на -10px и галочка (:after) с
       абсолютным left:150px — обе подогнаны под старую фиксированную
       ширину 220px, в сетке 2 в ряд start ломались и "мешались". Убираем
       обе, вместо них — простая рамка вокруг всего пункта. */
    .painting .item.active:before,
    .painting .item.active:after {
        display: none;
    }
    .painting .item {
        box-sizing: border-box;
        width: 100%;
        margin: 0 !important;
        padding: 12px;
        border: 2px solid #E6E7E8;
        border-radius: 6px;
        text-align: center;
        /* десктопный white-space:nowrap на .item (имена помещались в 220px
           в одну строку) на узкой карточке в сетке 2 в ряд ломает длинные
           названия цвета за границу карточки */
        white-space: normal;
    }
    .painting .item.active {
        border-color: #66c6ba;
    }
    .painting .color {
        margin: 0 6px;
    }

    /* фото выбранного цвета — стопка абсолютно спозиционированных <img>
       внутри .rel без явной высоты (на десктопе высоту "бесплатно" даёт
       display:table у .select-table — строка подстраивается под высокий
       список цветов слева). Как только раскладка стала flex-колонкой, эта
       строка пропадает, и фото схлопывается в 0 высоты. Задаём явную
       высоту через aspect-ratio (реальные фото у обеих страниц 800×900) и
       явно выставляем width/height у каждой картинки — без этого <img> с
       position:absolute и auto шириной/высотой откатывается на натуральный
       пиксельный размер файла (та же история, что была с фото карточек на
       главной). !important нужен на width/height/object-fit — на странице
       отоскопа Otoview у каждого <img> инлайновый
       style="max-height:500px;height:auto;width:auto;..." под десктоп,
       который иначе перебивает эти значения на мобильном. */
    .img-full-box {
        /* некоторые страницы (например Lift) задают инлайновый
           style="height:815px" под десктопную раскладку — снимаем. */
        height: auto !important;
    }
    .img-full-box .rel {
        position: relative;
        aspect-ratio: 8 / 9;
        max-width: 320px;
        margin: 0 auto 20px;
    }
    .img-full-box .color-type,
    .img-full-box img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        margin: 0 !important;
        max-height: none !important;
    }

    /* --- таблицы сравнения/характеристик (.table-comparison) ---
       table-layout:fixed + width:100% на нескольких колонках на мобильном
       сжимает каждую колонку до нечитаемой ширины. table-layout:auto
       (колонки по содержимому) + горизонтальный скролл у .table-holder
       как страховка, компактнее (мельче шрифт/паддинги) и "прилипающая"
       первая колонка, чтобы при скролле было понятно, что сравниваешь.
       Если у конкретной таблицы нестандартная структура (rowspan/colspan,
       как в "Рекомендуемые объёмы" на странице рециркулятора) и sticky
       мешает — отключается на странице точечным селектором
       (см. .block-innovations-2 .table-comparison td:first-child в
       css/recirkulyator.css для примера). .table-sinus (страница
       синускопа) — это буквально копия десктопного CSS .table-comparison
       под другим именем класса, добавлена в общий список по той же
       логике, что и варианты .block-characters. */
    .table-holder {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border: 1px solid #E3E4E5;
        border-radius: 8px;
    }
    /* десктопный .block-innovations-2 .table-holder{margin:0 0 0 -30px} —
       компенсация под десктопный отступ соседней колонки аккордеона.
       На мобильном (колонки нет, аккордеон в одну колонку на всю ширину)
       эти -30px просто сдвигают таблицу влево за пределы контейнера —
       встречается на многих товарных страницах с блоком
       "Характеристики"/"Свойства" (.block-innovations-2). */
    .block-innovations-2 .table-holder {
        margin: 0 !important;
    }

    /* --- карточки-ссылки (.table-dealer / .cell-dealer) ---
       blog.html ("Наш блог") и buy.html — flex-wrap с
       width:calc(33.333%-20px), на мобильном 3 карточки в ряд не
       помещаются и сжимаются. Одна колонка. */
    .cell-dealer {
        width: 100%;
    }
    .table-comparison,
    .table-sinus {
        table-layout: auto;
        width: auto;
        min-width: 100%;
    }
    .table-comparison thead tr td:first-child,
    .table-sinus thead tr td:first-child {
        font-size: 13px !important;
        padding-bottom: 12px !important;
    }
    .table-comparison thead tr td:not(:first-child),
    .table-sinus thead tr td:not(:first-child) {
        font-size: 14px !important;
        padding-top: 12px !important;
    }
    .table-comparison tbody tr td,
    .table-comparison tfoot tr td,
    .table-sinus tbody tr td,
    .table-sinus tfoot tr td {
        padding: 8px 12px !important;
        font-size: 12px !important;
    }
    .table-comparison td,
    .table-sinus td {
        min-width: 80px;
    }
    .table-comparison td:first-child,
    .table-sinus td:first-child {
        min-width: 120px;
        position: sticky;
        left: 0;
        z-index: 1;
        background: #fff;
        box-shadow: 2px 0 6px rgba(0,0,0,.08);
    }
    .table-comparison tbody tr:nth-child(2n) td:first-child,
    .table-sinus tbody tr:nth-child(2n) td:first-child {
        background: #EFF0F0;
    }
    .table-comparison td:last-child,
    .table-sinus td:last-child {
        max-width: 220px;
        white-space: normal;
    }

    /* --- "таблица" фото+текст (.table-photo-text) ---
       <table class="table-comparison table-photo-text">, обычно одна
       строка: слева фото стопкой, справа длинный текст (или наоборот) —
       не сравнение данных, просто взяли готовую стилизацию таблицы под
       нужный вид. См. stern-sinuscope-page для истории — общее с самого
       начала, т.к. один и тот же случай сразу на 2 страницах. Второй
       класс ".table-photo-text" добавляется в разметке КОНКРЕТНО к нужной
       таблице — общие правила .table-comparison (см. выше, sticky
       первая колонка/max-width:220px на последней) для неё не подходят,
       а трогать сам .table-comparison для всех остальных таблиц нельзя. */
    .table-photo-text,
    .table-photo-text tbody,
    .table-photo-text tr,
    .table-photo-text td {
        display: block !important;
        width: 100% !important;
    }
    .table-photo-text td {
        max-width: none !important;
        min-width: 0 !important;
        position: static !important;
        box-shadow: none !important;
        background: transparent !important;
        text-align: center !important;
        padding: 8px 0 !important;
    }
    .table-photo-text img {
        display: block !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    /* --- кнопка "История разработки…" (.btn-back) ---
       На ПК высота/line-height фиксированы под однострочный текст (55px).
       Заголовки обычно длинные ("История разработки ЛОР-Комбайна Stern
       UniLOR" и т.п.), на телефоне неизбежно переносятся на 2 строки —
       фиксированный line-height:55px сплющивал/наслаивал строки друг на
       друга ("кнопка не полная"). Нормальная многострочная кнопка на всю
       ширину. */
    .btn-back {
        display: block;
        width: 100%;
        height: auto;
        line-height: 1.35;
        padding: 16px 20px;
        font-size: 16px;
    }

    /* --- кнопки с длинным текстом (.btn-wrap) ---
       Тот же баг, что и у .btn-back, только у голого .btn (submit/order
       кнопки по всему сайту) — большинство коротких ("Купить",
       "Получить КП") влезают на телефоне в одну строку и трогать общий
       .btn нельзя, сломает их фиксированную "таблеточную" высоту. Для
       редких кнопок с длинным текстом ("Подробнее о металлообработке" и
       т.п.) добавляйте вторым классом .btn-wrap — та же многострочная
       раскладка на всю ширину, что и у .btn-back. */
    .btn-wrap {
        display: block;
        width: 100%;
        height: auto;
        line-height: 1.35;
        padding: 16px 20px;
        white-space: normal;
        text-align: center;
        box-sizing: border-box;
    }

    /* --- "Совместный проект" — партнёрский логотип внутри слайдера ---
       Логотипы партнёров (ЛЗОС, Биомедилен и т.п.) вставлены в разметку
       через <img width="200|300"> внутри подписи слайдера — на десктопе
       нормально, на мобильном рядом с уже более мелким текстом смотрится
       слишком крупно и разбалансированно.
       Если текст+лого обёрнуты в <span class="partner-badge"> (переходите
       на эту разметку при следующей правке страницы, где встретится
       "Совместный проект" без обёртки) — красиво собираем в одну строку
       flex'ом, а вложенный <br> (нужен на десктопе для переноса) на
       мобильном прячем, чтобы не давал двойной отступ поверх gap. Без
       обёртки — просто уменьшаем и разносим блоками (запасной вариант). */
    .partner-badge {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 12px;
    }
    .partner-badge br {
        display: none;
    }
    /* .slider h3 .partner-badge... — не просто .partner-badge b/img: у
       запасного варианта ниже (.slider h3 b/.slider h3 img) специфичность
       выше, чем у голого ".partner-badge img" (два элемента в цепочке
       против одного), и он бы перебивал 70px обратно на 120px.
       .video-top-text .partner-badge... — тот же бейдж, но в видео-шапке
       (stern_derma.html), которая не .slider — добавлено тем же приёмом.
       .block-zhiraf-innovations .partner-badge — то же самое на странице
       чехла Жираф. */
    .slider h3 .partner-badge b,
    .video-top-text .partner-badge b,
    .block-zhiraf-innovations .partner-badge b {
        font-size: 13px;
        color: #8a9296;
        font-weight: normal;
        text-align: left;
    }
    .slider h3 .partner-badge img,
    .video-top-text .partner-badge img,
    .block-zhiraf-innovations .partner-badge img {
        width: 70px !important;
        height: auto !important;
        margin: 0 !important;
        flex: none;
    }
    /* запасной вариант для страниц без обёртки .partner-badge */
    .slider h3 b {
        display: block;
        margin-top: 14px;
        font-size: 13px;
        color: #8a9296;
        font-weight: normal;
    }
    .slider h3 img {
        display: block;
        width: 120px !important;
        height: auto !important;
        margin: 8px auto 0;
    }

    /* --- блок цены --- */
    .price-block__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 0 15px;
    }
    .price-list__name {
        min-width: auto;
    }

    /* --- формы (модалки, "задать вопрос") --- */
    .input-field {
        width: 100% !important;
        margin-bottom: 10px;
    }
    .box-modal {
        width: 92% !important;
        max-width: 92% !important;
        padding: 20px !important;
    }

    /* --- блок "Задать вопрос" (_includes/vopros_help.html) ---
       свёрстан через table-cell с жёсткими шириной 474px + 500px и
       отступом слева 153px (расчёт на десктопный контейнер ~1170px) —
       на телефоне это и тащило всю страницу далеко вбок. Сбрасываем
       на простую вертикальную колонку. */
    .block-question .table-form {
        display: block;
    }
    .block-question .table-form .cell,
    .block-question .table-form .cell:first-of-type {
        display: block;
        width: 100%;
    }
    .block-question .help-text {
        width: 100%;
        margin: 30px 0 0;
    }

    /* --- слайдеры сертификатов/патентов/наград (.sert-slider-wrap, slick) ---
       Встречается на o_kompanii.html и sertifikaty.html под одним и тем же
       именем класса, определён в собственном <style> каждой страницы с
       фиксированной шириной width:1100px — на мобильном тащит вбок.
       Стрелки на десктопе выведены за пределы слайдера (-45/-48px) — на
       мобильном там нет места, переносим внутрь. */
    .sert-slider-wrap {
        width: 100%;
    }
    .sert-slider-wrap .slick-prev {
        left: 6px;
    }
    .sert-slider-wrap .slick-next {
        right: 6px;
    }
    /* Стрелки заданы фиксированным top:145px (десктоп, под исходную
       высоту бокса 290px) — на мобильном .sert-img-wrap уменьшен до
       200px, но top не переопределялся, поэтому стрелки съезжали вниз
       относительно реальной (более короткой) картинки. Центрируем по
       факту на мобильную высоту бокса. */
    .sert-slider-wrap .slick-prev,
    .sert-slider-wrap .slick-next {
        top: 115px !important;
    }
    /* Бокс landscape-формы (200px высота, шире чем выше) — сами
       сертификаты/патенты почти всегда портретные (реально ~800×1141,
       соотношение ~0.7 — как A4). Внутри max-height/max-width уже не
       обрезают (проверено: natural 800×1141 → рендер сохраняет то же
       соотношение сторон, кропа нет), но картинка вписывалась мелко с
       большими пустыми полями по бокам. Увеличиваем высоту бокса под
       реальную портретную пропорцию — фото используют больше места. */
    .sert-img-wrap {
        height: 230px;
        padding: 8px;
        box-sizing: border-box;
    }
    /* .sert-img-wrap уменьшен со 290px до 200px, а у картинки внутри
       остаётся десктопный max-height:280px — при overflow:hidden на
       обёртке картинка обрезается сверху/снизу вместо того чтобы
       вписаться. Ограничиваем по факту доступной высоте контейнера. */
    .sert-slider img {
        max-height: 100% !important;
        max-width: 100% !important;
    }
}

/* --- иконки соцсетей в футере ---
   в разметке высота задаётся HTML-атрибутом height="40", а исходники —
   квадратные 512×512px. Общий сброс "img{height:auto}" в начале этого
   файла (нужен для адаптивности остальных картинок) сносит этот атрибут,
   и иконки разъезжаются в свой огромный natural size. Фиксируем размер
   явно в CSS — без привязки к брейкпоинту, баг не мобильный-специфичный. */
.footer-menu img {
    width: 40px;
    height: 40px;
}

@media (max-width: 480px) {
    .product-block .block-title {
        font-size: 19px;
    }
    .price-list__value {
        font-size: 18px;
    }
    .download-manual-btn {
        width: 100%;
        justify-content: center;
        padding: 12px 16px;
    }
}
