:root { --sj-header-height: 72px; --sj-header-red: #e73546; --sj-header-text: #f5f7fb; --sj-header-muted: #a2acba; }
html, body { overflow-x: hidden; }
.main-header, .site-header { position: sticky; top: 0; z-index: 1000; width: 100%; background: transparent !important; border: 0 !important; box-shadow: none !important; transition: background .2s ease, border-color .2s ease, backdrop-filter .2s ease; }
.main-header.scrolled, .site-header.scrolled { background: rgba(7,9,13,.68) !important; border-bottom: 1px solid rgba(255,255,255,.06) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
@supports not ((backdrop-filter: blur(1px))) { .main-header.scrolled, .site-header.scrolled { background: rgba(7,9,13,.92) !important; } }
.header-container, .header-inner { min-height: var(--sj-header-height); }
.main-header .nav-link, .site-header .desktop-nav a { color: var(--sj-header-muted); transition: color .18s ease; }
.main-header .nav-link:hover, .main-header .nav-link.active, .site-header .desktop-nav a:hover, .site-header .desktop-nav a.active { color: var(--sj-header-text); }
.main-header .nav-link.active::after, .site-header .desktop-nav a.active::after { background: var(--sj-header-red); }
.main-header .header-logo, .site-header .brand img { width: 42px; height: 42px; object-fit: cover; }
.main-header .icon-wrapper, .main-header .hamburger, .main-header .user-btn, .main-header .admin-btn, .site-header .menu-toggle { background: transparent; border-color: transparent; }
.main-header .icon-wrapper:hover, .main-header .hamburger:hover, .main-header .user-btn:hover, .main-header .admin-btn:hover, .site-header .menu-toggle:hover { background: rgba(255,255,255,.07); }
.main-header .badge, .site-header .badge { display: none; }
.main-header .badge:not(:empty), .site-header .badge:not(:empty) { display: inline-grid; }
.main-header .user-dropdown, .site-header .mobile-nav { background: rgba(13,18,25,.96); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 18px 45px rgba(0,0,0,.32); }
.main-header .mobile-overlay { background: rgba(0,0,0,.58); }
.main-header .user-name, .site-header .account-action span { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 768px) { :root { --sj-header-height: 62px; } .main-header .main-nav, .site-header .desktop-nav { display: none; } .main-header .header-logo, .site-header .brand img { width: 36px; height: 36px; } }
@media (prefers-reduced-motion: reduce) { .main-header, .site-header, .main-header *, .site-header * { transition-duration: .01ms !important; } }

/* Home/Products header structure reused by About and Contact. */
.shared-public-header .header-container { width:min(1440px, calc(100% - 40px)); margin-inline:auto; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:clamp(18px,3vw,42px); }
.shared-public-header .logo-container { display:inline-flex; align-items:center; gap:10px; color:var(--sj-header-text); text-decoration:none; white-space:nowrap; }
.shared-public-header .logo-text { font-size:1.05rem; font-weight:900; letter-spacing:-.02em; }
.shared-public-header .logo-highlight { color:var(--sj-header-red); }
.shared-public-header .main-nav { display:flex; align-items:center; justify-content:center; gap:clamp(18px,2.4vw,34px); }
.shared-public-header .nav-link { position:relative; display:inline-flex; align-items:center; gap:7px; min-height:44px; font-size:.8rem; font-weight:700; text-decoration:none; }
.shared-public-header .nav-link::after { content:""; position:absolute; inset-inline:0; bottom:3px; height:2px; border-radius:99px; background:transparent; transform:scaleX(0); transition:transform .18s ease; }
.shared-public-header .nav-link.active::after, .shared-public-header .nav-link:hover::after { transform:scaleX(1); background:var(--sj-header-red); }
.shared-public-header .header-actions, .shared-public-header .header-icons { display:flex; align-items:center; gap:6px; }
.shared-public-header button, .shared-public-header a { font:inherit; }
.shared-public-header .icon-wrapper, .shared-public-header .admin-btn, .shared-public-header .hamburger { position:relative; width:42px; height:42px; display:grid; place-items:center; border:0; border-radius:12px; color:var(--sj-header-text); cursor:pointer; text-decoration:none; }
.shared-public-header .badge { position:absolute; top:1px; inset-inline-end:0; min-width:17px; height:17px; place-items:center; padding:0 4px; border-radius:99px; color:#fff; background:var(--sj-header-red); font-size:.62rem; font-weight:900; }
.shared-public-header .badge.is-visible { display:grid; }
.shared-public-header .btn { min-height:42px; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:0 14px; border-radius:11px; text-decoration:none; font-size:.76rem; font-weight:800; }
.shared-public-header .btn-primary { color:#fff; background:var(--sj-header-red); }
.shared-public-header .user-menu { position:relative; }
.shared-public-header .user-btn { min-height:42px; max-width:190px; display:flex; align-items:center; gap:8px; padding:4px 8px; border:0; border-radius:12px; color:var(--sj-header-text); cursor:pointer; }
.shared-public-header .user-avatar, .shared-public-header .dropdown-avatar, .shared-public-header .mobile-avatar { width:34px; height:34px; display:grid; place-items:center; flex:0 0 auto; overflow:hidden; border-radius:50%; color:#fff; background:#242b36; }
.shared-public-header .user-avatar img, .shared-public-header .dropdown-avatar img, .shared-public-header .mobile-avatar img { width:100%; height:100%; object-fit:cover; }
.shared-public-header .user-dropdown { position:absolute; top:calc(100% + 10px); inset-inline-end:0; width:min(290px, calc(100vw - 24px)); padding:10px; border-radius:16px; opacity:0; visibility:hidden; transform:translateY(-6px); transition:.16s ease; }
.shared-public-header .user-menu.is-open .user-dropdown { opacity:1; visibility:visible; transform:none; }
.shared-public-header .dropdown-header { display:flex; align-items:center; gap:10px; padding:8px; }
.shared-public-header .dropdown-info { min-width:0; display:grid; }
.shared-public-header .dropdown-name { color:var(--sj-header-text); font-weight:800; }
.shared-public-header .dropdown-email { overflow:hidden; text-overflow:ellipsis; color:var(--sj-header-muted); font-size:.7rem; }
.shared-public-header .dropdown-divider { height:1px; margin:7px 4px; background:rgba(255,255,255,.08); }
.shared-public-header .dropdown-item { width:100%; min-height:40px; display:flex; align-items:center; gap:9px; padding:0 10px; border:0; border-radius:9px; color:#d8dde5; background:transparent; text-decoration:none; cursor:pointer; }
.shared-public-header .dropdown-item:hover { background:rgba(255,255,255,.06); }
.shared-public-header .dropdown-item.danger { color:#ff7a83; }
.shared-public-header .hamburger { display:none; }
.shared-public-header .hamburger span { width:19px; height:2px; position:absolute; border-radius:99px; background:currentColor; transition:.18s ease; }
.shared-public-header .hamburger span:nth-child(1) { transform:translateY(-6px); }.shared-public-header .hamburger span:nth-child(3) { transform:translateY(6px); }
.shared-public-header .hamburger.active span:nth-child(1) { transform:rotate(45deg); }.shared-public-header .hamburger.active span:nth-child(2) { opacity:0; }.shared-public-header .hamburger.active span:nth-child(3) { transform:rotate(-45deg); }
.is-hidden { display:none !important; }
.shared-public-header.is-auth-loading #userMenu, .shared-public-header.is-auth-loading #loginBtn, .shared-public-header.is-auth-loading #admin-btn { visibility:hidden; }
body > .mobile-overlay { display:none; position:fixed; inset:0; z-index:1090; opacity:0; visibility:hidden; background:rgba(0,0,0,.58); transition:.18s ease; }
body > .mobile-overlay.active { opacity:1; visibility:visible; }
body > .mobile-nav { display:none; position:fixed; z-index:1100; top:0; right:0; left:auto; width:min(360px,88vw); height:100dvh; flex-direction:column; padding:16px; background:#0d1219; border-left:1px solid rgba(255,255,255,.08); transform:translateX(105%); visibility:hidden; pointer-events:none; transition:transform .22s ease, visibility 0s linear .22s; overflow-y:auto; }
body > .mobile-nav.active { transform:translateX(0); visibility:visible; pointer-events:auto; transition-delay:0s; }
body > .mobile-nav .mobile-header { min-height:54px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid rgba(255,255,255,.08); }
body > .mobile-nav .mobile-user { min-width:0; display:flex; align-items:center; gap:9px; }
body > .mobile-nav .mobile-avatar { width:38px !important; height:38px !important; flex:0 0 38px; border-radius:50% !important; overflow:hidden; }
body > .mobile-nav .mobile-avatar img { width:100% !important; height:100% !important; object-fit:cover; }
body > .mobile-nav .mobile-user-details { min-width:0; display:grid; }
body > .mobile-nav .mobile-name { color:#fff; font-weight:800; }
body > .mobile-nav .mobile-email { overflow:hidden; text-overflow:ellipsis; color:var(--sj-header-muted); font-size:.7rem; }
body > .mobile-nav .mobile-close { width:40px; height:40px; border:0; border-radius:10px; color:#fff; background:rgba(255,255,255,.05); }
body > .mobile-nav .mobile-body { display:grid; gap:5px; padding-top:15px; }
body > .mobile-nav .mobile-link { min-height:46px; display:flex; align-items:center; gap:10px; padding:0 12px; border-radius:10px; color:#b7c0cc; text-decoration:none; }
body > .mobile-nav .mobile-link.active { color:#fff; background:rgba(231,53,70,.1); box-shadow:inset -3px 0 var(--sj-header-red); }
body > .mobile-nav .mobile-actions, body > .mobile-nav .mobile-user-actions { display:grid; gap:8px; margin-top:10px; }
body.mobile-nav-open { overflow:hidden; }
@media (max-width:900px) { body > .mobile-overlay { display:block; } body > .mobile-nav { display:flex; } .shared-public-header .header-container { width:calc(100% - 24px); grid-template-columns:auto 1fr; } .shared-public-header .main-nav { display:none; } .shared-public-header .header-actions { justify-self:end; } .shared-public-header .hamburger { display:grid; } .shared-public-header .user-name, .shared-public-header .user-btn > .fa-chevron-down { display:none; } }
@media (max-width:480px) { .shared-public-header .logo-text, .shared-public-header #favoritesIcon { display:none; } .shared-public-header .header-actions { gap:2px; } .shared-public-header .icon-wrapper, .shared-public-header .admin-btn, .shared-public-header .hamburger { width:40px; height:40px; } .shared-public-header .btn { padding-inline:10px; } }