/* ==========================================================================
   Страница кольпоскопа Stern Scientific (kolposcope_stern_scientific.html)
   Десктоп не трогаем — только адаптация под мобильный.
   ========================================================================== */

@media (max-width: 860px) {

    /* ---- "Характеристики кольпоскопа Scientific" (.kolposcope_stern_scientific_led_2) ----
       Тот же float-паттерн 390/350px, что и на других страницах, плюс своё
       декоративное фоновое фото (kolposcope_stern_scientific_led_2_special.png,
       background-size:30%) — убираем на мобильном. */
    .kolposcope_stern_scientific_led_2 .item,
    .kolposcope_stern_scientific_led_2 .item.pull-right {
        float: none;
        width: 100%;
        text-align: left;
    }
    .kolposcope_stern_scientific_led_2 {
        background-image: none;
    }

    /* ---- "Модификации кольпоскопа" переключатель ----
       Тот же .painting-variants-layout/.variants-left/.variant-image-right
       компонент, что на странице Otoview Pro (см. stern-otoview-pro-page) —
       здесь 6 вариантов вместо 6 тоже, но названия длиннее ("Scientific 2 с
       моторизированной стойкой и подвижным плечом с камерой и ПО"). Фото
       над кнопками на мобильном, сетка кнопок — 1fr уже общее правило в
       adaptive.css (.variants-left). !important — переопределяем инлайновый
       <style> в <head> этой страницы, подключённый раньше этого файла. */
    .painting-variants-layout {
        display: flex !important;
        flex-direction: column-reverse !important;
        align-items: stretch !important;
        gap: 20px !important;
    }
    /* десктопный align-items:flex-start (нужен там для 2-колоночной
       раскладки) без сброса оставлял .variants-left по ширине своего
       контента — кнопки сидели слева, не на всю ширину/по центру. */
    .variants-left {
        width: 100% !important;
    }
    .variant-image-right {
        width: 100% !important;
    }

    /* ---- Одноколоночная "таблица" фото+подписи в аккордеоне "Клинические" ----
       <table class="table-comparison">, все строки — по одной ячейке
       (заголовок/фото чередуются). При одной колонке общее правило
       .table-comparison td:last-child{max-width:220px} всё равно
       срабатывает (единственная ячейка одновременно и первая, и
       последняя) — фото сжимается и прижимается к левому краю. Добавлен
       класс table-photo-text (то же общее правило в adaptive.css, что и
       для страницы синускопа) — снимает max-width и центрирует. */
}
