/* ============================================================
   全站统一页面组件 · 启睿数码
   ------------------------------------------------------------
   在 common/ 基座之上提供统一的：
   1. 内容页 Hero（3 档变体：交易页暖橙渐变 / 内容页柔和米橙 / 品牌页深色照片遮罩）
   2. 面包屑
   3. 区块标题（.section-head / .section-h2 / .section-sub）
   标题字型走 --mh-font-display（商城黑体），由 tokens.css 统一控制。
   ============================================================ */

/* ============ 内容页 Hero（旧式页面群统一入口） ============
   旧式页复用 .server-banner / .server-banner2 容器 + banner-* 标记类，
   此处统一令牌化：浅米橙底 + 黑体标题 + 橙色小竖条点缀。 */
.banner-announce,
.banner-document,
.banner-guarantee,
.feedback-banner,
.server-banner,
.server-banner2 {
  background: var(--mh-bg-soft) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--mh-line-soft);
}

.banner-announce h1,
.banner-document h1,
.banner-guarantee h1,
.feedback-banner h1,
.server-banner h1,
.server-banner2 h1 {
  font-family: var(--mh-font-display);
  font-size: 38px;
  font-weight: 600;
  color: var(--mh-text-1);
  line-height: 1.3;
  position: relative;
  display: inline-block;
  padding-left: 18px;
  margin-bottom: 0;
}

.banner-announce h1::before,
.banner-document h1::before,
.banner-guarantee h1::before,
.feedback-banner h1::before,
.server-banner h1::before,
.server-banner2 h1::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 32px;
  background: var(--mh-primary);
  border-radius: 3px;
}

.server-banner-desc,
.server-banner-desc2 {
  font-size: 15px;
  line-height: 2;
  color: var(--mh-text-3);
  max-width: 640px;
  margin-top: 18px;
  margin-bottom: 0;
}

/* Hero 内容区：统一 1400px 版心（覆盖各页残留的 1240px） */
.banner-announce .section-content,
.banner-document .section-content,
.banner-guarantee .section-content,
.feedback-banner .section-content,
.server-banner .section-content,
.server-banner2 .section-content {
  padding: 0 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* ============ 面包屑 ============ */
/* 注：margin 用 0 auto —— product-detail / shopping-cart 的面包屑直接以
   .section-content.breadcrumb-bar 作为版心容器，若 margin 为 0 会顶到最左侧；
   0 auto 既清零纵向外边距，又恢复水平居中（与全站 1200px 版心对齐）。 */
.breadcrumb-bar,
.page-breadcrumb,
.document-announce .breadcrumb,
.document-news .breadcrumb,
.help-detail-crumb {
  padding: 20px 0 8px;
  margin: 0 auto;
  font-size: 13px;
  color: var(--mh-text-3);
  list-style: none;
}

.breadcrumb-bar a,
.page-breadcrumb a,
.document-announce .breadcrumb a,
.document-news .breadcrumb a,
.help-detail-crumb a {
  color: var(--mh-text-3);
}

.breadcrumb-bar a:hover,
.page-breadcrumb a:hover,
.document-announce .breadcrumb a:hover,
.document-news .breadcrumb a:hover,
.help-detail-crumb a:hover {
  color: var(--mh-primary);
}

.bc-sep {
  margin: 0 8px;
  color: var(--mh-text-4);
}

.bc-current {
  color: var(--mh-text-1);
}

/* ============ 区块标题（供各页复用，替代重复定义） ============ */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 36px;
}

.section-h2 {
  font-family: var(--mh-font-display);
  font-size: 30px;
  font-weight: 600;
  color: var(--mh-text-1);
  line-height: 1.3;
  position: relative;
  padding-left: 18px;
  margin: 0;
}

.section-h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 26px;
  background: var(--mh-primary);
  border-radius: 3px;
}

.section-sub {
  font-size: 14px;
  color: var(--mh-text-3);
  margin: 10px 0 0;
}

/* 移动端：区块标题收窄 */
@media (max-width: 768px) {
  .banner-announce h1,
  .banner-document h1,
  .banner-guarantee h1,
  .feedback-banner h1,
  .server-banner h1,
  .server-banner2 h1 {
    font-size: 28px;
  }
  .section-h2 { font-size: 24px; }
}