.main__header {
    position: sticky;
    position: -webkit-sticky;
    top: 0px;
    background-color: var(--color-white);
    /* Temp comment out so modals cover the header */
    /*z-index: 200;*/
}

.header-controls {
    display: grid;
    align-items: center;
    border-bottom: 1px solid var(--color-grey-light);
}

.header-controls.cart {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.header-controls__top {
    display: grid;
    grid-template-columns: auto 1fr auto;
}

.header-controls-top__language-wrapper {
    grid-column: 1 / 2;
    grid-row: 1;
    background-color: var(--color-primary-blue);
}

.header-controls-top__controls-wrapper {
    grid-column: 2 / 3;
    grid-row: 1;
    background-color: var(--color-primary-blue);
    padding: 0 1rem 0 1rem;
    display: flex;
    justify-content: flex-end;
    gap: 1.3rem;
    align-items: center;
    padding-right: 2rem;
}

.header-controls-top__controls-wrapper a {
    color: var(--color-white);
    font-size: .8rem;
    text-decoration: none;
}

.header-controls__dashboard,
.header-controls__sign-in,
.header-controls__sign-out,
.header-controls__cart {
    height: 100%;
    display: grid;
    align-items: center;
    justify-items: center;
}

.header-controls__dashboard a,
.header-controls__sign-in a,
.header-controls__sign-out a,
.header-controls__cart a {
    display: block;
}

.header-controls__cart-wrapper {
    min-width: 2.5rem;
    padding-left: .5rem;
}

.header-controls__cart-wrapper svg {
    max-width: 1rem;
}

.header-controls__cart-wrapper a {
    position: relative;
}

.header-controls__cart-wrapper .cart-quantity {
    position: absolute;
    background: none;
    border-radius: 50%;
    width: 1rem;
    height: 1rem;
    line-height: 1rem;
    text-align: center;
    font-size: .7rem;
}

.header-controls__cart-wrapper .cart-quantity.has-items {
    background: var(--color-orange-dark);
}

.header-controls-top__survey-wrapper {
    display: grid;
    grid-column: 3 / 4;
    grid-row: 1 / 3;
    background-color: var(--color-lime-light);
    align-content: center;
    border-bottom-left-radius: 4px;
    
    text-transform: uppercase;
}

.header-controls-top__survey-wrapper a {
    display: block;
    color: var(--color-text);
    font-weight: var(--font-weight-extra-bold);
    font-size: .8rem;
    padding: .5rem 1.8rem .5rem 1.8rem;
    width: 100%;
    height: 100%;
    text-align: center;
}

.header-controls-top__survey-wrapper a:hover {
    text-decoration: none;
}

.header-controls-top__buffer-row {
    grid-column: 1 / 3;
    grid-row: 2;
    background-color: var(--color-white);
}

.header-controls__bottom {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    padding: .2rem 2rem .5rem 2rem;
}

.header-controls-bottom__nav-wrapper {
    justify-self: right;
}

@media only screen and (max-width: 1140px) {
    .header-controls-top__language-wrapper {
        display: none;
    }

    .header-controls__top {
        display: grid;
        grid-template-columns: auto 1fr auto;
        margin-bottom: .5rem;
        position: relative;
        z-index: 9999;
    }

    .header-controls-top__survey-wrapper {
        grid-column: 1 / 3;
        grid-row: 1 / 1;
        justify-items: center;
    }

    .header-controls-top__controls-wrapper {
        grid-column: 3 / 3;
        padding: 0;
        margin: 0;
        gap: 0;
    }

    .header-controls__search,
    .header-controls__sign-out {
        display: none;
    }

    .header-controls__dashboard,
    .header-controls__sign-in {
        border-left: 2px solid var(--color-white);
        border-right: 2px solid var(--color-white);
        padding-right: .5rem;
        padding-left: .5rem;
        text-transform: uppercase;
    }

    .header-controls__cart {
        min-width: 3rem;
    }
}

@media only screen and (max-width: 648px) {
}

.header-controls__bottom-wrapper {
    display: grid;
    grid-template-columns: 1450px;
    justify-content: center;
}

.header-controls-bottom__logo-wrapper a {
    display: block;
    position: relative;
    height: 100%;
    z-index: 9999;
}

.header-controls-bottom__logo-wrapper img {
    width: 195px;
    height: 42px;
}

@media (max-width: 1475px) {
    .header-controls__bottom-wrapper {
        grid-template-columns: 1fr;
    }
}

.header-controls__bottom nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
}

.header-controls__bottom nav li:hover .menu-sub {
    display: block;
}

.header-controls__bottom nav li {
    display: inline-block;
}

.header-controls__bottom .menu-main {
    display: flex;
    gap: 1.5rem;
}

