/* assets/mega-menu.css */

/* Общие стили */
.mk13-menu-wrapper {
    position: relative;
    z-index: 100;
    display: inline-block;
    width: auto;
}

.mk13-main-menu {
    position: relative;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 30px;
}

.mk13-menu-item {
    color: #ffffff;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 6px;
    transition: all 0.3s ease;
    font-weight: 500;
    position: relative;
}

/* Пункт меню не переносится и не сжимается.
 *
 * По умолчанию flex-элемент сжимается ниже ширины содержимого, а текст в нём
 * ломается на две строки. В шапке из-за этого разъезжались высоты пунктов
 * (44 px у коротких против 68 px у длинных) и строка выглядела рваной —
 * даже «О нас» переносилось на две строки. Держим одну строку и запрещаем
 * сжатие; горизонтальный padding подрезан с 15 до 10 px, это возвращает
 * 80 px на восьми пунктах. */
@media (min-width: 1025px) {
    .mk13-menu-item {
        white-space: nowrap;
        flex-shrink: 0;
        padding-left: 10px;
        padding-right: 10px;
    }
}

.mk13-menu-item:hover {
    color: #a939f3;
    background: rgba(169, 57, 243, 0.1);
    transform: translateY(-2px);
}

/* ---- Выпадающий список у пункта с потомками ---- */

.mk13-menu-group {
    position: relative;
    display: flex;
    align-items: center;
}

