/* SINVYX site header — replaces the Elementor Pro header */

:root{--sx-header-h:72px;}

.sx-header{
  position:fixed;top:0;left:0;right:0;z-index:9999;
  background:rgba(5,7,10,.88);
  -webkit-backdrop-filter:var(--blur-panel);backdrop-filter:var(--blur-panel);
  border-bottom:1px solid var(--border-hairline);
}
/* browsers without backdrop-filter get a solid bar rather than see-through text */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .sx-header{background:var(--surface-void);}
}

.sx-header *,.sx-header *::before,.sx-header *::after{box-sizing:border-box;}

/* Hello Elementor ships this, but define it here too so the header never
   depends on the parent theme's stylesheet winning the cascade. */
.screen-reader-text:not(:focus):not(:active){
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.sx-header__bar{
  max-width:var(--container-max);margin:0 auto;
  padding:0 var(--container-pad);
  height:var(--sx-header-h);
  display:flex;align-items:center;gap:var(--space-8);
}

.sx-header__brand{display:flex;align-items:center;flex-shrink:0;line-height:0;}
.sx-header__brand img{height:38px;width:auto;display:block;}

.sx-header__nav{
  flex:1;display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-8);
}

.sx-menu{
  list-style:none;margin:0;padding:0;
  display:flex;align-items:center;gap:var(--space-6);flex-wrap:wrap;
}
.sx-menu a{
  font-family:var(--font-body);font-size:var(--text-body-sm);font-weight:var(--fw-semibold);
  color:var(--text-secondary);text-decoration:none;
  padding:6px 0;display:inline-block;position:relative;white-space:nowrap;
  transition:color var(--dur-fast) var(--ease-out);
}
.sx-menu a:hover,.sx-menu a:focus-visible{color:var(--accent-primary);}
.sx-menu a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--accent-primary);transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-base) var(--ease-out);
}
.sx-menu a:hover::after,.sx-menu a:focus-visible::after{transform:scaleX(1);}
.sx-menu .current-menu-item>a,
.sx-menu .current_page_item>a,
.sx-menu .current-menu-ancestor>a{color:var(--text-primary);}
.sx-menu .current-menu-item>a::after,
.sx-menu .current_page_item>a::after,
.sx-menu .current-menu-ancestor>a::after{transform:scaleX(1);}

/* second level */
.sx-menu li{position:relative;}
.sx-menu .sub-menu{
  list-style:none;margin:0;padding:var(--space-3);
  position:absolute;top:100%;left:0;min-width:210px;
  background:var(--surface-raised);border:1px solid var(--border-hairline);
  border-radius:var(--radius-md);box-shadow:var(--shadow-pop);
  display:flex;flex-direction:column;gap:var(--space-1);
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out),visibility var(--dur-fast);
}
.sx-menu li:hover>.sub-menu,.sx-menu li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:translateY(0);}
.sx-menu .sub-menu a{padding:8px 10px;width:100%;}
.sx-menu .sub-menu a::after{display:none;}
.sx-menu .sub-menu a:hover{background:var(--surface-overlay);border-radius:var(--radius-sm);}

.sx-header__actions{display:flex;align-items:center;gap:var(--space-5);flex-shrink:0;}

.sx-header__cart{
  display:inline-flex;align-items:center;gap:var(--space-2);
  color:var(--text-secondary);text-decoration:none;
  transition:color var(--dur-fast) var(--ease-out);
}
.sx-header__cart:hover{color:var(--accent-primary);}
.sx-header__cart .sx-icon{color:currentColor;}
.sx-cart-count{
  font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:var(--ls-mono);
  min-width:20px;height:20px;padding:0 6px;border-radius:var(--radius-pill);
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent-primary);color:var(--text-on-accent);
}
.sx-cart-count--empty{background:var(--surface-overlay);color:var(--text-tertiary);}

/* hamburger */
.sx-header__toggle{
  display:none;margin-left:auto;
  width:44px;height:44px;padding:0;
  background:transparent;border:1px solid var(--border-hairline);border-radius:var(--radius-md);
  cursor:pointer;align-items:center;justify-content:center;
  transition:border-color var(--dur-fast) var(--ease-out);
}
.sx-header__toggle:hover{border-color:var(--accent-primary);}
.sx-header__toggle:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px;}
.sx-header__bars,
.sx-header__bars::before,
.sx-header__bars::after{
  display:block;width:20px;height:2px;border-radius:2px;
  background:var(--text-primary);
  transition:transform var(--dur-base) var(--ease-out),opacity var(--dur-fast) var(--ease-out);
}
.sx-header__bars{position:relative;}
.sx-header__bars::before,.sx-header__bars::after{content:"";position:absolute;left:0;}
.sx-header__bars::before{top:-6px;}
.sx-header__bars::after{top:6px;}
[aria-expanded="true"] .sx-header__bars{background:transparent;}
[aria-expanded="true"] .sx-header__bars::before{transform:translateY(6px) rotate(45deg);}
[aria-expanded="true"] .sx-header__bars::after{transform:translateY(-6px) rotate(-45deg);}

/* push page content below the fixed bar */
body{padding-top:var(--sx-header-h);}
.admin-bar .sx-header{top:32px;}
@media screen and (max-width:782px){.admin-bar .sx-header{top:46px;}}

@media (max-width:1024px){
  :root{--sx-header-h:60px;}
  .sx-header__brand img{height:32px;}
  .sx-header.js-nav .sx-header__toggle{display:inline-flex;}

  .sx-header__nav{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;justify-content:flex-start;
    gap:0;
    background:var(--surface-base);
    border-bottom:1px solid var(--border-hairline);
    padding:var(--space-4) var(--container-pad) var(--space-6);
    max-height:calc(100vh - var(--sx-header-h));overflow-y:auto;
  }
  /* collapsed only once JS has taken over, so a script failure can never
     leave the menu unreachable */
  .sx-header.js-nav .sx-header__nav{display:none;}
  .sx-header.js-nav .sx-header__nav.is-open{display:flex;}

  .sx-menu{flex-direction:column;align-items:stretch;gap:0;}
  .sx-menu>li{border-bottom:1px solid var(--border-soft);}
  .sx-menu a{
    display:block;padding:14px 0;font-size:var(--text-body);
    color:var(--text-primary);
  }
  .sx-menu a::after{display:none;}
  .sx-menu .sub-menu{
    position:static;opacity:1;visibility:visible;transform:none;
    background:transparent;border:0;box-shadow:none;padding:0 0 var(--space-3) var(--space-4);
  }

  .sx-header__actions{
    margin-top:var(--space-5);
    justify-content:space-between;
  }
}

@media (prefers-reduced-motion:reduce){
  .sx-header *{transition:none !important;}
}