/* 九清国内站 · 页头
   视觉语言 1:1 对齐 tesla.cn（2026-08-19 用真浏览器读渲染后 DOM 实测，非凭印象）：
     页头 56px 高 / 全宽 32px 边距 / 菜单项 14px·500·#171a20·圆角 4px
     hover 是 32px 高的小药丸（不是整格变白）/ 过渡 .33s
     下拉是全宽白色面板：阴影 0 8px 16px rgba(0,0,0,.16)，图卡 220×124(16:9)，标题 17px/500
   ⚠️ 本文件是页头 CSS 的唯一副本，不要在别处再放一份。
   ⚠️ 颜色变量继承 footer.css 的 :root，这里绝不再定义一份。
   ⚠️ 面板的 HTML 由 mu-plugin joeqing-nav.php 的 walker 生成（只管桌面端）。 */

/* —— 吸顶条 ——
   特斯拉的页头是 position:relative，随页面滚走。这里保留 sticky：
   国内 B 端站访客滚到深处还要回头找导航，吸顶更实用。这是唯一一处故意不跟特斯拉的地方。 */
/* ⚠️ 页头**默认不固定**，跟着页面滚走。
   实测 tesla.cn（2026-08-27）：只有首页的页头是吸顶的，/model3、/contact 这些内页
   全部是 position:relative / static，滚动时直接走掉。站长 2026-08-27 要求对齐。
   首页的固定行为写在 home.css 的 body.home 规则里（带 !important），不受这行影响。
   产品详情页另有一套（透明压图、absolute），写在 product.css 的 body.jqp-page 里。 */
.site-header,#masthead{position:relative!important;top:auto!important;z-index:9990!important}
/* 登录态要给 WP 管理栏让位。桌面端管理栏是 position:fixed、32px 高，
   页头 top 不让开的话，一滚动页头就钻到管理栏底下 —— 看起来就是「导航栏会动」。
   ⚠️ 这条原来只写在 home.css 里、且限定 body.home，所以**只有首页是对的**，
      其余所有页面（产品页/联系页/定制页…）都在滑。2026-08-26 站长发现后实测确认。
   ⚠️ 只影响登录的人：访客没有管理栏，top:0 本来就对，不要因为这条去动上面那行。
   手机端(≤782px)的管理栏是 46px 且 position:absolute，会跟着页面滚走，所以那里仍然贴 0。 */
/* 管理栏让位只对**固定页头**有意义。页头默认不固定之后，这里不再统一设 top，
   否则不固定的页头会被平白往下推 32px。首页和产品页各自的规则里自己处理。 */

#masthead .main-header-bar,#masthead .ast-primary-header-bar{
  background:#fff!important;
  box-shadow:none!important;border-bottom:0!important;
  padding-top:0!important;padding-bottom:0!important;
}
/* Astra 给 logo 容器加了 16px 上下内边距 —— 这是页头压不到 56px 的真凶（26px logo + 32 = 58）。
   只设 min-height 没用，内容撑着就是撑着。 */
#masthead .site-branding{padding-top:0!important;padding-bottom:0!important}

/* 全宽容器（特斯拉实测：logo 距左边 32px，不是居中容器）。
   .jq-mega 的 left/right:-32px 依赖这里的 32px padding —— 两处要一起改。 */
#masthead .site-primary-header-wrap{
  max-width:none!important;
  padding-left:32px!important;padding-right:32px!important;
  position:relative!important;
}

/* 页头高 56px（特斯拉实测值）。Astra 在多层容器上都设了高，必须一并压掉，
   只改 .menu-link 的话整条页头仍是 60px。 */
#masthead .site-primary-header-wrap,
#masthead .ast-builder-grid-row,
#masthead .site-header-primary-section-right,
#masthead .ast-builder-layout-element{min-height:56px!important;height:auto!important}
#masthead .ast-primary-header-bar,#masthead .main-header-bar{min-height:56px!important}
#masthead .custom-logo{width:120px!important;max-width:120px!important}
#masthead .site-title,#masthead .site-description{display:none!important}
#masthead .site-header-primary-section-right{align-items:center!important}

/* 面板不能被祖先裁掉 */
#masthead,#masthead .ast-primary-header-bar,#masthead .site-primary-header-wrap,
#masthead .ast-builder-grid-row,#masthead .site-header-primary-section-right,
#masthead .main-header-bar-navigation,#masthead .ast-main-header-bar-alignment{overflow:visible!important}

