/* ============================================================
   模板化适配层（手写维护，目录：public/static/front/css/site.css）
   职责边界：
     design.css  = 设计稿原样（自动生成，勿手改，见 tools/mk_tpl_assets.py）
     site.css    = 「设计稿 → 可配置模板」之间的适配与增强
   规则：能不改设计稿就不改；这里只放「设计稿里是写死文案、模板里变成循环」之后
         需要补齐的少量样式，以及纯前端交互所需的最小样式。
   ============================================================ */

/* ---- 1. 首屏轮播：设计稿把背景色写在 CSS 里（.slider-one__slider-1/2），
        改成由后台轮播图驱动后背景写在元素行内；这里只保证无论几张都能撑满 ---- */
.slider-one .item {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* ---- 2. 产品模块：卡片数量由后台决定，保证最后一行左对齐、不被拉伸 ---- */
.shop-one--home .row > div {
    display: flex;
}
.shop-one--home .row > div > .shop-one__single--rfq {
    width: 100%;
}

/* ---- 3. 公司简介正文：设计稿是 <p class="about-two__text">，
        模板里正文由富文本编辑器产生（只有 <p>），外层的 .about-two__text 已提供
        字号/行高/颜色，段落本身继承即可；这里只压掉富文本首段多余的上边距 ---- */
.about-two--intro .about-two__text > p:first-child {
    margin-top: 0;
}
.about-two--intro .about-two__text > p:last-child {
    margin-bottom: 0;
}

/* ---- 4. 数据条：数字由后台配置，位数变化时不换行 ---- */
.fact-one__title--num {
    white-space: nowrap;
}

/* ---- 5. 询价单角标：为 0 时淡出，避免「0」一直挂在顶栏 ---- */
.topbar-one__cart .rfq-badge.is-zero {
    opacity: 0;
    transition: opacity .25s ease;
}

/* ---- 6. 顶栏微信：点击弹二维码（前台交互，见 site.js） ---- */
.rfq-qr-pop {
    position: fixed;
    z-index: 9999;
    display: none;
    padding: 8px;
    background: #fff;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .22);
    border-radius: 4px;
}
.rfq-qr-pop img {
    display: block;
    width: 160px;
    height: 160px;
}

/* ---- 7. 空列表兜底：栏目下暂无内容时的提示（不可见灰字，不影响设计稿） ---- */
.list-empty {
    padding: 60px 0;
    text-align: center;
    color: #8d9aa6;
    font-size: 15px;
}

/* ---- 8. 表单回执条（设计稿是纯静态页，没有提交后的状态；PRG 回跳时给个提示） ---- */
.f-alert {
    margin: 0 0 18px;
    padding: 13px 18px;
    font-size: 13.5px;
    line-height: 1.7;
    border-left: 3px solid #21bcd8;
    background: #fff;
    box-shadow: 0 6px 20px rgba(9, 17, 45, .07);
    color: #48546b;
}
.f-alert--ok {
    border-left-color: #21bcd8;
}
.f-alert--err {
    border-left-color: #f0475a;
}

/* ---- 9. 复制链接成功反馈（只换图标颜色，不改变尺寸） ---- */
[data-copy-link].is-copied i {
    color: #21bcd8;
}

/* ---- 10. 页脚「友情链接」列（2026-09-15 替代原来的「产品分类」列）
        design.css 里针对原「产品分类」列有一条 max-width:767px 时整列隐藏的规则
        （理由：手机端汉堡菜单已含全部分类，页脚不必重复占屏）。
        现在这一列换成了友情链接 —— 站外链接，汉堡菜单里没有替代品，所以手机端要显示。
        它在手机端是折叠面板（默认收起，见 design.css 的 .footer-fold__chk 规则），不会占一屏。
        写在 site.css 而不是改 design.css，是因为 design.css 由 tools/mk_tpl_assets.py
        从设计稿重新生成，手改会在下次重跑时被覆盖。 */
@media (max-width: 767px) {
    .site-footer .footer-col--cat {
        display: block;
    }
}

/* ---- 11. 网站公告条 + 公告正文弹层（2026-09-15 新增）
        背景：后台「网站公告」模块原来只写库、前台没有任何展示位，属于后台有前台无的功能。
        位置：首页「新闻资讯」板块上方一条通栏。
        交互：配了跳转链接的公告跳外链；没配的点标题弹层展开正文（JS 见 index/index.html 末尾）。 */
.ntc {
    padding: 13px 0;
    background: #f2f6f9;
    border-bottom: 1px solid #e3eaf0;
}

.ntc__bar {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ntc__label {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 13px;
    border-radius: 13px;
    background: #21bcd8;
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .02em;
}

.ntc__label i {
    font-size: 13px;
}

.ntc__list {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 32px;
    margin: 0;
}

.ntc__list li {
    max-width: 100%;
    min-width: 0;
}

.ntc__link {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 13.5px;
    line-height: 1.8;
    color: #48546b;
    transition: color .25s ease;
}

.ntc__link i {
    margin-right: 6px;
    font-size: 12px;
    color: #21bcd8;
}

.ntc__link:hover {
    color: #21bcd8;
}

/* 弹层 */
.ntc-pop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1060;
    display: none;
}

.ntc-pop.is-open {
    display: block;
}

.ntc-pop__mask {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(9, 17, 45, .55);
}

.ntc-pop__box {
    position: relative;
    z-index: 1;
    width: calc(100% - 40px);
    max-width: 660px;
    max-height: 78vh;
    margin: 9vh auto 0;
    padding: 30px 34px 34px;
    overflow: auto;
    background: #fff;
    box-shadow: 0 24px 60px rgba(9, 17, 45, .3);
}

.ntc-pop__title {
    margin: 0 0 16px;
    padding: 0 34px 0 0;
    font-size: 18px;
    line-height: 1.5;
    font-weight: 700;
    color: #1e2a36;
}

.ntc-pop__body {
    font-size: 14px;
    line-height: 1.95;
    color: #48546b;
}

.ntc-pop__body p {
    margin: 0 0 13px;
}

.ntc-pop__close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    line-height: 30px;
    text-align: center;
    font-size: 22px;
    color: #9aa5b4;
    background: none;
    cursor: pointer;
    transition: color .25s ease;
}

.ntc-pop__close:hover {
    color: #21bcd8;
}

@media (max-width: 767px) {
    .ntc { padding: 11px 0; }
    .ntc__bar { gap: 10px; align-items: flex-start; }
    .ntc__list { gap: 4px 0; }
    .ntc__link { white-space: normal; font-size: 13px; line-height: 1.7; }
    .ntc-pop__box { margin-top: 6vh; padding: 24px 20px 26px; }
    .ntc-pop__title { font-size: 16.5px; padding-right: 28px; }
}

/* ---- 12. 顶栏「语言切换」入口（2026-09-15 新增）
        背景：多语言机制（app/common.php 的 current_lang / is_en / tf / lang_url）早就写好了，
        但前台既没有入口、也没有任何模板调用 —— 属后台有前台无。这里补一个顶栏胶囊按钮。
        选择器写成 .topbar-one__links a.topbar-one__lang（特异性 0,2,1），
        是为了盖掉 style.css 里 .topbar-one__links a+a 的左侧 30px 间距与虚线分隔，
        又不用 !important。 */
