/* ==========================================================================
   site-opt.css — 全站优化补丁（2026-10-24）
   引入位置：站点所有 css 之后（保证覆盖优先级）
   1. footer 简化（logo + 公司名 + 备案号，居中）
   2. 手机端：三条杠悬浮 / 底部工具栏避让 / 间距收紧
   3. 新闻模块：图文卡 ≤992 单列（修复 grid 撑爆超宽 8px）
   4. 产品矩阵：手机端隐藏「耐腐蚀离心泵」tab
   5. 产品栏目页：≤420 强制 2 列（原 1fr）
   6. 产品详情页：修 .shini 被 display:block 覆盖的竖排 bug + 服务宗旨美化 + 图片自适应
   ========================================================================== */

/* ============ 1. footer 简化 ============ */
.footer.footer--simple{
  padding:0;background:#F5F8FC;border-top:1px solid #E6EBF3;color:#5A6478;
}
.fs{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:42px 24px 46px;
}
.fs__logo{display:inline-block}
.fs__logo img{display:block;height:50px;width:auto}
.fs__name{margin:18px 0 0;font-size:15px;font-weight:600;color:#1A2333;letter-spacing:.01em}
.fs__icp{margin:8px 0 0;font-size:12.5px;color:#78829A}
.fs__icp a{
  color:#78829A;text-decoration:none;
  border-bottom:1px solid transparent;transition:color .2s,border-color .2s;
}
.fs__icp a:hover{color:#0B5CFF;border-bottom-color:rgba(11,92,255,.45)}

/* ============ 2. ≤768：三条杠悬浮 + 底部工具栏避让 ============ */
@media(max-width:768px){
  /* 关键：body/html 的 overflow-x:hidden 会让 overflow-y 计算为 auto，
     导致 position:sticky 失效、header 随文档滚走，fixed 的 burger 也被带走。
     overflow-x:clip 同样裁切横向溢出，但不破坏 sticky。 */
  html,body{overflow-x:clip}
  .burger{
    position:fixed;top:20px;right:14px;z-index:130;
    background:rgba(255,255,255,.96);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    box-shadow:0 6px 18px -8px rgba(11,34,80,.4);
  }
  /* mobile-bar 固定在底部，给页面留出空间 */
  body{padding-bottom:70px}
}

/* ============ 3. ≤992：新闻模块图文卡单列（修复超宽） ============ */
@media(max-width:992px){
  .nb__body{grid-template-columns:1fr;gap:16px}
  .nb__feat{grid-template-columns:1fr;gap:12px}
  .nb__feat-img{height:200px}
}

/* ============ 4. ≤768：全局收紧 ============ */
@media(max-width:768px){
  .section{padding:46px 0}
  .container{padding:0 16px}
  .nb__main{padding:18px 16px}
  .nb__cats{flex-direction:row;flex-wrap:wrap;gap:8px}
  .nb__cat{flex:0 0 auto;white-space:nowrap}
  /* 产品矩阵：手机端隐藏「耐腐蚀离心泵」tab */
  .pm__tab[data-tab="lixinbeng"]{display:none}
}

/* ============ 5. ≤420：产品栏目页强制 2 列 ============ */
@media(max-width:420px){
  .grid,.grid--3,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  /* 单产品时的横卡也还原为竖卡，统一 2 列网格 */
  .grid--3:has(> .card:only-child){grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .grid--3:has(> .card:only-child)>.card{flex-direction:column;max-width:none}
  .grid--3:has(> .card:only-child) .card__media{aspect-ratio:4/3}
  .card__body h3{font-size:13px;line-height:1.45}
}

/* ============ 6. 产品详情页 ============ */
/* 6.1 修 bug：site.css 后半段把 .shini 覆盖成 display:block，编号与文字竖排 */
.prose .shini{display:flex!important;gap:16px;align-items:flex-start}
.prose .shini .num{flex:0 0 auto}

/* 6.2 服务宗旨美化：实心渐变圆 + 浅底卡片 */
.prose .rehs{gap:16px}
.prose .reco{
  padding:16px 18px;background:#F8FAFD;
  border:1px solid #EAEEF5;border-radius:14px;
  transition:border-color .24s cubic-bezier(.22,.7,.28,1),
             box-shadow .24s cubic-bezier(.22,.7,.28,1),
             transform .24s cubic-bezier(.22,.7,.28,1);
}
.prose .reco:hover{
  border-color:#CFDEFF;transform:translateY(-2px);
  box-shadow:0 12px 26px -16px rgba(11,92,255,.38);
}
.prose .rehsll{
  flex:0 0 52px;width:52px;height:52px;border:0;
  background:linear-gradient(135deg,#0B5CFF,#3E82FF);
  color:#fff!important;font-size:22px;
  box-shadow:0 8px 18px -8px rgba(11,92,255,.5);
}
.prose .retit{font-size:15.5px;font-weight:700;color:#151D2B;margin-bottom:5px}
.prose .rehslr>div:not(.retit){font-size:13px;line-height:1.75;color:#68758C}
@media(max-width:640px){
  .prose .rehs{gap:12px}
  .prose .rehs1,.prose .rehsr{flex:1 1 100%;min-width:0}
  .prose .reco{padding:14px 15px}
  .prose .shini{gap:12px}
}

/* 6.3 详情页图片自适应：压过正文行内硬编码 width/height（防手机溢出） */
.prose img{max-width:100%;height:auto!important}
.prose table{max-width:100%;display:block;overflow-x:auto}

/* ============ 7. ≤420：单产品卡片修复（原 only-child 规则把 media 钉死 390px） ============ */
@media(max-width:420px){
  .grid,.grid--3,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  /* 单产品时的横卡也还原为竖卡，统一 2 列网格 */
  .grid--3:has(> .card:only-child){grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .grid--3:has(> .card:only-child)> .card{flex-direction:column;max-width:none}
  /* 关键：media 不再钉 390px 宽，跟随卡片宽度；比例统一 4/3 */
  .grid--3:has(> .card:only-child) .card__media{
    width:auto!important;max-width:100%;flex:0 0 auto;aspect-ratio:4/3;
  }
  .grid--3:has(> .card:only-child) .card__body{padding:14px 13px 16px}
  .grid--3:has(> .card:only-child) .card__body h3{font-size:14px;line-height:1.45}
  .card__body h3{font-size:13px;line-height:1.45}
}

/* ============ 8. 详情页「合作案例」：ser 三卡桌面三列均分 + 移动堆叠 + 图自适应 ============ */
/* 父容器改为 flex 行；抵消文章里行内的 margin-left:13px / float:right 干扰 */
.prose div:has(> .ser){
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  align-items:flex-start;
  margin-top:20px!important;
}
.prose .ser,.prose .ser2{
  flex:1 1 0;
  min-width:0;
  margin:0!important;          /* 抵消行内 margin-left:13px */
  float:none!important;        /* 抵消行内 float:right */
  text-align:center;
}
.prose .ser .pic img,.prose .ser2 .pic img{
  width:100%!important;
  height:auto!important;       /* 抵消行内固定 218px 高 */
  max-width:100%;
  display:block;
  margin:0 auto;
  border-radius:12px;
  box-shadow:0 10px 24px -16px rgba(11,92,255,.35);
}
.prose .ser p,.prose .ser2 p{font-size:13px;color:#5A6478;margin:10px 0 0;line-height:1.6}
@media(max-width:768px){
  .prose div:has(> .ser){gap:12px}
  .prose .ser,.prose .ser2{flex:1 1 44%}
}
@media(max-width:480px){
  .prose div:has(> .ser){flex-direction:column;gap:14px}
  .prose .ser,.prose .ser2{flex:1 1 auto;width:100%}
  /* 四大理由图文两栏：手机上图占满宽，不再钉 380px */
  .prose .abil,.prose .abil2{flex:1 1 100%;min-width:0}
  .prose .abir,.prose .abir2{flex:1 1 100%;max-width:100%}
  .prose .abi,.prose .abi2{gap:20px;padding:22px 0}
}

/* ============ 9. 详情页面包屑美化：浅灰胶囊 + 首页图标 ============ */
.crumb--dark{
  display:inline-flex;align-items:center;gap:2px;
  padding:7px 14px;border-radius:999px;
  background:#F3F6FB;border:1px solid #E8EDF5;
  font-size:12px;color:#8B95A7;
}
.crumb--dark a{
  color:#5A6478;text-decoration:none;padding:0 6px;border-radius:6px;
  transition:color .18s,background .18s;
}
.crumb--dark a:hover{color:#0B5CFF;background:#E9F1FF}
.crumb--dark i{color:#C3CBD8;font-style:normal;padding:0 2px}
.crumb--dark span{color:#1A2333;font-weight:600;padding:0 6px}

/* ============ 10. 手机端底部悬浮栏（4 按钮：首页/选型/微信/拨号） ============ */
@media(max-width:768px){
  /* 「选型」图标：SVG 齿轮（.ico 原本用 ::after 画线，这里整体替换为背景图） */
  .mobile-bar .ico-type{
    background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B5CFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33h.08a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51h.08a1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82v.08a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E") center/17px no-repeat;
  }
  .mobile-bar .ico-type::after{display:none}
  /* 微信按钮：强调一点（微信绿点缀不影响整体蓝） */
  .mobile-bar a[href="/weixin/"] .ico{background:#EAFBEF}
  .mobile-bar a[href="/weixin/"] .ico::after{border-color:#12B755}
  /* 按压缩放一点，避免与 to-top 按钮视觉冲突 */
  .mobile-bar a,.mobile-bar button{padding:5px 0}
}

/* ============ 11. 微信弹窗：二维码可点击 + 弹窗内轻提示 ============ */
.wxm__qr{position:relative;cursor:pointer}
.wxm__qr img{transition:transform .24s cubic-bezier(.22,.7,.28,1),box-shadow .24s}
.wxm__qr:hover img{transform:scale(1.03);box-shadow:0 14px 32px -16px rgba(11,92,255,.45)}
.wxm__qr::after{
  content:"点我复制微信号";position:absolute;left:50%;top:82px;transform:translateX(-50%);
  padding:3px 10px;border-radius:999px;background:rgba(11,92,255,.94);color:#fff;
  font-size:10.5px;font-weight:600;white-space:nowrap;
  opacity:0;transition:opacity .24s;pointer-events:none;
}
.wxm__qr:hover::after{opacity:1}
.wxm__toast{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%) translateY(8px);
  max-width:calc(100% - 48px);padding:10px 18px;border-radius:12px;
  background:rgba(14,23,38,.88);color:#fff;font-size:13px;line-height:1.5;
  text-align:center;box-shadow:0 16px 40px -14px rgba(7,17,32,.5);
  opacity:0;pointer-events:none;transition:opacity .24s,transform .24s;z-index:5;
}
.wxm__toast.is-on{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:640px){
  .wxm__qr::after{content:"点二维码复制微信号";font-size:10px}
}