/* —— 一级菜单 —— */
@media(min-width:922px){
  #masthead .main-header-menu>.menu-item{position:static!important;display:flex!important;align-items:center!important;height:56px!important}
  #masthead .main-header-menu>.menu-item>.menu-link{
    height:32px!important;min-height:0!important;padding:0 16px!important;
    display:flex!important;align-items:center!important;
    color:#171a20!important;
    font-size:14px!important;font-weight:500!important;line-height:20px!important;
    letter-spacing:normal!important;border-radius:4px!important;
    text-decoration:none!important;
    transition:background-color .33s,color .33s!important;
  }
  /* 特斯拉：hover 时是「菜单项自己」出一块浅底，页头整条不变 */
  /* ⚠️ 面板展开后药丸要一直亮着。tesla 实测（2026-08-27）：鼠标从「车辆」移进面板里，
     「车辆」那块浅底**不会消失**。只写 .menu-link:hover 的话鼠标一离开文字药丸就灭了，
     面板还开着却没有任何东西指示是哪一项展开的。改成挂在 <li> 上（面板是它的子节点，
     鼠标在面板里 :hover 依然命中），键盘 Tab 进面板时 :focus-within 同理。 */
  #masthead .main-header-menu>.menu-item>.menu-link:hover,
  #masthead .main-header-menu>.menu-item-has-children:hover>.menu-link,
  #masthead .main-header-menu>.menu-item-has-children:focus-within>.menu-link{
    background:rgba(0,0,0,.05)!important;color:#171a20!important;
  }
  #masthead .main-header-menu>.menu-item.current-menu-item>.menu-link,
  #masthead .main-header-menu>.menu-item.current-menu-ancestor>.menu-link{color:#3E6AE1!important}
  /* 当前页仅变色，不加下划线 —— 2026-08-18 试过 2px 下划线，贴在链接框最底、离文字太远，已移除 */
}

/* 一级项现在是 <button>（不跳 /products/ 汇总页，只负责展开面板）。
   浏览器给 button 的默认底色/边框/字体要全部复位成和旁边 <a> 一样；
   箭头只在手机端显示（tesla 桌面顶级项没有任何箭头）。 */
@media(min-width:922px){
  #masthead .main-header-menu>.menu-item>button.menu-link{
    background:none!important;border:0!important;border-radius:4px!important;
    cursor:pointer;font-family:inherit!important;
    /* ⚠️ box-shadow 和 appearance 也必须复位，2026-08-24 实测漏了：
       主题给所有 <button> 挂了 `box-shadow:rgba(0,0,0,.05) 0 1px 2px`，
       于是「产品中心」「应用案例」这两个 <button> 项底下各浮出一个淡淡的方框，
       旁边的「行业资讯」「关于九清」是 <a> 就没有 —— 四个菜单项长得不一样。
       tesla 顶级菜单项没有任何框。 */
    box-shadow:none!important;appearance:none!important;-webkit-appearance:none!important;
  }
  #masthead .main-header-menu>.menu-item>.menu-link .jq-m-chev{display:none!important}
}

/* —— 「产品中心」全宽下拉面板 ——
   定位参照系是 .site-header-primary-section-right（它 absolute 撑满 .site-primary-header-wrap 的内容盒），
   所以 left/right:-32px 正好抵掉容器的 32px padding = 视口满宽。
   用负边距而不是 100vw：100vw 含滚动条宽度，会顶出横向滚动条。 */
