/* ==========================================================================
   创创云 · 卖场主题层 v2（对齐 dn23.com 设计语言）
   --------------------------------------------------------------------------
   参考站实测（Chrome computed style，1440×1000）：
     主色          #0055ff        导航 / 价格 / CTA 同色
     促销橙        #ff9400 + #fff3dc 底      仅用于「热销」类角标
     正文          #212529 / #222 / #555 / #6c757d / #888
     分隔线        #dee2e6
     页面底        #f6f8fa        卡片底 #f8fcfe
     导航          高 71px（含 1px 下边框）、fixed、白底、项 14px/#191919 垂直居中
                   右侧注册按钮为全高贴边方块（border-radius: 0）
     首屏          标题 38px/700、副标题 20px/400、CTA 高 50px 白字 #0056ff
     区块标题      35px/700 居中；副标题 15.4px/#6c757d，max-width 800px 居中
     商品卡        padding 15px 20px、圆角 8px、底 #f8fcfe
                   标题 16px/600 #222；描述 14px/1.6 #555；
                   标签 4px 圆角白底 #495057；价格 22px/700 主色蓝
     栅格          桌面 3 列 / 平板 2 列 / 手机 1 列（col-lg-4 / col-md-6 / col-sm-12）

   本层只做「令牌与组件对齐」，不重建页面结构 —— 结构本身已按 dn23 搭过
   （nav → hero → quick → products → …），改结构只会增加回滚风险。

   作用域：仅 .home-page（公开页 6 个视图：home / products / help / news / contact / qq）。
     后台 views/admin、控制台 views/console 不使用该类，不受影响。
     app.css 被后台与用户中心共用，本文件不修改它，只在其后覆盖。

   加载顺序：public/index.php 中排在 app.css / home-idcmax.css 之后。
   回滚：见 /www/backup/xin-market-theme-20261106/README.md
   ========================================================================== */

/* ==========================================================================
   1. 令牌层（数值全部取自 dn23 实测，不凭感觉）
   ========================================================================== */