.topbar-one__links a.topbar-one__lang {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 11px;
    margin-left: 18px;   /* 盖掉 a+a 的 30px，但留一点呼吸，别贴着邮箱 */
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 12px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    color: rgba(255, 255, 255, .8);
    transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

.topbar-one__links a.topbar-one__lang:hover {
    background: #21bcd8;
    border-color: #21bcd8;
    color: #fff;
}

.topbar-one__lang i {
    font-size: 12px;
}

@media (max-width: 767px) {
    /* 手机端顶栏是两列均分，语言按钮跟着走，别被拉成半屏 */
    .topbar-one__links a.topbar-one__lang {
        flex: 0 0 auto;
        margin-top: 10px;
    }
}


/* ============================================================
   13. 设计稿样式的本地覆盖（2026-09-15 由 design.css 迁移而来）
   ------------------------------------------------------------
   为什么会有这一节：
     design.css 是 tools/mk_tpl_assets.py 从设计稿内联 <style> 自动提取的产物，
     重跑脚本会**整文件重写**。此前所有设计稿之外的调整（模块增删、比例策略、
     间距微调、批量交互……）都直接写在了 design.css 里，一旦重跑脚本就全部丢失，
     已验收的页面会塌。现在 design.css 回到「纯生成」，本地改动全部搬到这里。
     layout.html 里 site.css 排在 design.css 之后，同特异性直接覆盖。

   ⚠️ 维护约定（很重要）：
     1. 不要再手改 design.css —— 改了也会被下一次生成覆盖，一律改本节。
     2. 本节每条规则都**完整声明**它要覆盖的那些属性，不能只写差异属性；
        少写一个属性，生成版的旧值就会从下面漏回来。
     3. 顺序固定：0) 中性化 → 基础规则 → 1199 → 991 → 767。
        基础规则必须排在媒体查询之前，否则会把响应式覆盖掉。
   ============================================================ */

/* ---- 0) 中性化：生成版会复活的、与当前模板结构冲突的旧规则 ----
   design.css 里 .pd-spec 是给「表格本体」用的（th/td 加 1px 边框、th 加 #f7f9fc
   底衬、偶数行 td 加底色）。现在模板里 .pd-spec 是参数卡的**外壳**，真正的表格叫
   .pd-spectb2 —— 生成版的 .pd-spec th / .pd-spec td 后代选择器会钻进来命中
   .pd-spectb2 的单元格。这里先整组清零，再交给下面的 .pd-spectb2 规则定义。 */
.pd-spec th,
.pd-spec td {
    border: 0;
    padding: 0;
    width: auto;
    background: transparent;
    color: inherit;
    font-weight: inherit;
    font-size: inherit;
    text-align: left;
}

/* 偶数行底色那条特异性更高（0,2,2），必须用同样特异性的选择器才盖得住 */
.pd-spec tr:nth-child(even) td {
    background: transparent;
}

/* 同理：生成版里 .pd-content 自带正文排版（14.5px / 行高 2 / 深灰字）。
   但当前 design.css 已经把它拆分成「.service-details__content 负责排版、
   .pd-content 只负责间距」，而 .pd-content 单独出现的地方 ——
   新闻详情（showarticle.html，nd__content 本身没有任何样式）、404、搜索结果页 ——
   正文是跟着 body 走的。
   迁移要保持现状不变：这里只让「不是产品/领域详情」的那种用法继续继承，
   成对出现的地方由 .service-details__content 给排版，不受影响。 */
.pd-content:not(.service-details__content) {
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}


/* ============================================================
   13.1 产品详情页（版式：设计稿 service-details 的两栏长文流）
   ============================================================ */
.pd-page {
    padding: 64px 0 70px;
}

/* --- 左栏 ---
   「同类产品」标题行加底衬，左侧一道青色装饰条标出区块起点，
   与右栏「技术参数」卡片的标题形成一致的区块感 */
.pd-side__hd {
    position: relative;
    font-size: 18px;
    font-weight: 700;
    color: #1e2a36;
    margin: 0 0 16px;
    padding: 11px 18px;
    background: #f4f7fb;
    border-left: 3px solid #21bcd8;
    font-family: Rubik, "Microsoft YaHei", sans-serif;
}

.service-details__list li a {
    padding: 15px 22px;
    font-size: 15px;
}

.pd-side__list li a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 列表底色与上方「同类产品」标题统一。
   style.css 里 .service-details__list 用的是粉色底 #fff2f2，
   与浅蓝灰(#f4f7fb)+青条的标题完全不搭；hover 也从原来的高饱和红 #f0475a
   换成站点主青，跟标题的青色竖条呼应。 */
.pd-side__list li a {
    background-color: #f4f7fb;
}

.pd-side__list li:hover a,
.pd-side__list li.active a {
    background-color: #21bcd8;
    color: #fff;
}

/* broucher 卡在原模板里是纯深色块，这里让字号收一点，好容纳中文。
   产品页里它改成「按图按样定制」咨询卡，置于左栏「同类产品」之后。
   版式：眼眉 + 标题 + 说明 → 二维码（居中放大 140，带文字）→ 电话条。
   只留二维码和联系电话，不做「索取报价」按钮（右栏首屏已有询价入口）。 */
.service-details__broucher {
    padding: 28px 26px 24px;
    border-radius: 4px;
    background: linear-gradient(160deg, #1f2c4a 0%, #16203a 100%);
    box-shadow: 0 14px 34px rgba(9, 17, 45, .2);
}

.service-details__broucher-title {
    font-size: 20px;
    line-height: 1.5;
    margin: 0;
}

.service-details__broucher-text {
    font-size: 13.5px;
    line-height: 1.85;
    margin: 14px 0 0;
    opacity: .86;
}

/* 眼眉：给深色卡一个视觉起点，避免标题直接贴着卡片上沿 */
.pd-consult__tag {
    display: inline-block;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #7dd8e8;
    font-weight: 600;
    margin-bottom: 10px;
    font-family: Rubik, sans-serif;
}

/* 二维码：居中放大（140），垫白底圆角，深色卡上不垫白扫不出来 */
.pd-consult__qr {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .13);
    text-align: center;
}

.pd-consult__qr img {
    display: inline-block;
    width: 140px;
    height: 140px;
    background: #fff;
    padding: 7px;
    border-radius: 3px;
}

.pd-consult__qrtip {
    font-size: 13.5px;
    line-height: 1.5;
    color: #fff;
    margin: 12px 0 0;
    font-weight: 600;
}

.pd-consult__qrtip i {
    color: #5fd0e4;
    margin-right: 6px;
    font-size: 14px;
}

.pd-consult__qrtip span {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    font-weight: 400;
    color: rgba(255, 255, 255, .6);
}

/* 电话条：整块可点，深色卡上用亮青描边（高饱和红压深底对比过冲） */
.pd-consult__tel {
    display: block;
    margin-top: 20px;
    padding: 13px 14px;
    text-align: center;
    border: 1px solid rgba(79, 208, 230, .5);
    border-radius: 3px;
    transition: background-color .3s ease, border-color .3s ease;
}

.pd-consult__tel i {
    color: #5fd0e4;
    font-size: 15px;
    margin-right: 7px;
}

.pd-consult__telnum {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    letter-spacing: .03em;
    font-family: Rubik, sans-serif;
    vertical-align: middle;
}

.pd-consult__tellab {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: rgba(255, 255, 255, .6);
}

.pd-consult__tel:hover {
    background: #21bcd8;
    border-color: #21bcd8;
}

.pd-consult__tel:hover i,
.pd-consult__tel:hover .pd-consult__tellab {
    color: rgba(255, 255, 255, .9);
}

/* 同类产品（左栏首块）→ 咨询卡 之间留出呼吸 */
.pd-side__list + .pd-consult {
    margin-top: 34px;
}

/* --- 右栏首屏 ---
   单列版式：标题 → 元信息 → 图片 → 操作按钮。

   主图尺寸策略【定稿：展柜 16:9 满宽 + object-fit:cover】：
   · 展柜宽度 = 右栏整宽（1440 下 770），宽高比锁死 16:9 → 高 433；
   · 产品图按 16:9 出（既定规范）→ cover 下严丝合缝、零留白；
   · 存量老图比例散（42% 是 600×480 = 5:4，其余 1.33~2.01），cover 按展柜比例
     裁掉溢出部分：5:4 的图上下各裁约 15%（合计约 31%）。
   ⚠️ 这是权衡后的选择 —— 宁要视觉满幅，接受老图被裁。白底玻璃件主体一般
   居中、四周留白充足，裁 15% 风险可控；构图贴边的老图可能切到主体，需重出 16:9。
   hover 的 scale(1.04) 是在 cover 裁切基础上再放大，会顺带把原图自带水印推出可视区。 */
.pd-hero {
    margin-bottom: 30px;
}

.pd-hero__img {
    position: relative;
    margin: 18px 0 0;
}

/* 主图：白底产品图不适合边缘模糊（会把玻璃片主体一起糊掉）。
   改成「白底展柜 + 柔和双层阴影 + 圆角」，静置干净、hover 轻微放大并浮出「查看大图」 */
.pd-gallery__main {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 16/9;
    padding: 14px 20px;
    overflow: hidden;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(9, 17, 45, .06), 0 14px 34px rgba(9, 17, 45, .1);
    transition: box-shadow .35s ease, transform .35s ease;
}

.pd-gallery__main img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.pd-gallery__main:hover {
    box-shadow: 0 4px 10px rgba(9, 17, 45, .08), 0 20px 44px rgba(9, 17, 45, .16);
}

.pd-gallery__main:hover img {
    transform: scale(1.04);
}

/* 「查看大图」：静置不显示，hover 从底部淡入 */
.pd-gallery__mask {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 34px 0 12px;
    text-align: center;
    font-size: 12.5px;
    color: #fff;
    background: linear-gradient(to top, rgba(31, 44, 74, .62), rgba(31, 44, 74, 0));
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
}

.pd-gallery__mask i {
    margin-right: 5px;
}

.pd-gallery__main:hover .pd-gallery__mask {
    opacity: 1;
}

.pd-title {
    font-size: 22px;
    line-height: 1.45;
    font-weight: 700;
    color: #1e2a36;
    margin: 0 0 10px;
    font-family: Rubik, "Microsoft YaHei", sans-serif;
}

.pd-meta {
    font-size: 13px;
    color: #8a93a6;
    margin: 0 0 0;
    line-height: 1.9;
    padding-bottom: 16px;
    border-bottom: 1px solid #eef1f6;
}

.pd-buy {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: stretch;
    margin: 24px 0 0;
}

/* 两个按钮等宽铺满一行（数量选择器已删除，不再需要收窄计算） */
.pd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 46px;
    padding: 0 20px;
    font-size: 14.5px;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color .3s ease, color .3s ease;
}

.pd-btn--rfq {
    flex: 1 1 0;
    min-width: 0;
    background: #f0475a;
    color: #fff;
}

.pd-btn--tel {
    flex: 1 1 0;
    min-width: 0;
    background: #21bcd8;
    color: #fff;
}

/* --- 右栏技术参数（首屏正下方，双列） ---
   参数是 B2B 采购第一决策信息，原版埋在左栏第 3 块（949px）第一屏看不到。
   右栏宽 770，双列后 8 行压成 4 行，高度约 425 → 190 */
.pd-spec {
    margin: 0 0 40px;
    padding: 24px 26px 20px;
    background: #fff;
    box-shadow: 0 6px 22px rgba(9, 17, 45, .07);
}

.pd-spec__title {
    font-size: 19px;
    font-weight: 700;
    color: #1e2a36;
    margin: 0 0 16px;
    font-family: Rubik, "Microsoft YaHei", sans-serif;
}

.pd-spectb2 {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    table-layout: fixed;
}

.pd-spectb2 th,
.pd-spectb2 td {
    padding: 11px 0;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid #eef1f6;
    line-height: 1.7;
}

/* th 132 够装「高反射波长范围」7 字不换行；td 253 放值的剩余宽度 */
.pd-spectb2 th {
    width: 132px;
    color: #8a93a6;
    font-weight: 400;
    padding-right: 14px;
    white-space: nowrap;
}

.pd-spectb2 td {
    width: 253px;
    color: #1e2a36;
    font-weight: 600;
    word-break: break-word;
    padding-right: 22px;
}

/* 第 3、4 列（右半）去掉右内边距，贴齐卡片右边 */
.pd-spectb2 tr th:nth-child(3) {
    padding-left: 22px;
}

.pd-spectb2 tr td:last-child {
    padding-right: 0;
}

.pd-spectb2 tr:last-child th,
.pd-spectb2 tr:last-child td {
    border-bottom: 0;
}

.pd-spec__empty {
    color: #8a93a6;
    font-size: 14px;
    margin: 0;
}

/* --- 右栏正文 ---
   「产品说明」小标题已去掉（正文直接开始，不再需要 .pd-sec-title）。
   正文与上方参数卡之间原本靠标题分隔，现改由 .pd-content 自己撑出上间距。
   ⚠️ .service-details__content 是 style.css 里既有的类，产品详情与
   应用领域详情共用；下面这条不能加作用域前缀，否则产品页会变。 */
.service-details__content {
    font-size: 14.5px;
    line-height: 2;
    color: #48546b;
}

.pd-content {
    margin-top: 34px;
}

.pd-content img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 18px auto;
}

