/* Reuse the company sidebar palette for storefront navigation. */
.header-main__inner > nav,
.js-sidebar .sidebar-subcategories,
.mm-mobile-catalog,
.category__name-subcategories .js-category-subcategories,
.elow-mobile-navigation {
    --elow-menu-hover-bg: #f0f2f7;
    --elow-menu-selected-bg: #f0f2f7;
    --elow-menu-selected-text: #344d86;
    --elow-menu-accent: black;
}

/* Keep the horizontal menu's width and the dropdown's position. */
.header-main__inner > nav > ul > li > a {
    position: relative;
    display: inline-block;
    isolation: isolate;
    border-radius: 6px;
    text-decoration: none;
    transition: color .15s ease;
}

.header-main__inner > nav > ul > li > a::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -5px -7px;
    border-radius: 8px;
    pointer-events: none;
    transition: background-color .15s ease;
}

.header-main__inner > nav > ul > li > .open-sub {
    padding: 8px;
    border-color: #e8e4df;
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(25, 40, 67, .09);
}

.header-main__inner > nav > ul > li > .open-sub > span {
    border-left-color: #e8e4df;
}

.header-main__inner > nav > ul > li:focus-within > .open-sub {
    /* The custom header sets display:none inline and opens on hover. */
    display: block !important;
}

.header-main__inner > nav .open-sub :is(.l1, .l2) {
    margin: 2px 0;
}

.header-main__inner > nav .open-sub :is(.l1, .l2) > a,
.js-sidebar .sidebar-subcategories .sidebar_subcategories__title {
    display: block;
    padding: 8px 10px;
    font-size: 14px;
    line-height: 1.4;
    text-decoration: none;
}

.header-main__inner > nav .open-sub :is(.l1, .l2) > a {
    color: #565b65;
    text-transform: none;
    letter-spacing: normal;
}

.js-sidebar .sidebar-subcategories .sidebar_subcategories__item {
    margin-bottom: 2px;
}

.js-sidebar .sidebar-subcategories .sidebar_subcategories__item:last-child {
    margin-bottom: 0;
}

.mm-mobile-catalog .mm-mobile-menu__item {
    padding-left: 10px;
    padding-right: 10px;
}

.mm-mobile-catalog .mm-mobile-menu__item.-has-childs {
    padding-right: 30px;
}

.mm-mobile-catalog .mm-mobile-menu__arrow {
    right: 8px;
}

:is(
    .header-main__inner > nav .open-sub :is(.l1, .l2) > a,
    .js-sidebar .sidebar-subcategories .sidebar_subcategories__title,
    .mm-mobile-catalog .mm-mobile-menu__item
) {
    border-radius: 8px;
}

:is(
    .header-main__inner > nav .open-sub :is(.l1, .l2) > a,
    .js-sidebar .sidebar-subcategories .sidebar_subcategories__title,
    .mm-mobile-catalog .mm-mobile-catalog__item,
    .mm-mobile-catalog .mm-mobile-menu__item,
    .category__name-subcategories .js-category-subcategories :is(.categories-tile__item, .subcategories-links__item)
) {
    transition: background-color .15s ease, color .15s ease;
}

.header-main__inner > nav > ul > li > a:is([aria-current="page"], .elow-menu-branch) {
    color: var(--body-text-color, #303843);
}

@media (hover: hover) {
    .header-main__inner > nav > ul > li:hover > a {
        color: var(--elow-menu-accent);
        font-weight: 600;
    }

    .header-main__inner > nav > ul > li:hover > a::before {
        background-color: var(--elow-menu-hover-bg);
    }

    :is(
        .header-main__inner > nav .open-sub :is(.l1, .l2) > a,
        .js-sidebar .sidebar-subcategories .sidebar_subcategories__title,
        .mm-mobile-catalog .mm-mobile-catalog__item,
        .mm-mobile-catalog .mm-mobile-menu__item,
        .category__name-subcategories .js-category-subcategories :is(.categories-tile__item, .subcategories-links__item)
    ):hover {
        background-color: var(--elow-menu-hover-bg);
        color: var(--elow-menu-accent);
         font-weight: 600;
        text-decoration: none;
    }
}

/* The catalog overview is a heading in the sidebar; tint its subcategories. */
:is(
    .header-main__inner > nav .open-sub :is(.l1, .l2) > a,
    .js-sidebar .sidebar-subcategories .sidebar_subcategories__title:not(:where(
        [href="/category/katalog/"], [href="/category/katalog"]
    )),
    .mm-mobile-catalog .mm-mobile-catalog__item,
    .mm-mobile-catalog .mm-mobile-menu__item,
    .category__name-subcategories .js-category-subcategories :is(.categories-tile__item, .subcategories-links__item)
):is([aria-current="page"], .elow-menu-branch, .selected) {
    background-color: var(--elow-menu-selected-bg);
    color: var(--elow-menu-selected-text);
    box-shadow: inset 2px 0 var(--elow-menu-accent);
}

:is(
    .header-main__inner > nav > ul > li > a,
    .header-main__inner > nav .open-sub :is(.l1, .l2) > a,
    .js-sidebar .sidebar-subcategories .sidebar_subcategories__title,
    .mm-mobile-catalog .mm-mobile-catalog__item,
    .mm-mobile-catalog .mm-mobile-menu__item,
    .category__name-subcategories .js-category-subcategories :is(.categories-tile__item, .subcategories-links__item)
):focus-visible {
    outline: 2px solid var(--elow-menu-accent);
    outline-offset: 2px;
}

.header-main__inner > nav > ul > li > a:focus-visible {
    outline-offset: 6px;
}

.elow-mobile-navigation .elow-bottom-order[aria-current="page"],
.elow-mobile-navigation .elow-bottom-order[aria-current="page"] .m-fixed-bottom-nav__icon {
    color: var(--elow-menu-selected-text);
}

.elow-mobile-navigation .elow-bottom-order[aria-current="page"] .m-fixed-bottom-nav__icon {
    background: var(--elow-menu-selected-bg);
    border-radius: 7px;
}

@media (prefers-reduced-motion: reduce) {
    :is(
        .header-main__inner > nav > ul > li > a,
        .header-main__inner > nav .open-sub :is(.l1, .l2) > a,
        .js-sidebar .sidebar-subcategories .sidebar_subcategories__title,
        .mm-mobile-catalog .mm-mobile-catalog__item,
        .mm-mobile-catalog .mm-mobile-menu__item,
        .category__name-subcategories .js-category-subcategories :is(.categories-tile__item, .subcategories-links__item)
    ),
    .header-main__inner > nav > ul > li > a::before {
        transition: none;
    }
}