/*
Theme Name:     AFTERGLOW OFFICIAL Child
Theme URI:      https://afterglowus.com
Description:    中文男装买手店定制子主题，基于 Astra + WooCommerce。
Author:         AFTERGLOW OFFICIAL
Author URI:     https://afterglowus.com
Template:       astra
Version:        0.2.0
License:        GPL-2.0-or-later
Text Domain:    menswear-select-child
*/

/* ==========================================================================
   AFTERGLOW OFFICIAL 设计令牌（Design Tokens）
   ==========================================================================
   以源站结构为基础，并按中文男装买手店方向重新定义。
   所有颜色、字体、间距、动效全部由 CSS 变量驱动，全站一处改全局生效。
   ========================================================================== */

:root {
  /* ======================================================================
     AFTERGLOW OFFICIAL 工作色系：墨黑 + 冷白 + 枪灰，电光蓝只用于关键交互
     ======================================================================
     原则：基底完全无色相（白/黑/银），全息渐变是唯一的"颜色"——
           作为品牌指纹，仅出现在重点位置：标题、徽章、分隔、悬停光线。
     ====================================================================== */

  /* —— 基底（白模式 / Light） —— */
  --ms-bg:               #f7f7f5;
  --ms-bg-soft:          #ececea;
  --ms-ink:              #0b0c0f;
  --ms-ink-muted:        #666970;
  --ms-ink-faint:        #aeb1b8;
  --ms-line:             #dedfdf;
  --ms-line-strong:      #c4c6c9;

  /* —— 基底（黑模式 / Night） —— */
  --ms-night-bg:         #07080a;
  --ms-night-bg-soft:    #0d0f13;
  --ms-night-bg-elev:    #151820;
  --ms-night-ink:        #ffffff;        /* 黑底文字：纯白 */
  --ms-night-ink-muted:  #9a9aa3;        /* 黑底次要文字：银灰 */
  --ms-night-line:       #222630;
  --ms-night-line-strong:#343a46;

  /* —— 银 / Chrome 系列 —— */
  --ms-silver-100:       #f5f5f7;        /* 最亮银 */
  --ms-silver-200:       #e8eaef;
  --ms-silver-300:       #d0d3da;
  --ms-silver-400:       #b6bac3;        /* 中银 */
  --ms-silver-500:       #8a8e98;
  --ms-silver-600:       #6e7280;
  --ms-silver-700:       #4a4e58;
  --ms-silver-800:       #2e3138;        /* 最暗银 */

  /* —— 全息渐变（唯一品牌色，专门用于强调/品牌指纹） —— */
  --ms-accent:           #315cff;
  --ms-grad-primary:     linear-gradient(115deg, #eef1f7 0%, #9ea8bb 45%, #315cff 100%);
  --ms-grad-holo:        var(--ms-grad-primary);

  --ms-grad-holo-bright: linear-gradient(115deg, #ffffff 0%, #98a3b7 46%, #315cff 100%);

  --ms-grad-holo-soft:   linear-gradient(115deg, rgba(238,241,247,.5), rgba(128,142,169,.35), rgba(49,92,255,.22));

  /* —— Chrome / 镀铬渐变（金属银质感） —— */
  --ms-grad-chrome:      linear-gradient(180deg,
                            #ffffff 0%,
                            #d8dae0 30%,
                            #ffffff 50%,
                            #a8acb6 65%,
                            #e8eaef 100%);

  --ms-grad-chrome-h:    linear-gradient(90deg,
                            #f5f5f7 0%,
                            #b6bac3 25%,
                            #ffffff 50%,
                            #8a8e98 75%,
                            #d0d3da 100%);

  --ms-grad-night-glow:  radial-gradient(ellipse at 50% 30%,
                            rgba(255,255,255,.06) 0%,
                            transparent 60%);

  /* —— CTA / 系统色 —— */
  --ms-cta:              #0b0c0f;
  --ms-cta-ink:          #ffffff;
  --ms-cta-hover:        #315cff;
  --ms-cta-night:        #ffffff;        /* 黑底按钮：白 */
  --ms-cta-night-ink:    #000000;
  --ms-success:          #2ec27e;
  --ms-danger:           #ff4757;
  --ms-sale:             #000000;        /* SALE 标签底色：纯黑 */

  /* —— 排版 —— */
  --ms-font-display:     'Inter Tight', 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', sans-serif;
  --ms-font-body:        'Inter', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  --ms-font-mono:        'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  --ms-font-chrome:      'Inter Tight', 'DIN Condensed', 'Arial Narrow', sans-serif;

  /* —— 字号阶梯（Major Third 1.250） —— */
  --ms-fs-xxs:           0.6875rem;      /* 11 */
  --ms-fs-xs:            0.75rem;        /* 12 */
  --ms-fs-sm:            0.875rem;       /* 14 */
  --ms-fs-base:          1rem;           /* 16 */
  --ms-fs-md:            1.125rem;       /* 18 */
  --ms-fs-lg:            1.25rem;        /* 20 */
  --ms-fs-xl:            1.5rem;         /* 24 */
  --ms-fs-2xl:           2rem;           /* 32 */
  --ms-fs-3xl:           2.75rem;        /* 44 */
  --ms-fs-4xl:           4rem;           /* 64 */
  --ms-fs-5xl:           5.5rem;         /* 88 - hero */
  --ms-fs-display:       clamp(3rem, 8vw, 7.5rem); /* 流体大标题 */

  /* —— 字距（关键的精致信号） —— */
  --ms-track-tight:      -0.02em;        /* 大标题用 */
  --ms-track-normal:     0;
  --ms-track-wide:       0.06em;         /* 小标签 / 副标题 all caps 用 */
  --ms-track-x-wide:     0.18em;         /* 极大字距：Y2K 信号 */

  /* —— 行高 —— */
  --ms-lh-tight:         1.05;
  --ms-lh-snug:          1.2;
  --ms-lh-normal:        1.45;
  --ms-lh-loose:         1.7;

  /* —— 间距阶梯（8 进制） —— */
  --ms-sp-1:             4px;
  --ms-sp-2:             8px;
  --ms-sp-3:             12px;
  --ms-sp-4:             16px;
  --ms-sp-5:             24px;
  --ms-sp-6:             32px;
  --ms-sp-7:             48px;
  --ms-sp-8:             64px;
  --ms-sp-9:             96px;
  --ms-sp-10:            128px;

  /* —— 圆角 —— */
  --ms-radius-xs:        4px;
  --ms-radius-sm:        8px;
  --ms-radius-md:        12px;
  --ms-radius-lg:        20px;
  --ms-radius-xl:        32px;
  --ms-radius-pill:      999px;

  /* —— 阴影 / 光晕 —— */
  --ms-shadow-xs:        0 1px 2px rgba(0,0,0,.04);
  --ms-shadow-sm:        0 2px 8px rgba(0,0,0,.06);
  --ms-shadow-md:        0 8px 28px rgba(0,0,0,.08);
  --ms-shadow-lg:        0 16px 48px rgba(0,0,0,.16);
  --ms-shadow-chrome:    0 4px 24px rgba(180,184,195,.5),
                         inset 0 1px 0 rgba(255,255,255,.6);
  --ms-shadow-glow:      0 0 24px rgba(255,255,255,.4),
                         0 0 64px rgba(216,216,222,.3);

  /* —— 缓动 —— */
  --ms-ease:             cubic-bezier(.2, .8, .2, 1);
  --ms-ease-out-expo:    cubic-bezier(.16, 1, .3, 1);
  --ms-ease-in-out:      cubic-bezier(.65, 0, .35, 1);

  /* —— 容器 —— */
  --ms-container:        1440px;
  --ms-container-narrow: 1200px;
  --ms-container-text:   720px;
}

/* ==========================================================================
   全局基础
   ========================================================================== */

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--ms-font-body);
  color: var(--ms-ink);
  background: var(--ms-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* —— 选中文字：纯黑 + 白文字（克制） —— */
::selection {
  background: var(--ms-accent);
  color: #fff;
}

/* —— Night Mode 容器（任何容器加 .ms-night 即可切换） —— */
.ms-night {
  background: var(--ms-night-bg);
  color: var(--ms-night-ink);
}
.ms-night a { color: var(--ms-night-ink); }
.ms-night ::selection { background: #fff; color: #000; }

/* —— 标题统一字体 + 字距收紧（精致感的关键） —— */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--ms-font-display);
  letter-spacing: var(--ms-track-tight);
  line-height: var(--ms-lh-tight);
  font-weight: 700;
}

/* —— 节标题（NEW ARRIVAL / TRENDING / COLLECTIONS）—— */
.entry-title,
.section-title,
h2.wp-block-heading {
  font-size: var(--ms-fs-3xl);
  letter-spacing: var(--ms-track-tight);
  text-transform: uppercase;
}

/* ==========================================================================
   全息文字效果（用于点缀大标题 / 标签）
   用法：在 HTML 元素上加 class="ms-holo-text"
   ========================================================================== */

.ms-holo-text {
  background: var(--ms-grad-holo);
  background-size: 200% 200%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: ms-holo-shift 8s linear infinite;
}

@keyframes ms-holo-shift {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

/* —— Chrome 镀铬文字（标志、特殊标题用） —— */
.ms-chrome-text {
  background: var(--ms-grad-chrome);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  font-family: var(--ms-font-chrome);
  letter-spacing: var(--ms-track-x-wide);
  text-transform: uppercase;
}

/* ==========================================================================
   按钮系统
   ========================================================================== */

.ast-button,
.button,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ms-sp-2);
  padding: 14px 28px;
  font-family: var(--ms-font-body);
  font-weight: 600;
  font-size: var(--ms-fs-sm);
  letter-spacing: var(--ms-track-wide);
  text-transform: uppercase;
  border-radius: var(--ms-radius-pill);
  border: 1px solid var(--ms-cta);
  background: var(--ms-cta);
  color: var(--ms-cta-ink);
  cursor: pointer;
  transition: all .25s var(--ms-ease-out-expo);
  position: relative;
  overflow: hidden;
}

.ast-button:hover,
.button:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background: var(--ms-cta-hover);
  transform: translateY(-2px);
  box-shadow: var(--ms-shadow-md);
}

/* —— 主按钮：加 Add to Cart 那种关键按钮上加全息扫光（hover 时一道光从左掠过） —— */
.woocommerce button.single_add_to_cart_button::before,
.woocommerce a.button.product_type_simple::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(255, 255, 255, .35) 50%,
    transparent 70%);
  transition: left .9s var(--ms-ease-out-expo);
}

