/*NOTE: This file is intended for programmers. Aspro technical support is not advised to work with him.*/

/* Examples (uncomment to use):*/

/* Expand site width */
/* body .wrapper { max-width: 1400px !important;  } */

/* Set site background image */
/* body {  background: url(image_source) top no-repeat; }

/* Hide compare button */
/* a.compare_item { display: none !important;  }*/



/* ============================================
   Шапка - Контакты автосервисов (изолированные стили)
   Карточка раскрывается ТОЛЬКО при наведении на адрес
   ============================================ */

.aat-header-contacts {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 20px; /* === пункт 4: уменьшено расстояние между филиалами === */
    padding: 8px 0px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    box-sizing: border-box;
    position: relative;
    z-index: 1000;
    min-height: 0;
}
.aat-header-contacts *, .aat-header-contacts *::before, .aat-header-contacts *::after { box-sizing: inherit; }
.aat-header-contacts a { color: inherit; text-decoration: none; }
.aat-header-contacts ul, .aat-header-contacts p { margin: 0; padding: 0; }

/* === Элемент филиала === */
.aat-header-contacts__item {
    position: relative;
}

/* === Триггер: одна строка, минимальные отступы === */
.aat-header-contacts__trigger {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 6px; /* === пункт 2: адрес и телефон почти рядом === */
    padding: 6px 10px;
    background: transparent;
    border-radius: 8px;
}

/* === ЯКОРЬ: только адрес вызывает карточку === */
.aat-header-contacts__anchor {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

/* === Адрес (цвет #004982) === */
.aat-header-contacts__address {
    font-size: 14px;
    font-weight: 600;
    color: #004982;
    line-height: 1.3;
    white-space: nowrap;
    transition: color .2s ease;
}

.aat-header-contacts__anchor:hover .aat-header-contacts__address {
    text-decoration: none;
}

/* === Разделитель между адресом и телефоном === */
.aat-header-contacts__sep {
    width: 1px;
    height: 14px;
    background: #d8d8d8;
    flex-shrink: 0;
}

/* === Телефон === */
.aat-header-contacts__phone {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #2c3e50;
    line-height: 1.3;
    white-space: nowrap;
    transition: color .2s ease;
}
.aat-header-contacts__phone:hover {
    color: #E74C3C;
}
.aat-header-contacts__phone-icon {
    flex-shrink: 0;
    color: #E74C3C;
}

/* === ВЫПАДАЮЩИЙ КОНТЕЙНЕР (прозрачный, с «перемычкой» сверху) ===
   padding-top: 14px — это невидимый мост между адресом и карточкой:
   пока мышь идёт от адреса к карточке, hover не теряется (пункт 3) === */
.aat-header-contacts__dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 380px;
    max-width: 420px;
    padding-top: 14px; /* мост от адреса к карточке */
    background: transparent;
    border: none;
    box-shadow: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
    pointer-events: none;
    z-index: 999;
}

/* Карточка видна ТОЛЬКО при hover на адрес (или на саму карточку) */
.aat-header-contacts__anchor:hover .aat-header-contacts__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

/* === Видимая карточка === */
.aat-header-contacts__card {
    position: relative;
    padding: 24px;
    background: #ffffff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    cursor: default;
}

/* === Стрелка у карточки === */
.aat-header-contacts__card::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 16px;
    height: 16px;
    background: #ffffff;
    border-left: 1px solid #e8e8e8;
    border-top: 1px solid #e8e8e8;
}

/* === Заголовок карточки === */
.aat-header-contacts__branch-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
}
.aat-header-contacts__metro-icon {
    display: inline-flex;
    flex-shrink: 0;
}
.aat-header-contacts__metro-name {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
}

/* === Список информации в карточке === */
.aat-header-contacts__list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 0 16px 0;
    padding: 0;
    list-style: none;
}
.aat-header-contacts__info-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    line-height: 1.35;
    list-style: none;
}
.aat-header-contacts__info-item::before { display: none; }

.aat-header-contacts__label {
    color: #666;
    font-weight: 500;
    font-size: 13px;
}
.aat-header-contacts__info-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #2c3e50;
    font-weight: 500;
    font-size: 14px;
    transition: color .2s ease;
}
.aat-header-contacts__info-link:hover {
    color: #E74C3C;
}
.aat-header-contacts__info-icon {
    flex-shrink: 0;
    color: #E74C3C;
}

