/* ============================================================
   本项目补充样式（不改动原站 style.css / ui.css）
   只做必要的少量修正
   ============================================================ */

/* 当前栏目高亮。
   注意：原站 style.css:367 有一条"裸"的通用规则
       .active { padding:2px 6px; margin-right:3px; font-weight:bold; color:#fff !important; }
   它是给原站别的组件用的，但带 !important，会盖过 #menu a{color:#000}。
   于是导航项一旦带上 class="active"，就变成"白字 + 白底"，整项看不见。
   这里显式改回"红底白字"（与 #menu li:hover > a 的悬停态一致），
   并把那条规则附带的 padding / margin / 加粗一并抹掉，保证 9 项仍然等宽排成一行。 */
#menu > li > a.active {
    color: #fff !important;
    background: #a21f29;
    padding: 0;
    margin-right: 0;
    font-weight: normal;
}

/* 原站 #menu{width:1200px;margin:0 auto}，但父级 .dh 只有 1000px。
   9 个菜单项每项 #menu a{width:110px;padding:0 6px} 即 122px，共 1098px：
   在原站的 1200px 里能排成一行，却让 <ul> 从 .dh 左边缘向右多撑出 200px。
   视口 >=1810px 时看不出来，窄屏（如 1440/1366）整站就会出现横向滚动条。
   这里把 ul 收进 .dh 的 1000px，并把单项内容宽 110 → 99px（加左右各 6px 内边距共 111px），
   9 x 111 = 999px 恰好排满一行，既不换行也不再溢出。 */
#menu { width:1000px; }
#menu a { width:99px; }

/* 首页轮播 / 内页横幅 / hf2 通栏：统一改成"等比缩放、窄屏整张可见"的响应式画法。
   三张首页 banner 已事先裁成 1920x300，内页横幅与 hf2.png 也是 1920 宽的整图。
   规则：
     · 容器宽度 < 1920 —— 图片按容器宽度等比缩小，整张内容都看得到（不会左右被裁）；
     · 容器宽度 > 1920 —— 保持 1920 原始尺寸水平居中，宽屏两侧留白。
   首页轮播原来是 width:100% + object-fit:cover（宽屏放大铺满、窄屏左右裁切），
   内页 .nybanner 原来是 background 无 background-size（按 1920 原尺寸居中，窄屏照样裁切），
   两者在窄屏都会"看不全"，这里一并修掉。 */
#owl-demo { height:auto; }
.owl-carousel a { height:auto; }
#owl-demo .item a { display:block; width:100%; }
#owl-demo .item img { display:block; width:100%; max-width:1920px; height:auto; margin:0 auto; }
/* style.css:78 有一条全局的 `.item{height:700px}`（原站给 700px 大图用的），
   owl 的每个轮播项都叫 .item，会把 300px 高的图撑成 700px 的空白盒 —— 一并改回 auto。 */
#owl-demo .item { height:auto; }
#owl-demo .owl-wrapper-outer { height:auto; }

/* .nybanner 是背景图写法，用 aspect-ratio 把容器高度绑到 1920:300，
   background-size:100% auto 让图随容器等比缩放 —— 这样窄屏也整张可见。
   选择器写成 div.nybanner 是为了压过 style.css 里 .nybn1~.nybn7 的 background 简写
   （简写会把 background-size 重置成 auto，同优先级下必须靠更高特异性取胜）。 */
div.nybanner {
    width:100%; max-width:1920px; margin:0 auto;
    height:auto; aspect-ratio:1920 / 300;
    background-size:100% auto; background-position:center center;
}

/* .hf2 是 1920x280 的整图背景（图内已印有"研发+生产+销售"文案），容器内不放内容。
   原站 .hf2{margin-top:-80px} 是让它压在 700px 大图的下沿；轮播降到 300px 后
   这个 -80px 会吃掉大图四分之一，故取消上移，改为紧接轮播下方，并同样做等比响应式。 */