.woocommerce button.single_add_to_cart_button:hover::before,
.woocommerce a.button.product_type_simple:hover::before {
  left: 100%;
}

/* —— 全息描边按钮（次要 CTA）—— */
.ms-button-holo {
  background: var(--ms-bg) !important;
  color: var(--ms-ink) !important;
  border: 2px solid transparent !important;
  background-image:
    linear-gradient(var(--ms-bg), var(--ms-bg)),
    var(--ms-grad-holo) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
}

/* ==========================================================================
   产品卡片
   ========================================================================== */

.woocommerce ul.products li.product {
  border-radius: var(--ms-radius-md);
  overflow: visible;
  transition: transform .4s var(--ms-ease-out-expo);
  position: relative;
}

.woocommerce ul.products li.product .ast-woo-product-img-wrap,
.woocommerce ul.products li.product a img {
  border-radius: var(--ms-radius-md);
  overflow: hidden;
  background: var(--ms-bg-soft);
  transition: transform .5s var(--ms-ease-out-expo),
              filter .5s var(--ms-ease-out-expo);
}

.woocommerce ul.products li.product:hover a img {
  transform: scale(1.04);
}

/* —— 商品标题：等宽 + 字距控制 —— */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--ms-font-body);
  font-size: var(--ms-fs-sm);
  font-weight: 500;
  letter-spacing: var(--ms-track-wide);
  text-transform: uppercase;
  margin-top: var(--ms-sp-3);
  color: var(--ms-ink);
}

