/* ========================================
   Стили сервисных страниц (Обучение / Удаление вмятин)
   Подключается глобально для HtmlContent из БД
   ======================================== */

/* Страховка от горизонтальной прокрутки на мобильных (defect 05).
   Это подстраховка, а не замена сворачиванию меню в бургер. */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* ==== Мобильное бургер-меню (< 900px), defect 05 ==== */
.mobileNavBurger { display: none; }
/* Чекбокс-переключатель прячется через CSS, а не атрибутом hidden:
   hidden убирает элемент из дерева доступности, и меню переставало открываться с клавиатуры. */
.mobileNavCheckbox { display: none; }
/* Список главного меню внутри панели нужен только на мобильной ширине:
   на десктопе те же ссылки уже есть в горизонтальном меню шапки. */
.mobileNavLinksWrap { display: none; }

@media (max-width: 900px) {
    /* Кнопка-бургер: только иконка, без подписи.
       Название для скринридеров осталось в aria-label самого label.
       .mobileNavBurger — flex-СТРОКА, поэтому три полоски лежат в отдельном
       контейнере-колонке: напрямую они выстраивались бы в ряд. */
    .mobileNavBurger {
        display: flex;
        align-items: center;
        padding: 12px 16px;
        cursor: pointer;
        user-select: none;
        min-height: 44px;
        box-sizing: border-box;
    }
    .mobileNavBurgerIcon {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        flex: 0 0 24px;
        width: 24px;
    }
    .mobileNavBurgerIcon span {
        display: block;
        width: 100%;
        height: 2px;
        border-radius: 1px;
        background: currentColor;
    }

    /* Чекбокс уводится с глаз, но остаётся в фокусе для клавиатуры. */
    .mobileNavCheckbox {
        display: block;
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        border: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .mobileNavCheckbox:focus-visible ~ #headerLine2 .mobileNavBurger {
        outline: 2px solid currentColor;
        outline-offset: 2px;
    }
    /* Повёрнутая в крестик иконка, когда меню раскрыто. */
    .mobileNavCheckbox:checked ~ #headerLine2 .mobileNavBurgerIcon span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    .mobileNavCheckbox:checked ~ #headerLine2 .mobileNavBurgerIcon span:nth-child(2) {
        opacity: 0;
    }
    .mobileNavCheckbox:checked ~ #headerLine2 .mobileNavBurgerIcon span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
    .mobileNavBurgerIcon span {
        transition: transform .2s ease, opacity .2s ease;
    }

    /* Горизонтальное текстовое меню сворачиваем.
       Селектор с #headerLine2 обязателен: в легаси-стилях шаблона есть правило
       «#headerLine2 .headerLineColumn { display: table-cell }» со специфичностью
       (1,1,0). Медиазапрос специфичность не повышает, поэтому вариант из двух
       классов (0,2,0) проигрывал, меню оставалось видимым на 1130px и его пункты
       обрезались через overflow-x. Здесь (1,2,0) — правило выигрывает. */
    .headerLineColumn.headerLineMenu,
    #headerLine2 .headerLineColumn.headerLineMenu { display: none; }

    /* Мега-каталог по умолчанию скрыт, раскрывается по бургеру */
    #mainMenuStaticContainer { display: none; }
    .mobileNavCheckbox:checked ~ .menuContainerColor #mainMenuStaticContainer { display: block; }

    /* Каталог-меню в мобильном виде — вертикальный список во всю ширину */
    #mainMenuContainer .limiter { width: 100%; padding: 0; }

    /* Шапка: бургер слева, «Вход | Регистрация» справа — одной строкой.
       Оба элемента лежат в последней колонке: две предыдущие на мобильной
       ширине скрыты (topmenuHeaderLine — жёстко в app.css, меню — правилом ниже). */
    #headerLine2 .headerLineContainer {
        display: flex;
        align-items: center;
    }
    #headerLine2 .headerLineContainer > .headerLineColumn:last-child {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        flex: 1 1 100%;
        width: 100%;
        text-align: left;
    }
    #headerLine2 .headerLineContainer > .headerLineColumn:last-child > .mobileNavBurger {
        order: -1;
        flex: 0 0 auto;
        margin-left: -12px;
    }
    #headerLine2 .headerLineContainer > .headerLineColumn:last-child > #topAuth {
        flex: 0 0 auto;
    }
    .mobileNavBurger { padding: 8px 12px; }

    /* Ссылки главного меню внутри раскрытой панели. */
    .mobileNavLinksWrap {
        display: block;
        border-bottom: 1px solid rgba(255, 255, 255, .25);
    }
    .mobileNavLinks {
        list-style: none;
        margin: 0;
        padding: 4px 0;
    }
    .mobileNavLinks li { margin: 0; }
    .mobileNavLinks a {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 10px 16px;
        font-size: 16px;
        text-decoration: none;
        color: inherit;
    }
    .mobileNavLinks a.selected { font-weight: 700; }

    /* ==== Площадь нажатия ====
       По замеру на странице раздела при 375px было 82 элемента мельче 24px:
       «Вход» 28×15, «Регистрация» 76×15, телефон 119×17, крошки 116×17.
       Ширина везде нормальная, проблема только в высоте.

       Ключевой приём — inline-flex, а не просто padding: у элемента с display:inline
       свойство min-height игнорируется, поэтому одними отступами высоту не поднять. */
    #subMenu li a,
    #mainMenu li a,
    .toolsContainer a { min-height: 44px; display: flex; align-items: center; }

    #topAuth a,
    #topAuth button.as-link,
    #topCallBack a,
    .productColText a.name,
    .footerMenu a,
    .heading a[href^="tel:"],
    a.telephone {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0 4px;
    }

    /* Хлебные крошки на мобильных: однострочная горизонтальная лента без разрывов
       и съезжающих точек, с незаметной полосой прокрутки и увеличенной touch-зоной для тапа. */
    #breadcrumbs {
        position: relative;
        width: 100%;
        box-sizing: border-box;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        height: auto;
        min-height: 24px;
        line-height: 24px;
        margin-top: 14px;
        margin-bottom: 10px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    #breadcrumbs::-webkit-scrollbar {
        display: none;
    }
    #breadcrumbs ul {
        display: inline-flex;
        align-items: center;
        white-space: nowrap;
        flex-wrap: nowrap;
        list-style: none;
        padding: 0;
        margin: 0;
    }
    #breadcrumbs ul li {
        display: inline-flex;
        align-items: center;
        white-space: nowrap;
        flex-shrink: 0;
        font-size: 12px;
        line-height: 24px;
        color: #999;
    }
    #breadcrumbs ul li a {
        display: inline-flex;
        align-items: center;
        color: #000;
        text-decoration: none;
        line-height: 24px;
        position: relative;
    }
    #breadcrumbs ul li a:hover {
        color: #888;
    }
    #breadcrumbs ul li a::before {
        content: '';
        position: absolute;
        top: -10px;
        bottom: -10px;
        left: -6px;
        right: -6px;
    }
    #breadcrumbs .arrow {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-family: Arial, sans-serif;
        font-size: 14px;
        line-height: 1;
        margin: 0 8px;
        color: #888;
        vertical-align: middle;
    }

    /* Соседние кликабельные элементы разводим, чтобы не попадать в соседа. */
    #topAuth li + li { margin-left: 8px; }

    /* Ссылка-картинка в карточке и так высокая — её трогать не нужно,
       иначе сломается фиксированная высота контейнера, которая сейчас резервирует место под фото. */
}



/* Основные стили страницы */
.av-wrapper {
    color: #333;
    line-height: 1.7;
    margin: 0 auto;
    padding: 20px;
}

/* Заголовок и расширенное введение */
.av-header {
    text-align: center;
    margin-bottom: 50px;
    padding: 50px 30px;
    background: linear-gradient(to bottom, #f9fbfd, #ffffff);
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.02);
}
.av-header h1 {
    color: #0061b2;
    margin-bottom: 25px;
    line-height: 1.2;
    text-align:center;
}
.av-header .av-lead {
    color: #0061b2;
    font-weight: 600;
    max-width: 1000px;
    margin: 0 auto 25px auto;
}
.av-header p {
    color: #555;
    max-width: 1000px;
    margin: 0 auto 20px auto;
    text-align: justify;
    text-align-last: center;
}

/* Блок преимуществ с иконками */
.av-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
}
.av-feature-card {
    background: #fff;
    border-radius: 12px;
    padding: 35px 25px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-bottom: 4px solid #eef2f6;
}
.av-feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,97,178,0.1);
    border-bottom: 4px solid #0061b2;
}
.av-icon {
    margin-bottom: 25px;
}
.av-feature-card h3 {
    color: #222;
    margin-bottom: 15px;
}
.av-feature-card p {
    color: #666;
}

