/* VX Nova header. Loaded inside the header's Shadow DOM, so it carries its
   own copy of the few tokens it needs. */
:host{
  --ink-1:#171824;--ink-2:#191B28;--ink-3:#1D1E2C;--ink-4:#242635;
  --line:#ffffff0f;--line-2:#ffffff17;--line-3:#ffffff26;
  --bone:#F3F4F6;--steel:#A7AAB0;--dim:#7E828A;
  --brass:#3B82F6;--brass-hi:#60A5FA;--brass-lo:#1E40AF;--brass-ink:#FFFFFF;
  --ice:#60A5FA;--violet:#8B5CF6;
  --display:"Inter Display","Inter","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --sans:"Inter","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);--ease-out:cubic-bezier(.16,1,.3,1);
  display:block;width:100%;color:var(--bone);font:400 14.5px/1.4 var(--sans);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
img,svg{display:block}
/* Phosphor duotone icons: shape in text colour, lighter layer in brand blue. */
svg.ph{fill:currentColor;stroke:none}
svg.ph .ph-duo{fill:var(--brass-hi);opacity:.32}
/* Unsized icons (e.g. the server-rendered logout icon) stay icon-sized and outlined. */
:where(svg:not([width])){width:18px;height:18px}
.home-profile-item-icon{display:inline-grid;place-items:center;width:20px;height:20px;flex:none}
.home-profile-item-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--brass);outline-offset:2px;border-radius:8px}

.vx-header-frame{
  position:relative;display:flex;align-items:center;gap:clamp(14px,2.2vw,32px);
  width:min(1240px,100% - 2*clamp(16px,4vw,40px));min-height:60px;margin-inline:auto;
}

/* Brand */
.brand{display:inline-flex;align-items:center;gap:9px;flex:none;color:var(--bone)}
.brand img{width:28px;height:28px;object-fit:contain;transition:rotate .5s var(--ease-out)}
.brand:hover img{rotate:-8deg}
/* Under the page banner the big logo is already visible: the header logo
   folds away and slides back in once the header sticks to the top. */
.brand{max-width:220px;transition:opacity .25s,max-width .3s var(--ease-out),margin .3s var(--ease-out)}
:host(.vx-has-banner:not(.vx-header-stuck)) .brand{opacity:0;max-width:0;overflow:hidden;margin-inline-end:calc(-1*clamp(14px,2.2vw,32px));pointer-events:none}
.brand span{font:700 19px/1 var(--display);letter-spacing:-.01em}
.brand span small{font:500 17px/1 var(--sans);color:var(--steel);letter-spacing:0;margin-left:2px}

/* Primary navigation: compact links; the active route sits on a soft
   surface with a small cyan indicator. */