@media(min-width:922px){
  #masthead .jq-mega{
    position:absolute!important;top:100%!important;left:-32px!important;right:-32px!important;
    background:#fff!important;
    /* ⚠️ 阴影不能往上糊到页头身上。原值 `0 8px 16px`：模糊半径 16 会向上外扩 8px，
       正好盖在页头底部 —— 实测（2026-08-27，抓图数像素）页头最下面 7px 从 #fff
       变成 249~254 的灰，页头和面板中间因此出现一道分界线。
       tesla 实测同一位置**全程 255**，页头和下拉是一整块连着的白，站长 2026-08-27
       反馈的「导航栏不会变白 / 特斯拉是导航栏与下拉同色」就是这道线。
       -8px 收缩量把阴影矩形四边各缩 8px，抵消模糊的外扩：上边缘落到面板内部被裁掉，
       往下再偏移 12px 让底边照常有影（我们没有 tesla 那层压暗整页的蒙版，
       底边不留影的话面板会和下面的白色正文糊在一起）。 */
    box-shadow:0 12px 16px -8px rgba(0,0,0,.16)!important;
    visibility:hidden;opacity:0;transform:translateY(-6px);
    transition:opacity .2s ease,transform .2s ease,visibility .2s!important;
    z-index:9991!important;
  }
  #masthead .main-header-menu>.menu-item-has-children:hover>.jq-mega,
  #masthead .main-header-menu>.menu-item-has-children:focus-within>.jq-mega{
    visibility:visible;opacity:1;transform:none;
  }
  /* 鼠标从菜单项挪到面板，中间没有空隙：面板顶边紧贴 56px 页头底边，
     且面板是菜单项的 DOM 子节点，:hover 会一直命中父项。 */

  #masthead .jq-mega-in{
    max-width:1224px;margin:0 auto;padding:40px 0 36px;
    display:grid;grid-template-columns:1fr 252px;column-gap:32px;align-items:start;
  }
  #masthead .jq-mega-cards{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 24px;
  }
  #masthead .jq-mega-card{display:flex;flex-direction:column;min-width:0}
  #masthead .jq-mega-thumb{
    display:block;aspect-ratio:16/9;overflow:hidden;background:#f2f4f7;line-height:0;
  }
  /* 2026-08-20：去掉图片 hover 放大。站长实测 tesla 的图卡「图片和产品名都没有 hover 效果」，
     只有下面「了解/定制」两个链接有。原来这里是 transform:scale(1.04)。 */
  #masthead .jq-mega-img{width:100%;height:100%;object-fit:cover;display:block}
  /* 字号 2026-08-20：17px →（小 4px）13px →（站长觉得偏小，再大 2px）**15px**，行高 20。
     15px 比下面「了解/定制」的 14px 大一档，层级正过来了（13px 时反而比链接小，是倒的）。
     tesla 原值是 17px/500，但那是拉丁字母；同字号下中文的视觉重量明显更大，收小更协调。
     行高按比例同步 20→18，不然行距会显得空。
     hover 不变色 —— 对齐 tesla：产品名在它那儿根本不是链接，自然没有 hover 态。
     我们保留可点击（中文站用户习惯点标题进页面），但去掉视觉反馈。 */
  #masthead .jq-mega-title{
    margin:12px 0 4px!important;padding:0!important;
    font-size:15px!important;font-weight:500!important;line-height:20px!important;color:#171a20!important;
  }
  #masthead .jq-mega-title a{color:inherit!important;text-decoration:none!important}
  #masthead .jq-mega-actions{
    display:flex;gap:16px;margin:0!important;padding:0!important;font-size:14px;line-height:20px;
  }
  /* 1:1 抄 tesla 的 .tds-link（2026-08-19 从它的样式表里读出来的原值）：
       常态 #5C5E62 / 400 字重，hover 变 #171a20（--tds-theme-foreground-high-contrast）
       下划线不是 border 也不是 text-decoration，是 box-shadow：
         常态 --tds-link--box-shadow--default: 0 calc(1px + 1px) 0 -1px currentcolor
         hover --tds-link--box-shadow--hover : 0 calc(1px + 2px) 0 -1px currentcolor（线再下移 1px）
       -1px 扩散让线比文字两端各短 1px；currentcolor 让线跟着字一起变色。
       line-height:12px 也是 tesla 的原值，作用是把下划线贴到字底下。 */
  #masthead .jq-mega-actions a{
    color:#5C5E62!important;font-size:14px!important;font-weight:400!important;line-height:12px!important;
    text-decoration:none!important;border-bottom:0!important;
    box-shadow:0 2px 0 -1px currentcolor;
    transition:color .33s ease,box-shadow .33s ease!important;
  }
  #masthead .jq-mega-actions a:hover{
    color:#171a20!important;box-shadow:0 3px 0 -1px currentcolor;
  }

  /* 右列文字链接（特斯拉面板右侧那一竖排，靠 1px 竖线分隔） */
  #masthead .jq-mega-side{
    display:flex;flex-direction:column;gap:16px;
    border-left:1px solid #e8eaed;padding-left:32px;align-self:stretch;
  }
  #masthead .jq-mega-side-link{
    font-size:14px;font-weight:500;line-height:20px;color:#171a20!important;text-decoration:none!important;
    transition:color .2s;
  }
  #masthead .jq-mega-side-link:hover{color:#3E6AE1!important}
}

