/* ============================================================
   modern.css · 保健品「东方红金」收尾层
   载入顺序：最后，覆盖 style.css / premium.css / chishi.css
   目标：红金主色 + 干净留白 + 无衬线正文 + 胶囊按钮 + 柔和阴影 + 悬停浮起
   原则：只做外观覆盖，不改 HTML/PHP 结构，方便回滚
   ============================================================ */
:root {
  /* —— 东方红金主色板 —— */
  --hp-purple: #9e1f1a;
  --hp-purple-deep: #6f1411;
  --hp-purple-bright: #b3372f;
  --hp-purple-soft: #c7a25f;
  --hp-purple-lt: #f4dca6;
  --hp-tint: #fbf4ea;
  --hp-ink: #221b16;
  --hp-ink-soft: #6b6157;
  --hp-line: #ece3d3;

  /* —— 统一覆盖站点三套调色变量为红金 —— */
  /* (1) cx- 首页系统 */
  --cx-red: #9e1f1a;
  --cx-red-deep: #6f1411;
  --cx-gold: #b1893f;
  --cx-gold-soft: #c7a25f;
  --cx-gold-lt: #f4dca6;
  --cx-paper: #ffffff;
  --cx-paper-2: #f7f2ea;
  --cx-line: #ece3d3;
  --cx-ink: #221b16;
  --cx-ink-soft: #6b6157;
  /* (2) green/gold 系统：预览生效；真实站点由后台主题注入同色覆盖 */
  --green-900: #9e1f1a;
  --green-800: #8d1c17;
  --green-700: #b3372f;
  --green-600: #c0594f;
  --gold: #b1893f;
  --gold-dark: #9c7733;
  --gold-light: #f4dca6;
  --red-deep: #6f1411;
  /* (3) modern 内部 m- 系统 */
  --m-red: #9e1f1a;
  --m-red-deep: #6f1411;
  --m-gold: #b1893f;
  --m-gold-soft: #c7a25f;
  --m-gold-lt: #f4dca6;
  --m-ink: #221b16;
  --m-ink-soft: #6b6157;
  --m-line: #ece3d3;
  --m-paper: #ffffff;

  --m-radius: 16px;
  --m-radius-lg: 22px;
  --m-shadow-sm: 0 8px 24px -14px rgba(110, 20, 17, .20);
  --m-shadow: 0 20px 46px -22px rgba(110, 20, 17, .28);
  --m-shadow-red: 0 14px 30px -14px rgba(110, 20, 17, .48);
  --m-sans: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- 全局：干净白底 + 无衬线正文 ---------- */
body {
  background-color: #ffffff !important;
  background-image:
    radial-gradient(900px 520px at 88% -6%, rgba(158, 31, 26, .05), transparent 60%),
    radial-gradient(720px 460px at 4% 2%, rgba(177, 137, 63, .05), transparent 60%) !important;
  font-family: var(--m-sans) !important;
  color: var(--hp-ink);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}
a:hover { color: var(--hp-purple); }

/* 正文走无衬线；大标题保留衬线（宋体 / Noto Serif）以撑住东方高级感 */
input, button, select, textarea,
.cx-feature .sub, .cx-pcard__body p, .cx-jitem p, .cx-step span,
.main-nav a, .footer-col a, .footer-brand p {
  font-family: var(--m-sans) !important;
}

/* ============================================================
   按钮：胶囊 + 东方红
   ============================================================ */
.btn, .cx-btn {
  font-family: var(--m-sans) !important;
  border-radius: 999px !important;
  letter-spacing: .2px !important;
  font-weight: 600 !important;
  border: 1.5px solid transparent !important;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease,
    color .22s ease, border-color .22s ease !important;
}
.btn:hover, .cx-btn:hover { transform: translateY(-2px); }

/* 主按钮：朱红渐变 */
.btn-primary, .cx-btn--solid {
  background: linear-gradient(135deg, #b3372f 0%, #9e1f1a 100%) !important;
  color: #fff !important;
  box-shadow: var(--m-shadow-red) !important;
}
.btn-primary:hover, .cx-btn--solid:hover {
  background: linear-gradient(135deg, #9e1f1a 0%, #6f1411 100%) !important;
  color: #fff !important;
  box-shadow: 0 18px 34px -14px rgba(110, 20, 17, .58) !important;
}

/* 次按钮（原金按钮 .cx-btn--gold/.btn-gold）：白底 + 描金，深浅底通用 */
.cx-btn--gold, .btn-gold {
  background: #fff !important;
  color: #9e1f1a !important;
  border-color: rgba(177, 137, 63, .55) !important;
  box-shadow: 0 10px 24px -14px rgba(110, 20, 17, .32) !important;
}
.cx-btn--gold:hover, .btn-gold:hover {
  background: #b1893f !important;
  color: #fff !important;
  border-color: #b1893f !important;
}

/* 线框按钮 */
.btn-outline, .cx-btn--line {
  background: #fff !important;
  color: #9e1f1a !important;
  border-color: rgba(158, 31, 26, .30) !important;
  box-shadow: 0 4px 14px -8px rgba(110, 20, 17, .2) !important;
}
.btn-outline:hover, .cx-btn--line:hover {
  background: #9e1f1a !important;
  color: #fff !important;
  border-color: #9e1f1a !important;
}

/* 幽灵按钮（深色背景用） */
.btn-ghost {
  background: rgba(255, 255, 255, .14) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, .6) !important;
  backdrop-filter: blur(2px);
}
.btn-ghost:hover {
  background: #fff !important;
  color: #9e1f1a !important;
  border-color: #fff !important;
}
.btn-sm { padding: 9px 20px !important; }

/* ============================================================
   导航 / 品牌标
   ============================================================ */
.main-nav a {
  font-family: var(--m-sans) !important;
  letter-spacing: .2px !important;
  font-weight: 500 !important;
}
.nav-search { border-radius: 999px !important; border-color: var(--hp-line) !important; }
.nav-search input { font-family: var(--m-sans); }
.brand-logo .mark {
  background: linear-gradient(135deg, #b3372f, #9e1f1a) !important;
  color: var(--cx-gold-lt) !important;
  box-shadow: 0 10px 24px -12px rgba(110, 20, 17, .5) !important;
}

/* ============================================================
   卡片：圆角 + 柔和阴影 + 悬停浮起
   ============================================================ */
.cx-pcard, .product-card {
  border-radius: var(--m-radius) !important;
  border: 1px solid var(--hp-line) !important;
  background: #fff !important;
  box-shadow: var(--m-shadow-sm) !important;
  overflow: hidden;
  transition: transform .28s ease, box-shadow .28s ease !important;
}
.cx-pcard:hover, .product-card:hover { transform: translateY(-8px) !important; box-shadow: var(--m-shadow) !important; }
.cx-pcard__cat { border-radius: 0 0 12px 0 !important; color: #fff !important; }
.product-cat { border-radius: 999px !important; }
.cx-feature__badge { color: #fff !important; }

.cx-cat { transition: background .25s ease, transform .25s ease !important; }
.cx-cat:hover { transform: translateY(-4px); }

.cx-channels a, .channel-wall .ch, .shop-card,
.value-card, .home-feat .feat, .honor-wall .hn, .testi-grid .testi {
  border-radius: var(--m-radius) !important;
  border: 1px solid var(--hp-line) !important;
  box-shadow: var(--m-shadow-sm) !important;
  transition: transform .22s ease, box-shadow .22s ease !important;
}
.cx-channels a:hover, .channel-wall .ch:hover, .shop-card:hover,
.value-card:hover, .home-feat .feat:hover {
  transform: translateY(-4px);
  box-shadow: var(--m-shadow) !important;
}
.contact-card, .sidebar-box, .article-detail {
  border-radius: var(--m-radius-lg) !important;
  border: 1px solid var(--hp-line) !important;
  box-shadow: var(--m-shadow-sm) !important;
}

.cx-jitem { border-radius: 12px; padding-left: 12px; padding-right: 12px; transition: background .2s ease; }
.cx-jitem:hover { background: rgba(158, 31, 26, .05) !important; }

.filter-bar a { border-radius: 999px !important; border-color: var(--hp-line) !important; font-family: var(--m-sans) !important; letter-spacing: .2px !important; }
.pager a, .pager span { border-radius: 10px !important; border-color: var(--hp-line) !important; }

.cx-frame { border-radius: 12px; }
.cx-frame::after { border-radius: 7px; }
.cx-frame img { border-radius: 7px; }
.brand-figure { border-radius: var(--m-radius-lg) !important; }
.pd-gallery .main-img { border-radius: var(--m-radius-lg) !important; }
.pd-price-box { border-radius: var(--m-radius) !important; background: linear-gradient(120deg, #fbf4ea, #f3e8d6) !important; }

.cx-h2 { letter-spacing: 2px; }
.cx-kicker span { letter-spacing: 4px; }

/* ============================================================
   深色区块：墨褐 / 朱砂
   ============================================================ */
.cx-story { background: linear-gradient(160deg, #2a201a, #160f0c) !important; color: #f1e7d6 !important; }
.cx-story p { color: rgba(241, 231, 214, .85) !important; }
.cx-story__media .cx-frame { background: #20160f !important; border-color: rgba(199, 162, 95, .30) !important; }
.cx-story__stats .n { color: var(--hp-purple-lt) !important; }

.cta-band { background: linear-gradient(120deg, #9e1f1a 0%, #6f1411 60%, #5a0f0d 100%) !important; }
.home-stats .num { color: #fbeede !important; }

.site-footer { background: linear-gradient(180deg, #241c16, #160f0c) !important; }
.footer-brand .mark { background: linear-gradient(135deg, #b3372f, #9e1f1a) !important; color: var(--cx-gold-lt) !important; }

.page-banner::before { color: rgba(244, 220, 166, .07) !important; }

/* ---------- 浮动客服（微信 / 电话）+ 回到顶部：东方红圆钮 ---------- */
.float-service .fs-btn {
  background: #9e1f1a !important;
  color: #fff !important;
  box-shadow: 0 12px 26px -10px rgba(110, 20, 17, .5) !important;
}
.float-service .fs-btn:hover { background: #6f1411 !important; }
.float-service .fs-pop { border-radius: 14px !important; border-color: var(--hp-line) !important; }
.float-service .fs-pop b { color: #9e1f1a !important; }
.back-top { background: #9e1f1a !important; border-radius: 50% !important; box-shadow: var(--m-shadow) !important; }
.back-top:hover { background: #6f1411 !important; }

/* ============================================================
   大气 / 大图升级（满屏大图、巨标题、强留白）
   ============================================================ */
.hero.cx-carousel { height: 100vh !important; min-height: 680px !important; max-height: 1000px; }
.hero.cx-carousel::after { display: none !important; }
.hero.cx-carousel,
.hero.cx-carousel .hero-slide {
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
}
.hero.cx-carousel .hero-slide { justify-content: center !important; }
.cx-carousel__inner { margin-left: auto !important; margin-right: auto !important; max-width: 1180px !important; padding: 96px 24px !important; }
.hero.cx-carousel .hero-slide::before,
.cx-hero::before {
  background:
    linear-gradient(180deg, rgba(40, 12, 10, .38) 0%, rgba(40, 12, 10, .20) 45%, rgba(24, 8, 6, .64) 100%) !important;
}
.cx-hero__title { font-size: clamp(48px, 7vw, 104px) !important; letter-spacing: 4px !important; line-height: 1.1 !important; text-shadow: 0 8px 46px rgba(0, 0, 0, .5); }
.cx-hero__lead { font-size: clamp(16px, 1.5vw, 22px) !important; max-width: 680px; margin-left: auto; margin-right: auto; }
.cx-hero__rule { width: 150px !important; }
.cx-seal--lg { width: 104px !important; height: 104px !important; font-size: 62px !important; }
.cx-seal { background: linear-gradient(160deg, #b3372f, #9e1f1a) !important; color: var(--cx-gold-lt) !important; }
.cx-hero__btns .cx-btn { padding: 16px 40px !important; font-size: 16px !important; }

.cx-section { padding: 130px 0 !important; }
.cx-h2 { font-size: clamp(34px, 4.4vw, 60px) !important; letter-spacing: 3px !important; }

.cx-feature__grid { grid-template-columns: 1.12fr .88fr !important; gap: 76px !important; }
.cx-feature__media .cx-frame img { aspect-ratio: 4 / 4.6 !important; }
.cx-feature h3 { font-size: clamp(30px, 3.6vw, 48px) !important; }

.cx-products__grid { gap: 30px !important; }
.cx-pcard__img { aspect-ratio: 3 / 3.5 !important; }

.cx-cat__img { width: 128px !important; height: 128px !important; }
.cx-cat { padding: 28px 14px !important; }

.cx-story__grid { gap: 80px !important; }
.cx-story__media .cx-frame img { aspect-ratio: 4 / 4.4 !important; }

/* ---------- 全屏大图横幅 .mega-band ---------- */
.mega-band {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: left;
  color: #fff;
  background-size: cover;
  background-position: right center;
  overflow: hidden;
}
.mega-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(40, 12, 10, .88) 0%, rgba(40, 12, 10, .54) 40%, rgba(40, 12, 10, .16) 70%, rgba(40, 12, 10, .04) 100%),
    linear-gradient(0deg, rgba(24, 8, 6, .44) 0%, rgba(0, 0, 0, 0) 45%);
}
.mega-band__inner { position: relative; z-index: 2; width: 100%; max-width: 1240px; padding: 96px 28px; }
.mega-band__eyebrow { letter-spacing: 8px; color: var(--hp-purple-lt); font-size: 14px; margin-bottom: 18px; }
.mega-band__title {
  font-size: clamp(34px, 5vw, 64px);
  letter-spacing: 3px;
  line-height: 1.22;
  color: #fff;
  text-shadow: 0 6px 40px rgba(0, 0, 0, .5);
  margin-bottom: 22px;
  max-width: 640px;
}
.mega-band__rule { display: block; width: 130px; height: 2px; margin: 0 0 24px; background: linear-gradient(90deg, var(--hp-purple-lt), transparent); }
.mega-band__lead { font-size: 18px; color: rgba(255, 255, 255, .92); letter-spacing: 1px; margin-bottom: 32px; max-width: 560px; }

/* ---------- 响应式回退 ---------- */
@media (max-width: 980px) {
  .cx-section { padding: 84px 0 !important; }
  .cx-feature__grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .mega-band { min-height: 440px; background-attachment: scroll; }
}
@media (max-width: 640px) {
  .btn, .cx-btn { letter-spacing: .1px !important; }
  .hero.cx-carousel { height: 88vh !important; min-height: 520px !important; }
  .cx-hero__title { letter-spacing: 3px !important; }
  .mega-band { min-height: 360px; }
  .mega-band__inner { padding: 60px 20px; }
}