/* =========================================================================
   AFTERGLOW OFFICIAL · Custom Header
   ========================================================================= */

/* 完全隐藏 Astra 默认 header（保险起见） */
.ast-mobile-header-wrap,
.main-header-bar,
#masthead .site-header-section,
#masthead > .ast-container,
.site-primary-header-wrap,
.ast-header-break-point .main-header-bar-wrap {
  display: none !important;
}
/* 让 Astra header 容器透明，不影响我们的 header */
#masthead {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* =========================================================================
   主 Header
   ========================================================================= */
.ms-header {
  background: #000;
  color: #fff;
  border-bottom: 1px solid var(--ms-night-line);
  position: sticky;
  top: 32px;  /* 给 WP admin bar 留位 */
  z-index: 50;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .35s var(--ms-ease), border-color .35s var(--ms-ease);
}
body:not(.admin-bar) .ms-header { top: 0; }

/* =========================================================================
   首页：让 banner 延伸到 marquee + header 后面（透明覆盖）
   ========================================================================= */
/* 首页：marquee 保持原来纯黑 + 左右羽化，sticky 跟 header 一起叠在顶部 */
.home .ms-marquee-bar {
  background: #000 !important;
  /* 保留原来左右两端的羽化淡出 */
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0,
    #000 8%,
    #000 92%,
    transparent 100%) !important;
          mask-image: linear-gradient(90deg,
    transparent 0,
    #000 8%,
    #000 92%,
    transparent 100%) !important;
  border-bottom: 0 !important;
  position: sticky !important;
  top: 32px;  /* WP admin bar 高度 */
  z-index: 70;
}
body:not(.admin-bar).home .ms-marquee-bar {
  top: 0;
}
.home .ms-marquee-bar::after {
  display: none !important;
}

/* Header 完全透明（让 banner 上的整体玻璃效果统一显示） */
.home .ms-header {
  background: transparent !important;
  border-bottom: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  /* Sticky 紧接在 marquee 下方，两个一起叠在顶部不留空隙 */
  top: calc(32px + 46px) !important;  /* admin bar + marquee 高度 */
  transition: background .35s var(--ms-ease),
              backdrop-filter .35s var(--ms-ease),
              border-color .35s var(--ms-ease);
}
body:not(.admin-bar).home .ms-header {
  top: 46px !important;
}
/* 给 logo / nav / 图标加细微 text-shadow 增强浅色 banner 上的可读性 */
.home .ms-header__logo,
.home .ms-header__menu a,
.home .ms-header__action {
  text-shadow: 0 1px 8px rgba(0,0,0,.35);
  transition: text-shadow .35s var(--ms-ease);
}
.home .ms-header__action svg {
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.4));
}

/* Hover header 区域 → 切换为纯黑 */
.home .ms-header:hover {
  background: #000 !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}
.home .ms-header:hover .ms-header__logo,
.home .ms-header:hover .ms-header__menu a,
.home .ms-header:hover .ms-header__action {
  text-shadow: none;
}
.home .ms-header:hover .ms-header__action svg {
  filter: none;
}

/* 用 body.is-scrolled 切换回纯黑 header（往下滚到产品区时）*/
.home.is-scrolled .ms-header {
  background: #000 !important;
  border-bottom: 1px solid var(--ms-night-line) !important;
}
.home.is-scrolled .ms-marquee-bar {
  background: #000 !important;
}
.home.is-scrolled .ms-marquee-bar::after {
  display: block !important;
}

/* Hero 上提：只让 banner 延伸到 header 后面（marquee 保持在上方）*/
.home .ms-hero--banner-only {
  margin-top: calc(-1 * var(--ms-header-h, 87px));
}

.ms-header__inner {
  max-width: 1480px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
  padding: 18px 32px;
}

/* —— Logo —— */
.ms-header__logo {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  position: relative;
  white-space: nowrap;
  /* 文字版回退用 */
  font-family: 'Anton', 'Bebas Neue', sans-serif;
  font-size: 26px;
  letter-spacing: -.02em;
  text-transform: uppercase;
  font-weight: 400;
}
.ms-header__logo--wordmark {
  gap: 9px;
  color: #fff;
}
.ms-header__logo--wordmark .ms-header__logo-cn {
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: .08em;
}
.ms-header__logo--wordmark .ms-header__logo-en {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .28em;
  color: var(--ms-accent);
  -webkit-text-fill-color: currentColor;
}
.ms-header__logo--img picture,
.ms-header__logo--img img {
  display: block;
  height: 36px;
  width: auto;
  transition: opacity .25s var(--ms-ease), filter .25s var(--ms-ease);
}
.ms-header__logo--img:hover img {
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, .35));
}
.ms-header__logo span {
  background: var(--ms-grad-chrome);
  background-size: 100% 200%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 0 rgba(255,255,255,.05);
  filter: drop-shadow(0 0 16px rgba(255,255,255,.1));
  transition: filter .3s var(--ms-ease);
}
.ms-header__logo:hover span {
  background: var(--ms-grad-primary);
  background-size: 220% 200%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: ms-shimmer 4s linear infinite;
  filter: drop-shadow(0 0 24px rgba(49,92,255,.34));
}

