/* ========================================================= */
/* --- ГЛОБАЛЬНАЯ ЗАМЕНА СИНЕГО ЦВЕТА  НА ЗЕЛЕНЫЙ --- */
/* ========================================================= */
:root {
    --cassiopeia-color-primary: #8db48e !important; 
    --cassiopeia-color-hover: #79a17a !important;  

    
    --cassiopeia-font-weight-headings: 500 !important;
}


/* ========================================================= */
/* --- НАСТРОЙКА ТЕКСТА  --- */
/* ========================================================= */
body, p, li {
    font-family: sans-serif;
    font-size: 1rem;           
    font-weight: 400 ;
    line-height: 25.5px;      
}


p {
    margin-bottom: 16px;
    margin-top: 0;
}

/* ========================================================= */
/* --- НАСТРОЙКА ЗАГОЛОВКОВ --- */
/* ========================================================= */
h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6, 
.page-header h1, 
.contentheading, 
.article-title {
    font-family: 'Inter', sans-serif;
    
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    color: #252525; 
}


h1 {
    color: #252525;             /* Точный цвет rgb(37, 37, 37) */
    text-align: center;
    
}


.top5-bani {
    background-color: #f9f9f9;
    border-radius: 8px;
    border: 1px solid #ddd;
    max-width: 400px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.top5-bani .card-body {
    padding: 20px;
}

.top5-bani h3 {
    color: #d35400;
    font-size: 18px;
}

.top5-bani a:hover {
    color: #d35400;
}

.top5-note {
    font-size: 14px;
}

/* Заголовок таблицы */
.top5-header {
    display: grid;
    grid-template-columns: 30px 70px auto;
    font-weight: bold;
    background: #eee;
    padding: 8px 0;
    text-align: left;
    border-bottom: 2px solid #ddd;
}

.top5-header span {
    padding-left: 10px;
}

/* Список бань */
.top5-item {
    display: grid;
    grid-template-columns: 30px 70px auto;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    border-bottom: 1px solid #eee;
}

.top5-item:last-child {
    border-bottom: none;
}

.top5-number {
    font-size: 18px;
}

.top5-percentage {
    font-size: 14px;
    color: #666;
    text-align: left;
}

.top5-name {
    font-weight: bold;
    color: #4d724d;
    text-decoration: none;
    justify-self: start;
}

.top5-name:hover {
    color: #d35400;
}


#sp-top-bar {
    background-color: #8db48e;
    background-image: url(/images/purty-wood.png);
    background-blend-mode: overlay;
    background-repeat: repeat;
	background-size: auto; 
	padding: 10px 0;
  	color: #4d724d;
}

.sp-contact-info {
    font-size: 20px;
}

.sp-megamenu-parent>li.active>a, .sp-megamenu-parent>li.active:hover>a {
    border-top: 5px solid #4d724d;
  	color: #4d724d;
}

#sp-footer,#sp-bottom {
    background: #4d724d;
    color: #c5c5c5;
}

#sp-header {
    background: #8db48e
}

#sp-top-bar a {
    color: #4d724d
}

.l_bread a {
    color: #c6c6c6;
}

.offcanvas-menu .sp-contact-time {
    color: #252525;
    opacity: 0.7;
}


/* Убирает размытие при открытии бокового меню */
.offcanvas-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#mxcpr {
    display: none !important;
}


#sp-main-body {
    padding: 30px 0;
}





/* ===============================
   ТАЙМЛАЙН 
   =============================== */
.custom-timeline {
    /* Меняйте цвет один раз здесь */
    --tm-color: #8db48e; 
}

/* Вертикальная ось (Десктоп) */
.timeline-vline {
    position: absolute;
    top: 15px; bottom: 15px; 
    width: 2px;
    background-color: var(--tm-color);
    z-index: 0;
    left: 50%;
    transform: translateX(-50%);
}

