/*fp-seed:9ug1oat6e6nb @build ehy0qtcvh3e*/
/* ==========================================================================
   _seo_mobile.css v2 - 企业站完整移动端 CSS
   auto-generated by SEO-克隆建站系统/克隆引擎/内容/移动端适配器.py
   生效条件: 屏幕 ≤768px (平板 + 手机), PC 端 (>768px) 完全失效
   ========================================================================== */

/* ===== 0. 关键性能优化 (全屏生效, 不限媒体查询) ===== */
img[loading] { background: #f5f5f5; }
img.lazyload { opacity: 0; transition: opacity .35s; }
img.lazyloaded { opacity: 1; }

/* v17.48(2026-06-01) 默认隐藏移动端 tabbar (PC 端不该看到这玩意).
   下面 @media (max-width: 768px) 里再设 display:flex 把手机端打开.
   bug 历史: 之前没这条全局隐藏, PC 浏览器对 <div class="seo-mobile-tabbar">
   按默认 display:block 渲染, 用户看到一行裸 emoji "🏠首页📦产品💬联系🏢关于⬇底部" */
.seo-mobile-tabbar { display: none !important; }

/* ============================================================
   ★ 主响应式块: 屏幕 ≤768px
   ============================================================ */
@media screen and (max-width: 768px) {

  /* ---- 1. 全局 reset ---- */
  html, body {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100% !important;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: rgba(0,0,0,0.08);
    scroll-behavior: smooth;
  }
  body {
    font-size: 16px !important;
    line-height: 1.6 !important;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
                 "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial,
                 sans-serif !important;
    color: #333 !important;
    background: #fff !important;
    /* 给底部 tabbar 让出 60px 空间 */
    padding-bottom: 60px !important;
  }

  /* ---- 2. 容器 (全名单) ---- */
  .container, .wrap, .wrapper, .main, .content, .page, .pagebody,
  .layout, .l-wrap, .layout-main, .site-wrap, .site-content,
  .body-wrap, .body-content, .main-wrap, .main-content,
  #container, #wrap, #wrapper, #main, #content, #page, #pagebody {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
    float: none !important;
  }

  /* ---- 2.5 固定像素宽度容器 (OKA-158) ----
     上面是类名白名单, 灰产 CMS 常用的 .w1200 / .w1000 / .w960 这种
     "宽度写进类名" 的容器不在名单里, 于是 width:1200px 原样渲染,
     撑破 375px 视口 —— html,body 的 overflow-x:hidden 只是把溢出裁掉
     不显示滚动条, 内部元素照样按 PC 宽度排, 视觉上就是右边被切.

     病例 tiemajiaoguan (run #174): <div class="w1200"> 实测 right=1212,
     它的子元素 .f2/.f2_3/img.cfr 跟着一起被推出视口.

     只 reset 宽度, 不加 padding —— 这类容器可能嵌在已有 padding 的
     外层里, 再加会双重缩进. */
  [class*="w960"], [class*="w1000"], [class*="w1100"], [class*="w1152"],
  [class*="w1180"], [class*="w1200"], [class*="w1220"], [class*="w1230"],
  [class*="w1240"], [class*="w1280"], [class*="w1300"], [class*="w1400"],
  [class*="width1000"], [class*="width1200"], [class*="wrap1200"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* ---- 3. 排版 ---- */
  /* v85(2026-07-27 OKA-210) h1 加 :not([style]) —— 放行 TDK处理._注入h1关键词
     写死 inline style 的 X 词 h1 (32px/700/left, 对齐樱梦真站; 樱梦移动端同样
     不缩字号, 实测 375px 下仍是 32px)。这里的 !important 本意是压平源站各种
     奇怪标题字号, 但它连 inline style 一起盖掉了, 把 X 词 h1 压成 22/20px。
     源站原有的 h1 在 _注入h1关键词 里已被无条件降级成 h2, 由下面那条 h2 规则
     接管, 所以放行裸 h1 不会让源站标题失去移动端规范化。 */
  h1:not([style]), .h1 { font-size: 22px !important; line-height: 1.4 !important; margin: 14px 0 10px !important; font-weight: 600 !important; }
  h2, .h2 { font-size: 19px !important; line-height: 1.4 !important; margin: 12px 0 8px !important; font-weight: 600 !important; }
  h3, .h3 { font-size: 17px !important; line-height: 1.4 !important; margin: 10px 0 6px !important; font-weight: 600 !important; }
  h4, h5, h6, .h4, .h5, .h6 { font-size: 16px !important; line-height: 1.4 !important; }
  p { font-size: 15px !important; line-height: 1.7 !important; word-wrap: break-word !important; margin: 0 0 10px !important; }
  ul, ol { padding-left: 20px !important; margin: 0 0 10px !important; }
  li { line-height: 1.6 !important; }
  blockquote { padding: 10px 14px !important; border-left: 3px solid #1e88e5 !important; background: #f5f9ff !important; margin: 10px 0 !important; }

  /* ---- 4. 图片自适应 ---- */
  img, picture, .img-fluid, .img-responsive {
    max-width: 100% !important;
    height: auto !important;
    display: inline-block;
  }
  figure { margin: 10px 0 !important; max-width: 100% !important; }

  /* ---- 5. 表格 (横向滚动) ---- */
  .table-wrap, .table-responsive {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    margin: 10px 0 !important;
  }
  table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    border-collapse: collapse !important;
    white-space: nowrap !important;
  }
  td, th {
    padding: 8px 10px !important;
    font-size: 14px !important;
    border: 1px solid #eee !important;
  }
  th { background: #f5f5f5 !important; font-weight: 600 !important; }

  /* ---- 6. 表单 (iOS 字号 ≥16px 防放大) ---- */
  input, textarea, select {
    font-size: 16px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 6px !important;
    border: 1px solid #ddd !important;
    background: #fff !important;
    color: #333 !important;
    -webkit-appearance: none !important;
  }
  input[type="text"], input[type="tel"], input[type="email"],
  input[type="search"], input[type="password"], input[type="number"],
  input[type="url"], input[type="date"], input[type="time"], textarea {
    width: 100% !important;
    padding: 12px 14px !important;
    margin: 6px 0 !important;
  }
  textarea { min-height: 100px !important; resize: vertical !important; }
  select {
    padding: 12px 14px !important;
    background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><polygon points='0,0 10,0 5,6' fill='%23999'/></svg>") no-repeat right 12px center !important;
    padding-right: 32px !important;
  }
  label { display: block !important; margin: 6px 0 4px !important; font-size: 14px !important; color: #555 !important; }
  .form, form { width: 100% !important; }

  /* ---- 7. 按钮 (Apple HIG 44x44px) ---- */
  button, .btn, .button, input[type="button"],
  input[type="submit"], input[type="reset"] {
    min-height: 44px !important;
    min-width: 44px !important;
    font-size: 16px !important;
    padding: 12px 20px !important;
    border-radius: 6px !important;
    border: none !important;
    cursor: pointer;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all .2s ease;
  }
  .btn-primary, .btn.primary, button.primary,
  input[type="submit"], .btn-blue {
    background: linear-gradient(135deg, #1e88e5, #1565c0) !important;
    color: #fff !important;
  }
  .btn-success, .btn-green { background: linear-gradient(135deg, #43a047, #2e7d32) !important; color: #fff !important; }
  .btn-danger, .btn-red { background: linear-gradient(135deg, #e53935, #c62828) !important; color: #fff !important; }
  .btn-block, .btn.block { width: 100% !important; }

  /* ---- 8. 顶部导航 · v32(2026-07-29 OKA-252) 2 列网格常显 · 撤掉汉堡折叠 ----
   * 用户原话: "移动端可以不用右那个隐藏吗? 只需要把字体导航变小, 适配移动端 ...
   *   类似这个樱梦的站, 导航会自动换行, 适配移动端, UI 也会比较漂亮,
   *   不需要右上那个汉堡折起来"
   *
   * 形态取自樱梦 52291.cn 蜘蛛版实测 (源站 dedecms 模板自带的 .hy-nav-menu
   * 响应式, 不是它的克隆系统加的):
   *   li a { padding:12px 5px; font-size:15px; border-radius:8px;
   *          min-height:44px; white-space:normal; word-break:break-word;
   *          background:rgba(102,126,234,.05); text-align:center;
   *          display:flex; align-items:center; justify-content:center }
   * 我方沿用同一套量, 主题色换成本项目的 #1e88e5 系。
   *
   * ⚠️ 这里撤掉的是 v30.5/v31 的"默认收起 + 汉堡展开"策略 (见下方 v30.5 段
   *    和 _生成JS.py)。那两版修的是 guangdongzuyi.com 的"nav 7 项竖排撑爆首屏
   *    676px"和"展开后全屏白底挡内容"—— 而竖排本身就是 v2 那条
   *    `nav li {display:block; width:100%}` 造成的。网格化之后 7 项只占 4 行
   *    约 200px, 两个病因都不存在了, 所以是**换解法**不是退回老 bug。
   *    别再改回 `display:block; width:100%` + 汉堡, 会重演本次用户投诉。
   */
  /* 8.0 导航容器 full-bleed —— 突破源站 PC 栅格的窄栏限制
   * 这类源站**根本没有移动端布局**: PC 两栏结构 (logo 左 / 导航右) 直接塞进
   * 375px, 导航天生躺在 114-164px 的右侧栏里。网格再怎么调也排不开, 而且整块
   * 偏在屏幕右侧被裁 (sxxwpnc.com / ynrgjz.com 截图实测)。
   * 原来的"汉堡折叠"其实正是**规避**这一点的手段 —— 把导航拎出文档流做成
   * 全宽抽屉, 就绕开了"它在窄栏里"的事实。撤掉汉堡就必须正面解决它。
   *
   * `margin-left: calc(-50vw + 50%)` 是标准的 full-bleed 技巧: 元素先左移到
   * 视口左边缘, 再配 `width:100vw` 占满整个视口宽 —— **只改导航自己, 一个
   * 祖先都不碰**。试过改祖先 (4 版), 每版都破坏源站层叠 (导航被 banner 盖 /
   * logo 消失), 见 tests/test_seo_cloner_导航网格.py:test_E_不许用JS改源站布局。
   * ⚠️ 要跟 `position:relative` 一起用 (不能是 static), 否则某些源站的
   *    absolute 子元素会跑位。 */
  /* ⚠️ full-bleed 只在 `html.seo-nav-fullwidth` 下启用 —— 那个 class 由
   * _seo_mobile.js 的 `搬导航到独立行()` **搬成功后**才加。
   * 原因: 全宽的前提是导航已经独占一行。若源站没有 <header> 可作落点
   * (病例 ynrgjz.com), 导航搬不走、仍跟 logo 同行, 这时给它 100vw 会直接
   * 盖在 logo 和 banner 上 —— 比不改更糟。那类站只做网格化 (§ 8.2-8.5),
   * 导航留在原窄栏里排 1 列, 不溢出也不重叠。 */
  html.seo-nav-fullwidth nav, html.seo-nav-fullwidth .nav,
  html.seo-nav-fullwidth .navbar, html.seo-nav-fullwidth .navigation,
  html.seo-nav-fullwidth .header-nav, html.seo-nav-fullwidth .top-nav,
  html.seo-nav-fullwidth #nav, html.seo-nav-fullwidth #navbar,
  html.seo-nav-fullwidth .menu, html.seo-nav-fullwidth .main-menu,
  html.seo-nav-fullwidth .h-nav, html.seo-nav-fullwidth .header-menu {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    float: none !important;
    display: block !important;
    text-align: left !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    /* ⚠️ height:auto + overflow:visible 不能省 —— 源站给导航容器写死过高度
     * (PC 单行导航 ~50px), 网格化后内容变成 4 行 208px, 容器却还是 101px,
     * ul 溢出 107px 正好盖在 logo 上 (病例 ynrgjz.com: 看着像"logo 压导航",
     * 实际是"导航溢出容器压到 logo")。 */
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    line-height: normal !important;
  }

  /* 8.0b 搬不动的站 = 改造前 v2 的原样行为 (一个字都不多改)
   * ────────────────────────────────────────────────────────
   * 网格化 / 全宽 / 藏汉堡 全部挂在 `html.seo-nav-fullwidth` 下, 只给导航
   * 真被搬成独立一行的站。搬不动的站 (源站没 <header> 可作落点, 病例
   * ynrgjz.com) 这里必须**完整保留改造前那套**, 否则会退化:
   *   · 少了这套 → 既没网格也没汉堡, 导航彻底不可用 (实测项数 0)
   *   · 多改一点 (加 position/display/box-sizing) → 动到源站布局,
   *     banner 反过来盖住导航 (实测截图)
   * 所以这一段是**逐字照抄 v2**, 不许"顺手优化"。 */
  nav, .nav, .navbar, .navigation, .header-nav, .top-nav,
  #nav, #navbar, .menu, .main-menu, .h-nav, .header-menu {
    width: 100% !important;
    float: none !important;
    /* `flow-root` 而不是 `block` —— 它布局行为跟 block 完全一样, 但会**形成
     * BFC 包住浮动子元素**。源站的导航 ul 往往是 float 的, block 父容器
     * 高度算不进它 → 容器 46px 而 ul 525px, 溢出 479px 压到 banner 上
     * (ynrgjz.com 实测, 就是用户报的"移动端错位")。iOS 13+ / Chrome 58+ 支持,
     * 不支持的老浏览器退化成 block = 改造前行为, 不会更糟。 */
    display: flow-root !important;
    text-align: left !important;
    position: relative !important;
    /* ⚠️ 这三行是**修 bug**, 跟"全宽/网格"无关, 所以放在兜底段 (所有站生效)。
     * 源站给导航容器写死了 PC 单行高度 (ynrgjz.com 实测 nav h=101), 而移动端
     * 竖排后 ul 有 208px —— 溢出 107px 正好压在 banner 上, 就是用户报的
     * "移动端错位": 导航文字跟 banner 图叠在一起。
     * 早先版本我把这三行放进了 full-bleed 条件段, 结果搬不动的站 (ynrgjz) 吃不到,
     * 错位照旧。别再挪回条件段。 */
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  nav ul, .nav ul, .navbar ul, .menu ul,
  .header-nav ul, .top-nav ul {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    /* 同上: ul 自己也可能被源站写死高度 */
    height: auto !important;
    max-height: none !important;
    /* ul 自己 float 的话父容器高度算不进它 (v2 只给 li 清了 float, ul 漏了)
     * —— ynrgjz.com 实测容器 82px 而 ul 525px, 溢出 443px 压 banner */
    float: none !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }
  /* 顶级导航 ul 回到文档流 —— 源站常把它 absolute 定位 (PC 下拉菜单的做法),
   * 那样它**不占父容器高度**: 容器 82px 而 ul 525px, 溢出 443px 压在 banner 上
   * (ynrgjz.com 实测, 就是用户报的"移动端错位")。
   * ⚠️ 只改**直接子级**的 ul —— 二级 ul (`nav li ul`) 保持源站的 absolute,
   * 它是下拉浮层, 改了会平铺出来把页面顶开。 */
  nav > ul, .nav > ul, .navbar > ul, .menu > ul,
  .header-nav > ul, .top-nav > ul, #nav > ul, #navbar > ul,
  nav > div > ul, .nav > div > ul, .navbar > div > ul,
  #nav > div > ul, #navbar > div > ul, .menu > div > ul {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
  }

  /* 导航容器内部的中间层 (源站栅格 div) 也要形成 BFC —— 它们不在
   * `nav/.nav/...` 名单里, 仍是 block, 包不住浮动的 ul。只加 flow-root,
   * 不动宽度/定位。 */
  nav > div, .nav > div, .navbar > div, .menu > div,
  .header-nav > div, .top-nav > div, #nav > div, #navbar > div,
  nav > div > div, .nav > div > div, #nav > div > div, #navbar > div > div {
    display: flow-root !important;
    float: none !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    /* ⚠️ height:auto 是这里的关键 —— 源站给这些栅格 div 写死了 PC 单行高度
     * (ynrgjz.com 实测 `.nav_r.bj` 恒 46px), 里面的 ul 竖排后有 525px,
     * 于是溢出 479px 压在 banner 上 = 用户报的"移动端错位"。
     * 光加 flow-root 不够 (那只管"包住浮动"), 写死的 height 还得放开。 */
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
  nav li, .nav li, .navbar li, .menu li,
  .header-nav li, .top-nav li {
    display: block !important;
    width: 100% !important;
    float: none !important;
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
  }
  nav a, .nav a, .navbar a, .menu a,
  .header-nav a, .top-nav a {
    display: block !important;
    padding: 14px 18px !important;
    line-height: 1.5 !important;
    color: #333 !important;
    text-decoration: none !important;
    font-size: 15px !important;
  }
  nav a:active, .nav a:active, .menu a:active {
    background: #f5f9ff !important;
  }
  /* 我方注入的汉堡 (搬不动的站靠它展开导航 · 见 _生成JS.py 的 fallback) */
  .seo-mobile-burger {
    display: inline-block !important;
    position: fixed !important;
    top: 8px;
    right: 8px;
    z-index: 9998;
    width: 44px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    background: rgba(255,255,255,0.95);
    border: 1px solid #eee;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    cursor: pointer;
    user-select: none;
  }
  .seo-mobile-burger::before {
    content: "≡";
    font-size: 28px;
    color: #1e88e5;
    font-weight: bold;
  }

  /* 8.0d 包含导航的祖先容器放开写死高度 (CSS 版 · 不依赖 JS 执行时序)
   * ────────────────────────────────────────────────────────
   * 用户报的"移动端错位"真正机制是**高度塌陷层层传递**:
   *   UL h=525 (竖排后真实高) → DIV h=525 → DIV.nav_r.bj h=46 (§ 8.0b 已放开)
   *   → DIV.main_poxx h=**101** ← 再往上还写死, nav 涨到 561 后溢出它
   *   → banner (.iBan, body 直接子元素 static, 紧跟其后) 按 101px 排位
   *   → 跟 561px 的导航垂直重叠 503px, 导航文字压在 banner 图上
   *
   * 这层的类名没有共识 (.main_poxx / .nav_r / .bj / #main_nav ...), 写死清单
   * 覆盖不到 —— 又是"白名单式"那个老病 (同 OKA-183/197/203)。
   * 用 `:has()` 按**结构**命中: "body 的直接子元素里, 包含 nav 的那个"。
   * 只改高度三属性, 不动 float/position/width (那条路已证伪 4 版)。
   * `:has()` iOS 15.4+ / Chrome 105+ 支持; 不支持的老浏览器退化成改造前行为。
   *
   * ⚠️ 先用 JS 版 (`放开导航祖先高度()`) 试过, 但它依赖执行时序: 第一拍时 nav
   * 还只有 82px、这层判据不成立不该改, 等 CSS 让 nav 涨到 561px 真塌陷了却
   * 没人再检查 (实测 inline height 始终为空)。CSS 没有时序问题。 */
  body > *:has(nav),
  body > *:has(.nav),
  body > *:has(#nav),
  body > *:has(.navbar),
  body > *:has(.header-nav),
  body > * > *:has(> nav),
  body > * > *:has(> .nav) {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* 8.1 汉堡按钮全部隐藏 (我方注入的 + 源站自带的常见名)
   * 导航已常显, 汉堡点下去只会把它藏起来, 留着是负体验。
   * ⚠️ 名单跟 _生成JS.py 的 `源站汉堡选择器` 同源 —— 改一处要改两处,
   *    tests/test_seo_cloner_导航网格.py 用正则锁死两边一致。 */
  /* ⚠️ 藏汉堡也是条件的 —— 只有导航真的搬成独立一行 (html.seo-nav-fullwidth)
   * 才藏。搬不动的站 (源站没 <header>) 导航仍在原窄栏里, 这时藏掉汉堡等于
   * 让用户既看不到完整导航、又没法展开, 比不改更糟。 */
  html.seo-nav-fullwidth .seo-mobile-burger,
  html.seo-nav-fullwidth .navs, html.seo-nav-fullwidth .nav_button,
  html.seo-nav-fullwidth .menu-toggle, html.seo-nav-fullwidth .hamburger,
  html.seo-nav-fullwidth .nav-toggle, html.seo-nav-fullwidth .navbar-toggler,
  html.seo-nav-fullwidth .navbar-toggle, html.seo-nav-fullwidth .mobile-menu,
  html.seo-nav-fullwidth .m-nav, html.seo-nav-fullwidth .mnav,
  html.seo-nav-fullwidth [class*="navicon"], html.seo-nav-fullwidth [class*="fa-bars"],
  html.seo-nav-fullwidth [class*="icon-menu"], html.seo-nav-fullwidth [class*="menu-icon"],
  html.seo-nav-fullwidth [class*="menu-btn"], html.seo-nav-fullwidth [class*="nav-btn"],
  html.seo-nav-fullwidth [class*="btn-menu"], html.seo-nav-fullwidth [class*="burger"] {
    display: none !important;
  }

  /* 8.2 导航 ul → 2 列网格 */
  /* 网格化同样只给"已搬成独立一行"的站 —— 见 § 8.0 注释。留在原窄栏的
   * 导航保持源站排布 + 汉堡, 零退化。 */
  html.seo-nav-fullwidth nav ul, html.seo-nav-fullwidth .nav ul,
  html.seo-nav-fullwidth .navbar ul, html.seo-nav-fullwidth .menu ul,
  html.seo-nav-fullwidth .header-nav ul, html.seo-nav-fullwidth .top-nav ul {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    display: grid !important;
    /* auto-fit + minmax 而不是写死 repeat(2,1fr) ——
     * 375px 视口下正好排 2 列 (每列约 176px, 对齐樱梦观感);
     * 而当导航躺在**窄容器**里 (病例 sxxwpnc.com: 源站 PC 布局把导航塞进
     * 164px 的栅格列) 时自动降成 1 列, 不会挤成 52.8px 让"网站首页"折成
     * "网站/首页"。写死 2 列就只能靠 JS 逐层拉宽祖先, 实测那样会把
     * ynrgjz.com 的祖先撑到 1200px (视口 3 倍) 有撑破布局的风险,
     * 取舍同 OKA-203「误伤源站=页面崩不可逆, 宁可精确」。
     * ⚠️ `min(140px, 100%)` 里的 min() 不能省 —— minmax 的最小值是**硬下限**,
     * 容器比它还窄时 (sxxwpnc 那个 114px 栅格列) 列宽仍按 140px 算, 溢出 26px
     * 被裁掉。夹一层 min() 后窄容器下退成容器自身宽度, 不溢出。 */
    grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    /* ⚠️ max-width 必须给视口硬上限 —— `width:100%` 在**父容器宽度是 auto**
     * (内容驱动) 时等于不设限, auto-fit 就会按"能排多少列"一路展开:
     * 实测 ynrgjz.com 顶级导航 7 项排成 7 列 = 735px, 再把祖先
     * `.nav_r.bj` 撑到 1200px (视口 3.2 倍), 导航整块溢出屏幕右侧。 */
    max-width: 100vw !important;
    box-sizing: border-box !important;
    float: none !important;
    height: auto !important;
  }

  /* 8.3 二级/三级 ul 移动端隐藏
   * 特异性 (0,0,3) > 上面那条 (0,0,2), 所以能盖住。
   * 病例 ynrgjz.com: 顶级 7 项 + 二级 13 项 = 20 项, 全铺网格要 10 行,
   * 又变成"撑满整屏"。蜘蛛读 HTML 不受 display 影响, href 照样抓得到;
   * 真人从一级页面进二级, 跟樱梦 (只有顶级 5 项) 的形态一致。 */
  html.seo-nav-fullwidth nav li ul, html.seo-nav-fullwidth .nav li ul,
  html.seo-nav-fullwidth .navbar li ul, html.seo-nav-fullwidth .menu li ul,
  html.seo-nav-fullwidth .header-nav li ul, html.seo-nav-fullwidth .top-nav li ul {
    display: none !important;
  }/*@common a0fy4nq*/

  /* 8.4 grid item · 空项/隐藏项不占格 (樱梦真站就有 <li class="hide">) */
  html.seo-nav-fullwidth nav li, html.seo-nav-fullwidth .nav li,
  html.seo-nav-fullwidth .navbar li, html.seo-nav-fullwidth .menu li,
  html.seo-nav-fullwidth .header-nav li, html.seo-nav-fullwidth .top-nav li {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: none !important;
    height: auto !important;
    line-height: normal !important;
  }
  html.seo-nav-fullwidth nav li:empty, html.seo-nav-fullwidth .nav li:empty,
  html.seo-nav-fullwidth .navbar li:empty, html.seo-nav-fullwidth .menu li:empty,
  html.seo-nav-fullwidth nav li.hide, html.seo-nav-fullwidth .nav li.hide,
  html.seo-nav-fullwidth .navbar li.hide, html.seo-nav-fullwidth .menu li.hide {
    display: none !important;
  }

  /* 8.5 导航项 · 圆角卡片 + 自动换行 (对齐樱梦量) */
  html.seo-nav-fullwidth nav li > a, html.seo-nav-fullwidth .nav li > a,
  html.seo-nav-fullwidth .navbar li > a, html.seo-nav-fullwidth .menu li > a,
  html.seo-nav-fullwidth .header-nav li > a, html.seo-nav-fullwidth .top-nav li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 44px !important;
    padding: 10px 6px !important;
    box-sizing: border-box !important;
    line-height: 1.35 !important;
    color: #333 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    text-align: center !important;
    border-radius: 8px !important;
    background: rgba(30,136,229,0.06) !important;
    white-space: normal !important;
    word-break: break-word !important;
    transition: background .2s ease !important;
  }
  html.seo-nav-fullwidth nav li > a:active, html.seo-nav-fullwidth .nav li > a:active,
  html.seo-nav-fullwidth .menu li > a:active {
    background: rgba(30,136,229,0.16) !important;
  }
  html.seo-nav-fullwidth nav li > a.active, html.seo-nav-fullwidth nav li.active > a,
  html.seo-nav-fullwidth .nav li > a.active, html.seo-nav-fullwidth .nav li.active > a,
  html.seo-nav-fullwidth .menu li > a.active, html.seo-nav-fullwidth .menu li.active > a {
    background: rgba(30,136,229,0.2) !important;
    color: #1565c0 !important;
  }

  /* ---- 9. Logo ---- */
  header, .header, #header, .top, .topbar, .h-top {
    width: 100% !important;
    padding: 8px 12px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    background: #fff !important;
    border-bottom: 1px solid #f0f0f0 !important;
  }
  .logo, .h-logo, .brand, .brand-logo, #logo, .site-logo {
    display: block !important;
    max-height: 50px !important;
    text-align: center !important;
    padding: 4px 0 !important;
  }
  .logo img, .h-logo img, .brand img, #logo img, .site-logo img {
    max-height: 44px !important;
    width: auto !important;
    display: inline-block !important;
  }

  /* ---- 10. Banner / Swiper / Carousel ---- */
  .banner, .swiper, .swiper-container, .carousel, .slider, .slide,
  .index-banner, .home-banner, .top-banner, .head-banner {
    width: 100% !important;
    height: auto !important;
    max-height: 60vw !important;
    overflow: hidden !important;
    position: relative !important;
  }
  .banner img, .swiper img, .carousel img, .slider img,
  .index-banner img, .top-banner img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  .swiper-slide, .carousel-item, .slick-slide {
    width: 100% !important;
    flex-shrink: 0 !important;
  }/*common:odsjqyk*/

  /* ---- 11. 多列栅格降级 ---- */
  .col, .column,
  [class*="col-md-"], [class*="col-lg-"], [class*="col-xs-"], [class*="col-sm-"],
  .grid-item, .row > div,
  .left, .right, .sidebar, .aside, .side-bar,
  .main-left, .main-right, .content-left, .content-right {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    clear: both !important;
  }
  .row { display: block !important; margin: 0 !important; }

  /* ---- 12. 卡片 / 列表 / 产品网格 ---- */
  .card, .product, .product-card, .case, .case-card, .news-item,
  .news-card, .article-card, .item, .list-item, .grid-item,
  .product-list > li, .news-list > li, .case-list > li {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 0 12px !important;
    padding: 12px !important;
    background: #fff !important;
    border: 1px solid #eee !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
    overflow: hidden !important;
  }
  .card img, .product img, .news-item img, .case img,
  .product-card img, .case-card img, .news-card img {
    width: 100% !important;
    max-height: 56vw !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    margin-bottom: 8px !important;
  }
  .card .title, .card h3, .product .title, .product h3,
  .news-item .title, .news-item h3 {
    font-size: 15px !important;
    line-height: 1.4 !important;
    color: #222 !important;
    margin: 4px 0 !important;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .card .desc, .news-item .desc, .product .desc {
    font-size: 13px !important;
    color: #777 !important;
    line-height: 1.6 !important;
    margin: 4px 0 0 !important;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  /* ---- 13. PC-only 元素隐藏 ---- */
  .pc-only, .desktop-only, .hidden-xs, .hidden-sm,
  .visible-md, .visible-lg, .sidebar-pc,
  .header-pc, .footer-pc, .nav-pc {
    display: none !important;
  }
  .mobile-only, .visible-xs, .visible-sm {
    display: block !important;
  }

  /* ---- 14. footer ---- */
  footer, .footer, #footer {
    text-align: center !important;
    padding: 20px 12px !important;
    background: #2c2c2c !important;
    color: #b0b0b0 !important;
    font-size: 13px !important;
    line-height: 1.7 !important;
  }
  footer a, .footer a { color: #b0b0b0 !important; }
  footer .col, .footer .col, footer ul, .footer ul {
    width: 100% !important;
    text-align: center !important;
    display: block !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    list-style: none !important;
  }
  footer h3, .footer h3, footer h4, .footer h4 {
    font-size: 14px !important;
    color: #fff !important;
    margin: 12px 0 6px !important;
  }
  footer img, .footer img { max-width: 120px !important; }

  /* ---- 15. 弹窗 / modal 全屏 ---- */
  .modal, .popup, .dialog, .overlay-content, .layer, .layui-layer {
    width: 94% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    border-radius: 10px !important;
    left: 3% !important;
    transform: none !important;
  }
  .modal-content, .popup-content { padding: 16px !important; }

  /* ---- 16. 文本断行 ---- */
  .text, article, p, li, dd, td, span {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }

  /* ---- 17. 视频自适应 ---- */
  video, iframe {
    max-width: 100% !important;
    height: auto !important;
  }
  .video-wrap, .video-container {
    position: relative !important;
    padding-bottom: 56.25% !important;
    height: 0 !important;
    overflow: hidden !important;
  }
  .video-wrap iframe, .video-wrap video,
  .video-container iframe, .video-container video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* ---- 18. 浮动联系按钮区 (右下角) ---- */
  .right-tools, .float-tools, .side-bar-fixed, .right-fixed,
  .pop-tools, .float-bar, .quick-link, .floating, .fixed-tools {
    right: 4px !important;
    bottom: 70px !important;
    transform: scale(0.8);
    transform-origin: right bottom;
  }
  .scroll-top, .back-to-top, .gotop {
    right: 8px !important;
    bottom: 70px !important;
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
    font-size: 18px !important;
    border-radius: 50% !important;
  }

  /* ---- 19. 底部固定 tabbar (本模块 JS 注入的 5 按钮) ---- */
  .seo-mobile-tabbar {
    display: flex !important;
    position: fixed !important;
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: #fff;
    border-top: 1px solid #e0e0e0;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
    z-index: 9999;
    padding: 4px 0;
  }
  .seo-mobile-tabbar a {
    flex: 1;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    color: #666 !important;
    font-size: 11px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
  }
  .seo-mobile-tabbar a:active { background: #f5f9ff !important; }
  .seo-mobile-tabbar .seo-mobile-icon {
    font-size: 20px;
    line-height: 24px;
    margin-bottom: 2px;
  }
  .seo-mobile-tabbar .seo-mobile-call {
    color: #fff !important;
    background: linear-gradient(135deg, #43a047, #2e7d32) !important;
    border-radius: 50% !important;
    width: 48px !important;
    height: 48px !important;
    margin-top: -16px !important;
    margin-bottom: -4px !important;
    box-shadow: 0 2px 8px rgba(67,160,71,0.4) !important;
    flex: 0 0 48px !important;
  }
  .seo-mobile-tabbar .seo-mobile-call .seo-mobile-icon { margin: 0 !important; }
  .seo-mobile-tabbar .seo-mobile-call-label {
    color: #43a047 !important;
    margin-top: 2px;
  }

  /* ---- 20. 滚动条美化 (移动端通常隐藏) ---- */
  ::-webkit-scrollbar { width: 0; height: 0; background: transparent; }

  /* ---- 21. 面包屑导航 · v30.9(2026-07-25) 强制隐藏 ---- */
  /* 用户诉求: 顶部蓝底 "首页" 面包屑不该显示 · JSON-LD 已在 head · SEO 保留
   * inline style="display:none" 被源 CSS 覆盖 · 用 html body 前缀提高优先级
   */
  html body .breadcrumb,
  html body nav.breadcrumb,
  html body .crumb,
  html body .position,
  html body .nav-position,
  html body .location {
    display: none !important;
  }
  .breadcrumb a, .crumb a, .position a, .location a {
    color: #1e88e5 !important;
    text-decoration: none !important;
  }
  .breadcrumb li, .crumb li {
    display: inline-block !important;
    margin-right: 4px !important;
  }
  .breadcrumb li::after, .crumb li::after {
    content: "›";
    margin-left: 4px;
    color: #ccc;
  }
  .breadcrumb li:last-child::after, .crumb li:last-child::after { content: ""; }

  /* ---- 22. 分页器 ---- */
  .pagination, .pages, .page-list, .pager {
    text-align: center !important;
    padding: 14px 8px !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .pagination a, .pagination span, .pages a, .pages span,
  .page-list a, .pager a, .pager span {
    display: inline-block !important;
    min-width: 36px !important;
    height: 36px !important;
    line-height: 34px !important;
    padding: 0 10px !important;
    margin: 0 2px !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    color: #555 !important;
    background: #fff !important;
    text-decoration: none !important;
    font-size: 14px !important;
  }
  .pagination .current, .pagination .active, .pages .current,
  .pages .active, .pager .current, .pager .active {
    background: #1e88e5 !important;
    color: #fff !important;
    border-color: #1e88e5 !important;
  }

  /* ---- 23. 文章/新闻详情页 ---- */
  .article, .news-detail, .article-content, .post-content,
  .content-detail, .detail-content, .news-content {
    padding: 12px !important;
    background: #fff !important;
    font-size: 15px !important;
    line-height: 1.8 !important;
    color: #333 !important;
  }
  .article-title, .news-title, .post-title, .detail-title {
    font-size: 19px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin: 12px 0 8px !important;
    color: #222 !important;
  }
  .article-meta, .news-meta, .post-meta, .detail-meta {
    font-size: 12px !important;
    color: #999 !important;
    margin-bottom: 16px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #eee !important;
  }
  .article p, .news-detail p, .article-content p, .post-content p {
    margin: 0 0 14px !important;
    text-indent: 2em !important;
  }
  .article img, .news-detail img, .article-content img, .post-content img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 10px auto !important;
    border-radius: 4px !important;
  }

  /* ---- 24. 产品详情页 (大图 + 缩略图列表) ---- */
  .product-detail, .product-info, .goods-detail {
    padding: 12px !important;
    background: #fff !important;
  }
  .product-gallery, .product-images, .goods-gallery {
    width: 100% !important;
    margin-bottom: 12px !important;
  }
  .product-gallery .main-img, .product-images .big-img {
    width: 100% !important;
    max-height: 80vw !important;
    object-fit: contain !important;
    background: #f5f5f5 !important;
    border-radius: 6px !important;
  }
  .product-gallery .thumbs, .product-images .small-imgs {
    display: flex !important;
    gap: 6px !important;
    margin-top: 8px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 4px !important;
  }
  .product-gallery .thumbs img, .product-images .small-imgs img {
    width: 60px !important;
    height: 60px !important;
    object-fit: cover !important;
    border-radius: 4px !important;
    border: 2px solid transparent !important;
    flex-shrink: 0 !important;
  }
  .product-gallery .thumbs img.active, .product-images .small-imgs img.active {
    border-color: #1e88e5 !important;
  }
  .product-title, .goods-title { font-size: 18px !important; font-weight: 600 !important; margin: 8px 0 !important; }
  .product-price, .goods-price {
    font-size: 22px !important;
    color: #e53935 !important;
    font-weight: 600 !important;
    margin: 8px 0 !important;
  }

  /* ---- 25. 在线客服浮窗 (右下圆形) ---- */
  .online-service, .kefu, .customer-service, .qqlive, .live-chat {
    position: fixed !important;
    right: 8px !important;
    bottom: 130px !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #ff7043, #f4511e) !important;
    box-shadow: 0 4px 12px rgba(244,81,30,0.35) !important;
    text-align: center !important;
    line-height: 48px !important;
    color: #fff !important;
    font-size: 22px !important;
    z-index: 9990 !important;
    cursor: pointer !important;
  }
  .online-service::before { content: "💬"; }

  /* ---- 26. 二维码图片 (公众号/微信) ---- */
  .qrcode, .qr-code, .ewm, .erweima, .gzh-qrcode {
    max-width: 140px !important;
    height: auto !important;
    margin: 12px auto !important;
    display: block !important;
    padding: 8px !important;
    background: #fff !important;
    border: 1px solid #eee !important;
    border-radius: 6px !important;
  }

  /* ---- 27. 地图容器 ---- */
  #map, .map, .map-container, .baidu-map, .amap, #BMap_*,
  .map-wrap, .iw-content {
    width: 100% !important;
    height: 240px !important;
    margin: 10px 0 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
  }

  /* ---- 28. 联系我们页 ---- */
  .contact-us, .contact-info, .contact-list {
    padding: 12px !important;
  }
  .contact-item {
    display: flex !important;
    align-items: center !important;
    padding: 12px !important;
    background: #fff !important;
    border-radius: 8px !important;
    margin-bottom: 8px !important;
    border: 1px solid #f0f0f0 !important;
  }
  .contact-item .icon, .contact-item i {
    font-size: 22px !important;
    color: #1e88e5 !important;
    margin-right: 12px !important;
    flex-shrink: 0 !important;
  }
  .contact-item .text, .contact-item .info {
    flex: 1 !important;
    font-size: 14px !important;
    color: #444 !important;
    word-break: break-all !important;
  }
  .contact-item .text strong { display: block; color: #888; font-size: 12px; margin-bottom: 2px; font-weight: normal; }

  /* ---- 29. 资讯列表/搜索分类 tab ---- */
  .tab, .tabs, .tab-list, .news-tab, .filter-tab, .nav-tab {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    background: #fff !important;
    border-bottom: 1px solid #eee !important;
    margin-bottom: 12px !important;
  }
  .tab a, .tabs a, .tab-list a, .news-tab a {
    flex-shrink: 0 !important;
    padding: 12px 16px !important;
    color: #555 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    border-bottom: 2px solid transparent !important;
  }
  .tab .active, .tabs .active, .tab-list .active, .news-tab .active {
    color: #1e88e5 !important;
    border-bottom-color: #1e88e5 !important;
  }

  /* ---- 30. 标签 tag ---- */
  .tag, .label, .keyword {
    display: inline-block !important;
    padding: 3px 10px !important;
    margin: 2px 4px 2px 0 !important;
    background: #f0f7ff !important;
    color: #1e88e5 !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
    text-decoration: none !important;
  }
  .tag.hot, .label.hot { background: #ffebee !important; color: #e53935 !important; }
  .tag.new, .label.new { background: #e8f5e9 !important; color: #43a047 !important; }

  /* ---- 31. 公司介绍 / about 页 ---- */
  .about-section, .company-intro, .about-content {
    padding: 16px 12px !important;
    background: #fff !important;
  }
  .about-section .title, .company-intro .title {
    font-size: 18px !important;
    font-weight: 600 !important;
    text-align: center !important;
    margin-bottom: 14px !important;
    position: relative !important;
    padding-bottom: 10px !important;
  }
  .about-section .title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 2px;
    background: #1e88e5;
  }

  /* ---- 32. 数据展示卡 (年限/客户/案例数等数字) ---- */
  .stats, .data-card, .number-card, .achievement {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)) !important;
    gap: 8px !important;
    padding: 12px !important;
  }
  .stats-item, .stat-item, .data-item, .achievement-item {
    text-align: center !important;
    padding: 14px 10px !important;
    background: linear-gradient(135deg, #f5f9ff, #e8f1ff) !important;
    border-radius: 8px !important;
  }
  .stats-item .num, .stat-item .num, .data-item .num,
  .stats-item strong, .achievement-item strong {
    font-size: 24px !important;
    color: #1e88e5 !important;
    font-weight: 600 !important;
    display: block !important;
    line-height: 1.2 !important;
  }
  .stats-item .label, .stat-item .label, .data-item .label {
    font-size: 12px !important;
    color: #888 !important;
    margin-top: 4px !important;
  }

  /* ---- 33. 友情链接 ---- */
  .links, .friend-link, .blogroll {
    padding: 10px 12px !important;
    background: #fafafa !important;
    font-size: 12px !important;
    color: #888 !important;
    line-height: 2 !important;
  }
  .links a, .friend-link a {
    color: #888 !important;
    margin-right: 12px !important;
    text-decoration: none !important;
  }

  /* ---- 34. 备案信息 ---- */
  .icp, .beian, .copyright, .bottom-info {
    text-align: center !important;
    padding: 10px !important;
    font-size: 11px !important;
    color: #888 !important;
    line-height: 1.8 !important;
    background: #2c2c2c !important;
  }

  /* ---- 35. 动画/过渡降级 (低端机省电) ---- */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
    }
  }

}  /* end @media max-width: 768px */


/* ============================================================
   ★ 小屏幕加强 (≤480px 真手机)
   ============================================================ */
@media screen and (max-width: 480px) {
  body { font-size: 15px !important; }
  /* v85(2026-07-27 OKA-210) 同 768px 档 · 放行带 inline style 的 X 词 h1 */
  h1:not([style]), .h1 { font-size: 20px !important; }
  h2, .h2 { font-size: 17px !important; }
  h3, .h3 { font-size: 15px !important; }
  .container, .wrap, .wrapper, .main, .content {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  /* 卡片间距压缩 */
  .card, .product, .news-item, .case { margin-bottom: 10px !important; padding: 10px !important; }
  /* 表单按钮拉满 */
  .form button, form .submit, .form-submit, .form-submit-btn { width: 100% !important; }
}


/* ============================================================
   ★ 横屏 (landscape)
   ============================================================ */
@media screen and (max-width: 900px) and (orientation: landscape) {
  body { padding-bottom: 0 !important; }
  .seo-mobile-tabbar { display: none !important; }
  .banner, .swiper, .carousel { max-height: 50vh !important; }
}


/* ============================================================
   ★ 微信浏览器特殊修正 (User-Agent 含 MicroMessenger)
   ★ 用 :root[data-ua-wechat] 通过 JS 标记后命中
   ============================================================ */
:root[data-ua-wechat] body {
  /* 微信顶部隐藏不到, 保留 padding-top 给微信导航条 */
  padding-top: 0 !important;
}
:root[data-ua-wechat] a[href^="tel:"]::before {
  content: "📞 ";
}

/* QQ 浏览器修正 */
:root[data-ua-qq] .seo-mobile-tabbar {
  bottom: env(safe-area-inset-bottom, 0);
}

/* iOS 安全区域 (iPhone X 及以后) */
.seo-mobile-tabbar {
  padding-bottom: env(safe-area-inset-bottom, 0) !important;
  height: calc(56px + env(safe-area-inset-bottom, 0)) !important;
}

/* ============================================================
   ★ v30.5(2026-07-25) 移动端标准商业站优化 (5 项)
   修 guangdongzuyi.com 病例: header 676px 撑爆首屏, nav 7 项全展开, 相关推荐重复 5 段
   用户诉求: header 60-80px, 汉堡菜单收起, hero 首屏可见, 悬浮 CTA
   ============================================================ */
@media screen and (max-width: 768px) {
  /* 1. header 紧凑 · 从 676px 缩到 ~80px */
  header.header, .header, #header,
  header.head, .head, .top-header, .site-header {
    min-height: auto !important;
    max-height: 80px !important;
    padding: 8px 15px !important;
    position: relative !important;
    z-index: 100 !important;
    overflow: visible !important;
  }
  header.header .logo, .header .logo, .head .logo,
  .logo.fl, .site-logo, .brand {
    max-height: 60px !important;
    line-height: 60px !important;
    display: inline-block !important;
    float: left !important;
    padding: 0 !important;
  }
  header.header .logo img, .header .logo img, .logo.fl img {
    max-height: 44px !important;
    width: auto !important;
    vertical-align: middle !important;
  }

  /* 2. 导航容器 · v32(2026-07-29 OKA-252) 常显网格 · 撤掉 v30.5/v31 的折叠抽屉
   *
   * v30.5(默认隐藏 + 汉堡展开) → v31(JS class 侧滑 260px) → **v32 常显网格**
   * 用户 2026-07-29 原话: "不需要右上那个汉堡折起来"、"导航会自动换行"。
   *
   * 为什么撤掉抽屉是安全的 (不是退回 v30.5 之前的 bug):
   *   v30.5 修的病因是"nav 7 项**竖排**撑爆首屏 676px", 而竖排来自
   *   § 8 那条 `nav li {display:block; width:100%}` — 现在 § 8 已改 2 列网格,
   *   7 项 = 4 行 ≈ 200px, 病因消失, 不需要再靠隐藏来省高度。
   *   v31 修的"展开后全屏白底挡内容"更是抽屉本身带来的问题, 没抽屉就没这事。
   * ⚠️ 别再改回 `display:none + .seo-nav-open`, 会重演本次用户投诉。
   */
  /* ⚠️ 常显名单只放 .navbox / .site-nav —— **不能**把 .navbar-collapse /
   * .nav-collapse / .nav-menu 也塞进来。那三个是 Bootstrap 系"折叠容器"的
   * 惯用名, 源站往往**另有一份移动端抽屉菜单**挂在上面 (默认 display:none,
   * 点汉堡才 .show)。强制显示会让它跟我方网格导航**同时出现**, 页面上叠两份
   * 导航文字 + 一个源站的 × 关闭按钮 (sxxwpnc.com 实测截图)。
   * 这类容器交给 JS 的 `确保导航常显()` 精确判断 —— 它只显示"承载最多导航项
   * 的那条祖先链", 天生隐藏的第二份抽屉不碰。 */
  html body .navbox,
  html body nav.navbox.fl,
  html body .site-nav {
    display: block !important;
    visibility: visible !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    z-index: auto !important;
  }
  /* 老 JS 若还在页面里给它加了 .seo-nav-open (存量产物 / 缓存的旧 js),
   * 也不许再变成固定定位的抽屉 — 保持跟常显态一致。 */
  html body .navbox.seo-nav-open,
  html body nav.navbox.fl.seo-nav-open,
  html body.seo-nav-open .navbox,
  html body.seo-nav-open nav.navbox.fl {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    box-shadow: none !important;
    padding: 0 !important;
    animation: none !important;
  }
  /* 产品页侧栏 .page_navs · 默认文档流挡 banner 下 · 移动端隐藏 */
  html body .page_navs,
  html body nav.page_navs {
    display: none !important;
  }
  /* 顶部 page_top 面包屑条 · 移动端隐藏 */
  html body .page_top,
  html body .page_lj {
    display: none !important;
  }
  /* .navbox 系容器内的 ul/li/a · 跟 § 8 同一套网格量
   * (这里不能省 — 这些选择器特异性比 § 8 高, 不写就还是源站的 PC 排布) */
  html.seo-nav-fullwidth body .navbox .nav,
  html.seo-nav-fullwidth body .navbox ul,
  html.seo-nav-fullwidth body .nav-menu ul,
  html.seo-nav-fullwidth body .navbar-collapse ul {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100vw !important;   /* 同 § 8.2: 100% 在 auto 宽父容器下不设限 */
    float: none !important;
    height: auto !important;
    right: auto !important;
    position: relative !important;
    background: transparent !important;
    padding: 8px 0 !important;
    margin: 0 !important;
    list-style: none !important;
    box-sizing: border-box !important;
  }
  html body .navbox li ul,
  html body .nav-menu li ul {
    display: none !important;
  }
  .navbox .nav li, .navbox ul li, .nav-menu li {
    display: block !important;
    width: auto !important;
    height: auto !important;
    border-bottom: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    line-height: normal !important;
  }
  .navbox .nav li:empty, .navbox ul li:empty, .nav-menu li:empty,
  .navbox .nav li.hide, .navbox ul li.hide, .nav-menu li.hide {
    display: none !important;
  }
  html.seo-nav-fullwidth .navbox .nav li > a,
  html.seo-nav-fullwidth .navbox ul li > a,
  html.seo-nav-fullwidth .nav-menu li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 44px !important;
    padding: 10px 6px !important;
    box-sizing: border-box !important;
    line-height: 1.35 !important;
    font-size: 14px !important;
    color: #333 !important;
    text-decoration: none !important;
    text-align: center !important;
    border-radius: 8px !important;
    background: rgba(30,136,229,0.06) !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

  /* 3. 相关推荐去重 · 5 段 → 1 段 (SEO 保留 1 段 · 用户体验) */
  section.related-posts:nth-of-type(n+2),
  .related-posts:nth-of-type(n+2),
  section[aria-label="相关推荐"]:nth-of-type(n+2),
  section[class*="related"]:nth-of-type(n+2) {
    display: none !important;
  }

  /* 4. 悬浮 CTA 电话按钮 · v30.8 移除 (用户诉求 · tabbar 已含拨号按钮 · 悬浮多余)
   * 保留兼容: 若 HTML 已生成 .seo-mobile-cta-float · 强制隐藏
   */
  .seo-mobile-cta-float {
    display: none !important;
  }
}

/* ============================================================
   ★ 暗色模式 (用户系统级偏好, 不强制)
   ============================================================ */
@media (prefers-color-scheme: dark) and (max-width: 768px) {
  /* 不动业务主题色, 只调中性色 */
  .seo-mobile-tabbar { background: #1e1e1e; border-top-color: #333; }
  .seo-mobile-tabbar a { color: #999 !important; }
  .seo-mobile-burger { background: rgba(30,30,30,0.95); border-color: #444; }
  .seo-mobile-burger::before { color: #4fc3f7; }
}


/* ==========================================================================
   ★ 源站固定宽度自适应覆盖 (读源站 CSS 自动生成, 命中 5 个选择器)
   原理: 源站这些选择器写死了 ≥720px 的 PC 宽度, 手机会横向溢出.
         这里统一压成流式 100%, 补通用名单覆盖不到的非常规 class.
   ========================================================================== */
@media screen and (max-width: 768px) {
  .c_portalResProblem_list-01001 .p_problemlist,
  .container,
  .media-body,
  .modal-lg,
  .c_portalResProduct_detail-03001 .p_ProductDetail {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
}