/* ==========================================================================
   Страница ЛОР-комбайна Stern UniLOR (lor_kombajn_otoconcept.html)
   Раньше эти стили жили в инлайн <style> прямо в HTML — вынесено сюда,
   чтобы всё было в одном месте, а не размазано по странице. Здесь же
   мобильная адаптация страницы (слайдер, переключатель модификаций).
   ========================================================================== */

/* ---------- переключатель модификаций (UniLOR / UniLOR Max) ---------- */

.variants-left {
    display: grid;
    grid-template-columns: repeat(2, minmax(200px, 260px));
    gap: 20px 30px;
}
.variants-left .item {
    cursor: pointer;
    background: #fff;
    border: 1px solid #E6E7E8;
    border-radius: 6px;
    padding: 10px 10px 10px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.3s;
}
.variants-left .item.active {
    background: #F1F2F2;
    border-color: #66c6ba;
}
.variants-left .item-title {
    font: 18px 'Roboto Thin';
    color: #4e4e4e;
    flex: 1;
}
.variants-left .item.active .item-title {
    color: #66c6ba;
    font-weight: 600;
}
.variants-left .item-indicator {
    width: 40px;
    height: 40px;
    position: relative;
}
.variants-left .item.active .item-indicator:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAACgUlEQVRYw9WZPS9DURjHr/eXxYCQkDuJEtZW4kPY6gOoSMyWWoytUSpeBhLEpgYxkZSBWAkxmbxMUrYmraD+R/5HqrT3nPvWdvglt+095/xyzznPee5TY+bi2LBBPQiBKEiCa/AK3sgrv0vynjG20R5Lt0EfiIF7kCfi+hhsgCWywe+K74uzD9cFu8AyyIIPcAKmganQ1uS9p2ybZV9dbgmGQZqdb4Nhm8vCYNsd9pVm37YFG0CC03PFNWe4RIh95vk0G3UF28ABO1gBrS7KSVrZtxjjELSrCjZQ7hPMeSBWzBzHOuDYloJyWqM+yEmiHDNhJRjmjWs+yknkdE+WEuwEz+AStFRAsIVjv4Du/wRXuP2DFZCTBOmwXixo8oja8klkvEzY2qKLWSgYo3nABzlxLmfAfonfA3SJSUFxiD/w+PJabpTr/M7iTD6hU72M6mL3RDyW6wePFBywuHeKTiHxYZ4fTA/lOph+ZTjFKgnGdyw2mLM9eCjXDFLgHUxotBNOSXFxA448kqsDu3was5ptRT55YzDt2fRIME65uI22wiktLnLMgq0O9EXQpDHALOV2+SR1BYVTTlVwgYOdgR6Fzie45lJcg4YTQdUpjjBdf7JIXmUgvubutbs8fqZYZ5OMUTDLWFX8+4hiINbaJHuaYaYXnBdk2002ArFqmNmzG6iF1GrBuhzUDMRagdrJURcpeBXVDcRW/f4cdU6TBfHEbsGMi/HzV7Lgd7plxZ90qxIJazn+TVirPuWviZemanntDNf0i3tNlD6qvnhUqvwWdHm3Oiq/lStgDjksYG6zrxenBcxyJeAUz0vVEnCEx5cnJeCaKKKr/g2RI679DfEFMw/EcAOz4V8AAAAASUVORK5CYII=);
    background-size: contain;
    background-repeat: no-repeat;
}

/* ---------- переключаемые блоки текста под модель (UniLOR / UniLOR Max) ---------- */

.mod-content {
    display: none;
}
.mod-content.mod-active {
    display: block;
}

/* ---------- видео (iframe rutube) — было жёстко 800×500, не сжималось ---------- */

/* ---------- блок "Модификации" — фото рядом с переключателем ----------
   На ПК фото выбранной модификации справа от кнопок, на мобильном — сверху
   над кнопками. Разметка: .variants-row оборачивает .variants-left (кнопки)
   и .variants-photo (картинки, переключаются JS вместе с switchMod()). */