/* ЗАЩИТА КРУЖКА ОТ ИСКАЖЕНИЙ ФЛЕКСБОКСОМ */
.tm-node {
    position: absolute;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
    background-color: var(--tm-color) !important;
    border-radius: 50% !important;
    z-index: 2;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* Карточки */
.tm-card {
    max-width: 420px; 
    width: 100%;
    overflow: visible !important;
}

/* Белые выноски-стрелочки к карточкам (Десктоп) */
.tm-card-left::after, .tm-card-right::after {
    content: ''; position: absolute; top: 50%; transform: translateY(-50%);
    background: transparent !important; border-style: solid; z-index: 10;
    width: 0 !important; height: 0 !important;
}
.tm-card-left::after {
    right: -10px; border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent #fff;
    filter: drop-shadow(3px 0px 2px rgba(0,0,0,0.05));
}
.tm-card-right::after {
    left: -10px; border-width: 10px 10px 10px 0;
    border-color: transparent #fff transparent transparent;
    filter: drop-shadow(-3px 0px 2px rgba(0,0,0,0.05));
}

/* --- ДЕСКТОПНАЯ ВЕРСИЯ (min-width: 768px) --- */
@media (min-width: 768px) {
    /* Центрируем кружок точно по середине строки */
    .tm-node {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) !important;
    }

    /* Отступы колонок (расстояние от центральной оси) */
    .tm-col-left { padding-right: 40px !important; padding-left: 15px !important; }
    .tm-col-right { padding-left: 40px !important; padding-right: 15px !important; }

    /* Линии к датам (выходят от края кружка до паддинга колонки) */
    .tm-line-to-right {
        position: absolute;
        top: 50%;
        left: calc(50% + 8px); 
        width: 32px; 
        height: 2px;
        background-color: var(--tm-color);
        transform: translateY(-50%);
        z-index: 1;
    }

    .tm-line-to-left {
        position: absolute;
        top: 50%;
        right: calc(50% + 8px); 
        width: 32px; 
        height: 2px;
        background-color: var(--tm-color);
        transform: translateY(-50%);
        z-index: 1;
    }
}

/* --- МОБИЛЬНАЯ ВЕРСИЯ (max-width: 767.98px) --- */
@media (max-width: 767.98px) {
    /* Прижимаем ось влево */
    .timeline-vline { 
        left: 20px; 
        transform: translateX(-50%);
    }
    
    /* Ставим кружок на ось на уровне текста */
    .tm-node {
        top: 20px; 
        left: 20px;
        transform: translateX(-50%) !important;
    }
    
    /* Смещаем контент вправо от линии */
    .tm-col-left, .tm-col-right {
        padding-left: 50px !important;
        padding-right: 15px !important;
    }

    /* Линия всегда отходит ВПРАВО (к тексту) */
    .tm-line-mobile {
        position: absolute;
        top: 27px; 
        left: 28px; 
        width: 22px; 
        height: 2px;
        background-color: var(--tm-color);
        z-index: 1;
    }

    /* Прячем десктопные элементы */
    .tm-card-left::after, .tm-card-right::after { display: none !important; }
}









.btn-custom-green {
  background-color: #8db48e;
  border-color: #8db48e;
  color: #fff;
}
.btn-custom-green:hover {
  background-color: #7aa17b; 
  border-color: #7aa17b;
  color: #fff;
}





/* ===============================
   КРАЙ (ВНЕШНИЙ МОДУЛЬ)
   =============================== */
.torn-edge-module {
    width: 100%;
    
    margin-top: -1px; 
    height: 65px;
    line-height: 0;
    overflow: hidden;
}

.torn-edge-module svg {
    display: block;
    width: 100%;
    height: 100%;
}


@media (max-width: 767.98px) {
    .torn-edge-module {
        height: 40px;
    }
}







/* ____________________________________________________ */

.l_bread .breadcrumb {
background-color: #fff;

}

.icon-location:before {
    content: "";
    padding-right: 10px;
    color: #6c757d;
}

.sp-megamenu-parent>li>a, .sp-megamenu-parent>li>span {
 
    line-height: 48px; }