/* =========================================================================
   主菜单
   ========================================================================= */
.ms-header__nav {
  display: flex;
  justify-content: center;
}
.ms-header__menu {
  display: flex;
  align-items: center;
  gap: 36px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ms-header__menu li {
  margin: 0;
  padding: 0;
}
.ms-header__menu a {
  color: #fff;
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  position: relative;
  padding: 6px 2px;
  transition: color .25s var(--ms-ease);
}
/* hover 全息下划线 */
.ms-header__menu a::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 1.5px;
  background: var(--ms-grad-holo-bright);
  background-size: 200% 100%;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s var(--ms-ease);
}
.ms-header__menu a:hover::after,
.ms-header__menu .current-menu-item > a::after,
.ms-header__menu .current-menu-parent > a::after {
  transform: scaleX(1);
}

/* =========================================================================
   右侧图标
   ========================================================================= */
.ms-header__actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ms-header__action {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: #fff;
  text-decoration: none;
  border-radius: 50%;
  transition: all .25s var(--ms-ease);
}
.ms-header__action svg {
  width: 22px;
  height: 22px;
}
.ms-header__action:hover {
  background: rgba(255, 255, 255, .08);
}
/* hover 时图标变全息 */
.ms-header__action:hover svg {
  stroke: url(#ms-holo-stroke-grad);  /* 暂留，普通浏览器不支持 SVG url() 给 stroke 的渐变直接使用，回退如下 */
}
.ms-header__action:hover {
  color: transparent;
  background:
    rgba(255, 255, 255, .08);
  position: relative;
}
/* 用 filter 让 SVG 描边模拟 chrome 高亮 */
.ms-header__action:hover svg {
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, .6));
}

/* —— 购物车数量徽章 —— */
.ms-header__cart-count {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--ms-grad-holo-bright);
  background-size: 200% 200%;
  animation: ms-shimmer 4s linear infinite;
  color: #000;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transform: scale(0);
  transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}
.ms-header__cart-count.is-active {
  transform: scale(1);
}

/* =========================================================================
   响应式
   ========================================================================= */
@media (max-width: 900px) {
  .ms-header__inner {
    grid-template-columns: auto 1fr auto;
    padding: 14px 20px;
    gap: 16px;
  }
  .ms-header__menu {
    gap: 18px;
  }
  .ms-header__menu a {
    font-size: 11px;
    letter-spacing: .12em;
  }
  .ms-header__logo { font-size: 22px; }
}

@media (max-width: 720px) {
  .ms-header__nav {
    /* 移动端：菜单暂时隐藏，未来加汉堡按钮替代 */
    display: none;
  }
  .ms-header__inner {
    grid-template-columns: auto 1fr auto;
  }
}