/* —— 页头右侧链接组（jq-nav-right）——
   walker 把所有带 jq-nav-right 的顶级项合并进同一个 <li>，这里整组绝对定位到容器右边。
   right:0 对齐的是 32px padding 的内边 —— 和 logo 左边距对称，跟特斯拉一致。 */
@media(min-width:922px){
  #masthead .main-header-menu>.jq-nav-right{
    position:absolute!important;right:0!important;top:50%!important;
    transform:translateY(-50%)!important;
    display:flex!important;flex-direction:row!important;align-items:center!important;
    gap:8px!important;height:32px!important;
  }
  /* flex-direction 必须显式写 row：Astra 给 .main-header-menu>li 设了 column，
     不覆盖的话「联系我们」和电话会竖着排成两行（2026-08-19 实测踩到）。 */
  #masthead .jq-nav-right-link{
    display:flex!important;align-items:center!important;height:32px!important;padding:0 12px!important;
    border-radius:4px!important;
    font-size:14px!important;font-weight:500!important;line-height:20px!important;
    color:#171a20!important;text-decoration:none!important;white-space:nowrap!important;
    transition:background-color .33s,color .33s!important;
  }
  #masthead .jq-nav-right-link:hover{background:rgba(0,0,0,.05)!important}
  #masthead .jq-nav-tel{font-variant-numeric:tabular-nums}
}

/* —— 菜单水平居中 ——
   Astra 的页头是 grid：左列 logo，右列 .site-header-primary-section-right。
   菜单在右列里居中 ≠ 在页头里居中（中心会右偏 ~250px）。
   做法：右段绝对定位横跨整个页头容器并内部居中，菜单就真正落在页头中心；
        右侧链接组同样锚定容器右侧（注意 ul 自带 position:relative，必须清成 static，
        否则右侧组会锚到 ul 上 —— 2026-08-18 踩过一次）。
   右侧组是绝对定位、脱离文档流，所以不影响中间 5 项的居中。 */
@media(min-width:922px){
  #masthead .site-header-primary-section-right{
    position:absolute!important;left:32px!important;right:32px!important;top:0!important;bottom:0!important;
    justify-content:center!important;align-items:center!important;
    pointer-events:none!important;              /* 让出下方 logo 的点击 */
  }
  #masthead .site-header-primary-section-right>*{pointer-events:auto!important}
  #masthead .main-header-menu{
    position:static!important;                  /* 清掉 relative，右侧组才能锚到容器 */
    justify-content:center!important;flex:0 1 auto!important;width:auto!important;
  }
}

/* —— 手机端（≤921px）· staging 原样搬来的那一份 ——————————————————————
   ⚠️ 这一整段 2026-08-27 从 footer.css 挪过来的。它一直住在 footer.css 里，
      而 header.css 底下（本段之后）还有一份自己的手机端页头样式，两份**同名选择器**
      互相盖：header.css 后加载，所以谁在 footer.css 里改这五条都不会生效——
        .menu-toggle / .ast-mobile-header-content / #ast-hf-mobile-menu
        / #ast-hf-mobile-menu>.menu-item / >.menu-item>.menu-link
      这是「页头 CSS 只有一个副本」这条铁律被破坏的直接后果。
   ⚠️ 位置不能动：原来的加载顺序是 footer.css 先、header.css 后，所以这一段必须留在
      下面那段「header.css 自己的手机端」**之前**，级联结果才和搬家之前逐条一致。
   （搬家时只删了一条被逐条盖光的死规则：#ast-hf-mobile-menu 的 padding/background。） */