.variants-row {
    display: flex;
    align-items: center;
    gap: 50px;
}
.variants-row .variants-left {
    flex: none;
}
.variants-photo {
    flex: 1;
    position: relative;
    min-width: 0;
    max-width: 360px;
    aspect-ratio: 4 / 3;
}
.variants-photo img {
    display: none;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 15px 20px rgba(0,0,0,.15));
}
.variants-photo img.mod-photo-active {
    display: block;
}

/* ==========================================================================
   МОБИЛЬНАЯ АДАПТАЦИЯ (≤860px)
   ========================================================================== */
@media (max-width: 860px) {
    /* общие мобильные правила .slider/.slider-pager теперь в adaptive.css
       (одинаковые на всех товарных страницах) — здесь только то, что
       специфично именно для этой страницы */

    /* переключатель модификаций — в 2 колонки по 200px+ не влезает в экран
       телефона, на мобильном одна колонка на всю ширину */
    .variants-left {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* блок "Модификации": фото над кнопками (не сбоку) — разметка та же
       (кнопки идут первыми), просто переворачиваем визуальный порядок */
    .variants-row {
        flex-direction: column-reverse;
        gap: 20px;
    }
    .variants-photo {
        max-width: 260px;
        margin: 0 auto;
    }

    /* полноширинные картинки-иллюстрации в тексте и так адаптивны
       (img{max-width:100%} из adaptive.css), но inline width:40% на
       телефоне превращает крупную иллюстрацию в мелкую — на мобильном
       такие иллюстрации лучше на всю ширину */
    .mod-content img[width="40%"] {
        width: 100% !important;
    }

    /* ---- крупный вводный текст (h1/h3) под переключателем модификаций ----
       .block-lor-kombajn-stern h1 был 60px, h3 — 24px/36px, рассчитаны на
       десктопный контейнер ~1170px — на телефоне это и был "слишком крупный
       текст" из формулировки. Общий .slider h1/h3 (внутри самого слайдера)
       уже поправлен выше, здесь — вводный блок после переключателя. */
    .block-lor-kombajn-stern h1 {
        font-size: 26px;
        line-height: 1.25;
        margin: 0 0 12px;
    }
    .block-lor-kombajn-stern h3 {
        font-size: 15px;
        line-height: 1.5;
        margin: 0 0 24px;
    }

    /* .block-characters (фон + список с галочками) и .block-title (48px)
       теперь общие правила в adaptive.css — здесь больше не нужны */

    /* ---- "Характеристики ЛОР комбайна Stern" (.innovations-lor-kombajn-stern) ----
       Десктопная вёрстка — float-колонки по 390/350px + инлайновые
       style="margin-top:-30px" для сборки в шахматном порядке (классический
       float-масонри-хак). На телефоне это ломается: колонки шире экрана,
       а отрицательные отступы наезжают на текст ("текст прыгает"/наслаивается).
       Плюс декоративное фоновое фото секции (lor_kombain_real.jpg,
       без background-size) не покрывает возросшую высоту. */
    .block-innovations-lor-kombajn-stern {
        background-image: none;
    }
    .innovations-lor-kombajn-stern .item,
    .innovations-lor-kombajn-stern .item.pull-right {
        float: none;
        width: 100%;
        text-align: left;
        margin-top: 0 !important;
    }

    /* ---- "оборудован высококачественной эндоскопической камерой…" и
       заголовок "MicroscopeDB: Программа для…" ----
       Оба используют общий класс .block-title (48px, сделан для коротких
       заголовков в 2-3 слова) для целого предложения — на телефоне текст
       не помещается по ширине и вылезает за экран. */
    .block-sternotoscopefo .block-title,
    .block-innovations-2 .block-title {
        font-size: 18px !important;
        line-height: 1.5 !important;
    }

    /* .btn-back ("История разработки…") теперь общее правило в adaptive.css */
}