/* === Кнопка маршрута === */
.aat-header-contacts__route-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 20px;
    background: #004982;
    color: #fff !important;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
    white-space: nowrap;
}
.aat-header-contacts__route-btn:hover {
    background: #003865;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,73,130,0.3);
}

/* === Callback блок === */
.aat-header-contacts__callback {
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px dashed #d8d8d8;
}

.aat-header-contacts__callback-btn {
    display: inline-block;
    width: 100%;
    padding: 12px 20px;
    background: linear-gradient(135deg, #E74C3C, #C0392B);
    color: #fff !important;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background .2s ease, transform .2s ease;
    margin-bottom: 8px;
}
.aat-header-contacts__callback-btn:hover {
    background: linear-gradient(135deg, #C0392B, #922b21);
    transform: translateY(-1px);
}

.aat-header-contacts__callback-text {
    font-size: 12px;
    color: #777;
    line-height: 1.5;
    margin: 0 0 12px 0;
}

/* === Мессенджеры === */
.aat-header-contacts__messengers-title {
    font-size: 12px;
    color: #777;
    margin: 12px 0 8px 0;
}

.aat-header-contacts__messengers {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr auto !important;
    gap: 10px !important;
    align-items: center !important;
}

/* Кнопки мессенджеров: растягиваются на всю ячейку, одинаковая ширина */
.aat-header-contacts__msg-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 100px !important;
    padding: 12px 20px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    color: #fff !important;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.aat-header-contacts__msg-btn--max {
    --aat-max-gradient: linear-gradient(110deg, #8A2FE0 0%, #5A50E6 45%, #2FB9E8 100%);
    background: var(--aat-max-gradient);
    position: relative;
    overflow: hidden;
}
.aat-header-contacts__msg-btn--max:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(138, 47, 224, 0.4);
    filter: brightness(1.08);
}
.aat-header-contacts__max-icon { flex-shrink: 0; display: block; }

.aat-header-contacts__msg-btn--tg { background: linear-gradient(135deg, #0088CC, #229ED9); }
.aat-header-contacts__msg-btn--tg:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,136,204,0.35);
}

.aat-header-contacts__qr {
    width: 50px;
    height: 50px;
    border: 2px dashed #bbb;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: #999;
    background: #fff;
    cursor: pointer;
    overflow: hidden;
    transition: border-color .2s ease;
}
.aat-header-contacts__qr:hover { border-color: #888; }
.aat-header-contacts__qr img { width: 100%; height: 100%; object-fit: cover; }

/* === Правый филиал: карточка прижата к правому краю === */
.aat-header-contacts__item--right .aat-header-contacts__dropdown {
    left: auto;
    right: 0;
    transform: translateY(8px);
}
.aat-header-contacts__item--right .aat-header-contacts__anchor:hover .aat-header-contacts__dropdown {
    transform: translateY(0);
}
.aat-header-contacts__item--right .aat-header-contacts__card::before {
    left: auto;
    right: 24px;
    transform: rotate(45deg);
}

/* === Убираем горизонтальную прокрутку от выходящих за край дропдаунов === */
html, body {
    overflow-x: hidden !important;
}

/* === Изолируем список в карточке от стилей темы === */
.aat-header-contacts__list,
.aat-header-contacts__list li,
.aat-header-contacts__list .aat-header-contacts__info-item {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    list-style-type: none !important;
    background: transparent !important;
    border: none !important;
}

.aat-header-contacts__list li::before,
.aat-header-contacts__list li::after,
.aat-header-contacts__list .aat-header-contacts__info-item::before,
.aat-header-contacts__list .aat-header-contacts__info-item::after {
    display: none !important;
    content: none !important;
    background: none !important;
}

/* === Управляем расстоянием между строками внутри карточки === */
.aat-header-contacts__list {
    gap: 6px !important;      /* расстояние между строками (поменяйте под себя: 4px / 8px / 12px) */
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
}
/* === Больше воздуха между текстом про перезвон и «Или напишите нам» === */
.aat-header-contacts__callback-text {
    margin: 0 0 5px 0 !important;   /* было 12px — увеличьте/уменьшите по вкусу */
}

/* === Кнопка "Заказать звонок" в шапке === */
.aat-header-contacts__order-wrap {
    display: flex;
    align-items: center;
}

.aat-header-contacts__order-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 20px;
    background: linear-gradient(135deg, #E74C3C, #C0392B);
    color: #fff !important;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
    overflow: hidden;
}

.aat-header-contacts__order-btn:hover {
    background: linear-gradient(135deg, #C0392B, #922b21);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.35);
}

/* Скрываем встроенный скрипт Bitrix24 внутри кнопки (он подгружает форму) */
.aat-header-contacts__order-btn script {
    display: none;
}

/* === Адаптив: мобильные === */
@media (max-width: 768px) {
    .aat-header-contacts {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        padding: 8px 16px;
    }
    .aat-header-contacts__trigger {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 8px 12px;
    }
    .aat-header-contacts__sep { display: none; }
    .aat-header-contacts__address,
    .aat-header-contacts__phone { white-space: normal; }
    .aat-header-contacts__dropdown {
        left: 0;
        transform: translateX(0) translateY(8px);
        min-width: 280px;
        max-width: calc(100vw - 32px);
    }
    .aat-header-contacts__anchor:hover .aat-header-contacts__dropdown {
        transform: translateX(0) translateY(0);
    }
    .aat-header-contacts__card::before {
        left: 24px;
    }
    .aat-header-contacts__qr { display: none !important; }
    .aat-header-contacts__messengers { grid-template-columns: 1fr 1fr; }
}
/* Вернуть адрес и телефон в столбик */
.aat-header-contacts__trigger {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

/* Разделитель между ними больше не нужен */
.aat-header-contacts__sep {
    display: none;
}









/* ============================================
   МОБИЛЬНАЯ ШАПКА: АВТО-СМЕНА АДРЕСОВ
   Уникальный префикс: aat-header-m-
   ============================================ */

.aat-header-m {
    position: relative;
    display: none; /* скрываем на десктопе */
    width: 100%;
    padding: 6px 12px;
    background: #ffffff;
    border-bottom: 1px solid #e8e8e8;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    box-sizing: border-box;
    min-height: 42px;
}
.aat-header-m *, .aat-header-m *::before, .aat-header-m *::after { box-sizing: inherit; }
.aat-header-m a { color: inherit; text-decoration: none; }
.aat-header-m ul, .aat-header-m p { margin: 0; padding: 0; }

/* === Триггеры (адрес + телефон), накладываются друг на друга === */
.aat-header-m__item {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    padding: 6px 12px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s ease;
}
.aat-header-m__item.aat-header-m__item--active {
    opacity: 1;
    pointer-events: auto;
}

.aat-header-m__trigger {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    cursor: pointer;
}

/* === Адрес (меньше десктопного: 12px вместо 14px) === */
.aat-header-m__address {
    font-size: 12px;
    font-weight: 600;
    color: #004982;
    line-height: 1.3;
    transition: color .2s ease;
}
.aat-header-m__trigger:active .aat-header-m__address {
    color: #003865;
}

/* === Телефон (12px) === */
.aat-header-m__phone {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 500;
    color: #2c3e50;
    line-height: 1.3;
    transition: color .2s ease;
}
.aat-header-m__phone:active {
    color: #E74C3C;
}
.aat-header-m__phone-icon {
    flex-shrink: 0;
    color: #E74C3C;
}

/* === Индикаторы-точки === */
.aat-header-m__dots {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 4px;
    z-index: 2;
    pointer-events: none;
}
.aat-header-m__dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #d0d0d0;
    transition: background .3s ease, width .3s ease;
}
.aat-header-m__dot--active {
    background: #004982;
    width: 12px;
    border-radius: 2px;
}

/* === Оверлей === */
.aat-header-m__overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s;
    z-index: 9998;
}
.aat-header-m__overlay--active {
    opacity: 1;
    visibility: visible;
}

/* === Шторка-карточка (выезжает снизу) === */
.aat-header-m__sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 85vh;
    overflow-y: auto;
    background: #ffffff;
    border-radius: 16px 16px 0 0;
    padding: 20px 16px 24px;
    transform: translateY(100%);
    transition: transform .3s ease;
    z-index: 9999;
    box-shadow: 0 -4px 20px rgba(0,0,0,.1);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}
.aat-header-m__sheet--active {
    transform: translateY(0);
}

.aat-header-m__sheet-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: none;
    background: #f0f0f0;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    padding: 0;
}
.aat-header-m__sheet-close:active {
    background: #e0e0e0;
}