.home-page {
  /* —— 色彩 ——
     dn23 是单色系：蓝负责「品牌 / 价格 / 动作」，橙只负责「促销角标」。
     原站同时存在 #165dff / #2563eb / #2b7cff / #4080ff / #0b5cff 五个蓝，
     外加 #ef3b36 / #ff4d3a / #f53f3f 三个红，颜色语义完全失序。 */
  --mk-brand:      #0055ff;   /* 唯一主色：导航激活、价格、主按钮、链接 */
  --mk-brand-deep: #0043cc;   /* hover / active */
  --mk-brand-soft: #ebf2fd;   /* 浅底 */

  --mk-promo:      #ff9400;   /* 促销角标专用，绝不复用为价格色 */
  --mk-promo-soft: #fff3dc;

  --mk-ink:        #212529;   /* 正文 */
  --mk-title:      #222222;   /* 卡片标题 */
  --mk-sub:        #555555;   /* 卡片描述 */
  --mk-muted:      #6c757d;   /* 辅助说明 */
  --mk-mute:       #888888;   /* 最弱信息 */

  --mk-line:       #dee2e6;   /* 分隔线 */
  --mk-line-soft:  #eef1f5;

  --mk-bg:         #f6f8fa;   /* 页面底 */
  --mk-surface:    #ffffff;
  --mk-card-bg:    #f8fcfe;   /* 卡片底（dn23 同值） */

  --mk-ok:         #0f7b4f;
  --mk-ok-soft:    #e9f7f0;

  /* —— 字阶：7 级，全部为 dn23 实测字号 —— */
  --mk-fs-xs:   12px;   /* 角标 */
  --mk-fs-sm:   13px;   /* 次级说明 */
  --mk-fs-base: 14px;   /* 正文 / 导航项 / 卡片描述 */
  --mk-fs-sub:  15.4px; /* 区块副标题 */
  --mk-fs-md:   16px;   /* 卡片标题 / 按钮 */
  --mk-fs-lg:   20px;   /* 首屏副标题 */
  --mk-fs-price:22px;   /* 价格 */
  --mk-fs-h2:   35px;   /* 区块标题 */
  --mk-fs-h1:   38px;   /* 首屏主标题 */

  /* —— 间距：Bootstrap spacing scale（dn23 基于 Bootstrap）—— */
  --mk-s1: 4px;  --mk-s2: 8px;  --mk-s3: 15px; --mk-s4: 20px;
  --mk-s5: 24px; --mk-s6: 35px; --mk-s7: 48px; --mk-s8: 80px;

  /* —— 圆角：两档，8px 卡片 / 4px 小元素 —— */
  --mk-r-sm: 4px;
  --mk-r-lg: 8px;

  --mk-sh1: 0 1px 2px rgba(33, 37, 41, .06);
  --mk-sh2: 0 4px 14px rgba(33, 37, 41, .07);

  --mk-ease: cubic-bezier(.16, 1, .3, 1);
  --mk-dur-fast: 160ms;
  --mk-dur-base: 320ms;

  /* 价格数字用 DIN 系：macOS/iOS 自带 DIN Alternate，Windows 自带 Bahnschrift，
     零下载、不增加请求，且比中文默认字体更接近 dn23 的紧凑数字感 */
  --mk-font-num: "DIN Alternate", "Bahnschrift", "Bahnschrift SemiBold",
                 "Helvetica Neue", "PingFang SC", sans-serif;

  background: var(--mk-bg);
  font-size: var(--mk-fs-base);
  line-height: 1.5;
  color: var(--mk-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   2. 收色：把五个蓝、三个红并成「一蓝一橙」
   杠杆点是 --arcoblue-6：Arco 的 --primary-6 指向它，重定义整条梯度即可
   一次性收口所有 Arco 主色控件（按钮 / 标签 / 分页 / 开关 …）。
   ========================================================================== */
.home-page {
  --arcoblue-1:  235, 242, 255;
  --arcoblue-2:  209, 226, 255;
  --arcoblue-3:  166, 198, 255;
  --arcoblue-4:  102, 157, 255;
  --arcoblue-5:  51, 126, 255;
  --arcoblue-6:  0, 85, 255;    /* #0055ff —— 唯一主色 */
  --arcoblue-7:  0, 67, 204;
  --arcoblue-8:  0, 51, 153;
  --arcoblue-9:  0, 36, 110;
  --arcoblue-10: 0, 22, 71;

  /* 变量型旧主色别名（app.css / home-idcmax.css 各自一套）统一到同一蓝 */
  --tc-primary:              #0055ff;
  --tc-primary-hover:        #0043cc;
  --brand-primary:           #0055ff;
  --aicloud-primary:         #0055ff;
  --aicloud-primary-light:   #337eff;
  --aicloud-primary-lighter: #669dff;
  --brand-primary-light:     #ebf2fd;
  --tc-primary-light:        #ebf2fd;
  --im-blue:                 #0055ff;   /* home-idcmax.css 自己的蓝 */
}

.home-page ::selection { background: rgba(var(--primary-6), .22); }
.home-page a { color: var(--mk-brand); }

.home-page .arco-btn-primary:not(.arco-btn-disabled):not(.arco-btn-status-danger) {
  background: var(--mk-brand);
  border-color: var(--mk-brand);
  color: #fff;              /* 设了底色就必须设字色，否则会继承别处写死的蓝，见下方 CTA 说明 */
}
.home-page .arco-btn-primary:not(.arco-btn-disabled):not(.arco-btn-status-danger):hover {
  background: var(--mk-brand-deep);
  border-color: var(--mk-brand-deep);
  color: #fff;
}

/* CTA 引导条是整片蓝底，主按钮必须反白。
   上面那条（权重 0,4,0）会把底色刷成品牌蓝，但不动 color；
   而 home-idcmax.css 给 .tc-cta-btns .arco-btn-primary 设的是 color:#0b5cff。
   两者叠加 = 蓝底(#0055ff)配蓝字(#0b5cff)，对比度 1.02:1，按钮文字直接看不见。
   这里把底色和字色一起收回「白底蓝字」，hover 走浅雾蓝而不是深蓝（深蓝在蓝底上同样糊）。 */
.home-page .tc-cta-btns .arco-btn-primary:not(.arco-btn-disabled):not(.arco-btn-status-danger) {
  background: #fff;
  border-color: #fff;
  color: var(--mk-brand);
}
.home-page .tc-cta-btns .arco-btn-primary:not(.arco-btn-disabled):not(.arco-btn-status-danger):hover {
  background: #eaf1ff;
  border-color: #eaf1ff;
  color: var(--mk-brand-deep);
}

/* —— 强调色纪律（dn23 同规则：橙只给促销，蓝负责品牌/价格/动作）——
   原站有三个互不相干的红：#ef3b36（首屏定位徽章）、#ff4d3a（HOT 角标）、
   #f53f3f（错误/促销）。处理原则：
     · 定位类徽章（「稳定安全可控」）不是促销，改为中性描边标签，这是 dn23 的克制语言；
     · 真正的促销角标（HOT）保留暖色，但归到 --mk-promo 一档，不再另起一红。 */
.home-page .imd-hero-badge {
  background: #fff;
  color: var(--mk-ink);
  border: 1px solid var(--mk-line);
  border-radius: var(--mk-r-sm);
  font-size: var(--mk-fs-xs);
  font-weight: 600;
  letter-spacing: .08em;
}
.home-page .dn-quick-cta-title em,
.home-page .dn-quick-cta em {
  background: var(--mk-promo);
  color: #fff;
  border-radius: 2px;
}

/* ==========================================================================
   3. 字体与字阶
   ========================================================================== */
.home-page p { line-height: 1.6; }
.home-page h1, .home-page h2, .home-page h3 { color: var(--mk-ink); }

.home-page .mk-num,
.home-page .tc-prod-price b,
.home-page .mk-anchor__price b {
  font-family: var(--mk-font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ==========================================================================
   4. 顶部导航（dn23：71px 高、项垂直居中、注册按钮全高贴边）
   权重说明：home-idcmax.css 用的是 `.idcmax-home .tc-nav .xxx` 三级选择器，
   这里必须带 .tc-nav 才能压住，否则改动会静默失效。
   ========================================================================== */
.home-page .tc-nav .home-nav-inner { height: 70px; }
.home-page .tc-nav .home-nav-links a {
  display: inline-flex;
  align-items: center;
  height: 70px;
  padding: 0 12px;
  font-size: var(--mk-fs-base);
  color: #191919;
  border-radius: var(--mk-r-sm);
}
.home-page .tc-nav .home-nav-links a:hover { color: var(--mk-brand); }
.home-page .tc-nav .home-nav-links a.active { color: var(--mk-brand); font-weight: 500; }

/* 注册按钮：全高、方角、贴右边 —— dn23 的标志性动作 */
.home-page .tc-nav .home-nav-actions { height: 70px; }
.home-page .tc-nav .home-nav-actions .arco-btn-primary {
  height: 70px;
  border-radius: 0;
  background: var(--mk-brand);
  font-size: var(--mk-fs-base);
}
.home-page .tc-nav .home-nav-actions .arco-btn-primary:hover { background: var(--mk-brand-deep); }

/* ==========================================================================
   5. 首屏：dn23 的排版节奏（38 / 20 / 50px）
   ========================================================================== */
.home-page .dn-hero .tc-hero-title {
  font-size: var(--mk-fs-h1);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--mk-ink);
}
.home-page .dn-hero .tc-hero-sub {
  margin-top: var(--mk-s3);
  font-size: var(--mk-fs-lg);
  line-height: 1.6;
  color: var(--mk-ink);
}
.home-page .dn-hero .tc-hero-btns { margin-top: var(--mk-s6); gap: 8px; }
.home-page .dn-hero .tc-hero-btns .arco-btn {
  height: 50px;
  line-height: 50px;
  padding: 0 28px;
  border-radius: var(--mk-r-sm);
  font-size: var(--mk-fs-md);
}

/* —— 首屏起价锚点 ——
   把「多少钱 + 什么配置」在 3 秒内说清，而不是让访客先读五屏话术。
   实色面 + 发丝线，不用 backdrop-filter（压在视频层上会掉帧）。 */
.mk-anchor {
  display: inline-flex;
  align-items: stretch;
  margin-top: var(--mk-s5);
  max-width: 100%;
  background: var(--mk-surface);
  border: 1px solid var(--mk-line);
  border-radius: var(--mk-r-sm);
  box-shadow: var(--mk-sh1);
  overflow: hidden;
}
.mk-anchor__main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 11px 16px;
  min-width: 0;
}
.mk-anchor__eyebrow {
  display: block;
  font-size: var(--mk-fs-xs);
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--mk-mute);
  line-height: 1.2;
}
.mk-anchor__spec {
  display: block;
  font-family: var(--mk-font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--mk-fs-sm);
  font-weight: 600;
  color: var(--mk-ink);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mk-anchor__note {
  display: block;
  font-size: var(--mk-fs-xs);
  color: var(--mk-muted);
  line-height: 1.3;
  white-space: nowrap;
}
/* 价签虚线撕口：票据语言，是这个区块的记忆点 */
.mk-anchor__price {
  display: flex;
  align-items: baseline;
  gap: 2px;
  padding: 10px 16px;
  border-left: 1px dashed var(--mk-line);
  background: #fff;
  white-space: nowrap;
}
.mk-anchor__cur {
  font-family: var(--mk-font-num);
  font-size: var(--mk-fs-md);
  font-weight: 600;
  color: var(--mk-brand);
}
.mk-anchor__price b {
  font-size: var(--mk-fs-price);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--mk-brand);
}
.mk-anchor__unit {
  font-size: var(--mk-fs-xs);
  color: var(--mk-muted);
  margin-left: 3px;
}

@media (prefers-reduced-motion: no-preference) {
  .mk-anchor { animation: mkAnchorIn var(--mk-dur-base) var(--mk-ease) 340ms both; }
  @keyframes mkAnchorIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .mk-anchor { animation: none; }
}

/* ==========================================================================
   6. 区块标题（dn23：35px 居中 + 15.4px 副标题，副标题限宽 800px 居中）
   ========================================================================== */
.home-page .dn-sec-head {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--mk-s6);
  text-align: center;
}
.home-page .dn-sec-head h2,
.home-page .dn-sec-head h1 {
  font-size: var(--mk-fs-h2);
  line-height: 1.2;
  font-weight: 700;
  color: var(--mk-ink);
  margin: 0;
}
.home-page .dn-sec-head p {
  margin: var(--mk-s3) auto 0;
  max-width: 800px;
  font-size: var(--mk-fs-sub);
  line-height: 1.5;
  color: var(--mk-muted);
}

