/* =========================================================
   KihCarpet Header Menu Modes
   Mega Menu styles only.
   Обычное dropdown меню продолжает использовать header.css.
   ========================================================= */


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 768px) {

    .kih-site-header__nav-inner {
        position: relative;
    }


    /* =====================================================
       MEGA ROOT
       ===================================================== */

    .kih-site-header__nav-list
    > .kih-site-header__nav-item.kih-mega-root {

        position: static;
    }


    /* =====================================================
       MEGA PANEL
       ===================================================== */

    .kih-site-header__nav-item.kih-mega-root
    > .kih-site-header__submenu {

        top:
            calc(
                100% - 8px
            )
            !important;

        left: 0 !important;
        right: 0 !important;

        width: 100% !important;

        min-width: 0 !important;
        max-width: none !important;

        /*
         * ВАЖНО:
         * закрытое Mega Menu вообще не участвует
         * в hit-area страницы. Это убирает ситуацию,
         * когда меню открывалось при наведении на фильтр.
         */
        display: none !important;

        grid-template-columns:
            repeat(
                var(
                    --kih-mega-columns,
                    2
                ),
                minmax(
                    220px,
                    275px
                )
            );

        justify-content:
            start;

        align-items:
            start;

        gap:
            28px;

        min-height:
            470px;

        max-height:
            min(
                620px,
                calc(
                    100vh - 175px
                )
            );

        margin: 0 !important;

        padding:
            24px
            28px
            28px
            !important;

        overflow-x:
            hidden !important;

        overflow-y:
            auto !important;

        overscroll-behavior:
            contain;

        background:
            rgba(
                255,
                255,
                255,
                .985
            );

        border:
            1px solid
            #d7e7da
            !important;

        border-radius:
            0 0 18px 18px
            !important;

        box-shadow:
            0 22px 55px
            rgba(
                20,
                65,
                34,
                .14
            )
            !important;

        scrollbar-width:
            thin;

        scrollbar-color:
            #78bc8b
            #eef6f0;

        opacity: 0;

        visibility: hidden;

        pointer-events: none;
    }


    /* =====================================================
       HOVER BRIDGE
       ===================================================== */

    .kih-site-header__nav-item.kih-mega-root
    > .kih-site-header__submenu::before {

        content: "";

        position: absolute;

        left: 0;
        right: 0;

        top: -18px;

        height: 18px;

        background:
            transparent;

        pointer-events:
            auto;
    }


    .kih-site-header__nav-list
    > .kih-site-header__nav-item.kih-mega-root
    > .kih-site-header__nav-main {

        position: relative;

        z-index: 2;
    }


    .kih-site-header__nav-item.kih-mega-root:hover
    > .kih-site-header__submenu,

    .kih-site-header__nav-item.kih-mega-root.is-submenu-open
    > .kih-site-header__submenu {

        display: grid !important;

        opacity: 1 !important;

        visibility:
            visible !important;

        pointer-events:
            auto !important;
    }


    /*
     * У Mega Menu не используем
     * opens-left основного dropdown.
     */
    .kih-site-header__nav-item.kih-mega-root.opens-left
    > .kih-site-header__submenu {

        left: 0 !important;
        right: 0 !important;
    }


    /* =====================================================
       MAIN SCROLLBAR
       ===================================================== */

    .kih-site-header__nav-item.kih-mega-root
    > .kih-site-header__submenu::-webkit-scrollbar {

        width: 7px;
    }


    .kih-site-header__nav-item.kih-mega-root
    > .kih-site-header__submenu::-webkit-scrollbar-track {

        background:
            #eef6f0;

        border-radius:
            999px;
    }


    .kih-site-header__nav-item.kih-mega-root
    > .kih-site-header__submenu::-webkit-scrollbar-thumb {

        background:
            #78bc8b;

        border-radius:
            999px;
    }


    /* =====================================================
       MEGA COLUMN
       ===================================================== */

    .kih-site-header__nav-item.kih-mega-root
    > .kih-site-header__submenu
    > .kih-site-header__nav-item {

        position: relative;

        width: 100%;

        min-width: 0;

        align-self:
            start;

        margin:
            0 !important;

        padding:
            4px 0 0
            !important;

        background:
            transparent;

        border:
            0;

        border-radius:
            0;
    }


    /* =====================================================
       IMAGE
       ===================================================== */

    .kih-site-header__mega-image {

        width: 92px;
        height: 92px;

        margin:
            0
            0
            12px
            5px;

        overflow:
            hidden;

        background:
            #eef5f0;

        border:
            1px solid
            #d8e7dc;

        border-radius:
            8px;
    }


    .kih-site-header__mega-image img {

        display: block;

        width: 100%;
        height: 100%;

        object-fit:
            cover;

        transition:
            transform
            .25s ease;
    }


    .kih-site-header__nav-item.kih-mega-root
    > .kih-site-header__submenu
    > .kih-site-header__nav-item:hover
    > .kih-site-header__mega-image img {

        transform:
            scale(1.035);
    }


    /* =====================================================
       COLUMN TITLE
       ===================================================== */

    .kih-site-header__nav-item.kih-mega-root
    > .kih-site-header__submenu
    > .kih-site-header__nav-item
    > .kih-site-header__nav-main {

        min-height:
            36px;

        margin:
            0 0 9px;

        padding-bottom:
            8px;

        border-bottom:
            1px solid
            #e6eee8;
    }


    .kih-site-header__nav-item.kih-mega-root
    > .kih-site-header__submenu
    > .kih-site-header__nav-item
    > .kih-site-header__nav-main
    > .kih-site-header__nav-link {

        min-height:
            34px;

        padding:
            4px
            5px;

        color:
            #173f26
            !important;

        font-size:
            15px;

        line-height:
            1.25;

        font-weight:
            750;
    }


    .kih-site-header__nav-item.kih-mega-root
    > .kih-site-header__submenu
    > .kih-site-header__nav-item
    > .kih-site-header__nav-main
    .kih-site-header__nav-icon {

        flex:
            0 0 26px;

        width: 26px;
        height: 26px;

        font-size:
            12px;

        border-radius:
            7px;
    }


    /*
     * В Mega Menu содержимое Level 1
     * уже раскрывается вниз.
     */
    .kih-site-header__nav-item.kih-mega-root
    > .kih-site-header__submenu
    > .kih-site-header__nav-item
    > .kih-site-header__nav-main
    > .kih-site-header__submenu-toggle {

        display:
            none !important;
    }


    /* =====================================================
       MEGA INNER MENUS
       ===================================================== */

    .kih-site-header__nav-item.kih-mega-root
    > .kih-site-header__submenu
    .kih-site-header__submenu {

        position:
            static !important;

        top:
            auto !important;

        left:
            auto !important;

        right:
            auto !important;

        display:
            block !important;

        width:
            100% !important;

        min-width:
            0 !important;

        max-width:
            none !important;

        margin:
            0 !important;

        padding:
            0 !important;

        background:
            transparent !important;

        border:
            0 !important;

        border-radius:
            0 !important;

        box-shadow:
            none !important;

        opacity:
            1 !important;

        visibility:
            visible !important;

        pointer-events:
            auto !important;

        transform:
            none !important;
    }


    /*
     * Scroll внутри каждой колонки.
     */
    .kih-site-header__nav-item.kih-mega-root
    > .kih-site-header__submenu
    > .kih-site-header__nav-item
    > .kih-site-header__submenu {

        max-height:
            360px !important;

        overflow-x:
            hidden !important;

        overflow-y:
            auto !important;

        padding-right:
            5px !important;

        overscroll-behavior:
            contain;

        scrollbar-width:
            thin;

        scrollbar-color:
            #8cc79c
            transparent;
    }


    .kih-site-header__nav-item.kih-mega-root
    > .kih-site-header__submenu
    > .kih-site-header__nav-item
    > .kih-site-header__submenu::-webkit-scrollbar {

        width: 5px;
    }


    .kih-site-header__nav-item.kih-mega-root
    > .kih-site-header__submenu
    > .kih-site-header__nav-item
    > .kih-site-header__submenu::-webkit-scrollbar-track {

        background:
            transparent;
    }


    .kih-site-header__nav-item.kih-mega-root
    > .kih-site-header__submenu
    > .kih-site-header__nav-item
    > .kih-site-header__submenu::-webkit-scrollbar-thumb {

        background:
            #8cc79c;

        border-radius:
            999px;
    }


    /* =====================================================
       INNER ITEMS
       ===================================================== */

    .kih-site-header__nav-item.kih-mega-root
    .kih-site-header__submenu
    .kih-site-header__nav-item {

        width: 100%;

        margin:
            0 !important;

        padding:
            0 !important;
    }


    .kih-site-header__nav-item.kih-mega-root
    .kih-site-header__submenu
    .kih-site-header__nav-main {

        width: 100%;

        min-height:
            31px;

        margin:
            0;

        padding:
            0;

        border:
            0;
    }


    .kih-site-header__nav-item.kih-mega-root
    .kih-site-header__submenu
    .kih-site-header__nav-link {

        flex: 1;

        min-width: 0;

        min-height:
            31px;

        padding:
            4px
            6px;

        border-radius:
            6px;

        white-space:
            normal;

        color:
            #405849
            !important;

        font-size:
            13px;

        line-height:
            1.28;

        font-weight:
            500;
    }


    .kih-site-header__nav-item.kih-mega-root
    .kih-site-header__submenu
    a.kih-site-header__nav-link:hover {

        background:
            #ebf7ee;

        color:
            #087b35
            !important;

        transform:
            none;
    }


    .kih-site-header__nav-item.kih-mega-root
    .kih-site-header__submenu
    .kih-site-header__nav-icon {

        flex:
            0 0 22px;

        width: 22px;
        height: 22px;

        font-size:
            10px;

        border-radius:
            6px;
    }


    /*
     * В Mega режиме вложенные стрелки
     * на Desktop скрываем:
     * всё идёт вниз внутри колонки.
     */
    .kih-site-header__nav-item.kih-mega-root
    > .kih-site-header__submenu
    .kih-site-header__submenu-toggle {

        display:
            none !important;
    }


    /* =====================================================
       DEEP LEVELS INSIDE MEGA
       ===================================================== */

    .kih-site-header__nav-item.kih-mega-root
    ul[data-kih-menu-depth="3"] {

        margin:
            2px
            0
            4px
            12px
            !important;

        padding-left:
            7px !important;

        border-left:
            1px solid
            #cfe4d5
            !important;
    }


    .kih-site-header__nav-item.kih-mega-root
    ul[data-kih-menu-depth="4"] {

        margin:
            2px
            0
            4px
            12px
            !important;

        padding-left:
            7px !important;

        border-left:
            1px dashed
            #d4e7d9
            !important;
    }


    /* =====================================================
       COLUMNS
       ===================================================== */

    .kih-site-header__submenu[
        style*="--kih-mega-columns: 1"
    ] {

        grid-template-columns:
            minmax(
                230px,
                290px
            );
    }


    .kih-site-header__submenu[
        style*="--kih-mega-columns: 2"
    ] {

        grid-template-columns:
            repeat(
                2,
                minmax(
                    230px,
                    275px
                )
            );
    }


    .kih-site-header__submenu[
        style*="--kih-mega-columns: 3"
    ] {

        grid-template-columns:
            repeat(
                3,
                minmax(
                    220px,
                    265px
                )
            );
    }


    .kih-site-header__submenu[
        style*="--kih-mega-columns: 4"
    ] {

        grid-template-columns:
            repeat(
                4,
                minmax(
                    205px,
                    250px
                )
            );

        gap: 20px;
    }

}


