/* =========================================================================
   AFTERGLOW OFFICIAL · Homepage Styles
   墨黑 + 冷白 + 枪灰，电光蓝作为克制强调
   ========================================================================= */

/* —— Astra 默认外壳清理（让首页全宽接管） —— */
.home #content,
.home .ast-container,
.home .site-content,
.home .ast-container > .site-content,
.home .ast-no-sidebar #primary {
  max-width: 100%;
  padding: 0;
  margin: 0;
}
.home .entry-content,
.home .entry-header,
.home .post-thumb,
.home .ast-pagination,
.home .ast-archive-description,
.home article {
  max-width: 100%;
  margin: 0;
  padding: 0;
}
.home .entry-title,
.home .ast-archive-title { display: none; }
.home article > .ms-section { all: revert; }

/* =========================================================================
   01 · 顶部 MARQUEE 公告条（黑底 · Premium 升级版）
   ========================================================================= */
.ms-marquee-bar {
  background: #000;
  color: #fff;
  position: relative;
  overflow: hidden;
  /* 左右边缘羽化淡出 */
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0,
    #000 8%,
    #000 92%,
    transparent 100%);
          mask-image: linear-gradient(90deg,
    transparent 0,
    #000 8%,
    #000 92%,
    transparent 100%);
}
/* 底部那条全息渐变细线 */
.ms-marquee-bar::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--ms-grad-holo-bright);
  background-size: 200% 100%;
  animation: ms-shimmer 6s linear infinite;
  opacity: .7;
}

.ms-marquee-track {
  display: inline-flex;
  gap: 56px;
  white-space: nowrap;
  padding: 14px 0;
  animation: ms-marq 60s linear infinite;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-weight: 500;
  will-change: transform;
}
/* Chrome 渐变文字需要更厚的笔画才好看，bump 到 500 同步 */
.ms-marquee-item > span.is-chrome {
  font-weight: 500;
}
/* 悬停暂停 */
.ms-marquee-bar:hover .ms-marquee-track {
  animation-play-state: paused;
}

.ms-marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 56px;
}

/* 单条文字默认白；hover 时切到全息渐变 */
.ms-marquee-item > span {
  position: relative;
  cursor: default;
  transition: opacity .3s var(--ms-ease);
}
.ms-marquee-item > span:not(.ms-marquee-dot):hover {
  background: var(--ms-grad-holo-bright);
  background-size: 200% 200%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: ms-shimmer 4s linear infinite;
}

/* Chrome 银点缀文字（在 PHP 里给某条加 .is-chrome 类） */
.ms-marquee-item > span.is-chrome {
  background: var(--ms-grad-chrome-h);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 0 rgba(255,255,255,.05);
}