/* —— 价格 —— */
.woocommerce ul.products li.product .price {
  font-family: var(--ms-font-body);
  font-weight: 500;
  font-size: var(--ms-fs-sm);
  color: var(--ms-ink);
}

/* —— SALE 徽章重设：Y2K 风格的全息描边方角胶囊 —— */
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
  position: absolute;
  top: 12px; left: 12px;
  margin: 0;
  padding: 6px 14px;
  background: var(--ms-sale);
  color: #fff;
  font-family: var(--ms-font-mono);
  font-size: var(--ms-fs-xxs);
  font-weight: 600;
  letter-spacing: var(--ms-track-x-wide);
  border-radius: 2px;
  border: 0;
  text-transform: uppercase;
  z-index: 2;
}

/* ==========================================================================
   公告 Marquee（顶部滚动条 - 加全息分隔符）
   ========================================================================== */

.ms-marquee {
  background: var(--ms-bg);
  border-top: 1px solid var(--ms-line);
  border-bottom: 1px solid var(--ms-line);
  overflow: hidden;
}
.ms-marquee__track {
  display: flex; gap: var(--ms-sp-7);
  white-space: nowrap;
  animation: ms-marquee 28s linear infinite;
  font-family: var(--ms-font-body);
  font-size: var(--ms-fs-xs);
  letter-spacing: var(--ms-track-x-wide);
  text-transform: uppercase;
  padding: 12px 0;
}
.ms-marquee__sep::before {
  content: '✦';
  background: var(--ms-grad-holo);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
@keyframes ms-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ==========================================================================
   表单
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea,
select {
  font-family: var(--ms-font-body);
  border-radius: var(--ms-radius-md);
  border: 1px solid var(--ms-line-strong);
  padding: 12px 16px;
  background: var(--ms-bg);
  transition: border-color .2s var(--ms-ease), box-shadow .2s var(--ms-ease);
}

input:focus, textarea:focus, select:focus {
  border-color: var(--ms-ink);
  box-shadow: 0 0 0 4px rgba(255, 61, 146, .12);
  outline: 0;
}

/* ==========================================================================
   全息分隔线（用于章节之间）
   用法：<hr class="ms-divider-holo">
   ========================================================================== */

.ms-divider-holo {
  height: 1px;
  border: 0;
  background: var(--ms-grad-holo);
  background-size: 200% 100%;
  animation: ms-holo-shift 6s linear infinite;
  margin: var(--ms-sp-7) 0;
}

/* ==========================================================================
   滚动出现动画（关键章节用 .ms-reveal 类）
   ========================================================================== */

.ms-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s var(--ms-ease-out-expo),
              transform .8s var(--ms-ease-out-expo);
}
.ms-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   链接
   ========================================================================== */

a {
  color: inherit;
  transition: color .2s var(--ms-ease);
}

/* ==========================================================================
   响应式微调（移动端字号 / 间距收敛）
   ========================================================================== */

@media (max-width: 768px) {
  :root {
    --ms-fs-3xl: 2rem;
    --ms-fs-4xl: 2.75rem;
  }
}