@media(max-width:921px){/* ---------- 触发按钮（staging 原样：42px 白底描边圆角） ---------- */#masthead [data-section="section-header-mobile-trigger"] .menu-toggle{
    display:flex!important;width:42px;height:42px;
    align-items:center!important;justify-content:center!important;
    border:1px solid #e1e5eb!important;border-radius:4px!important;
    background:#fff!important;color:var(--jq-ink)!important;padding:0!important}#masthead [data-section="section-header-mobile-trigger"] .ast-mobile-svg{
    width:20px!important;height:20px!important;fill:var(--jq-ink)!important}#masthead .site-header-primary-section-right{
    display:flex!important;align-items:center!important;margin-left:auto}/* ---------- 下拉面板 ---------- */#masthead .ast-mobile-header-content{
    position:absolute!important;top:100%;left:0;width:100%;
    padding:0 18px 18px!important;border-top:1px solid #edf0f4;
    background:#fff!important;box-shadow:0 18px 35px rgba(18,30,52,.13)!important}#masthead #ast-hf-mobile-menu>.menu-item{
    position:relative!important;border-bottom:1px solid #edf0f4!important;background:#fff!important}/* ---------- 一级菜单项（中文字号 16px，staging 是 15px/Inter） ---------- */#masthead #ast-hf-mobile-menu>.menu-item>.menu-link{
    display:flex!important;height:auto!important;min-height:54px!important;
    align-items:center!important;padding:0 4px!important;
    color:var(--jq-ink)!important;background:#fff!important;
    font-size:16px!important;font-weight:600!important;line-height:1.4!important;
    text-decoration:none!important;white-space:normal!important}#masthead #ast-hf-mobile-menu>.menu-item-has-children>.menu-link{padding-right:60px!important}/* ---------- 二级菜单：缩进、字轻 ---------- */#masthead #ast-hf-mobile-menu .sub-menu{
    display:none!important;padding-left:0!important;margin-left:0!important;
    background:transparent!important;border:0!important;box-shadow:none!important}#masthead #ast-hf-mobile-menu .menu-item.ast-submenu-expanded>.sub-menu{display:block!important}#masthead #ast-hf-mobile-menu .sub-menu .menu-item{border:0!important;background:transparent!important}#masthead #ast-hf-mobile-menu .sub-menu .menu-link{
    display:block!important;min-height:0!important;
    padding:12px 4px 12px 22px!important;
    color:#4b5563!important;background:transparent!important;
    font-size:15px!important;font-weight:400!important;line-height:1.5!important}/* ---------- 展开箭头：Astra 默认藏起来，强制显示且可点 ---------- */#masthead #ast-hf-mobile-menu .ast-menu-toggle{
    display:flex!important;align-items:center!important;justify-content:center!important;
    position:absolute!important;right:0!important;top:0!important;
    width:56px!important;height:54px!important;margin:0!important;padding:0!important;
    color:var(--jq-ink)!important;background:transparent!important;border:0!important;
    cursor:pointer!important;z-index:3!important}#masthead #ast-hf-mobile-menu .ast-menu-toggle svg,
  #masthead #ast-hf-mobile-menu .ast-menu-toggle .ast-arrow-svg{
    width:15px!important;height:15px!important;fill:var(--jq-ink)!important;
    transition:transform .25s ease}#masthead #ast-hf-mobile-menu .menu-item.ast-submenu-expanded>.ast-menu-toggle svg{
    transform:rotate(180deg)}/* Astra 给箭头按钮加了 box-shadow，在白底上显示成一个方框，去掉 */#masthead #ast-hf-mobile-menu .ast-menu-toggle{box-shadow:none!important;outline:none!important}/* Astra 给二级菜单链接塞了个 > 箭头图标，中文菜单里显得杂乱，去掉 */#masthead #ast-hf-mobile-menu .sub-menu .menu-link .ast-icon.icon-arrow{display:none!important}/* 顶部导航栏里那个 span 型下拉标记在手机端多余 */#masthead #ast-hf-mobile-menu .dropdown-menu-toggle{display:none!important}/* ---------- 抽屉里的询价按钮（导航菜单项形态） ---------- *//* ---------- 抽屉里的询价按钮 ---------- */#masthead .ast-mobile-header-content .ast-builder-button-wrap{
    background:#fff!important;padding:18px 4px 4px!important}#masthead .ast-mobile-header-content .ast-custom-button{
    display:flex!important;align-items:center!important;justify-content:center!important;
    width:100%!important;height:48px!important;
    background:var(--jq-blue)!important;color:#fff!important;
    border-radius:4px!important;font-size:16px!important;font-weight:700!important}/* ---------- 面板打开时背景不跟着滚 ---------- */#masthead .ast-mobile-header-content{max-height:calc(100vh - 80px);overflow-y:auto}}@media(max-width:921px) and (prefers-reduced-motion:reduce){#masthead #ast-hf-mobile-menu .ast-menu-toggle svg{transition:none!important}}