/* =========================================================
   SMALL DESKTOP / TABLET
   ========================================================= */

@media (
    min-width: 768px
)
and (
    max-width: 1100px
) {

    .kih-site-header__nav-item.kih-mega-root
    > .kih-site-header__submenu {

        grid-template-columns:
            repeat(
                var(
                    --kih-mega-columns,
                    2
                ),
                minmax(
                    185px,
                    1fr
                )
            );

        gap: 16px;

        min-height:
            430px;

        padding:
            18px
            !important;
    }


    .kih-site-header__mega-image {

        width: 78px;
        height: 78px;
    }


    .kih-site-header__nav-item.kih-mega-root
    > .kih-site-header__submenu
    > .kih-site-header__nav-item
    > .kih-site-header__submenu {

        max-height:
            320px !important;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    /*
     * Mega Menu и обычное меню
     * на мобильном одинаково работают
     * через accordion из header.css/header.js.
     *
     * Картинки вообще не создаются JS,
     * но оставляем защиту.
     */

    .kih-site-header__mega-image {
        display: none !important;
    }

}

/* =========================================================
   NORMAL MENU — SAFE HOVER AREA
   Убираем "убегание" обычного меню
   ========================================================= */

@media (min-width: 768px) {

    /* -----------------------------------------------------
       Первый уровень обычного меню.
       Немного накладываем dropdown на родительский пункт.
       ----------------------------------------------------- */

    .kih-site-header__nav-list
    > .kih-site-header__nav-item.has-children:not(.kih-mega-root)
    > .kih-site-header__submenu {

        top: calc(100% - 6px) !important;
    }


    /* -----------------------------------------------------
       Вложенные уровни обычного меню.
       Немного накладываем submenu друг на друга,
       чтобы между ними не было "мертвой зоны".
       ----------------------------------------------------- */

    .kih-site-header__nav-list
    > .kih-site-header__nav-item:not(.kih-mega-root)
    .kih-site-header__submenu
    .kih-site-header__nav-item.has-children
    > .kih-site-header__submenu {

        top: -8px !important;

        left: calc(100% - 5px) !important;
    }


    /* Если подменю открывается влево */

    .kih-site-header__nav-list
    > .kih-site-header__nav-item:not(.kih-mega-root)
    .kih-site-header__submenu
    .kih-site-header__nav-item.has-children.opens-left
    > .kih-site-header__submenu {

        left: auto !important;

        right: calc(100% - 5px) !important;
    }


    /* -----------------------------------------------------
       Невидимый мостик вниз:
       Основной пункт -> первое dropdown
       ----------------------------------------------------- */

    .kih-site-header__nav-list
    > .kih-site-header__nav-item.has-children:not(.kih-mega-root)
    > .kih-site-header__nav-main {

        position: relative;
    }


    .kih-site-header__nav-list
    > .kih-site-header__nav-item.has-children:not(.kih-mega-root)
    > .kih-site-header__nav-main::after {

        content: "";

        position: absolute;

        left: 0;
        right: 0;

        bottom: -12px;

        height: 12px;

        background: transparent;

        pointer-events: auto;
    }


    /* -----------------------------------------------------
       Невидимый мостик вправо:
       Level 1 -> Level 2 -> Level 3
       ----------------------------------------------------- */

    .kih-site-header__nav-list
    > .kih-site-header__nav-item:not(.kih-mega-root)
    .kih-site-header__submenu
    .kih-site-header__nav-item.has-children
    > .kih-site-header__nav-main {

        position: relative;
    }


    .kih-site-header__nav-list
    > .kih-site-header__nav-item:not(.kih-mega-root)
    .kih-site-header__submenu
    .kih-site-header__nav-item.has-children:not(.opens-left)
    > .kih-site-header__nav-main::after {

        content: "";

        position: absolute;

        top: 0;
        bottom: 0;

        right: -12px;

        width: 12px;

        background: transparent;

        pointer-events: auto;
    }


    /* Мостик влево */

    .kih-site-header__nav-list
    > .kih-site-header__nav-item:not(.kih-mega-root)
    .kih-site-header__submenu
    .kih-site-header__nav-item.has-children.opens-left
    > .kih-site-header__nav-main::after {

        content: "";

        position: absolute;

        top: 0;
        bottom: 0;

        left: -12px;

        width: 12px;

        background: transparent;

        pointer-events: auto;
    }


    /* -----------------------------------------------------
       JS удерживает меню открытым несколько миллисекунд
       после ухода курсора.
       ----------------------------------------------------- */

    .kih-site-header__nav-list
    > .kih-site-header__nav-item:not(.kih-mega-root)
    .kih-site-header__nav-item.kih-normal-hover-open
    > .kih-site-header__submenu,

    .kih-site-header__nav-list
    > .kih-site-header__nav-item.kih-normal-hover-open:not(.kih-mega-root)
    > .kih-site-header__submenu {

        opacity: 1 !important;

        visibility: visible !important;

        pointer-events: auto !important;

        transform: translateY(0) !important;
    }

}