
/* --- 页头吸顶 ---
   注意：sticky 只能在其父元素的高度范围内生效，所以吸顶必须加在最外层 <header> 上，
   不能加在内部的 .ms-navbar 上（那样永远吸不住）。
   桌面端把 top 设为 -48px，滚动时顶部工具条自然滚出屏幕，只留菜单栏贴在视口顶部。 */
.ms-header{position:fixed;top:0;left:0;right:0;z-index:60;background:#1F4E79}
/* 固定菜单栏高度约 128px，给 body 留顶部空间避免内容被遮挡 */
body{padding-top:128px}
@media (max-width:1023.98px){body{padding-top:0}}
/* 移动端不固定或菜单折叠时不需要额外顶部空间 */
.ms-header.is-scrolled .ms-topbar{height:0;overflow:hidden;opacity:0;transition:height .3s ease,opacity .25s ease}
.ms-header.is-scrolled .ms-navbar{border-top:none}
/* 吸顶由 fixed 直接实现，不依赖 transform；同时用 !important 压住 site.js 可能注入的内联 translate */
.ms-header{transform:none!important}

/* --- 顶部工具条 + 菜单栏：渐变连续过渡（无硬切边） --- */
.ms-topbar{background:transparent !important;border-bottom:none !important}
.ms-topbar-inner{display:flex;align-items:center;justify-content:space-between;height:48px}
.ms-topbar-slogan{display:flex;align-items:center;gap:8px;margin:0;font-size:13px;color:#FFFFFF}
.ms-topbar-dot{display:inline-block;flex:0 0 auto;width:6px;height:6px;border-radius:9999px;background:#DF3543}
.ms-topbar-tel{display:inline-flex;align-items:center;gap:9px;color:#FFFFFF;text-decoration:none}
.ms-topbar-tel-ico{display:grid;place-items:center;flex:0 0 auto;width:25px;height:25px;border-radius:9999px;background:#C81E2D;color:#FFFFFF}
.ms-topbar-tel-label{font-size:14px;font-weight:700;letter-spacing:.05em;color:#FFFFFF}
.ms-topbar-tel-num{font-size:22px;font-weight:800;line-height:1;letter-spacing:.01em;color:#FFFFFF;transition:color .2s}
.ms-topbar-tel:hover .ms-topbar-tel-num{color:#FFC9CE}

/* --- 菜单栏（深蓝） --- */
.ms-navbar{background:#1F4E79;border-bottom:1px solid rgba(255,255,255,.14) !important}
.ms-navbar-inner{display:flex;align-items:center;gap:16px;height:66px}
.ms-brand-word{font-size:18px;font-weight:800;letter-spacing:-.01em;color:#FFFFFF}
/* ⚠ white-space:nowrap / flex:0 0 auto 是「菜单名一行显示」的关键（2026-10-10）。
   菜单文字是裸文本节点，落在 display:flex 的 .ms-nav-link 里会成为**可收缩的匿名
   flex item**；加了「计算器」后共 9 项，一旦总宽超出可用宽就被压缩折成两行。
   nowrap 保证永不折行，flex:0 0 auto 保证菜单项不被挤压。 */
.ms-navbar .ms-nav-link{padding-left:10px;padding-right:10px;font-weight:700;color:#FFFFFF;white-space:nowrap;flex:0 0 auto}
.ms-navbar .ms-nav-link:after{left:10px;right:10px;background-color:#DF3543}
.ms-navbar .ms-nav-link:hover{color:#FFFFFF !important;background:rgba(255,255,255,.12)}
.ms-navbar .ms-nav-link.is-active{font-weight:800;color:#FFFFFF !important}

/* --- 菜单栏右侧：两排定位语（字号已收小，避免在 1024~1279 区间被挤出容器右边线） --- */
.ms-nav-slogan{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:1px;flex:0 0 auto;margin-left:6px;padding-left:14px;border-left:1px solid rgba(255,255,255,.18);text-align:right}
.ms-nav-slogan .l1{font-size:12px;font-weight:700;line-height:1.4;letter-spacing:.02em;color:#FFFFFF;white-space:nowrap}
.ms-nav-slogan .l2{font-size:15px;font-weight:800;line-height:1.4;letter-spacing:.02em;color:#FFC9CE;white-space:nowrap}

/* --- 窄屏汉堡按钮 ---
   注意：本样式块位于 site.css 之后，同优先级下会覆盖 Tailwind 工具类。
   若直接写 .ms-nav-hamburger{display:grid}，会盖掉 .lg\:hidden{display:none}，
   导致「手机端菜单图标」在桌面端一直显示 —— 所以 display 必须放进窄屏媒体查询里。*/
.ms-nav-hamburger{place-items:center;width:40px;height:40px;border:1px solid rgba(255,255,255,.35);border-radius:8px;background:transparent;color:#FFFFFF}
@media (max-width:1023.98px){.ms-nav-hamburger{display:grid}}

/* --- 产品巨型菜单：只剩 1 个分组时自适应铺满 ---
   全站产品裁剪后只剩「液压油缸」一个分组，若仍按 grid-cols-3 / xl:grid-cols-4 排布，
   单个分组只占面板 1/4 宽，右侧会留下大片空白。
   用 :only-child 自适应：仅当只有 1 个分组时，该分组横跨整行，型号列表改为多列。 */
.ms-mega-grid>div:only-child{grid-column:1/-1}
.ms-mega-grid>div:only-child ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1.5rem;row-gap:.25rem}
@media (min-width:1024px){.ms-mega-grid>div:only-child ul{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1280px){.ms-mega-grid>div:only-child ul{grid-template-columns:repeat(4,minmax(0,1fr))}}

@media (min-width:1024px){
  .ms-navbar-inner{height:78px;gap:14px}
}
/* 1024~1279 是最挤的一档：导航项多、右侧还有定位语，容易整体顶出容器右边线。
   这一档单独把导航项内边距、字号、间距一起收一档，保证右侧定位语完整可见。 */
/* 加上 nowrap 后菜单项不再可压缩，必须靠「字号 + 内距」把内容宽压回可用宽以内。
   ⚠ 2026-10-10 二次修正：本文件早期在 1024~1151 档写了 font-size:13px，实测无效。
     根因不是 CSS 层叠，而是页面底部那段「PC 二次兜底」JS（2026-10-04 加）：
     它遍历所有含叶子文本的元素，只要 getComputedStyle 拿到的 font-size < 14px
     就执行 el.style.fontSize='14px' —— 内联样式权重最高，CSS 里的 13px 必被顶掉。
     该兜底是站点既有铁律（解决「字太小」），不能删，只能让断点声明与它对齐。
     所以下面三档一律 ≥14px，窄屏只靠「收内距」腾空间，不再动字号。
   内容宽核算（33 个字 + 9 项左右内距 + 产品中心下拉箭头 18px，字号统一 14px）：
     1024~1151：14×33 + 6×2×9  + 18 = 462+108+18 = 588  ✅
     1152~1279：14×33 + 7×2×9  + 18 = 462+126+18 = 606  ✅
     1280+    ：14×33 + 14×2×9 + 18 = 462+252+18 = 732  ✅
   所以 1024~1279 这一整段拆成两档收，避免 1024 顶出容器右边线。 */
@media (min-width:1024px) and (max-width:1151.98px){
  .ms-navbar-inner{gap:10px}
  .ms-brand-word{font-size:16px}
  .ms-navbar .ms-nav-link{padding-left:6px;padding-right:6px;font-size:14px}
  .ms-navbar .ms-nav-link:after{left:5px;right:5px}
}
@media (min-width:1152px) and (max-width:1279.98px){
  .ms-navbar-inner{gap:10px}
  .ms-brand-word{font-size:16px}
  .ms-navbar .ms-nav-link{padding-left:7px;padding-right:7px;font-size:14px}
  .ms-navbar .ms-nav-link:after{left:6px;right:6px}
}
@media (min-width:1280px){
  .ms-navbar .ms-nav-link{padding-left:14px;padding-right:14px;font-size:14px}
  .ms-navbar .ms-nav-link:after{left:14px;right:14px}
  .ms-nav-slogan .l1{font-size:13px}
  .ms-nav-slogan .l2{font-size:16px}
}

/* 注：原 `.ms-footer-logo`（页脚 logo 白底托底）规则已随页脚 logo 图标一并移除，此处不再保留。 */
