.mega-menu {
    position: static;
}

.mega-menu__content {
    background-color: rgb(var(--color-background));
    border-left: 0;
    border-radius: 0;
    border-right: 0;
    left: 0;
    overflow-y: auto;
    padding-bottom: 0;
    padding-top: 0;
    position: absolute;
    right: 0;
    top: 100%;
}

.shopify-section-header-sticky .mega-menu__content {
    max-height: calc(100vh - var(--header-bottom-position-desktop, 20rem) - 4rem);
}

.header-wrapper--border-bottom .mega-menu__content {
    border-top: 0;
}

.js .mega-menu__content {
    opacity: 0;
    transform: translateY(-1.5rem);
}

.mega-menu[open] .mega-menu__content {
    opacity: 1;
    transform: translateY(0);
}

.mega-menu__list {
    display: grid;
    gap: 1.8rem 4rem;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    list-style: none;
}

.mega-menu__link {
    color: rgba(var(--color-foreground), 1);
    display: block;
    line-height: calc(1 + 0.3 / var(--font-body-scale));
    padding-bottom: 0.6rem;
    padding-top: 0.6rem;
    text-decoration: none;
    transition: text-decoration var(--duration-short) ease;
    word-wrap: break-word;
}

.mega-menu__link--level-2 {
    font-weight: bold;
}

.header--top-center .mega-menu__list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    column-gap: 0;
}

.header--top-center .mega-menu__list > li {
    width: 16%;
    padding-right: 2.4rem;
}

.mega-menu__link:hover,
.mega-menu__link--active {
    color: rgb(var(--color-foreground));
    text-decoration: underline;
}

.mega-menu__link--active:hover {
    text-decoration-thickness: 0.2rem;
}

.mega-menu .mega-menu__list--condensed {
    display: block;
}

.mega-menu__list--condensed .mega-menu__link {
    font-weight: normal;
}

/* custom */

header.header {
    --mega-menu-block-spacing: 3rem;

    /*general*/

    .mega-menu__list, .mega-menu__list--level-2 {
        a, button {
            font-family: var(--font-accent-family), serif;
            text-transform: none;
            font-size: 1.9rem;
            font-weight: 300;
            display: flex;
            color: var(--color-grey-500-deselected);
            place-self: flex-start;

            &.mega-menu__link--active, &:hover, &:focus-visible, &.mega-menu__link--active-styling {
                color: var(--color-foreground);
            }

            &:hover {
                text-decoration-thickness: 1px;
                text-underline-offset: 35%;
            }
        }
    }

    .mega-menu__wrapper--level-1 {
        padding: 0;
    }

    .mega-menu__content--level-1 {
        width: 100%;
        display: grid;
        grid-template-columns: 17rem 18rem 1fr;

        @media screen and (min-width: 1200px) {
            grid-template-columns: 17rem 22rem 1fr;
        }

        gap: 3rem;
        padding: 0;
    }

    .mega-menu__list--level-1 {
        display: grid;
        grid-template-rows: auto;
        place-content: start;
        gap: 0.5rem;
        padding: var(--mega-menu-block-spacing) 1rem;
        grid-template-columns: auto;
        width: 100%;

        > li:not(:first-child) {
            .mega-menu__wrapper--level-2 {
                display: none;
            }
        }
    }

    .mega-menu__wrapper--level-2 {
        display: grid;
        grid-template-columns: subgrid;
        grid-column: 2 / 4;
        padding-right: 0;

        .mega-menu__content--level-2 {
            display: grid;
            grid-template-columns: subgrid;
            grid-column: 1 / 3;
        }

        &.mega-menu__wrapper--level-2--teaser-only .custom-mega-menu-featured-content {
            grid-column: 1 / 3;
        }

        .mega-menu__list--level-2 {
            grid-column: 1 / 2;
            padding-block: var(--mega-menu-block-spacing);
        }

        .custom-mega-menu-featured-content {
            grid-column: 2 / 3;
            grid-template-columns: repeat(var(--teaser-columns, 2), minmax(0, 1fr));
        }
    }
}

.field:after, .select:after, .customer .field:after, .customer select:after, .localization-form__select:after {
    box-shadow: 0 0 0 1px rgba(var(--color-foreground), 0.25);
}