/* ==========================================================================
   7. 商品卡：dn23 四段式（标题 / 描述 / 标签 / 价格）+ 三态
   原实现把价格压进 12px 描边小标签里，最该被看见的信息最轻 —— 本层重排。
   注意：上游 stock = -1 是「超卖常态」，代表有货；只有 stock === 0 才是售罄。
   ========================================================================== */
.home-page .tc-prod-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 15px 20px 16px;
  background: var(--mk-card-bg);
  border: 1px solid var(--mk-line-soft);
  border-radius: var(--mk-r-lg);
  box-shadow: none;
  cursor: pointer;
  /* 只过渡 transform / box-shadow / border-color，避免触发布局 */
  transition: transform var(--mk-dur-fast) ease-out,
              box-shadow var(--mk-dur-fast) ease-out,
              border-color var(--mk-dur-fast) ease-out;
}
.home-page .tc-prod-card:hover {
  transform: translateY(-2px);
  border-color: #d6e6f5;
  box-shadow: var(--mk-sh2);
}
.home-page .tc-prod-card:focus-within {
  border-color: var(--mk-brand);
  box-shadow: var(--mk-sh2);
}

/* 第 1 段：标签条。始终渲染并固定高度，否则只有部分卡片有标签时同排标题会错行 */
.tc-prod-flags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  overflow: hidden;
  min-height: 34px;
  padding-top: 2px;
}
.mk-flag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--mk-r-sm);
  font-size: var(--mk-fs-xs);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
}
.mk-flag--hot {
  color: #c2410c;              /* 暖橙字，在 #fff3dc 上 4.7:1，过 AA */
  background: var(--mk-promo-soft);
  border-color: #fcd9b6;
}
.mk-flag--low {
  color: #a35a00;
  background: #fff8e9;
  border-color: #f2dfb8;
}
.mk-flag--out {
  color: var(--mk-muted);
  background: #f1f3f5;
  border-color: var(--mk-line);
}
.mk-flag--ok {
  color: var(--mk-ok);
  background: var(--mk-ok-soft);
  border-color: #c9ebda;
}