/* —— 手机端（≤921px）——
   桌面 walker 不接管手机菜单，这里样式沿用 Astra 原生 <ul><li><a> 结构。 */
@media(max-width:921px){
  #masthead .ast-primary-header-bar{min-height:64px!important}
  #masthead .custom-logo{width:120px!important;max-width:120px!important}
  #masthead .site-primary-header-wrap{padding-left:18px!important;padding-right:18px!important}
  #masthead [data-section="section-header-mobile-trigger"] .menu-toggle{
    display:flex!important;width:42px;height:42px;align-items:center;justify-content:center;
    border:1px solid #e1e5ec!important;border-radius:4px!important;background:#fff!important;
  }
  #masthead .ast-mobile-header-content{
    position:absolute!important;top:100%;left:0;width:100%;
    padding:0 18px 18px!important;border-top:1px solid #edf0f4!important;
    background:#fff!important;box-shadow:0 14px 30px rgba(15,22,36,.12)!important;
  }
  #masthead #ast-hf-mobile-menu{padding:8px 0!important;background:#fff!important}
  #masthead #ast-hf-mobile-menu>.menu-item{border-bottom:1px solid #edf0f4!important;background:#fff!important}
  #masthead #ast-hf-mobile-menu>.menu-item:last-child{border-bottom:0!important}
  #masthead #ast-hf-mobile-menu .menu-link{
    display:flex!important;min-height:54px!important;align-items:center!important;
    padding:0!important;color:var(--jq-ink,#0b0f17)!important;
    font-size:15px!important;font-weight:600!important;
  }
  /* 2026-08-22 删：这里原本有两条给 Astra 默认二级菜单（.sub-menu）写的样式。
     8/20 上了自定义手机二级面板（JQ_Nav_Walker 的 .jq-m-panel）之后，
     walker 只在 depth>0 才输出 .sub-menu —— 我们没有三级菜单，所以永远不渲染。 */
  /* 电话项在手机上最该点，给它一点视觉重量 */
  #masthead #ast-hf-mobile-menu>.jq-nav-tel>.menu-link,
  #masthead #ast-hf-mobile-menu>.menu-item.jq-nav-tel>.menu-link{color:#3E6AE1!important}
}


/* ================================================================
   移动端全屏菜单（2026-08-20，照站长给的 tesla 手机版截图做）
   tesla 手机版菜单的特征：整屏白面板 / 无分隔线 / 大间距 / 左对齐 / 一级项右侧是 ">" 而不是 "⌄"
   ⚠️ 放在文件末尾，才能盖掉上面 @media(max-width:921px) 里的旧抽屉样式。
   ================================================================ */
@media(max-width:921px){

  /* 面板铺满整屏（原来是往下推的下拉条，只盖住屏幕上面 55%） */
  #masthead .ast-mobile-header-content{
    position:fixed!important;left:0!important;right:0!important;top:0!important;bottom:0!important;
    width:100%!important;height:100%!important;max-height:none!important;
    margin:0!important;padding:0!important;
    background:#fff!important;box-shadow:none!important;border-top:0!important;
    z-index:99998!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch;
  }
  /* 顶栏（logo + 关闭 X）必须压在面板之上，否则面板盖住 X 就关不掉了 */
  #masthead .ast-mobile-header-wrap .ast-primary-header-bar{position:relative!important;z-index:99999!important}
  body.admin-bar #masthead .ast-mobile-header-content{top:46px!important;height:calc(100% - 46px)!important}

  /* 菜单项：tesla 是大间距 + 无分隔线 + 左对齐 28px */
  /* padding-top 必须让开顶栏（64px）+ 呼吸空间，否则第一项「产品中心」会被顶栏压住
     （2026-08-20 实测：菜单项 y=86-154，顶栏 y=92-156，重叠 62px）。 */
  #masthead #ast-hf-mobile-menu{padding:104px 28px 48px!important;background:#fff!important}
  #masthead #ast-hf-mobile-menu>.menu-item{border-bottom:0!important;background:transparent!important}
  #masthead #ast-hf-mobile-menu>.menu-item>.menu-link{
    min-height:68px!important;padding:0!important;
    font-size:17px!important;font-weight:600!important;color:#171a20!important;
  }


  /* 电话项保持强调色 */
  #masthead #ast-hf-mobile-menu>.menu-item.jq-nav-tel>.menu-link{color:#3E6AE1!important}
}



