/* 
* File name: main_header_2025_09.css 
*/

.navigation_desktop_2025{
    display:grid;
    grid-template-columns:10% 65% 10% 15%;
}

.userAccountMenu,
.userLogin{
    position:relative;
    display:flex;
    justify-content:flex-end;
}

.toggleUserAccountMenu,
.toggleUserAccountLogin{
    color:white;
    font-size:large;
    text-decoration:underline;
    display:flex;
    position:relative;
    padding:8px;
    width:fit-content;
    cursor:pointer;
}

.userAccountDropdownContent{
    display:none;
    top:82%;
    background:white;
    min-width:160px;
    box-shadow:0px 8px 16px rgba(0,0,0,0.2);
}

.userAccountDropdownContent.show{
    display:block;
}

.dropdownMenuItem{
    padding:12px 16px;
    cursor:pointer;
    border:none;
    background:none;
    width:100%;
    text-align:left;
    display: block;
}

.dropdownMenuItem:hover{
    background-color:rgb(241,241,241);
}

.desktop_menu_cart_container{
    margin-right: 3em;
}

@media(max-width: 400px){
    .navigation_desktop_2025{
        grid-template-columns: 8% 62% 12% 18%;
    }
    .userAccountMenu{
        align-items:center;
    }
    .userLogin{
        align-items:center;
    }
}

@media(min-width: 401px) and (max-width: 600px){
    .navigation_desktop_2025{
        grid-template-columns:15% 55% 15% 15%;
    }
    .userAccountMenu{
        align-items:center;
    }
    .userLogin{
        align-items:center;
    }
    
}

@media(max-width: 601px){
    .userAccountDropdownContent{
        top:110%;
    }
}

@media(min-width: 601px) and (max-width: 810px){
    .navigation_desktop_2025{
        grid-template-columns: 10% 70% 10% 10%;
    }
}


@media(max-width: 920px){
    .desktop_menu_cart_container{
        align-self:auto;
        margin-right:0em;
    }
}


@media(min-width: 1280px){
    .desktop_menu_cart_container{
        margin-right:7em;
    }
    
}