/* 分隔符：旋转 chrome 星 ✦ —— 替代原来的全息小圆点 */
.ms-marquee-dot {
  display: inline-block;
  width: 12px; height: 12px;
  font-size: 11px;
  line-height: 12px;
  text-align: center;
  vertical-align: middle;
  background: transparent;
  border-radius: 0;
  animation: ms-spin 8s linear infinite;
  position: relative;
}
.ms-marquee-dot::before {
  content: '✦';
  display: block;
  background: var(--ms-grad-chrome-h);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 8px rgba(255,255,255,.25);
}
/* 每隔一个分隔符做成全息（PHP 里 :nth-child 不靠谱，用类 .is-holo） */
.ms-marquee-dot.is-holo::before {
  background: var(--ms-grad-holo-bright);
  background-size: 200% 200%;
  animation: ms-shimmer 4s linear infinite;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes ms-marq {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes ms-shimmer {
  0% { background-position: 0 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
@keyframes ms-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* =========================================================================
   02 · HEADER（覆盖 Astra 默认 header 在首页的样式）
   ========================================================================= */
.home .ast-above-header,
.home .ast-below-header {
  display: none;
}
.home .site-header,
.home .ast-primary-header-bar {
  background: #000 !important;
  border-bottom: 1px solid var(--ms-night-line) !important;
}
.home .site-header *,
.home .main-header-menu a,
.home .ast-site-identity .site-title a,
.home .site-branding a {
  color: #fff !important;
}
.home .ast-builder-menu .menu-link {
  font-family: 'Inter Tight', sans-serif !important;
  font-size: 12px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
}
.home .site-logo-img img,
.home .custom-logo {
  filter: invert(1) brightness(2);
}

/* =========================================================================
   03 · NIGHT HERO（首页主推）
   ========================================================================= */
.ms-hero {
  position: relative;
  background-color: #000;
  background-image: url('../images/menswear-hero-v1.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  overflow: hidden;
  isolation: isolate;
}
/* 默认（有 SPRING FAIRY 文字版）保留满屏感 */
.ms-hero:not(.ms-hero--banner-only) {
  min-height: 92vh;
}
/* Banner-only 模式：按 banner 原始 16:9 比例显示，不裁切 */
.ms-hero--banner-only {
  aspect-ratio: 16 / 9;
  min-height: 0;
  width: 100%;
  max-height: 100vh;
}
@media (max-width: 768px) {
  /* 手机端 banner 太矮的话给个最小高度 */
  .ms-hero--banner-only {
    aspect-ratio: 4 / 3;
    min-height: 50vh;
  }
}
/* 生成图本身为高分辨率源，所有密度共用同一个本地资产。 */
@media (min-width: 1601px), (min-resolution: 2dppx) {
  .ms-hero {
    background-image: url('../images/menswear-hero-v1.png');
  }
}
/* 移动端保留人物，同时让标题落在左侧暗部。 */
@media (max-width: 768px) {
  .ms-hero {
    background-image: url('../images/menswear-hero-v1.png');
    background-position: 60% center;
  }
}

/* 暗色遮罩：默认（有文字时）较重 */
.ms-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.25) 0%, rgba(0,0,0,.55) 65%, rgba(0,0,0,.75) 100%),
    linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.15) 35%, rgba(0,0,0,.15) 65%, rgba(0,0,0,.5) 100%);
  pointer-events: none;
  z-index: 0;
}
/* Banner-only 模式：哑光 + 顶部菜单淡暗化 + 中心文字区轻微 vignette（不重）*/
.ms-hero--banner-only::before {
  backdrop-filter: saturate(.85);
  -webkit-backdrop-filter: saturate(.85);
  background:
    linear-gradient(180deg,
      rgba(0, 0, 0, .2) 0%,
      rgba(0, 0, 0, .08) 20%,
      transparent 50%),
    radial-gradient(ellipse 90% 80% at 15% 55%,
      rgba(0, 0, 0, .42) 0%,
      rgba(0, 0, 0, .12) 52%,
      transparent 100%);
}
.ms-hero--banner-only::after {
  background: transparent;
}
/* 银 chrome 反光从角落往中间淡入 */
.ms-hero::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 0% 100%, rgba(216,218,224,.08) 0%, transparent 40%),
    radial-gradient(ellipse at 100% 0%, rgba(216,218,224,.06) 0%, transparent 40%);
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
}
.ms-hero__stars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(rgba(255,255,255,.7) .5px, transparent .5px),
    radial-gradient(rgba(255,255,255,.4) .5px, transparent .5px);
  background-size: 80px 80px, 140px 140px;
  background-position: 0 0, 40px 60px;
  opacity: .45;
  pointer-events: none;
  z-index: 0;
}
.ms-hero__corners {
  position: absolute;
  inset: 32px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 32px;
  pointer-events: none;
  z-index: 1;
}
.ms-hero__inner {
  position: relative;
  z-index: 2;
  width: min(100%, 1480px);
  padding: 0 clamp(28px, 7vw, 112px);
  margin: 0 auto;
}

.ms-hero__eyebrow {
  font-family: var(--ms-font-body);
  font-size: 15px;
  letter-spacing: 6px;
  text-transform: uppercase;
  font-weight: 500;
  color: #fff;
  margin-bottom: 22px;
  display: block;
}
/* 移除 chrome 银线装饰 */
.ms-hero__eyebrow::before,
.ms-hero__eyebrow::after {
  display: none;
}