/* === Содержимое карточки === */
.aat-header-m__branch-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
}
.aat-header-m__metro-icon {
    display: inline-flex;
    flex-shrink: 0;
}
.aat-header-m__metro-name {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
}

.aat-header-m__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 14px 0;
    padding: 0;
    list-style: none;
}
.aat-header-m__list li,
.aat-header-m__list .aat-header-m__info-item {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    background: transparent !important;
    border: none !important;
}
.aat-header-m__list li::before,
.aat-header-m__list li::after,
.aat-header-m__list .aat-header-m__info-item::before,
.aat-header-m__list .aat-header-m__info-item::after {
    display: none !important;
    content: none !important;
}
.aat-header-m__info-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    line-height: 1.4;
}
.aat-header-m__label {
    color: #666;
    font-weight: 500;
    font-size: 12px;
}
.aat-header-m__info-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #2c3e50;
    font-weight: 500;
    font-size: 13px;
}
.aat-header-m__info-link:active {
    color: #E74C3C;
}

.aat-header-m__route-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 11px 16px;
    background: #004982;
    color: #fff !important;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    transition: background .2s ease;
}
.aat-header-m__route-btn:active {
    background: #003865;
}

.aat-header-m__callback {
    padding-top: 14px;
    margin-top: 14px;
    border-top: 1px dashed #d8d8d8;
}
.aat-header-m__callback-btn {
    display: inline-block;
    width: 100%;
    padding: 11px 16px;
    background: linear-gradient(135deg, #E74C3C, #C0392B);
    color: #fff !important;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    margin-bottom: 8px;
    transition: background .2s ease;
}
.aat-header-m__callback-btn:active {
    background: linear-gradient(135deg, #C0392B, #922b21);
}

.aat-header-m__messengers-title {
    font-size: 11px;
    color: #777;
    margin: 10px 0 6px 0;
}

.aat-header-m__messengers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.aat-header-m__msg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 12px;
    color: #fff !important;
    transition: transform .2s ease, filter .2s ease;
}
.aat-header-m__msg-btn--max {
    --aat-m-max-gradient: linear-gradient(110deg, #8A2FE0 0%, #5A50E6 45%, #2FB9E8 100%);
    background: var(--aat-m-max-gradient);
}
.aat-header-m__msg-btn--max:active { filter: brightness(.9); }

.aat-header-m__msg-btn--tg { background: linear-gradient(135deg, #0088CC, #229ED9); }
.aat-header-m__msg-btn--tg:active { filter: brightness(.9); }

/* Шеврон-подсказка справа от телефона в десктопе */
.aat-header-contacts__hint {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    margin-left: 10px;
    color: #004982;
    opacity: .55;
    animation: aat-d-hint-bounce 1.8s ease-in-out 4;
}
@keyframes aat-d-hint-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(4px); }
}

/* Защита обеих иконок мессенджеров от схлопывания */
.aat-header-contacts__msg-btn svg {
    flex-shrink: 0 !important;
    display: block !important;
    width: 18px !important;
    height: 18px !important;
}

/* ============================================
   ДЕСКТОПНОЕ ДЕМО: первая карточка при первом визите
   ============================================ */

/* Во время демо поднимаем блок над всем */
.aat-header-contacts--demo {
    z-index: 2000;
}

/* Пульсация на первом филиале */
.aat-header-contacts--demo .aat-header-contacts__item:first-child .aat-header-contacts__trigger {
    background: #ffffff;
    border-radius: 10px;
    animation: aat-d-demo-pulse 1.2s ease-in-out infinite;
    position: relative;
}
@keyframes aat-d-demo-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(0, 73, 130, .40); }
    50%      { box-shadow: 0 0 0 9px rgba(0, 73, 130, .10); }
}