div.hf2 {
    width:100%; max-width:1920px; margin:0 auto;
    height:auto; aspect-ratio:1920 / 280;
    background-size:100% auto; background-position:center center;
    overflow:hidden;
}

/* ------------------------------------------------------------
   以下三处是原站 style.css 的书写笔误导致声明失效，这里按原设计意图补回。
   ------------------------------------------------------------ */

/* 原站：div.orbit-wrapper{ width:1000x; } —— "1000x" 不是合法长度，整条声明被浏览器丢弃，
   宽度退化为 auto（等于整屏）。而 div.slider-nav span 是 position:absolute，
   以 .orbit-wrapper 为包含块用 left:-120px / right:-105px 定位，
   结果左右两个箭头被甩到屏幕外看不见。这里补上与 orbit.js 的 sceneWidth 一致的 1060px。 */
.zzrybg .orbit-wrapper { width:1060px; }
/* 扇形三层的定位会超出场景范围，避免撑出横向滚动条 */
.zzrybg { overflow:hidden; }

/* 原站：.xwdt2{ width:730; float:right; } —— 漏写 px，宽度声明被丢弃。
   配合 .xwdt1{width:420px}，420+730=1150 正好落在 .xwdt{width:1200px} 内，
   可见原意就是 730px；且 .leaderboard__profile 本身写死 width:730px。 */
.xwdt2 { width:730px; }
/* 新闻卡片（.leaderboard 这套 class 原站是从别处拷来的组件）：
   原规则 .leaderboard__value{color:#35d8ac;font-size:34px} 会把日期渲染成巨大的青绿色数字，
   实测文本宽 220px，远超过 grid 1fr:3fr:1fr 分给它的 146px 列宽，于是折行/溢出。
   参考截图里这一栏其实是「小号深灰日期 + 红色"查看详情"」上下两行，
   中列是「标题 + 灰色两行摘要」。这里按参考截图重排三列。 */
.leaderboard { max-width: none; }   /* 原站 max-width:490px 会把 730px 的卡片压窄 */
.leaderboard__profile {
    grid-template-columns: 140px 1fr 130px;   /* 缩略图 | 标题+摘要 | 日期+查看详情 */
    height: auto;
    min-height: 134px;
    padding: 12px 20px 12px 0;
    box-sizing: border-box;
}
/* 缩略图按 125x110 的框裁剪，不拉伸。
   列表页原来把 cover_image 为空时的兜底写成 1920x300 的栏目横幅 /image/xwzx.jpg，
   被塞进 125x110 的框里就成了一条 15px 的竖条 —— 现已由 V5 迁移给每篇文章补上封面图。 */
