/* KSC Dynamic Menu v2
 * Enhances Magento's native category navigation without replacing the category tree.
 */

@media (min-width: 768px) {
    .nav-sections {
        background: #fbf3f3;
        border-top: 1px solid #f2e2e2;
        border-bottom: 1px solid #ecdada;
    }

    .nav-sections .navigation.ksc-dynamic-menu {
        position: relative;
        max-width: none;
        padding: 0 8px;
        background: transparent;
    }

    .nav-sections .navigation.ksc-dynamic-menu > ul {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        gap: 0;
    }

    .nav-sections .navigation.ksc-dynamic-menu > ul > li.level0 {
        position: static;
        margin: 0;
    }

    .nav-sections .navigation.ksc-dynamic-menu > ul > li.level0 > .level-top {
        display: flex;
        align-items: center;
        min-height: 52px;
        padding: 0 18px;
        color: #403b39;
        font-size: 16px;
        font-weight: 500;
        line-height: 1.25;
        border-bottom: 3px solid transparent;
        transition: color .15s ease, background-color .15s ease, border-color .15s ease;
    }

    .nav-sections .navigation.ksc-dynamic-menu > ul > li.level0:hover > .level-top,
    .nav-sections .navigation.ksc-dynamic-menu > ul > li.level0.active > .level-top,
    .nav-sections .navigation.ksc-dynamic-menu > ul > li.level0.has-active > .level-top {
        color: #d87b7d;
        background: rgba(255,255,255,.58);
        border-bottom-color: #d87b7d;
    }

    .nav-sections .navigation.ksc-dynamic-menu > ul > li.level0.parent > .level-top:after {
        font-size: 10px;
        margin-left: 8px;
        opacity: .8;
    }

    .nav-sections .navigation.ksc-dynamic-menu .ksc-mega-panel {
        box-sizing: border-box;
        left: 12px !important;
        right: 12px !important;
        top: auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0;
        padding: 26px 30px 30px;
        display: none;
        grid-template-columns: repeat(4, minmax(180px, 1fr));
        gap: 24px 34px;
        background: #fff;
        border: 1px solid #eadfdd;
        border-top: 3px solid #d87b7d;
        border-radius: 0 0 10px 10px;
        box-shadow: 0 14px 32px rgba(64,59,57,.16);
        z-index: 1000;
    }

    .nav-sections .navigation.ksc-dynamic-menu .ksc-mega-parent:hover > .ksc-mega-panel,
    .nav-sections .navigation.ksc-dynamic-menu .ksc-mega-parent._active > .ksc-mega-panel {
        display: grid !important;
    }

    .nav-sections .navigation.ksc-dynamic-menu .ksc-mega-panel > li.level1 {
        position: static;
        display: block;
        width: auto;
        margin: 0;
        padding: 0;
    }

    .nav-sections .navigation.ksc-dynamic-menu .ksc-mega-panel > li.level1 > a {
        display: block;
        padding: 0 0 10px;
        color: #403b39;
        font-size: 16px;
        font-weight: 700;
        line-height: 1.25;
        border-bottom: 1px solid #eee5e3;
        white-space: normal;
    }

    .nav-sections .navigation.ksc-dynamic-menu .ksc-mega-panel > li.level1 > a:hover,
    .nav-sections .navigation.ksc-dynamic-menu .ksc-mega-panel > li.level1 > a:focus {
        color: #d87b7d;
        text-decoration: none;
    }

    .nav-sections .navigation.ksc-dynamic-menu .ksc-mega-panel .ksc-mega-links {
        position: static !important;
        display: block !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 8px 0 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .nav-sections .navigation.ksc-dynamic-menu .ksc-mega-panel .ksc-mega-links li {
        position: static;
        display: block;
        margin: 0;
        padding: 0;
    }

    .nav-sections .navigation.ksc-dynamic-menu .ksc-mega-panel .ksc-mega-links a {
        display: block;
        padding: 5px 0;
        color: #5b5552;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.35;
        white-space: normal;
    }

    .nav-sections .navigation.ksc-dynamic-menu .ksc-mega-panel .ksc-mega-links a:hover,
    .nav-sections .navigation.ksc-dynamic-menu .ksc-mega-panel .ksc-mega-links a:focus {
        color: #d87b7d;
        background: transparent;
        text-decoration: underline;
    }

    .nav-sections .navigation.ksc-dynamic-menu .ksc-mega-panel .submenu .submenu {
        position: static !important;
        display: block !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 0 0 12px !important;
        padding: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
    }
}

@media (min-width: 768px) and (max-width: 1180px) {
    .nav-sections .navigation.ksc-dynamic-menu .ksc-mega-panel {
        grid-template-columns: repeat(3, minmax(170px, 1fr));
    }

    .nav-sections .navigation.ksc-dynamic-menu > ul > li.level0 > .level-top {
        padding-left: 14px;
        padding-right: 14px;
        font-size: 15px;
    }
}

@media (max-width: 767px) {
    .nav-sections .navigation {
        background: #fff;
    }

    .nav-sections .navigation .level0 > .level-top,
    .nav-sections .navigation .submenu a {
        line-height: 1.35;
    }

    .nav-sections .navigation .level0 > .level-top {
        font-weight: 600;
    }

    .nav-sections .navigation .submenu {
        background: #fcfaf8;
    }
}


/* v2: make level-1 category links obviously clickable and avoid empty-looking leaf sections */
@media (min-width: 768px) {
    .nav-sections .navigation.ksc-dynamic-menu .ksc-mega-panel > li.level1 > a {
        position: relative;
        padding-right: 24px;
        cursor: pointer;
    }

    .nav-sections .navigation.ksc-dynamic-menu .ksc-mega-panel > li.level1 > a::after {
        content: '\2192';
        position: absolute;
        right: 2px;
        top: 0;
        color: #d87b7d;
        font-size: 17px;
        font-weight: 600;
        line-height: 1.2;
        transition: transform .15s ease;
    }

    .nav-sections .navigation.ksc-dynamic-menu .ksc-mega-panel > li.level1 > a:hover::after,
    .nav-sections .navigation.ksc-dynamic-menu .ksc-mega-panel > li.level1 > a:focus::after {
        transform: translateX(3px);
    }

    .nav-sections .navigation.ksc-dynamic-menu .ksc-mega-panel > li.level1.ksc-mega-leaf {
        align-self: start;
    }

    .nav-sections .navigation.ksc-dynamic-menu .ksc-mega-panel > li.level1.ksc-mega-leaf > a {
        padding: 10px 30px 10px 12px;
        border: 1px solid #eee5e3;
        border-radius: 6px;
        background: #fcfaf8;
        font-weight: 600;
        transition: color .15s ease, border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
    }

    .nav-sections .navigation.ksc-dynamic-menu .ksc-mega-panel > li.level1.ksc-mega-leaf > a::after {
        right: 10px;
        top: 10px;
    }

    .nav-sections .navigation.ksc-dynamic-menu .ksc-mega-panel > li.level1.ksc-mega-leaf > a:hover,
    .nav-sections .navigation.ksc-dynamic-menu .ksc-mega-panel > li.level1.ksc-mega-leaf > a:focus {
        background: #fff;
        border-color: #d87b7d;
        box-shadow: 0 3px 10px rgba(64,59,57,.08);
        text-decoration: none;
    }

    .nav-sections .navigation.ksc-dynamic-menu .ksc-mega-panel > li.level1.ksc-mega-column > a {
        border-bottom-color: #eee5e3;
    }
}