/* Стрелка-указатель снизу тычет в первый филиал */
.aat-header-contacts--demo .aat-header-contacts__item:first-child .aat-header-contacts__trigger::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -14px;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-bottom: 10px solid #004982;
    border-top: none;
    animation: aat-d-demo-arrow 1s ease-in-out infinite;
    z-index: 3;
}
@keyframes aat-d-demo-arrow {
    0%, 100% { margin-bottom: 0;   opacity: 1; }
    50%      { margin-bottom: 6px; opacity: .55; }
}

/* Имитируем hover: показываем карточку первого филиала */
.aat-header-contacts--demo .aat-header-contacts__item:first-child .aat-header-contacts__dropdown {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) !important;
    pointer-events: auto !important;
}

/* Во время демо блокируем hover второго филиала,
   иначе он может случайно перебить первый при движении мыши */
.aat-header-contacts--demo .aat-header-contacts__item:not(:first-child) .aat-header-contacts__anchor {
    pointer-events: none;
}
.aat-header-contacts--demo .aat-header-contacts__item:not(:first-child) .aat-header-contacts__anchor .aat-header-contacts__dropdown {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* === Показываем мобильный блок только на мобильных === */
@media (max-width: 768px) {
    .aat-header-m {
        display: block;
    }
}










/* ============================================================
   БЛОК МЕНЮ ДЛЯ 1С-БИТРИКС
   ------------------------------------------------------------
   Все классы имеют уникальный префикс "bx-nav-menu",
   чтобы стили НИКОГДА не пересекались с:
     • родными стилями Битрикса (.menu, .item, .bx-...)
     • Bootstrap (.nav, .list-group, ...)
     • кастомными стилями шаблона сайта

   ВСЕ настраиваемые параметры собраны в :root с префиксом
   --bx-nav-menu-*. Меняйте значения — верстка подстроится.
   ============================================================ */

/* --- НАСТРОЙЩИК: меняйте значения здесь --- */
:root {
  /* ===== ОТСТУПЫ ВНУТРИ ВСЕГО БЛОКА МЕНЮ =====
     Двигают контент относительно краёв белой карточки */
  --bx-nav-menu-pad-top: 48px;       /* отступ сверху */
  --bx-nav-menu-pad-bottom: 48px;    /* отступ снизу */
  --bx-nav-menu-pad-left: 40px;      /* отступ слева */
  --bx-nav-menu-pad-right: 40px;     /* отступ справа */

  /* ===== РАССТОЯНИЯ МЕЖДУ КОЛОНКАМИ И СТРОКАМИ =====
     column-gap — между колонками (горизонтально)
     row-gap    — между пунктами внутри одной колонки (вертикально) */
  --bx-nav-menu-col-gap: 32px;
  --bx-nav-menu-row-gap: 6px;

  /* ===== ВНУТРЕННИЕ ОТСТУПЫ ОДНОГО ПУНКТА МЕНЮ =====
     «Воздух» вокруг иконки и текста внутри каждой ссылки */
  --bx-nav-menu-item-pad-top: 14px;
  --bx-nav-menu-item-pad-bottom: 14px;
  --bx-nav-menu-item-pad-left: 16px;
  --bx-nav-menu-item-pad-right: 16px;

  /* ===== РАССТОЯНИЕ ОТ ЗАГОЛОВКА ДО ПЕРВОГО РЯДА ===== */
  --bx-nav-menu-title-margin-bottom: 24px;

  /* ===== ИКОНКА-КАРТИНКА ===== */
  --bx-nav-menu-icon-size: 44px;     /* ширина и высота <img> */
  --bx-nav-menu-icon-gap: 14px;      /* расстояние от иконки до текста */

  /* ===== ТЕКСТ ===== */
  --bx-nav-menu-font-size: 15px;
  --bx-nav-menu-font-weight: 500;
  --bx-nav-menu-letter-spacing: 0.01em;

  /* ===== СКРУГЛЕНИЯ ===== */
  --bx-nav-menu-radius-container: 20px;  /* у всей карточки */
  --bx-nav-menu-radius-item: 12px;       /* у каждого пункта */

  /* ===== ЦВЕТА: СПОКОЙНОЕ СОСТОЯНИЕ ===== */
  --bx-nav-menu-bg-page: #f0f2f5;
  --bx-nav-menu-bg-container: #ffffff;
  --bx-nav-menu-color-text: #3a3f47;
  --bx-nav-menu-color-icon: #9ca3af;
  --bx-nav-menu-color-title: #9ca3af;

  /* ===== ЦВЕТА: ПРИ НАВЕДЕНИИ ===== */
  --bx-nav-menu-hover-bg: #f3f0ff;
  --bx-nav-menu-hover-text: #004982;
  --bx-nav-menu-hover-icon: #7c3aed;

  /* ===== ТЕНЬ КАРТОЧКИ ===== */
  --bx-nav-menu-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 8px 32px rgba(0, 0, 0, 0.06);

  /* ===== СКОРОСТЬ АНИМАЦИИ ===== */
  --bx-nav-menu-transition: 0.25s;
}

/* ============================================================
   КАРТОЧКА-КОНТЕЙНЕР
   ============================================================ */
.bx-nav-menu {
  background: var(--bx-nav-menu-bg-container);
  border-radius: var(--bx-nav-menu-radius-container);
  box-shadow: var(--bx-nav-menu-shadow);

  /* внутренние отступы карточки */
  padding:
    var(--bx-nav-menu-pad-top)
    var(--bx-nav-menu-pad-right)
    var(--bx-nav-menu-pad-bottom)
    var(--bx-nav-menu-pad-left);

  /* ограничиваем ширину, чтобы не растягивалась на весь экран */
  width: 100%;
  max-width: 980px;
  margin: 0 auto;

  /* сбрасываем возможные наследования от Битрикса */
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
}

/* защищаем дочерние элементы от наследования box-sizing Битрикса */
.bx-nav-menu *,
.bx-nav-menu *::before,
.bx-nav-menu *::after {
  box-sizing: border-box;
}

/* ============================================================
   ЗАГОЛОВОК БЛОКА
   ============================================================ */
.bx-nav-menu__title {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bx-nav-menu-color-title);

  /* отступ ПОД заголовком — расстояние до первой строки */
  margin: 0 0 var(--bx-nav-menu-title-margin-bottom) 0;
}