/* 第 2 段：名称 */
.home-page .tc-prod-title {
  margin: 0;
  font-size: var(--mk-fs-md);
  font-weight: 600;
  line-height: 1.25;
  color: var(--mk-title);
  letter-spacing: 0;
}

/* 第 3 段：描述（规格） */
.home-page .tc-prod-desc {
  margin: 10px 0 0;
  font-size: var(--mk-fs-base);
  line-height: 1.6;
  color: var(--mk-sub);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.home-page .tc-prod-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
  font-size: var(--mk-fs-xs);
  line-height: 1.5;
  color: var(--mk-mute);
}
.home-page .tc-prod-meta span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* 第 4 段：价格 + 动作（推到底部，同排价格对齐） */
.tc-prod-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 16px;
}
.tc-prod-price {
  display: flex;
  align-items: baseline;
  gap: 1px;
  min-width: 0;
  color: var(--mk-brand);   /* dn23 价格用主色蓝，不用红 */
}
.tc-prod-price .cur {
  font-family: var(--mk-font-num);
  font-size: var(--mk-fs-sm);
  font-weight: 600;
}
.tc-prod-price b {
  font-size: var(--mk-fs-price);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
}
.tc-prod-price .unit {
  font-size: var(--mk-fs-xs);
  color: var(--mk-muted);
  margin-left: 2px;
  white-space: nowrap;
}
.tc-prod-foot .arco-btn {
  flex: 0 0 auto;
  height: 32px;
  padding: 0 16px;
  font-size: var(--mk-fs-sm);
  border-radius: var(--mk-r-sm);
}

