/* ============================================================
   УТИЛИТЫ ДОСТУПНОСТИ (глобальные, не зависят от vi-mode)
   ============================================================ */

   .block_up {
    z-index: 100000 !important;
  }
  
  
  /* Визуально скрытый элемент — виден скринридерам, не виден на экране */
  .sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  
  /* Кнопка-аккордеон: сбрасываем дефолтные стили кнопки,
     чтобы она выглядела как оригинальный div */
  body.vi-mode button.details-item__main {
    display: flex;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
  }
  
  body.vi-mode button.details-item__main:focus {
    outline: 2px solid #0042A0;
    outline-offset: 2px;
  }
  
  /* Кнопки слайдера: убираем дефолтные стили */
  body.vi-mode button.control {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  body.vi-mode button.control:focus {
    outline: 2px solid #0042A0;
    outline-offset: 3px;
    border-radius: 3px;
  }
  
  
  /* ============================================================
     ВЕРСИЯ ДЛЯ СЛАБОВИДЯЩИХ — template.training.visually_impaired_2.css
     Система CSS-модификаторов на <body>:
       .vi-mode          — режим активирован
       .vi-size-normal/large/xlarge  — размер шрифта
       .vi-scheme-default/inverted/dark-blue — цветовая схема
       .vi-img-show/grayscale/hide   — управление изображениями
       .vi-kern-normal/wide          — межбуквенный интервал
     ============================================================ */
  
  /* ----------------------------------------------------------
     1. ПАНЕЛЬ УПРАВЛЕНИЯ
     ---------------------------------------------------------- */
  
  .vi-toolbar[hidden] {
    display: none !important;
  }
  
  .vi-sticky-btn[hidden] {
    display: none !important;
  }
  
  .vi-toolbar {
    position: sticky;
    top: 0;
    z-index: 99999;
    background: #1a1a2e;
    color: #fff;
    padding: 10px 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    align-items: center;
    border-bottom: 3px solid #4a90e2;
    animation: vi-toolbar-slide-in 0.25s ease;
    transition: transform 0.25s ease;
  }
  
  .vi-toolbar .vi-toolbar-toggle {
    margin-left: auto;
    width: 40px;
    height: 30px;
    border-radius: 14px;
    border: 1px solid #fff;
    background: #1a1a2e;
    color: #fff;
    font-size: 12px;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  
  /* Для десктопа сворачиваем панель примерно наполовину вверх */
  .vi-toolbar.vi-toolbar-collapsed {
    transform: translateY(-50%);
  }
  
  @keyframes vi-toolbar-slide-in {
    from {
      opacity: 0;
      transform: translateY(-100%);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .vi-toolbar .vi-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
  }
  
  .vi-toolbar .vi-label {
    font-size: 12px;
    opacity: 0.75;
    white-space: nowrap;
    font-family: Arial, Verdana, sans-serif;
  }
  
  .vi-toolbar button {
    padding: 5px 12px;
    border: 2px solid #fff;
    background: transparent;
    color: #fff;
    cursor: pointer;
    border-radius: 4px;
    font-family: Arial, Verdana, sans-serif;
    font-size: 14px;
    line-height: 1.3;
    transition: background 0.15s, color 0.15s;
  }
  
  .vi-toolbar .vi-btn-size[data-size="normal"] {
    font-size: 14px !important;
  }
  
  .vi-toolbar .vi-btn-size[data-size="large"] {
    font-size: 22px !important;
    line-height: 1 !important;
  }
  
  .vi-toolbar .vi-btn-size[data-size="xlarge"] {
    font-size: 29px !important;
    line-height: 1 !important;
  }
  
  .vi-toolbar button[aria-pressed="true"] {
    background: #fff;
    color: #1a1a2e;
    font-weight: bold;
  }
  
  .vi-toolbar button:hover {
    background: rgba(255, 255, 255, 0.2);
  }
  
  .vi-toolbar button[aria-pressed="true"]:hover {
    background: #e0e0e0;
    color: #1a1a2e;
  }
  
  .vi-toolbar button:focus {
    outline: 3px solid #ffff00 !important;
    outline-offset: 2px !important;
  }
  
  .vi-toolbar .vi-btn-color[data-scheme="default"] {
    background: #fff;
    color: #000;
    border-color: #fff;
  }
  .vi-toolbar .vi-btn-color[data-scheme="default"][aria-pressed="true"] {
    outline: 3px solid #ffff00;
  }
  .vi-toolbar .vi-btn-color[data-scheme="inverted"] {
    background: #000;
    color: #fff;
    border-color: #fff;
  }
  .vi-toolbar .vi-btn-color[data-scheme="dark-blue"] {
    background: #9dd1ff;
    color: #003087;
    border-color: #003087;
  }
  
  /* Для группы "Цвет" активный режим должен быть визуально очевиден */
  .vi-toolbar .vi-btn-color[aria-pressed="false"] {
    opacity: 0.65;
  }
  
  .vi-toolbar .vi-btn-color[aria-pressed="true"] {
    opacity: 1;
    box-shadow: 0 0 0 3px #ffff00 inset, 0 0 0 1px #ffff00;
  }
  
  .vi-btn-reset {
    margin-left: auto;
    background: #c0392b !important;
    border-color: #c0392b !important;
    color: #fff !important;
    padding: 5px 14px !important;
  }
  
  .vi-btn-reset:hover {
    background: #e74c3c !important;
  }
  
  @media (max-width: 767px) {
    .vi-toolbar {
      gap: 8px 12px;
      padding: 8px 10px;
    }
    .vi-toolbar button {
      padding: 4px 8px;
      font-size: 0.8em;
    }
    .vi-btn-reset {
      margin-left: 0;
    }
  }
  
  @media (max-width: 450px) {
    .vi-toolbar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      width: 100%;
      max-height: 42vh;
      overflow-y: auto;
      padding: 8px 8px 34px 8px;
      gap: 8px;
      z-index: 100000;
      will-change: transform;
    }
  
    .vi-toolbar .vi-group {
      width: 100%;
    }
  
    .vi-toolbar .vi-label {
      min-width: 108px;
    }
  
    .vi-toolbar .vi-toolbar-toggle {
      position: absolute;
      left: 50%;
      bottom: 4px;
      transform: translateX(-50%);
      width: 34px;
      height: 24px;
      border-radius: 12px;
      border: 1px solid #fff;
      background: #1a1a2e;
      color: #fff;
      font-size: 12px;
      line-height: 1;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 2;
    }
  
    .vi-toolbar.vi-toolbar-collapsed {
      transform: translateY(calc(-100% + 46px));
    }
  }
  
  
  /* ----------------------------------------------------------
     2. БАЗОВЫЙ РЕЖИМ
     ---------------------------------------------------------- */
  
  body.vi-mode {
    font-family: Arial, Verdana, sans-serif !important;
    line-height: 1.6 !important;
  }
  
  body.vi-mode * {
    font-family: Arial, Verdana, sans-serif !important;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
    box-sizing: border-box;
  }
  
  /* Отмена text-transform: uppercase — сложно читать слабовидящим */
  body.vi-mode *,
  body.vi-mode ::before,
  body.vi-mode ::after {
    text-transform: none !important;
    letter-spacing: inherit;
  }
  
  
  /* ----------------------------------------------------------
     3. РАЗМЕР ШРИФТА
     ---------------------------------------------------------- */
  
  /* CSS-переменная для масштаба — используется в calc() для
     элементов с жёстко прописанным font-size в px в основном CSS */
  :root {
    --vi-scale: 1;
  }
  body.vi-size-normal { --vi-scale: 1; }
  body.vi-size-large  { --vi-scale: 1.5; }
  body.vi-size-xlarge { --vi-scale: 2; }
  
  @media (max-width: 450px) {
    body.vi-size-large  { --vi-scale: 1.25; }
    body.vi-size-xlarge { --vi-scale: 1.45; }
  }
  
  /* Базовый размер на body — работает для элементов, которые
     наследуют font-size через em/% (не имеют явного px) */
  body.vi-size-normal  { font-size: 100% !important; }
  body.vi-size-large   { font-size: 150% !important; }
  body.vi-size-xlarge  { font-size: 200% !important; }
  
  /* ----------------------------------------------------------
     3a. МАСШТАБИРОВАНИЕ ЭЛЕМЕНТОВ С ЖЁСТКИМ font-size В px
     Основной CSS использует абсолютные px-значения, которые
     не реагируют на font-size у body. Переопределяем через calc().
     При vi-size-normal --vi-scale=1 → размер совпадает с оригиналом.
     ---------------------------------------------------------- */
  
  /* Глобальные теги h2 */
  body.vi-mode h2,
  body.vi-mode .h2 {
    font-size: calc(40px * var(--vi-scale)) !important;
    line-height: 1.25 !important;
  }
  
  /* Героблок — заголовок страницы */
  body.vi-mode .ochnoe_obuchenie_hero_container_title > p {
    font-size: calc(40px * var(--vi-scale)) !important;
    line-height: 1.25 !important;
  }
  
  /* Героблок — подзаголовок */
  body.vi-mode .ochnoe_obuchenie_hero_container_subtitle > p {
    font-size: calc(18px * var(--vi-scale)) !important;
  }
  
  /* Героблок — подписи к иконкам */
  body.vi-mode .ochnoe_obuchenie_hero_container_card > p {
    font-size: calc(13.5px * var(--vi-scale)) !important;
  }
  
  /* Героблок — ссылка «Участвуем в тендерах» */
  body.vi-mode .ochnoe_obuchenie_hero_container_link {
    font-size: calc(13px * var(--vi-scale)) !important;
    height: auto !important;
  }
  
  /* Карточки курсов — цена, длительность */
  body.vi-mode .courses-item__text p {
    font-size: calc(14px * var(--vi-scale)) !important;
    line-height: 1.4 !important;
  }
  
  /* Имена преподавателей (было h4, стало h3) */
  body.vi-mode h3.expert-item__name {
    font-size: calc(25px * var(--vi-scale)) !important;
    line-height: 1.25 !important;
  }
  
  /* Блок индивидуальной программы — текст */
  body.vi-mode .individualnaya_programma > div > p {
    font-size: calc(30px * var(--vi-scale)) !important;
    line-height: 1.3 !important;
    width: auto !important;
  }
  
  /* Соцсети — подпись «Подпишитесь...» */
  body.vi-mode .socials_container > p {
    font-size: calc(30px * var(--vi-scale)) !important;
    line-height: 1.3 !important;
    width: auto !important;
  }
  
  /* Аккордеон «Сведения» — заголовок пункта (было h6, стало h3) */
  body.vi-mode h3.details-item__title {
    font-size: calc(17px * var(--vi-scale)) !important;
    line-height: 1.4 !important;
  }
  
  /* Аккордеон «Сведения» — текст внутри раскрытого пункта */
  body.vi-mode .details-item__list p {
    font-size: calc(15px * var(--vi-scale)) !important;
    line-height: 1.5 !important;
  }
  
  /* Блок консультации — параграфы (было h4, стало p) */
  body.vi-mode .consultation__info p {
    font-size: calc(22px * var(--vi-scale)) !important;
    line-height: 1.4 !important;
  }
  
  /* Для страниц, где в консультации всё ещё используются h4 */
  body.vi-size-large .consultation__info h4,
  body.vi-size-xlarge .consultation__info h4 {
    font-size: calc(25px * var(--vi-scale)) !important;
    line-height: 1.35 !important;
  }
  
  /* Блок лицензии: абзацы и подписи преимуществ */
  body.vi-mode .license__info p {
    font-size: calc(25px * var(--vi-scale)) !important;
    line-height: 1.4 !important;
  }
  
  body.vi-mode .license-items__item span {
    font-size: calc(13px * var(--vi-scale)) !important;
    line-height: 1.45 !important;
  }
  
  /* Вступительный блок: принудительное масштабирование текста */
  body.vi-size-large .introduction__info p,
  body.vi-size-xlarge .introduction__info p {
    font-size: calc(19px * var(--vi-scale)) !important;
    line-height: 1.45 !important;
  }
  
  body.vi-size-large .introduction__person h4,
  body.vi-size-xlarge .introduction__person h4 {
    font-size: calc(28px * var(--vi-scale)) !important;
    line-height: 1.25 !important;
  }
  
  body.vi-size-large .introduction__person p,
  body.vi-size-xlarge .introduction__person p {
    font-size: calc(16px * var(--vi-scale)) !important;
    line-height: 1.4 !important;
  }
  
  /* Секция лицензии: увеличение изображения и вертикальная компоновка */
  body.vi-size-large .license {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
  }
  
  body.vi-size-large .license__info {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  body.vi-size-large .license__image {
    width: 600px !important;
    max-width: 100% !important;
  }
  
  body.vi-size-large .license__image img {
    width: 100% !important;
    height: auto !important;
  }
  
  body.vi-size-xlarge .license {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 24px !important;
  }
  
  body.vi-size-xlarge .license__info {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  body.vi-size-xlarge .license__image {
    width: 800px !important;
    max-width: 100vw !important;
  }
  
  body.vi-size-xlarge .license__image img {
    width: 100% !important;
    height: auto !important;
  }
  
  /* Мобильный макет лицензии: в базовом CSS картинка absolute + padding у h2 под фикс. высоту;
     при А+/А++ текст выше — картинка перекрывает абзацы. Убираем наложение: потоковая вёрстка. */
  @media (max-width: 767px) {
    body.vi-size-large .license,
    body.vi-size-xlarge .license {
      flex-wrap: nowrap !important;
      flex-direction: column !important;
      align-items: stretch !important;
      padding-right: 0 !important;
    }
  
    body.vi-size-large .license__info,
    body.vi-size-xlarge .license__info {
      width: 100% !important;
      max-width: none !important;
    }
  
    body.vi-size-large .license__info h2,
    body.vi-size-xlarge .license__info h2 {
      padding-bottom: 14px !important;
      pointer-events: auto !important;
      position: relative !important;
      max-width: none !important;
    }
  
    body.vi-size-large .license__image,
    body.vi-size-xlarge .license__image {
      position: static !important;
      top: auto !important;
      left: auto !important;
      transform: none !important;
      width: 100% !important;
      max-width: 100% !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
  
    body.vi-size-large .license__image img,
    body.vi-size-xlarge .license__image img {
      width: 100% !important;
      max-width: 100% !important;
      height: auto !important;
    }
  }
  
  @media (max-width: 575px) {
    body.vi-size-large .license__info h2,
    body.vi-size-xlarge .license__info h2 {
      padding-bottom: 14px !important;
    }
  
    body.vi-size-large .license__image,
    body.vi-size-xlarge .license__image {
      top: auto !important;
    }
  }
  
  /* Страница курса — левая колонка (краткая инфо) */
  body.vi-mode .course-short p {
    font-size: calc(14px * var(--vi-scale)) !important;
    line-height: 1.4 !important;
  }
  
  /* Страница курса — надпись «Курс:» перед h2 */
  body.vi-mode .course-desc h2::before {
    font-size: calc(14px * var(--vi-scale)) !important;
    line-height: 1.4 !important;
  }
  
  /* Страница курса — заголовок «Программа курса» */
  body.vi-mode .course-desc__program h3,
  body.vi-mode .course-desc h3 {
    font-size: calc(30px * var(--vi-scale)) !important;
    line-height: 1.3 !important;
  }
  
  /* Страница курса — описание и список программы */
  body.vi-mode .course-desc p,
  body.vi-mode .course-desc p span,
  body.vi-mode .course-desc ul li {
    font-size: calc(15px * var(--vi-scale)) !important;
    line-height: 1.5 !important;
  }
  
  /* Блок преимуществ — подписи под иконками */
  body.vi-mode .main-advantages__item > span {
    font-size: calc(13px * var(--vi-scale)) !important;
    line-height: 1.4 !important;
  }
  
  /* Стартовая index_page: скрываем иконки карточек, текст масштабируется */
  body.vi-mode .index_cards_container .index_card > div > img {
    display: none !important;
  }
  
  body.vi-mode .index_cards_container .index_card > p {
    font-size: calc(25px * var(--vi-scale)) !important;
    line-height: 1.25 !important;
  }
  
  /* В VI-режиме убираем смену фона карточек при наведении */
  body.vi-mode .index_cards_container > a:hover > .index_card {
    background-image: none !important;
    background-color: inherit !important;
  }
  
  /* Табы навигации (Программы / Онлайн-курсы) */
  body.vi-mode .ochnoe_obuchenie_tabs_tab {
    font-size: calc(18px * var(--vi-scale)) !important;
    height: auto !important;
    padding: 12px 20px !important;
  }
  
  /* Ссылка «Читать далее» / «Свернуть» в карточках преподавателей */
  body.vi-mode .clearboth a {
    font-size: calc(13px * var(--vi-scale)) !important;
  }
  
  /* Форма Bitrix24 — внешний скрипт инжектирует свои px-стили,
     переопределяем ключевые элементы через !important */
  body.vi-mode .b24-form-wrapper,
  body.vi-mode .b24-form-content {
    font-size: calc(14px * var(--vi-scale)) !important;
  }
  body.vi-mode .b24-form-header-title {
    font-size: calc(20px * var(--vi-scale)) !important;
    line-height: 1.3 !important;
  }
  body.vi-mode .b24-form-control-label,
  body.vi-mode .b24-form-control-select-label {
    font-size: calc(14px * var(--vi-scale)) !important;
  }
  body.vi-mode .b24-form-control {
    font-size: calc(14px * var(--vi-scale)) !important;
    height: auto !important;
    min-height: calc(40px * var(--vi-scale)) !important;
  }
  body.vi-mode .b24-form-btn {
    font-size: calc(14px * var(--vi-scale)) !important;
    height: auto !important;
    padding: calc(10px * var(--vi-scale)) calc(20px * var(--vi-scale)) !important;
  }
  body.vi-mode .b24-form-field-agreement-link,
  body.vi-mode .b24-form-control-desc {
    font-size: calc(12px * var(--vi-scale)) !important;
    line-height: 1.5 !important;
  }
  
  /* Pop-up Bitrix24 (окно согласия/документы) */
  body.vi-mode .b24-window-scrollable,
  body.vi-mode .b24-window-scrollable *,
  body.vi-mode .b24-window-popup,
  body.vi-mode .b24-window-popup * {
    font-size: calc(14px * var(--vi-scale)) !important;
    line-height: 1.5 !important;
  }
  
  /* При 150% и 200% отключаем фиксированные высоты, чтобы текст не обрезался */
  body.vi-size-large .ochnoe_obuchenie_hero,
  body.vi-size-xlarge .ochnoe_obuchenie_hero {
    height: auto !important;
    min-height: unset !important;
  }
  
  body.vi-size-large .stranitsa_kursa_hero,
  body.vi-size-xlarge .stranitsa_kursa_hero {
    height: auto !important;
  }
  
  body.vi-size-large .stranitsa_kursa_hero_cards_2,
  body.vi-size-xlarge .stranitsa_kursa_hero_cards_2 {
    flex-direction: column !important;
    gap: 20px !important;
  }
  
  body.vi-size-xlarge .courses__items {
    display: flex !important;
    flex-direction: column !important;
  }
  
  body.vi-size-xlarge .courses-item {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* При любом vi-режиме масштабируем паддинги карточки курса,
     чтобы она вырастала вниз пропорционально тексту */
  body.vi-mode .courses-item {
    padding-left:   calc(48px * var(--vi-scale)) !important;
    padding-right:  calc(48px * var(--vi-scale)) !important;
    padding-bottom: calc(38px * var(--vi-scale)) !important;
    overflow: visible !important;
  }
  
  body.vi-size-large .courses-item {
    padding-left: 32px !important;
    padding-right: 32px !important;
    padding-bottom: 28px !important;
    text-align: center !important;
  }
  
  /* Для A+ синхронизируем картинку с уменьшенным padding карточки */
  body.vi-mode.vi-size-large .courses-item__image {
    width: calc(100% + 64px) !important;
    min-width: calc(100% + 64px) !important;
    margin-left: -32px !important;
  }
  
  /* Изображение карточки — пересчитываем ширину под новые паддинги */
  body.vi-mode .courses-item__image {
    width:      calc(100% + 48px * 2 * var(--vi-scale)) !important;
    min-width:  calc(100% + 48px * 2 * var(--vi-scale)) !important;
    margin-left: calc(-48px * var(--vi-scale)) !important;
    height: calc(220px * var(--vi-scale)) !important;
    margin-bottom: calc(32px * var(--vi-scale)) !important;
  }
  
  /* Заголовок карточки */
  body.vi-mode h3.courses-item__title {
    margin-bottom: calc(26px * var(--vi-scale)) !important;
  }
  
  body.vi-size-xlarge .experts__items {
    flex-direction: column !important;
  }
  
  body.vi-size-xlarge .expert-item {
    width: 100% !important;
  }
  
  body.vi-size-xlarge .course-full {
    flex-direction: column !important;
  }
  
  body.vi-size-xlarge .course-short,
  body.vi-size-xlarge .course-desc {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  body.vi-size-large .header,
  body.vi-size-xlarge .header {
    flex-wrap: wrap !important;
    height: auto !important;
  }
  
  body.vi-size-xlarge .header_left ul {
    flex-wrap: wrap !important;
  }
  
  /* Кнопка "Блог" в шапке не должна масштабироваться */
  body.vi-mode .h_blog_btn_header {
    font-size: 1rem !important;
  }
  
  /* На максимальном увеличении отодвигаем кнопку тендеров ниже текста */
  body.vi-size-xlarge .ochnoe_obuchenie_hero_container {
    min-height: 560px !important;
    padding-bottom: 28px !important;
  }
  
  body.vi-size-xlarge .ochnoe_obuchenie_hero_container_link {
    display: inline-block !important;
    margin-top: 110px !important;
    width: 305px;
  }
  
  /* Консультация в xlarge: инфо занимает больше ширины, форма 580px, но не больше контейнера */
  body.vi-size-xlarge .consultation {
    align-items: flex-start !important;
  }
  
  body.vi-size-xlarge .consultation__info {
    width: auto !important;
    max-width: 100% !important;
    margin-right: 0 !important;
  }
  
  body.vi-size-xlarge .consultation__form {
    width: 580px !important;
    max-width: 100% !important;
    margin-top: 24px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  /* В A++ для HR-hero на десктопе: блоки идут вертикально */
  @media (min-width: 451px) {
    body.vi-size-xlarge .hr_hero_container {
      display: flex !important;
      flex-direction: column !important;
      gap: 28px !important;
      width: 100% !important;
      max-width: 1200px !important;
    }
  
    body.vi-size-xlarge .hr_hero_left {
      width: 100% !important;
      max-width: 100% !important;
    }
  
    body.vi-size-xlarge .hr_hero_left h2,
    body.vi-size-xlarge .hr_hero_left > ul {
      width: 100% !important;
      max-width: 100% !important;
    }
  
    body.vi-size-xlarge .hr-main__form {
      width: 100% !important;
      max-width: 100% !important;
      right: auto !important;
      margin: 0 !important;
    }
  
    body.vi-size-xlarge .hr-main__form .standart-form {
      width: 100% !important;
    }
  }
  
  @media (max-width: 450px) {
    body.vi-size-large .consultation__form,
    body.vi-size-xlarge .consultation__form {
      width: 100% !important;
      max-width: 100% !important;
      margin-top: 16px !important;
    }
  }
  
  /* Явное масштабирование элементов, которые часто остаются с базовым размером */
  body.vi-size-large .courses-item h5,
  body.vi-size-large .courses-item__title {
    font-size: calc(20px * var(--vi-scale)) !important;
    line-height: 1.25 !important;
  }
  
  body.vi-size-xlarge .courses-item h5,
  body.vi-size-xlarge .courses-item__title {
    font-size: calc(20px * var(--vi-scale)) !important;
    line-height: 1.25 !important;
  }
  
  body.vi-size-large .expert-item__info,
  body.vi-size-large .expert-item__info h4,
  body.vi-size-large .expert-item__info p {
    font-size: calc(15px * var(--vi-scale)) !important;
    line-height: 1.5 !important;
  }
  
  body.vi-size-xlarge .expert-item__info,
  body.vi-size-xlarge .expert-item__info h4,
  body.vi-size-xlarge .expert-item__info p {
    font-size: calc(15px * var(--vi-scale)) !important;
    line-height: 1.5 !important;
  }
  
  body.vi-size-large .details-item__main h6,
  body.vi-size-large .details-item__main .details-item__title {
    font-size: calc(17px * var(--vi-scale)) !important;
    line-height: 1.35 !important;
  }
  
  body.vi-size-xlarge .details-item__main h6,
  body.vi-size-xlarge .details-item__main .details-item__title {
    font-size: calc(17px * var(--vi-scale)) !important;
    line-height: 1.35 !important;
  }
  
  /* В A++ не допускаем обрезания крупного текста в индивидуальном блоке */
  body.vi-size-xlarge .individualnaya_programma {
    height: auto !important;
    min-height: 259px !important;
    padding-top: 28px !important;
    padding-bottom: 28px !important;
    align-items: flex-start !important;
  }
  
  body.vi-size-xlarge .individualnaya_programma > div {
    align-items: flex-start !important;
  }
  
  body.vi-size-xlarge .individualnaya_programma > div > p {
    width: auto !important;
    max-width: 100% !important;
    line-height: 1.25 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  
  @media (max-width: 450px) {
    body.vi-size-large .individualnaya_programma,
    body.vi-size-xlarge .individualnaya_programma {
      padding-left: 12px !important;
      padding-right: 12px !important;
    }
  
    body.vi-size-large .individualnaya_programma > div > p,
    body.vi-size-xlarge .individualnaya_programma > div > p {
      font-size: calc(24px * var(--vi-scale)) !important;
      line-height: 1.2 !important;
    }
  
    /* Мобильные уточнения для проблемных блоков */
    body.vi-size-large .courses-item h5,
    body.vi-size-large .courses-item__title {
      font-size: calc(16px * var(--vi-scale)) !important;
    }
  
    body.vi-size-xlarge .courses-item h5,
    body.vi-size-xlarge .courses-item__title {
      font-size: calc(16px * var(--vi-scale)) !important;
    }
  
    body.vi-size-large .expert-item__info,
    body.vi-size-large .expert-item__info h4,
    body.vi-size-large .expert-item__info p,
    body.vi-size-xlarge .expert-item__info,
    body.vi-size-xlarge .expert-item__info h4,
    body.vi-size-xlarge .expert-item__info p {
      font-size: calc(13px * var(--vi-scale)) !important;
      line-height: 1.45 !important;
    }
  
    body.vi-size-large .details-item__main h6,
    body.vi-size-large .details-item__main .details-item__title,
    body.vi-size-xlarge .details-item__main h6,
    body.vi-size-xlarge .details-item__main .details-item__title {
      font-size: calc(14px * var(--vi-scale)) !important;
      line-height: 1.35 !important;
    }
  }
  
  /* Для page_course в A+ выравниваем карточки hero, чтобы текст не уезжал вправо */
  body.vi-size-large .stranitsa_kursa_hero_cards,
  body.vi-size-large .stranitsa_kursa_hero_cards_1,
  body.vi-size-large .stranitsa_kursa_hero_cards_2 {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  body.vi-size-large .stranitsa_kursa_hero_cards {
    display: none !important;
    height: auto !important;
    min-height: 159px !important;
    margin-top: 40px !important;
  }
  
  /* В A++ для page_course hero не должен схлопываться */
  body.vi-size-xlarge .ochnoe_obuchenie_hero.page_course {
    height: auto !important;
    min-height: 420px !important;
  }
  
  body.vi-size-xlarge .stranitsa_kursa_hero_cards,
  body.vi-size-xlarge .stranitsa_kursa_hero_cards_1,
  body.vi-size-xlarge .stranitsa_kursa_hero_cards_2 {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 20px !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    min-height: 180px !important;
  }
  
  body.vi-size-xlarge .stranitsa_kursa_hero_cards_1 {
    display: none !important;
  }
  
  body.vi-size-xlarge .stranitsa_kursa_hero_card {
    width: calc(50% - 12px) !important;
    max-width: 100% !important;
  }
  
  body.vi-size-xlarge .stranitsa_kursa_hero_card p {
    font-size: calc(12px * var(--vi-scale)) !important;
    line-height: 1.35 !important;
  }
  
  /* В A+ карточки курсов и кликабельная подложка не должны наезжать */
  body.vi-size-large .courses-item {
    overflow: hidden !important;
    position: relative !important;
    isolation: isolate;
  }
  
  body.vi-size-large .courses-item > a {
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 3 !important;
  }
  
  
  /* ----------------------------------------------------------
     4. ЦВЕТОВЫЕ СХЕМЫ
     ---------------------------------------------------------- */
  
  /* 4.1 Чёрным по белому (стандарт) — контраст 21:1 */
  body.vi-scheme-default {
    background-color: #ffffff !important;
    color: #000000 !important;
  }
  body.vi-scheme-default * {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #cccccc !important;
    margin-bottom: 5px;
  }
  /* Overlay-ссылки (закрывают карточки целиком) должны быть прозрачными */
  body.vi-scheme-default a {
    background-color: transparent !important;
    color: #0055BB !important;
  }
  body.vi-scheme-default a:visited {
    color: #0055BB !important;
  }
  
  body.vi-scheme-default #section-companies .companies {
    background-color: gray !important;
  }
  
  body.vi-scheme-default #section-companies .companies__item,
  body.vi-scheme-default #section-companies .companies__item img {
    background-color: gray !important;
  }
  
  
  
  /* 4.2 Белым по чёрному (инверсия) — контраст 21:1 */
  body.vi-scheme-inverted {
    background-color: #000000 !important;
    color: #ffffff !important;
  }
  body.vi-scheme-inverted * {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-color: #555555 !important;
  }
  body.vi-scheme-inverted a {
    background-color: transparent !important;
    color: #ffff00 !important;
  }
  body.vi-scheme-inverted a:visited {
    color: #ffa500 !important;
  }
  body.vi-scheme-inverted img {
    filter: brightness(0.85) !important;
  }
  
  
  /* 4.3 Тёмно-синим по голубому (ГОСТ-вариант) — контраст ≥ 4.5:1 */
  body.vi-scheme-dark-blue {
    background-color: #9dd1ff !important;
    color: #003087 !important;
  }
  body.vi-scheme-dark-blue * {
    background-color: #9dd1ff !important;
    color: #003087 !important;
    border-color: #6aaddd !important;
  }
  body.vi-scheme-dark-blue a {
    background-color: transparent !important;
    color: #003366 !important;
    text-decoration: underline !important;
  }
  body.vi-scheme-dark-blue a:visited {
    color: #002b7a !important;
  }
  
  
  /* Панель управления не перекрашивается цветовой схемой */
  body.vi-mode .vi-toolbar {
    background-color: #1a1a2e !important;
    color: #ffffff !important;
    border-bottom-color: #4a90e2 !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
  }
  body.vi-mode .vi-toolbar * {
    background-color: transparent !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
    font-size: inherit !important;
    line-height: inherit !important;
  }
  body.vi-mode .vi-toolbar .vi-label {
    background-color: transparent !important;
    color: rgba(255,255,255,0.75) !important;
  }
  body.vi-mode .vi-toolbar button {
    background-color: transparent !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
  }
  body.vi-mode .vi-toolbar button[aria-pressed="true"] {
    background-color: #ffffff !important;
    color: #1a1a2e !important;
  }
  body.vi-mode .vi-toolbar .vi-btn-color[data-scheme="default"] {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #ffffff !important;
  }
  body.vi-mode .vi-toolbar .vi-btn-color[data-scheme="inverted"] {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
  }
  body.vi-mode .vi-toolbar .vi-btn-color[data-scheme="dark-blue"] {
    background-color: #9dd1ff !important;
    color: #003087 !important;
    border-color: #6aaddd !important;
  }
  /* На светлой схеме кнопка "вверх" должна оставаться видимой */
  body.vi-scheme-default .arr_up {
    background-color: #8e929c !important;
    border-radius: 50% !important;
    box-shadow: 0 0 0 2px #ffffff inset, 0 0 0 1px #8e929c !important;
  }
  body.vi-mode .vi-toolbar .vi-btn-size[data-size="normal"] { font-size: 14px !important; }
  body.vi-mode .vi-toolbar .vi-btn-size[data-size="large"]  { font-size: 22px !important; }
  body.vi-mode .vi-toolbar .vi-btn-size[data-size="xlarge"] { font-size: 29px !important; }
  body.vi-mode .vi-btn-reset {
    background-color: #c0392b !important;
    color: #ffffff !important;
    border-color: #c0392b !important;
  }
  
  
  /* ----------------------------------------------------------
     5. ФОНОВЫЕ ГРАДИЕНТЫ
     Основной CSS использует background: linear-gradient() на ряде секций.
     background-color из цветовой схемы рисуется ЗА background-image,
     поэтому градиент остаётся видимым. Убираем background-image
     для всех блоков-«контейнеров» при включённом vi-mode.
     ---------------------------------------------------------- */
  
  body.vi-mode .ochnoe_obuchenie_hero,
  body.vi-mode .index_page,
  body.vi-mode .individualnaya_programma,
  body.vi-mode .section-companies,
  body.vi-mode .section-consultation,
  body.vi-mode .closest_seminar,
  body.vi-mode .stranitsa_kursa_hero,
  body.vi-mode .section-history {
    background-image: none !important;
  }
  
  /* Фоновое SVG поверх героблока — тоже скрываем */
  body.vi-mode .ochnoe_obuchenie_hero img {
    display: none !important;
  }
  
  body.vi-mode .fancybox-stage img,
  body.vi-mode .fancybox-content img,
  body.vi-mode .fancybox-image,
  body.vi-mode .fancybox-spaceball {
    display: block !important;
    max-width: none !important;
    background: transparent !important;
  }
  
  
  /* ----------------------------------------------------------
     6. ИЗОБРАЖЕНИЯ
     ---------------------------------------------------------- */
  
  body.vi-img-grayscale img {
    filter: grayscale(100%) !important;
    -webkit-filter: grayscale(100%) !important;
  }
  
  body.vi-img-hide img {
    display: none !important;
  }
  
  body.vi-img-hide .fancybox-stage img,
  body.vi-img-hide .fancybox-content img,
  body.vi-img-hide .fancybox-image,
  body.vi-img-hide .fancybox-spaceball {
    display: block !important;
  }
  
  /* Иконки-SVG (background-image) в режиме hide убираем */
  body.vi-img-hide [style*="background-image"] {
    background-image: none !important;
  }
  
  
  /* ----------------------------------------------------------
     7. МЕЖБУКВЕННЫЙ ИНТЕРВАЛ (КЕРНИНГ)
     ---------------------------------------------------------- */
  
  body.vi-kern-normal * {
    letter-spacing: normal !important;
    margin-top: 0px;
  }
  
  body.vi-kern-wide * {
    letter-spacing: 0.12em !important;
  }
  
  /* При увеличенном интервале кнопка в hero уходит под текст — добавляем отступ */
  body.vi-kern-wide .ochnoe_obuchenie_hero_container_link {
    display: inline-block !important;
    margin-top: 20px !important;
    width: 300px;
  }
  
  body.vi-kern-wide.vi-size-large .ochnoe_obuchenie_hero_container_link {
    margin-top: 150px !important;
  }
  
  body.vi-kern-wide.vi-size-xlarge .ochnoe_obuchenie_hero_container_link {
    margin-top: 270px !important;
    width: 380px;
  }
  
  @media (max-width: 450px) {
    body.vi-kern-wide.vi-size-normal .ochnoe_obuchenie_hero_container_link {
      margin-top: 68px !important;
      width: 205px !important;
    }
  
    body.vi-kern-wide.vi-size-large .ochnoe_obuchenie_hero_container_link {
      margin-top: 150px !important;
      width: 265px !important;
    }
  
    body.vi-kern-wide.vi-size-xlarge .ochnoe_obuchenie_hero_container_link {
      margin-top: 270px !important;
      width: 285px !important;
    }
  }
  
  /* Исключения для кернинга: служебные зоны должны оставаться стабильными */
  body.vi-kern-wide #vi-toolbar,
  body.vi-kern-wide #vi-toolbar *,
  body.vi-kern-wide .block_header,
  body.vi-kern-wide .block_header *,
  body.vi-kern-wide .block_header header,
  body.vi-kern-wide .block_header header *,
  body.vi-kern-wide .block_section_out,
  body.vi-kern-wide .block_section_out * {
    letter-spacing: normal !important;
  }
  
  
  /* ----------------------------------------------------------
     7. КЛАВИАТУРНАЯ НАВИГАЦИЯ И ФОКУС
     ---------------------------------------------------------- */
  
  /* Глобальный сброс outline — не скрываем фокус */
  body.vi-mode :focus {
    outline: 3px solid #ffff00 !important;
    outline-offset: 3px !important;
  }
  
  body.vi-mode a:focus,
  body.vi-mode button:focus,
  body.vi-mode [tabindex]:focus,
  body.vi-mode input:focus,
  body.vi-mode select:focus,
  body.vi-mode textarea:focus {
    outline: 3px solid #ffff00 !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 4px rgba(255, 255, 0, 0.4) !important;
  }
  
  /* В тёмной схеме меняем цвет фокуса на заметный */
  body.vi-scheme-inverted :focus,
  body.vi-scheme-inverted a:focus,
  body.vi-scheme-inverted button:focus {
    outline-color: #00ffff !important;
    box-shadow: 0 0 0 4px rgba(0, 255, 255, 0.35) !important;
  }
  
  
  /* ----------------------------------------------------------
     8. КНОПКА-ПЕРЕКЛЮЧАТЕЛЬ — только переключение текста при vi-mode
     Базовые стили кнопки (позиция, размер, transform) заданы
     в template.training_2.css и сюда не дублируются.
     ---------------------------------------------------------- */
  
  /* В режиме vi-mode показываем «Обычная версия» и скрываем «Версия для слабовидящих» */
  body.vi-mode .vi-text-1 {
    display: none !important;
  }
  
  body.vi-mode .vi-text-2 {
    display: block !important;
  }
  
  /* Иконка в активном режиме становится синей */
  body.vi-mode .vi-icon-wrapper {
    background-color: #0142a3 !important;
  }
  
  /* Защита кнопки от перекраски цветовыми схемами */
  body.vi-mode .vi-sticky-btn {
    background-color: #222 !important;
    color: #fff !important;
  }
  body.vi-mode .vi-sticky-btn * {
    background-color: transparent !important;
    color: #fff !important;
  }
  body.vi-mode .vi-sticky-btn .vi-icon-wrapper {
    background-color: #0142a3 !important;
  }
  
  /* Фокус кнопки в режиме vi */
  body.vi-mode .vi-sticky-btn:focus {
    outline: 3px solid #ffff00 !important;
    outline-offset: 2px !important;
  }
  
  /* В режиме слабовидящих скрываем фиксированную шапку в активном состоянии */
  body.vi-mode .header-true.active {
    display: none !important;
  }
  
  
  /* ----------------------------------------------------------
     9. ДОПОЛНИТЕЛЬНАЯ ТИПОГРАФИКА В РЕЖИМЕ VI
     ---------------------------------------------------------- */
  
  body.vi-mode h1,
  body.vi-mode h2,
  body.vi-mode h3,
  body.vi-mode h4,
  body.vi-mode h5,
  body.vi-mode h6 {
    line-height: 1.3 !important;
    margin-bottom: 0.5em !important;
  }
  
  body.vi-mode p,
  body.vi-mode li,
  body.vi-mode span,
  body.vi-mode td,
  body.vi-mode th {
    line-height: 1.7 !important;
  }
  
  /* Ссылки всегда подчёркнуты для различимости */
  body.vi-mode a {
    text-decoration: underline !important;
  }
  
  /* Кнопки и интерактивные элементы — чёткий видимый контур */
  body.vi-mode .btn,
  body.vi-mode button:not(.vi-toolbar button) {
    border: 2px solid currentColor !important;
    border-radius: 4px !important;
  }
  
  body.vi-mode #section-history .controls,
  body.vi-mode #section-history .controls * {
    background-color: transparent !important;
    background-image: none !important;
  }
  
  /* Адаптация горизонтальных блоков при крупном шрифте */
  body.vi-size-large .header_left,
  body.vi-size-xlarge .header_left {
    flex-wrap: wrap !important;
    height: auto !important;
    padding: 10px 0 !important;
  }
  
  body.vi-size-xlarge .socials_icons {
    flex-wrap: wrap !important;
  }
  
  body.vi-size-xlarge .details__items {
    flex-direction: column !important;
  }
  
  body.vi-size-xlarge .princasts_cards {
    flex-direction: column !important;
  }
  
  body.vi-size-xlarge .consultation {
    flex-direction: column !important;
  }
  
  /* Фотогалерея: при скрытых изображениях прячем весь слайдер */
  body.vi-img-hide .section-history {
    display: none !important;
  }
  
  /* Видео-превью при скрытых изображениях */
  body.vi-img-hide .online_course_page_video_item,
  body.vi-img-hide .princasts_card_video {
    display: none !important;
  }
  
  /* В hide-режиме скрываем секцию компаний целиком */
  body.vi-img-hide #section-companies {
    display: none !important;
  }
  
  /* Иконки соцсетей должны оставаться видимыми, т.к. это ссылки */
  body.vi-img-hide .socials_icons img,
  body.vi-img-hide .socials a img,
  body.vi-img-hide .socials_container a img {
    display: inline-block !important;
  }
  
  /* В режиме hide карточки преподавателей перестраиваем без пустой зоны под фото */
  body.vi-img-hide .expert-item {
    display: block !important;
  }
  
  body.vi-img-hide .expert-item__image {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  body.vi-img-hide .expert-item__info {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
  }
  
  /* Модальные формы должны быть поверх панели и иметь явную кнопку закрытия */
  .popup.modal-b24,
  .popup.modal-b24._active {
    z-index: 120000 !important;
  }
  
  .popup.modal-b24 .popup__content {
    position: relative;
    z-index: 120001 !important;
  }
  
  .popup.modal-b24 .pattern-form {
    position: relative;
  }
  
  .popup.modal-b24 .pattern-form-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border: 1px solid #9aa5b1;
    border-radius: 50%;
    background: #fff;
    color: #1f2937;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    z-index: 5;
  }
  
  .popup.modal-b24 .pattern-form-close:hover {
    background: #f3f4f6;
  }
  
  
  /* ----------------------------------------------------------
     10. СОВМЕСТИМОСТЬ С ПЕРЕИМЕНОВАННЫМИ ТЕГАМИ ЗАГОЛОВКОВ
     Бывшие h5 (карточки курсов) → h3.courses-item__title
     Бывший h6 (детали) → h3.details-item__title
     Бывший h4 (имя эксперта) → h3.expert-item__name
     Визуальный размер сохраняем через класс, чтобы не ломать дизайн.
     ---------------------------------------------------------- */
  
  body.vi-mode h3.courses-item__title {
    font-size: inherit;
    font-weight: 600;
    margin: 0.5em 0;
  }
  
  body.vi-mode h3.details-item__title {
    font-size: inherit;
    font-weight: 600;
    margin: 0;
  }
  
  body.vi-mode h3.expert-item__name {
    font-size: inherit;
    font-weight: 700;
    margin-bottom: 0.3em;
  }