.navbar{display:flex;justify-content:space-between;align-items:center;padding:0 24px;height:64px;background-color:white;position:fixed;top:0;width:100%;z-index:1000}.navbar.scrolled{box-shadow:0 2px 4px rgba(0,0,0,.1)}.navbar__left{display:flex;align-items:center;gap:8px}.navbar__logo-image{object-fit:contain}.navbar__brand{font-size:1.5rem;font-weight:700;color:#333}.navbar__center{display:flex;gap:20px;list-style:none}.navbar__center li a{color:#333;text-decoration:none;font-weight:500}.navbar__center li a:hover{color:#0CBC87}.navbar__right{display:flex;align-items:center;gap:10em}.navbar__cart-icon{font-size:1.2rem;cursor:pointer}.navbar__login-btn{color:white;padding:8px 16px;border-radius:6px;text-decoration:none;font-weight:600;transition:background-color .3s ease}.navbar__login-btn,.navbar__login-btn:hover{background-color:#0CBC87}.navbar.hidden{transform:translateY(-100%)}.navbar__logo{font-size:1.5rem;font-weight:700}.navbar__hamburger{display:flex;flex-direction:column;justify-content:space-between;height:20px;width:30px;cursor:pointer;z-index:20}.navbar__bar{height:4px;width:100%;background-color:#333333;transition:transform .3s ease,opacity .3s ease}.navbar__hamburger--open .navbar__bar:first-child{transform:rotate(45deg) translate(5px,5px)}.navbar__hamburger--open .navbar__bar:nth-child(2){opacity:0}.navbar__hamburger--open .navbar__bar:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}.navbar__menu{position:absolute;top:100%;left:0;width:100%;background-color:#9995da;border-top:1px solid #dddddd;max-height:0;display:flex;flex-direction:column;overflow:hidden;transition:max-height .4s ease}.navbar__menu--open{max-height:300px}.navbar__item{list-style:none}.navbar__link{display:block;padding:16px;text-decoration:none;color:#333333;transition:background-color .3s ease}.navbar__link:hover{background-color:#f0f0f0;border-radius:5px}@media (min-width:768px){.navbar__menu{position:static;max-height:none;display:flex;flex-direction:row;gap:16px;border-top:none}.navbar__menu--open{display:flex}.navbar__link{padding:0 16px}.navbar__hamburger{display:none}}.navbar__user,.navbar__user-info{display:flex;align-items:center;gap:8px}.navbar__avatar{height:32px;width:32px;border-radius:50%;object-fit:cover}.navbar__username{font-size:1rem;color:#333333}