/* —— 态：库存紧张 —— */
.home-page .tc-prod-card.is-low { border-color: #f2dfb8; }
.home-page .tc-prod-card.is-low:hover { border-color: #e8c98d; }

/* —— 态：售罄 —— 价格不再用强调色，避免「买不到的东西还在勾人」 */
.home-page .tc-prod-card.is-out {
  background: #fafbfc;
  border-color: var(--mk-line-soft);
  cursor: default;
}
.home-page .tc-prod-card.is-out:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--mk-line-soft);
}
.home-page .tc-prod-card.is-out .tc-prod-title,
.home-page .tc-prod-card.is-out .tc-prod-desc,
.home-page .tc-prod-card.is-out .tc-prod-meta { color: var(--mk-mute); }
.home-page .tc-prod-card.is-out .tc-prod-price { color: var(--mk-mute); }
.home-page .tc-prod-card.is-out .tc-prod-price .unit { color: var(--mk-mute); }

/* 保留原 price-badge 类，防止别处引用时样式丢失（本页已不再用它承载价格） */
.home-page .tc-prod-price-badge {
  border-color: rgba(var(--primary-6), .3);
  color: var(--mk-brand);
  border-radius: var(--mk-r-sm);
  font-size: var(--mk-fs-xs);
}

/* ==========================================================================
   8. 公开页头部（.pub-hero）
   原为三段蓝渐变 + 两团 filter:blur(90px) 光斑：视觉上是「白底蓝渐变」，
   与任何云厂商都无法区分；两团 380px/90px 模糊也是该页最贵的渲染开销。
   改为工程网格底 + 发丝线，符合 dn23 的克制语言。
   ========================================================================== */
