/* SANEL MART / Glass Navigation — reference-inspired single navbar update.
   Keeps all existing links, cart, checkout and mobile menu behavior. */
/* Clip horizontal overflow without creating an extra scrolling ancestor for sticky. */
body { overflow-x: clip; }
.site-header {
  position: sticky;
  top: 14px;
  z-index: 40; /* Below the existing drawer overlays and dialogs. */
  margin: 14px auto 0;
  width: min(1130px, calc(100% - 56px));
  transition: width .72s cubic-bezier(.22,1,.36,1), top .5s cubic-bezier(.22,1,.36,1);
  will-change: width;
}
.site-header.is-scrolled {
  width: min(930px, calc(100% - 96px));
  top: 9px;
}

/* Frosted, translucent slab rather than the previous solid pill. */
.site-header .nav-shell {
  min-width: 0;
  height: 68px;
  padding: 7px 9px 7px 18px;
  gap: 12px;
  border-radius: 999px;
  /* Multi-layer shine over a translucent slate glass surface. */
  background: linear-gradient(135deg, rgba(184,192,211,.24), rgba(85,91,108,.14) 48%, rgba(64,68,83,.23));
  border: 1px solid rgba(241,246,255,.29);
  box-shadow: 0 14px 44px rgba(0,0,0,.28), inset 0 1.5px 0 rgba(255,255,255,.26), inset 0 -1px 0 rgba(255,255,255,.05);
  -webkit-backdrop-filter: blur(38px) saturate(190%) brightness(1.12);
  backdrop-filter: blur(38px) saturate(190%) brightness(1.12);
  transition: height .7s cubic-bezier(.22,1,.36,1),
              background .5s ease,
              border-color .5s ease,
              box-shadow .5s ease,
              border-radius .7s cubic-bezier(.22,1,.36,1);
}
.site-header.is-scrolled .nav-shell {
  height: 58px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(164,175,196,.28), rgba(66,73,91,.19) 48%, rgba(44,48,62,.32));
  border-color: rgba(245,248,255,.32);
  box-shadow: 0 18px 44px rgba(0,0,0,.34), inset 0 1.5px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(255,255,255,.06);
}

.site-header .brand {
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.site-header .brand-logo {
  transition: width .55s cubic-bezier(.22,1,.36,1), height .55s cubic-bezier(.22,1,.36,1);
}
.site-header.is-scrolled .brand-logo { width: 35px; height: 35px; }

/* Menu stays as plain text; the pill itself provides the glass surface. */
.site-header .desktop-links {
  display: flex;
  gap: 24px;
  align-items: center;
}
.site-header .desktop-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-size: 14px;
  padding: 8px 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  color: rgba(248,248,252,.83);
  transition: opacity .3s ease, transform .3s cubic-bezier(.22,1,.36,1), color .28s ease;
}
.site-header .desktop-links a:hover,
.site-header .desktop-links a:focus-visible {
  background: transparent;
  border-color: transparent;
  transform: translateY(-1px);
  color: #fff;
}
.site-header .nav-right { flex-shrink: 0; gap: 8px; }
.site-header .nav-cart {
  height: 42px;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
}
.site-header .nav-cart:hover { background: rgba(255,255,255,.22); }
.site-header .nav-cta {
  height: 42px;
  background: rgba(255,255,255,.95);
  color: #17181c;
  border: 1px solid rgba(255,255,255,.38);
}
.site-header .nav-cta:hover { background: #fff; color: #17181c; }

/* Keep in-page anchor targets visible below the sticky bar. */
#shop, #compatibility, #contact { scroll-margin-top: 116px; }

@media (max-width: 1200px) {
  .site-header { width: min(1080px, calc(100% - 40px)); }
  .site-header.is-scrolled { width: min(900px, calc(100% - 58px)); }
  .site-header .desktop-links { gap: 16px; }
  .site-header .desktop-links a { padding: 8px 0; font-size: 13px; }
  .site-header .nav-shell { padding-left: 13px; gap: 8px; }
}

/* Mobile/tablet: preserve the existing mobile menu, bag and links. */
@media (max-width: 950px) {
  .site-header { width: calc(100% - 24px); top: 9px; margin-top: 9px; }
  .site-header.is-scrolled { width: calc(100% - 54px); top: 7px; }
  .site-header .nav-shell { height: 62px; padding: 6px 8px 6px 12px; border-radius: 999px; gap: 8px; }
  .site-header.is-scrolled .nav-shell { height: 56px; border-radius: 999px; }
  .site-header .desktop-links { display: none; }
  .site-header .nav-cta { display: none; }
  .site-header .menu-toggle {
    display: flex;
    width: 44px;
    height: 44px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 0;
    background: transparent;
    border-radius: 999px;
  }
  .site-header .menu-toggle span { height: 1.7px; width: 18px; background: #fff; border-radius: 3px; }
  .site-header .nav-cart { height: 44px; }
  .site-header .mobile-links {
    display: flex;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 3px;
    padding: 12px;
    border-radius: 17px;
    border: 1px solid rgba(255,255,255,.19);
    background: rgba(39,41,49,.88);
    -webkit-backdrop-filter: blur(26px) saturate(160%);
    backdrop-filter: blur(26px) saturate(160%);
    box-shadow: 0 18px 44px rgba(0,0,0,.34);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-9px);
    pointer-events: none;
    transition: opacity .26s ease, visibility .26s ease, transform .36s cubic-bezier(.22,1,.36,1);
  }
  .site-header .mobile-links.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }
  .site-header .mobile-links a {
    display: block;
    color: #f1f1f3;
    border-radius: 11px;
    padding: 12px 14px;
  }
  .site-header .mobile-links a:hover { background: transparent; color: #fff; }
}
@media (max-width: 480px) {
  .site-header { width: calc(100% - 16px); }
  .site-header.is-scrolled { width: calc(100% - 36px); }
  .site-header .nav-shell { padding: 5px 6px 5px 9px; }
  .site-header .brand { font-size: 11px; gap: 7px; letter-spacing: .055em; }
  .site-header .brand-logo { width: 35px; height: 35px; }
  .site-header.is-scrolled .brand-logo { width: 33px; height: 33px; }
  .site-header .nav-right { gap: 6px; }
  .site-header .nav-cart { padding: 0 10px; height: 42px; }
  .site-header .menu-toggle { width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header, .site-header .nav-shell, .site-header .brand-logo,
  .site-header .desktop-links a, .site-header .mobile-links { transition: none !important; }
}

/* Clear text-only navigation, while bag and checkout remain distinct actions. */
.site-header .desktop-links a,
.site-header .desktop-links a:hover,
.site-header .desktop-links a:focus-visible {
  box-shadow: none;
}
.site-header .nav-shell {
  background-clip: padding-box;
}
@media (prefers-reduced-transparency: reduce) {
  .site-header .nav-shell,
  .site-header.is-scrolled .nav-shell { background: rgba(51,55,69,.92); }
}

@media print { .site-header { display: none !important; } }


/* vNext: Reserve an unchanging header footprint to prevent scroll anchoring
   from repeatedly crossing the compact breakpoint while the pill animates. */
.site-header,
.site-header.is-scrolled {
  height: 72px !important;
  min-height: 72px !important;
  top: 14px !important;
  margin-top: 14px !important;
}
.site-header .nav-shell { transform-origin: top center; }
@media(max-width:950px){
  .site-header,.site-header.is-scrolled{
    height: 66px !important;
    min-height:66px !important;
    top:9px !important;
    margin-top:9px !important;
  }
}