.leaderboard__picture { object-fit: cover; background: #f2f2f2; }
.leaderboard__name {                 /* 中列容器：抹掉原来的 20px 蓝灰大字 */
    color: inherit;
    font-size: inherit;
    font-weight: normal;
    margin-left: 12px;
    min-width: 0;
}
.news-card-title {
    display: block;
    font-style: normal;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    line-height: 22px;
    margin-bottom: 6px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.news-card-desc {
    display: block;
    font-style: normal;
    font-size: 13px;
    color: #999;
    line-height: 20px;
    max-height: 40px;                       /* 最多两行 */
    overflow: hidden;
}
.leaderboard__value {                /* 右列容器：日期 + 查看详情 */
    display: block;
    color: #333;
    font-size: 15px;
    font-weight: normal;
    text-align: right;
    line-height: 20px;
}
.news-card-date { display: block; font-style: normal; white-space: nowrap; }
.news-card-more { display: block; font-style: normal; color: #a21f29; margin-top: 12px; }
/* 原站 hover 是 transform:scale(1.2)，这是给小组件设计的，用在 730px 的大卡片上会
   放大到 876px 压住相邻卡片。改成轻微上浮的阴影。 */
.leaderboard__profile:hover {
    transform: none;
    box-shadow: 0 8px 18px -6px rgba(51, 51, 51, .35);
}

/* 新闻大图：/picture/xw.jpg 为 420x210，铺满 .vid{width:420px;height:235px} */
.vid img { display:block; width:100%; height:100%; }

/* ------------------------------------------------------------
   Logo 区
   原站素材 image/logo1.png 上直接压着网址水印（"www.yuchuangdianqi.cn" 横穿
   "宇创电气"四个字），且字标在 280px 画布右侧被切掉。这里改为：
   左 = image/logo-mark.png（从原站 banner 里抠出的干净圆形标记，透明底），
   右 = 用 HTML 文字渲染的字标，任何 DPI 下都清晰。
   下面这几条把 .logo 内部高度压到 53px，好把原站那句 slogan 放回 80px 盒子的下半部分。
   ------------------------------------------------------------ */
.logo a { display:block; width:280px; height:53px; }
.logo .logo-mark { float:left; margin:0 10px 0 2px; border:0; }
.logo .logo-text {
    float: left;
    font: bold 36px/53px "Microsoft YaHei", "微软雅黑", "PingFang SC", "Hiragino Sans GB",
          "Noto Sans CJK SC", "Source Han Sans SC", "WenQuanYi Micro Hei", "Heiti SC", sans-serif;
    color: #1a1a1a;
    letter-spacing: .5px;
    white-space: nowrap;
}
/* 原站 .logo p{font-size:14px;margin-top:-20px;margin-left:90px} 是为"字标画在图片里"设计的，
   现在字标是 HTML 元素，slogan 改成紧贴下方、与字标左对齐。
   限宽 176px（约 13 个汉字）是为了让"为客户提供优质的科技产品及解决方案"断成
   "为客户提供优质的科技产品及" / "解决方案"，而不是把最后两个字单独挤到第二行。 */
.logo p { margin-top: 0; margin-left: 79px; font-size: 13px; line-height: 15px; width: 176px; }

/* ------------------------------------------------------------
   内页侧栏（fragment/sidebar.html，按页面类型组装：product/about/news/case/faq/recruit/contact）
   .pro_fl_tt 是红底标题块，且用 :before/:after 画了双层红边框；
   导航 <ul> 必须是它的兄弟节点（放在里面会被当成标题内容）。
   片段内用 <th:block th:if> 分支包裹「标题 + ul」，th:block 不渲染成元素，
   所以 .pro_list_le > ul 在输出里依然成立。
   .x_bottom span 只给"联系方式"标题用，正文的值用 <b>，否则会变成红底白字大色块。
   ------------------------------------------------------------ */
.pro_list_le > ul { margin-top: 10px; }
.pro_list_le .x_bottom b { font-weight: normal; }

/* ------------------------------------------------------------
   产品详情页「产品概述 / 功能特点 / 技术参数」标签页
   参考截图里这是一条通栏的三等分标签条：当前项红底白字并向下带一个小三角，
   未选中项浅灰底深灰字。原来只写了三个 <span> 且没有任何脚本，点了没反应。
   ------------------------------------------------------------ */
.pro-tabs { display: flex; margin: 0; padding: 0; list-style: none; background: #f5f5f5; }
.pro-tabs > li {
    flex: 1;
    position: relative;
    padding: 16px 0;
    text-align: center;
    font-size: 16px;
    color: #666;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}
.pro-tabs > li:hover { color: #a21f29; }
.pro-tabs > li.on { background: #a21f29; color: #fff; font-weight: bold; }
.pro-tabs > li.on:hover { color: #fff; }
/* 选中项下方的小三角，指向内容区 */
.pro-tabs > li.on::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -9px;
    margin-left: -9px;
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 9px solid #a21f29;
}
.pro-tab-panel { display: none; padding: 28px 6px 6px; font-size: 15px; line-height: 30px; color: #444; }
.pro-tab-panel.on { display: block; }
.pro-tab-panel table { width: 100%; border-collapse: collapse; margin-top: 4px; line-height: 24px; }
.pro-tab-panel table td { padding: 10px 12px; border: 1px solid #eaeaea; }
.pro-tab-panel table td:first-child { width: 200px; background: #fafafa; color: #666; }

/* ------------------------------------------------------------
   人才招聘：职位行展开/收起
   style.css:301-327 里 .recruit-box 的折叠样式是原站留下的（.item-bd{display:none}、
   .active .item-hd{红底白字}、.active .arrow::before 等），但移植到本项目时
   丢了 .item 容器、.item-bd 详情面板、职位详情数据和点击脚本，
   于是行尾那个“+”只是个摆设，点上去没有任何反应（也没有可展开的内容）。
   模板已补齐结构，这里补两件事：
     1) 展开态：style.css 只写了 .active .item-bd 的边框，没写 display:block，需补；
     2) 列文字颜色：原来用行内 style="color:#666" 写在 <span> 上，
        而行内样式优先级高于任何非 !important 选择器，
        会让 .active .item-hd{color:#fff} 失效（展开后白字变不回来），
        因此把颜色/字号收到这里的规则里，由 .active 控制。
   注：箭头那个 \e728 字形来自 iconfont.css 的 .icon-plus-minus，
   但本页并未引入 iconfont.css（全站模板都没用 iconfont 类），
   所以展开态用文本“−”而不是图标字形。 */
.recruit-box .item-hd > span { font-size: 14px; color: #666; }
/* style.css:78 有一条全局的 `.item {display:block;width:100%;height:700px}`（原站给 700px 大图用的）。
   招聘行的折叠单元也叫 .item，不做处理的话每行会被撑到 700px（内容只有 53px，其余全是空白）。
   与 index 首页轮播处的 `#owl-demo .item{height:auto}` 是同一类冲突。 */
.recruit-box .item { height: auto; min-height: 0; }
.recruit-box .item-hd > span:first-child { font-size: 15px; }
.recruit-box .item.active .item-hd > span { color: #fff; }
.recruit-box .item.active .item-bd { display: block; }
.recruit-box .item-hd:focus-visible { outline: 2px solid #a21f29; outline-offset: -2px; }

.recruit-box .item-bd { font-size: 14px; line-height: 26px; }
.recruit-box .job-block + .job-block { margin-top: 18px; }
.recruit-box .job-block h4 {
    margin: 0 0 10px;
    padding-left: 10px;
    border-left: 3px solid #a21f29;
    font-size: 15px;
    line-height: 1.2;
    font-weight: bold;
    color: #a21f29;
}
.recruit-box .job-block ul { margin: 0; padding-left: 26px; list-style: disc; }
/* list-style 必须写在 li 上：全站有一条 `li { list-style: none }`（ui.css/style.css 的列表重置），
   它直接作用在 li 上，会盖掉从 ul 继承来的 disc —— 只在 ul 上写 disc 是看不到项目符号的。 */
.recruit-box .job-block li { list-style: disc; margin: 4px 0; color: #666; }

/* ------------------------------------------------------------
   在线留言页（/message）的询价表单排版
   原站 .form-inner 是 float + 写死像素宽：.item 宽 50%（920 下即 460px），
   而 label 60px + span 固定 385px + 左右内边距 40px = 485px —— 一项就超过 460px，
   于是每个字段各占一整行，提交按钮还被浮动挤到第一行右侧的空白里。
   style.css 里那些 :nth-last-child 规则是按“.form-inner 里只有 item”写的，
   而实际结构里按钮和 .clear 也在里面，所以完全没生效。
   这里保持原意（前 4 项两列、留言整行、按钮居中），改用 grid 自适应宽度。 */
.message-form .form-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 30px;
    row-gap: 14px;
    padding: 10px 0;
}
.message-form .form-inner .item {
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: flex-start;
}
.message-form .form-inner .item label { float: none; flex: 0 0 76px; width: 76px; line-height: 42px; }
.message-form .form-inner .item span { float: none; flex: 1 1 auto; width: auto; min-width: 0; }
.message-form .form-inner .item:nth-child(5) { grid-column: 1 / -1; }   /* “您的留言”整行 */
.message-form .form-inner .form-button { float: none; grid-column: 1 / -1; margin: 12px auto 4px; width: 150px; }
.message-form .form-inner > .clear { display: none; }                   /* grid 下不需要清浮动 */

/* ============================================================
   响应式布局层
   ------------------------------------------------------------
   问题：原站全部容器写死像素宽（.tp/.hf1/.xinwen/.xwdt/.dbdh/.footer 1200px、
   .daoh/.cp1/.main 1300px、.index_rexiao 1115px、.cplb 1000px、.nr 900px …），
   且 style.css 第 5 行 html{overflow-x:hidden} 把横向滚动条禁掉 ——
   窗口变窄时右侧内容被直接裁掉，连滚动条都没有。
   方案：页面宽度跟随窗口自适应：
     · ≥1200px      ：容器 max-width 保持原值，观感与原布局一致；
     · <1200px      ：容器收缩为窗口宽（两侧留 15px 留白），内部栏改百分比；
     · ≤992px       ：左右分栏（侧栏+内容、首页新闻两栏）堆叠为单列；
     · ≤860px / 700px：模板里按内联样式写的两栏、卡片网格逐级变 1 列。
   本层位于 site-fix.css 末尾：加载顺序在 style.css / ui.css 之后，
   同优先级规则以后加载者胜出；原站少数 !important 规则
   （如 @media(min-width:600px){#menu{display:block !important}}）
   用同样带 !important 的规则压住。
   ============================================================ */

/* 1) 兜底：恢复横向滚动能力。布局改流体后正常情况不再溢出，
      万一个别插件（如旧轮播脚本）仍按固定像素定位，至少能看到滚动条而不是被裁掉。 */
html { overflow-x: auto; }

/* 2) 页宽容器：写死 px → max-width + 两侧留白。
      box-sizing 让 15px 内边距计入 max-width，不会撑出滚动条。 */
.tp, .xwdt {
    width: auto;
    max-width: 1200px;
    box-sizing: border-box;
    padding-left: 15px;
    padding-right: 15px;
}
.main {
    width: auto;
    max-width: 1300px;
    box-sizing: border-box;
    padding-left: 15px;
    padding-right: 15px;
}
.cp1 {
    width: auto;
    max-width: 1300px;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
}

/* 3) 顶部导航：logo + 菜单改 flex，菜单项不再写死 99px，
      窗口变窄时自动收缩、放不下再换行（取代此前“收进 1000px”的定宽画法）。 */
.daoh {
    width: auto;
    max-width: 1300px;
    box-sizing: border-box;
    padding: 35px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0 24px;
}
.logo, .dh { float: none; }
.dh {
    width: auto;
    flex: 1 1 480px;
    min-width: 0;
    padding: 12px 0;
}
/* style.css 的 @media(min-width:600px){#menu{display:block !important}} 带 !important，
   这里必须同样加 !important。菜单始终可见（原站 600px 以下的折叠菜单没有触发按钮，
   照搬会导致手机上无导航可点）。 */
#menu {
    display: flex !important;
    flex-wrap: wrap;
    align-items: flex-start;
    width: 100%;
    max-width: 1000px;
    margin-left: auto;
}
#menu li { float: none; flex: 0 1 auto; }   /* 紧凑排列、放不下自然换行，而非拉开均分整行 */
#menu a {
    float: none;
    width: auto;              /* 覆盖本文件前部“9 项各 99px”的定宽画法 */
    padding: 0 4px;
    font-size: 16px;
    white-space: nowrap;
}
#menu ul a { padding: 0; }    /* 下拉子菜单保持原样（160px 宽、无内边距） */

/* 4) 内页主布局：.zl 320px / .yr 920px → 24% / 72.5%（.main 内宽 1270 时 ≈ 305/920，与原值几乎一致） */
.zl { width: 24%; box-sizing: border-box; }
.yr { width: 72.5%; min-width: 0; box-sizing: border-box; }
.pro_list_le { width: auto; margin-left: 0; }
.pro_list_le .pro_fl_tt ul { width: auto; }
.daohang1 { width: auto; max-width: 238px; }
/* 产品列表右栏：原 1000px 比父级 .yr（920px）还宽 80px，正是截图里右列被裁掉的原因 */
.cplb { float: none; width: 100%; min-width: 0; }
/* 产品卡片：内联样式 width:300px 用 !important 压成 3 等分流体列；
   ul 置 font-size:0 消除 inline-block 之间的空白字符，保证 3 列精确铺满。 */
.yr .cplb ul { font-size: 0; }
.yr .cplb ul li {
    display: inline-block;
    width: calc(33.333% - 20px) !important;
    margin: 0 20px 30px 0 !important;
    box-sizing: border-box;
    font-size: 14px;
    vertical-align: top;
}

/* 5) 首页产品区 .cp1：左侧推荐栏目 + 右侧产品网格改 flex 两栏 */
.cp1 { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 24px; }
.cp1 > .pro_list_le { float: none; flex: 0 0 280px; margin-left: 0; box-sizing: border-box; }
.cp1 > .cplb { float: none; flex: 1 1 0; min-width: 0; }
.cp1 > .clear { display: none; }
/* 首页 6 张产品卡（.index_rexiao.w100）：原 1115px/740px 定高定宽 → 流体 3 列 */
.index_rexiao {
    width: 100%;
    max-width: none;
    height: auto;
}
.index_rexiao.w100 ul { display: flex; flex-wrap: wrap; }
.index_rexiao.w100 ul li {
    width: calc(33.333% - 30px);
    margin: 0 15px 30px !important;   /* 压过 .w100 ul li 的 margin-right:25px !important */
    box-sizing: border-box;
}

/* 6) 首页新闻区 .xwdt：左 420px / 右 730px → 34% / 64%；大图高度绑比例 */
.xwdt1 { width: 34%; box-sizing: border-box; }
.xwdt2 { width: 64%; min-width: 0; box-sizing: border-box; }
.vid { width: 100%; height: auto; aspect-ratio: 420 / 235; }
.hydt1 { width: 100%; }

/* 7) 首页资质荣誉扇形轮播：场景 1060px 是 orbit.js 写死的定位参数，
      无法改成流体。zoom 能连布局盒一起等比缩小（transform 做不到，会留大空洞），
      .zzrybg 高度改 auto 以跟随缩小的场景。旧版 Firefox 不支持 zoom 时退化为
      原样裁切（与修复前一致），且第 1 条已保证此时出现滚动条。 */
.zzrybg { height: auto; padding-bottom: 30px; }
@media (max-width: 1160px) { .zzrybg .orbit-wrapper { zoom: 0.85; } }
@media (max-width: 980px)  { .zzrybg .orbit-wrapper { zoom: 0.7;  } }
@media (max-width: 800px)  { .zzrybg .orbit-wrapper { zoom: 0.55; } }
@media (max-width: 620px)  { .zzrybg .orbit-wrapper { zoom: 0.42; } }
@media (max-width: 460px)  { .zzrybg .orbit-wrapper { zoom: 0.32; } }

/* 8) 底部导航 + 页脚：定宽列改 flex，窄了自动换行、手机上单列 */
.dbdh {
    width: auto;
    max-width: 1200px;
    box-sizing: border-box;
    padding: 0 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.dbdh a { width: auto; padding: 0 18px; }
.footer {
    width: auto;
    max-width: 1200px;
    box-sizing: border-box;
    padding: 0 15px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 24px 0;
}
.footer1 { float: none; width: auto; flex: 1 1 340px; max-width: 380px; box-sizing: border-box; }
.footer > .sx { float: none; flex: 0 0 1px; margin: 10px 48px 0; }
.footer2 { float: none; width: auto; flex: 1 1 230px; max-width: 300px; }
.footer3 { float: none; width: auto; flex: 0 0 auto; }
.footer > .clear { display: none; }

/* 9) 新闻/案例详情正文：原 900px 定宽；富文本里的超宽图片、表格兜底 */
.nr { width: auto; max-width: 900px; overflow-x: auto; }
.nr img { max-width: 100%; height: auto; }
.shengming { height: auto; min-height: 0; }   /* 原 145px 定高，窄屏折行后被裁 */
.prodetail_2 span img { width: auto; max-width: 100%; }
.yr td { word-break: break-word; }            /* 关于页时间轴表格：窄屏允许单元格内折行 */

/* ============================================================
   断点
   ============================================================ */

/* ---- ≤992px：左右分栏堆叠 ---- */
@media (max-width: 992px) {
    .zl, .yr { float: none; width: 100%; }
    .zl { margin-bottom: 20px; }
    /* 首页新闻两栏 → 单列 */
    .xwdt1, .xwdt2 { float: none; width: 100%; }
    .xwdt2 { margin-top: 24px; }
    /* 首页产品区：推荐栏目整行在下？—— 保持在上，网格随后 */
    .cp1 > .pro_list_le { flex: 1 1 100%; margin-bottom: 10px; }
    .pro_list_le .daohang1 { max-width: none; }   /* 侧栏堆叠成整行后，菜单项不再居中收窄 */
    /* 产品卡片 3 列 → 2 列 */
    .yr .cplb ul li { width: calc(50% - 20px) !important; }
    .index_rexiao.w100 ul li { width: calc(50% - 30px); }
}

/* ---- ≤860px：模板里内联样式写的两栏改单列 ----
   产品详情页左图右文是内联 display:flex + flex:0 0 442px；
   搜索结果行是内联 float:left + width:640px；联系页二维码是内联 float:right。 */
@media (max-width: 860px) {
    .yr div[style*="display:flex"] { flex-wrap: wrap; }   /* 左列占满整行后右列换行，不再横向挤压溢出 */
    .yr div[style*="flex:0 0 442px"] { flex: 0 0 auto !important; width: 100%; }
    .yr img[style*="width:430px"] { width: 100% !important; height: auto !important; }
    .yr div[style*="width:430px"] { width: auto !important; max-width: 100%; }
    .yr div[style*="flex:1 1 auto"] { margin-left: 0 !important; margin-top: 16px; }
    .yr div[style*="width:640px"] { float: none !important; width: auto !important; }
    .yr div[style*="float:right"] { float: none !important; margin-top: 16px; }
}

/* ---- ≤700px：单列卡片 / 页脚堆叠 / 面包屑换行 ---- */
@media (max-width: 700px) {
    .yr .cplb ul li { width: 100% !important; margin-right: 0 !important; }
    .index_rexiao.w100 ul li { width: calc(100% - 30px); }
    .footer1, .footer2, .footer3 { flex: 1 1 100%; max-width: none; }
    .footer > .sx { display: none; }
    /* 面包屑条原 45px 定高，窄屏文字折行会被裁 */
    .dqwz { height: auto; min-height: 0; padding: 6px 0; box-sizing: border-box; }
    .mbx { float: none; clear: both; text-align: left; line-height: 28px; }
    .message-form .form-inner { grid-template-columns: 1fr; }
    .leaderboard__profile { grid-template-columns: 90px 1fr auto; padding-right: 8px; }
    .leaderboard__picture { width: 84px; height: 74px; }
    .pro-tab-panel table td:first-child { width: 90px; }
}

/* ---- ≤600px：压掉原站“手机菜单”残留 ----
   原站 600px 以下把 #menu 变成 absolute 的黑色面板，靠 #menu-trigger 开关展开，
   但模板里根本没有这个开关 —— 照搬就是菜单消失/遮挡内容。
   这里还原为普通文档流（flex 换行），下拉子菜单仍走 :hover 绝对定位。 */
@media (max-width: 600px) {
    #menu {
        position: static !important;
        background: none !important;
        box-shadow: none;
        padding: 0;
        margin: 0;
    }
    #menu:after { display: none; }
    #menu li { float: none; position: static; margin: 0; }
    #menu a { color: #000; padding: 0 4px; }
    #menu ul {
        position: absolute;
        visibility: hidden;
        opacity: 0;
        background: #fff;
    }
    #menu li:hover > ul { visibility: visible; opacity: 1; }
}