/* ============================================================
   product.html 移动端适配
   作用域: 仅 @media (max-width: 768px) 生效, 桌面端零影响
   目标: 接入共享移动端头 (mobile-hf.css + mobile-nav.js) 后,
        对主体内容做重排版 —— 两栏堆叠、固定宽图自适应、字号收敛
   ============================================================ */
@media (max-width: 768px) {

  /* ---- 容器: 1180px 固定宽 → 整宽自适应 ---- */
  .pro-mes {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
  }

  /* ---- 左侧子导航整块 (.pro-left: 「产品概述」列表 + 「若有问题?」联系方式)
         2026-09-11 按用户要求: 移动端直接隐藏 (桌面端不受影响,
         该规则仅在 max-width:768px 内生效) ---- */
  .pro-mes .pro-left {
    display: none !important;
  }

  /* ---- 右侧内容区 (.pro-right 990px 浮动) → 整宽 ---- */
  .pro-mes .pro-right {
    width: 100% !important;
    float: none !important;
    height: auto !important;
    margin-top: 16px !important;
  }

  /* ---- 容器链整宽 (桌面 .pro-two 写死 990px, 会把子元素全撑宽, 导致图片 max-width:100% 解析到 990) ---- */
  .pro-right .pro-two,
  .pro-mes .cell-sale,
  .clear-both {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  /* ---- 所有固定宽图片自适应 (banner 990px / 510px / 442px) ---- */
  .pro-mes img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* ---- 各部分之间补间距 + 内容不贴边 ----
     桌面每块 .cell-sale 都是 margin:0 紧贴下一块, 移到手机上整页糊成一片
     (用户反馈「各部分之间没有间距，空间」). 这里给每块留出 18px 呼吸,
     并补上内边距 —— 桌面 .sale-con 左右只有 14px、.sale-right 只有 4px,
     文字几乎贴着色块边缘 */
  .pro-mes .cell-sale {
    padding: 22px 16px !important;
    margin-bottom: 0 !important;       /* 2026-09-18: 用户反馈板块间空白太大, 卡片直接相接(均白底无边框, 视觉连续) */
    box-sizing: border-box !important;
  }
  /* 桌面遗留: 板块开头的 <br> 占位(20px)在手机上是纯空白 */
  .pro-mes .cell-sale > br { display: none !important; }
  /* 桌面遗留: .sale-left 顶部 margin(PaaS 60px) / 图片 margin-top(社区 40px) 在单列堆叠时是纯空白 */
  .cell-sale .sale-left { margin-top: 0 !important; }
  .cell-sale .sale-left img { margin-top: 0 !important; }

  /* ---- 顶部 banner 大图 + 浮层文字 ---- */
  .pro-right .pro_banheader { width: 100% !important; max-width: 100% !important; }
  .pro-mes .pro-one > div:first-child img { width: 100% !important; max-width: 100% !important; }
  /* banner 浮层: 桌面写死 990px 绝对定位, 收成整宽 */
  .pro-mes .pro-right .pro-ding { width: 100% !important; }
  .pro-mes .pro-ding .back-bg { width: 100% !important; }
  .pro-mes .pro-ding .back-con { left: 16px !important; right: 16px !important; }
  .pro-mes .pro-ding .back-con h3 { font-size: 20px !important; }
  /* 2026-09-18 用户要求: 蓝色蒙版原来沿用桌面写死的 175px, 而手机端整张 banner 图
     只有 ~178px 高 → 蒙版几乎盖满整图. 改为只盖下半部 (50%), 文字+按钮贴蒙版底部.
     ⚠️ .pro-ding 的定位包含块是 .pro-one (position:relative, 高度=图片高), 所以 50% 生效.
     ⚠️ 窄屏(360/375) 图更矮, 50% 可能装不下 20px 标题 + 按钮 → 用 min-height 兜底
        (只为防裁切, 视觉上仍接近一半高). 桌面端不受影响 (本段在移动媒体查询内). */
  .pro-mes .pro-ding {
    height: 50% !important;
    min-height: 86px !important;
  }
  .pro-mes .pro-ding .back-bg { height: 100% !important; }
  .pro-mes .pro-ding .back-con {
    top: auto !important;
    bottom: 10px !important;
  }
  .pro-mes .pro-ding .back-con h3 { line-height: 1.3 !important; margin: 0 !important; }
  /* 桌面 .free-shi margin-top:40px / 上面通用移动规则 16px 在这块里都偏高, 收到 6px */
  .pro-mes .pro-ding .back-con .free-shi { margin-top: 6px !important; }

  /* ---- 桌面 smartFloat: 滚动超过原位后把图标条设成 position:fixed; top:100px
         (悬浮遮挡正文). 移动端改由 CSS 完成同样的「吸附」, 停在固定头 (64px) 下方 ---- */
  .two-dao-sion.caseMenu {
    position: static !important;      /* 屏蔽 smartFloat 的 fixed / absolute 切换 */
    top: auto !important;
    height: auto !important;
  }
  /* .two-dao 的定位包含块原本是 .pro_banheader (仅 190px 高), 而 sticky 只能在
     包含块内吸附 —— 滚过 190px 就会跟着滚走. display:contents 让 .pro_banheader
     不生成盒子, 包含块上提到 .pro-right (跨越整段产品内容), 吸附才真正生效 */
  .pro-mes .pro-right .pro_banheader {
    display: contents !important;
  }
  .pro-mes .two-dao {
    position: sticky !important;
    top: 64px !important;                        /* 固定头高度 */
    z-index: 9980 !important;                    /* 头部 9990 / 抽屉 9999 之下 */
    width: auto !important;
    height: auto !important;
    margin: 0 -12px 18px !important;             /* 抵消 .pro-mes 的 12px 内边距 → 白底满宽 */
    padding: 4px 12px !important;
    background: #ffffff !important;
    box-shadow: 0 8px 14px -10px rgba(0, 0, 0, 0.25) !important;
    box-sizing: border-box !important;
  }
  .pro-mes .two-dao .two-dao-sion {
    height: auto !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  /* 8 个产品图标: 4 列 × 2 行 —— 一屏看全 8 个, 不需要横向滑动
     (2026-09-18: 6→8 个产品; 图标已由 sprite 改为内联 SVG (.dao-ic),
        高亮态由 JS 切 .ic-on class, 不再有 background-position 约束) */
  .pro-mes .two-dao ul {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }
  .pro-mes .pro-right .pro_banheader ul li,
  .pro-mes .two-dao ul li {
    flex: 0 0 25% !important;
    width: 25% !important;
    height: auto !important;
    float: none !important;
    padding: 8px 0 6px !important;
    box-sizing: border-box !important;
  }
  .pro-mes .two-dao ul .no-border { width: 25% !important; }
  /* 每行第 4 个(4n) 去掉右边框; 前 4 个补一条横向分隔线, 两行之间有分界 */
  .pro-mes .two-dao ul li:nth-child(4n) { border-right: none !important; }
  .pro-mes .two-dao ul li:nth-child(-n+4) { border-bottom: 1px solid #f0f0f0 !important; }
  .pro-mes .two-dao ul li:last-child { border-right: none !important; }

  /* ---- 吸附态: 图标条收成一行 + 横向滑动 ----
     用户要求「吸附时自动收成一行、回滚时展开两行」:
       未吸附(文档流内) = 4 列 × 2 行, 一屏看全 8 个;
       吸附在固定头下方 = 收成单行(每格 30% → 露 3.3 个, 提示可左右滑), 少遮挡正文.
     ⚠️ 高度 247px → 127px 会让文档流回流, 下方内容"跳"一截;
        product.html 的同名脚本给 .two-dao 补上 margin-bottom = 展开高度 − 收行高度,
        使「高度 + 下边距」恒定 → 零跳动. 二者必须成对存在. */
  .pro-mes .two-dao.is-stuck ul {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none;
  }
  .pro-mes .two-dao.is-stuck ul::-webkit-scrollbar { display: none !important; }
  /* li 必须用完整链提高特异性: 原规则 `.pro-mes .pro-right .pro_banheader ul li`
     为 (0,4,2), 同样带 !important → 简写的 `.two-dao.is-stuck` (0,3,2) 压不过它 */
  .pro-mes .pro-right .pro_banheader .two-dao.is-stuck ul li {
    flex: 0 0 30% !important;
    width: 30% !important;
    border-bottom: none !important;                  /* 单行不需要行间分界线 */
    border-right: 1px solid #e1e1e1 !important;      /* 恢复每格竖分隔(桌面原色) */
  }
  .pro-mes .pro-right .pro_banheader .two-dao.is-stuck ul li:last-child {
    border-right: none !important;
  }
  .pro-mes .two-dao .two-dao-sion .bg_ciceleJ { width: 100% !important; height: auto !important; display: block !important; line-height: 21px !important; }
  /* SVG 图标 (原 sprite .dao-bg 已废弃): 44px, 4 列网格内居中 */
  .pro-mes .two-dao ul li .dao-ic {
    display: block !important;
    width: 44px !important; height: 44px !important;
    margin: 0 auto 6px !important;
    border-radius: 11px !important;
    transition: transform .25s ease, box-shadow .25s ease !important;
  }
  .pro-mes .two-dao ul li .dao-ic svg { display: block !important; width: 100% !important; height: 100% !important; }
  .pro-mes .two-dao ul li .dao-ic.ic-on { transform: scale(1.1) !important; box-shadow: 0 5px 12px rgba(5, 100, 245, 0.32) !important; }
  .pro-mes .two-dao ul li .dao-font { font-size: 13px !important; line-height: 1.5 !important; }

  /* ---- 产品行: sale-left / sale-right 单列堆叠 ---- */
  .cell-sale .sale-con {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 0 18px !important;      /* 左右内边距交给 .cell-sale, 避免两边重复叠加 */
    box-sizing: border-box !important;
  }
  .cell-sale .sale-left,
  .cell-sale .sale-right,
  .no-float,
  .no-potion {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
  }
  .cell-sale .sale-right { padding: 0 !important; }
  .cell-sale .sale-left img { width: 100% !important; max-width: 100% !important; height: auto !important; }
  .clear-both { overflow: visible !important; }

  /* ---- 首个产品块 h4 被某条规则撑成 406px (一行「销售」吃掉 400px 空白),
         其余块均为 50px. 归零高度, 与其它块对齐 ---- */
  .cell-sale .sale-con h4,
  .cell-sale h4 {
    height: auto !important;
    line-height: 1.35 !important;
    font-size: 22px !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
  }

  /* ---- 字号/间距收敛 ---- */
  .pro-mes h3 { font-size: 22px !important; }
  .cell-sale h3 { font-size: 18px !important; margin: 14px 0 6px !important; }
  .cell-sale .sale-right p,
  .cell-sale p { font-size: 14px !important; line-height: 24px !important; }
  .cell-sale .top-shou h3 { font-size: 16px !important; }
  .cell-sale .top-shou p { font-size: 14px !important; line-height: 24px !important; }

  /* ---- 「现在开始试用」区: .bgcolor-blue 背景在 pro-god.css 被注释掉, 白字落浅底不可读 ---- */
  .cell-sale.bgcolor-blue {
    background: #00a1e0 !important;
  }
  .cell-sale.bgcolor-blue .sale-con h4,
  .cell-sale.bgcolor-blue .top-shou p,
  .cell-sale.bgcolor-blue .font-color {
    color: #ffffff !important;
  }

  /* ---- 按钮统一 AI 风格: 渐变胶囊 + 柔光投影 ----
     采用全站 AI Design Tokens 的品牌渐变 #0564F5 → #4a7bff → #06bcd4,
     与首页 .all_btn / 抽屉 CTA 保持同一套视觉语言.
     覆盖桌面: .free-shi 的白底灰边、.btn-block 的直角实蓝、.more-more 的纯文字链接 */
  .pro-mes .free-shi,
  .pro-mes .btn-block,
  .pro-mes .more-more {
    display: inline-block !important;
    padding: 9px 24px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    color: #ffffff !important;
    background: linear-gradient(115deg, #0564F5 0%, #4a7bff 50%, #06bcd4 100%) !important;
    border: none !important;
    border-radius: 999px !important;
    box-shadow: 0 4px 14px rgba(5, 100, 245, 0.28) !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
  }
  /* 桌面 .free-shi margin-top:40px 在手机上过于空旷 */
  .pro-mes .free-shi { margin-top: 16px !important; }

  /* 蓝底「现在开始试用」区: 蓝渐变落青蓝底上对比不足 → 反白胶囊, 保证可读;
     两个胶囊之间沿用桌面的 40px 太空, 收到 14px */
  .cell-sale.bgcolor-blue .free-shi {
    background: #ffffff !important;
    color: #0564F5 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18) !important;
    margin-right: 14px !important;
  }

  /* ---- 底部 Tab 轮播区: 桌面 #content 1000×270 固定 + ul 绝对定位 + hover 翻页;
         触屏无 hover, 移动端改为 5 个面板纵向平铺, 全文可读 ---- */
  #content {
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    margin: 0 !important;
  }
  #content ul { position: static !important; width: auto !important; left: 0 !important; }
  #content ul li {
    width: 100% !important;
    float: none !important;
    opacity: 1 !important;
    filter: none !important;
    margin-bottom: 18px !important;
    padding-bottom: 14px !important;
    border-bottom: 1px solid #eee !important;
    box-sizing: border-box !important;
  }
  #content .cont_word {
    width: 100% !important;
    max-width: 100% !important;
    padding: 8px 16px 0 !important;
    box-sizing: border-box !important;
  }
  #content .cont_word h2,
  #content .cont_word h4 { font-size: 19px !important; line-height: 1.5 !important; margin: 18px 0 10px !important; }
  #content .cont_word p { font-size: 15px !important; line-height: 1.85 !important; margin: 0 0 16px !important; }

  /* ---- salefeature 等 890px 容器 ---- */
  .pro-one .salefeature {
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px 14px 28px !important;
    box-sizing: border-box !important;
  }
  .pro-one .salefeature h2 { font-size: 20px !important; }
  .pro-one .salefeature p { font-size: 14px !important; line-height: 24px !important; }

  /* ---- 轮播分页小圆点: 平铺后无需翻页, 隐藏 ---- */
  #footer { display: none !important; }

  /* ---- 右侧悬浮「返回顶部」: 固定 bottom:180px 会一直压住正文, 移动端隐藏 (与首页一致) ---- */
  #back-to-top { display: none !important; }

  /* ---- 图标点击会跳到 #item_x_div; 跳转落点时图标条是「吸附收行」态:
         固定头 64px + 吸附条 127px = 191px, 留 9px 余量 → 200px
         (必须与 product.html 里移动端分支的 con 一致, 否则落点滚不到切换阈值) ---- */
  .pro-mes [id^="item_"] { scroll-margin-top: 200px !important; }
  /* itemDisplay() / window.onscroll 会显示 190px 高的 #item_x_display 占位
     (桌面用来补偿 fixed 悬浮条), 移动端图标条已是 sticky, 占位会留一大块空白 → 恒隐藏 */
  .pro-mes [id$="_display"] { display: none !important; }

  /* ---- 图片行: 去掉 inline 图片底部的基线空隙 ---- */
  .cell-sale .sale-left { line-height: 0 !important; }
}
/* end @media (max-width: 768px) */