.ms-hero__title {
  font-family: var(--ms-font-display);
  font-size: clamp(40px, 4.5vw, 72px);
  letter-spacing: -.035em;
  line-height: 1.05;
  font-weight: 600;
  text-transform: uppercase;
  margin: 0;
  color: #fff !important;
}
/* 取消 chrome 和 holographic 渐变效果，纯白色 */
.ms-hero__title .ms-hero__title-chrome,
.ms-hero__title .ms-hero__title-holo {
  background: none !important;
  -webkit-background-clip: unset !important;
          background-clip: unset !important;
  -webkit-text-fill-color: #fff !important;
  color: #fff !important;
  filter: none !important;
  animation: none !important;
  display: inline;
}
.ms-hero__title .ms-hero__title-chrome,
.ms-hero__title .ms-hero__title-holo {
  color: transparent !important;
}
.ms-hero__title-chrome {
  display: block;
  background: var(--ms-grad-chrome);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  /* 多层阴影增强 banner 背景上的可读性 */
  filter:
    drop-shadow(0 2px 6px rgba(0,0,0,.5))
    drop-shadow(0 0 32px rgba(0,0,0,.4))
    drop-shadow(0 4px 24px rgba(255,255,255,.18));
}
.ms-hero__title-holo {
  display: block;
  background: var(--ms-grad-holo-bright);
  background-size: 220% 220%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: ms-shimmer 8s linear infinite;
  filter:
    drop-shadow(0 2px 6px rgba(0,0,0,.5))
    drop-shadow(0 0 32px rgba(0,0,0,.4))
    drop-shadow(0 0 40px rgba(212,197,255,.18));
}

.ms-hero__sub {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  letter-spacing: .04em;
  color: rgba(255,255,255,.6);
  max-width: 520px;
  margin: 36px auto 44px;
  line-height: 1.6;
}

.ms-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  color: #000;
  padding: 18px 36px;
  border-radius: 999px;
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  transition: all .35s cubic-bezier(.16, 1, .3, 1);
  position: relative;
  overflow: hidden;
}
.ms-hero__cta::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(115deg, transparent 30%, rgba(0,0,0,.1) 50%, transparent 70%);
  transition: left .9s cubic-bezier(.16, 1, .3, 1);
}
.ms-hero__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(255,255,255,.25), 0 0 64px rgba(255,255,255,.1);
}
.ms-hero__cta:hover::after { left: 100%; }

.ms-hero__meta {
  position: absolute;
  bottom: 48px;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  z-index: 2;
}
.ms-hero__meta--l { left: 48px; }
.ms-hero__meta--r { right: 48px; display: inline-flex; align-items: center; gap: 8px; }
.ms-hero__meta-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ms-grad-holo-bright);
  background-size: 200% 200%;
  animation: ms-shimmer 4s linear infinite;
}

/* —— 飘动星粒子（JS 注入的 .ms-hero__particle） —— */
.ms-hero__particle {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #fff;
  pointer-events: none;
  animation: ms-float 8s linear infinite;
  z-index: 1;
}

@keyframes ms-float {
  0%   { transform: translateY(0) scale(.5); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(-200px) scale(1); opacity: 0; }
}

/* =========================================================================
   通用章节
   ========================================================================= */
.ms-section {
  padding: 120px 32px;
  position: relative;
}
.ms-section--light { background: #fff; color: #000; }
.ms-section--dark  { background: #000; color: #fff; }
.ms-section__inner { max-width: 1480px; margin: 0 auto; }

.ms-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 48px;
  gap: 24px;
  flex-wrap: wrap;
}
.ms-section__title {
  /* 保留紧凑的编辑式标题节奏 */
  font-family: 'Archivo Narrow', sans-serif;
  font-size: clamp(28px, 3.2vw, 40px);
  letter-spacing: 0;
  line-height: 1.05;
  font-weight: 600;
  text-transform: uppercase;
  margin: 0;
  color: inherit !important;
  position: relative;
  display: inline-block;
  padding-bottom: 14px;
}
.ms-section--light .ms-section__title { color: #151515 !important; }
.ms-section--dark  .ms-section__title { color: #fff !important; }

/* Premium 特效：标题下方一道全息渐变细线，scroll-reveal 时从左 0 → 60% 宽度扫入 */
.ms-section__title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--ms-grad-holo-bright);
  background-size: 200% 100%;
  border-radius: 2px;
  animation: ms-shimmer 4s linear infinite;
  transition: width 1s cubic-bezier(.16, 1, .3, 1) .25s;
}
.ms-reveal.is-visible .ms-section__title::after,
.ms-section__head:hover .ms-section__title::after {
  width: 64px;
}

/* Hover 时线条变长，让用户感觉到细微 interactive */
.ms-section__head:hover .ms-section__title::after {
  width: 100px;
  transition-delay: 0s;
}
.ms-section__tabs {
  display: flex;
  gap: 24px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 500;
}
.ms-section__tab {
  position: relative;
  padding-bottom: 4px;
  cursor: pointer;
  color: var(--ms-ink-muted);
  text-decoration: none;
  transition: color .2s;
}
.ms-section--dark .ms-section__tab { color: var(--ms-night-ink-muted); }
.ms-section__tab.is-active { color: inherit; }
.ms-section__tab.is-active::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--ms-grad-holo-bright);
}
.ms-section__shop {
  font-family: 'Inter Tight', sans-serif;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  text-decoration: none;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: gap .2s;
}
.ms-section__shop:hover { gap: 14px; }