.mk13-menu-parent {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.mk13-menu-caret {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    transition: transform 0.2s ease;
}

.mk13-menu-group.is-open .mk13-menu-caret,
.mk13-catalog-trigger.mega-menu-active .mk13-menu-caret {
    transform: rotate(180deg);
}

.mk13-submenu {
    position: absolute;
    /* Отступ от кнопки — как у панели каталога (calc(100% + 10px)).
       Вплотную к пункту список выглядел приклеенным. */
    top: calc(100% + 10px);
    left: 0;
    z-index: 999998;
    display: flex;
    flex-direction: column;
    min-width: 240px;
    padding: 8px;
    border-radius: 10px;
    background: #272a33;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

/* Мостик до выпадающего списка: без него курсор проваливается в зазор
 * между пунктом и панелью, и та закрывается на полпути. */
.mk13-menu-group::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    /* Должен перекрывать зазор до панели (10px) с запасом на подъём пункта. */
    height: 14px;
}

/* Раскрытие только по клику — как у «Каталога». Наведение даёт лишь
 * подсветку самого пункта, панель при этом не появляется. */
.mk13-menu-group:focus-within .mk13-submenu,
.mk13-menu-group.is-open .mk13-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Открытый пункт подсвечивается так же, как активный «Каталог».
 *
 * `!important` здесь обязателен. Elementor печатает для виджета правило
 * `.elementor-725 .elementor-element.elementor-element-da9b4c8
 * .mk13-menu-item:hover{color:#a939f3}` — пять классов, оно специфичнее
 * любого разумного селектора отсюда. Без !important подпись на наведении
 * становилась фиолетовой на фиолетовом фоне и пропадала. У «Каталога»
 * та же проблема решена этим же способом в .mega-menu-active. */
.mk13-menu-group.is-open .mk13-menu-parent,
.mk13-menu-group.is-open .mk13-menu-parent:hover,
.mk13-menu-group.is-open .mk13-menu-parent:focus {
    background: linear-gradient(135deg, #a939f3 0%, #8b2dd1 100%);
    color: #ffffff !important;
}

/* Подъём на наведении — как у «Каталога», в том числе когда список открыт.
 * Базовое .mk13-menu-item:hover уже даёт этот сдвиг, но правило открытого
 * состояния выше специфичнее, поэтому повторяем явно. */
.mk13-menu-parent:hover,
.mk13-menu-group.is-open .mk13-menu-parent:hover {
    transform: translateY(-2px);
}

.mk13-submenu .mk13-submenu-item {
    padding: 10px 12px;
    white-space: nowrap;
    transform: none;
}

.mk13-submenu .mk13-submenu-item:hover {
    transform: none;
}

/* Каталог триггер */
.mk13-catalog-trigger {
    background: transparent;
    color: #ffffff !important;
    padding: 10px 15px;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: pointer !important;
    user-select: none !important;
    display: inline-block;
}

.mk13-catalog-trigger:hover {
    color: #a939f3 !important;
    background: rgba(169, 57, 243, 0.1);
    transform: translateY(-2px);
}

/* Кнопка каталога в мега-меню */
.mk13-catalog-button {
    display: block;
    background: linear-gradient(135deg, #a939f3 0%, #8b2dd1 100%);
    color: #ffffff !important;
    text-align: center;
    padding: 14px 20px;
    margin: 0 16px 16px;
    border-radius: 8px;
    font-weight: 400;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(169, 57, 243, 0.3);
}

.mk13-catalog-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(169, 57, 243, 0.4);
}

/* Мега-меню для десктопа */
@media (min-width: 1025px) {
    .mk13-mega-menu-overlay {
        display: none;
        position: absolute;
        top: calc(100% + 10px);
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        max-width: none;
        background: transparent;
        z-index: 200;
    }

    .mk13-mega-menu-overlay.show {
        display: block;
    }
    
    /* Предотвращаем сдвиг контента при открытии меню */
    body.mk13-menu-open {
        width: 100%;
        position: relative;
        /* Удаляем padding-right, чтобы избежать смещения влево */
    }
    
    /* Фиксируем позицию шапки и навигации */
    body.mk13-menu-open header,
    body.mk13-menu-open .elementor-section-wrap,
    body.mk13-menu-open nav,
    body.mk13-menu-open .elementor-location-header,
    body.mk13-menu-open .elementor-sticky--active {
        /* Удаляем padding-right, чтобы избежать смещения влево */
    }

    /* Добавляем стиль для всего body, чтобы предотвратить дергание */
    body {
        overflow-y: scroll !important;
    }

    .mk13-mega-menu-container {
        width: 100%;
        max-width: 1300px;
        margin: 0 auto;
        display: flex;
        background: #272a33;
        border-radius: 16px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    }

    .mk13-mega-menu-left {
        width: 330px;
        min-width: 330px;
        background: rgba(0, 0, 0, 0.3);
        border-right: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 16px 0 0 16px;
        padding: 15px 0;
    }

    .mk13-mega-menu-right {
        flex: 1;
        background: rgba(255, 255, 255, 0.02);
        min-height: 400px;
        border-radius: 0 16px 16px 0;
        padding: 15px;
    }

    /* Убираем фоновое затемнение на десктопе */
    .mk13-mega-menu-backdrop {
        display: none !important;
    }

    /* Активное состояние кнопки каталога.
     *
     * Отступы и скругление намеренно оставлены как в обычном состоянии
     * (10px 15px / 6px). Раньше здесь стояло 12px 20px, кнопка при нажатии
     * подрастала на 10px по ширине и сдвигала вправо все соседние пункты. */
    .mk13-catalog-trigger.mega-menu-active {
        background: linear-gradient(135deg, #a939f3 0%, #8b2dd1 100%);
        color: #ffffff !important;
    }
}

/* Гамбургер меню */
.mk13-hamburger {
    /* Показывается только на узких экранах — на десктопе меню обычное.
       Без базового display div рисовался блоком и три полоски были видны. */
    display: none;
    flex-direction: column;
    cursor: pointer;
    padding: 8px;
    gap: 4px;
    transition: all 0.3s ease;
    order: -1;
}

.mk13-hamburger span {
    width: 25px;
    height: 3px;
    background: #ffffff;
    border-radius: 2px;
    transition: all 0.3s ease;
    display: block;
}

.mk13-hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.mk13-hamburger.active span:nth-child(2) {
    opacity: 0;
}

.mk13-hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Мобильные стили */
@media (max-width: 1024px) {
    /* Бургер выравнивается по центру шапки наравне с корзиной.
     *
     * Обёртка меню — inline-block, и бургер со своими отступами оказывался
     * выше окружающего бокса: его центр стоял на 3px выше центра корзины.
     * Делаем обёртку флексом с центрированием, тогда высота совпадает. */
    .mk13-menu-wrapper {
        display: flex !important;
        align-items: center;
    }

    .mk13-hamburger {
        padding-top: 0;
        padding-bottom: 0;
    }

    /* Полностью скрываем десктопное меню на мобильных */
    .mk13-mega-menu-overlay,
    .mk13-mega-menu-container,
    .mk13-mega-menu-left,
    .mk13-mega-menu-right,
    .mk13-mega-submenu {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    /* Скрываем основное навигационное меню на мобильных */
    .mk13-main-menu {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        left: -9999px !important;
    }
    
    /* На мобильных в шапке только бургер (каталог — через меню) */
    .mk13-catalog-trigger {
        display: none !important;
    }

    /* Elementor mobile header: лого | бургер | корзина в одну строку */
    .elementor-location-header .elementor-element-261ee84 {
        --padding-left: 12px !important;
        --padding-right: 12px !important;
        --padding-top: 10px !important;
        --padding-bottom: 10px !important;
        margin-bottom: 0 !important;
        overflow: visible !important;
    }

    .elementor-location-header .elementor-element-261ee84 > .e-con-inner {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .elementor-location-header .elementor-element-15cb827,
    .elementor-location-header .elementor-element-15cb827.e-con {
        width: auto !important;
        max-width: 38% !important;
        flex: 0 1 auto !important;
        order: 1 !important;
        margin: 0 !important;
        --width: auto !important;
        --order: 1 !important;
        justify-content: flex-start !important;
        align-self: center !important;
    }

    .elementor-location-header .elementor-element-15cb827 img {
        max-height: 40px !important;
        width: auto !important;
    }

    .elementor-location-header .elementor-element-298205e,
    .elementor-location-header .elementor-element-298205e.e-con {
        width: 40px !important;
        max-width: 40px !important;
        flex: 0 0 40px !important;
        order: 2 !important;
        margin: 0 0 0 auto !important;
        --width: 40px !important;
        --order: 2 !important;
        justify-content: center !important;
        align-self: center !important;
        min-width: 0 !important;
    }

    /* Высота обёрток задавалась содержимым скрытого меню (24px), а бургер
       внутри — 40px. Он вылезал вверх, и его центр вставал на 8px выше
       центра корзины. Прибиваем всю цепочку к 40px и центрируем. */
    .elementor-location-header .elementor-element-298205e .elementor-widget,
    .elementor-location-header .elementor-element-298205e .elementor-widget-wrap,
    .elementor-location-header .elementor-element-298205e .elementor-widget-container,
    .elementor-location-header .elementor-element-298205e .mk13-menu-wrapper {
        width: 40px !important;
        max-width: 40px !important;
        flex: 0 0 40px !important;
        min-width: 0 !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .elementor-location-header .elementor-element-298205e .mk13-hamburger {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        height: 40px !important;
        flex: 0 0 40px !important;
    }

    /* Корзина внутри 514d61a (elementor-hidden-mobile) */
    .elementor-location-header .elementor-element-514d61a.elementor-hidden-mobile,
    .elementor-location-header .elementor-element-514d61a.elementor-hidden-mobile.e-con {
        display: flex !important;
        width: auto !important;
        max-width: 40px !important;
        flex: 0 0 40px !important;
        order: 3 !important;
        margin: 0 !important;
        --width: auto !important;
        --order: 3 !important;
        align-items: center !important;
        align-self: center !important;
        min-width: 0 !important;
    }

    .elementor-location-header .elementor-element-514d61a .elementor-element-07547bd,
    .elementor-location-header .elementor-element-037a152,
    .elementor-location-header .elementor-element-1a302ae,
    .elementor-location-header .elementor-element-b1b9e46 {
        display: none !important;
    }

    .elementor-location-header .elementor-element-f7ab0a0,
    .elementor-location-header .elementor-element-f7ab0a0.e-con,
    .elementor-location-header .elementor-element-969ae43,
    .elementor-location-header .elementor-element-969ae43.e-con {
        display: flex !important;
        width: auto !important;
        max-width: 48px !important;
        flex: 0 0 auto !important;
        order: 0 !important;
        margin: 0 !important;
        --width: auto !important;
        --order: 0 !important;
        align-items: center !important;
    }

    .elementor-location-header .elementor-element-c9ae096,
    .elementor-location-header .elementor-element-c9ae096.elementor-element {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        max-width: 40px !important;
        flex: 0 0 40px !important;
        margin: 0 !important;
        --width: 40px !important;
        --order: 0 !important;
        align-self: center !important;
    }

    .elementor-location-header .elementor-element-514d61a > .e-con-inner {
        align-items: center !important;
        min-height: 40px !important;
    }

    .elementor-location-header .elementor-element-c9ae096 > .elementor-widget-container {
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 40px !important;
    }

    .elementor-location-header .elementor-element-c9ae096 .elementor-menu-cart__toggle .elementor-button-text,
    .elementor-location-header .elementor-element-c9ae096 .elementor-menu-cart__toggle_button .elementor-button-text {
        display: none !important;
    }

    .elementor-location-header .elementor-element-c9ae096 .elementor-menu-cart__wrapper,
    .elementor-location-header .elementor-element-c9ae096 .elementor-menu-cart__toggle,
    .elementor-location-header .elementor-element-c9ae096 .elementor-button-wrapper {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 40px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .elementor-location-header .elementor-element-c9ae096 .elementor-menu-cart__toggle_button {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        padding: 0 !important;
        margin: 0 !important;
        --toggle-icon-padding: 0px !important;
        vertical-align: middle !important;
    }

    .elementor-location-header .elementor-element-c9ae096 .elementor-button-icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        line-height: 1 !important;
        vertical-align: middle !important;
    }

    .elementor-location-header .elementor-element-c9ae096 .elementor-button-icon svg {
        display: block !important;
        width: 22px !important;
        height: 22px !important;
    }

    .mk13-mobile-menu-extras {
        padding: 8px 15px 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        margin-bottom: 8px;
    }

    .mk13-mobile-menu-extras__phone {
        display: block;
        color: #fff;
        font-size: 18px;
        font-weight: 600;
        text-decoration: none;
        margin-bottom: 12px;
    }

    .mk13-mobile-menu-extras__callback {
        display: inline-block;
        margin-bottom: 14px;
        padding: 8px 16px;
        border-radius: 999px;
        background: rgb(124 9 178 / 35%);
        color: #fff;
        text-decoration: none;
        font-size: 14px;
    }

    .mk13-mobile-menu-extras__icons {
        display: flex;
        gap: 12px;
        align-items: center;
        flex-wrap: wrap;
    }

    .mk13-mobile-menu-extras__icons a {
        display: inline-flex;
        width: 40px;
        height: 40px;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgb(255 255 255 / 8%);
        color: #fff;
        text-decoration: none;
    }

    .mk13-mobile-menu-extras__icons svg {
        width: 22px;
        height: 22px;
        fill: currentColor;
    }
    
    /* Кнопка каталога в мега-меню для мобильных */
    .mk13-catalog-button {
        display: block !important;
        width: calc(100% - 32px) !important;
        margin: 16px auto !important;
        text-align: center !important;
        padding: 16px !important;
    }
    
    /* Гамбургер меню */
    .mk13-hamburger {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        width: 40px !important;
        height: 40px !important;
        cursor: pointer !important;
        z-index: 1000 !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        gap: 4px !important;
        box-sizing: border-box !important;
    }

    .mk13-hamburger span {
        display: block !important;
        width: 24px !important;
        height: 2px !important;
        background: #fff !important;
        transition: all 0.3s ease !important;
    }
    
    .mk13-hamburger.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg) !important;
    }
    
    .mk13-hamburger.active span:nth-child(2) {
        opacity: 0 !important;
    }
    
    .mk13-hamburger.active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg) !important;
    }
    
    /* Мобильное меню */
    .mk13-mobile-menu {
        display: none;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        background: #272a33 !important;
        z-index: 9999 !important;
        padding: 60px 20px 20px !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
    }
    
    .mk13-mobile-menu.show {
        display: block !important;
    }
    
    /* Кнопка закрытия */
    .mk13-mobile-close {
        position: absolute !important;
        top: 20px !important;
        right: 20px !important;
        width: 30px !important;
        height: 30px !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        z-index: 10000 !important;
    }
    
    .mk13-mobile-close::before,
    .mk13-mobile-close::after {
        content: '' !important;
        position: absolute !important;
        width: 16px !important;
        height: 2px !important;
        background: #fff !important;
    }
    
    .mk13-mobile-close::before {
        transform: rotate(45deg) !important;
    }
    
    .mk13-mobile-close::after {
        transform: rotate(-45deg) !important;
    }
    
    /* Мобильные категории */
    .mk13-mobile-categories {
        margin-bottom: 20px !important;
    }
    
    .mk13-mobile-category {
        display: flex !important;
        align-items: center !important;
        padding: 15px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        color: #fff !important;
        text-decoration: none !important;
    }
    
    .mk13-mobile-category:last-child {
        border-bottom: none !important;
    }
    
    .mk13-mobile-icon {
        width: 40px !important;
        height: 40px !important;
        margin-right: 15px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border-radius: 8px !important;
    }
    
    .mk13-mobile-icon img {
        max-width: 24px !important;
        max-height: 24px !important;
    }
    
    .mk13-mobile-title {
        font-size: 16px !important;
        font-weight: 500 !important;
    }
    
    /* Мобильные подкатегории */
    .mk13-mobile-subitems {
        display: block !important;
        width: 100% !important;
    }
    
    .mk13-mobile-subitem {
        display: flex !important;
        align-items: center !important;
        padding: 15px 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        color: #fff !important;
        text-decoration: none !important;
    }
    
    .mk13-mobile-back {
        display: flex !important;
        align-items: center !important;
        padding: 15px !important;
        color: #fff !important;
        font-weight: 500 !important;
        cursor: pointer !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    /* Стили для меню-обертки */
    .mk13-menu-wrapper {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: auto !important;
    }
}

/* Общие стили для элементов меню */
.mk13-mega-menu-item {
    display: flex;
    align-items: center;
    padding: 12px 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #ffffff;
    border-radius: 8px;
    margin: 0 8px;
}

.mk13-mega-menu-item:hover,
.mk13-mega-menu-item.active {
    background: rgba(169, 57, 243, 0.15);
}

.mk13-submenu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    padding: 10px;
}

/* Левая панель категорий */
.mk13-mega-menu-left {
    width: 330px;
    background: rgba(0, 0, 0, 0.3);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px 0;
}

/* Элементы категорий */
.mk13-mega-menu-item {
    display: flex;
    align-items: center;
    padding: 16px 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    color: #e0e0e0;
    gap: 16px;
}

.mk13-mega-menu-item:hover,
.mk13-mega-menu-item.active {
    background: linear-gradient(90deg, rgba(169, 57, 243, 0.15) 0%, rgba(169, 57, 243, 0.05) 100%);
    color: #ffffff;
    transform: translateX(4px);
}

.mk13-mega-menu-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 3px;
    background: #a939f3;
    border-radius: 0 2px 2px 0;
}

/* Иконки категорий */
.mk13-menu-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    transition: all 0.3s ease;
    font-size: 24px;
}