/* ================================================================
   手机端二级面板（2026-08-20，方案 B：真正滑到另一屏）
   结构由 joeqing-nav.php 的 walker 生成，滑动行为在 header.js。
   对齐 tesla 手机版第二屏：顶部「‹ 标题」，下面是「图在左、文字在右」的横向卡片，
   最后一条分隔线 + 次级文字链接。
   ================================================================ */
@media(max-width:921px){

  /* 一级项：有子菜单的现在是 <button>，要和旁边的 <a> 长得一样 */
  #masthead #ast-hf-mobile-menu>.menu-item>.jq-m-more{
    display:flex!important;align-items:center!important;justify-content:space-between!important;
    width:100%!important;min-height:68px!important;padding:0!important;margin:0!important;
    background:none!important;border:0!important;border-radius:0!important;cursor:pointer;
    box-shadow:none!important;appearance:none!important;-webkit-appearance:none!important;
    text-align:left!important;font-family:inherit!important;
    font-size:17px!important;font-weight:600!important;color:#171a20!important;
  }
  #masthead #ast-hf-mobile-menu .jq-m-chev{display:flex;align-items:center;opacity:.45}

  /* —— 二级面板：默认在屏幕右侧外，加 .is-open 才滑进来 ——
     用 position:fixed 脱离一级列表的滚动容器。
     ⚠️ 祖先若有 transform 会让 fixed 失效，改这块前先确认没人给菜单容器加 transform。 */
  #masthead .jq-m-panel{
    position:fixed;left:0;right:0;top:0;bottom:0;
    background:#fff;z-index:99998;
    padding-top:64px;                 /* 让开顶栏（logo + ✕ 那条，z-index 99999 在更上层） */
    transform:translateX(100%);visibility:hidden;
    transition:transform .3s cubic-bezier(.4,0,.2,1),visibility .3s;
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  }
  body.admin-bar #masthead .jq-m-panel{top:46px}
  #masthead .jq-m-panel.is-open{transform:none;visibility:visible}

  #masthead .jq-m-head{
    display:flex;align-items:center;height:56px;padding:0 16px;
    border-bottom:1px solid #edf0f4;
  }
  #masthead .jq-m-back{
    display:flex;align-items:center;justify-content:center;
    width:40px;height:40px;margin-left:-8px;flex:0 0 40px;
    background:none;border:0;padding:0;color:#171a20;cursor:pointer;
  }
  #masthead .jq-m-head-title{
    flex:1;text-align:center;margin-right:40px;   /* 40px 抵掉左边返回键，标题才真居中 */
    font-size:16px;font-weight:600;color:#171a20;
  }

  /* —— 横向卡片：图在左、文字在右 —— */
  #masthead .jq-m-cards{padding:8px 20px 20px}
  #masthead .jq-m-card{display:flex;align-items:center;gap:16px;padding:14px 0}
  #masthead .jq-m-thumb{
    display:block;flex:0 0 128px;aspect-ratio:16/9;
    overflow:hidden;background:#f2f4f7;line-height:0;
  }
  #masthead .jq-m-thumb img{width:100%;height:100%;object-fit:cover;display:block}
  #masthead .jq-m-body{flex:1;min-width:0}
  #masthead .jq-m-title{
    margin:0 0 8px!important;padding:0!important;
    font-size:16px!important;font-weight:600!important;line-height:1.3!important;color:#171a20!important;
  }
  #masthead .jq-m-title a{color:inherit!important;text-decoration:none!important}
  /* 「了解 / 定制」和桌面图卡用同一套 tesla .tds-link 规格 */
  #masthead .jq-m-actions{
    display:flex;gap:16px;margin:0!important;padding:0!important;
    font-size:14px;line-height:12px;
  }
  #masthead .jq-m-actions a{
    color:#5C5E62!important;font-weight:400!important;text-decoration:none!important;
    box-shadow:0 2px 0 -1px currentcolor;
  }

  /* —— 次级文字链接（全部产品 / 应用案例 / 定制咨询）—— */
  #masthead .jq-m-sec{
    display:flex;flex-direction:column;gap:20px;
    margin:8px 20px 0;padding:24px 0 40px;border-top:1px solid #edf0f4;
  }
  #masthead .jq-m-sec-link{
    font-size:15px;font-weight:500;color:#171a20!important;text-decoration:none!important;
  }
}