/* Reference-led header. The brand and navigation remain separate clipped panels. */
.site-header { --nav-height: clamp(74px, 5.4vw, 88px); top: 12px; }
.nav-shell {
  --brand-width: clamp(288px, 24vw, 390px);
  --cut: 34px;
  --overlap: 28px;
  width: min(calc(100% - clamp(40px, 7.3vw, 120px)), 1500px);
  height: var(--nav-height);
  border: 1px solid rgba(197, 133, 247, .26);
  border-radius: 11px;
  background: rgba(11, 6, 22, .74);
  box-shadow: 0 15px 42px rgba(5, 1, 12, .39), inset 0 1px rgba(245, 208, 255, .07);
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
}
.site-header .brand {
  background: linear-gradient(110deg, rgba(37, 20, 56, .91), rgba(24, 12, 39, .86));
  border-radius: 10px 0 0 10px;
  box-shadow: inset 0 1px rgba(255,255,255,.09), inset 0 -1px rgba(195, 126, 238, .15);
}
.brand-art { padding-left: 16px; }
.site-header .brand-logo { width: 92%; height: 93%; filter: drop-shadow(0 0 10px rgba(185, 67, 247, .27)); }
.nav-main { padding-left: clamp(48px, 4.3vw, 72px); padding-right: 12px; }
.nav-main::before {
  background: linear-gradient(110deg, rgba(13, 7, 26, .64), rgba(11, 6, 22, .76));
  box-shadow: inset 0 1px rgba(242, 196, 255, .07), inset 0 -1px rgba(242, 196, 255, .04);
}
.nav-links { gap: clamp(6px, .8vw, 16px); margin-right: clamp(8px, 1.1vw, 20px); }
.nav-links .nav-item, .nav-dropdown > summary { gap: 9px; min-height: 48px; padding-inline: clamp(9px, .9vw, 17px); font-size: clamp(12px, .94vw, 15px); color: #EFE9F5; }
.nav-links .nav-item.is-active:not(.nav-dropdown) { min-width: clamp(108px, 8.6vw, 144px); color: #DB8BFF; border-color: rgba(190, 85, 245, .65); background: radial-gradient(ellipse at 50% 70%, rgba(166, 42, 235, .4), rgba(65, 23, 96, .52)); box-shadow: 0 0 19px rgba(169, 58, 240, .25), inset 0 0 14px rgba(173, 63, 238, .21); }
.nav-links .nav-item.is-active:not(.nav-dropdown)::after { background: #CF6AFF; box-shadow: 0 0 13px #BC5AF9; }
.nav-links .nav-icon { width: 21px; height: 21px; }
.nav-chevron { color: #C363FD; }
.nav-actions { gap: clamp(13px, 1.6vw, 27px); padding-left: clamp(14px, 1.4vw, 23px); }
.nav-cart { width: clamp(48px, 4vw, 64px); height: clamp(48px, 4vw, 64px); border-color: rgba(205, 148, 245, .64); background: radial-gradient(circle at 50% 8%, rgba(145, 69, 203, .17), rgba(12, 7, 25, .66)); }
.nav-cart-count { background: #B747F4; box-shadow: 0 0 16px rgba(188, 65, 248, .72); }
.nav-actions .nav-account { min-width: clamp(190px, 15.7vw, 257px); height: clamp(54px, 4.2vw, 68px); padding-right: clamp(11px, 1.2vw, 20px); border-color: #C35BFA; background: linear-gradient(100deg, rgba(116, 34, 169, .49), rgba(17, 7, 29, .91) 42%, rgba(76, 26, 107, .42)); box-shadow: 0 0 20px rgba(183, 57, 236, .36), inset 0 0 16px rgba(162, 48, 222, .2); font-size: clamp(12px, .98vw, 16px); }
.nav-account .account-avatar { width: clamp(42px, 3.2vw, 52px); height: clamp(42px, 3.2vw, 52px); background: radial-gradient(circle at 30% 20%, #C454F9, #7828B7 72%); }
.nav-account .account-avatar .nav-icon { width: 55%; height: 55%; }
.nav-account-arrow { width: 19px; height: 19px; }
.site-header a:focus-visible, .site-header summary:focus-visible { outline-color: #D480FF; }
@media (max-width: 1250px) {
  .nav-links .nav-item, .nav-dropdown > summary { gap: 6px; padding-inline: 8px; }
  .nav-actions { gap: 12px; padding-left: 14px; }
  .nav-main { padding-left: 45px; padding-right: 10px; }
}
@media (max-width: 1180px) {
  .site-header { --nav-height: 74px; }
  .nav-shell { --brand-width: clamp(225px, 28vw, 315px); }
  .nav-main { padding-left: 44px; }
  .mobile-menu { margin-right: 18px; }
  .mobile-menu > summary { border-color: rgba(198, 94, 251, .6); background: rgba(139, 43, 192, .17); }
}
@media (max-width: 620px) {
  .site-header { --nav-height: 62px; top: 8px; }
  .nav-shell { --brand-width: clamp(136px, 44vw, 180px); --cut: 20px; --overlap: 15px; width: calc(100% - 24px); border-radius: 9px; }
  .site-header .brand { border-radius: 8px 0 0 8px; }
  .brand-art { padding-left: 7px; }
  .site-header .brand-logo { width: 92%; height: 85%; }
  .nav-main { padding: 0 8px 0 28px; }
  .mobile-menu { margin-right: 9px; }
  .nav-actions { gap: 8px; padding-left: 8px; }
  .nav-cart { width: 44px; height: 44px; }
  .nav-actions .nav-account { min-width: 0; height: 44px; padding-right: 8px; }
  .nav-account .account-avatar { width: 36px; height: 36px; }
}
@media (max-width: 420px) {
  .nav-main { padding-left: 24px; padding-right: 5px; }
  .mobile-menu { margin-right: 6px; }
  .nav-actions { gap: 6px; padding-left: 6px; }
  .nav-cart { width: 44px; height: 44px; }
  .nav-actions .nav-account { height: 44px; padding-right: 5px; }
  .nav-account .account-avatar { width: 36px; height: 36px; }
}
@media (max-width: 360px) {
  .nav-main { padding-left: 20px; padding-right: 3px; }
  .mobile-menu { margin-right: 3px; }
  .nav-actions { gap: 3px; padding-left: 3px; }
  .nav-cart { width: 40px; height: 40px; }
  .nav-actions .nav-account { height: 40px; padding-right: 3px; }
  .nav-account .account-avatar { width: 34px; height: 34px; }
}
@media (prefers-reduced-transparency: reduce) { .nav-shell { background: #0B0615; backdrop-filter: none; -webkit-backdrop-filter: none; } }