@charset "utf-8";
/* ==========================================================================
   天罡官网 · 手机端深度适配  2026-10-30
   --------------------------------------------------------------------------
   本文件是新增的独立样式层，在所有模板里排在 zidingyi.css 之后加载，
   因此同权重规则天然覆盖前面四张表，不必和 45,000 行的主题 css.css 打权重战。

   断点：
     max-width:1199px  → 导航（与 navbar-expand-xl 的折叠断点严格一致）
     max-width:767px   → 正文（表格 / 字号 / 触摸目标 / 侧栏顺序）

   桌面端（≥1200px）不受任何影响：全部规则都在 @media 内。

   回滚方式：删掉模板里 <link ... mobile.css> 这一行即可，零副作用。
   ========================================================================== */

/* ==========================================================================
   一、顶栏与抽屉导航（<1200px）
   ========================================================================== */
@media (max-width: 1199px) {

  /* --- 1.1 横向溢出（已由 css.css 的并行补丁覆盖，本文件不再重复）------
     css.css 2026-10-29 的「手机端追加修复」已在 max-width:767px 里写了
     html,body{overflow-x:hidden} 和 .slick-list{overflow:hidden!important}，
     实测 768~1439 各档 scrollWidth 均等于视口宽，不需要在 1199 档再兜一次。
     这里只在桌面端保留一条零副作用的声明，防止将来那两条被误删时整站可横拖。 */

  /* --- 1.2 顶栏容器宽度 -------------------------------------------------
     daohang.css 的 TG-HDR-V5 给内层容器写死 max-width:1320px!important，
     手机上仍生效，会把整个 nav 撑到 1320 宽。
     另外它把内层容器锁成 flex-wrap:nowrap，导致下面 flex-basis:100% 的抽屉
     换不了行、被挤成一条竖窄条（实测抽屉只有 153px 宽）。必须放开换行。 */
  .js-mega-menu.navbar > .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    flex-wrap: wrap !important;
  }
  .js-mega-menu.navbar > .container > #navBar {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* --- 1.3 抽屉面板 ----------------------------------------------------- */
  #navBar.collapse.show {
    display: block !important;
    flex-basis: 100% !important;
    width: 100% !important;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin: 6px 0 0 !important;
    padding: 0 0 14px !important;
    border-top: 1px solid #e6edf2;
  }

  /* --- 1.4 一级导航：竖排、加粗、分隔线 ---------------------------------
     ⚠ 必须复刻 daohang.css 的完整选择器链（`.js-mega-menu.navbar > .container >
       #navBar > .navbar-nav …`）。它写了 display:flex!important / flex-flow:row!important，
       权重 (1 id,3 class,1 el)；只写 `#navBar > ul.navbar-nav`（1,1,1）压不住，
       实测一级项会仍然横排、二级列表被挤成 211px 宽。 */
  .js-mega-menu.navbar > .container > #navBar > .navbar-nav {
    display: block !important;
    flex-flow: column nowrap !important;
    flex-wrap: wrap !important;
    white-space: normal !important;
    margin-left: 0 !important;
    width: 100% !important;
  }
  .js-mega-menu.navbar > .container > #navBar > .navbar-nav > li {
    display: block !important;
    width: 100% !important;
    flex: 0 0 auto !important;
    float: none !important;
    margin: 0 !important;
    border-bottom: 1px solid #eef2f6;
  }
  .js-mega-menu.navbar > .container > #navBar > .navbar-nav > li > .nav-link {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 15px 6px !important;          /* 15*2 + 16.5*1.4 ≈ 53px ≥ 44 */
    font-size: 16.5px !important;
    font-weight: 700;
    line-height: 1.4 !important;
    color: #1f2d3d !important;
    white-space: normal !important;
    min-height: 44px;
  }
  /* 当前栏目高亮（JS 打 .tg-cur） */
  .js-mega-menu.navbar > .container > #navBar > .navbar-nav > li.tg-cur > .nav-link {
    color: #0085d0 !important;
  }
  /* 下拉箭头：默认朝下，展开后朝上 */
  .js-mega-menu.navbar > .container > #navBar > .navbar-nav > li.hs-has-sub-menu > .nav-link::after {
    flex: 0 0 auto;
    margin-left: 10px !important;
    font-size: 11px !important;
    transition: transform .2s ease;
  }
  .js-mega-menu.navbar > .container > #navBar > .navbar-nav > li.tg-sub-open > .nav-link::after {
    transform: rotate(180deg);
  }
  .js-mega-menu.navbar > .container > #navBar > .navbar-nav > li.tg-sub-open > .nav-link {
    color: #0085d0 !important;
    background: #f4f9fd;
  }

  /* --- 1.5 二级菜单：手风琴（面板内展开，不是浮层） ---------------------
     模板里 .hs-sub-menu 带内联 width:820px/left:50%/transform:translateX(-50%)，
     必须逐条压掉，否则在 375 宽屏上会横向溢出 846px。 */
  #navBar .hs-sub-menu {
    position: static !important;
    display: none !important;               /* 收起态（JS 加 .tg-sub-open 才展开）
                                               daohang.css 有
                                               `.hs-menu-initialized:not(.hs-mobile-state) .hs-sub-menu{display:block!important}`
                                               无 !important 的 display:none 压不住它，实测每项被撑到 984px 高 */
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0 !important;
    padding: 4px 0 10px !important;
    border: 0 !important;
    border-top: 1px solid #e3edf5 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #f5f9fc !important;
  }
  #navBar li.tg-sub-open > .hs-sub-menu {
    display: block !important;
  }
  /* 浮层里的多列 flex 容器 → 单列 */
  #navBar .hs-sub-menu > div {
    display: block !important;
  }
  #navBar .hs-sub-menu > div > div {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    flex: none !important;
    padding: 0 !important;
  }
  /* 二级条目：缩进 + 分隔 */
  #navBar .hs-sub-menu a {
    display: block !important;
    padding: 12px 16px 12px 26px !important;
    border-radius: 0 !important;
    border-bottom: 1px solid #e9f0f6;
    min-height: 44px;
  }
  #navBar .hs-sub-menu > div > div:last-child a:last-child {
    border-bottom: 0;
  }
  #navBar .hs-sub-menu a > span {
    display: block !important;
  }
  #navBar .hs-sub-menu a > span:first-child {
    font-size: 15.5px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    color: #1f2d3d !important;
  }
  #navBar .hs-sub-menu a > span:last-child {
    font-size: 13px !important;
    line-height: 1.55 !important;
    color: #7b8794 !important;
    margin-top: 2px !important;
  }
  #navBar .hs-sub-menu a:active {
    background: #e8f2fa !important;
  }

  /* --- 1.6 抽屉里的关闭条 ---------------------------------------------- */
  /* 抽屉展开后隐藏汉堡按钮：它是 position:absolute + top:50%，
     面板一变高就飘到面板中间，和下面的「关闭」按钮重复且干扰阅读。 */
  .js-mega-menu:has(#navBar.show) .navbar-toggler {
    display: none !important;
  }  #navBar .tg-nav-close {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 6px 12px;
    border-bottom: 1px solid #e6edf2;
    background: #fff;
  }
  /* 抽屉底部的第二条关闭条（脚本插在最后）。二级展开后抽屉很长，
     光靠顶部那条，用户滚到底还得往回滚。 */
  #navBar .tg-nav-close--end {
    border-bottom: 0;
    border-top: 1px solid #e6edf2;
    margin-top: 6px;
    padding-top: 12px;
  }
  #navBar .tg-nav-close > span {
    font-size: 14px;
    color: #6b7a89;
    letter-spacing: .04em;
  }
  #navBar .tg-nav-close > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 76px;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid #cfdbe6;
    border-radius: 22px;
    background: #fff;
    color: #1f2d3d;
    font-size: 15px;
    line-height: 1;
  }
  #navBar .tg-nav-close > button:active {
    background: #eef4f9;
  }
}