/* =========================================================================
   产品卡（首页用，纯 CSS placeholder 版本，等 CSV 来后替换为真产品）
   ========================================================================= */
.ms-product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 1024px) { .ms-product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .ms-product-grid { grid-template-columns: 1fr; } }

.ms-product {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
.ms-product:hover {
  transform: translateY(-6px);
}

.ms-product__media {
  position: relative;
  aspect-ratio: 3/4;
  border-radius: 12px;
  overflow: hidden;
  background: var(--ms-bg-soft);
  isolation: isolate;
  /* 常驻软阴影：让卡片有"实体物件感" */
  box-shadow: 0 2px 8px rgba(0, 0, 0, .03),
              0 8px 24px rgba(0, 0, 0, .04);
  transition: box-shadow .6s cubic-bezier(.16, 1, .3, 1);
}
.ms-product:hover .ms-product__media {
  box-shadow: 0 24px 56px rgba(0, 0, 0, .15),
              0 8px 16px rgba(0, 0, 0, .08);
}

/* 图片底部内置 vignette：模拟印刷品质感 */
.ms-product__media > .ms-product__vignette,
.ms-product__media::after:not([class]) {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(0,0,0,.10) 0%, transparent 60%),
    linear-gradient(180deg, transparent 60%, rgba(0,0,0,.06) 100%);
}

/* Premium 全息渐变边框光晕（hover 才显示） */
.ms-product__media::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 13px;
  background: var(--ms-grad-holo-bright);
  background-size: 220% 220%;
  opacity: 0;
  z-index: -1;
  transition: opacity .5s cubic-bezier(.16, 1, .3, 1);
  animation: ms-shimmer 6s linear infinite;
  filter: blur(8px);
}
.ms-product:hover .ms-product__media::before {
  opacity: .65;
}

.ms-section--dark .ms-product__media { background: var(--ms-night-bg-elev); }

.ms-product__media img,
.ms-product__media .ms-product__image,
.ms-product__media .ms-product__placeholder {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  display: block;
  transition: transform .8s cubic-bezier(.16, 1, .3, 1),
              opacity .5s cubic-bezier(.16, 1, .3, 1);
}

