.header-background-primary {
    background-color: var(--brand-primary);

    .white-font {
        color: var(--white);
    }

    .nav-link:hover .white-font,
    .nav-link-node-header:hover .white-font {
        color: var(--brand-secondary);
    }

    .nav-link-node-header.show .white-font {
        color: var(--brand-secondary);
    }

    .nav-link[aria-current="page"] .white-font {
        color: var(--brand-secondary);
    }
}

.nav-link-node-header {
    cursor: pointer;
    border-bottom: 2px solid transparent;

    &:hover {
        border-bottom: 2px solid var(--white);
    }
}

.nav-link-node-header {
    cursor: pointer;
    border-bottom: 2px solid transparent;

    &:hover {
        border-bottom: 2px solid var(--white);
    }
}

.megamenu-wrapper {
    .blueprint-links {
        display: flex;
        width: 100%;
        justify-content: space-around;
    }
}

.bpe-dropdown {
    padding: var(--spacing-xl, 32px) var(--spacing-4xl, 80px);

    .container-xl.bpe-height-adjust {
        max-height: unset;
    }
}

/* ---- Do not let parent menu styles interfere ---- */
.nav-dropdown-wrapper.parts {
    display: block !important;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    white-space: normal !important;
}

/* ===== PURE CSS MASONRY (multi-columns) ===== */
.parts-masonry {
    /* tweak these */
    --gap: 16px;
    /* gutter between cards */
    --col-width: 280px;
    /* target column width (browser picks count) */
    --wrap-height: 64vh;
    /* column height before wrapping */

    /* Masonry */
    display: block;
    /* must NOT be flex/grid */
    column-gap: var(--gap);
    column-width: var(--col-width);

    /* control vertical wrap point */
    height: var(--wrap-height);
    column-fill: auto;

    /* if menu lives in a flex row, allow it to shrink */
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow: auto;
    /* scroll if content exceeds wrap-height */
}

/* cards/items */
.parts-masonry .masonry-card {
    display: inline-block;
    width: 100%;
    margin: 0 0 var(--gap);
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    box-sizing: border-box;
}

.parts-masonry .masonry-card .header {
    padding: 10px 12px;
    color: var(--text-link, #3474A4);
    font-family: var(--buttonText-xl-font-family, "Noto Sans");
    font-size: var(--buttonText-xl-font-size, 22px);
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    /* 26.4px */
    letter-spacing: var(--buttonText-xl-letter-spacing, 0);
    text-transform: uppercase;

    .arrow-wrapper {
        position: relative;

        img {
            position: absolute;
            top: 3px;
            left: 10px;

            &.arrow {
                top: 1px;
                left: -3px;
                visibility: hidden;
            }
        }
    }

    &:hover {
        a {
            color: #4495D1 !important;

            img {
                visibility: hidden;

                &.arrow {
                    visibility: visible;
                    top: 5px;
                    left: 15px;
                }
            }
        }
    }
}

.parts-masonry .masonry-card .header a {
    color: inherit;
    text-decoration: none;
}

.parts-masonry .masonry-card .sub-links-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 12px 12px;
}