/* ============================================================
   СЕТКА: ТРИ КОЛОНКИ (CSS Grid)
   ============================================================ */
.bx-nav-menu__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* 3 равные колонки */

  /* зазоры между колонками и строками */
  column-gap: var(--bx-nav-menu-col-gap);
  row-gap: var(--bx-nav-menu-row-gap);
}

/* ============================================================
   ПУНКТ МЕНЮ (ссылка)
   ============================================================ */
.bx-nav-menu__item {
  display: flex;
  align-items: center;

  /* внутренние отступы пункта */
  padding:
    var(--bx-nav-menu-item-pad-top)
    var(--bx-nav-menu-item-pad-right)
    var(--bx-nav-menu-item-pad-bottom)
    var(--bx-nav-menu-item-pad-left);

  border-radius: var(--bx-nav-menu-radius-item);

  /* сбрасываем возможные стили Битрикса для <a> */
  text-decoration: none;
  color: var(--bx-nav-menu-color-text);
  font-size: var(--bx-nav-menu-font-size);
  font-weight: var(--bx-nav-menu-font-weight);
  letter-spacing: var(--bx-nav-menu-letter-spacing);
  line-height: 1.2;

  /* плавный переход всех меняющихся свойств */
  transition:
    background-color var(--bx-nav-menu-transition) ease,
    color var(--bx-nav-menu-transition) ease,
    transform var(--bx-nav-menu-transition) ease;
}