.header-controls__bottom .menu-main a {
    color: #1b313c;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 500;
    font-size: .9rem;
    letter-spacing: 0;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.header-controls__bottom .menu-main a > * {
    display: block;
}

.header-controls__bottom .menu-separator {
    border-left: 1px solid #1b313c;
    margin-left: -10px;
    margin-right: -10px;
}

.header-controls__bottom .menu-purple {
    color: #3b3973 !important;
}

.header-controls__bottom .menu-green {
    color: #15807e !important;
}

.header-controls__bottom .menu-sub {
    position: absolute;
    background: #fff;
    display: none;
    z-index: 3000;
    /* Can change this to 100% to take up full screen */
    width: auto;
    border: 1px solid var(--color-grey-light);
    border-top: 5px solid var(--color-orange);
}

.header-controls__bottom .menu-sub .menu-header {
    border-top: 1px solid var(--color-grey-light);
    border-bottom: 1px solid var(--color-grey-light);
    padding-left: 1rem;
    background-color: var(--color-teal-light);
    color: var(--color-orange);
    font-weight: 600;
    cursor: default;
    font-size: .8rem;
    text-transform: uppercase;
    padding-top: 0;
}

.header-controls__bottom .menu-sub .menu-header.top-margin {
    margin-top: .5rem;
}

.header-controls__bottom .menu-sub.flip-direction {
    margin-right: -200px;
    right: 200px;
}

.header-controls__bottom .menu-sub li {
    display: block;
    padding: .5rem 1rem 0 1rem;
}

.header-controls__bottom .menu-sub li:last-child {
    padding-bottom: .5rem;
}

.header-controls__bottom .menu-sub li a {
    text-transform: none;
    font-size: 1rem;
}

.header-controls__bottom .menu-sub a:hover {
    color: var(--color-orange);
    transition: all .125s ease-in-out;
}

.mobile-nav-toggle {
    display: none;
}

.header-controls__bottom .menu-sub .slide-out-only {
    display: none;
}

.header-controls__bottom .menu-main .menu-separator.first {
    display: none;
}

@media (max-width: 1140px) {
    
    .header-controls__bottom {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .header-controls-bottom__logo-wrapper img {
        width: auto;
        height: 30px;
    }

    .header-controls__bottom .menu-main {
        position: fixed;
        z-index: 1000;
        /* set at 0% to make full width */
        /*inset: 0 0 0 30%;*/
        inset: 0 0 0 0%;
        background: var(--color-white);
        flex-direction: column;
        padding: 1rem;
        border-top: 1px solid var(--color-grey-light);
        border-left: 1px solid var(--color-grey-light);
        overflow-y: scroll;
        overflow-x: hidden;
    }

    

    .header-controls__bottom .menu-main .menu-separator.first {
        display: block;
        margin-top: 90px;
    }

    .header-controls__bottom .menu-sub.flip-direction {
        margin-right: 0;
        right: 0;
    }

    .menu-main .top-menu-item__wrapper {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .top-menu-item__wrapper .chevron {
        width: 1.25rem;
        height: 1.25rem;
    }

    .top-menu-item__wrapper .chevron {
        background-color: transparent;
        background-size: cover;
    }

    .top-menu-item__wrapper .chevron[data-expanded="false"] {
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cg id='Arrow / Chevron_Right'%3E%3Cpath id='Vector' d='M9 5L16 12L9 19' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }

    .top-menu-item__wrapper .chevron[data-expanded="true"] {
        background-image: url("data:image/svg+xml,%3Csvg width='80px' height='80px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath d='M18 8L12.2278 14.7343C12.108 14.8739 11.892 14.8739 11.7722 14.7343L6 8' stroke='%23808080' stroke-width='2' stroke-linecap='round'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    }

    .menu-main .menu-separator {
        border-left: none;
        border-bottom: 1px solid var(--color-grey-light);
        margin: -10px -15px -10px -15px;
    }

    .menu-main {
        transform: translateX(100%);
        transition: transform 350ms ease-out;
    }

    .menu-main[data-visible="true"] {
        transform: translateX(0%);
    }

    .mobile-nav-toggle {
        display: block;
        position: relative;
        z-index: 9999;
        background-image: url("data:image/svg+xml,%3Csvg width='80px' height='80px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath d='M5 7H19' stroke='%230c78af' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath d='M5 12L19 12' stroke='%230c78af' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath d='M5 17L19 17' stroke='%230c78af' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
        background-color: transparent;
        background-size: cover;
        border: 0;
        width: 2rem;
        aspect-ratio: 1;
    }

    .mobile-nav-toggle[aria-expanded="true"] {
        background-image: url("data:image/svg+xml,%3Csvg width='80px' height='80px' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' fill='%23000000'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath fill='%230c78af' d='M195.2 195.2a64 64 0 0 1 90.496 0L512 421.504 738.304 195.2a64 64 0 0 1 90.496 90.496L602.496 512 828.8 738.304a64 64 0 0 1-90.496 90.496L512 602.496 285.696 828.8a64 64 0 0 1-90.496-90.496L421.504 512 195.2 285.696a64 64 0 0 1 0-90.496z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
        background-size: cover;
    }

    .header-controls__bottom .menu-sub {
        position: relative;
        border: none;
        border-top: 1px solid var(--color-grey-light);
        margin-top: 1rem;
        margin-right: 0 !important;
    }

    .header-controls__bottom nav li:hover .menu-sub {
        display: none;
    }

    .header-controls__bottom .menu-sub[data-visible="true"] {
        display: block !important;
    }

    .header-controls__bottom .menu-sub[data-visible="false"] {
        display: none;
    }

    .header-controls__bottom .menu-sub .slide-out-only {
        display: block;
    }

    .header-controls__bottom .menu-sub .menu-header {
        margin-top: .5rem;
    }
}

@media only screen and (max-width: 320px) {
    .header-controls-top__survey-wrapper a {
        text-align: center;
    }
}