/* ==========================================================================
   机器界 · 移动端 App 风格层
   --------------------------------------------------------------------------
   加载顺序：common.css → responsive.css → **mobile-app.css**（本文件，最后）
   作用域：@media (max-width: 768px) —— 桌面端零影响。

   为什么单独一层，而不是改 responsive.css：
     responsive.css 是 39KB 的历史补丁堆，多轮验证过，直接改易引发回归；
     本层用「后加载 + 同特异性」精准覆盖有问题的部分，桌面端完全不受影响。

   本文件解决两类问题：
     A. 布局缺陷（P0）—— 窄屏下 flex/grid 仍横向并排，子项 min-width:auto
        不收缩，按 min-content 宽度撑破容器，导致页面可以横向拖动。
        实测：首页溢出 4931px、商品详情 709px、联系页 171px 等共 8 个页面。
     B. 观感升级 —— 对齐微信小程序 / 主流电商 APP 的移动端规范：
        紧凑标题栏、金刚区快捷入口、卡片网格、44px 触控目标、安全区适配。
   ========================================================================== */

/* ==========================================================================
   A. 布局治理：彻底消除横向溢出
   ========================================================================== */
@media (max-width: 768px) {

  /* ---- A1. 根容器与全局约束 ---- */
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;          /* 最后防线：任何漏网的横向溢出都不产生拖动条 */
    background: #f4f6f9;
    -webkit-text-size-adjust: 100%;   /* iOS 横屏不放大字号 */
    -webkit-tap-highlight-color: transparent;
  }

  /* ---- A2. 核心：flex/grid 子项允许收缩 ----
     min-width:auto 是 flex/grid item 的默认最小尺寸 = 内容最小宽度。
     只要容器里有「不换行的长内容」（如 white-space:nowrap 的机型名、长 URL、
     表格单元格），子项就拒绝收缩，一路把祖先撑到几千 px。
     这一条是本次 8 个页面溢出的统一根因，属治本措施。 */
  .wrap *, .main *, .layout *, .section *, .shop-body *, .news-wrap * {
    min-width: 0;
  }
  .wrap, .main, .layout, .section, .shop-body, .shop-main, .shop-side,
  .article, .goods, .rental, .match, .brands, .sup-grid, .used-list, .sidebar,
  .bomtool, .service, .news-wrap {
    min-width: 0;
    max-width: 100%;
  }

  /* ---- A3. 首页：.section 不是 flex ----
     responsive.css 里有一条「首页所有区块强制可见」的 display:flex !important
     大礼包，它把本该是普通块的 .section 变成了 flex 容器，
     于是 .goods / .used-list / .match 作为 flex item 全部拒绝收缩。
     恢复成 block（同样保证内容可见，但不会撑破布局）。 */
  .section { display: block !important; }

  /* ---- A4. 首页侧栏：类目列表纵向排列 ----
     responsive.css 把 .sidebar 改成 flex-direction:row，导致 .group 里的
     h4 与 ul 并排；ul 又因 li{width:33.33%} 在 flex 上下文里算出一行 620px。 */
  .layout { flex-direction: column !important; }
  .sidebar {
    flex-direction: column !important;
    width: 100% !important;
    padding: 0;
    gap: 0;
    box-sizing: border-box;
  }
  .sidebar .group { width: 100%; display: block !important; }
  .sidebar .group h4 { display: flex; align-items: center; gap: 6px; }
  .sidebar .group ul {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    flex-wrap: initial;
    gap: 2px 0;
  }
  .sidebar .group li { width: auto !important; min-width: 0; }
  .sidebar .group li a { padding: 5px 4px; }

  /* ---- A5. 长文本换行 ----
     .used-item .desc p 原本 white-space:nowrap，在 flex 上下文里贡献巨大的
     min-content 宽度，是首页 5235px 的直接推手。改为两行截断。 */
  .used-item .desc p {
    white-space: normal !important;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
  }
  .used-item .desc h4 { word-break: break-word; }

  /* ---- A6. 表格：自适应不溢出 ----
     sell.php 的验机报告表格固定 4 列，窄屏直接撑破 170px。
     改用 table-layout:fixed 让列宽按容器分配，内容折行。 */
  .inspect-table {
    table-layout: fixed !important;
    width: 100% !important;
  }
  .inspect-table th, .inspect-table td {
    padding: 6px !important;
    font-size: 12px !important;
    word-break: break-word;
    vertical-align: top;
  }
  .inspect-table .i-name, .inspect-table .i-note, .inspect-table .i-status {
    font-size: 12px !important;
    padding: 6px !important;
  }
  .inspect-table thead th:nth-child(1) { width: 34% !important; }
  .inspect-table thead th:nth-child(2) { width: 22% !important; }
  .inspect-table thead th:nth-child(4) { width: 18% !important; }

  /* ---- A7. 表单控件不超出容器 ----
     很多页面用内联 style 写死 padding，窄屏下 box-sizing 不统一会撑破。 */
  input, select, textarea, button { max-width: 100%; box-sizing: border-box; }
  img, video, iframe, table { max-width: 100%; }

  /* ---- A8. 联系方式 / 店铺 / 详情页的并排容器改纵向 ---- */
  .shop-body { flex-direction: column !important; }
  .shop-main, .shop-side { width: 100% !important; flex: none !important; }
  .qrbox { flex-direction: column; align-items: flex-start; gap: 14px; }
  .qrbox img { width: 140px; height: 140px; }

  /* ---- A9. 详情页「正文 + 侧栏」改纵向堆叠 ----
     news-detail 的容器是内联 display:flex，侧栏写死 width:300px + flex-shrink:0。
     ⚠ 这里必须显式改 flex-direction，不能只靠 A2 的 min-width:0：
       并排时 min-width:0 会让正文被侧栏挤到 80px 宽，正文变成一条极窄的竖条，
       页面高度反而从 5.4k 暴涨到 13k（实测踩过）。
       正解 = 窄屏下改为纵向堆叠，正文与侧栏各占满整宽，这也是 APP 详情页的惯例。 */
  .detail-layout { flex-direction: column !important; gap: 12px !important; }
  .detail-layout > * { width: 100% !important; flex: none !important; }
  .detail-layout .article, .detail-layout .detail-aside { width: 100% !important; }

  /* ---- A10. 内联写死的 PC 网格列数：窄屏减少列数 ----
     ⚠ 页面里用内联 style 写死了 PC 布局的列数（如 repeat(4,1fr)），
       移动端媒体查询默认匹配不到（内联优先），4 列在 390px 屏上每列只剩 ~74px，
       卡片标题被裁成两三个字。必须用 !important 覆盖。
       注意 .goods 在 responsive.css 里只覆盖了 `.section .goods`，
       而店铺页的 .goods 不在 .section 内，因此漏网。 */
  .contact-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .faq-cards { grid-template-columns: 1fr !important; gap: 10px !important; }
  /* ⚠ 只覆盖「内联写死列数」的 .goods（店铺页/店铺管理页写死 repeat(4,1fr)）。
     绝不能用 .goods { grid-template-columns: repeat(2,...) !important } 一刀切 ——
     responsive.css 在 480px 段为 .goods 设计了「单列 + 左图右文横向卡」，
     一刀切会把它拉回 2 列，而卡片仍是 flex row（图 120px 占位），
     文字区被压到 27px，标题只剩两三个字（实测踩过这个坑）。 */
  .goods[style*="grid-template-columns"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .mem-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .plan-grid { grid-template-columns: 1fr !important; }
  .svc-flow .flow-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .intro-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .gua-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .spec-grid, .case-grid, .cert-grid, .jf-grid, .shop-info-grid { grid-template-columns: 1fr !important; }
  .case-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  /* rental-grid：common.css 里写死 repeat(4,1fr)，responsive.css 完全没有媒体查询覆盖它。
     390px 屏上每列只剩 80px，租赁卡内容全部挤成一条竖条（卡片高 1248px）。 */
  .rental-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .rental-grid .rcard .cover { height: 170px !important; }

  /* ---- A11. 页签条：横向滚动（APP 常见做法，避免挤成一团） ---- */  .tp-head, .tab-bar, .tabs-panel .tp-head {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    white-space: nowrap;
  }
  .tp-head::-webkit-scrollbar, .tab-bar::-webkit-scrollbar { display: none; }
  .tp-head a, .tab-bar a { flex-shrink: 0; }

  /* ---- A12. rental-hero：左文右图并排 → 纵向，统计项重排 ----
     .rental-hero 是 flex + justify-content:space-between + padding:36px 40px，
     390px 屏上内容区只剩 282px，再被右侧 🤖 大图标挤占，
     .hero-content 只剩 138px，4 个统计项每个被压到 14px 宽（数字与说明全部错行）。 */
  .rental-hero {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 20px 18px !important;
  }
  .rental-hero .hero-content { width: 100% !important; flex: none !important; }
  .rental-hero h2 { font-size: 20px !important; margin-bottom: 6px; }
  .rental-hero .hero-sub { font-size: 13px !important; margin-bottom: 14px; line-height: 1.6; }
  .rental-hero .hero-stats { gap: 6px !important; flex-wrap: wrap; width: 100%; }
  .rental-hero .stat { text-align: left; min-width: 68px; flex: 1 1 0; }
  .rental-hero .stat b { font-size: 18px; }
  .rental-hero .stat span { font-size: 11px; white-space: nowrap; }
  /* 右侧插画改为背景装饰，不再参与布局占位；压到右下角外沿，避免压住 hero 底部的统计数字 */
  .rental-hero .hero-visual {
    position: absolute !important;
    right: -14px;
    bottom: -10px;
    font-size: 64px;
    opacity: 0.18;
    pointer-events: none;
    line-height: 1;
  }

  /* 筛选 chip（成色 / 设备标签）：整体不可拆行，否则末尾「8成新 1」会把数字挤到下一行 */
  .filter-row .opts .opt { white-space: nowrap; }
}