/* --- СОСТОЯНИЕ НАВЕДЕНИЯ --- */
.bx-nav-menu__item:hover {
  background-color: var(--bx-nav-menu-hover-bg);
  color: var(--bx-nav-menu-hover-text);
  transform: translateX(4px);   /* лёгкий сдвиг вправо */
}

/* --- СОСТОЯНИЕ НАЖАТИЯ (клик мышью) --- */
.bx-nav-menu__item:active {
  transform: translateX(4px) scale(0.98);
}

/* ============================================================
   ИКОНКА-КАРТИНКА <img>
   ============================================================ */
.bx-nav-menu__icon {
  flex-shrink: 0;                /* иконка не сжимается при узком тексте */
  width: var(--bx-nav-menu-icon-size);
  height: var(--bx-nav-menu-icon-size);

  /* расстояние от иконки до текста справа */
  margin-right: var(--bx-nav-menu-icon-gap);

  /* чтобы SVG внутри <img> перекрашивалось через currentColor */
  /* Если иконки цветные PNG/SVG — уберите filter ниже */
  filter: grayscale(100%) opacity(0.6); 

  /* плавная смена «цвета» иконки */
  /*  transition: filter var(--bx-nav-menu-transition) ease; */
}

/* --- ИКОНКА ПРИ НАВЕДЕНИИ НА ПУНКТ --- */
.bx-nav-menu__item:hover .bx-nav-menu__icon {
  filter: grayscale(0%) opacity(1)
          drop-shadow(0 0 0 var(--bx-nav-menu-hover-icon));
  /* Для цветных SVG без filter используйте этот вариант: */
  /* filter: brightness(0) saturate(100%) invert(25%) sepia(90%)
           saturate(1500%) hue-rotate(240deg) brightness(95%)
           contrast(95%); */
}

/* ============================================================
   ТЕКСТ ПУНКТА
   ============================================================ */
