/* STREETWISE PH - Navbar */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  padding: 0 24px; height: 72px;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(10,10,10,0.85); backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(42,37,32,0.5);
  transition: var(--transition);
}
.navbar.scrolled { background: rgba(10,10,10,0.97); box-shadow: var(--shadow-md); }
.nav-brand { font-family: var(--font-display); font-size: 1.5rem; font-weight: 300; letter-spacing: 0.2em; color: var(--accent); }
.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-link { font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); transition: var(--transition); position: relative; }
.nav-link::after { content:''; position:absolute; bottom:-4px; left:0; width:0; height:1px; background:var(--accent); transition:width .3s ease; }
.nav-link:hover, .nav-link.active { color: var(--text-primary); }
.nav-link:hover::after, .nav-link.active::after { width: 100%; }
.nav-actions { display: flex; align-items: center; gap: 16px; }
.nav-cart-btn { position: relative; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); border-radius: var(--radius-sm); transition: var(--transition); }
.nav-cart-btn:hover { color: var(--accent); background: var(--bg-card); }
.cart-badge { position: absolute; top: 2px; right: 2px; background: var(--accent); color: var(--bg-primary); min-width: 18px; height: 18px; border-radius: 9px; font-size: 0.625rem; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 4px; box-sizing: border-box; }
.nav-login-btn { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); padding: 8px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); transition: var(--transition); }
.nav-login-btn:hover { border-color: var(--accent); color: var(--accent); }
.nav-user { display: flex; align-items: center; gap: 10px; }
.nav-user-avatar { width: 32px; height: 32px; background: var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; color: var(--bg-primary); }
.nav-user-name { font-size: 0.8125rem; color: var(--text-secondary); }
.nav-logout { font-size: 0.75rem; color: var(--text-muted); padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); transition: var(--transition); }
.nav-logout:hover { color: var(--danger); border-color: var(--danger); }
.nav-hamburger { display: none; flex-direction: column; gap: 5px; width: 28px; }
.nav-hamburger span { height: 1px; background: var(--text-primary); transition: var(--transition); }
.mobile-menu { display: none; position: fixed; top: 72px; left: 0; right: 0; bottom: 0; background: var(--bg-primary); z-index: 899; padding: 40px 24px; flex-direction: column; gap: 24px; }
.mobile-menu.open { display: flex; }
.mobile-menu .nav-link { font-size: 1.5rem; font-family: var(--font-display); text-transform: none; letter-spacing: 0; font-weight: 300; }