/* --- 标签区 ---
   数据来自 com_info.Tag（150/158 个产品都有），点进去是栏目内页 → 对 SEO 是内链增益，
   故保留；只重做视觉：原来的灰底小方块密排，看着像半成品。
   改成「相关关键词」小标题 + 描边胶囊，换行也整齐 */
.pd-tags {
    margin: 34px 0 0;
    padding-top: 22px;
    border-top: 1px solid #eef1f6;
}

.pd-tags__label {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: #8a93a6;
    margin: 0 12px 8px 0;
    vertical-align: middle;
}

.pd-tags__list {
    display: inline;
    vertical-align: middle;
}

.pd-tags a {
    display: inline-block;
    margin: 0 8px 8px 0;
    padding: 5px 14px;
    font-size: 12.5px;
    color: #48546b;
    background: #fff;
    border: 1px solid #e3e8f0;
    border-radius: 14px;
    transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

.pd-tags a:hover {
    background: #21bcd8;
    border-color: #21bcd8;
    color: #fff;
}

@media (max-width: 1199px) {
    /* 展柜 16:9 随宽度自适应，各断点不再需要定高 */
    .pd-spectb2 td {
        width: auto;
        padding-right: 14px;
    }

    .pd-spectb2 tr th:nth-child(3) {
        padding-left: 14px;
    }
}

@media (max-width: 991px) {
    .pd-hero__img {
        margin-top: 20px;
    }

    .service-details__broucher {
        padding: 28px 24px 24px;
    }

    .service-details__broucher-title {
        font-size: 18px;
    }

    /* 单列堆叠后左栏在上、右栏在下，参数表保持双列（宽度足够） */
    .pd-spectb2 td {
        width: auto;
    }

    /* 991 以下左栏整宽，咨询卡的内容可以放大一点，别显得空 */
    .pd-consult__qr img {
        width: 160px;
        height: 160px;
    }

    .pd-consult__qrtip {
        font-size: 14.5px;
    }

    .pd-consult__telnum {
        font-size: 20px;
    }
}

@media (max-width: 767px) {
    .pd-page {
        padding: 30px 0 10px;
    }

    .pd-side__hd {
        font-size: 16px;
        margin-bottom: 12px;
    }

    .pd-side__list + .pd-consult {
        margin-top: 26px;
    }

    .service-details__list li a {
        padding: 13px 18px;
        font-size: 14px;
    }

    /* 手机宽 335 放不下双列，退回单列：th 是键、td 是值，上下各一行 */
    .pd-spec {
        padding: 18px 18px 14px;
        margin-bottom: 26px;
    }

    .pd-spec__title {
        font-size: 16px;
        margin-bottom: 12px;
    }

    .pd-spectb2 {
        font-size: 13px;
    }

    /* th/td 变块级后，原来挂在单元格上的下边框会变成每格一条线（切得过碎）。
       这里单元格一律不画线，改由每组「最后一个 td」画一条，分组边界才清楚 */
    .pd-spectb2 th,
    .pd-spectb2 td {
        display: block;
        width: auto;
        padding: 0;
        border-bottom: 0;
    }

    .pd-spectb2 tr {
        display: block;
        padding: 0;
        border-bottom: 0;
    }

    .pd-spectb2 tr th:nth-child(3) {
        padding-left: 0;
    }

    .pd-spectb2 th {
        font-size: 12.5px;
        line-height: 1.5;
        padding-top: 10px;
    }

    .pd-spectb2 td {
        line-height: 1.55;
        padding-bottom: 9px;
    }

    .pd-spectb2 td:last-child {
        border-bottom: 1px solid #eef1f6;
    }

    .pd-spectb2 tr:last-child td:last-child {
        border-bottom: 0;
    }

    .pd-hero__img {
        margin-top: 18px;
    }

    /* 手机端展柜仍是 16:9，只收内衬 */
    .pd-gallery__main {
        padding: 10px 14px;
    }

    .pd-title {
        font-size: 19px;
        line-height: 1.45;
        margin-bottom: 8px;
    }

    .pd-meta {
        font-size: 12.5px;
        line-height: 1.8;
        padding-bottom: 14px;
    }

    .pd-btn {
        height: 44px;
        padding: 0 16px;
        font-size: 13.5px;
    }

    .service-details__content,
    .pd-content {
        font-size: 13.5px;
        line-height: 1.95;
    }

    .service-details__feature-list li {
        font-size: 14px;
    }

    .pd-tags {
        margin-top: 26px;
        padding-top: 18px;
    }

    .pd-tags__label {
        display: block;
        margin: 0 0 10px;
    }

    .service-details__subtitle {
        font-size: 18px;
    }
}


/* ============================================================
   13.2 应用领域（列表页 /case.html + 详情页 /{slug}）
   ------------------------------------------------------------
   数据只有一处来源 —— 栏目 32「应用领域」的内容（后台「内容管理」维护，
   列表和详情同源，改一次两处都对）。

   版式取自设计稿：
     列表页 = project-2.html 的 .project-one__project-page-two（三列作品网格）
     详情页 = project-details.html（全宽首图 → -100px 负边距压图白卡 → 长文流）

   本节只写「设计稿缺的 + 落地必须调的」两类规则，能复用的基类一律复用：
     .project-one__project-page-two 全套（style.css:4189-4276，卡片文字下移、hover 压暗放大）
     .project-details__top、.inner-gutter（style.css:4318-4390）
     .block-title__* / .pg-sec / .pg-head（design.css）、.pd-sticky（site.css 13.1）
   把基类再声明一遍，只会让以后改样式时两处打架。

   ⚠️ 两个作用域类，别混：
     .pl-page     —— 列表页那个 section（只管竖向节奏）
     .ap-detail   —— 详情页正文容器（模板 <div class="project-details__content ap-detail">，
                     它在白卡内、标题行下方）。
                     下面 h3/ul/li/p 那几条只作用于它，绝不能加到 .service-details__content 上
                     —— 产品详情共用这个类，产品页是逐像素验收过的，别动。

   ⚠️ 已随新模板删除、不要再加回来的：
     .cs-grid / .cs-card —— 「页面区块驱动的 8 张图标卡」，卡片链接全部写死指向
                            /case.html，点哪个都一样（2026-09-15 连同后台那个重复区块一起下掉）
     .cs-blocks / .cs-block__* —— 列表页下半段「典型应用场景」的图文交替块
                            （2026-09-15 用户要求整段下掉，见 case.html 头注释第 4 条）。
                            design.css 里还有一份生成版，那是设计稿带的，不用管
     .ap-grid / .ap-card__* / .ap-nav —— 上一版列表页/详情页的类名，新模板 0 引用
     .ap-others + 详情页页尾「其他应用领域」整块 —— 2026-09-15 用户要求下掉
     .ap-detail-page .project-details__social / __list / .pd-buy 一整组 ——
                            详情页白卡右栏（社交图标行 + 所属栏目/更新时间/常用元件 +
                            「按需选型询价 / 电话咨询」两个按钮）。2026-09-15 用户要求整栏下掉：
                            本页是按行业给选型方案，不在这里卖产品。模板里那套两栏栅格也没了，
                            标题与简介现在直接占满白卡宽度。
                            ⚠️ 只删 .ap-detail-page 作用域下的那几条 ——
                            .pd-buy / .pd-btn / .tb-ico 本体仍被产品详情页和顶栏用着，别跟着删。
   ============================================================ */

/* ---------- 列表页：卡片网格 ---------- */

/* 竖向节奏：设计稿是 .project-one 的 120/110px（style.css:4080）再叠变体的 65px，
   本页压回全站 .pg-sec 的 64px（991→48 / 767→34）。
   单独一页用一套节奏，会跟产品页、新闻页的上下留白对不齐。
   写双类名是为了压过 .project-one__project-page-two{padding-bottom:65px}
   —— 同为 (0,1,0) 且它在 style.css 里更靠后，只写 .pl-page 盖不住它的 padding-bottom。 */
.project-one.pl-page {
    padding: 64px 0;
}

/* 卡片图锁 16:9 —— 与产品主图（.pd-gallery__main）、场景块（.cs-block__img）同一套比例。
   ⚠️ 模板的 <img> 挂着 width="600" height="480"：CSS 里必须显式写 height，
      否则浏览器按属性比例定高、把 aspect-ratio 顶掉，图会变成 5:4（本项目已踩过三次）。
   ⚠️ 设计稿这里是 <div>，我们整块做成可点所以用 <a>；a 默认是 inline，
      不写 display:block，下面的 overflow / aspect-ratio 全都不会生效，图会散架。 */
.pl-page .project-one__img {
    display: block;
    aspect-ratio: 16/9;
    background: #eef2f7;
}

.pl-page .project-one__img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* hover 时浮在暗罩上的「查看详情」。
   设计稿只有「图片压暗 + 放大」，没有任何文字 —— 但整张图可点这件事得给个暗示，
   否则用户不知道图是链接。z-index 必须大过 ::before 的 10（style.css:4250），
   不然被暗罩盖住。只在 hover 出现，与设计稿的揭示方式一致；
   触屏没有可靠的 hover，卡片标题本身就是链接，不会少入口。 */
.pl-page .project-one__more {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 22px;
    z-index: 11;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .4s ease, transform .4s ease;
    pointer-events: none;
}

.pl-page .project-one__single:hover .project-one__more {
    opacity: 1;
    transform: translateY(0);
}

/* 行业小标签：设计稿是 <a>，我们不是链接 —— 点标签和点卡片是同一个去处，
   多一个链接对用户没意义，对 SEO 只是重复内链，所以模板里是 <span>。
   span 是 inline，得转 block 才能让基类的 margin-top:25px 正常落到「图与文字块」之间
   （默认 inline 元素吃不到上边距，会跟图片糊在一起）。 */
.pl-page .project-one__category {
    display: block;
}

/* 卡片间距：基类竖向 45px、bootstrap 栅格横向 30px，一横一竖差得肉眼可见；
   换成产品列表页 .pl-grid 的同一档（26px，991 以下 22px），两页并排看齐。
   覆盖率：.pl-page .project-one__single 是 (0,2,0)，压得住
   .project-one__project-page-two .project-one__single{margin-bottom:45px}。 */
.pl-page .project-one__single {
    margin-bottom: 26px;
}

/* ---------- 详情页：全宽首图 + 压图白卡 ---------- */

/* 竖向节奏同列表页：设计稿 .project-details{padding:120px 0}（style.css:4290） */
.project-details.ap-detail-page {
    padding: 64px 0;
}

/* 全宽首图。
   项目 CSS 里原本只有 responsive.css:464 的一条 .project-details__featured-img img{width:100%}
   （在 ≤991 断点内）—— 基础样式是缺的，等于完全没锁比：
   <img width="1200" height="675"> 的属性比例会起作用，而后台上传的实拍图是 600×480（5:4），
   两者不符 → 图被横向拉伸变形。

   比例定 21:9 而不是 16:9：1440 宽下 16:9 实测 1170×658，首图一个人占掉大半个首屏，
   正文被压到很下面（用户 2026-09-15 反馈「图片太高了」）。21:9 收到 1170×502，
   与站点内页 banner 的宽幅观感一致；下方的白卡再压上来 100px，实际可见约 400px。
   ⚠️ 源图只有 600px 宽，铺到 1170px 是 1.95 倍放大，会偏软。
      后台上传一张 1600×688（21:9）的实拍图，这块立刻清晰 —— 属数据侧待办，不是 CSS 能救的。 */
.ap-detail-page .project-details__featured-img {
    aspect-ratio: 21/9;
    overflow: hidden;
    background: #eef2f7;
}

.ap-detail-page .project-details__featured-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 正文现在包在白卡内、标题行下方（2026-09-15 调整）。
   原来正文在卡外，靠这个 margin-top 拉开与卡片的距离；现在它在卡里，
   间距改成「一条极浅的分隔线 + 上下留白」，让白卡读起来是「标题区 / 正文」两块。
   ⚠️ 不能改回「正文挪出卡外」而保留这条：.project-details__top 带 -100px 负上边距
      （style.css:4359），卡外的兄弟节点会被一起上移 100px，正文紧贴卡片底部。 */
.ap-detail-page .project-details__content {
    margin-top: 36px;
    padding-top: 30px;
    border-top: 1px solid #eef2f7;
}

/* ---------- 富文本正文（只作用于 .ap-detail）----------
   后台正文写 h3 / ul 时的观感统一。
   ⚠️ 不加到 .service-details__content 上 —— 产品详情用着同一个类，产品页是逐像素验收过的。 */
.ap-detail .service-details__content h3 {
    font-size: 17px;
    line-height: 1.5;
    font-weight: 700;
    color: #1e2a36;
    margin: 28px 0 12px;
    font-family: Rubik, "Microsoft YaHei", sans-serif;
}

.ap-detail .service-details__content h3:first-child {
    margin-top: 0;
}

.ap-detail .service-details__content ul {
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}

.ap-detail .service-details__content ul li {
    position: relative;
    padding-left: 20px;
    line-height: 2;
    color: #48546b;
}

.ap-detail .service-details__content ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 13px;
    width: 7px;
    height: 7px;
    background: #21bcd8;
    transform: rotate(45deg);
}