/* Hover 切换：第二张图 fade in，第一张图轻微缩放 */
.ms-product__image--secondary {
  opacity: 0;
}
.ms-product:hover .ms-product__image--primary {
  opacity: 0;
  transform: scale(1.04);
}
.ms-product:hover .ms-product__image--secondary {
  opacity: 1;
  transform: scale(1.04);
}
/* 没有第二张图时，主图 hover 仅缩放 */
.ms-product:hover .ms-product__image--primary:only-of-type {
  opacity: 1;
}
.ms-product__media .ms-product__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--ms-silver-500);
  background: linear-gradient(135deg, var(--ms-bg-soft), var(--ms-silver-200));
}
.ms-section--dark .ms-product__placeholder {
  color: rgba(255,255,255,.3);
  background: linear-gradient(135deg, #1a1a1a, #0a0a0a);
}
/* Placeholder（无图时）也跟着缩放 */
.ms-product:hover .ms-product__placeholder {
  transform: scale(1.05);
}

/* SALE / SOLD OUT — 实心深色徽章（不论白底深底都清晰）*/
.ms-product__badge {
  position: absolute;
  top: 14px; left: 14px;
  font-family: 'Archivo Narrow', sans-serif;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  background: rgba(10, 10, 10, .9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  padding: 6px 12px;
  border-radius: 2px;
  font-weight: 600;
  z-index: 4;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
}
.ms-section--dark .ms-product__badge {
  background: rgba(255, 255, 255, .92);
  color: #0a0a0a;
}

/* NEW — 深色底 + 白字 + 底部一条全息渐变细线（品牌指纹）*/
.ms-product__badge--new {
  background-color: rgba(10, 10, 10, .9) !important;
  background-image: none !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  position: relative;
  overflow: hidden;
}
.ms-product__badge--new::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  background: var(--ms-grad-holo-bright);
  background-size: 200% 100%;
  animation: ms-shimmer 4s linear infinite;
}

/* Quick add — 卡片 hover 时从底部柔和滑出（更精致：黑底白字、稍紧凑、字距大）*/
.ms-product__quickadd {
  position: absolute;
  left: 16px; right: 16px;
  bottom: 16px;
  height: 42px;
  background: rgba(0, 0, 0, .92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Archivo Narrow', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .28em;
  text-transform: uppercase;
  transform: translateY(20px);
  opacity: 0;
  pointer-events: none;
  transition: transform .5s cubic-bezier(.16, 1, .3, 1),
              opacity .5s cubic-bezier(.16, 1, .3, 1);
  z-index: 3;
}
.ms-section--dark .ms-product__quickadd { background: #fff; color: #000; }
.ms-product:hover .ms-product__quickadd {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* 色板：右上角悬浮的小圆点（无容器，自带白圈阴影）*/
.ms-product__swatches {
  position: absolute;
  top: 16px; right: 16px;
  display: flex;
  gap: 6px;
  z-index: 4;
}
.ms-product__swatch {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid #fff;
  background-clip: padding-box;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25),
              0 0 0 1px rgba(0, 0, 0, .04);
  transition: transform .25s var(--ms-ease);
}
.ms-product__swatch:hover {
  transform: scale(1.3);
}
.ms-section--dark .ms-product__swatch {
  border-color: rgba(255, 255, 255, .85);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5),
              0 0 0 1px rgba(255, 255, 255, .15);
}

/* 卡片信息（标题+价格+色板）—— editorial 时尚杂志感 */
.ms-product__info {
  padding: 18px 4px 4px;
}
.ms-product__title {
  /* Archivo Narrow 600, 18px — 比原版略大，更醒目 */
  font-family: 'Archivo Narrow', sans-serif;
  font-size: 18px;
  letter-spacing: .01em;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0 0 8px;
  line-height: 1.25;
  color: #0a0a0a;
}
.ms-product__price {
  font-family: 'Archivo Narrow', sans-serif;
  font-size: 17px;
  letter-spacing: 0;
  font-weight: 600;
  color: #0a0a0a;
  display: inline-block;
}
.ms-product__price .woocommerce-Price-amount {
  font-family: inherit !important;
  font-weight: inherit !important;
}
.ms-product__price del {
  color: var(--ms-ink-faint);
  font-weight: 400;
  margin-right: 6px;
}
.ms-product__price ins {
  background: transparent;
  text-decoration: none;
  font-weight: 700;
}
.ms-product__colors {
  display: inline-block;
  margin-left: 10px;
  font-family: 'Archivo Narrow', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--ms-ink-muted);
  letter-spacing: .02em;
}
.ms-section--dark .ms-product__price { color: var(--ms-night-ink-muted); }
.ms-product__colors {
  display: inline-block;
  margin-left: 8px;
  font-size: 11px;
  color: var(--ms-ink-faint);
}

/* =========================================================================
   Shop by Category — Holographic Gallery（全息酷炫版）
   3 列横向卡 (5:4) · 18px gap · 全息描边 + 编号 chip + 光流扫卡 + 彩虹投影
   ========================================================================= */
.ms-section--gallery {
  position: relative;
  padding: 28px 32px 36px;
  /* 纯黑底 + 顶部冷光晕 + 底部紫光晕 — 让全息描边和投影"发光" */
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0, 196, 255, .14), transparent 60%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(174, 88, 255, .12), transparent 60%),
    radial-gradient(ellipse 40% 30% at 15% 50%, rgba(255, 78, 165, .08), transparent 60%),
    #050507;
  color: #fff;
  overflow: hidden;
}
@media (min-width: 1200px) { .ms-section--gallery { padding: 36px 32px 44px; } }
@media (max-width: 768px)  { .ms-section--gallery { padding: 22px 16px 28px; } }

/* 顶部全息细线分隔 — 黑底上对比度拉满 */
.ms-section--gallery::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 78, 165, .9) 25%,
    rgba(0, 196, 255, .9) 50%,
    rgba(174, 88, 255, .9) 75%,
    transparent 100%);
  background-size: 200% 100%;
  animation: ms-shimmer 6s linear infinite;
  z-index: 1;
  box-shadow: 0 0 20px rgba(0, 196, 255, .35);
}

/* 背景细网格 — 增加科技感，超低透明度 */
.ms-section--gallery::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 80%);
  pointer-events: none;
  z-index: 0;
}