.vx-header-links{display:flex;align-items:center;gap:2px;flex:1;min-width:0}
.vx-header-links>a{
  position:relative;display:inline-flex;align-items:center;height:34px;padding:0 12px;border-radius:9px;
  color:var(--steel);font:500 14.5px/1 var(--sans);letter-spacing:-.005em;white-space:nowrap;
  transition:color .18s,background-color .18s;
}
.vx-header-links>a::after{
  content:"";position:absolute;left:50%;bottom:-13px;width:18px;height:2px;margin-left:-9px;border-radius:2px;
  background:var(--brass);box-shadow:0 0 12px #3B82F6;opacity:0;scale:.3 1;transition:opacity .2s,scale .25s var(--ease-out);
}
.vx-header-links>a{gap:8px}
.vx-nav-icon{flex:none;opacity:.7;transition:opacity .18s,color .18s,filter .25s}
.vx-header-links>a:hover .vx-nav-icon,.vx-header-links>a[aria-current="page"] .vx-nav-icon{opacity:1;color:var(--brass-hi);filter:drop-shadow(0 0 6px #60A5FA80)}
@media(max-width:1240px) and (min-width:1101px){.vx-nav-icon{display:none}}
.vx-header-links>a:hover{color:var(--bone);background:#ffffff08}
.vx-header-links>a[aria-current="page"]{color:var(--bone);background:#ffffff0a}
.vx-header-links>a[aria-current="page"]::after{opacity:1;scale:1 1}
.vx-header-mobile-auth{display:none!important}

/* Tools */
.vx-header-tools{position:relative;display:flex;align-items:center;gap:4px;margin-inline-start:auto;flex:none}
.vx-header-icon-button,.vx-header-menu-button,[data-vx-account]{
  position:relative;display:inline-grid;place-items:center;width:38px;height:38px;padding:0;
  border:1px solid transparent;border-radius:10px;background:transparent;color:var(--steel);cursor:pointer;
  transition:color .18s,background-color .18s,border-color .18s;
}
.vx-header-icon-button svg,.vx-header-menu-button svg{width:19px;height:19px;transition:scale .2s var(--ease-out)}
.vx-header-icon-button:hover,.vx-header-menu-button:hover{color:var(--bone);background:var(--ink-3)}
.vx-header-icon-button:hover svg{scale:1.08}
.vx-header-icon-button:active svg{scale:.92}
.vx-header-menu-button{display:none}
/* Cart count: pops whenever the script re-renders the number. */
.vx-cart-count{position:absolute;top:2px;right:1px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--brass);color:var(--brass-ink);font:700 10px/16px var(--sans);text-align:center;box-shadow:0 0 0 2px #0A0B12;animation:vxBadgePop .35s var(--ease-out)}
@keyframes vxBadgePop{0%{scale:.4;opacity:0}60%{scale:1.18;opacity:1}100%{scale:1}}

[data-vx-account]{width:auto;height:38px;gap:8px;padding:0 10px 0 4px;display:inline-flex;align-items:center;border-color:var(--line-2);color:var(--bone)}
[data-vx-account]:hover,[data-vx-account][aria-expanded="true"]{border-color:var(--line-3);background:var(--ink-3)}
.vx-header-account-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;background:var(--ink-3);box-shadow:0 0 0 1.5px #3B82F655}
.vx-header-member-name{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 13.5px/1 var(--sans)}

/* Language trigger (built by i18n.js, mounted here) */
.vx-language-control{display:flex}
.vx-language-trigger{
  display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 10px;
  border:1px solid transparent;border-radius:10px;background:transparent;color:var(--steel);
  font:600 12.5px/1 var(--sans);letter-spacing:.03em;cursor:pointer;transition:color .18s,background-color .18s;
}
.vx-language-trigger:hover,.vx-language-trigger[aria-expanded="true"]{color:var(--bone);background:var(--ink-3)}
.vx-language-icon{display:flex}
.vx-flag{width:20px;height:14px;border-radius:2px;object-fit:cover}

/* Signed-out actions */
.vx-header-auth-links{display:flex;align-items:center;gap:6px;margin-inline-start:6px}
.vx-header-sign-in,.vx-header-auth-cta{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:9px;font:600 13.5px/1 var(--sans);white-space:nowrap;transition:background-color .18s,color .18s,border-color .18s,box-shadow .25s}
.vx-header-sign-in{color:var(--bone);border:1px solid var(--line-2)}
.vx-header-sign-in:hover{border-color:var(--line-3);background:var(--ink-3)}
.vx-header-auth-cta{background:linear-gradient(135deg,#3B82F6,#6366F1);color:var(--brass-ink);border:1px solid #ffffff1f;box-shadow:inset 0 1px 0 #ffffff4d,0 6px 18px -10px #6366F1}
.vx-header-auth-cta:hover{background:linear-gradient(135deg,#60A5FA,#818CF8);border-color:#ffffff33;box-shadow:inset 0 1px 0 #ffffff59,0 8px 22px -8px #6366F1}

/* Account popover */
.vx-header-account-menu{
  position:absolute;top:calc(100% + 10px);right:0;z-index:300;width:min(280px,calc(100vw - 32px));
  padding:6px;border:1px solid var(--line-2);border-radius:14px;background:#1D1E2CF5;
  box-shadow:0 24px 60px -18px #000e,0 0 0 1px #ffffff06;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  transform-origin:top right;animation:vxMenuIn .22s var(--ease-out);
}
@keyframes vxMenuIn{from{opacity:0;scale:.96;translate:0 -6px}to{opacity:1;scale:1;translate:0 0}}
.vx-header-member-summary{display:flex;align-items:center;gap:10px;padding:10px;margin-bottom:4px;border-bottom:1px solid var(--line);font-weight:600}
.vx-header-summary-avatar{width:34px;height:34px;border-radius:50%;object-fit:cover}
.vx-header-account-links,.vx-header-original-actions{display:grid}
.vx-header-account-menu a{display:flex;align-items:center;gap:10px;min-height:38px;padding:0 10px;border-radius:8px;color:var(--steel);font-weight:500;font-size:14px;transition:background-color .15s,color .15s}
.vx-header-account-menu a:hover{background:var(--ink-4);color:var(--bone)}
.vx-header-original-logout{margin:4px 0 0;padding-top:4px;border-top:1px solid var(--line)}
.vx-header-original-logout button{display:flex;align-items:center;gap:10px;width:100%;min-height:38px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:#F59AA2;font:500 14px/1 var(--sans);text-align:start;cursor:pointer}
.vx-header-original-logout button:hover{background:#F59AA21A}

@media(max-width:1100px){
  .vx-header-auth-links .vx-header-sign-in{display:none}
}
@media(max-width:880px){
  .vx-header-menu-button{display:inline-grid}
  .vx-header-links{
    display:none;position:absolute;top:calc(100% + 1px);left:calc(-1 * clamp(16px,4vw,40px));right:calc(-1 * clamp(16px,4vw,40px));z-index:290;
    flex-direction:column;align-items:stretch;gap:2px;padding:10px clamp(16px,4vw,40px) 16px;
    border-bottom:1px solid var(--line-2);background:#141521;
    box-shadow:0 30px 60px -20px #000e;
  }
  .vx-header-links.vx-header-open{display:flex;animation:vxSheetIn .26s var(--ease-out)}
  .vx-header-links>a{height:46px;padding:0 14px;border-radius:10px;font-size:16px}
  .vx-header-links>a::after{left:0;top:13px;bottom:13px;width:3px;height:auto;margin:0;scale:1 .3}
  .vx-header-links>a[aria-current="page"]{background:var(--ink-3)}
  .vx-header-links>a[aria-current="page"]::after{scale:1 1}
  .vx-header-mobile-auth{display:flex!important;color:var(--brass-hi)!important}
}
@keyframes vxSheetIn{from{opacity:0;translate:0 -8px}to{opacity:1;translate:0 0}}
@media(max-width:520px){
  .vx-header-auth-links{display:none}
  .vx-header-member-name{display:none}
  [data-vx-account]{padding:0 4px}
  .vx-language-trigger{padding:0 6px}
  .vx-header-tools{gap:0}
}
@media(max-width:360px){.brand span{display:none}.vx-header-icon-button,.vx-header-menu-button{width:34px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
:host-context(html[data-vx-motion="reduced"]) *,:host-context(html[data-vx-motion="reduced"]) *::before,:host-context(html[data-vx-motion="reduced"]) *::after{transition:none!important;animation:none!important}
@media(forced-colors:active){.vx-header-links>a[aria-current="page"]{text-decoration:underline}.vx-header-auth-cta{border:1px solid ButtonText}}
/* Responsive display rules must never override the authenticated hidden state. */
.vx-header-mobile-auth[hidden]{display:none!important}