.ap-detail .service-details__content p {
    margin: 0 0 13px;
}

@media (max-width: 991px) {

    .project-one.pl-page {
        padding: 48px 0;
    }

    .project-details.ap-detail-page {
        padding: 48px 0;
    }

    .pl-page .project-one__single {
        margin-bottom: 22px;
    }

    /* responsive.css:461 在 ≤991 给 .service-details__content 加了 margin-top:40px ——
       那是给产品页两栏版式用的（正文在左栏，下方还有别的块）。
       本页正文是居中单栏流，上间距已由 .project-details__content 给，
       再叠 40px 会空出一大块。 */
    .ap-detail-page .service-details__content {
        margin-top: 0;
    }
}

@media (max-width: 767px) {

    .project-one.pl-page {
        padding: 34px 0;
    }

    .project-details.ap-detail-page {
        padding: 34px 0;
    }

    /* 首图在这个宽度是 16:9（见下方 override），-44px 的上提要吃掉一部分图；
       白卡内衬（≤991 被 responsive.css:467 压到 40px）落在 345px 的宽度上只剩 265px 可排版，
       标题和字段会挤成竖条。 */
    .ap-detail-page .project-details__top {
        margin-top: -44px;
        padding: 26px 20px;
    }

    /* container 本身已有 15px 内衬，inner-gutter 再叠一层会让白卡比首图窄 30px，
       两者的左右边缘对不齐。 */
    .ap-detail-page .inner-gutter {
        padding-left: 0;
        padding-right: 0;
    }

    /* 手机端首图回到 16:9 —— 345px 宽下 21:9 只有 148px 高，再被白卡压掉 44px，
       露出来的图只剩一条，看不出是什么设备。16:9 是 194px，去掉 -44px 还有 150px。 */
    .ap-detail-page .project-details__featured-img {
        aspect-ratio: 16/9;
    }

    .ap-detail-page .project-details__content {
        margin-top: 26px;
        padding-top: 22px;
    }

    .ap-detail .service-details__content h3 {
        font-size: 16px;
        margin: 22px 0 10px;
    }
}