/* —— Section 大标题（酷炫全息版） —— */
.ms-gallery-head {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin: 0 auto 18px;
  padding: 0 4px;
}
.ms-gallery-head__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.ms-gallery-head__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
}
.ms-gallery-head__index {
  background: var(--ms-grad-holo-bright);
  background-size: 220% 220%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: ms-shimmer 6s linear infinite;
  font-weight: 600;
}
.ms-gallery-head__sep {
  width: 56px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,78,165,.7), rgba(0,196,255,.7), rgba(174,88,255,.7));
  background-size: 200% 100%;
  animation: ms-shimmer 5s linear infinite;
  display: inline-block;
}
.ms-gallery-head__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  padding: 9px 16px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  transition: all .35s cubic-bezier(.16,1,.3,1);
  position: relative;
  overflow: hidden;
}
.ms-gallery-head__cta::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: var(--ms-grad-holo-bright);
  background-size: 220% 220%;
  animation: ms-shimmer 5s linear infinite;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .35s ease;
}
.ms-gallery-head__cta:hover {
  color: #fff;
  border-color: transparent;
  transform: translateX(2px);
}
.ms-gallery-head__cta:hover::before { opacity: 1; }
.ms-gallery-head__cta svg { transition: transform .35s cubic-bezier(.16,1,.3,1); }
.ms-gallery-head__cta:hover svg { transform: translateX(3px); }

/* —— 主标题：单行，与其他 section title 同尺寸 —— */
.ms-gallery-head__title {
  /* 跟 .ms-section__title 同款尺寸 */
  font-family: 'Archivo Narrow', sans-serif;
  font-size: clamp(26px, 3vw, 38px);
  letter-spacing: 0;
  line-height: 1;
  font-weight: 600;
  text-transform: uppercase;
  margin: 0;
  color: #fff;
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .22em;
}
.ms-gallery-head__title-holo {
  background: var(--ms-grad-holo-bright);
  background-size: 240% 240%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: ms-shimmer 7s linear infinite;
  filter: drop-shadow(0 0 12px rgba(0, 196, 255, .35))
          drop-shadow(0 0 18px rgba(255, 78, 165, .25));
  display: inline-block;
}
.ms-gallery-head__star {
  display: inline-block;
  font-size: .7em;
  vertical-align: 12%;
  color: #fff;
  filter: drop-shadow(0 0 8px rgba(0, 196, 255, .85));
  animation: ms-spin 12s linear infinite;
  transform-origin: center;
  margin-left: .1em;
}
@keyframes ms-spin {
  to { transform: rotate(360deg); }
}

/* —— 滚动入场：holo 词上滑入场 —— */
.ms-gallery-head__title-holo {
  transition: opacity .9s cubic-bezier(.16,1,.3,1) .2s,
              transform .9s cubic-bezier(.16,1,.3,1) .2s;
}
.ms-reveal:not(.is-visible) .ms-gallery-head__title-holo {
  opacity: 0;
  transform: translateY(8px);
}
.ms-reveal.is-visible .ms-gallery-head__title-holo {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 768px) {
  .ms-gallery-head { margin-bottom: 14px; }
  .ms-gallery-head__top { margin-bottom: 6px; }
  .ms-gallery-head__cta { padding: 6px 12px; font-size: 10px; }
  .ms-gallery-head__sep { width: 28px; }
}

.ms-categories {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  max-width: 1180px;            /* 比 product grid 的 1480px 窄一截 — 视觉收口 */
  margin: 0 auto;
  counter-reset: ms-cat;
  position: relative;
  z-index: 2;
}
.ms-categories--cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
  .ms-categories,
  .ms-categories--cols-3 { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (max-width: 480px) {
  .ms-categories,
  .ms-categories--cols-3 { grid-template-columns: 1fr; gap: 12px; }
}

.ms-category {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 8px;
  overflow: hidden;
  isolation: isolate;
  background: #0a0a0a;
  counter-increment: ms-cat;
  transition: transform .55s cubic-bezier(.16,1,.3,1),
              box-shadow .55s cubic-bezier(.16,1,.3,1);
}

/* —— 全息描边（黑底版 — 静态就比较亮） —— */
.ms-category::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: var(--ms-grad-holo-bright);
  background-size: 240% 240%;
  animation: ms-shimmer 6s linear infinite;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: .65;                        /* 黑底上需要更高基础亮度 */
  pointer-events: none;
  z-index: 5;
  transition: opacity .45s ease, filter .45s ease;
  filter: blur(0px);
}