/* ==========================================================================
   B. App 风格视觉层
   ========================================================================== */

/* ---- B0. 金刚区（快捷入口九宫格）—— 小程序标志性组件 ----
   桌面端完全隐藏，仅移动端显示。DOM 由 js/common.js 的 renderHeader() 注入。 */
.mobile-quicknav { display: none !important; }

@media (max-width: 768px) {
  .mobile-quicknav {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px 0;
    background: #fff;
    margin: 10px 12px 0;
    border-radius: 14px;
    padding: 14px 6px 10px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
  }
  .mobile-quicknav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #4b5563;
    text-decoration: none;
    padding: 4px 0;
    line-height: 1.3;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-quicknav a:active { opacity: 0.6; }
  .mobile-quicknav .qi {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    background: linear-gradient(135deg, #eef4ff, #dfeaff);
  }
  .mobile-quicknav a:nth-child(2) .qi { background: linear-gradient(135deg, #e8f7ef, #d6f0e3); }
  .mobile-quicknav a:nth-child(3) .qi { background: linear-gradient(135deg, #fff2e6, #ffe4cc); }
  .mobile-quicknav a:nth-child(4) .qi { background: linear-gradient(135deg, #f3ecff, #e7dcff); }
  .mobile-quicknav a:nth-child(5) .qi { background: linear-gradient(135deg, #e9f0ff, #d9e6ff); }
  .mobile-quicknav a:nth-child(6) .qi { background: linear-gradient(135deg, #fdeef1, #fbdde3); }
  .mobile-quicknav a:nth-child(7) .qi { background: linear-gradient(135deg, #eaf6ff, #d8ecff); }
  .mobile-quicknav a:nth-child(8) .qi { background: linear-gradient(135deg, #f0f4f8, #e2e9f0); }
}

/* ==========================================================================
   C. 移动端观感精细化（小程序 / APP 规范）
   ========================================================================== */
@media (max-width: 768px) {

  /* ---- C1. 顶部标题栏：紧凑吸顶 ---- */
  .header {
    background: #fff;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06);
  }
  .header .wrap { padding: 8px 12px 10px; gap: 8px; }

  /* ⚠ 类名修正：真实 DOM 是 <img class="logo-mark">，
     而 responsive.css 里写的是 `.logo .mark`（另一个类名），从未匹配成功 ——
     所以移动端 logo 一直保持 56px 高（约 130px 宽），首屏被品牌区吃掉一大块。
     这里按真实类名收到 30px（约 70px 宽），接近小程序标题栏比例。 */
  .logo .logo-mark,
  img.logo-mark {
    height: 30px !important;
    width: auto !important;
  }
  .logo .mark { width: 32px; height: 32px; font-size: 18px; }
  .logo .txt b { font-size: 16px; }

  /* 搜索框：胶囊化、浅灰底、去掉粗边框（App 搜索栏观感） */
  .searchbar {
    height: 38px;
    border: none;
    background: #f2f4f7;
    border-radius: 19px;
    padding: 0 2px 0 14px;
    box-shadow: none;
  }
  .searchbar input { font-size: 14px; background: transparent; }
  .searchbar button {
    width: 56px;
    height: 30px;
    border-radius: 15px;
    font-size: 13px;
    align-self: center;
  }

  /* ---- C2. 类目导航条：横向滚动（局部滚动，不撑破页面） ---- */
  .nav .wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav .wrap::-webkit-scrollbar { display: none; }
  .nav .cat-entry { min-width: auto; padding: 0 10px; font-size: 13px; }
  .nav .menu { flex-wrap: nowrap; overflow: visible; }
  .nav .menu a { padding: 0 11px; font-size: 13.5px; }

  /* ---- C2b. 收起顶栏横向菜单，缓解首屏「三层导航」冗余 ----
     移动端原本同时存在三层导航：底部 Tab(5 项) + 金刚区(8 项) + 顶栏菜单(8 项)，
     首屏被导航吃掉了近 140px。这里收起顶栏菜单，只留「全部产业链类目」作为
     完整的类目入口（点开即 .cat-drop 下拉）；其余入口由金刚区、底部 Tab、
     侧滑菜单（☰，含供应商入驻 / 撮合服务等）覆盖，功能无缺失。 */
  .nav .menu { display: none !important; }
  .nav .cat-entry {
    width: 100%;
    justify-content: flex-start;
    padding: 0 14px;
    box-sizing: border-box;
  }
  .nav .cat-entry::after {
    content: "▾";
    margin-left: auto;
    font-size: 12px;
    opacity: 0.7;
  }

  /* ---- C3. 卡片：统一圆角与轻阴影（App 卡片观感） ---- */
  .section { margin-top: 16px; }
  .sec-head { margin-bottom: 10px; align-items: center; }
  .sec-head h3 { font-size: 17px; gap: 6px; }
  .sec-head h3 em {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
  }
  .scroll-hint { font-size: 11px; color: #9aa1ac; }

  /* ---- C4. 触控目标 ≥ 44px（iOS HIG / Material 规范） ---- */
  .mobile-quicknav a,
  .mobile-bottom-nav a,
  .mm-nav a { min-height: 44px; }

  /* ---- C5. 底部 Tab：安全区 + 玻璃拟态 ---- */
  .mobile-bottom-nav {
    background: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid rgba(15, 23, 42, 0.07);
    box-shadow: 0 -2px 14px rgba(15, 23, 42, 0.06);
    padding: 5px 0;
    padding-bottom: max(5px, env(safe-area-inset-bottom));
  }
  .mobile-bottom-nav a { font-size: 11px; gap: 3px; padding: 6px 0; }
  .mobile-bottom-nav a .ico { font-size: 21px; }
  .mobile-bottom-nav a.on { color: #1f6bff; }
  .mobile-bottom-nav a.on::before {
    top: -5px;
    width: 20px;
    height: 2.5px;
  }

  /* ---- C6. 字号下限：辅助文本不低于 11px，正文 13px ----
     .used-card .uc-spec-k 原本 10px（设备参数名，如「身高」「整机净重」），
     在中低端安卓机上几乎看不清，统一抬到 11px。 */
  .used-card .uc-spec-k { font-size: 11px !important; }
  .goods .card .desc p,
  .rcard .desc p,
  .sup-card .tags span { font-size: 12px; }

  /* ---- C6b. 长标题允许断行，避免被裁 ----
     移动端 banner 已在 2026-10-04 从首页移除（见 index.php），
     但桌面端/平板（≥768px）仍渲染 .slide，且各页长标题在窄容器里
     用 break-word + anywhere 更不容易被 overflow:hidden 裁掉。 */
  .slide h2, .slide h1, .slide p, .slide .title {
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* ---- C7. 回到顶部按钮：避开底部 Tab ---- */
  #__backtop, .back-top {
    bottom: calc(66px + env(safe-area-inset-bottom)) !important;
    width: 42px;
    height: 42px;
  }

  /* ---- C8. 页脚：移动端收紧（App 通常弱化页脚） ----
     ⚠️ 这里必须用 padding-top / padding-bottom 分开写，**不能写 padding 简写**：
     responsive.css 给 .footer 预留了 `padding-bottom: max(70px, …safe-area…)`
     用来躲开固定底部 Tab，简写 `padding: 20px 0 8px` 会把它压回 8px，
     导致页脚最后一屏（版权行、备案号）被底部导航整块盖住。 */
  .footer {
    padding-top: 20px;
    padding-bottom: max(72px, calc(72px + env(safe-area-inset-bottom)));
  }
  /* ---- C8b. 页脚 4 组链接：移动端整体隐藏 ----
     2026-10-04：底部 Tab（5 项）+ 首页金刚区（8 项）已覆盖全部高频入口，
     页脚这 4 组（采购服务 / 租赁与二手 / 供应商服务 / 关于我们）共 16 条链接
     在手机上完全重复，还把页脚撑到 727px —— 用户要滚过近一整屏才看到版权行。
     手机端直接不渲染这 4 组，只保留 about 简介区与版权行。
     桌面端不受影响（<dl> 仍在 DOM 与源码里，仅 ≤768px 不显示）。 */
  .footer .cols { gap: 0; }
  .footer .cols dl { display: none !important; }
}

/* ---- C9. 超小屏（< 360px，如 iPhone SE 1 代）进一步收紧 ---- */
@media (max-width: 360px) {
  .wrap { padding: 0 10px !important; }
  .mobile-quicknav { margin: 8px 10px 0; padding: 12px 4px 8px; }
  .mobile-quicknav .qi { width: 40px; height: 40px; font-size: 20px; }
  .mobile-quicknav a { font-size: 11px; }
  .header .wrap { padding: 6px 10px 8px; }
}

/* ---- C10. 商品卡：≤480px 恢复「单列 + 左图右文」 ----
   responsive.css 自身存在特异性冲突：
     · 480px 段  .goods          { grid-template-columns: 1fr }      单列
                 .goods .card     { display:flex; flex-direction:row } 左图右文
     · 768px 段  .section .goods { grid-template-columns: repeat(2,1fr) }  ← 特异性 0,2,0 更高
   两者叠加后，首页商品卡在 390px 屏上变成「2 列网格 + 横向卡」这种从未被设计过的组合：
   卡片仅 177px 宽，图片固定占 120px，文字区只剩 27px，标题只显示两三个字。
   这里把 480px 段的单列设计拉回来，与既有视觉细节（.info 上下分布等）保持一致。 */
@media (max-width: 480px) {
  .section .goods,
  .goods,
  .goods[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   C11. 列表页筛选栏：手机端默认折叠（rental.php / used.php）
   --------------------------------------------------------------------------
   租赁页有 8 行筛选（品类 / 品牌 / 场景 / 计价 / 预算 / 城市 / 租期 / 更多），
   二手页 6 行。390px 屏上整块高度近 700px，首屏被筛选吃满，设备卡片要滚
   两屏才看得到 —— 这是列表页跳出率最高的位置。
   处理：手机端只留一行「⚙️ 筛选 / 排序（已选 n）」，点击展开。
   折叠头 .fbar-mob 由 JS 渲染，桌面端 display:none，桌面行为完全不变。
   ========================================================================== */
.fbar-mob { display: none; }

@media (max-width: 768px) {
  .fbar-mob {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 11px 2px;
    border: 0;
    border-bottom: 1px dashed #f0f1f4;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #123c82;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .fbar-mob:active { opacity: 0.7; }
  .fbar-mob .fbar-mob-t { flex: 1; min-width: 0; }
  .fbar-mob .fbar-mob-n {
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #1f6bff;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
  }
  .fbar-mob .fbar-mob-a { font-size: 12px; font-weight: 400; color: #8a919c; }

  /* 默认收起：筛选行全部隐藏，点开后恢复 flex 纵向排列
     注意只作用于 .collapsible（rental.php / used.php 显式声明的），
     parts.php / suppliers.php 复用了 .filter-bar 但没有折叠头，
     若不加限定会让它们的筛选条在手机上整体消失。 */
  .filter-bar.collapsible .filter-row { display: none; }
  .filter-bar.collapsible.open .filter-row { display: flex; }

  /* 收起的「已选条件」行也用 !important 压过内联 display:none */
  .filter-bar.collapsible:not(.open) #r_chips_row,
  .filter-bar.collapsible:not(.open) #u_chips_row { display: none !important; }
}