.home-page .pub-hero {
  background-color: var(--mk-surface);
  background-image:
    linear-gradient(to right, rgba(33, 37, 41, .035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(33, 37, 41, .035) 1px, transparent 1px);
  background-size: 32px 32px;
  border-bottom: 1px solid var(--mk-line);
}
.home-page .pub-hero::before,
.home-page .pub-hero::after { display: none; }
.home-page .pub-hero-inner { padding: 74px 16px 56px; }
.home-page .pub-hero-inner h1 {
  font-size: var(--mk-fs-h2);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.01em;
}
.home-page .pub-hero-inner p {
  font-size: var(--mk-fs-sub);
  color: var(--mk-muted);
}
.home-page .pub-hero-badge {
  border-radius: var(--mk-r-sm);
  border: 1px solid var(--mk-line);
  background: #fff;
  color: var(--mk-ink);
  font-size: var(--mk-fs-xs);
  font-weight: 600;
  letter-spacing: .06em;
  padding: 5px 10px;
}

/* ==========================================================================
   9. 性能：关掉「看不见但很贵」的效果
   ========================================================================== */

/* 9.1 固定导航的毛玻璃
   .tc-nav 是 position:fixed，背景 alpha 已达 .97，模糊在视觉上等于不存在，
   但滚动时每帧都要重采样并模糊整条导航背后的像素 —— 移动端掉帧主因之一。 */
.home-page .tc-nav,
.home-page .tc-nav-scrolled {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: rgba(255, 255, 255, .97);
}
.home-page .tc-nav-scrolled { background: #fff; }

/* 9.2 首屏两团 100px 大模糊：被 .88 不透明度遮罩盖住，视觉贡献接近零，
   却持续占着两块巨大合成层。桌面保留，移动端停掉。 */
@media (max-width: 768px) {
  .home-page .blob { animation: none; }
  .home-page .dn-hero .blob { filter: blur(56px); }
  .home-page .tc-nav { background: #fff; }
}

/* 9.3 触屏设备去掉 hover 位移，避免 tap 后粘住伪 hover 态 */
@media (hover: none) {
  .home-page .tc-prod-card:hover { transform: none; box-shadow: none; }
}

/* ==========================================================================
   10. 可访问性
   ========================================================================== */
.home-page :focus-visible {
  outline: 2px solid var(--mk-brand);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ==========================================================================
   11. 响应式：1440 / 768 / 390 三档
   dn23 的栅格是 col-lg-4 / col-md-6 / col-sm-12，
   即桌面 3 列、平板 2 列、手机 1 列 —— 这里对齐同一节奏。
   ========================================================================== */
@media (min-width: 1200px) {
  .mk-anchor__main { padding: 12px 20px; }
  .mk-anchor__price { padding: 11px 20px; }
}

@media (max-width: 1199px) {
  .home-page .dn-hero .tc-hero-title { font-size: 34px; }
  .home-page .dn-sec-head h2, .home-page .dn-sec-head h1 { font-size: 30px; }
}

@media (max-width: 1024px) {
  .mk-anchor__note { display: none; }   /* 次要信息先让位，保住「配置 + 价格」 */
  .home-page .tc-prod-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .home-page .tc-nav .home-nav-inner { height: 56px; }
  .home-page .tc-nav .home-nav-links a { height: 56px; }
  .home-page .tc-nav .home-nav-actions { height: 56px; }
  .home-page .tc-nav .home-nav-actions .arco-btn-primary { height: 56px; padding: 0 18px; }

  .home-page .dn-hero .tc-hero-title { font-size: 30px; }
  .home-page .dn-hero .tc-hero-sub { font-size: var(--mk-fs-md); margin-top: 10px; }
  .home-page .dn-hero .tc-hero-btns { margin-top: 22px; }
  .home-page .dn-hero .tc-hero-btns .arco-btn { height: 44px; line-height: 44px; padding: 0 20px; }

  .mk-anchor { display: flex; width: 100%; margin-top: 20px; }
  .mk-anchor__main { flex: 1 1 auto; padding: 10px 12px; }
  .mk-anchor__spec { font-size: var(--mk-fs-xs); }
  .mk-anchor__price { padding: 9px 12px; align-self: stretch; align-items: center; }
  .mk-anchor__price b { font-size: var(--mk-fs-lg); }

  .home-page .dn-sec-head { margin-bottom: 24px; }
  .home-page .dn-sec-head h2, .home-page .dn-sec-head h1 { font-size: 24px; }
  .home-page .dn-sec-head p { font-size: var(--mk-fs-base); }

  .home-page .pub-hero-inner { padding: 48px 16px 36px; }
  .home-page .pub-hero-inner h1 { font-size: 26px; }

  /* dn23 移动端商品卡：单列 */
  .home-page .tc-prod-grid { grid-template-columns: 1fr; gap: 12px; }
  .home-page .tc-prod-card { padding: 14px 16px 16px; }
  .tc-prod-foot .arco-btn { height: 40px; }
}

@media (max-width: 400px) {
  .home-page .tc-prod-title { font-size: var(--mk-fs-base); }
  .tc-prod-price b { font-size: var(--mk-fs-lg); }
  .tc-prod-foot { flex-wrap: wrap; gap: 8px; }
  .tc-prod-foot .arco-btn { flex: 1 1 100%; }
}

/* ==========================================================================
   v2.1 兜底修补（2026-11-06）
   --------------------------------------------------------------------------
   以下两条不是风格调整，是在复刻参考站过程中查出的既有缺陷。
   都只加在本文件里，删掉本文件即恢复原状。

   ① 入场动画契约错位
      animations.css 只给 .fade-in-up.in-view 定义了动画，
      而 visual-interactions.js（enhanceQuickItems / tc-scard 遍历）
      和 home-enhancements.js（observeElements 传 className:'fade-in-up'）
      都只添加 .fade-in-up，从不添加 .in-view。
      结果：被加类的元素永久停在 .fade-in-up 的初始态 opacity:0 / translateY(20px)，
      实测首页三个快捷入口（为什么选择创创云 / 私有云 / 弹性云服务器）、
      产品系列卡、新闻栏全部不可见，且占据 580px 高度的空白区。
      这里补成「加上类即播放」，既保留递进入场（内联 animation-delay 仍然生效，
      因为内联声明优先于本文件里的简写），又保证内容一定落到 opacity:1。

   ② 移动端选项卡折行
      visual-enhancements.css 给 .tc-sc-tabs 写了 flex-wrap:wrap，
      覆盖了 app.css 的 nowrap。390px 下 5 个大类被折成 3 行（2/2/1）参差不齐。
      这里在窄屏恢复单行横向滚动。
   ========================================================================== */

.home-page .fade-in-up { animation: fadeInUp 600ms ease-out both; }
.home-page .fade-in-scale { animation: fadeInScale 600ms cubic-bezier(.34, 1.56, .64, 1) both; }
.home-page .fade-in-left { animation: fadeInLeft 600ms ease-out both; }
.home-page .fade-in-right { animation: fadeInRight 600ms ease-out both; }

@media (max-width: 768px) {
  /* 快捷条左右内缩统一：visual-enhancements.css 给 .dn-quick 加了 40px 左右内边距，
     叠加 .dn-quick-inner 的 16px 后条目距屏边 56px，而标题 / 卡片 / 选项卡都是 14px。
     这里收到 14px，与全站窄屏栅格对齐。 */
  .home-page .dn-quick { padding-left: 14px; padding-right: 14px; }
  .home-page .dn-quick-inner { padding-left: 0; padding-right: 0; }

  .home-page .dn-products .tc-sc-tabs {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 2px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .home-page .dn-products .tc-sc-tabs::-webkit-scrollbar { display: none; }
  .home-page .dn-products .tc-sc-tab {
    flex: 0 0 auto;
    min-width: 0;
    padding: 11px 9px;
    font-size: 13px;
    white-space: nowrap;
  }
  .home-page .dn-products .tc-sc-tab.active::after { height: 2px; }
}