.ms-category__media {
  position: relative;
  aspect-ratio: 3 / 4;          /* 全身人像 portrait — 头到脚完整呈现 */
  overflow: hidden;
  background: #0a0a0a;
  margin: 0;
  border-radius: inherit;
}
@media (max-width: 480px) {
  .ms-category__media { aspect-ratio: 9 / 16; }   /* 手机端用源视频原生 9:16 */
}

.ms-category__img,
.ms-category__video,
.ms-category__media img,
.ms-category__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;     /* 上移视觉中心，避免裁掉人物头部 */
  transition: transform 1s cubic-bezier(.16,1,.3,1), filter .6s ease;
  will-change: transform;
}

.ms-category__placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #0f0f12, #1c1c22);
  color: rgba(255,255,255,.4);
  font-family: 'Archivo Narrow', sans-serif;
  font-size: 22px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 600;
}

/* —— 底部暗角（让 label 永远清晰）—— */
.ms-category__media::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.6) 100%);
  pointer-events: none;
  z-index: 1;
  transition: background .4s ease;
}

/* —— 全息光膜：图层上叠一层超低透明度的全息 —— */
.ms-category__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg,
      transparent 30%,
      rgba(255, 78, 165, .18) 45%,
      rgba(0, 196, 255, .22) 50%,
      rgba(174, 88, 255, .18) 55%,
      transparent 70%);
  background-size: 250% 250%;
  background-position: 100% 0%;
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  transition: opacity .5s ease, background-position 1.4s cubic-bezier(.16,1,.3,1);
}

/* —— 编号 chip（01 / 02 / 03 / 04） · 全息描边 —— */
.ms-category__chip {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  padding: 6px 10px 5px;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .24em;
  color: #fff;
  background: rgba(0, 0, 0, .42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 999px;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ms-category__chip::before {
  content: counter(ms-cat, decimal-leading-zero);
  background: var(--ms-grad-holo-bright);
  background-size: 200% 200%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: ms-shimmer 5s linear infinite;
  font-weight: 600;
}
.ms-category__chip::after {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ms-grad-holo-bright);
  background-size: 200% 200%;
  animation: ms-shimmer 5s linear infinite, ms-pulse 2.4s ease-in-out infinite;
}

/* —— 顶角 viewfinder 角标（左上 + 右下，hover 时延伸） —— */
.ms-category__media .ms-category__corner {
  display: none; /* 不依赖额外 DOM, 用 ::before/::after 实现 */
}

/* —— 左下 subheading —— */
.ms-category__label {
  position: absolute;
  left: 16px;
  bottom: 14px;
  z-index: 4;
  margin: 0;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .28em;
  font-weight: 500;
  text-transform: uppercase;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap .3s cubic-bezier(.16,1,.3,1);
}
.ms-category__label::before {
  /* label 前一道全息小竖线（hover 时变长 + 发光） */
  content: '';
  display: inline-block;
  width: 2px;
  height: 12px;
  background: var(--ms-grad-holo-bright);
  background-size: 200% 200%;
  animation: ms-shimmer 5s linear infinite;
  border-radius: 2px;
  transition: height .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease;
}
.ms-category__label::after {
  content: '→';
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  letter-spacing: 0;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .35s ease, transform .35s cubic-bezier(.16,1,.3,1);
  background: var(--ms-grad-holo-bright);
  background-size: 200% 200%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: ms-shimmer 5s linear infinite;
}

/* =========================================================================
   Hover 状态 — 全息全开（黑底版 — 投影更亮 + glow 外溢）
   ========================================================================= */
.ms-category:hover {
  transform: translateY(-4px);
  /* 三色彩虹光晕（黑底上发光感拉满） */
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .08),                /* 内描边亮线 */
    0 24px 60px -20px rgba(255, 78, 165, .55),
    0 16px 50px -16px rgba(0, 196, 255, .50),
    0 10px 36px -12px rgba(174, 88, 255, .45);
}
.ms-category:hover::before {
  opacity: 1;
  filter: drop-shadow(0 0 8px rgba(0, 196, 255, .6));
}

.ms-category:hover .ms-category__img,
.ms-category:hover .ms-category__video,
.ms-category:hover .ms-category__media img,
.ms-category:hover .ms-category__media video {
  transform: scale(1.06);
  filter: saturate(1.1) contrast(1.04);
}