.bx-nav-menu__text {
  /* отдельный класс на случай, если захотите стилизовать
     текст независимо от иконки */
  white-space: nowrap;           /* не переносить на новую строку */
  overflow: hidden;
  text-overflow: ellipsis;       /* троеточие, если текст длинный */
}

/* ============================================================
   АДАПТИВ
   ============================================================ */
@media (max-width: 700px) {
  .bx-nav-menu__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 460px) {
  .bx-nav-menu__grid {
    grid-template-columns: 1fr;
  }
  .bx-nav-menu {
    --bx-nav-menu-pad-left: 20px;
    --bx-nav-menu-pad-right: 20px;
  }
}



/* ============================================================
   карточки товара первый вариант
   ============================================================ */


@media (min-width:601px) {
 .sections-list__inner.line-block > .line-block__item.level_2 {
        width: 260px;
    }
 .sections-list__inner.line-block > .line-block__item.level_3 {
        width: 100%;
    }
 .sections-list__item-link {max-width: 100%;}

}
body .level_2 .sections-list__item-image-wrapper--TRANSPARENT_PICTURES
 {
    --section-image-size: 80px;
}
    

.filter-panel.sort_header {
    display: none;
}

body .btn.btn-default {
    background-color: hsl(var(--theme-base-color-hue), var(--theme-base-color-saturation), calc(var(--theme-base-color-lightness) + var(--theme-lightness-hover-diff))) !important;
	color: #fff !important;
    border-color: hsl(var(--theme-base-color-hue), var(--theme-base-color-saturation), calc(var(--theme-base-color-lightness) + var(--theme-lightness-hover-diff))) !important;
}


body .btn.btn-default:hover {
    background-color: #004982 !important;
}

.partner-detail__text.lineclamp-4 {
    overflow: auto;
    -webkit-line-clamp: initial;
}

.partner-detail__spoiler {
    display: none;
}

.catalog-detail__main-part .price__new-val:before {
    content: "от";
}
a.link--active {
  background: none !important;
  background-color: transparent !important;
  color: #004982 !important;
}

span.link-wrapper:has(a.link--active):not(:has(a.sublink--child)) {
  background-color: #f0f0f0 !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
}


/* 1. Меняем поведение контейнера сетки */
.services-list .grid-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 !important; /* Убираем стандартные отступы между колонками */
}

/* 2. Растягиваем каждый блок (карточку) на 100% ширины */
.services-list .grid-list .grid-list__item {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    
    /* Убираем возможные боковые отступы, заданные темой */
    margin-left: 0 !important;
    margin-right: 0 !important;
    
    /* Добавляем отступ снизу, чтобы блоки не слипались */
    margin-bottom: 5px !important; 
}

/* 3. На случай, если тема использует CSS Grid вместо Flexbox */
.services-list .grid-list .grid-list__item {
    grid-column: 1 / -1 !important; 
}


/* 1. Родительский контейнер карточки — делаем горизонтальной строкой */
.services-list .grid-list__item .p-block.flexbox {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 15px !important;
}

/* 2. Внутренний контейнер с ценой и кнопкой — тоже в строку */
.services-list .grid-list__item .p-block.flexbox > .pt.flexbox {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 15px !important;
    margin-top: 0 !important;      /* сбрасываем mt--auto */
    padding-top: 0 !important;     /* сбрасываем pt--24 */
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
}

/* 3. Название услуги занимает всё свободное место слева */
.services-list .grid-list__item .blog-item__title {
    flex: 1 1 auto !important;
    min-width: 0 !important;       /* чтобы длинный текст корректно переносился/обрезался */
}

/* 4. Цена и блок с кнопкой не должны сжиматься */
.services-list .grid-list__item .price-flex,
.services-list .grid-list__item .order-info-btn {
    flex-shrink: 0 !important;
    white-space: nowrap !important; /* чтобы "Заказать услугу" не разрывалось */
}













/* ============================================
   МОБИЛЬНАЯ ШАПКА: АВТО-СМЕНА АДРЕСОВ
   Префикс aat-header-m- (мобильная версия)
   ============================================ */

.aat-header-m {
    position: relative;
    width: 100%;
    padding: 6px 12px;
    background: #ffffff;
    border-bottom: 1px solid #e8e8e8;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    box-sizing: border-box;
    min-height: 42px;
    display: none;
}
.aat-header-m *, .aat-header-m *::before, .aat-header-m *::after { box-sizing: inherit; }
.aat-header-m a { color: inherit; text-decoration: none; }
.aat-header-m ul, .aat-header-m p { margin: 0; padding: 0; }

