/* ============================================================
   页头三颗胶囊：导航 / 400 电话 / 预约演示
   仅 ≥1201px 生效；更窄时导航变抽屉，不适用。
   须排在 style.css 之后加载（同级规则靠加载顺序覆盖）。

   做三件事：
   1. 停用原来同时罩住导航与电话的 .h-bottom::before
   2. 导航胶囊改由 .h-nav::before 绘制，宽度随导航内容
   3. .h-tel 单独成为一颗描边胶囊，导航↔电话、电话↔预约演示 间距均为 .2rem
   ============================================================ */
@media (min-width: 1201px){
  /* 旧的整条胶囊停用：它的右端是按"电话在胶囊末段"用 calc 算死的，
     电话独立成胶囊后宽度随字号变化，固定值必然错位。 */
  .h-bottom::before{ display: none; }

  /* 归零父级字号：.h-nav 与 .h-bot 之间有换行，字号不归零会渲染成一个
     约 5px 的空格，两处胶囊间距会对不齐。子元素由 .s16 各自定字号。 */
  .h-bottom{ font-size: 0; }

  /* 导航胶囊：宽度跟随 .h-nav 内容 */
  .h-nav::before{
    content: '';
    position: absolute;
    left: -.2rem;                       /* 首字左侧留白 */
    right: 0;                           /* 右端落在最后一个 li 的 .2rem 外边距外沿，与左留白对称 */
    top: -.01rem;
    height: .52rem;
    z-index: -1;                        /* 绘制在导航文字之下 */
    box-sizing: border-box;
    /* 底色 = α×255 + (1-α)×背景（背景另经 blur 与 saturate）。
       .92 让深色 banner 上仍接近白，同时保留背景隐约透出；.96 更白，1 为完全不透。 */
    background-color: rgba(255,255,255,.92);
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 999px;
    -webkit-backdrop-filter: blur(.1rem) saturate(150%);
    backdrop-filter: blur(.1rem) saturate(150%);
    box-shadow: 0 .03rem .14rem rgba(0,0,0,.08);
  }

  /* 电话胶囊：白底 + 品牌蓝描边。图标沿用 .h-bot .h-tel:before 的 SVG 遮罩
     （mask 取 currentColor），文字变色图标自动跟随，无需单独设色。 */
  .h-bottom .h-tel{
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    height: .52rem;
    margin: -.01rem 0 0 .2rem;          /* 上边与导航胶囊对齐；左为两胶囊间距 */
    padding: 0 .2rem;
    border: 1px solid #017cb6;
    border-radius: 999px;
    background-color: #fff;
    transition: background-color .18s ease, border-color .18s ease;
  }
  /* 胶囊底恒为白，文字固定品牌蓝，需覆盖 header:hover / header.white /
     .no-banner / .product 下的 #000 与 #fff。 */
  header .h-bottom .h-tel,
  header:hover .h-bottom .h-tel,
  header.white .h-bottom .h-tel,
  .no-banner .h-bottom .h-tel,
  .product .h-bottom .h-tel{
    color: #017cb6;
  }
  header .h-bottom .h-tel:hover{ background-color: #eef7fc; }

  /* 电话胶囊 → 预约演示 的间距，与 .h-tel 的 margin-left 同为 .2rem */
  .h-bottom .h-btn{ margin-left: .2rem; }

  /* 下滑后页头整体变白，白胶囊没有意义，隐藏。
     只认 .white：.no-banner 由 js.js 在含 .a-main / .xb-a 的页面加到 body 上，
     首页也命中，那些页面页头下方仍是 banner 图。 */
  header.white .h-nav::before{ display: none; }
}