.parts-masonry .masonry-card .sub-link a {
    color: var(--text-link, #3474A4);
    font-family: var(--buttonText-base-link-font-family, "Noto Sans");
    font-size: var(--buttonText-base-link-font-size, 18px);
    font-style: normal;
    font-weight: 700;
    line-height: 125%;
    /* 22.5px */
    letter-spacing: var(--buttonText-base-link-letter-spacing, 0);
}

.parts-masonry .masonry-card .sub-link a:hover {
    color: var(--brand-primary);
}

@media (min-width: 1200px) {
    .parts-masonry {
        column-count: 5;
        column-width: auto;
    }
}

@media (min-width: 1000px) {
    .parts-masonry {
        column-count: 4;
    }
}

@media (min-width: 800px) {
    .parts-masonry {
        column-count: 3;
    }
}

@media (max-width: 799px) {
    .parts-masonry {
        column-count: 2;
    }
}

.nav-item {
    .nav-link {
        &.font-white {
            color: var(--button-primary-text, #FFF);
            font-family: var(--buttonText-sm-font-family, "Noto Sans");
            font-size: var(--buttonText-sm-font-size, 16px);
            font-style: normal;
            font-weight: 700;
            line-height: 120%;
            /* 19.2px */
            letter-spacing: var(--buttonText-sm-letter-spacing, 0px);
            text-transform: uppercase;
        }
    }
}

/* RESPONSIVE NAV STUFF */
@media (min-width: 1025px) {
    .nav-brand-content {
        flex-direction: row;

        .right {
            padding-left: var(--spacing-3xl, 56px);
        }
    }
}

@media (max-width: 1024px) {
    .nav-brand-content {
        flex-direction: column;

        .right {
            margin-top: 2rem;
        }
    }
}

.nav-dropdown-wrapper {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-3xl, 56px);

    &.engines {
        .sub-links-wrapper {
            max-height: 8.75rem;
        }
    }

    .nav-brand-group {
        display: flex;
        flex-direction: column;
        padding: var(--spacing-xl, 32px) 0;
        align-items: flex-start;
        gap: var(--spacing-3xl, 56px);
        align-self: stretch;

        .nav-brand-item {
            color: var(--text-link, #3474A4);
            font-family: var(--buttonText-base-font-family, "Noto Sans");
            font-size: var(--buttonText-base-font-size, 18px);
            font-style: normal;
            font-weight: 700;
            line-height: 125%;
            /* 22.5px */
            letter-spacing: var(--buttonText-base-letter-spacing, 0px);
            text-transform: uppercase;
            cursor: pointer;

            padding: 0px 4px var(--spacing-md, 16px) 4px;
        }

        .blue-separator {
            display: block;
            visibility: hidden;
            height: 2px;
            align-self: stretch;
            background-color: var(--button-primary, #151A41);
        }

        .nav-brand-wrapper {
            white-space: nowrap;

            &:hover {
                .nav-brand-item {
                    color: #4495D1 !important;
                }

                .blue-separator {
                    visibility: visible;
                }

            }
        }

        .nav-brand-wrapper.active {
            .nav-brand-item {
                color: #4495D1 !important;
            }

            .blue-separator {
                visibility: visible;
            }
        }
    }

    .nav-brand-content {
        display: none;
        width: 100%;
        /* flex-direction: column; */


        &.active {
            display: flex;
        }

        .left {
            flex-basis: 350px;
            display: flex;
            flex-direction: column;
            gap: var(--spacing-lg, 24px);

            .brand-title {
                color: var(--headline-h1-color, #363337);
                font-family: var(--headline-h4-font-family, Roboto);
                font-size: var(--headline-h4-font-size, 28px);
                font-style: normal;
                font-weight: 700;
                line-height: 120%;
                /* 33.6px */
                letter-spacing: var(--headline-h4-letter-spacing, 3.5px);
                text-transform: uppercase;
            }

            .shop-all-link {
                color: var(--text-link, #3474A4);
                display: flex;
                font-family: var(--buttonText-xl-font-family, "Noto Sans");
                font-size: var(--buttonText-xl-font-size, 22px);
                font-style: normal;
                font-weight: 700;
                line-height: 120%;
                /* 26.4px */
                letter-spacing: var(--buttonText-xl-letter-spacing, 0px);
                text-transform: uppercase;

                &:after {
                    display: inline-block;
                    content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IkxpbmsgSWNvbiI+CjxwYXRoIGlkPSJJY29uIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTguNzUxNSAxNy42NDg1QzguMjgyODcgMTcuMTc5OSA4LjI4Mjg3IDE2LjQyMDEgOC43NTE1IDE1Ljk1MTVMMTIuNzAzIDEyTDguNzUxNSA4LjA0ODUzQzguMjgyODcgNy41Nzk5IDguMjgyODcgNi44MjAxIDguNzUxNSA2LjM1MTQ3QzkuMjIwMTMgNS44ODI4NCA5Ljk3OTkyIDUuODgyODQgMTAuNDQ4NiA2LjM1MTQ3TDE1LjI0ODYgMTEuMTUxNUMxNS43MTcyIDExLjYyMDEgMTUuNzE3MiAxMi4zNzk5IDE1LjI0ODYgMTIuODQ4NUwxMC40NDg2IDE3LjY0ODVDOS45Nzk5MiAxOC4xMTcyIDkuMjIwMTMgMTguMTE3MiA4Ljc1MTUgMTcuNjQ4NVoiIGZpbGw9IiMzNDc0QTQiLz4KPC9nPgo8L3N2Zz4K");
                    height: 30px;
                    position: relative;
                    left: 10px;
                    top: 2px;
                }

                &:hover {
                    color: var(--brand-primary);

                    &:after {
                        content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMCAyMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IkxpbmsgSWNvbiI+CjxwYXRoIGlkPSJJY29uIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTEyLjI5MjkgNS43OTI4OUMxMi42ODM0IDUuNDAyMzcgMTMuMzE2NiA1LjQwMjM3IDEzLjcwNzEgNS43OTI4OUwxNy43MDcxIDkuNzkyODlDMTguMDk3NiAxMC4xODM0IDE4LjA5NzYgMTAuODE2NiAxNy43MDcxIDExLjIwNzFMMTMuNzA3MSAxNS4yMDcxQzEzLjMxNjYgMTUuNTk3NiAxMi42ODM0IDE1LjU5NzYgMTIuMjkyOSAxNS4yMDcxQzExLjkwMjQgMTQuODE2NiAxMS45MDI0IDE0LjE4MzQgMTIuMjkyOSAxMy43OTI5TDE0LjU4NTggMTEuNUgzQzIuNDQ3NzIgMTEuNSAyIDExLjA1MjMgMiAxMC41QzIgOS45NDc3MiAyLjQ0NzcyIDkuNSAzIDkuNUgxNC41ODU4TDEyLjI5MjkgNy4yMDcxMUMxMS45MDI0IDYuODE2NTggMTEuOTAyNCA2LjE4MzQyIDEyLjI5MjkgNS43OTI4OVoiIGZpbGw9IiMwQzQ2NzEiLz4KPC9nPgo8L3N2Zz4K");
                    }
                }
            }
        }

        .right {
            width: 100%;
            flex: 1;
            display: flex;
            flex-direction: row;
            gap: 56px var(--spacing-3xl, 56px);
            flex-wrap: wrap;


        }
    }

    .sub-group {
        display: flex;
        flex-direction: column;

        .header {
            a {
                color: var(--text-link, #3474A4);
                display: flex;
                gap: 1rem;

                .arrow-wrapper {
                    position: relative;

                    img {
                        position: absolute;
                        top: 0;
                        left: 0;

                        &.arrow {
                            top: 1px;
                            left: -3px;
                            visibility: hidden;
                        }
                    }
                }
            }

            &:hover {
                a {
                    color: var(--brand-primary);

                    img {
                        visibility: hidden;

                        &.arrow {
                            visibility: visible;
                        }
                    }
                }
            }

            display: flex;
            font-family: var(--buttonText-xl-font-family, "Noto Sans");
            font-size: var(--buttonText-xl-font-size, 22px);
            font-style: normal;
            font-weight: 700;
            line-height: 120%;
            /* 26.4px */
            letter-spacing: var(--buttonText-xl-letter-spacing, 0px);
            text-transform: uppercase;
        }

        .sub-links-wrapper {
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            gap: 1rem;
            margin-top: var(--spacing-lg, 24px);

            &.Ford {
                max-height: unset;
            }

            &.builder-series {
                margin-top: 0;

                .sub-link {
                    margin-top: 8px;
                }
            }

            .dark-link-wrapper {
                margin-top: var(--spacing-lg, 24px);
            }

            .sub-link {
                a {
                    color: var(--text-link, #3474A4);
                }

                font-family: var(--buttonText-base-font-family, "Noto Sans");
                font-size: var(--buttonText-base-font-size, 18px);
                font-style: normal;
                font-weight: 700;
                line-height: 125%;
                letter-spacing: var(--buttonText-base-letter-spacing, 0px);

                &.dark-header {
                    a {
                        color: var(--headline-h6-color, #363337);
                    }

                    font-family: var(--headline-xs-font-family, Roboto);
                    font-size: var(--headline-xs-font-size, 14px);
                    font-style: normal;
                    font-weight: 700;
                    line-height: 120%;
                    /* 16.8px */
                    letter-spacing: var(--headline-xs-letter-spacing, 1.75px);
                    text-transform: uppercase;
                }

                &:hover {
                    a {
                        color: var(--brand-primary);
                    }
                }
            }
        }
    }

    &.pages-wrapper {
        display: flex;
        width: 100%;
        justify-content: space-evenly;

        .pages-nav {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: var(--spacing-lg, 24px);
            flex: 1;
            width: 100%;

            a {
                display: flex;
                gap: var(--spacing-lg, 24px);
                flex-direction: column;
            }

            .nav-image-wrapper {
                position: relative;
                width: 100%;
                height: 250px;

                img {
                    display: flex;
                    width: 100%;
                }
            }

            .pages-link {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                gap: var(--spacing-sm, 8px);
                align-self: stretch;

                .first {
                    color: var(--text-link, #3474A4);
                    font-family: var(--buttonText-xl-font-family, "Noto Sans");
                    font-size: var(--buttonText-xl-font-size, 22px);
                    font-style: normal;
                    font-weight: 700;
                    line-height: 120%;
                    /* 26.4px */
                    letter-spacing: var(--buttonText-xl-letter-spacing, 0px);
                    text-transform: uppercase;
                    height: 30px;

                    &:after {
                        display: inline-block;
                        content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IkxpbmsgSWNvbiI+CjxwYXRoIGlkPSJJY29uIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTguNzUxNSAxNy42NDg1QzguMjgyODcgMTcuMTc5OSA4LjI4Mjg3IDE2LjQyMDEgOC43NTE1IDE1Ljk1MTVMMTIuNzAzIDEyTDguNzUxNSA4LjA0ODUzQzguMjgyODcgNy41Nzk5IDguMjgyODcgNi44MjAxIDguNzUxNSA2LjM1MTQ3QzkuMjIwMTMgNS44ODI4NCA5Ljk3OTkyIDUuODgyODQgMTAuNDQ4NiA2LjM1MTQ3TDE1LjI0ODYgMTEuMTUxNUMxNS43MTcyIDExLjYyMDEgMTUuNzE3MiAxMi4zNzk5IDE1LjI0ODYgMTIuODQ4NUwxMC40NDg2IDE3LjY0ODVDOS45Nzk5MiAxOC4xMTcyIDkuMjIwMTMgMTguMTE3MiA4Ljc1MTUgMTcuNjQ4NVoiIGZpbGw9IiMzNDc0QTQiLz4KPC9nPgo8L3N2Zz4K");
                        height: 30px;
                        position: relative;
                        left: 10px;
                        top: 3px;
                    }

                    &:hover {
                        color: var(--brand-primary);

                        &:after {
                            content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMCAyMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IkxpbmsgSWNvbiI+CjxwYXRoIGlkPSJJY29uIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTEyLjI5MjkgNS43OTI4OUMxMi42ODM0IDUuNDAyMzcgMTMuMzE2NiA1LjQwMjM3IDEzLjcwNzEgNS43OTI4OUwxNy43MDcxIDkuNzkyODlDMTguMDk3NiAxMC4xODM0IDE4LjA5NzYgMTAuODE2NiAxNy43MDcxIDExLjIwNzFMMTMuNzA3MSAxNS4yMDcxQzEzLjMxNjYgMTUuNTk3NiAxMi42ODM0IDE1LjU5NzYgMTIuMjkyOSAxNS4yMDcxQzExLjkwMjQgMTQuODE2NiAxMS45MDI0IDE0LjE4MzQgMTIuMjkyOSAxMy43OTI5TDE0LjU4NTggMTEuNUgzQzIuNDQ3NzIgMTEuNSAyIDExLjA1MjMgMiAxMC41QzIgOS45NDc3MiAyLjQ0NzcyIDkuNSAzIDkuNUgxNC41ODU4TDEyLjI5MjkgNy4yMDcxMUMxMS45MDI0IDYuODE2NTggMTEuOTAyNCA2LjE4MzQyIDEyLjI5MjkgNS43OTI4OVoiIGZpbGw9IiMwQzQ2NzEiLz4KPC9nPgo8L3N2Zz4K");
                        }
                    }
                }

                .second {
                    p {
                        a {
                            color: var(--text-link, #3474A4);
                            /* buttonText/base-link */
                            font-family: var(--buttonText-base-link-font-family, "Noto Sans");
                            font-size: var(--buttonText-base-link-font-size, 18px);
                            font-style: normal;
                            font-weight: 700;
                            line-height: 125%;
                            /* 22.5px */
                            letter-spacing: var(--buttonText-base-link-letter-spacing, 0px);
                        }
                    }
                }
            }
        }
    }
}

.bpe-dropdown {
    left: 0;
    top: 115px;
    position: fixed;
}

.white-search {
    svg {
        stroke: #fff;
        stroke-width: 3px;
    }
}



/* SEARCH DROPDOWN STUFF */
.mobile-search {
    .text-reset {
        display: none;
    }

    .search-modal {
        .search-window {
            display: block;
            position: absolute;
            left: 0;
            width: 100%;
            padding: 0 1rem;
            z-index: 1;

            .type-ahead-field {
                box-shadow: none;
                border-bottom: 1px solid;
                border-bottom-color: rgba(51, 51, 51, 0.3);
            }

            .button-search-glass {
                display: block;
            }

            .button-search-close {
                display: none;
            }

            .dropdown-results {
                flex-direction: column;
                width: 100vw;
                position: absolute;
                margin-left: 50%;
                transform: translateX(-50%);
                border: none;
                margin-top: 25px;
                padding: 0 15px;

                .text-suggestions {
                    border-right: none;
                    border-bottom: 1px solid;
                    border-bottom-color: rgba(51, 51, 51, 0.3);
                    padding-bottom: 25px;
                }

                .product-suggestions {
                    width: 100%;

                    .list {
                        margin-top: 15px;

                        .search-product-card {
                            flex-direction: column;
                            align-items: center;
                            width: 100%;

                            .product-details {
                                padding: 20px;

                                .button {
                                    width: 100%;
                                }
                            }
                        }

                        .all-link {
                            width: 100%;

                            .button-offset {
                                margin: 25px auto;
                            }
                        }
                    }
                }
            }
        }
    }
}

.type-ahead-dropdown {
    .type-ahead-menu {
        .dropdown-item {
            display: flex;
            padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
            justify-content: space-between;
            align-items: center;
            align-self: stretch;
        }

        .dropdown-item>a {
            display: block;
            width: 100%;
        }
    }
}

.dropdown-results {
    flex-direction: row;
    width: 100%;

    .text-suggestions {
        display: flex;
        flex-direction: column;
        border-right: 2px solid;
        border-right-color: var(--brand-primary, #151A41);
        padding-right: var(--spacing-xl, 32px);
        text-transform: uppercase;
    }

    .dropdown-item {
        &:hover {
            text-decoration: none !important;
        }

        .search-product-card {
            display: flex;
            flex-direction: row;
            padding: var(--spacing-none, 0px);
            justify-content: center;
            align-items: flex-start;
            gap: var(--spacing-lg, 24px);
            align-self: stretch;
            border-radius: var(--radius-none, 0px);
            border: 1px solid var(--card-card-border, #CFCFCF);
            background: var(--card-card, #F6F6F6);

            .product-details {
                display: flex;
                padding: var(--spacing-md, 16px) var(--spacing-md, 16px) var(--spacing-md, 16px) var(--spacing-none, 0px);
                flex-direction: column;
                align-items: flex-start;
                gap: var(--spacing-md, 16px);
                flex: 1 0 0;
                height: 100%;
                justify-content: space-around;

                &:hover {
                    text-decoration: none !important;
                }

                .product-name {
                    color: var(--text-headline, #363337);
                    font-family: var(--body-base-font-family, "Noto Sans");
                    font-size: var(--body-base-font-size, 18px);
                    font-style: normal;
                    font-weight: 400;
                    line-height: 140%;
                    /* 25.2px */
                    letter-spacing: var(--body-base-letter-spacing, 0px);

                }

                .product-price {
                    color: var(--body-base-color, #5A565C);
                    font-family: var(--body-base-font-family, "Noto Sans");
                    font-size: var(--body-base-font-size, 18px);
                    font-style: normal;
                    font-weight: 700;
                    line-height: 140%;
                    /* 25.2px */
                    letter-spacing: var(--body-base-letter-spacing, 0px);
                }

                .button {
                    display: flex;
                    padding: var(--button-spacing-sm-y, 12px) var(--button-spacing-sm-x, 28px);
                    justify-content: center;
                    align-items: center;
                    gap: 8px;
                    border-radius: var(--button-border-radius, 0px);
                    background: var(--button-primary, #151A41);
                    box-shadow: 0px 1px 2px 0px rgba(43, 48, 64, 0.05);
                    color: var(--button-primary-text, #FFF);
                    font-family: var(--buttonText-sm-font-family, "Noto Sans");
                    font-size: var(--buttonText-sm-font-size, 16px);
                    font-style: normal;
                    font-weight: 700;
                    line-height: 120%;
                    /* 19.2px */
                    letter-spacing: var(--buttonText-sm-letter-spacing, 0px);
                    text-transform: uppercase;
                }

                &:hover {
                    text-decoration: underline;
                }
            }

            &:hover {
                .button {
                    background: var(--button-secondary, #151A41);
                }
            }
        }

        &.all-link {}
    }
}

.search-window {
    display: none;
    position: absolute;
    left: 0;
    width: 100%;
    padding: 0 0 0 2rem;
    z-index: 1;

    .button-search-glass {
        display: none;
    }

    &.show {
        display: block;
    }
}

.dropdown-results.dropdown-menu.show {
    border-radius: 0 !important;
    display: flex;
    padding: var(--spacing-xl, 32px);
    gap: var(--spacing-xl, 32px);
}

.no-border-radius {
    border-radius: 0 !important;
}

input.form-control.type-ahead-field {
    color: var(--form-filled, #363337) !important;
    font-family: var(--body-sm-font-family, "Noto Sans");
    font-size: var(--body-sm-font-size, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 22.4px */
    letter-spacing: var(--body-sm-letter-spacing, 0px);
}

.dropdown-menu-title {
    color: var(--text-headline, #363337);
    font-family: var(--headline-h5-font-family, Roboto);
    font-size: var(--headline-h5-font-size, 22px);
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    /* 26.4px */
    letter-spacing: var(--headline-h5-letter-spacing, 2.75px);
    text-transform: uppercase;
}

.bpe-mobile-navigation {
    position: absolute;
    background-color: white;
    top: 74px;
    left: 0;
    height: 92vh;
    width: 100vw;
    display: none;
    z-index: 10;
    flex-direction: column;
    overflow-y: scroll;

    &.active {
        display: block;
    }

    .mobile-wrapper {
        display: flex;
        flex-direction: column;
        gap: 100px;
        height: 100%;
        margin-top: 50px;

        .navigation {
            margin-top: var(--spacing-lg, 32px);
            padding: 0 1rem;

            .main {
                color: var(--text-link, #3474A4);
                font-family: var(--buttonText-base-font-family, "Noto Sans");
                font-size: var(--buttonText-base-font-size, 18px);
                font-style: normal;
                font-weight: 700;
                line-height: 125%;
                /* 22.5px */
                letter-spacing: var(--buttonText-base-letter-spacing, 0px);
                text-transform: uppercase;

                .subNav-header {
                    width: 100%;
                    padding-bottom: var(--spacing-md, 16px);
                    padding-top: var(--spacing-md, 16px);
                    border-top: 1px solid;
                    border-top-color: var(--divider, rgba(0, 0, 0, 0.12));
                    display: flex;
                    justify-content: space-between;
                }

                a {
                    color: inherit;
                    width: 100%;
                }

                .mobile-subNav {
                    background-color: var(--white);
                    display: none;
                    height: 100%;
                    left: 0;
                    padding: var(--spacing-lg, 32px) var(--spacing-md, 16px);
                    position: absolute;
                    top: 0;
                    width: 100%;
                    z-index: 1;

                    &.active {
                        display: block;
                    }

                    .mobile-back {
                        display: flex;
                        width: 37px;
                        height: 37px;
                        padding: 5px;
                        justify-content: center;
                        align-items: center;
                        background: var(--button-primary, #151A41);
                        box-shadow: 0px 1px 2px 0px rgba(43, 48, 64, 0.05);
                    }

                    .link-wrapper {
                        margin-top: var(--spacing-lg, 32px);

                        .title {
                            color: var(--text-headline, #363337);
                        }

                        .accordion {
                            margin-top: var(--spacing-lg, 32px);

                            .nav-group {
                                display: flex;
                                justify-content: space-between;
                                width: 100%;
                                padding: var(--spacing-md, 16px) 0;


                                &[aria-expanded="true"] {
                                    .accordion-header {
                                        .plus {
                                            display: none;
                                        }

                                        .minus {
                                            display: block;
                                        }
                                    }
                                }

                                &[aria-expanded="false"] {
                                    .accordion-header {
                                        .plus {
                                            display: block;
                                        }

                                        .minus {
                                            display: none;
                                        }
                                    }
                                }

                                &.all-link-wrapper {
                                    margin-top: 16px;
                                }

                                &.level-0 {
                                    border-top: 1px solid;
                                    border-top-color: var(--divider, rgba(0, 0, 0, 0.12));
                                }

                                &.level-1 {
                                    padding: var(--spacing-sm, 8px) 0;
                                    background: var(--grey-1, #F6F6F6);

                                    &[aria-expanded="true"] {
                                        .level-1-header:not(.all-link) {
                                            border-bottom: 1px solid;
                                            border-bottom-color: var(--divider, rgba(0, 0, 0, 0.12));
                                        }
                                    }
                                }

                                &.level-3 {
                                    text-indent: 64px;
                                }

                                .group-link {
                                    display: flex;
                                    justify-content: space-between;

                                    .accordion-header {
                                        display: flex;
                                        width: 100%;
                                        flex-direction: row;
                                        justify-content: space-between;
                                    }
                                }

                                .accordion-group {
                                    width: 100%;

                                    .non-click {
                                        color: var(--text-link-tertiary, #151A41);
                                    }

                                    .accordion-inner {
                                        display: flex;
                                        flex-direction: column;
                                        gap: var(--spacing-md);
                                        margin-top: var(--spacing-md);

                                        .level-1-header {
                                            display: flex;
                                            padding: var(--spacing-md, 16px);
                                            align-items: flex-start;
                                            align-self: stretch;
                                        }

                                        .level-2-header {
                                            display: flex;
                                            padding: var(--spacing-lg, 32px);
                                            align-items: flex-start;
                                            align-self: stretch;
                                        }

                                    }

                                    .accordion-header {
                                        display: flex;
                                        width: 100%;
                                        flex-direction: row;
                                        justify-content: space-between;
                                    }
                                }

                            }
                        }
                    }
                }
            }
        }
    }
}


/* MOBILE MENU MISC */

button.nav-toggle {
    .hamburger {
        display: block;
    }

    .menu-close {
        display: none;
    }

    &.active {
        .hamburger {
            display: none;
        }

        .menu-close {
            display: block;
        }
    }
}