.aat-header-m__item {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    padding: 6px 12px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s ease;
}
.aat-header-m__item.aat-header-m__item--active {
    opacity: 1;
    pointer-events: auto;
}

.aat-header-m__trigger {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    cursor: pointer;
}

.aat-header-m__address {
    font-size: 12px;
    font-weight: 600;
    color: #004982;
    line-height: 1.3;
}
.aat-header-m__trigger:active .aat-header-m__address {
    color: #003865;
}

.aat-header-m__phone {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 500;
    color: #2c3e50;
    line-height: 1.3;
}
.aat-header-m__phone:active {
    color: #E74C3C;
}
.aat-header-m__phone-icon {
    flex-shrink: 0;
    color: #E74C3C;
}

.aat-header-m__dots {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 4px;
    z-index: 2;
    pointer-events: none;
}
.aat-header-m__dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #d0d0d0;
    transition: background .3s ease, width .3s ease;
}
.aat-header-m__dot--active {
    background: #004982;
    width: 12px;
    border-radius: 2px;
}

.aat-header-m__overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s;
    z-index: 9998;
}
.aat-header-m__overlay--active {
    opacity: 1;
    visibility: visible;
}

.aat-header-m__sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 85vh;
    overflow-y: auto;
    background: #ffffff;
    border-radius: 16px 16px 0 0;
    padding: 20px 16px 24px;
    transform: translateY(100%);
    transition: transform .3s ease;
    z-index: 9999;
    box-shadow: 0 -4px 20px rgba(0,0,0,.1);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}
.aat-header-m__sheet--active {
    transform: translateY(0);
}

.aat-header-m__sheet-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: none;
    background: #f0f0f0;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    padding: 0;
}
.aat-header-m__sheet-close:active { background: #e0e0e0; }

.aat-header-m__branch-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
}
.aat-header-m__metro-icon { display: inline-flex; flex-shrink: 0; }
.aat-header-m__metro-name {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
}

.aat-header-m__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 14px 0;
    padding: 0;
    list-style: none;
}
.aat-header-m__list li,
.aat-header-m__list .aat-header-m__info-item {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    background: transparent !important;
    border: none !important;
}
.aat-header-m__list li::before,
.aat-header-m__list li::after,
.aat-header-m__list .aat-header-m__info-item::before,
.aat-header-m__list .aat-header-m__info-item::after {
    display: none !important;
    content: none !important;
}
.aat-header-m__info-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    line-height: 1.4;
}
.aat-header-m__label {
    color: #666;
    font-weight: 500;
    font-size: 12px;
}
.aat-header-m__info-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #2c3e50;
    font-weight: 500;
    font-size: 13px;
}
.aat-header-m__info-link:active { color: #E74C3C; }

.aat-header-m__route-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 11px 16px;
    background: #004982;
    color: #fff !important;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
}
.aat-header-m__route-btn:active { background: #003865; }

.aat-header-m__callback {
    padding-top: 14px;
    margin-top: 14px;
    border-top: 1px dashed #d8d8d8;
}
.aat-header-m__callback-btn {
    display: inline-block;
    width: 100%;
    padding: 11px 16px;
    background: linear-gradient(135deg, #E74C3C, #C0392B);
    color: #fff !important;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    margin-bottom: 8px;
}
.aat-header-m__callback-btn:active {
    background: linear-gradient(135deg, #C0392B, #922b21);
}

.aat-header-m__messengers-title {
    font-size: 11px;
    color: #777;
    margin: 10px 0 6px 0;
}

.aat-header-m__messengers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.aat-header-m__msg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 12px;
    color: #fff !important;
}
.aat-header-m__msg-btn--max {
    --aat-m-max-gradient: linear-gradient(110deg, #8A2FE0 0%, #5A50E6 45%, #2FB9E8 100%);
    background: var(--aat-m-max-gradient);
}
.aat-header-m__msg-btn--max:active { filter: brightness(.9); }
.aat-header-m__msg-btn--tg { background: linear-gradient(135deg, #0088CC, #229ED9); }
.aat-header-m__msg-btn--tg:active { filter: brightness(.9); }

/* Показ только на мобильных (с !important чтобы перебить Aspro) */
@media (max-width: 991px) {
    .aat-header-m {
        display: block !important;
    }
}