/* Текстовые секции */
.av-text-section {
    margin-bottom: 50px;
    padding: 40px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.04);
}
.av-text-section.highlight-bg {
    background: #f0f7ff;
    border-left: 5px solid #0061b2;
}
.av-text-section h2 {
    color: #0061b2;
    margin-top: 0;
    margin-bottom: 25px;
}
.av-text-section h3 {
    color: #333;
    margin-top: 30px;
    margin-bottom: 15px;
}
.av-text-section p {
    margin-bottom: 15px;
}

/* Списки */
.av-list {
    list-style: none;
    padding: 0;
}
.av-list li {
    position: relative;
    padding-left: 35px;
    margin-bottom: 15px;
}
.av-list li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    color: #0061b2;
    font-weight: bold;
}

/* Блок сравнения */
.av-comparison {
    display: flex;
    gap: 20px;
    margin-top: 30px;
}
.av-comp-col {
    flex: 1;
    padding: 25px;
    border-radius: 8px;
}
.av-comp-bad {
    background: #fff5f5;
    border-top: 4px solid #dc3545;
}
.av-comp-good {
    background: #f0fdf4;
    border-top: 4px solid #28a745;
}

/* Таблицы цен */
.av-tables-section {
    margin-bottom: 60px;
}
.av-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 40px;
    background: #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border-radius: 8px;
    overflow: hidden;
}
.av-table th, .av-table td {
    padding: 18px 20px;
    text-align: left;
    border-bottom: 1px solid #eee;
}
.av-table th {
    background: #0061b2;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.av-table tr:last-child td { border-bottom: none; }
.av-table tr:hover td { background: #f9fbfd; }
.av-price {
    font-weight: bold;
    color: #0061b2;
    white-space: nowrap;
}

/* Онлайн оценка */
.av-online-calc {
    background: #fff;
    border: 2px dashed #0061b2;
    padding: 30px;
    border-radius: 12px;
    margin-bottom: 50px;
    text-align: center;
}

/* Гарантия */
.av-guarantee {
    text-align: center;
    background: #0061b2;
    color: #fff;
    padding: 25px;
    border-radius: 8px;
    font-weight: bold;
    margin: 50px 0;
    box-shadow: 0 10px 20px rgba(0,97,178,0.2);
}

/* Адаптивность */
@media (max-width: 900px) {
    .av-comparison { flex-direction: column; }
}
@media (max-width: 768px) {
    .av-table th, .av-table td { padding: 12px; }
    .av-text-section { padding: 25px; }
    .av-header { padding: 30px 15px; }
}

/* ========================================
   Стили страницы оценки ущерба (/req)
   ======================================== */

.av-photo-guide {
    background: #ffffff;
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.05);
    margin: 0 auto 40px auto;
    color: #333;
    line-height: 1.6;
}
.av-photo-guide h2 {
    color: #0061b2;
    margin-top: 0;
    margin-bottom: 15px;
}
.av-photo-guide > p {
    margin-bottom: 30px;
    color: #555;
}
.av-tips-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    margin-bottom: 30px;
}
.av-tip-card {
    display: flex;
    align-items: flex-start;
    background: #fdfdfd;
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid #0061b2;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    transition: transform 0.2s ease;
}
.av-tip-card:hover {
    transform: translateX(5px);
    background: #fff;
}
.av-tip-icon {
    flex-shrink: 0;
    margin-right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #f0f7ff;
    border-radius: 50%;
}
.av-tip-content strong {
    display: block;
    color: #222;
    margin-bottom: 5px;
}
.av-tip-content p {
    margin: 0;
    color: #666;
}
.av-photo-disclaimer {
    background: #f0f7ff;
    padding: 20px;
    border-radius: 8px;
    color: #444;
    border: 1px solid #cce0ff;
}
.av-photo-disclaimer strong {
    color: #0061b2;
}
@media (min-width: 768px) {
    .av-tips-grid {
        grid-template-columns: 1fr 1fr;
    }
    .av-tip-card:last-child {
        grid-column: span 2;
    }
}
@media (max-width: 600px) {
    .av-photo-guide {
        padding: 25px 15px;
    }
}

/* ========================================
   Стили страницы обучения удалению вмятин
   ======================================== */

/* Заголовок страницы */
.av-header {
    text-align: center;
    background: linear-gradient(135deg, #f0f7ff 0%, #ffffff 100%);
    padding: 60px 20px;
    border-radius: 12px;
    margin-bottom: 50px;
    box-shadow: 0 4px 20px rgba(0,97,178,0.05);
}
.av-header h1 {
    color: #0061b2;
    font-size: 2.8em;
    margin-bottom: 20px;
    line-height: 1.2;
}
.av-header p {
    font-size: 1.2em;
    color: #555;
    max-width: 900px;
    margin: 0 auto;
}

/* Секционные заголовки */
.av-section-title {
    text-align: center;
    color: #0061b2;
    font-size: 2.2em;
    margin: 60px 0 30px 0;
    position: relative;
}

/* Блоки: Теория / Практика */
.av-course-blocks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin: 0 auto 50px auto;
    max-width: 1050px;
}
.av-course-block-card {
    background: #fff;
    padding: 40px 30px;
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.05);
    border-top: 5px solid #0061b2;
    flex: 1 1 400px;
    max-width: 500px;
    box-sizing: border-box;
}
.av-course-block-card.full-width {
    flex: 1 1 100%;
    max-width: 100%;
    border-top-color: #28a745;
    background: #f4fdf6;
}
.av-course-block-card h3 {
    margin-top: 0;
    font-size: 1.5em;
    color: #222;
    margin-bottom: 20px;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    text-align: center;
}