.mk13-mega-menu-item:hover .mk13-menu-icon,
.mk13-mega-menu-item.active .mk13-menu-icon {
    background: rgba(169, 57, 243, 0.2);
    transform: scale(1.05);
}

.mk13-menu-icon img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    filter: brightness(0.9);
    transition: filter 0.3s ease;
}

.mk13-mega-menu-item:hover .mk13-menu-icon img,
.mk13-mega-menu-item.active .mk13-menu-icon img {
    filter: brightness(1.2);
}

/* Заголовки категорий */
.mk13-menu-title {
    flex: 1;
    font-weight: 500;
    line-height: 1.4;
  font-size: 20px;
  text-transform: uppercase;
}
}

/* Стрелочка */
.mk13-menu-arrow {
    margin-left: 12px;
    opacity: 0.5;
    transition: all 0.3s ease;
    font-size: 16px;
}

.mk13-mega-menu-item:hover .mk13-menu-arrow,
.mk13-mega-menu-item.active .mk13-menu-arrow {
    opacity: 1;
    transform: translateX(4px);
}

/* Кнопка закрытия ставится в панель через position:absolute, но сама панель
 * была статичной — крестик отсчитывался от overlay во всю ширину экрана и
 * улетал за правый край панели. */
.mk13-mega-menu-container {
    position: relative;
}

