/* 双兵焊割 · 移动端导航（公共，所有页面共享）
 * 用 !important 确保覆盖各页面自身的桌面端 .menu_a / .menu_b 样式。
 */

/* ====== #navClip：全视口裁剪容器，包住离屏 fixed 菜单，消除横向滚动 ====== */
/* transform 使其成为内部 fixed 元素的包含块；overflow:hidden 裁掉离屏部分且不撑大 scrollWidth */
#navClip{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:1100;transform:translateZ(0);-webkit-transform:translateZ(0);}
#navClip>#navPanel,#navClip>#navMask{pointer-events:auto;}
/* 菜单在裁剪容器内改为 absolute（相对 navClip=视口），关闭时离屏被裁、打开时仍全屏覆盖 */
#navClip>.menu_b{position:absolute !important;}

/* ====== 桌面端：完全隐藏所有移动导航元素 ====== */
.m-topbar{display:none;}
/* 桌面端 menu_b 用 translateX(-110%) 隐藏（不使用 display:none，否则 .open 的 transform 动画无法生效） */
#navMask{display:none !important;}

@media (max-width:768px){
  .menu_a{display:none !important;}
  body{padding-top:54px !important;}
  .m-topbar{
    display:flex;align-items:center;justify-content:space-between;
    position:fixed;top:0;left:0;right:0;height:54px;z-index:1300;
    background:#1E1D1E;padding:0 16px;box-shadow:0 2px 10px rgba(0,0,0,.3);
  }
  .m-topbar .mb-brand{color:#fff;font-weight:700;font-size:16px;letter-spacing:.5px;}
  .m-topbar .mb-menu{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;color:#fff;font-size:10px;cursor:pointer;
  }
  .m-topbar .mb-menu svg{width:26px;height:26px;}
  .menu_b{
    display:block !important;
    position:fixed !important;top:0 !important;left:0 !important;
    height:100vh !important;width:82% !important;max-width:340px !important;z-index:1200 !important;
    background:#1E1D1E;padding:70px 18px 24px;overflow-y:auto;
    transform:translateX(-110%) !important;transition:transform .28s ease;
    box-shadow:4px 0 24px rgba(0,0,0,.45);
  }
  body.nav-open .menu_b{transform:translateX(0) !important;}
  /* 兼容页面内联脚本的 .open 机制（无 !important 会被上方基础规则覆盖） */
  .menu_b.open{transform:translateX(0) !important;}
  body.nav-open{overflow:hidden;}
  #navMask{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1150;display:none !important;}
  body.nav-open #navMask{display:block !important;}
  /* 兼容页面通过 JS 直接操作 mask 显示 */
  #navMask.show,#navMask[style*="block"]{display:block !important;}
  .pg{margin-left:0 !important;}
  .menu_b .nav-list{margin:0;padding:0;list-style:none;}
  .menu_b .nav-link{
    display:block;color:#C9CDD4;font-size:16px;font-weight:600;
    padding:14px 6px;border-bottom:1px solid rgba(255,255,255,.08);
  }
  .menu_b .nav-link:hover{color:#EA7317;}
  .menu_b .sub{margin:0;padding:6px 0 6px 14px;}
  .menu_b .sub a{display:block;color:#9AA0A6;font-size:14px;padding:10px 6px;}

  /* 首页 hero 移动端字号/断行（修复 b1 长标题+副标题水平溢出） */
  .hero-carousel .headline{font-size:26px !important;line-height:1.25 !important;word-break:break-word;}
  .hero-carousel .subtitle{font-size:14px !important;line-height:1.6 !important;padding:0 16px !important;word-break:break-word;max-width:100%;}
}

/* ====== 移动端（手机）横向溢出兜底 ======
 * 离屏菜单 / 装饰水印(news-watermark) / hero 轮播 slide 等元素虽已在各自
 * overflow:hidden 祖先内，但其布局溢出仍会撑大 documentElement 的 scrollWidth
 * （body 的 overflow:hidden 不传播到视口），导致手机端出现真实横向滚动。
 * 仅在 ≤767px 施加 html{overflow-x:clip} 清零：移动端顶栏为 fixed 不受影响，
 * 且避开 ≥768 的产品页 sticky 侧栏（防止 clip 破坏吸顶）。 */
@media (max-width: 767px) {
  html { overflow-x: clip; }
}