#sp-main-body {
    padding: 100px 15px;
}


.sp-megamenu-parent>li>a, .sp-megamenu-parent>li>span {
    text-transform: uppercase;
}

.sp-megamenu-parent>li>a, .sp-megamenu-parent>li>span {
    color: #fff;
}


.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
box-shadow: 1px 2px 3px 1px #ccc;

}

.logo-image {
    margin-top: -120px;
}


#sp-menu>.sp-column {
    height: 100%;
    background: #8db48e;
}


.moy_fot a {margin:4px;}.moy_fot img {border-radius: 10px;}




/* Только внутри контейнера списка товаров */
.jshop_list_product .old_price:before,
.product-list .old_price:before {
    content: "Цена без акции: ";
    color: #666;
    font-size: 14px;
    margin-right: 5px;
}

.jshop_list_product .old_price span,
.product-list .old_price span {
    text-decoration: line-through;
    color: #999;
    font-size: 16px;
}

.jshop_list_product .old_price + .jshop_price,
.product-list .old_price + .jshop_price {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.jshop_list_product .old_price + .jshop_price span,
.product-list .old_price + .jshop_price span {
    color: #ff0000;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 5px; /* Отступ перед бейджем */
}

.jshop_list_product .old_price + .jshop_price:after,
.product-list .old_price + .jshop_price:after {
    content: "ЦЕНА В ОКТЯБРЕ!";
    background: #ff0000;
    color: white;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 4px;
    display: inline-block;
    text-align: center;
    width: fit-content;
}



.old_price:not([style*="display: none"]):not([style*="display:none"]) + .prod_price {
    position: relative;
    padding: 25px 20px 20px;
    margin: 20px 0;
    border: 2px solid #ff6b6b;
    border-radius: 15px;
    background: white;
}

.old_price:not([style*="display: none"]):not([style*="display:none"]) + .prod_price:before {
    content: "🔥 Акционная цена";
    background: linear-gradient(45deg, #ff6b6b, #ff4444);
    color: white;
    font-weight: 700;
    font-size: 14px;
    padding: 6px 12px;
    border-radius: 20px;
    position: absolute;
    top: -10px;
    left: 20px;
    display: block;
}

.old_price:not([style*="display: none"]):not([style*="display:none"]) + .prod_price:after {
    content: "Действует до конца октября";
    color: #666;
    font-size: 15px;
    font-style: italic;
    display: block;
    margin-top: 5px;
}

.old_price:not([style*="display: none"]):not([style*="display:none"]) + .prod_price span {
    color: #ff4444;
    font-size: 32px;
    font-weight: 800;
    background: linear-gradient(45deg, #ff4444, #ff6b6b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* ________________________________________________________ */







/* Шапка. Фоновая полоса во всю ширину экрана */
.container-topbar {
  background-color: #8db48e;
  background-image: url('/images/purty-wood.png');
  background-blend-mode: overlay;
  background-repeat: repeat;
  background-size: auto;
  padding: 15px 0;
  color: #385538;
}

/* Стили текста и ссылок контактов */
.my-top-contacts {
  font-size: 1.2rem;
}

.my-top-contacts a {
  color: #385538;
  text-decoration: none;
}

.my-top-contacts a:hover {
  color: #1a2c1a;
  text-decoration: underline;
}

.my-top-contacts .contact-item {
  display: inline-block;
  white-space: nowrap;
}

.my-top-contacts .address-line {
  font-size: 0.95rem;
  opacity: 0.9;
}


.modal-header {
    padding: var(--modal-header-padding);
}

@media (max-width: 991px) {
    .my-top-contacts {
        text-align: center !important;
    }
}

/* --- 1. (убираем общую рамку и фон) --- */
.nav.nav-tabs {
    background-color: transparent !important;
    border: none !important; 
    border-bottom: 1px solid #dee2e6 !important;
    box-shadow: none !important;
}

/* --- 2. дефолтные стили для кнопок (вкладок) --- */
.nav.nav-tabs .nav-link {
    background-color: transparent !important;
    border: 1px solid transparent !important; 
    border-top-left-radius: 0.25rem !important;
    border-top-right-radius: 0.25rem !important;
    color: #0d6efd !important;
    box-shadow: none !important;
    margin-bottom: -1px !important; 
}

/* --- 3. Стили для АКТИВНОЙ вкладки --- */
.nav.nav-tabs .nav-item .nav-link.active {
    color: #495057 !important;
    background-color: #fff !important;
    border-color: #dee2e6 #dee2e6 #fff !important; /* Рамка сверху, по бокам, а снизу белая */
}


.nav.nav-tabs .nav-link.active:after {
    display: none !important;
}

/* --- 4. Наведение на неактивные вкладки --- */
.nav.nav-tabs .nav-link:hover:not(.active) {
    border-color: #e9ecef #e9ecef #dee2e6 !important;
}

/* --- 5. Убираем рамку, фон и тень у контейнера с фотографиями --- */
.nav-tabs + .tab-content,
.tab-content {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 20px 0 0 0 !important; 
}








/* ========================================================= */
/* --- 1. ЛОГОТИП И КОНТАКТЫ (ВЕРХНИЙ БЛОК) --- */
/* ========================================================= */
#mod-custom158 .row {
    display: flex !important;
    width: 100% !important;
}


@media (min-width: 992px) {
    .my-custom-logo {
        position: absolute; 
        top: -10px; 
        left: 15px; 
        height: 160px;
        max-width: none !important;
    }
}

/* Настройки на телефонах */
@media (max-width: 991px) {
    .my-custom-logo {
        height: 110px;
        margin-bottom: 15px;
    }
    .my-top-contacts {
        text-align: center !important;
    }
}

/* ========================================================= */
/* --- 2. УЗКОЕ ЗЕЛЕНОЕ МЕНЮ (ШАПКА 55px ВО ВЕСЬ ЭКРАН) --- */
/* ========================================================= */
.header.container-header {
    
    background-image: none !important;
    background-color: #8db48e !important; 
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1) !important;
    animation: spFadeIn 0.5s ease-in-out;
    position: relative !important;
    z-index: 99 !important;
    
    padding: 0 !important;
    min-height: 0 !important;
    border: none !important;
}

/* Создаем саму анимацию spFadeIn */
@keyframes spFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@media (min-width: 992px) {
    .grid-child.container-nav {
        
        width: 100%;
        height: 55px !important;
        display: flex;
        justify-content: flex-end !important;
        align-items: center !important;
        padding: 0 !important; 
        background: transparent !important; /* Убираем фон у внутреннего блока */
    }
    
    .header.container-header nav {
        margin: 0 !important; 
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
    }
    
    .header.container-header .mod-menu {
        display: flex;
        justify-content: flex-end !important;
        align-items: center !important;
        width: 100%;
        gap: 0 !important; 
        margin: 0;
        padding: 0;
    }

    .header.container-header .mod-menu .metismenu-item {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .header.container-header .mod-menu > li > a,
    .header.container-header .mod-menu > li > button {
        height: 55px !important; 
        line-height: 55px !important; 
        padding: 0 15px !important; 
        font-size: 17px !important; 
        color: #ffffff !important;
        text-transform: uppercase !important;
        font-weight: 500 !important;
        background: transparent !important;
        border: none !important; 
    }
}

/* ========================================================= */
/* --- 3. ПОЛОСКА АКТИВНОГО ПУНКТА МЕНЮ (СВЕРХУ) --- */
/* ========================================================= */
@media (min-width: 992px) {
    .container-header .metismenu > li > a:after, 
    .container-header .metismenu > li > button:before {
        bottom: auto !important; 
        top: 0 !important;       
        height: 5px !important;  
        background-color: #4a6345 !important; 
        opacity: .7 !important;   
    }
    .container-header .metismenu > li:not(.active):not(:hover) > a:after {
        display: none !important;
    }

   /* Цвет текста для активной страницы (у которой класс .current.active) */
    .header.container-header .mod-menu > li.current.active > a,
    .header.container-header .mod-menu > li.current.active > button {
        color: #4d724d !important; 
    }

    /* Цвет текста при наведении мышки на любой пункт меню */
    .header.container-header .mod-menu > li > a:hover,
    .header.container-header .mod-menu > li > button:hover {
        color:  #4d724d !important; /* цвет при наведении */
    }
}


/* ========================================================= */
/* --- ТЕНЬ ОТ ВЕРХНЕЙ ПАНЕЛИ (НАВИСАЕТ НАД МЕНЮ) --- */
/* ========================================================= */
.container-topbar, 
.container-below-top {
    position: relative;
    z-index: 100 !important; /* Ставим слой выше зеленого меню */
    
    /* Тень падает только вниз (смещение 4px по вертикали) */
    box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.03) !important; 
     
}



/* ========================================================= */
/* --- УБИРАЕМ ПУНКТИРНУЮ ОБВОДКУ ПРИ КЛИКЕ НА МЕНЮ --- */
/* ========================================================= */
.header.container-header .mod-menu > li > a:focus,
.header.container-header .mod-menu > li > a:active,
.header.container-header .mod-menu > li > button:focus,
.header.container-header .mod-menu > li > button:active {
    outline: none !important; /* Убиваем системный пунктир браузера */
    box-shadow: none !important; /* Убиваем свечение, если его добавляет Bootstrap */
}




/* ========================================================= */
/* --- ВЫПАДАЮЩЕЕ МЕНЮ (HOVER) И СТИЛИЗАЦИЯ ПОДПУНКТОВ --- */
/* ========================================================= */
@media (min-width: 992px) {
    /* 1. Принудительно открываем меню при наведении мыши (обходим клик скрипта) */
    .header.container-header .mod-menu .metismenu-item.parent:hover > ul.mm-collapse {
        display: block !important;
        height: auto !important;
        visibility: visible !important;
    }

    /* 2. Контейнер выпадающего списка */
    .header.container-header .mod-menu ul.mm-collapse {
        position: absolute;
        top: 100%; /* Выпадает ровно под родительским пунктом (сразу под 55px) */
        left: 0;
        background-color: #8db48e !important; /* Родной цвет шапки */
        min-width: 250px; /* Достаточная ширина, чтобы "Одноэтажные дома" влезли в 1 строку */
        padding: 10px 0 !important; /* Отступы сверху и снизу списка */
        margin: 0 !important;
        border: none !important;
        box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15) !important; /* Объемная тень вниз */
        z-index: 1000;
    }

    /* Убиваем встроенные отступы для пунктов внутри списка */
    .header.container-header .mod-menu ul.mm-collapse li.level-2 {
        display: block;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 3. Стили самих ссылок подпунктов */
    .header.container-header .mod-menu ul.mm-collapse li.level-2 > a {
        display: block;
        padding: 10px 20px !important; /* Просторные паддинги для удобного клика */
        color: #ffffff !important;
        font-size: 16px !important; /* Чуть меньше главного меню для иерархии */
        line-height: 1.4 !important;
        font-weight: 500 !important;
        text-transform: none !important; /* Обычные буквы читаются лучше в списке */
        white-space: nowrap; /* Запрещаем перенос строк */
        background: transparent !important;
        height: auto !important; /* Отменяем жесткие 55px от главного меню */
        border: none !important;
        transition: background 0.2s ease;
    }

    /* 4. Реакция при наведении мыши на сам подпункт */
    .header.container-header .mod-menu ul.mm-collapse li.level-2 > a:hover {
        background-color: #79a17a !important; /* Делаем фон чуть темнее основного зеленого */
        color: #4d724d !important;
        text-decoration: none !important;
    }
}




/* ========================================================= */
/* --- НАСТРОЙКА ФУТЕРА --- */
/* ========================================================= */
footer.container-footer {
    background-image: none !important; /* Убиваем стандартный синий градиент */
    background-color: #4d724d; /* Принудительно берем переменную зеленого */
    color: #e0e0e0 !important; /* Мягкий серый цвет для текста */
    padding: 30px 0 !important;
    margin-top: 50px;
}

/* Внутреннее выравнивание футера */
footer.container-footer .grid-child {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: .5rem .5em;
}

/* Серый цвет для параграфов */
footer.container-footer .mod-custom p {
    color: #e0e0e0 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

/* Ссылки в футере */
footer.container-footer a {
    color: #f2f2f2 !important;
    text-decoration: underline;
}

footer.container-footer a:hover {
    color: #ffffff !important;
}




/* ========================================================= */
/* --- 1. ГЛОБАЛЬНЫЕ ПЕРЕМЕННЫЕ (ЦВЕТА И ШРИФТЫ) --- */
/* ========================================================= */
:root {
    --cassiopeia-color-primary: #8db48e !important; /* Основной зеленый */
    --cassiopeia-color-hover: #79a17a !important;   /* Зеленый для наведения */
    --cassiopeia-font-weight-headings: 500 !important; /* Толщина всех заголовков */
}

/* ========================================================= */
/* --- 2. ГЛАВНОЕ МЕНЮ НА ДЕСКТОПЕ (КОМПЬЮТЕРЫ) --- */
/* ========================================================= */
@media (min-width: 992px) {
    /* --- Убираем системную пунктирную обводку при клике --- */
    .header.container-header .mod-menu > li > a:focus,
    .header.container-header .mod-menu > li > a:active,
    .header.container-header .mod-menu > li > button:focus,
    .header.container-header .mod-menu > li > button:active {
        outline: none !important;
        box-shadow: none !important;
    }

    /* --- Полоска активного пункта меню (сверху) --- */
    .container-header .metismenu > li > a:after, 
    .container-header .metismenu > li > button:before {
        bottom: auto !important; 
        top: 0 !important;       
        height: 5px !important;  
        background-color: #4a6345 !important; 
        opacity: .7 !important;   
    }
    
    .container-header .metismenu > li:not(.active):not(:hover) > a:after {
        display: none !important;
    }

    /* --- Цвет текста главного меню (активный пункт и наведение) --- */
    .header.container-header .mod-menu > li.current.active > a,
    .header.container-header .mod-menu > li.current.active > button {
        color: #252525 !important; 
    }

    .header.container-header .mod-menu > li:hover > a,
    .header.container-header .mod-menu > li:hover > button {
        color: #252525 !important; 
    }

    /* --- Выпадающее меню (Hover эффект) --- */
    .header.container-header .mod-menu .metismenu-item.parent:hover > ul.mm-collapse {
        display: block !important;
        height: auto !important;
        visibility: visible !important;
    }

    /* Контейнер выпадающего списка */
    .header.container-header .mod-menu ul.mm-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        background-color: var(--cassiopeia-color-primary) !important;
        min-width: 250px;
        padding: 10px 0 !important;
        margin: 0 !important;
        border: none !important;
        box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15) !important;
        z-index: 1000;
    }

    /* Отступы для пунктов внутри списка */
    .header.container-header .mod-menu ul.mm-collapse li.level-2 {
        display: block;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Стили ссылок подпунктов */
    .header.container-header .mod-menu ul.mm-collapse li.level-2 > a {
        display: block;
        padding: 10px 20px !important;
        color: #ffffff !important;
        font-size: 16px !important;
        line-height: 1.4 !important;
        font-weight: 500 !important;
        text-transform: none !important;
        white-space: nowrap;
        background: transparent !important;
        height: auto !important;
        border: none !important;
        transition: background 0.2s ease;
    }

    /* Наведение на подпункт */
    .header.container-header .mod-menu ul.mm-collapse li.level-2 > a:hover {
        background-color: var(--cassiopeia-color-hover) !important;
        color: #ffffff !important;
        text-decoration: none !important;
    }
    
    /* --- прячем мобильную кнопку и панель Offcanvas на ПК --- */
    .custom-mobile-toggle,
    #mobileMenuOffcanvas {
        display: none !important;
    }
}

/* ========================================================= */
/* --- 3. МОБИЛЬНОЕ МЕНЮ (BOOTSTRAP OFFCANVAS) --- */
/* ========================================================= */
@media (max-width: 991px) {
    /* скрываем только десктопное меню по его ID */
    #desktop-main-menu {
        display: none !important;
    }

    /* Располагаем наш новый гамбургер и логотип */
    .header.container-header .grid-child.container-search {
        display: flex !important;
        justify-content: flex-end; 
        align-items: center;
        width: 100%;
        padding: 10px 15px !important;
    }
    
    /* Рисуем мини-логотип слева */
    .header.container-header .grid-child.container-search::before {
        content: '';
        display: block;
        width: 150px; 
        height: 50px; 
        background-image: url('/images/image_2a3fba.png'); 
        background-size: contain;
        background-repeat: no-repeat;
        background-position: left center;
        margin-right: auto;
    }

    /* Стилизация ссылок внутри выехавшей боковой панели */
    #mobileMenuOffcanvas .metismenu-item {
        margin: 0 !important;
        padding: 8px 0 !important;
    }

    #mobileMenuOffcanvas .metismenu-item > a {
        color: #252525 !important; 
        font-size: 16px !important;
        font-weight: 500 !important;
        display: block;
        text-transform: none !important;
        text-decoration: none !important;
    }

    #mobileMenuOffcanvas .metismenu-item > a:hover {
        color: var(--cassiopeia-color-primary) !important;
    }

   /* --- ЦВЕТ ССЫЛОК И РАЗДЕЛИТЕЛЕЙ ВНУТРИ ВЫЕЗЖАЮЩЕЙ ПАНЕЛИ --- */
    #mobileMenuOffcanvas .offcanvas-body a,
    #mobileMenuOffcanvas .offcanvas-body .mod-menu li a,
    #mobileMenuOffcanvas .offcanvas-body .mod-list li a,
    #mobileMenuOffcanvas .offcanvas-body .nav-item.divider,
    #mobileMenuOffcanvas .offcanvas-body .nav-item.divider > span {
        color: #252525 !important; /* Темно-серый текст */
        font-size: 16px !important;
        font-weight: 500 !important;
        text-decoration: none !important;
        display: block;
      
    }



    /* Наведение (оставляем только для ссылок, разделитель не должен реагировать на мышь) */
    #mobileMenuOffcanvas .offcanvas-body a:hover,
    #mobileMenuOffcanvas .offcanvas-body .mod-menu li a:hover {
        color: var(--cassiopeia-color-primary) !important; 
    }
}


/* ========================================================= */
/* --- ФИКС НАЛОЖЕНИЯ (ПРОТИВ КАРТ И CONVERTFORMS) --- */
/* ========================================================= */

/* 1. Вытаскиваем всю шапку сайта на самый верхний слой */
.header.container-header {
    position: relative !important;
    z-index: 999 !important;
}

/* 2. Поднимаем темный фон (backdrop) выше любого контента на странице */
.offcanvas-backdrop {
    z-index: 1000 !important;
}

/* 3. Поднимаем саму выезжающую белую панель меню на абсолютный максимум */
.offcanvas.offcanvas-end {
    z-index: 2000 !important;
}




/* ========================================================= */
/* --- ГЛОБАЛЬНАЯ ЗАЩИТА ОТ ГОРИЗОНТАЛЬНОГО СКРОЛЛА --- */
/* ========================================================= */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}


.breadcrumb {
    background-color: #fff;
    margin-bottom: 15px;
}


.breadcrumb a {
    color: var(--gray-600);
}


/* Убираем рамку у карточек только в позиции main-bottom */
div.main-bottom.card {
    --card-border-width: 0;
}