/* Правая панель с подкатегориями */
.mk13-mega-menu-right {
    flex: 1;
    position: relative;
    background: rgba(255, 255, 255, 0.02);
    /* Скрытые подменю сдвинуты трансформом вправо и, хотя не видны,
       продолжают расширять страницу — при открытом меню появлялся
       горизонтальный скролл. Обрезаем их родителем. */
    overflow: hidden;
}

/* Подменю */
.mk13-mega-submenu {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(20px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
}

.mk13-mega-submenu.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* Заголовок подменю */
.mk13-submenu-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mk13-submenu-header h3 {
    color: #ffffff;
    font-size: 24px;
    font-weight: 600;
    margin: 0;
    background: linear-gradient(135deg, #ffffff 0%, #e0e0e0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Сетка подкатегорий */
.mk13-submenu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    padding-bottom: 20px;
}

/* Элементы подкатегорий */
.mk13-mega-subitem {
    display: flex;
    align-items: flex-start;
    padding: 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    text-decoration: none;
    color: #e0e0e0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    gap: 16px;
}

.mk13-mega-subitem::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(169, 57, 243, 0.1) 0%, rgba(169, 57, 243, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mk13-mega-subitem:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    border-color: rgba(169, 57, 243, 0.3);
    color: #ffffff;
}

.mk13-mega-subitem:hover::before {
    opacity: 1;
}

/* Изображения подкатегорий */
.mk13-subitem-image {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.mk13-subitem-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.mk13-mega-subitem:hover .mk13-subitem-image img {
    transform: scale(1.1);
}

.mk13-placeholder-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    opacity: 0.7;
}

/* Контент подкатегорий */
.mk13-subitem-content {
    flex: 1;
    position: relative;
    z-index: 1;
}

.mk13-subitem-content h4 {
  margin: 0 0 8px 0;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.4;
  transition: color 0.3s ease;
}
}

.mk13-subitem-content p {
    margin: 0;
    font-size: 13px;
    opacity: 0.8;
    line-height: 1.5;
    transition: opacity 0.3s ease;
}

.mk13-mega-subitem:hover .mk13-subitem-content p {
    opacity: 1;
}

/* Адаптивность */
@media (max-width: 1200px) {
    .mk13-submenu-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 16px;
    }
    
    .mk13-menu-wrapper {
        padding: 12px 20px;
    }
    
    .mk13-main-menu {
        gap: 20px;
    }
    
    .mk13-mega-menu-overlay::after {
        right: 40px;
    }
}