/* ============================================================
   13.3 公司介绍（/gsjj.html）
   ============================================================ */
/* 图片原来 align-items:flex-start —— 图高 331、右栏文字高 462，
   顶对齐后图片正下方空出 131px，看着像「缩在左上角」。
   改成垂直居中，两栏视觉重心对齐；图片加圆角与柔和投影，不再是一块生硬方图。 */
.ab-mv {
    display: flex;
    gap: 30px;
    align-items: center;
}

.ab-mv__img img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 18px 44px rgba(9, 17, 45, .16);
}

/* 注：厂区实景图库（.gal-grid / .gal-card）已于 2026-09-15 按要求整块下掉，
   模板里也不再渲染，生成版即使复活这些规则也没有元素可命中。 */


/* ============================================================
   13.4 联系我们（/contactus.html）
   ============================================================ */

/* 第一张联系卡（2026-09-15 按用户要求）：原「公司地址」改成「微信二维码」。
   卡片数据在区块 contact/cards（后台「页面区块」可改图标/标题），
   kind=qr 走模板里新增的那个分支。
   ⚠️ .ct-card 本体在 design.css（生成器产出，不能手改），这里只补二维码自己的三条。
   ⚠️ 二维码换成 flex 列布局后，卡片会比旁边两张高 —— .ct-cards 是 grid 默认 stretch，
      三张等高、内容各自从顶部排，观感是齐的。
   地址没有丢：下方地图卡底部那条 .ct-map__addr 仍在显示 {$Address}，页脚也有一份。 */
.ct-card__qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.ct-card__qr img {
    display: block;
    width: 110px;
    height: 110px;
    border-radius: 4px;
    background: #f7f9fc;
}

.ct-card__qr span {
    font-size: 12.5px;
    line-height: 1.6;
    color: #7c8698;
}

/* 三张卡的内容高度差得比较多：二维码那张的 p 是 140px（110 二维码 + 一行说明），
   电话/邮箱两张只有 51px（两行文字）。卡片被最高的撑到 277px 之后，
   后两张下面就空出一大块，看着"没对齐"。
   ⚠️ 实测三张卡的图标（y=586）与标题（y=632）本来就是对齐的 ——
      所以「去掉图标」或「去掉标题」都治不了根，只会让空档更大。
   真正要解决的是「内容块高度不等」：让 p 吃掉剩余高度、内容自己垂直居中，
   三张卡的图标标题仍在同一水平线，上下留白也均衡。 */
.ct-card {
    display: flex;
    flex-direction: column;
}