/* 桌面端不显示关闭条（双保险，JS 也会跳过注入） */
@media (min-width: 1200px) {
  #navBar .tg-nav-close { display: none !important; }
}

/* ==========================================================================
   二、正文区（<768px）
   ========================================================================== */
@media (max-width: 767px) {

  /* --- 2.1 表格：外层横向滑动，表格本身不被压扁 -------------------------
     generator.normalize() 已经给每张表套了 div.table-responsive（不重复套），
     这里只改这一层的溢出行为 + 给多列表格一个"最小可读宽度"下限。
     实测：/yingyong/4.html 的 6 列表格被压到 291px（每列 ~48px），
     中文一字一行、表格高达 1966px —— 这才叫变形。给下限后改为横向滑动。 */
  .table-responsive {
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .table-responsive > table,
  .col-md-9 table,
  .col-md-6 table {
    width: auto !important;
    min-width: 100% !important;
    max-width: none !important;
  }
  /* 按列数给最小宽度：列越多越宽，保证每列有可读的行宽 */
  .table-responsive:has(table tr > th:nth-child(3), table tr > td:nth-child(3)) > table {
    min-width: 480px !important;
  }
  .table-responsive:has(table tr > th:nth-child(4), table tr > td:nth-child(4)) > table {
    min-width: 620px !important;
  }
  .table-responsive:has(table tr > th:nth-child(5), table tr > td:nth-child(5)) > table {
    min-width: 760px !important;
  }
  .table-responsive:has(table tr > th:nth-child(6), table tr > td:nth-child(6)) > table {
    min-width: 900px !important;
  }
  /* 表格首列（多为型号/指标名）不换行，读起来有骨架 */
  .table-responsive tr > td:first-child,
  .table-responsive tr > th:first-child {
    white-space: nowrap;
  }
  .table-responsive th,
  .table-responsive td {
    word-break: break-word;
  }
  /* 2.1b 可横向滑动的表格给一行提示（只在 ≥3 列、确实会滑的时候出现）
     没有 DOM 可加（表格由 generator.normalize 包好，改模板动不到），
     用 ::before 挂在滚动容器里；会随横向滚动一起滑走，正好只承担"第一眼发现"的作用。 */
  .table-responsive:has(table tr > th:nth-child(3), table tr > td:nth-child(3))::before {
    content: "← 左右滑动可查看完整表格 →";
    display: block;
    width: -webkit-max-content;
    width: max-content;
    max-width: 100%;
    padding: 2px 2px 7px;
    font-size: 12px;
    line-height: 1.5;
    color: #8a9499;
    white-space: nowrap;
  }

  /* --- 2.2 字容 ---------------------------------------------------------
     正文实测多为 14.5px（内联 font-size 写在正文里），必须 !important 才能抬到 16。
     只抬 p / li / dd，不动标题、不动表格里的 th（表头保持紧凑）。 */
  .col-md-9 p,
  .col-md-9 li,
  .col-md-6 p,
  .col-md-6 li,
  .col-md-12 p,
  .col-md-12 li {
    font-size: 16px !important;
    line-height: 1.78 !important;
  }
  /* 正文里的表格单元：可读优先，仍保留表格结构 */
  .col-md-9 .table-responsive td,
  .col-md-6 .table-responsive td,
  .col-md-12 .table-responsive td {
    font-size: 15px;
    line-height: 1.7;
  }
  /* 图片说明这类小字（居中且 ≤13px 的段落）单独保留小一号，避免喧宾夺主 */
  .col-md-9 p[style*="text-align:center"][style*="12px"],
  .col-md-9 p[style*="text-align: center"][style*="12px"] {
    font-size: 13px !important;
    line-height: 1.6 !important;
  }

  /* --- 2.2b 产品详情页：正面接管 product-detail.css 的手机端字容 ---------
     product-detail.css 在 max-width:767px 里写了
       body.tg-pdp #MyContent p { font-size:14.5px !important; line-height:1.85 !important }
     带一个 ID + 一个类 + 两个元素，权重高于上面那条 .col-md-9 p，实测把正文死死钉在 14.5px。
     这里用同样带 ID 的选择器再加一个元素，权重反超，把产品页正文也抬到 16px。
     （表格不动：产品页只有两列规格表，product-detail.css 已按 38%/62% 调好）
     ⚠ 那两条规则里还有
         body.tg-pdp #MyContent > p[style*="font-size:13px"]            (1,2,2)
         body.tg-pdp #MyContent div[style*="f0f5ff"] > p:last-child     (1,3,3)
       分别把「免责声明」和「浅蓝高亮框末段」钉在 12.5px / 14.5px。
       单靠 (1,1,3) 压不住 (1,3,3)，所以把同一个 ID 在同一个元素上重复写两次凑到 2 个 ID。
       （必须是 `#MyContent#MyContent` 这种复合写法；写成后代 `#MyContent #MyContent p`
         会因为页面里只有一个 #MyContent 而一条也匹配不到 —— 踩过一次。） */
  html body.tg-pdp #MyContent#MyContent p,
  html body.tg-pdp #MyContent#MyContent li {
    font-size: 16px !important;
    line-height: 1.78 !important;
  }

  /* --- 2.3 触摸目标 ≥44px ----------------------------------------------- */
  #sidebar-nav a,
  #sidebar-nav .dropdown-item > a.nav-link,
  .col-md-3 #sidebar-nav li > a {
    display: block !important;
    padding-top: 11px !important;
    padding-bottom: 11px !important;
    min-height: 44px;
    line-height: 22px !important;
  }
  .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* 面包屑、正文里的行内链接不必撑到 44（会撑破行距），只保证可点区域不重叠 */

  /* --- 2.3b 页脚链接触摸区 ---------------------------------------------
     页脚是「a|a|a|a」这种行内串（实测每项仅 16px 高）。
     给容器 font-size:0 让竖线分隔符消失，链接各自恢复字号并撑到 44px，
     允许换行，避免把页脚挤成一条。 */
  footer .col-md-4 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: 0;
  }
  footer .col-md-4 > a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 8px;
    font-size: 15px;
    line-height: 1.5;
  }
  /* 底部固定咨询条 .phone-menu0 是 fixed、高 54px、z-index 9999，会盖住文档最后 54px。
     页脚撑高后最后一排链接正好落进去（实测 lastLinkBottom 10466 / docH 10477），
     这里给页脚预留出这条的高度。 */
  footer {
    padding-bottom: 64px;
  }

  /* --- 2.4 侧栏视觉分组（顺序本身由 css.css 的并行补丁负责）-------------
     css.css 已把 .row > .col-md-3:has(> ul#sidebar-nav) 排到正文之后，
     这里只补一个"栏目导航"分组标题和上分隔线，让移到页尾的侧栏不像孤岛。
     ⚠ 顺序规则刻意不在这里重复，避免两个文件各写一份、将来改一处漏一处。 */
  .row > .col-md-3:has(> ul#sidebar-nav) {
    margin-top: 28px;
    padding-top: 6px;
    border-top: 1px solid #e6edf2;
  }
  .row > .col-md-3:has(> ul#sidebar-nav)::before {
    content: "栏目导航";
    display: block;
    padding: 8px 0 4px;
    font-size: 13px;
    letter-spacing: .08em;
    color: #8a9499;
  }
}