/* ==========================================================================
   Страница рециркулятора Stern SteriLife (recirkulyator_stern.html)
   Десктоп не трогаем ("на ПК всё супер") — только адаптация под мобильный.
   ========================================================================== */

@media (max-width: 860px) {

    /* .table-holder/.table-comparison (общий скролл+компактность) и
       .block-characters (фон+галочки) теперь общие правила в adaptive.css —
       здесь только то, что специфично именно для этой страницы: заголовки
       чуть мельче общего (было отдельное пожелание), нестандартная таблица
       "Рекомендуемые объёмы" и т.д. ниже. */

    /* ---- заголовки секций (эта страница просила чуть мельче, чем общие 24px) ----
       "Сравнение моделей"/"Дополнительные принадлежности" (общий класс
       .block-comparison у обеих), "...со счётчиком", "Один из самых
       мощных...", "Дополнительная информация", "Цветовые решения..." —
       везде общий .block-title, рассчитанный на десктопный контейнер. */
    .block-comparison .block-title,
    .block-rec-stern-timer .block-title,
    .block-characters-sternotoscopefo .block-title,
    .block-innovations-2 .block-title,
    .block-characters-pros .block-title {
        font-size: 19px !important;
        line-height: 1.35 !important;
        margin: 0 0 18px !important;
    }

    /* ---- "Рециркулятор-облучатель SteriLife со счётчиком" ----
       Картинка таймера сидела фоном (background-image) внутри блока с
       фиксированной высотой 550px и текстом шириной 390px рядом — на
       телефоне это давало горизонтальный оверфлоу и кучу пустого места
       (текст короткий, а высота блока фиксированная под десктопную
       раскладку "текст слева, фото фоном справа"). Разворачиваем в
       нормальный поток: картинка сверху отдельным блоком (через ::before
       с aspect-ratio — соотношение сторон реального файла 1040×799),
       текст под ней. */
    .block-rec-stern-timer .block-rec-stern-timer-innovations {
        height: auto;
        display: flex;
        flex-direction: column;
        background: none;
    }
    .block-rec-stern-timer .block-rec-stern-timer-innovations::before {
        content: '';
        display: block;
        width: 100%;
        max-width: 300px;
        aspect-ratio: 1040 / 799;
        margin: 0 auto 20px;
        background: url(../img/recirkulyator_stern_timer.png) center / contain no-repeat;
    }
    .block-rec-stern-timer .block-rec-stern-timer-innovations .item {
        width: 100%;
        margin: 0;
        text-align: center;
    }

    /* ---- таблица "Рекомендуемые объёмы помещений" (в аккордеоне) ----
       У неё нестандартная структура — ячейки объединены по вертикали
       (rowspan) для названий моделей и разделители-<hr> на всю строку
       (colspan). "Прилипающая" первая колонка (sticky), которая хорошо
       работает для обычных табличных строк, на rowspan-ячейках и
       разделителях съезжает и мешает скроллу. Для таблиц внутри этого
       аккордеона (здесь же и "Категории и типы помещений", ей sticky
       тоже без надобности — там всего 2 колонки) просто отключаем sticky,
       оставляем обычную горизонтальную прокрутку без залипания. */
    .block-innovations-2 .table-comparison td:first-child {
        position: static;
        box-shadow: none;
    }

    /* Выбор цвета корпуса (.select-table/.painting/.img-full-box) теперь
       общий фикс в adaptive.css — тот же компонент один-в-один встретился
       на странице отоскопа Otoview. Фото здесь реальное соотношение
       800×900, отличается от общего aspect-ratio 8/9 в adaptive.css лишь
       на глаз не заметно, отдельного переопределения не потребовалось. */
}