@media (max-width: 992px) {
    .mk13-main-menu {
        gap: 15px;
    }
    
    .mk13-menu-item {
        padding: 8px 12px;
        font-size: 14px;
    }
    
    .mk13-catalog-trigger {
        padding: 10px 16px;
    }
}

/* Скроллбары для подменю */
.mk13-mega-submenu::-webkit-scrollbar {
    width: 6px;
}

.mk13-mega-submenu::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.mk13-mega-submenu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.mk13-mega-submenu::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Анимации */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mk13-mega-subitem {
    animation: fadeInUp 0.3s ease forwards;
}

.mk13-mega-subitem:nth-child(1) { animation-delay: 0.1s; }
.mk13-mega-subitem:nth-child(2) { animation-delay: 0.2s; }
.mk13-mega-subitem:nth-child(3) { animation-delay: 0.3s; }
.mk13-mega-subitem:nth-child(4) { animation-delay: 0.4s; }
.mk13-mega-subitem:nth-child(5) { animation-delay: 0.5s; }
.mk13-mega-subitem:nth-child(6) { animation-delay: 0.6s; }

/* Уменьшение анимации для пользователей с prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .mk13-mega-subitem {
        animation: none;
    }
    
    * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* Узкий десктоп: 1441–1600.
 *
 * Ноутбучный брейкпоинт Elementor кончается на 1440, поэтому здесь уже
 * действуют десктопные размеры шрифтов, а ширины окна как у ноутбука.
 * Меню и блок контактов в сумме не помещаются — возвращаем место, подрезав
 * горизонтальный padding пунктов. На широких экранах он остаётся прежним. */
@media (min-width: 1441px) and (max-width: 1600px) {
    .mk13-menu-item {
        padding-left: 6px;
        padding-right: 6px;
        /* Подрезать один padding уже не хватает: стрелки у «Каталога» и
           «Партнёрам» добавили ширины. Небольшое уменьшение кегля даёт
           запас и выглядит лучше, чем отступы в 3px. */
        font-size: 19px;
    }
}