/* Карточки курсов (Тарифы) */
.av-upgrade-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
}
.av-upgrade-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}
.av-upgrade-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.av-upgrade-header {
    color: #fff;
    padding: 25px 20px;
    text-align: center;
    font-size: 1.5em;
    font-weight: bold;
    text-transform: uppercase;
}
.bg-green { background-color: #25b309; }
.bg-yellow { background-color: #fed407; color: #222; }
.bg-red { background-color: #fc3300; }
.bg-blue { background-color: #206bdc; }
.bg-orange { background-color: #ff9900; }
.bg-cyan { background-color: #09e8e8; color: #222; }

.av-upgrade-body {
    padding: 30px 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.av-pricing-subtitle {
    font-size: 1.05em;
    font-weight: 600;
    color: #333;
    text-align: center;
    margin-bottom: 10px;
    min-height: 48px;
}
.av-pricing-note {
    font-size: 0.85em;
    color: #777;
    text-align: center;
    margin-bottom: 25px;
    font-style: italic;
}
.av-upgrade-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    flex-grow: 1;
}
.av-upgrade-list li {
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    position: relative;
    padding-left: 25px;
    font-size: 0.95em;
}
.av-upgrade-list li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: #28a745;
    font-weight: bold;
}
.av-upgrade-price {
    font-size: 1.8em;
    color: #222;
    text-align: center;
    font-weight: bold;
    margin-top: 15px;
    padding-top: 20px;
    border-top: 2px dashed #eee;
}

/* Таблица сравнения */
.av-table-container {
    overflow-x: auto;
    margin-bottom: 60px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    border-radius: 10px;
}
.av-table th {
    color: #fff;
    padding: 20px;
    font-size: 1.1em;
    text-align: center;
    border-right: 1px solid rgba(255,255,255,0.1);
}
.av-table th.col-title { background: #0061b2; text-align: left; }
.av-table th.col-green { background: #25b309; }
.av-table th.col-yellow { background: #fed407; color: #222; }
.av-table th.col-red { background: #fc3300; }

.av-table td {
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    border-right: 1px solid #eee;
    text-align: center;
    vertical-align: middle;
}
.av-table td:first-child {
    text-align: left;
    font-weight: 500;
    color: #444;
}
.av-check-green { color: #25b309; font-weight: bold; font-size: 1.4em; }
.av-check-yellow { color: #d4b000; font-weight: bold; font-size: 1.4em; }
.av-check-red { color: #fc3300; font-weight: bold; font-size: 1.4em; }
.av-dash { color: #ccc; font-weight: bold; }

/* Преимущества (Иконки) */
.av-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 25px;
    margin-bottom: 60px;
}
.av-feature {
    background: #fff;
    padding: 30px;
    border-radius: 10px;
    border-left: 4px solid #0061b2;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}
.av-feature h3 {
    color: #0061b2;
    margin-top: 0;
    font-size: 1.2em;
}
.av-feature p {
    color: #555;
    margin: 0;
    font-size: 0.95em;
}

/* Команда */
.av-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
}
.av-team-member {
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.av-team-member img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 20px;
    border: 4px solid #f0f7ff;
}
.av-team-member h3 { margin: 0 0 10px 0; color: #0061b2; font-size: 1.4em; }
.av-team-member p { color: #666; margin: 0; }

/* Блоки с акцентом (Цитаты / Важно) */
.av-alert {
    background: #fff;
    border: 2px dashed #0061b2;
    padding: 30px;
    border-radius: 12px;
    margin-bottom: 40px;
    text-align: center;
}
.av-alert strong { color: #0061b2; font-size: 1.2em; display: block; margin-bottom: 15px; }
.av-callout {
    background: #f0fdf4;
    border-left: 5px solid #28a745;
    padding: 25px 30px;
    border-radius: 0 10px 10px 0;
    margin-bottom: 40px;
}

/* Видео галерея */
.av-video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}
.av-video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.av-video-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Сертификаты */
.av-certs {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    margin-bottom: 50px;
}
.av-certs img {
    height: 150px;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}
.av-certs img:hover { transform: scale(1.05); }

@media (max-width: 768px) {
    .av-header h1 { font-size: 2.2em; }
    .av-section-title { font-size: 1.8em; }
    .av-video-grid { grid-template-columns: 1fr; }
    .av-course-blocks { flex-direction: column; }
}

/* ===== Якорное меню по разделам страницы (sticky + scroll-spy) ===== */
.dpAnchorNav {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 0;
    margin: 0 0 24px;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(4px);
    border-bottom: 1px solid #eef0f3;
}
.dpAnchorLink {
    border: 1px solid #e2ecf6;
    background: #f5f9fd;
    color: #0061b2;
    font: 500 14px/1 robotomedium, arial, sans-serif;
    padding: 10px 18px;
    border-radius: 22px;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.dpAnchorLink:hover { background: #0061b2; color: #fff; border-color: #0061b2; }
.dpAnchorLink.active { background: #0061b2; color: #fff; border-color: #0061b2; box-shadow: 0 2px 8px rgba(0, 97, 178, .25); }

/* ===== FAQ (аккордеон) ===== */
.av-faq-section { margin: 40px 0; }
.av-faq {
    border: 1px solid #e7e8ea;
    border-radius: 10px;
    margin-bottom: 12px;
    overflow: hidden;
    background: #fff;
}
.av-faq summary {
    cursor: pointer;
    padding: 18px 52px 18px 22px;
    font: 600 1.05em/1.4 robotomedium, arial, sans-serif;
    color: #1a1a1a;
    list-style: none;
    position: relative;
}
.av-faq summary::-webkit-details-marker { display: none; }
.av-faq summary::after {
    content: '+';
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 26px;
    font-weight: 400;
    color: #0061b2;
    line-height: 1;
}
.av-faq[open] summary::after { content: '\2212'; }
.av-faq[open] summary { color: #0061b2; }
.av-faq-body { padding: 0 22px 20px; font-size: 1em; line-height: 1.7; color: #444; }

/* ===== Призыв к действию (CTA) ===== */
.av-cta {
    background: linear-gradient(135deg, #0061b2 0%, #0a7bd6 100%);
    border-radius: 14px;
    padding: 40px 32px;
    margin: 40px 0;
    text-align: center;
    color: #fff;
}
.av-cta h2 { color: #fff; margin: 0 0 14px; font-size: 1.7em; }
.av-cta p { color: #fff; opacity: .96; max-width: 720px; margin: 0 auto 24px; font-size: 1.08em; line-height: 1.6; }
.av-cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.av-cta-btn {
    display: inline-block;
    padding: 14px 30px;
    border-radius: 8px;
    font: 600 1.02em/1 robotomedium, arial, sans-serif;
    text-decoration: none;
    transition: opacity .2s ease, transform .2s ease;
}
.av-cta-btn:hover { opacity: .9; transform: translateY(-2px); }
.av-cta-btn-light { background: #fff; color: #0061b2; }
.av-cta-btn-ghost { background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255, 255, 255, .65); }

/* ===== Блок «Частые повреждения» (быстрая навигация) ===== */
.dpDamages { margin: 36px 0; }
.dpDamages h2 { text-align: center; color: #0061b2; margin-bottom: 24px; }
.dpDamagesGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}
.dpDamageChip {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
    padding: 18px 20px;
    border: 1px solid #e2ecf6;
    border-radius: 12px;
    background: #f7fbff;
    cursor: pointer;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.dpDamageChip:hover { box-shadow: 0 8px 20px rgba(0, 97, 178, .12); transform: translateY(-3px); border-color: #b9d6ee; }
.dpDamageIco { font-size: 30px; line-height: 1; flex-shrink: 0; }
.dpDamageTxt { display: flex; flex-direction: column; gap: 3px; font-size: .95em; color: #555; line-height: 1.35; }
.dpDamageTxt strong { color: #1a1a1a; font-size: 1.02em; }
.dpDamagesCta { text-align: center; margin-top: 24px; }

/* ===== Отзывы клиентов (Review) ===== */
.dpReviews { margin: 40px 0; }
.dpReviews > h2 { text-align: center; color: #0061b2; margin-bottom: 12px; }
.dpReviewsSummary { text-align: center; margin-bottom: 26px; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.dpRatingValue { font-size: 2em; font-weight: 700; color: #1a1a1a; line-height: 1; }
.dpStars { color: #ffb400; font-size: 1.4em; letter-spacing: 2px; }
.dpRatingCount { color: #777; font-size: .95em; }
.dpReviewsGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}
.dpReview {
    margin: 0;
    padding: 22px 24px;
    border: 1px solid #e8eef4;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .04);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.dpReviewStars { color: #ffb400; letter-spacing: 2px; font-size: 1.05em; }
.dpReviewStarsOff { color: #e0e0e0; }
.dpReviewText { margin: 0; font-style: normal; color: #333; line-height: 1.55; font-size: .97em; }
.dpReviewAuthor { color: #0061b2; font-weight: 600; font-size: .92em; }

/* ===== Встроенная форма оценки по фото (в CTA) ===== */
.dpForm { max-width: 640px; margin: 22px auto 0; text-align: left; }
.dpFormRow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.dpInput, .dpTextarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 8px;
    font-size: 15px;
    background: rgba(255, 255, 255, .96);
    color: #1a1a1a;
    box-sizing: border-box;
}
.dpTextarea { margin-bottom: 12px; resize: vertical; font-family: inherit; }
.dpInput:focus, .dpTextarea:focus { outline: 2px solid #ffcc01; }
.dpFileLabel {
    display: flex;
    align-items: center;
    padding: 12px 14px;
    border: 1px dashed rgba(255, 255, 255, .8);
    border-radius: 8px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.dpFileLabel:hover { background: rgba(255, 255, 255, .2); }
.dpFileInput { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.dpFormError { background: #fde7e9; color: #842029; border-radius: 6px; padding: 10px 12px; margin-bottom: 12px; font-size: 14px; }
.dpFormNote { color: rgba(255, 255, 255, .8); font-size: 12px; margin-top: 12px; }
.dpFormDone {
    max-width: 640px;
    margin: 22px auto 0;
    background: rgba(255, 255, 255, .95);
    border-radius: 10px;
    padding: 22px 24px;
    color: #256029;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.dpFormDone strong { font-size: 1.15em; }
.dpFormDone span { color: #333; }

/* ===== Липкая мобильная панель действий ===== */
.dpStickyBar { display: none; }

@media (max-width: 768px) {
    .av-cta { padding: 30px 20px; }
    .av-cta h2 { font-size: 1.4em; }
    .dpAnchorNav { gap: 6px; padding: 10px 0; }
    .dpAnchorLink { padding: 8px 14px; font-size: 13px; }
    .dpDamagesGrid { grid-template-columns: 1fr; }
    .dpFormRow { grid-template-columns: 1fr; }
    .dpReviewsGrid { grid-template-columns: 1fr; }

    /* Липкая панель показывается только на мобильных */
    .dpStickyBar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        gap: 1px;
        background: #d9dee3;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, .18);
    }
    .dpStickyBtn {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 14px 8px;
        border: none;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        text-decoration: none;
    }
    .dpStickyCall { background: #0061b2; color: #fff; }
    .dpStickyRequest { background: #ffcc01; color: #1a1a1a; }
    .dpStickyIco { font-size: 18px; line-height: 1; }
    /* Отступ снизу, чтобы панель не перекрывала контент/футер */
    #main { padding-bottom: 64px; }
}

/* ===== Галерея работ «до/после» ===== */
.dpGalleryHeading { text-align: center; color: #0061b2; margin: 36px 0 8px; }
.dpGallerySub { text-align: center; color: #666; max-width: 780px; margin: 0 auto 24px; line-height: 1.5; }
.dpGallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.dpGalleryItem { margin: 0; }
.dpGalleryImgWrap {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid #e8eef4;
    aspect-ratio: 4 / 3;
    background: #f2f5f8;
}
.dpGalleryImgWrap .gallery-photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}
.dpGalleryItem:hover .gallery-photo-img { transform: scale(1.04); }
.dpGalleryCaption { margin-top: 10px; color: #555; font-size: .92em; line-height: 1.4; }

/* ===== Похожие услуги (перелинковка) ===== */
.dpRelated { margin: 44px 0 20px; }
.dpRelated > h2 { text-align: center; color: #0061b2; margin-bottom: 24px; }
.dpRelatedGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.dpRelatedCard {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px;
    border: 1px solid #e2ecf6;
    border-radius: 12px;
    background: #f7fbff;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.dpRelatedCard:hover { box-shadow: 0 10px 24px rgba(0, 97, 178, .14); transform: translateY(-3px); border-color: #b9d6ee; }
.dpRelatedIco { font-size: 30px; line-height: 1; flex-shrink: 0; }
.dpRelatedTxt { display: flex; flex-direction: column; gap: 4px; font-size: .92em; color: #555; line-height: 1.4; }
.dpRelatedTxt strong { color: #0061b2; font-size: 1.08em; }

@media (max-width: 768px) {
    .dpGallery { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .dpRelatedGrid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .dpGallery { grid-template-columns: 1fr; }
}

/* ===== Онлайн-калькулятор стоимости ===== */
.dpCalc {
    margin: 30px 0 10px;
    padding: 28px;
    border: 1px solid #e2ecf6;
    border-radius: 16px;
    background: linear-gradient(135deg, #f7fbff 0%, #eef5fc 100%);
}
.dpCalcTitle { color: #0061b2; margin: 0 0 6px; text-align: center; }
.dpCalcHint { text-align: center; color: #666; margin: 0 auto 22px; max-width: 640px; line-height: 1.5; }
.dpCalcRow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}
.dpCalcField { display: flex; flex-direction: column; gap: 6px; }
.dpCalcLabel { font-weight: 600; color: #333; font-size: .95em; }
.dpCalcSelect {
    padding: 12px 14px;
    border: 1px solid #cdd9e5;
    border-radius: 8px;
    font-size: 15px;
    background: #fff;
    color: #1a1a1a;
    cursor: pointer;
}
.dpCalcSelect:focus { outline: 2px solid #0061b2; border-color: #0061b2; }
.dpCalcFieldCheck {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    color: #333;
    font-size: .95em;
    cursor: pointer;
}
.dpCalcFieldCheck input { width: 18px; height: 18px; cursor: pointer; }
.dpCalcResult {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 18px;
    background: #fff;
    border: 2px dashed #0061b2;
    border-radius: 12px;
    margin-bottom: 18px;
}
.dpCalcResultLabel { color: #555; font-size: 1.05em; }
.dpCalcResultValue { color: #0061b2; font-size: 1.9em; font-weight: 700; line-height: 1; }
.dpCalcActions { text-align: center; margin-bottom: 12px; }
.dpCalcNote { text-align: center; color: #888; font-size: .82em; max-width: 720px; margin: 0 auto; line-height: 1.5; }

/* ===== Как нас найти (карта) ===== */
.dpMap { margin: 44px 0 10px; }
.dpMap > h2 { text-align: center; color: #0061b2; margin-bottom: 24px; }
.dpMapGrid {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 20px;
    align-items: stretch;
}
.dpMapInfo {
    padding: 24px;
    border: 1px solid #e2ecf6;
    border-radius: 14px;
    background: #f7fbff;
}
.dpMapAddr { display: flex; gap: 10px; align-items: flex-start; font-size: 1.02em; color: #1a1a1a; margin: 0 0 16px; line-height: 1.45; }
.dpMapIco { font-size: 22px; line-height: 1; flex-shrink: 0; }
.dpMapLine { color: #444; margin: 0 0 12px; line-height: 1.5; }
.dpMapLine a { color: #0061b2; }
.dpMapRoute { display: inline-block; margin-top: 6px; }
.dpMapFrame {
    min-height: 360px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #e2ecf6;
}
.dpMapFrame iframe { display: block; min-height: 360px; }

@media (max-width: 768px) {
    .dpCalcRow { grid-template-columns: 1fr; }
    .dpMapGrid { grid-template-columns: 1fr; }
    .dpMapFrame { min-height: 300px; }
    .dpMapFrame iframe { min-height: 300px; }
}

/* ===== Контакты в ряд с выравниванием по центру ===== */
.information-list.dpContactRow {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 18px;
    margin: 20px auto 0;
}
.information-list.dpContactRow .information-list-item {
    flex: 1 1 200px;
    max-width: 260px;
    margin: 0;
}
.information-list.dpContactRow .information-list-item .tb {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    height: 100%;
}
.information-list.dpContactRow .information-item-icon { display: flex; justify-content: center; }
.information-list.dpContactRow .information-item-icon img { display: block; }
.information-list.dpContactRow .tc { text-align: center; line-height: 1.5; }

@media (max-width: 768px) {
    .information-list.dpContactRow { gap: 22px; }
    .information-list.dpContactRow .information-list-item {
        flex: 1 1 100%;
        max-width: 320px;
    }
}

/* ===== Виджет отзывов Яндекс.Карт ===== */
.dpYandexReviews { margin-top: 30px; }
.dpYandexReviews h3 { color: #0061b2; margin-bottom: 16px; }
.dpYandexReviewsFrame,
.contactsYandexReviewsFrame {
    width: 100%;
    height: 520px;
    border: 1px solid #e2ecf6;
    border-radius: 14px;
    box-sizing: border-box;
}
.contactsYandexReviews { margin: 36px 0; }
.contactsYandexReviews h2 { color: #0061b2; margin-bottom: 18px; }

@media (max-width: 768px) {
    .dpYandexReviewsFrame,
    .contactsYandexReviewsFrame { height: 440px; }
}

/* ===== Блог ===== */
.blogIntro { color: #666; max-width: 820px; margin: 0 0 28px; line-height: 1.6; }
.blogGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 40px;
}
.blogCard {
    display: flex;
    flex-direction: column;
    border: 1px solid #e2ecf6;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    transition: box-shadow .2s ease, transform .2s ease;
}
.blogCard:hover { box-shadow: 0 12px 28px rgba(0, 97, 178, .14); transform: translateY(-3px); }
.blogCardImg { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: #f2f5f8; }
.blogCardImg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blogCardBody { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.blogCardDate { color: #999; font-size: 13px; }
.blogCardTitle { font-size: 1.15em; line-height: 1.35; margin: 0; }
.blogCardTitle a { color: #1a1a1a; text-decoration: none; }
.blogCardTitle a:hover { color: #0061b2; }
.blogCardSummary { color: #555; font-size: .93em; line-height: 1.5; margin: 0; }
.blogCardMore { color: #0061b2; font-weight: 600; text-decoration: none; margin-top: auto; }

.blogArticle { margin: 0 auto; }
.blogArticle h1 { margin-bottom: 12px; }
.blogArticleMeta { display: flex; gap: 16px; color: #999; font-size: 14px; margin-bottom: 20px; }
.blogArticleImg { max-width: 100%; width: auto; height: auto; display: block; border-radius: 14px; margin-bottom: 24px; }
.blogToc { background: #f7fafd; border: 1px solid #e3e9f0; border-radius: 12px; padding: 16px 22px; margin: 0 0 28px; }
.blogTocTitle { font-family: robotobold, arial, sans-serif; color: #0061b2; margin-bottom: 10px; font-size: 1.05em; }
.blogToc ol { margin: 0; padding-left: 20px; }
.blogToc li { margin: 6px 0; }
.blogToc a { color: #0061b2; text-decoration: none; }
.blogToc a:hover { text-decoration: underline; }
.blogArticleContent { color: #333; line-height: 1.7; font-size: 1.02em; }
.blogArticleContent img { max-width: 100%; width: auto; height: auto; }
.blogArticleContent h2 { color: #0061b2; margin: 28px 0 12px; scroll-margin-top: 90px; }
.blogArticleContent ul, .blogArticleContent ol { padding-left: 22px; margin: 0 0 16px; }
.blogArticleContent li { margin-bottom: 8px; }
.blogArticleContent p { margin: 0 0 16px; }
.blogArticleContent a { color: #0061b2; }
.blogArticleBack { margin: 32px auto 0; }

.blogArticleTags { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 0; }
.blogTag { display: inline-block; padding: 4px 12px; background: #eef4fb; color: #0061b2; border-radius: 14px; font-size: 0.85em; text-decoration: none; }
.blogTag:hover { background: #dceaf9; }
.blogTagCloud { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 24px; }
.blogTagCloudLabel { color: #666; font-size: 0.9em; margin-right: 4px; }
.blogTagChip { display: inline-block; padding: 4px 12px; background: #eef4fb; color: #0061b2; border-radius: 14px; font-size: 0.85em; text-decoration: none; }
.blogTagChip:hover { background: #dceaf9; }
.blogTagChip.active { background: #0061b2; color: #fff; }

.blogRelated { margin: 48px 0 0; padding-top: 32px; border-top: 1px solid #e3e9f0; }
.blogRelated h2 { color: #0061b2; margin: 0 0 20px; }

@media (max-width: 992px) {
    .blogGrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .blogGrid { grid-template-columns: 1fr; }
}

.av-blog-links { margin: 40px 0; padding: 24px 28px; background: #f7fafd; border: 1px solid #e3e9f0; border-radius: 14px; }
.av-blog-links h2 { color: #0061b2; margin: 0 0 16px; font-size: 1.3em; }
.av-blog-links-list { list-style: none; padding: 0; margin: 0 0 16px; }
.av-blog-links-list li { margin: 0 0 10px; padding-left: 20px; position: relative; }
.av-blog-links-list li::before { content: '→'; position: absolute; left: 0; color: #0061b2; }
.av-blog-links-list a { color: #0061b2; text-decoration: none; }
.av-blog-links-list a:hover { text-decoration: underline; }
.av-blog-links-all { display: inline-block; font-weight: 600; color: #0061b2; text-decoration: none; }
.av-blog-links-all:hover { text-decoration: underline; }

/* Блок «Полезные статьи о PDR» на главной */
.homeBlogSection { padding: 40px 0 8px; }
.homeBlogHead { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.homeBlogHead h2 { margin: 0; font-size: 1.6em; color: #1a1a1a; }
.homeBlogAll { color: #0061b2; font-weight: 600; text-decoration: none; white-space: nowrap; }
.homeBlogAll:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
    .mobileNavBurgerIcon span { transition: none; }
}

/* =========================================================================
   Отзывы о товаре (низ карточки)
   ========================================================================= */
.productReviews {
    margin: 48px auto 0;
    padding-bottom: 48px;
}

/* --- сводка --- */
.reviewsSummary {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 22px;
}
.reviewsAvg {
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
    color: #0061b2;
}
.reviewsStars,
.reviewStars {
    color: #f5a623;
    letter-spacing: 2px;
    font-size: 18px;
    line-height: 1;
    white-space: nowrap;
}
.reviewsCount {
    color: #666;
    font-size: 15px;
}

/* --- список --- */
.reviewsList {
    list-style: none;
    margin: 0 0 36px;
    padding: 0;
    display: grid;
    gap: 16px;
}
.reviewItem {
    background: #fff;
    border: 1px solid #e6e8e6;
    border-radius: 10px;
    padding: 18px 20px;
}
.reviewHead {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.reviewAuthor { font-weight: 600; }
.reviewDate {
    color: #888;
    font-size: 13px;
    margin-left: auto;
}
.reviewBody {
    margin: 0;
    color: #333;
    line-height: 1.65;
    white-space: pre-line;   /* переносы строк из отзыва сохраняются */
    overflow-wrap: anywhere;  /* длинная строка без пробелов не ломает вёрстку */
}
.reviewsEmpty {
    color: #666;
    margin: 0 0 30px;
}

/* --- форма --- */
.reviewForm {
    background: #f7f9fb;
    border: 1px solid #e0e6ec;
    border-radius: 12px;
    padding: 24px;
    max-width: 720px;
}
.reviewFormHeading {
    margin: 0 0 18px;
    font-size: 19px;
}
.reviewFormRow {
    display: grid;
    gap: 6px;
    margin-bottom: 16px;
}
.reviewFormRow label {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}
.reviewFormRow label span[aria-hidden] {
    color: #c00;
    margin-left: 2px;
}
.reviewForm .inputtext {
    width: 100%;
    border: 1px solid #d1d7dd;
    border-radius: 8px;
    padding: 11px 14px;
    font: inherit;
    background: #fff;
    box-sizing: border-box;
    min-height: 44px;    /* площадь нажатия на мобильном */
}
.reviewForm .inputtext:focus-visible {
    outline: 2px solid #0061b2;
    outline-offset: 1px;
    border-color: #0061b2;
}
.reviewTextarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.6;
}
.reviewRatingSelect { max-width: 260px; }

.reviewSubmit {
    min-height: 44px;
    padding: 0 26px;
    cursor: pointer;
}
.reviewSubmit[disabled] { opacity: .6; cursor: default; }

.reviewNote {
    margin: 12px 0 0;
    font-size: 13px;
    color: #777;
}
.reviewError {
    background: #fdecea;
    border: 1px solid #f5c6c2;
    color: #a32b1c;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 14px;
}
.reviewThanks {
    background: #e7f6ea;
    border: 1px solid #bfe3c8;
    color: #1d6b32;
    border-radius: 10px;
    padding: 18px 20px;
    max-width: 720px;
}

/* Honeypot: убран с глаз и из потока, но остаётся в DOM для ботов.
   display:none не годится — часть скриптов такие поля пропускает. */
.reviewHoneypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media (max-width: 900px) {
    .productReviews { margin-top: 32px; padding: 0 12px 40px; }
    .reviewForm { padding: 18px 16px; }
    .reviewDate { margin-left: 0; width: 100%; }
    .reviewsAvg { font-size: 28px; }
}

/* =========================================================================
   1. КНОПКА «В КОРЗИНУ» И КАРТОЧКИ ТОВАРОВ В СПИСКАХ (ДЕСКТОП И МОБИЛЬНЫЕ)
   ========================================================================= */
/* Сбрасываем фиксированную высоту карточек и скрытие переполнения Bitrix на всех экранах */
.product,
.productList .product,
.items .product,
#catalogSection .items.productList .item,
.ciShowcase .items.productList .item {
    height: auto !important;
    min-height: 0 !important;
}

.product .tabloid,
.productList .product .tabloid,
.items .product .tabloid,
#catalogSection .items.productList .item .tabloid,
.ciShowcase .items.productList .item .tabloid {
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    position: relative !important;
}

/* Отменяем Bitrix position:absolute при hover, чтобы карточка не выпадала из потока */
.product:hover .tabloid,
.productList .product:hover .tabloid,
.items .product:hover .tabloid,
#catalogSection .items.productList .item:hover .tabloid,
.ciShowcase .items.productList .item:hover .tabloid {
    position: relative !important;
    height: auto !important;
    width: auto !important;
}

.product .productTable {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    justify-content: space-between !important;
    height: 100% !important;
}

.product .productColText {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    justify-content: flex-end !important;
}

.product .name {
    height: auto !important;
    min-height: 38px !important;
    max-height: none !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin-bottom: 6px !important;
    line-height: 18px !important;
}

/* Гарантированное постоянное отображение кнопки «В корзину» на ВСЕХ устройствах (десктоп, планшет, мобильные) */
.product .addCartContainer {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-top: 8px !important;
    margin-bottom: 4px !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
}

.product .addCart {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 100% !important;
    min-height: 40px !important;
    height: auto !important;
    padding: 8px 10px !important;
    line-height: 1.2 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    text-align: center !important;
    box-sizing: border-box !important;
    background: #0061b2 !important;
    color: #fff !important;
    border: 0 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: background .2s ease, transform .1s ease !important;
}

.product .addCart span {
    position: static !important;
    transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    color: #fff !important;
}

.product .addCart:hover,
.product .addCart:active {
    background: #2d7bbb !important;
    color: #fff !important;
}

.product .addCart.added {
    background: #1e7e34 !important;
    color: #fff !important;
}
.product .addCart.added:hover {
    background: #19692c !important;
    color: #fff !important;
}

.product .addCart .icon {
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
}

.product .btn-simple.add-cart {
    display: block !important;
    width: 100% !important;
    min-height: 34px !important;
    line-height: 34px !important;
    margin-top: 6px !important;
    padding: 0 8px !important;
    text-align: center !important;
    font-size: 13px !important;
    box-sizing: border-box !important;
    border-radius: 6px !important;
    background: #f4f6f8 !important;
    color: #333 !important;
    border: 1px solid #dcdfe4 !important;
    text-decoration: none !important;
    transition: background .2s ease, color .2s ease !important;
}
.product .btn-simple.add-cart:hover {
    background: #e7ecf2 !important;
    color: #0061b2 !important;
    border-color: #0061b2 !important;
}

/* Сетка списка товаров в разделах каталога (#catalogSection) и на главной (#homeCatalog) */
#catalogSection .items.productList {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px !important;
    border: 0 !important;
}

#homeCatalog .items.productList {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 14px !important;
    border: 0 !important;
    margin-top: 16px !important;
    margin-bottom: 24px !important;
}

#catalogSection .items.productList .item,
#homeCatalog .items.productList .item {
    float: none !important;
    width: auto !important;
    height: 100% !important;
    margin: 0 !important;
    border: 1px solid #e7e8ea !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-sizing: border-box !important;
    transition: box-shadow .2s ease, border-color .2s ease !important;
}

#catalogSection .items.productList .item:hover,
#homeCatalog .items.productList .item:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,.10) !important;
    border-color: #b9d4ec !important;
}

#homeCatalog .items.productList .tabloid {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    padding: 14px !important;
}

#homeCatalog .items.productList .productColImage {
    height: 180px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 10px !important;
}

#homeCatalog .items.productList .productColImage img {
    max-height: 170px !important;
    max-width: 100% !important;
    object-fit: contain !important;
}

#homeCatalog .items.productList .name {
    min-height: 38px !important;
    max-height: 38px !important;
    line-height: 19px !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    margin-bottom: 8px !important;
}

#homeCatalog .items.productList .price {
    font-size: 17px !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
}

@media (max-width: 1200px) {
    #homeCatalog .items.productList {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 12px !important;
    }
}

@media (max-width: 900px) {
    #catalogSection .items.productList {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    #homeCatalog .items.productList {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
}

@media (max-width: 480px) {
    #catalogSection .items.productList,
    #homeCatalog .items.productList {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    #homeCatalog .items.productList .tabloid {
        padding: 10px !important;
    }
    #homeCatalog .items.productList .productColImage {
        height: 130px !important;
    }
    #homeCatalog .items.productList .productColImage img {
        max-height: 120px !important;
    }
}

@media (max-width: 340px) {
    #catalogSection .items.productList,
    #homeCatalog .items.productList {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================================
   1.1. МОБИЛЬНАЯ ПЛАВАЮЩАЯ КОРЗИНА (STICKY BOTTOM BAR & FAB)
   ========================================================================= */
.mobileStickyCartBar,
.mobileFloatingCartFab {
    display: none;
}

@media (max-width: 900px) {
    .mobileStickyCartBar {
        display: block;
        position: fixed;
        bottom: 16px;
        left: 12px;
        right: 12px;
        z-index: 9990;
        animation: slideUpCart .25s ease-out;
    }

    .mscbLink {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: linear-gradient(135deg, #0061b2 0%, #004d8c 100%);
        color: #fff !important;
        text-decoration: none !important;
        padding: 10px 16px;
        border-radius: 12px;
        box-shadow: 0 8px 24px rgba(0, 45, 84, 0.38), 0 2px 6px rgba(0,0,0,0.15);
        border: 1px solid rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    .mscbLeft {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .mscbIconWrap {
        position: relative;
        width: 38px;
        height: 38px;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.18);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .mscbIconWrap svg {
        color: #fff;
    }

    .mscbBadge {
        position: absolute;
        top: -5px;
        right: -6px;
        background: #e65100;
        color: #fff;
        font-size: 11px;
        font-weight: 800;
        padding: 2px 6px;
        border-radius: 10px;
        border: 2px solid #004d8c;
        line-height: 1;
    }

    .mscbInfo {
        display: flex;
        flex-direction: column;
    }

    .mscbTitle {
        font-size: 12px;
        opacity: 0.9;
        line-height: 1.2;
    }

    .mscbSum {
        font-size: 16px;
        font-weight: 800;
        line-height: 1.2;
        letter-spacing: 0.3px;
    }

    .mscbAction {
        display: flex;
        align-items: center;
        gap: 6px;
        background: #ffffff;
        color: #0061b2 !important;
        font-weight: 700;
        font-size: 13px;
        padding: 8px 14px;
        border-radius: 8px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.12);
        white-space: nowrap;
    }

    /* Плавающая круглая кнопка корзины (когда корзина пуста) */
    .mobileFloatingCartFab {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        position: fixed;
        bottom: 16px;
        right: 14px;
        z-index: 9989;
        background: #0061b2;
        color: #fff !important;
        text-decoration: none !important;
        padding: 0 16px;
        height: 44px;
        border-radius: 22px;
        box-shadow: 0 6px 18px rgba(0, 97, 178, 0.4);
        font-size: 13px;
        font-weight: 700;
        border: 2px solid #fff;
        transition: transform .2s ease, background .2s ease;
    }

    .mobileFloatingCartFab:active {
        transform: scale(0.95);
    }

    .mscbFabText {
        font-size: 13px;
        font-weight: 700;
    }

    /* Увеличенная зона клика и видимость корзины в мобильной шапке */
    #subHeader5 .subTableColumn:last-child {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
    }

    #subHeader5 .cart {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 44px !important;
        min-height: 44px !important;
        margin: 0 !important;
    }

    #subHeader5 .cart #flushTopCart {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
    }

    #subHeader5 .cart .heading {
        display: none !important;
    }

    #subHeader5 .cart .countLink {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        position: relative !important;
        background-size: 26px 26px !important;
        background-position: center center !important;
        float: none !important;
    }

    #subHeader5 .cart .countLink .count {
        position: absolute !important;
        top: 2px !important;
        right: 0px !important;
        transform: translate(25%, -25%) !important;
        box-sizing: border-box !important;
        width: auto !important;
        min-width: 18px !important;
        height: 18px !important;
        max-width: 28px !important;
        background: #0061b2 !important;
        color: #ffffff !important;
        font-size: 11px !important;
        font-weight: 800 !important;
        padding: 0 4px !important;
        border-radius: 9px !important;
        line-height: 14px !important;
        border: 2px solid #ffffff !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        z-index: 5 !important;
    }

    #subHeader5 .cart .countLink:not(.active) .count {
        display: none !important;
    }
}

@keyframes slideUpCart {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Всплывающее уведомление о добавлении в корзину (Toast) */
.cartToastNotification {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
    background: #1a1a1a;
    color: #fff;
    padding: 12px 20px;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.35);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    animation: toastIn .25s ease-out;
    max-width: 90vw;
}

.cartToastIcon {
    width: 22px;
    height: 22px;
    background: #28a745;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
}

.cartToastText {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cartToastLink {
    color: #60a5fa !important;
    text-decoration: underline !important;
    font-weight: 700;
    white-space: nowrap;
    margin-left: 6px;
}

@keyframes toastIn {
    from { transform: translate(-50%, -20px); opacity: 0; }
    to { transform: translate(-50%, 0); opacity: 1; }
}


/* =========================================================================
   2. КНОПКА «БЫСТРЫЙ ЗАКАЗ» В КАРТОЧКЕ ТОВАРА
   ========================================================================= */
.btnFastBuy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #fff;
    color: #e65100;
    border: 2px solid #ff9800;
    font-family: robotobold, arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    padding: 0 16px;
    height: 44px;
    line-height: 40px;
    border-radius: 6px;
    cursor: pointer;
    transition: all .2s ease;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    box-sizing: border-box;
    margin-top: 8px;
    width: 100%;
}
.btnFastBuy:hover {
    background: #fff3e0;
    border-color: #f57c00;
    color: #ef6c00;
}
.btnFastBuy:active {
    background: #ffe0b2;
    transform: scale(0.98);
}

/* =========================================================================
   3. БЛОК ДОВЕРИЯ «ДОСТАВКА И ОПЛАТА» В КАРТОЧКЕ ТОВАРА
   ========================================================================= */
.productDeliveryTrustBox {
    margin-top: 20px;
    padding: 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
    color: #334155;
}
.pdtbHeading {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 14px;
    color: #0f172a;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e2e8f0;
}
.pdtbList {
    list-style: none;
    margin: 0 0 12px 0;
    padding: 0;
}
.pdtbList li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
}
.pdtbBullet {
    flex-shrink: 0;
    font-size: 15px;
    line-height: 1.3;
}
.pdtbLink {
    display: inline-block;
    color: #0061b2;
    font-weight: 600;
    text-decoration: none;
    font-size: 13px;
    transition: color .2s ease;
}
.pdtbLink:hover {
    color: #2d7bbb;
    text-decoration: underline;
}

/* =========================================================================
   4. ФИКСИРОВАННАЯ НИЖНЯЯ ПЛАШКА НА МОБИЛЬНОМ (STICKY BOTTOM BAR)
   ========================================================================= */
.productMobileStickyBar {
    display: none;
}
@media (max-width: 768px) {
    .productMobileStickyBar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 9999;
        background: #ffffff;
        box-shadow: 0 -3px 16px rgba(0,0,0,0.12);
        padding: 10px 14px;
        box-sizing: border-box;
        border-top: 1px solid #e5e7eb;
    }
    #main {
        padding-bottom: 72px;
    }
    .pmsbPrice {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .pmsbOldPrice {
        font-size: 11px;
        color: #94a3b8;
        line-height: 1;
    }
    .pmsbCurrentPrice {
        font-size: 17px;
        font-weight: 700;
        color: #0f172a;
        line-height: 1.2;
    }
    .pmsbButtons {
        display: flex;
        gap: 8px;
    }
    .pmsbBtnCart,
    .pmsbBtnFast {
        height: 40px;
        padding: 0 12px;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
        border: 0;
        transition: all .2s ease;
        white-space: nowrap;
    }
    .pmsbBtnCart {
        background: #0061b2;
        color: #fff;
    }
    .pmsbBtnCart.added {
        background: #2b2b2b;
    }
    .pmsbBtnFast {
        background: #fff;
        color: #e65100;
        border: 2px solid #ff9800;
    }
}

/* =========================================================================
   5. МОБИЛЬНЫЙ ФИЛЬТР КАТАЛОГА (КНОПКА И ВСПЛЫВАЮЩАЯ ПАНЕЛЬ)
   ========================================================================= */
.catalogLineFilterToggle {
    display: none;
}
.mobileFilterHeader {
    display: none;
}
.mobileFilterBackdrop {
    display: none;
}

@media (max-width: 900px) {
    #catalogLine {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .catalogLineFilterToggle {
        display: block;
    }
    .mobileFilterToggleBtn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: #f0f6fc;
        color: #0061b2;
        border: 1px solid #c8dcf0;
        border-radius: 6px;
        padding: 6px 12px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        position: relative;
    }
    .mobileFilterActiveDot {
        color: #e65100;
        font-size: 14px;
        line-height: 1;
    }
    .mobileFilterBackdrop {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: 99999;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }
    #catalogColumn #smartFilter.opened {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: calc(100% - 32px) !important;
        max-width: 440px !important;
        max-height: 85vh !important;
        overflow-y: auto !important;
        background: #ffffff !important;
        border-radius: 12px !important;
        box-shadow: 0 20px 60px rgba(0,0,0,0.35) !important;
        z-index: 100000 !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid #e2e8f0 !important;
    }
    .mobileFilterHeader {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 14px 18px;
        background: #0061b2;
        color: #fff;
        border-radius: 12px 12px 0 0;
    }
    .mobileFilterHeader .heading,
    .mobileFilterHeader .mobileFilterHeading {
        background: transparent !important;
        background-color: transparent !important;
        color: #ffffff !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }
    .mobileFilterCloseBtn {
        background: rgba(255,255,255,0.2);
        color: #fff;
        border: 0;
        border-radius: 50%;
        width: 30px;
        height: 30px;
        font-size: 15px;
        cursor: pointer;
        line-height: 30px;
        text-align: center;
        padding: 0;
        transition: background .2s;
    }
    .mobileFilterCloseBtn:hover {
        background: rgba(255,255,255,0.35);
    }

    /* Читаемость полей внутри мобильного фильтра */
    #catalogColumn #smartFilter.opened .paramsBox {
        padding: 16px 18px !important;
        border-bottom: 1px solid #edf2f7 !important;
        background: #fff !important;
    }
    #catalogColumn #smartFilter.opened .paramsBoxTitle {
        margin-bottom: 12px !important;
    }
    #catalogColumn #smartFilter.opened .paramsBoxTitle span {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #1e293b !important;
    }
    #catalogColumn #smartFilter.opened .rangeSlider {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 8px 10px !important;
    }
    #catalogColumn #smartFilter.opened .rangeSlider label {
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #475569 !important;
        margin: 0 !important;
    }
    #catalogColumn #smartFilter.opened .rangeSlider input {
        background: #f8fafc !important;
        border: 1.5px solid #cbd5e1 !important;
        border-radius: 6px !important;
        padding: 6px 10px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #0f172a !important;
        width: 100px !important;
        box-sizing: border-box !important;
    }
    #catalogColumn #smartFilter.opened .rangeSlider input:focus {
        border-color: #0061b2 !important;
        background: #fff !important;
        outline: none !important;
    }
    #catalogColumn #smartFilter.opened .rangeSlider .slider {
        width: 100% !important;
        margin-top: 10px !important;
    }
    #catalogColumn #smartFilter.opened .checkbox li {
        padding: 6px 0 !important;
    }
    #catalogColumn #smartFilter.opened .checkbox label {
        font-size: 14px !important;
        font-weight: 500 !important;
        color: #1e293b !important;
        cursor: pointer !important;
    }
    #catalogColumn #smartFilter.opened .checkbox .elCount {
        color: #64748b !important;
        font-size: 12px !important;
        font-style: normal !important;
    }
    #catalogColumn #smartFilter.opened #smartFilterControls {
        display: flex !important;
        gap: 10px !important;
        padding: 14px 18px !important;
        margin: 0 !important;
        list-style: none !important;
        background: #f8fafc !important;
        border-top: 1px solid #e2e8f0 !important;
        border-radius: 0 0 12px 12px !important;
    }
    #catalogColumn #smartFilter.opened #smartFilterControls li {
        flex: 1 1 50% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    #catalogColumn #smartFilter.opened #smartFilterControls button {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 42px !important;
        border-radius: 8px !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        text-align: center !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
        transition: all .2s ease !important;
    }
    #catalogColumn #smartFilter.opened #set_filter {
        background: #0061b2 !important;
        color: #ffffff !important;
        border: none !important;
    }
    #catalogColumn #smartFilter.opened #set_filter:hover {
        background: #004d8c !important;
    }
    #catalogColumn #smartFilter.opened #del_filter {
        background: #ffffff !important;
        color: #475569 !important;
        border: 1.5px solid #cbd5e1 !important;
    }
    #catalogColumn #smartFilter.opened #del_filter:hover {
        background: #f1f5f9 !important;
        color: #1e293b !important;
    }
}

/* =========================================================================
   5.1. ВЫРАВНИВАНИЕ БЛОКА ДОСТУПНЫХ ДЕЙСТВИЙ В КОРЗИНЕ
   ========================================================================= */
#basketTopLine.basketActionsBar {
    margin-bottom: 24px;
    padding: 16px 20px;
    background: #f9f9f9;
    border-radius: 8px;
}
#basketTopLine .basketActionsControl {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}
#basketTopLine .basketActionHeader {
    font-weight: 500;
    margin-right: 8px;
    font-size: 14px;
}
#basketTopLine .basketActionBtn .btn-simple {
    padding: 8px 16px;
    font-size: 13px;
}

@media (max-width: 640px) {
    #basketTopLine.basketActionsBar {
        padding: 14px 16px !important;
        margin-bottom: 18px !important;
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 10px !important;
    }
    #basketTopLine .basketActionsControl {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        width: 100% !important;
    }
    #basketTopLine .basketActionHeader {
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #1e293b !important;
        margin: 0 0 2px 0 !important;
        width: 100% !important;
        text-align: left !important;
    }
    #basketTopLine .basketActionBtn {
        width: 100% !important;
        margin: 0 !important;
    }
    #basketTopLine .basketActionBtn .btn-simple {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
        height: 44px !important;
        padding: 0 16px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        text-align: center !important;
        border-radius: 8px !important;
        text-decoration: none !important;
    }
    #basketTopLine .basketActionBtn .actionBtnOrder {
        background: #0061b2 !important;
        color: #ffffff !important;
        border: 1px solid #0061b2 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 6px rgba(0, 97, 178, 0.25) !important;
    }
    #basketTopLine .basketActionBtn .actionBtnContinue {
        background: #ffffff !important;
        color: #0061b2 !important;
        border: 1.5px solid #0061b2 !important;
    }
    #basketTopLine .basketActionBtn .actionBtnClear {
        background: #ffffff !important;
        color: #64748b !important;
        border: 1px solid #cbd5e1 !important;
    }
}

/* =========================================================================
   6. ЖИВОЙ ПОИСК ТОВАРОВ (LIVESEARCH)
   ========================================================================= */
.liveSearchWrapper {
    position: relative;
    width: 100%;
}
.liveSearchResultsDropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    z-index: 99999;
    max-height: 420px;
    overflow-y: auto;
    margin-top: 2px;
}
.liveSearchLoading,
.liveSearchEmpty {
    padding: 16px;
    text-align: center;
    color: #6b7280;
    font-size: 14px;
}
.liveSearchSpinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #0061b2;
    border-top-color: transparent;
    border-radius: 50%;
    animation: avSpin 0.7s linear infinite;
    vertical-align: middle;
    margin-right: 8px;
}
@keyframes avSpin {
    to { transform: rotate(360deg); }
}
.liveSearchList {
    display: flex;
    flex-direction: column;
}
.liveSearchItem {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid #f3f4f6;
    text-decoration: none;
    color: #1f2937;
    transition: background .15s ease;
}
.liveSearchItem:hover {
    background: #f0f7ff;
}
.liveSearchItemThumb {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
}
.liveSearchItemThumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.liveSearchNoPhoto {
    font-size: 10px;
    font-weight: 700;
    color: #9ca3af;
}
.liveSearchItemInfo {
    flex: 1;
    min-width: 0;
}
.liveSearchItemTitle {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #111827;
}
.liveSearchItemMeta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 3px;
    font-size: 12px;
}
.liveSearchItemArticle {
    color: #6b7280;
}
.liveSearchItemPrice {
    font-weight: 700;
    color: #0061b2;
}
.liveSearchFooter {
    padding: 10px 14px;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
    text-align: right;
}
.liveSearchAllLink {
    font-size: 13px;
    font-weight: 600;
    color: #0061b2;
    text-decoration: none;
}
.liveSearchAllLink:hover {
    text-decoration: underline;
}

/* =========================================================================
   7. СТРАНИЦА ОБУЧЕНИЯ: ПРОГРАММА ПО ДНЯМ (АККОРДЕОН)
   ========================================================================= */
.training-curriculum-section {
    margin: 40px 0;
}
.curriculum-accordion {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 860px;
    margin: 0 auto;
}
.curriculum-day-card {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    transition: box-shadow .2s ease, border-color .2s ease;
}
.curriculum-day-card:hover {
    border-color: #b9d4ec;
    box-shadow: 0 4px 14px rgba(0,97,178,0.08);
}
.curriculum-day-card.open {
    border-color: #0061b2;
    box-shadow: 0 4px 16px rgba(0,97,178,0.12);
}
.curriculum-day-header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: #fff;
    border: 0;
    cursor: pointer;
    text-align: left;
    transition: background .2s ease;
}
.curriculum-day-header:hover {
    background: #f8fafc;
}
.curriculum-day-badge {
    background: #eef5fc;
    color: #0061b2;
    font-weight: 700;
    font-size: 13px;
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}
.curriculum-day-card.open .curriculum-day-badge {
    background: #0061b2;
    color: #fff;
}
.curriculum-day-title {
    flex: 1;
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.4;
}
.curriculum-day-hours {
    font-size: 13px;
    color: #64748b;
    white-space: nowrap;
}
.curriculum-chevron {
    font-size: 11px;
    color: #94a3b8;
    margin-left: 4px;
}
.curriculum-day-body {
    padding: 0 20px 18px 20px;
    border-top: 1px solid #f1f5f9;
    background: #fafbfc;
}
.curriculum-day-desc {
    font-size: 14px;
    line-height: 1.6;
    color: #334155;
    margin: 12px 0;
}
.curriculum-practice-box {
    background: #f0fdf4;
    border-left: 4px solid #22c55e;
    padding: 10px 14px;
    border-radius: 0 6px 6px 0;
    font-size: 13px;
    line-height: 1.5;
    color: #166534;
}

/* =========================================================================
   8. СТРАНИЦА ОБУЧЕНИЯ: КАЛЬКУЛЯТОР ОКУПАЕМОСТИ КУРСА PDR
   ========================================================================= */
.training-roi-section {
    margin: 48px 0;
}
.roi-calc-container {
    background: #ffffff;
    border: 1px solid #dbeafe;
    border-radius: 14px;
    padding: 32px 28px;
    box-shadow: 0 8px 28px rgba(0,97,178,0.08);
    max-width: 900px;
    margin: 0 auto;
}
.roi-calc-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 32px;
    align-items: center;
}
@media (max-width: 800px) {
    .roi-calc-grid {
        grid-template-columns: 1fr;
    }
}
.roi-inputs {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.roi-input-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.roi-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #334155;
}
.roi-range-slider {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: #e2e8f0;
    outline: none;
    cursor: pointer;
    accent-color: #0061b2;
}
.roi-scale {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #94a3b8;
}
.roi-results-card {
    background: #f0f7ff;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.roi-res-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #dbeafe;
    padding-bottom: 10px;
}
.roi-res-label {
    font-size: 13px;
    color: #475569;
}
.roi-res-val {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
}
.roi-res-val.roi-highlight {
    font-size: 20px;
    color: #0061b2;
}
.roi-payback-box {
    background: #ffffff;
    border: 2px dashed #0061b2;
    border-radius: 10px;
    padding: 14px;
    text-align: center;
}
.roi-payback-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    color: #64748b;
    display: block;
    margin-bottom: 4px;
}
.roi-payback-value {
    font-size: 20px;
    font-weight: 800;
    color: #16a34a;
    line-height: 1.2;
}
.roi-payback-sub {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 4px;
}
.roi-book-btn {
    width: 100%;
    padding: 12px 18px;
    text-align: center;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: #0061b2;
    cursor: pointer;
    border: 0;
    transition: background .2s ease;
}
.roi-book-btn:hover {
    background: #2d7bbb;
}

/* =========================================================================
   9. ГЛАВНАЯ СТРАНИЦА: ЗАГОЛОВОК И ВКЛАДКИ КАТАЛОГА (#homeCatalog)
   ========================================================================= */
.homeCatalogHeading {
    text-align: center;
    margin: 40px 0 25px;
    font-size: 28px;
    font-weight: 700;
    color: #1a1a1a;
}

/* Десктопная раскладка вкладок */
#homeCatalog .captionList .slideBox {
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

#homeCatalog .captionList .cItem {
    flex: 1 1 0;
    width: auto;
    float: none;
    list-style: none;
}

#homeCatalog .caption {
    width: 100%;
    box-sizing: border-box;
}

#homeCatalog .caption button.getProductByGroup {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    box-sizing: border-box;
}

/* Планшет и мобильные устройства: современные интерактивные чипсы/таблетки */
@media (max-width: 900px) {
    .homeCatalogHeading {
        margin: 28px 0 16px !important;
        font-size: 20px !important;
        line-height: 1.3 !important;
        padding: 0 12px !important;
    }

    /* Отключаем градиентную шторку Bitrix, закрывавшую крайние вкладки */
    #homeCatalog #captionCarousel::before {
        display: none !important;
    }

    #homeCatalog .captionList {
        height: auto !important;
        line-height: normal !important;
        background: transparent !important;
        margin: 0 0 16px !important;
        padding: 0 !important;
        border: none !important;
    }

    #homeCatalog .captionList .limiter {
        padding: 0 12px !important;
    }

    #homeCatalog #captionCarousel {
        overflow: visible !important;
        background: transparent !important;
        border: none !important;
        margin: 0 !important;
        position: static !important;
    }

    #homeCatalog .captionList .slideBox {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
        width: 100% !important;
        position: static !important;
        left: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    #homeCatalog .captionList .cItem {
        flex: 0 0 auto !important;
        width: auto !important;
        float: none !important;
        margin: 0 !important;
    }

    #homeCatalog .caption {
        border: 1px solid #dcdfe4 !important;
        border-radius: 20px !important;
        background: #ffffff !important;
        height: auto !important;
        line-height: normal !important;
        padding: 8px 16px !important;
        text-align: center !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
        transition: all .2s ease !important;
        overflow: visible !important;
    }

    #homeCatalog .caption:hover {
        background-color: #f0f4f8 !important;
        border-color: #c0cdd8 !important;
    }

    #homeCatalog .caption button.getProductByGroup {
        color: #2b2b2b !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        cursor: pointer !important;
        padding: 0 !important;
    }

    #homeCatalog .caption.selected {
        background: #0061b2 !important;
        border-color: #0061b2 !important;
        box-shadow: 0 3px 10px rgba(0, 97, 178, 0.28) !important;
    }

    #homeCatalog .caption.selected button.getProductByGroup {
        color: #ffffff !important;
        font-weight: 700 !important;
    }
}

@media (max-width: 480px) {
    .homeCatalogHeading {
        margin: 22px 0 14px !important;
        font-size: 18px !important;
    }

    #homeCatalog .captionList .slideBox {
        gap: 6px !important;
    }

    #homeCatalog .caption {
        padding: 7px 13px !important;
        border-radius: 18px !important;
    }

    #homeCatalog .caption button.getProductByGroup {
        font-size: 13px !important;
    }
}