.ct-card p {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 卡片自己留 14px 内边距当「画框」，表单与地图都坐在框里 ——
   之前 ct-wrap 无内边距、地图又 background 铺到右边缘，
   占位块和「一键导航」按钮直接怼在卡片右下角，看着顶到右边。 */
.ct-wrap {
    display: flex;
    gap: 0;
    background: #fff;
    box-shadow: 0 10px 34px rgba(9, 17, 45, .09);
    align-items: stretch;
    padding: 14px;
}

.ct-form {
    flex: 1 1 58%;
    padding: 26px 34px 22px 26px;
}

/* 右栏原来是深色「联系方式」面板，内容与上方三张联系卡（地址/电话/邮箱/时间）
   完全重复 —— 改成地图：上标题、中间地图、下一条地址 + 一键导航，信息不再重复。 */
.ct-map {
    flex: 1 1 42%;
    display: flex;
    flex-direction: column;
    background: #f7f9fc;
    border-radius: 4px;
    overflow: hidden;
}

/* 标题必须与左栏「在线留言」同规格：两栏都用 .pg-h2（26px）。
   .ct-map__hd 的 padding-top 也要跟 .ct-form 的 26px 对齐 ——
   原来这里是 24px，两栏小标题「Send Message / Visit Us」会差 2px。 */
.ct-map__hd {
    padding: 26px 26px 14px;
    background: #fff;
}

/* 地图画布：Leaflet 初始化时要能量到确定尺寸，量不到就白屏。
   所以画布本身只负责「撑出高度」，真正的 Leaflet 容器用绝对定位铺满它 ——
   绝对定位的 inset 会立刻解析出尺寸，比给 flex 子项设高度稳。 */
.ct-map__canvas {
    flex: 1 1 auto;
    min-height: 280px;
    position: relative;
    overflow: hidden;
    background: #e9eef5;
}

.ct-map__leaflet {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* Leaflet 与本站样式隔离：本站有 bootstrap 等全局规则，会污染地图控件与瓦片。
   ⚠️ 第一行必须是 .ct-map__leaflet.leaflet-container（同一个元素），
   #ctMap 自己被 L.map() 加上 leaflet-container 类，写成后代选择器选不中。 */
.ct-map__leaflet.leaflet-container {
    font-family: "Microsoft YaHei", Arial, sans-serif;
    font-size: 13px;
    background: #e9eef5;
}

.ct-map__leaflet .leaflet-bar a {
    width: 28px;
    height: 28px;
    line-height: 28px;
    font-size: 16px;
    color: #1e2a36;
}

.ct-map__leaflet .leaflet-bar a:hover {
    background: #f2f7fb;
    color: #1295ad;
}

.ct-map__leaflet .leaflet-popup-content-wrapper {
    border-radius: 4px;
}

.ct-map__leaflet .leaflet-popup-content {
    margin: 10px 14px;
    line-height: 1.7;
    font-size: 13px;
    color: #1e2a36;
}

.ct-map__leaflet .leaflet-control-attribution {
    font-size: 11px;
    color: #8a93a6;
    background: rgba(255, 255, 255, .78);
}

.ct-map__leaflet .leaflet-control-attribution a {
    color: #1295ad;
}

/* 未填经纬度 / 地图组件加载失败时的占位：做成一条从容的提示，而不是报错样式 */
.ct-map__empty {
    flex: 1 1 auto;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 26px 30px;
    text-align: center;
    background: #eef2f8;
}

.ct-map__empty i {
    font-size: 30px;
    color: #21bcd8;
    opacity: .75;
}

.ct-map__empty p {
    margin: 0;
    font-size: 13px;
    line-height: 1.95;
    color: #8a93a6;
}

.ct-map__empty b {
    color: #48546b;
}

/* JS 降级时占位卡会被塞进 .ct-map__canvas（或 #ctMap）里，那里不是 flex 容器，
   单靠 flex:1 撑不满，所以让「画布内的占位卡」绝对铺满。 */
.ct-map__canvas .ct-map__empty {
    position: absolute;
    inset: 0;
    min-height: 0;
}

.ct-map__ft {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 16px 22px 18px;
    background: #fff;
    border-top: 1px solid #eef1f6;
}

.ct-map__ft i.fa-map-marker {
    color: #21bcd8;
    font-size: 15px;
}

.ct-map__addr {
    flex: 1 1 140px;
    min-width: 0;
    font-size: 13px;
    line-height: 1.7;
    color: #48546b;
}

.ct-map__nav {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: #21bcd8;
    transition: background-color .3s ease;
}

.ct-map__nav:hover {
    background: #1295ad;
    color: #fff;
}

@media (max-width: 991px) {
    .ct-wrap {
        flex-direction: column;
        padding: 14px;
    }

    /* 上下堆叠后，表单左右内边距改小（外层画框已有 14px），
       地图在下：给固定高度，别让它吃掉整屏 */
    .ct-form {
        padding: 22px 20px 20px 22px;
    }

    .ct-map {
        flex: none;
        width: 100%;
    }

    .ct-map__canvas {
        flex: 0 0 auto;
        height: 320px;
        min-height: 0;
    }

    .ct-map__empty {
        flex: 0 0 auto;
        min-height: 200px;
    }
}

@media (max-width: 767px) {
    .ct-wrap {
        padding: 10px;
    }

    .ct-form {
        padding: 16px 14px 16px 16px;
    }

    .ct-map__hd {
        padding: 16px 16px 12px;
    }

    .ct-map__canvas {
        flex: 0 0 auto;
        height: 240px;
        min-height: 0;
    }

    .ct-map__empty {
        min-height: 170px;
        padding: 22px 18px;
    }

    .ct-map__ft {
        padding: 14px 16px 16px;
    }
}

/* ============================================================
   14. 表单验证码（2026-09-17）
   联系页「在线留言」与询价页「提交询价」共用同一套结构：
   .f-row--2 > [输入框] + .f-code
   后端 Captcha 控制器出图固定 120×40，放进 46px 高容器里垂直居中，
   与左侧 input（设计稿 .f-row input 高 46px）对齐。
   ============================================================ */
.f-code__wrap {
    height: 46px;
    display: flex;
    align-items: center;
}
.f-code__img {
    display: block;
    width: 120px;
    height: 40px;
    border: 1px solid #dfe5ee;
    border-radius: 4px;
    background: #f6f9fc;
    cursor: pointer;
}
.f-code__img:hover {
    border-color: #21bcd8;
}

@media (max-width: 767px) {
    /* 窄屏 .f-row--2 会折成单列，容器不再需要固定高 */
    .f-code__wrap {
        height: auto;
    }
    .f-code__img {
        width: 104px;
        height: 36px;
    }
}

/* ============================================================
   手机端精修（2026-09-18）
   ------------------------------------------------------------
   为什么集中写在文件末尾：
     · design.css 是设计稿自动生成的（tools/mk_tpl_assets.py，文件头写明勿手改），
       site.css 才是手写适配层 —— 所以所有覆盖一律落在这里；
     · 放在末尾 = 层叠最后，能盖住前面所有规则，且集中一处便于回溯与回退。

   这一轮对齐的移动端规范（实测驱动，非拍脑袋）：
     · 触控目标 ≥44×44px        —— Apple HIG；Material 建议 48
     · 元信息字号 ≥12px         —— 原来 10~11.5px 在手机上基本看不清
     · 窄屏卡片标题限 2 行       —— 两列布局下防止卡片高度失控
     · 触屏取消位移类悬停        —— 否则点完会卡在「浮起」状态
   ============================================================ */

/* ---------- 1. 顶栏：手机端从竖排(实测 134px)压成单行 ---------- */
@media (max-width: 767px) {
    /* style.css 在 ≤991px 把 .topbar-one .container 改成 column（左右两栏变上下两行），
       顶栏因此高达 134px、白占首屏 16%。这里改回单行并压掉内边距。 */
    .topbar-one {
        padding: 5px 0;
    }
    .topbar-one .container {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }
    .topbar-one__left {
        margin-bottom: 0;
    }
    /* 手机上邮箱与社交图标价值低又占宽度：隐藏，只保留电话（可一键拨号）与语言切换 */
    .topbar-one__social,
    .topbar-one__links a[href^="mailto:"] {
        display: none;
    }
    /* style.css 在 ≤767px 把顶栏链接强制 flex:1 1 50%（排成上下两行），这里恢复单行自适应 */
    .topbar-one__links {
        flex-wrap: nowrap;
    }
    .topbar-one__links a {
        flex: 0 0 auto;
        text-align: left;
    }
}

/* ---------- 2. 触控目标补到 44×44 ---------- */
@media (max-width: 991px) {
    /* 顶栏链接同时也是「打电话」入口，必须够大够好点 */
    .topbar-one__links a,
    .menu-toggler {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    /* 页脚链接是列表型：补到 40px 并撑开行距即可。
       （不强制 44 —— 页脚链接一二十条，全撑到 44 会让页脚变得很长） */
    .footer-widget__links a {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
    }
}

/* ---------- 3. 小字号提到 12px（元信息）/ 14px（标题） ---------- */
@media (max-width: 767px) {
    /* 以下选择器在 design.css 里是 10~11.5px，手机上读不清 */
    .shop-one--home .shop-one__single--rfq .shop-one__cat,
    .p-card__cat,
    .site-footer__copy,
    .ib__tag,
    .pd-badges span,
    .nw-item__date span,
    .nd-nav__item span,
    .nw-item__meta,
    .nd__meta {
        font-size: 12px;
    }
    /* 案例卡标题属于「标题」不是「元信息」，给 14px；其内层 span 另有一条 11.5px 规则要一并提 */
    .gal-card__t {
        font-size: 14px;
    }
    .gal-card__t span {
        font-size: 12px;
    }
}

/* ---------- 4. 窄屏卡片标题限 2 行 ---------- */
@media (max-width: 767px) {
    /* 两列后每列只剩约 180px，长型号名（如「DM600nm二向色镜300-600HR 625-900HT」）
       会撑成 3 行把卡片顶高；限 2 行让高度可控、也更容易横向对齐 */
    .shop-one--home .shop-one__single--rfq .shop-one__title,
    .p-card__title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* ---------- 5. 触屏取消位移类悬停 ---------- */
/* 触屏上 :hover 会在点完之后一直保持（「半触发」），卡片像一直悬在半空。
   design.css 里已对 .p-card 做过同样处理（423 行），这里补齐其余几处漏掉的。
   只重置「位移/缩放」——颜色类 hover 不影响布局，留着无妨。 */
@media (hover: none) {
    .shop-one__single--rfq:hover,
    .adv-card:hover,
    .ct-card:hover,
    .cs-card:hover,
    .nd-nav__item:hover {
        transform: none;
    }
    .shop-one__single--rfq:hover .shop-one__image img,
    .gal-card:hover img {
        transform: none;
    }
}

/* ---------- 6. 补齐漏网的交互目标（改完第一轮后复测出来的） ---------- */
/* 复测发现还有 74 个 <40px 的可点元素，集中在下面四类。
   注意第 2 项是「小胶囊标签」：不硬套 44px —— 那会把标签撑成一个方块、破坏设计稿观感，
   给到 36px（超过 32px 的可点下限）即可，视觉几乎不变。 */
@media (max-width: 767px) {
    /* 「查看全部 N 款产品」：实测 147×24。是首页产品模块的主跳转入口，必须好点 */
    .shop-one__products-head a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    /* 首页产品卡上的分类小标签：实测 73×32 */
    .shop-one--home .shop-one__single--rfq .shop-one__cat a {
        min-height: 36px;
        display: inline-flex;
        align-items: center;
    }
    /* 分页按钮：实测 36×36 */
    .blog-pagination__link {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    /* 地图控件（Leaflet 自带，默认偏小）：缩放 30×30、弹窗关闭 24×24 */
    .leaflet-control-zoom-in,
    .leaflet-control-zoom-out,
    .leaflet-popup-close-button {
        min-width: 44px;
        min-height: 44px;
        line-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* ---------- 7. 文本型链接的命中区域 ---------- */
/* 第三轮全量探测显示：剩下的都是「进详情」的文本链接（产品标题 34px、应用场景标题 20px、
   新闻标题 24px、行动条电话 24px…），不是按钮。
   对文本链接不必硬套 44×44 —— 那会把文字之间的行距撑开、明显破坏版式。
   这里用一个小技巧：**不设 display，只加垂直 padding**。
   inline 元素的垂直 padding 不参与行盒计算（不会把行撑开、不影响布局），
   但会真实扩大元素的可点区域 —— 正好是「版式不动、命中率提高」。
   不处理的：面包屑、ICP 备案号（次要入口，且做大会顶乱页脚版式）。 */
@media (max-width: 767px) {
    .p-card__title > a,
    .shop-one__title > a,
    .apps-grid__title > a,
    .news-line__title,
    .news-line__head > a {
        padding: 9px 0;
    }
    /* 电话是独立 CTA（不是行内文本），可以放心撑到 44 */
    .cta-two__tel {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
    /* 产品分类胶囊标签：36 → 40 */
    .shop-one--home .shop-one__single--rfq .shop-one__cat a {
        min-height: 40px;
    }
}

/* ---------- 8. 首屏轮播：手机端换用手机版图 ---------- */
/* 背景图改写在 CSS 变量里（模板行内只设 --bg-pc / --bg-m，不直接设 background-image）——
   行内 background-image 的优先级高于任何 CSS 规则，只有走变量才能被媒体查询切换。
   为什么必须换：PC 图是 1920×400（4.8:1），在手机 cover 下要横向裁掉约 68%，
   图里自带的标题文字「光学镜片专业制造厂商」因此被切掉右边；手机版 1000×400（2.5:1）只裁 38%。 */
.slider-one .item {
    background-image: var(--bg-m, var(--bg-pc));
}
@media (min-width: 768px) {
    .slider-one .item {
        background-image: var(--bg-pc);
    }
}
@media (max-width: 767px) {
    /* 手机版图是 2.5:1，原来固定 250px 高仍会裁两侧；
       改成按图片比例定高 → 整张图完整显示，文字不会被切 */
    .slider-one [class*=slider-one__slider-] {
        height: auto;
        aspect-ratio: 2.5 / 1;
    }
}

/* ---------- 9. 产品分类标签：横向滚动改换行 ---------- */
/* design.css 在 ≤991px 把 .pl-cats 做成了横滑（flex-wrap:nowrap + overflow-x:auto），
   但**没有任何「右边还有内容」的视觉提示**，用户根本不知道能滑 → 分类其实被藏起来了。
   改成换行：所有分类一眼可见，代价是多占一两行高度。 */
@media (max-width: 991px) {
    .pl-cats {
        flex-wrap: wrap;
        overflow-x: visible;
    }
    .pl-cats li {
        flex: 0 0 auto;
    }
    .pl-cats a {
        white-space: normal;
        /* 换行后 14 个分类会铺成 7 行、占掉 346px（约屏高 41%）——
           压缩内边距与字号，让每行多放一个，高度直接减半，同时依然全部可见 */
        padding: 8px 11px;
        font-size: 12.5px;
    }
}

/* ---------- 10. 首页产品：收紧列间隙 + 压缩卡片内边距 ---------- */
/* 原来吃的是 Bootstrap 默认的 30px 列间隙（实测卡片只有 165px 宽），
   而产品列表页 .pl-grid 只用了 12px（卡片 186px）—— 同样两列，硬生生差出 21px。
   这里对齐产品列表页的做法：负 margin + 各 6px padding = 12px 列间隙。 */
@media (max-width: 767px) {
    .shop-one--home .row {
        margin-left: -6px;
        margin-right: -6px;
    }
    .shop-one--home .row > div {
        padding-left: 6px;
        padding-right: 6px;
        margin-bottom: 14px;
    }
    /* 卡片内边距：design.css 原为 20px 22px 26px，在 174px 宽的卡片里太奢侈
       （实测内容区高 214px，比图片 132px 还高） */
    .shop-one__single--rfq .shop-one__content {
        padding: 10px 10px 12px;
    }
    /* 列变宽后标题从 2 行放宽到 3 行，减少「DM600nm二向色镜300-…」这类关键信息被截 */
    .shop-one--home .shop-one__single--rfq .shop-one__title {
        -webkit-line-clamp: 3;
    }
    .shop-one--home .shop-one__single--rfq .shop-one__cat {
        margin-bottom: 6px;
    }
    /* 本轮新增的两列模块（核心优势条 / 应用场景）：给栅格列同样的 12px 间隙，
       与产品模块、产品列表页保持一致，避免页内出现两种列间距 */
    .adv-strip .row,
    .apps-grid .row {
        margin-left: -6px;
        margin-right: -6px;
    }
    .adv-strip .row > div,
    .apps-grid .row > div {
        padding-left: 6px;
        padding-right: 6px;
    }
}

/* ---------- 11. 顶栏：三项对齐 + 语言按钮缩小 ---------- */
@media (max-width: 767px) {
    /* ⚠️ 这里必须用 .topbar-one__links a.xxx（特异性 0,2,1）——
       本文件第 270 行已有的语言按钮规则、以及 style.css 的 .topbar-one__links a+a
       都是这个量级；写成 .topbar-one__lang（0,1,0）会被压住，改了不生效。
       实测的三个毛病：
         · 搜索与电话紧贴无缝，电话到语言却有 18px —— 来自第 279 行的 margin-left:18px
         · 语言按钮比另两个低 5px —— 来自第 298 行的 margin-top:10px 与
           style.css 的 .topbar-one__link{margin-top:10px}（flex 居中时 margin 会把元素推偏）
         · 语言按钮宽 83px —— 来自 padding:0 11px + font-size:12.5px
       统一做法：子元素 margin 全部清零，间距交给父级 gap 管。 */
    .topbar-one__links {
        gap: 6px;
        align-items: center;
    }
    /* 左侧原来的社交图标在手机端已隐藏，容器「两端对齐」会让剩下的一组挤到最右边、
       左边空出约 100px。改成整体居中，观感更平衡。 */
    .topbar-one .container {
        justify-content: center;
    }
    .topbar-one__links a.topbar-one__search,
    .topbar-one__links a.topbar-one__link,
    .topbar-one__links a.topbar-one__lang {
        margin: 0;
        padding: 0 8px;
        min-width: 40px;
    }
    /* 语言按钮瘦身：83 → 约 62px */
    .topbar-one__links a.topbar-one__lang {
        padding: 0 9px;
        font-size: 11px;
        height: auto;
        min-height: 30px;
        min-width: 0;
        gap: 4px;
    }
    .topbar-one__lang i {
        font-size: 11px;
    }
}

/* ---------- 12. 「关于瑞诚」：手机端不显示配图 ---------- */
@media (max-width: 767px) {
    .about-two--intro .about-two__img {
        display: none;
    }
    /* 光隐藏图还不够：它所在的栅格列仍有 padding，会留一条空白 → 整列一起收掉。
       用 :has() 定位「装着配图的那一列」，将来模板调列序也不会失效。 */
    .about-two--intro .row > div:has(.about-two__img) {
        display: none;
    }
}

/* ---------- 13. 首页产品：把左右留白也吃掉 ---------- */
/* 上一轮把列间隙收成 12px，但卡片距屏幕边缘还留着 container 的 15px 内边距
   （实测卡片左边缘 x=15、宽 174px）。这里一并压缩 → 卡片约 185px，左右边距 15 → 6px。 */
@media (max-width: 767px) {
    .shop-one--home > .container {
        padding-left: 6px;
        padding-right: 6px;
    }
    .shop-one--home .row {
        margin-left: -4px;
        margin-right: -4px;
    }
    .shop-one--home .row > div {
        padding-left: 4px;
        padding-right: 4px;
    }
}

/* ---------- 14. 底部页脚再精简 ---------- */
/* design.css 之前已把页脚从 1352px 压到约 480px；这里在那一轮基础上继续收紧间距。
   全部是「压间距」，不删任何功能、不隐藏任何链接。 */
@media (max-width: 767px) {
    .site-footer--ruiccn .site-footer__upper {
        padding: 18px 0 10px;
    }
    /* 联系方式三行：行高 1.9 太松 → 1.65 */
    .footer-widget__about-widget .footer-widget__text {
        line-height: 1.65;
        margin-bottom: 5px;
    }
    .footer-widget__about-widget .footer-widget__title--cn {
        padding: 0 0 9px;
    }
    /* 两个折叠标题（友情链接 / 快捷入口）：原上下各 12px */
    .footer-fold__label {
        padding: 8px 0;
    }
    /* 两个手机端大按钮：46 → 42px */
    .footer-cta {
        margin: 0 0 10px;
    }
    .footer-cta__btn {
        height: 42px;
        line-height: 42px;
    }
    /* 二维码：92 → 78px，说明文字同步收紧 */
    .footer-qr {
        margin-top: 12px;
        gap: 12px;
    }
    .footer-qr img {
        width: 78px;
        height: 78px;
        padding: 3px;
    }
    .footer-qr__txt strong {
        font-size: 13px;
        margin-bottom: 3px;
    }
    .footer-qr__txt span {
        font-size: 11.5px;
        line-height: 1.6;
    }
    /* 版权与 ICP：design.css 在窄屏把它们改成了上下两行，这里并排一行 */
    .site-footer__bottom .container {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 2px 10px;
    }
    .site-footer__bottom {
        padding: 9px 0 11px;
    }
}

/* ---------- 15. 数据条：田字布局必须先把容器内边距放开 ---------- */
/* style.css 给 .fact-one .inner-container 设了左右各 80px 的内边距（桌面设计需要），
   而模板自带的 responsive.css 把它压回 15px 的规则**只在 ≤375px 生效** ——
   390px 这类主流机型正好落空，内宽只剩 200px。结果 4 个数字改成 2 列后每卡仅 85px，
   文字被挤成竖排（截图可见「号」「品分类」竖着排）。
   这里是本轮最容易漏的一环：改列数之前一定要先确认**容器自身**够不够宽。 */
@media (max-width: 767px) {
    .fact-one .inner-container {
        padding-left: 12px;
        padding-right: 12px;
    }
    /* 图标与内容在窄卡里横排太挤，改成上下堆叠（图标在上、数字与文字在下） */
    .fact-one__single {
        flex-direction: column;
        text-align: center;
        gap: 6px;
    }
}

/* ---------- 16. 本轮按反馈做的四处调整 ---------- */
@media (max-width: 767px) {
    /* ① banner 下方「核心优势条」：隐藏每张卡的主标题，只留图标 + 说明。
       （卡片原有「17px 标题 + 13.5px 说明」两层文字，标题与说明语义高度重叠） */
    .adv-strip__title {
        display: none;
    }
    /* 标题撤掉后，图标与说明会贴在一起，补回间距 */
    .adv-strip__icon {
        margin-bottom: 10px;
    }

    /* ② 「关于瑞诚」上方那一大块空白，是四处叠加出来的：
          adv-strip__item 的 margin-bottom 26px
        + .adv-strip 自身的 padding-bottom 40px
        + .about-two__content 的 margin-top 50px（设计稿为「图 + 文并排」时让文字与图对齐用的）
        + .about-two--intro 的 padding-top 80px
        ＝ 合计约 200px，而中间那张图已经在上一轮隐藏，对齐用的 margin 就成了纯空白。
        逐项收掉后剩 26 + 32 ＝ 58px。 */
    .about-two--intro {
        padding-top: 32px;
    }
    .about-two--intro .about-two__content {
        margin-top: 0;
    }
    .adv-strip {
        padding-bottom: 0;
    }

    /* ③ 首页产品卡上的二级分类标签（「二向色镜」「窄带滤光片」）手机端不显示 ——
       卡片只有 185px 宽，这行标签独占 40px 高、又不提供额外信息（点进详情就有分类）。 */
    .shop-one--home .shop-one__single--rfq .shop-one__cat {
        display: none;
    }

    /* ④ 底部两处「询价 / 电话」重复：保留上方的 .cta-two（标题 + 说明 + 大按钮 + 电话，
       信息更完整、视觉更强），隐藏页脚内这一对 —— 两者相隔不到一屏，同时出现纯属重复。
       页脚本身仍有地址/电话/邮箱（电话已是可点拨号），转化入口并不缺。 */
    .footer-cta {
        display: none;
    }
}