.header {
    display: block;
    top: 0;
    left: 0;
    right: 0;
    position: fixed;
    background-color: #000000;
    z-index: 101;
    width: 100%;
    padding-top: max(30px, calc(2.08vw * var(--scale)));
    padding-bottom: max(30px, calc(2.08vw * var(--scale)));
    transition: background-color 0.2s ease;
}

html[data-navigation-bar-background-color="Default Background Color"] .header {
    background-color: var(--background-color);
}

.background-blur {
    background-color: transparent;
    z-index: 99;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.2s ease;
    display: none;
    pointer-events: none;
}

.navbar-inner {
    display: flex;
    align-items: center;
}

.logo-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8vw;
}

.logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-image {
    height: max(calc(12px * var(--logo-scale)), calc(0.83vw * var(--logo-scale) * var(--scale)));
    width: auto;
}

.navbar-links-outer {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.navbar-links-inner {
    display: flex;
    justify-content: center;
    column-gap: max(28px, calc(1.94vw * var(--scale)));
}

.nav {
    display: none;
    align-items: center;
    flex-wrap: wrap;
    column-gap: max(28px, calc(1.94vw * var(--scale)));
    row-gap: max(12px, calc(0.83vw * var(--scale)));
}

.nav li {
    list-style-type: none;
    position: relative;
}

html[data-cta-style="Square Bracket"] .nav li {
    display: flex;
}

.nav-link, .links-label {
    line-height: 120%;
    position: relative;
}

.secondary-links .nav-link {
    width: 100%;
}

.links-label {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.nav li:hover .secondary-links, .nav .secondary-links:focus-within {
    opacity: 1;
    pointer-events: all;
}

.nav li:hover .dropdown-icon .dropdown-vertical-line {
    height: 0%;
}

.secondary-links {
    position: absolute;
    bottom: 0px;
    left: 0px;
    transform: translateY(100%);  
    opacity: 0;
    pointer-events: none;
    transition-duration: 0.3s;
    transition-property: opacity;
    z-index: 2;
    width: max(180px, calc(12.5vw * var(--scale)));
}

html[data-navigation-bar-background-color="Default Background Color"] .secondary-links {
    background-color: var(--background-color);
    left: max(-18px, calc(-1.25vw * var(--scale)));
    border-radius: 6px;
}

.secondary-links-inner {
    margin-top: max(10px, calc(0.69vw * var(--scale)));
    display: flex;
    flex-direction: column;
    gap: max(10px, calc(0.69vw * var(--scale)));
    align-items: flex-start;
}

html[data-navigation-bar-background-color="Default Background Color"] .secondary-links-inner {
    padding: max(20px, calc(1.39vw * var(--scale))) max(18px, calc(1.25vw * var(--scale)));
    border: 1px solid var(--text-color-20);
    border-radius: 6px;
    gap: max(6px, calc(0.42vw * var(--scale)));
}

.secondary-links-inner li {
    opacity: 0;
    transform: translateY(10px);
}

.dropdown-icon {
    height: max(9px, calc(0.63vw * var(--scale)));
    width: max(9px, calc(0.63vw * var(--scale)));
    min-width: max(9px, calc(0.63vw * var(--scale)));
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    margin-left: max(5px, calc(0.35vw * var(--scale)));
    opacity: 0.7;
}

.dropdown-vertical-line {
    height: 100%;
    position: absolute;
    width: 1px;
    background-color: var(--text-color);
    transition: height 0.3s;
}

.dropdown-horizontal-line {
    width: 100%;
    position: absolute;
    height: 1px;
    background-color: var(--text-color);
}

.navbar-links {
    display: flex;
    align-items: center;
    gap: max(28px, calc(1.94vw * var(--scale)));
}

.navbar-account-links {
    display: flex;
    align-items: center;
    gap: max(28px, calc(1.94vw * var(--scale)));
}

.account-links-border {
    height: max(14px, calc(0.97vw * var(--scale)));
    width: 1px;
    opacity: 0.7;
    background-color: var(--text-color);
}

.account-link {
    white-space: nowrap;
}

.mobile-navbar-links {
    display: none;
}

.desktop-navbar {
    display: block !important;
    opacity: 1 !important;
    height: auto !important;
}

@media (max-width: 991px) { 
    .header {
        background-color: var(--background-color);
    }

    .mobile-navbar-links {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-left: auto;
    }

    .mobile-navbar-link {
        display: flex;
    }

    .search-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        min-width: 18px;
        height: 18px;
    }

    .account-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 16px;
        min-width: 16px;
        height: 16px;
    }

    .navbar-account-links * {
        display: none;
    }

    .navbar-account-links .mobile-account-link {
        display: block;
    }

    .navbar-links-outer {
        text-align: center;
        position: absolute;
        background-color: var(--background-color);
        height: calc(100dvh);
        transform: translateY(100%);
        left: 0;
        right: 0;
        bottom: 0;
        display: none;
        opacity: 0;
        flex-direction: column;
        justify-content: center;
        margin-left: 0;
    }

    .navbar-links-inner {
        justify-content: flex-start;
        flex-direction: column;
        align-items: center;
        row-gap: 24px;
        overflow-y: auto;
        display: flex;
        width: 100%;
        padding-top: 15vh;
        padding-bottom: 17vh;
    }

    .nav {
        flex-direction: column;
        row-gap: 14px;
        border-bottom: 1px solid var(--text-color);
        padding-bottom: 22px;
        min-width: 210px;
    }

    .nav-link, .links-label {
        font-size: 20px;
        width: fit-content;
    }

    .secondary-links {
        position: static;
        transform: unset;
        opacity: 1;
        pointer-events: none;
        transition-duration: 0.15s;
        transition-property: height;
        height: 0px;
        overflow: hidden;
        width: 100%;
    }

    html[data-navigation-bar-background-color="Default Background Color"] .secondary-links {
        background-color: transparent;
        left: 0;
        border-radius: 0px;
    }

    .secondary-links-inner {
        align-items: center;
        padding-top: 22px;
        padding-bottom: 22px;
        margin-top: 22px;
        border: none;
        row-gap: 14px;
        border-top: 1px solid var(--text-color);
        border-bottom: 1px solid var(--text-color);
        overflow: hidden;
    }

    html[data-navigation-bar-background-color="Default Background Color"] .secondary-links-inner {
        padding: 22px 0px;
        border: none;
        border-top: 1px solid var(--text-color);
        border-bottom: 1px solid var(--text-color);
        border-radius: 0px;
        row-gap: 14px;
    }

    .nav li {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .secondary-links .nav-link {
        font-size: 18px;
        padding: 0px;
        border-bottom: none;
        width: fit-content;
    }

    .mobile-account-link {
        font-size: 20px;
    }

    .secondary-links-inner li {
        opacity: 1 !important;
        transform: translateY(0px) !important;
    }

    .nav li:hover .dropdown-icon .dropdown-vertical-line {
        height: 100%;
    }

    .dropdown-icon {
        position: absolute;
        right: -5px;
        transform: translateX(100%);
    }
}

@media (max-width: 479px) { 
    .header {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .mobile-navbar-links {
        flex-wrap: wrap;
        gap: 6px;
        justify-content: flex-end;
    }

    .navbar-links-inner {
        row-gap: 18px;
    }

    .nav {
        row-gap: 12px;
        padding-bottom: 18px;
        min-width: 186px;
    }

    .nav-link, .links-label {
        font-size: 18px;
    }

    .secondary-links-inner {
        padding-top: 18px;
        padding-bottom: 18px;
        margin-top: 18px;
        row-gap: 12px;
    }

    html[data-navigation-bar-background-color="Default Background Color"] .secondary-links-inner {
        padding-top: 18px;
        padding-bottom: 18px;
        row-gap: 12px;
    }
    
    .secondary-links .nav-link {
        font-size: 16px;
    }

    .mobile-account-link {
        font-size: 18px;
    }
}