/* hover 时光流斜扫一次过卡片 */
.ms-category:hover .ms-category__media::after {
  opacity: .85;
  background-position: 0% 100%;
}

/* hover 时底部 label 装饰小条变长 + 发光 */
.ms-category:hover .ms-category__label {
  gap: 12px;
}
.ms-category:hover .ms-category__label::before {
  height: 20px;
  box-shadow: 0 0 12px rgba(255, 78, 165, .5);
}
.ms-category:hover .ms-category__label::after {
  opacity: 1;
  transform: translateX(0);
}

/* —— 编号 chip 的小光点 —— */
@keyframes ms-pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.35); opacity: .65; }
}

/* =========================================================================
   Newsletter Block（黑底，全息描边 CTA）
   ========================================================================= */
.ms-newsletter {
  position: relative;
  background: #000;
  color: #fff;
  padding: 120px 32px;
  text-align: center;
  border-top: 1px solid var(--ms-night-line);
  border-bottom: 1px solid var(--ms-night-line);
  overflow: hidden;
}
.ms-newsletter::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(255,255,255,.04), transparent 60%);
  pointer-events: none;
}
.ms-newsletter__inner { max-width: 720px; margin: 0 auto; position: relative; z-index: 2; }
.ms-newsletter__eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin-bottom: 24px;
  display: inline-block;
}
.ms-newsletter__title {
  font-family: 'Anton', sans-serif;
  font-size: clamp(40px, 6vw, 80px);
  letter-spacing: -.02em;
  line-height: .95;
  font-weight: 400;
  text-transform: uppercase;
  margin: 0 0 16px;
  color: #ffffff !important;   /* 防 Astra 默认 h2 颜色覆盖 */
}
.ms-newsletter__title .ms-newsletter__title-holo {
  color: transparent !important;  /* 让 -webkit-text-fill-color 生效 */
}
.ms-newsletter__title-holo {
  background: var(--ms-grad-holo-bright);
  background-size: 220% 220%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: ms-shimmer 8s linear infinite;
}
.ms-newsletter__sub {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: rgba(255,255,255,.6);
  margin-bottom: 40px;
}
.ms-newsletter__form {
  display: flex;
  gap: 12px;
  max-width: 500px;
  margin: 0 auto;
}
.ms-newsletter__input {
  flex: 1;
  background: transparent;
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  padding: 16px 20px;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
}
.ms-newsletter__input::placeholder { color: rgba(255,255,255,.4); }
.ms-newsletter__input:focus {
  outline: none;
  border-color: #fff;
  box-shadow: 0 0 0 3px rgba(255,255,255,.1);
}
.ms-newsletter__submit {
  background: #fff;
  color: #000;
  border: 0;
  padding: 16px 28px;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .25s cubic-bezier(.16,1,.3,1);
}
.ms-newsletter__submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255,255,255,.2);
}

/* =========================================================================
   FOOTER（覆盖 Astra 默认）
   ========================================================================= */
.home .site-footer,
.home .ast-footer-content {
  background: #000 !important;
  color: rgba(255,255,255,.6) !important;
  border-top: 1px solid var(--ms-night-line);
}
.home .site-footer * { color: inherit !important; }

/* =========================================================================
   滚动出现动画基类
   注意：默认元素是可见的（防止 JS 失败时空白）。
   只有 <html class="ms-js-ready"> 标记后才启用隐藏初始态——
   这个标记由 JS initReveal() 在确认 IntersectionObserver 可用时打上。
   ========================================================================= */
.ms-reveal {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .9s cubic-bezier(.16,1,.3,1),
              transform .9s cubic-bezier(.16,1,.3,1);
}
.ms-js-ready .ms-reveal:not(.is-visible) {
  opacity: 0;
  transform: translateY(28px);
}
.ms-reveal-delay-1 { transition-delay: .1s; }
.ms-reveal-delay-2 { transition-delay: .2s; }
.ms-reveal-delay-3 { transition-delay: .3s; }
.ms-reveal-delay-4 { transition-delay: .4s; }

/* =========================================================================
   响应式收敛
   ========================================================================= */
@media (max-width: 768px) {
  .ms-section { padding: 80px 20px; }
  .ms-newsletter { padding: 80px 20px; }
  .ms-hero__corners { inset: 16px; border-radius: 20px; }
  .ms-hero__meta--l { left: 24px; bottom: 24px; }
  .ms-hero__meta--r { right: 24px; bottom: 24px; }
  .ms-newsletter__form { flex-direction: column; }
}