/*
Theme Name: XVS Theme 4.0 Luxury Edition
Author: Rhys
Version:1.0
*/

/*===== Header 基础 - 优化为半玻璃状态 ===== */
#xinshui-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background: rgba(255, 255, 255, 0.3); 
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); 
    
    /* 【修改】：调小了上下厚度，从 15px-25px 缩小到了 8px-15px，显得更精致 */
    padding: clamp(8px, 1vw, 15px) clamp(20px, 4vw, 40px); 
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); 
}

/* 滚动后的状态 - 变得更凝实 */
#xinshui-header.scrolled {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(15px);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
    /* 【修改】：滚动后变得更薄一点，留出更多可视空间 */
    padding: clamp(5px, 0.8vw, 10px) clamp(20px, 4vw, 40px);
}

.header-container {
    /* 【修改】：左右跨度从 1400px 收拢到 1200px，让视觉稍微集中一点 */
    max-width: 1200px; 
    margin: auto;
    display: flex; 
    justify-content: space-between; 
    align-items: center;
}

/* ==========================================
   Logo 核心修复区
   ========================================== */
.logo {
    display: flex;
    align-items: center;
}

.logo img { 
    height: clamp(40px, 4vw, 65px); 
    width: auto;
    max-width: 100%; 
    transition: all 0.5s ease; 
}

#xinshui-header.scrolled .logo img {
    height: clamp(30px, 3vw, 50px); 
}

/* ==========================================
   Menu 导航区保持稳重感
   ========================================== */
.nav-list { 
    display: flex; 
    gap: clamp(20px, 3vw, 45px); 
    list-style: none; 
    margin: 0; 
    padding: 0; 
}

.nav-list li { position: relative; }

.nav-list a {
    text-decoration: none; 
    color: #111; 
    font-size: clamp(15px, 1.2vw, 18px); 
    font-weight: 600;
    padding: 8px 5px;
    transition: all 0.3s;
    position: relative;
}

/* 精致的 hover 下划线动画 */
.nav-list a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    /* 【修改】：下划线颜色改为工业红 */
    background: #cc0000;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.nav-list a:hover::after { width: 100%; }
/* 【修改】：鼠标悬停文字变红 */
.nav-list a:hover { color: #cc0000; }

/* 箭头补丁 - 强力清除 */
.nav-list .menu-item-has-children > a::after,
.nav-list .menu-item-has-children > a::before,
.nav-list li.menu-item-has-children > a i {
    display: none !important;
    content: none !important;
}

.nav-list .menu-item-has-children > a {
    padding-right: 5px !important; 
}

.nav-list li.menu-item-has-children:hover > a::after {
    width: 100%;
}

/* 子菜单基础 */
.sub-menu {
    list-style: none;
    margin: 0;
    position: absolute;
    top: 120%;
    left: 50%;
    transform: translateX(-50%) translateY(15px);
    background: #fff;
    min-width: 220px;
    padding: 15px 20px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    border-radius: 6px;
    box-shadow: 0 12px 35px rgba(0,0,0,0.1);
    border: 1px solid #eee;
}

.sub-menu li { list-style-type: none; }

.nav-list li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    top: 100%;
    transform: translateX(-50%) translateY(0);
}

.sub-menu li a {
    color: #555; text-decoration: none; font-size: 16px; padding: 5px 0; display: block;
    transition: 0.2s;
}
/* 【修改】：子菜单悬停文字变红 */
.sub-menu li a:hover { color: #cc0000; padding-left: 6px; }

/* 子菜单箭头保留 */
.menu-item-has-children > a::after { content:"▼" !important; display: inline-block !important; font-size:10px; margin-left:6px; }

/* Language */
.header-lang { font-weight: 600; }
.header-lang a { text-decoration: none; color: #111; margin: 0 5px; transition: 0.3s;}
/* 【修改】：多语言切换悬停变红 */
.header-lang a:hover { color: #cc0000; }

/* Mobile hamburger */
.mobile-hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; }
.mobile-hamburger span { width: 25px; height: 3px; background: #111; display: block; transition: all 0.3s; }


/* ==========================================
   [终极自适应] 平板与手机统一启用 APP 级汉堡菜单
   ========================================== */
@media (max-width: 1024px) {
    /* 1. 🚨 强行召唤汉堡菜单，神挡杀神 */
    .mobile-hamburger { display: flex !important; z-index: 99999 !important; }
    
    /* 2. 隐藏原有的语言栏，防止互相打架 */
    .header-lang { display: none !important; }

    /* 3. 重塑 Header，只留 Logo 和 汉堡 */
    #xinshui-header { padding: 12px 25px !important; }
    #xinshui-header.scrolled { padding: 10px 25px !important; }
    .logo img { height: 38px !important; }

    /* 4. 🚨 核心：将横向菜单改造成绝对定位的折叠面板 */
    .nav-list {
        display: none !important; /* 默认强制隐藏 */
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        padding: 0 20px 20px 20px;
        box-shadow: 0 15px 30px rgba(0,0,0,0.1);
        border-top: 1px solid #eee;
        max-height: 80vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        z-index: 99990;
    }

    /* 5. 菜单被 JS 唤醒后的状态 */
    .nav-list.active { display: flex !important; }

    /* 6. 汉堡按钮变成 "X" 的平滑动画 (这样你就不会觉得它多余了) */
    .mobile-hamburger.is-active span:nth-child(1) { transform: translateY(8px) rotate(45deg); background: #cc0000; }
    .mobile-hamburger.is-active span:nth-child(2) { opacity: 0; }
    .mobile-hamburger.is-active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); background: #cc0000; }

    /* 7. 下拉面板内部的列表排版 */
    .nav-list > li { width: 100%; text-align: left; position: relative; }
    .nav-list a {
        display: block;
        padding: 15px 0;
        border-bottom: 1px solid #f0f0f0;
        font-size: 16px !important;
        font-weight: 700;
    }

    /* 8. JS 动态植入的红色下拉箭头 (防误触设计) */
    .mobile-expand-btn {
        position: absolute;
        right: 0;
        top: 5px;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        color: #cc0000;
        font-size: 16px;
        cursor: pointer;
        z-index: 10;
        transition: transform 0.3s ease;
    }
    .mobile-expand-btn.active { transform: rotate(180deg); } /* 点击后箭头翻转 */

    /* 9. 手风琴二级菜单 (默认绝对隐藏) */
    .sub-menu {
        position: static !important;
        transform: none !important;
        box-shadow: none !important;
        border: none !important;
        width: 100% !important;
        background: #fdfdfd !important;
        border-left: 3px solid #cc0000 !important;
        padding: 0 15px !important;
        margin-bottom: 10px;
        display: none !important; /* 🚨 彻底隐藏 */
        opacity: 0;
        visibility: hidden;
    }

    /* 10. 二级菜单被展开时的动画 */
    .sub-menu.mobile-open {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        animation: accordionDown 0.3s ease-out forwards;
    }
    .sub-menu li a { border-bottom: none; padding: 10px 0; font-size: 14px !important; font-weight: 500; }

    @keyframes accordionDown {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }
}

/* ==========================================
   📱 手机端极限压缩保护 (768px 以下)
   ========================================== */
@media (max-width: 768px) {
    #xinshui-header { padding: 10px 15px !important; }
    .logo img { height: 32px !important; }
}

/* ==========================================
   现代极简精密智造页脚 (紧凑优化版)
   ========================================== */

/* --- 1. 基础容器与框架 --- */
.xvs-modern-footer {
    position: relative;
    width: 100%;
    background-color: #fdfdfd; 
    color: #333333;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    padding: 60px 0 0 0; /* 【修改点】：顶部留白从 80px 缩减到 60px */
    border-top: 1px solid #eeeeee; 
    z-index: 50;
}

.xvs-footer-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 60px;
}

/* --- 2. 顶部网格布局 --- */
.xvs-footer-grid {
    display: grid;
    grid-template-columns: 2fr 1.2fr 1.2fr 1.5fr;
    gap: 60px; /* 【修改点】：列间距从 90px 缩减到 60px，让布局更紧凑 */
    padding-bottom: 50px; /* 【修改点】：底部留白从 60px 缩减到 50px */
    border-bottom: 1px solid #eeeeee; 
}

/* --- 专门针对最后一列（Direct Contact）的微调 --- */
.xvs-footer-grid > div:last-child {
    /* 给最后一个区块单独加一个向右的推力，把它往右挤 */
    padding-left: 60px; 
}

/* --- 3. 品牌区排版 --- */
.xvs-logo-text { font-size: 36px; /* 【修改点】：Logo字体微调小一点点 */ font-weight: 900; letter-spacing: 1px; margin-bottom: 15px; line-height: 1; color: #1a1a1a; }
.xvs-logo-text span { color: #960000; }
.xvs-tagline { color: #666666; font-size: 15px; line-height: 1.6; max-width: 380px; margin-bottom: 20px; }

/* --- 4. 标题与列表通用样式 --- */
.xvs-col-title { font-size: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; color: #1a1a1a; margin-bottom: 20px; }
.xvs-link-list, .xvs-info-list { list-style: none; padding: 0; margin: 0; }
.xvs-link-list li, .xvs-info-list li { margin-bottom: 14px; } /* 【修改点】：列表行距缩减 */
.xvs-link-list a { color: #666666; text-decoration: none; font-size: 15px; transition: all 0.3s ease; display: inline-block; }
.xvs-link-list a:hover { color: #960000; transform: translateX(5px); }
.xvs-info-list li { color: #666666; font-size: 15px; line-height: 1.6; }
.xvs-icon { display: inline-block; color: #960000; margin-right: 8px; font-size: 16px; font-weight: bold; }

/* --- 5. 社媒矩阵按钮 --- */
.xvs-social-matrix { display: flex; gap: 12px; margin-top: 20px; }
.xvs-social-btn { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; background-color: transparent; color: #666666; font-size: 15px; font-weight: 800; text-decoration: none; border: 1px solid #cccccc; border-radius: 50%; transition: all 0.3s ease; }
.xvs-social-btn:hover { background-color: #960000; color: #ffffff; border-color: #960000; transform: translateY(-3px); }

/* --- 6. 强引导询盘按钮 --- */
.xvs-action-btn-light { display: inline-block; margin-top: 15px; padding: 12px 24px; background-color: transparent; color: #960000; font-size: 14px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; border: 2px solid #960000; border-radius: 2px; transition: all 0.3s ease; }
.xvs-action-btn-light:hover { background-color: #960000; color: #ffffff; box-shadow: 0 10px 20px rgba(150, 0, 0, 0.15); }
/* ==========================================
   🚨 新增：双联系人模块独立样式
   ========================================== */
.xvs-contact-group {
    margin-bottom: 20px; /* 两个联系人组之间拉开呼吸空间 */
}

/* 最后一个联系人组不需要底部边距，给按钮留位置 */
.xvs-contact-group:last-of-type {
    margin-bottom: 0;
}

/* 极简高级微型标签 */
.xvs-contact-label {
    font-size: 13px;
    font-weight: 800;
    color: #960000; /* 使用你的品牌红作为点缀 */
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 6px;
    opacity: 0.9;
}

/* 稍微压一压按钮的顶部距离，让它和上面的联系人联系更紧密 */
.xvs-contact-col .xvs-action-btn-light {
    margin-top: 18px; 
}

/* --- 7 & 8. 底部版权栏与认证徽标融合区 --- */
/* --- 7 & 8. 中轴对称底部版权与认证区 --- */
.xvs-footer-bottom-centered {
    display: flex;
    flex-direction: column; /* 垂直居中排列 */
    align-items: center;    /* 强制绝对居中 */
    padding: 30px 0 25px 0; /* 控制极简留白 */
    border-top: 1px solid #eeeeee; /* 顶部加一条极细的分割线，像图纸一样严谨 */
}

/* 压缩并居中的徽标墙 */
.xvs-badges-track { 
    display: flex; 
    align-items: center; 
    gap: 50px; /* 徽标之间的呼吸感间距 */
    margin-bottom: 20px; /* 与下方文字的间距 */
}
.xvs-badge-img { 
    height: 40px; /* 【修改点】：尺寸调小，尽显低调奢华 */
    width: auto; 
    object-fit: contain; 
    filter: grayscale(100%) opacity(0.5); /* 默认半透明灰度，不抢风头 */
    transition: all 0.4s ease; 
}
.xvs-badge-img:hover { 
    filter: grayscale(0%) opacity(1); /* 鼠标划过恢复彩色 */
    transform: translateY(-2px);
}

/* 居中的版权文字 */
.xvs-copyright-centered { 
    font-size: 14px; 
    color: #999999; 
    letter-spacing: 1px; 
    text-transform: uppercase; 
    text-align: center;
}
.xvs-copyright-centered .xvs-divider {
    color: #dddddd;
    margin: 0 10px;
    font-weight: 300;
}
/* --- 9. 全局响应式终端适配 --- */
/* 💻 阶段一：平板端 (iPad / 横屏) */
/* ==========================================
   🚀 终极骨感极简版：平板与手机双端页脚
   ========================================== */

/* 💻 阶段一：平板端 (max-width: 1024px) */
@media (max-width: 1024px) {
    .xvs-footer-container { padding: 0 40px; }
    .xvs-footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
    .xvs-footer-grid > div:last-child { padding-left: 0; }

    /* 品牌区：剥离一切多余装饰 */
    .xvs-tagline { display: none !important; } /* 杀掉长说明 */
    .xvs-logo-text { margin-bottom: 0; }
    /* 1. 压缩两个联系人组之间的距离 */
    .xvs-contact-group { 
        margin-bottom: 12px !important; 
    }
    
    /* 2. 微缩微型红色标签到底部文字的距离 */
    .xvs-contact-label { 
        margin-bottom: 4px !important; 
    }
    
    /* 3. 压低列表元素的行距，让信息密度更高 */
    .xvs-contact-group .xvs-info-list li {
        margin-bottom: 8px !important;
    }
    
    /* 4. 让询盘按钮稍微向上靠紧 */
    .xvs-contact-col .xvs-action-btn-light { 
        margin-top: 10px !important; 
    }
    /* 社媒图标：干掉底色和边框，只留高级灰文字 */
    .xvs-social-matrix { margin-top: 5px; gap: 15px; }
    .xvs-social-btn { 
        width: auto; height: auto; 
        border: none !important; 
        background: transparent !important; 
        color: #999999; 
        font-size: 13px; 
        text-transform: capitalize;
    }
    .xvs-social-btn:hover { background: transparent !important; color: #c8102e; transform: scale(1.1); }
}

/* 📱 阶段二：手机端 (max-width: 768px) 极致留白 */
@media (max-width: 768px) {
    /* 极限压榨上下空间 */
    .xvs-modern-footer { padding-top: 35px; }
    .xvs-footer-container { padding: 0 20px; }
    .xvs-footer-grid { grid-template-columns: 1fr; gap: 25px; padding-bottom: 15px; border-bottom: none; }
    
    /* 全员居中 */
    .xvs-brand-col, .xvs-links-col, .xvs-contact-col { text-align: center; }
    .xvs-social-matrix { justify-content: center; }

    /* 🚨 核心精简 1：杀掉所有列标题，减少视觉噪音 */
    .xvs-col-title { display: none !important; }

    /* 🚨 核心精简 2：产品链接从“竖排”改为“横向平铺的小标签” */
    .xvs-link-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 15px; }
    .xvs-link-list li { margin-bottom: 0; }
    .xvs-link-list a { font-size: 13px; color: #888; }

    /* 联系方式微调 */
    .xvs-info-list li { display: flex; justify-content: center; align-items: center; margin-bottom: 5px; }
    .xvs-contact-group {
        display: flex;
        flex-direction: column;
        align-items: center; /* 确保微型标签在手机上也能乖乖居中 */
        margin-bottom: 20px;
    }

    /* 🚨 核心精简 3：化繁为简，干掉大方块按钮，改为高级文字链 */
    .xvs-action-btn-light { 
        display: inline-block;
        border: none !important; 
        padding: 0 0 2px 0; 
        background: transparent !important; 
        color: #c8102e; 
        font-size: 14px; 
        border-bottom: 1px solid #c8102e !important; /* 仅留底部红线 */
        margin-top: 10px; 
        border-radius: 0;
    }

    /* 🚨 核心精简 4：底部彻底净化，杀掉认证图，只留一行细字 */
    .xvs-footer-bottom-centered { padding: 15px 0; border-top: 1px solid #f5f5f5; }
    .xvs-badges-track { display: none !important; } /* 彻底隐藏认证图标 */
    .xvs-copyright-centered { line-height: 1.6; font-size: 11px; color: #aaaaaa; }
    .xvs-copyright-centered .xvs-divider { display: none; }
}

/* ==========================================
   🚨 彻底消灭底部留白：解除页脚的最低高度限制
   ========================================== */
.xvs-section.footer-section { 
    height: auto !important; 
    min-height: 0 !important; /* 干掉这个强行拉长的内鬼 */
    padding-bottom: 0 !important; 
}

/* ==========================================
   [XVS 专属插件] 悬浮联系舱样式
   ========================================== */
.xvs-floating-widget {
    position: fixed;
    right: 30px;
    bottom: 40px;
    z-index: 2147483647; /* 保证全站绝对置顶 */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    pointer-events: none; /* 防止隐形区域遮挡网页点击 */
}

/* ==========================================
   [XVS 专属插件] 悬浮联系舱样式 (黑红 Logo 切换版)
   ========================================== */

/* 1. 悬浮按钮基类 (保持不变) */
.xvs-widget-btn {
    width: 65px;
    height: 65px;
    background-color: #1a1a1a; /* 默认黑色背景 */
    border: 2px solid #c8102e; /* 工业红描边 */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(200, 16, 46, 0.3);
    pointer-events: auto;
    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1); /* 【魔法开始】：让所有变化（含滤镜）都有丝滑过渡 */
    position: relative;
    animation: xvsPulse 2.5s infinite;
}

/* 按钮内图片的默认样式：你是红色的，我就让你保持原本的红色 */
.xvs-widget-btn img {
    width: 35px;
    height: auto;
    object-fit: contain;
    /* 【核心魔法 1】：默认不加滤镜，显示你原本的红色 */
    filter: none; 
    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1); /* 滤镜变化也要有过渡 */
}

/* ==========================================
   【核心修改】：当鼠标悬停或点击激活时的状态
   ========================================== */
.xvs-widget-btn:hover {
    transform: scale(1.1);
    /* 1. 背景爆发为红色 */
    background-color: #c8102e; 
    /* 2. 同时把描边也变成红色，让它和背景融为一体 */
    border-color: #c8102e; 
}

/* 核心魔法 2：当按钮处于 hover 状态时，给内部的图片加滤镜 */
.xvs-widget-btn:hover img {
    /* 【工业级黑科技】：这个滤镜组合能精准地把你的红色图标变成黑色。
       - brightness(0)：先把所有颜色变黑，但如果是透明底，透明度会保留。
       - saturate(0)：确保没有残留的色彩饱和度。 */
    filter: brightness(0) saturate(0) !important;
}

@keyframes xvsPulse {
    0% { box-shadow: 0 0 0 0 rgba(200, 16, 46, 0.5); }
    70% { box-shadow: 0 0 0 15px rgba(200, 16, 46, 0); }
    100% { box-shadow: 0 0 0 0 rgba(200, 16, 46, 0); }
}

/* 2. 弹出的联系面板 (毛玻璃大厂质感) */
.xvs-contact-panel {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(15px);
    border-left: 6px solid #c8102e;
    padding: 25px;
    margin-bottom: 20px;
    width: 280px;
    box-shadow: -10px 15px 35px rgba(0,0,0,0.15);
    pointer-events: auto;
    
    /* 初始隐藏状态：向右平移并变透明 */
    opacity: 0;
    transform: translateX(50px) scale(0.95);
    visibility: hidden;
    transform-origin: bottom right;
    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

/* 面板激活状态 */
.xvs-contact-panel.active {
    opacity: 1;
    transform: translateX(0) scale(1);
    visibility: visible;
}

/* 面板内部排版 */
.xvs-contact-panel h4 {
    margin: 0 0 20px 0;
    font-size: 16px;
    font-weight: 900;
    color: #1a1a1a;
    letter-spacing: 1px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.contact-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}
.contact-item:last-child { margin-bottom: 0; }

.contact-item .icon {
    font-size: 20px;
    margin-right: 15px;
    background: #f4f4f4;
    width: 40px; height: 40px;
    display: flex; justify-content: center; align-items: center;
    border-radius: 50%;
}

.contact-item .info { display: flex; flex-direction: column; }
.contact-item .label { font-size: 12px; color: #888; margin-bottom: 2px; text-transform: uppercase;}
.contact-item a { 
    font-size: 14px; color: #1a1a1a; font-weight: 700; text-decoration: none; 
    transition: color 0.3s;
}
.contact-item a:hover { color: #c8102e; }

/* 手机端防遮挡微调 */
@media (max-width: 768px) {
    .xvs-floating-widget { right: 20px; bottom: 20px; }
    .xvs-widget-btn { width: 55px; height: 55px; }
}

/*网站产品类目界面*/
/* ==========================================================================
   Industrial Product Grid - VSC & Local 专用
   ========================================================================== */

/* 1. 容器：大厂都喜欢留白，增加呼吸感 */
.product-container {
    max-width: 1300px;
    margin: 50px auto;
    padding: 0 30px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* 选用干练的无衬线字体 */
}

/* 2. 标题：沉稳、专业，使用粗体海军蓝 */
.page-title {
    text-align: center;
    font-size: 36px;
    color: #0A1F44; /* 深海军蓝 */
    text-transform: uppercase; /* 标题全大写，更有力量感 */
    letter-spacing: 1.5px; /* 增加字间距，更显高级 */
    margin-bottom: 50px;
    position: relative;
    padding-bottom: 15px;

    
}

/* 3. 网格：精密对齐，绝不含糊 */
.product-grid {
    /* 增加顶部间距，让它远离页眉 */
    margin-top: 100px; 
    
    /* 或者使用 padding，如果你希望背景色连贯 */
    padding-top: 40px; 

    /* 确保整体在中间，不紧贴屏幕边缘 */
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* 4. 卡片：工业风格的核心，极简、加个淡淡的投影，强调实体感 */
.product-card {
    background: #fff;
    border: 1px solid #E6EAF0; /* 极淡的灰蓝边框 */
    border-radius: 4px; /* 小圆角，沉稳不花哨 */
    padding: 30px;
    text-align: center;
    transition: all 0.4s ease-in-out; /* 平滑过渡效果 */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* 确保 View Details 按钮对齐在底部 */
}

/* 5. 卡片悬停效果：大厂通常不会用花哨的动画，使用一个淡淡的蓝色投影和轻微的上浮，增加交互的高级感 */
.product-card:hover {
    transform: translateY(-8px); /* 向上轻微浮动 */
    box-shadow: 0 20px 40px rgba(0, 86, 179, 0.08); /* 极淡的蓝色投影 */
    border-color: #0056b3; /* 边框变成主色调 */
}

/* 6. 图片区域：保持白底、精密对齐，绝不拉伸 */
.product-image {
    position: relative;
    height: 220px; /* 统一高度 */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 25px;
}

/* 🚨 补充：放大镜透镜的样式 (由 JS 自动生成) */
.zoom-lens {
    position: absolute;
    border: 1px solid #d4d4d4;
    width: 100px;  /* 透镜大小 */
    height: 100px;
    background-repeat: no-repeat;
    pointer-events: none; /* 确保鼠标能穿透透镜，不卡顿 */
    display: none;        /* 初始隐藏 */
    z-index: 10;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

/* 8. 按钮：顺手帮你把品牌色统一为辛水红 (可选) */
.view-button {
color: #960000; /* 修改为红色 */
    /* ... 其余保持不变 ... */
}

.product-image img {
    max-width: 90%; /* 图片不要撑满，留白更有质感 */
    max-height: 90%;
    object-fit: contain; /* 关键：保证阀门不变形，保持原比例 */
    transition: transform 0.5s ease; /* 图片缩放过渡 */
}

/* 悬停时图片稍微放大 */
.product-card:hover .product-image img {
    transform: scale(1.08); 
}

/* 暂无图片占位符 */
.placeholder-img {
    font-size: 14px;
    color: #A0AEC0;
    text-transform: uppercase;
    background: #F4f7f9;
    padding: 20px;
    border-radius: 4px;
}

/* 7. 信息区域：精简、清晰 */
.product-info h3 {
    font-size: 20px;
    color: #1A202C; /* 近乎全黑 */
    font-weight: 700;
    margin-bottom: 15px;
}

.product-info p {
    font-size: 15px;
    color: #718096; /* 钢灰色 */
    line-height: 1.6;
    margin-bottom: 25px;
    /* 大厂通常只显示 2 行描述，用 '...' 截断 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 8. 按钮：沉稳的工业蓝，纯文字加下划线，不拖泥带水 */
.view-button {
    font-size: 16px;
    color: #0056b3; /* 工业蓝 */
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase; /* 全大写 */
    display: inline-flex;
    align-items: center;
    border-bottom: 2px solid transparent; /* 预留边框位置 */
    transition: all 0.3s ease;
}

.view-button:after {
    content: '→'; /* 添加箭头 */
    margin-left: 8px;
    transition: transform 0.3s ease;
}

.view-button:hover {
    color: #0A1F44; /* 悬停变海军蓝 */
    border-bottom-color: #0056b3; /* 出现下划线 */
}

.view-button:hover:after {
    transform: translateX(5px); /* 箭头向右滑动 */
}

/* ==========================================================================
   Industrial Catalog Header - 修复外边距塌陷，实现 100% 绝对无缝拼接
   ========================================================================== */

.industrial-header {
    padding: 160px 0 40px; 
    margin-bottom: 0 !important; /* 【核心修复 1】：强制砍掉底部的任何多余外间距 */
    border-bottom: none !important; /* 确保没有边框产生割裂感 */
    
    background-color: #ffffff;
    background-image: 
        linear-gradient(to bottom, rgba(255, 255, 255, 0.40) 0%, rgba(255, 255, 255, 0.75) 100%),
        url('images/catalog-bg.webp'); 
        
    background-size: cover;
    background-position: center center;
    background-attachment: fixed; 
    
    position: relative;
    overflow: hidden; 
    z-index: 1;
}

/* 巨型水印依然保留 */
.industrial-header::after {
    content: "XVS"; 
    position: absolute;
    top: 50%;
    right: -2%;
    transform: translateY(-50%);
    font-size: clamp(150px, 25vw, 350px);
    font-family: "Arial Black", impact, sans-serif;
    font-weight: 900;
    color: rgba(0, 0, 0, 0.04); 
    z-index: -1;
    pointer-events: none;
    letter-spacing: -15px;
}

/* --------------------------------------------------------------------------
   标题排版保持不变
   -------------------------------------------------------------------------- */
.header-content-box { border-left: 6px solid #960000; padding-left: 30px; text-align: left; }
.company-tag { font-size: 13px; font-weight: 900; color: #1a1a1a; text-transform: uppercase; letter-spacing: 5px; display: block; margin-bottom: 15px; }
.industrial-title { font-size: clamp(32px, 4vw, 46px); font-family: "Helvetica Neue", Arial, sans-serif; font-weight: 900; color: #000000; text-transform: uppercase; margin: 0; line-height: 1.1; letter-spacing: -1px; text-shadow: 
        -1px -1px 0 #fff,  
         1px -1px 0 #fff,
        -1px  1px 0 #fff,
         1px  1px 0 #fff,
         0 0 15px rgba(255, 255, 255, 0.9), 
         0 0 30px rgba(255, 255, 255, 0.7);}
.industrial-divider { width: 60px; height: 4px; background: #960000; margin-top: 30px; }

/* ==========================================================================
   产品分类区 - 完美衔接，缝隙彻底消失
   ========================================================================== */
.product-listing {
    /* 【核心修复 2】：增加 padding-top: 40px，利用内边距撑开空间，防止底下的内容顶穿父级 */
    padding: 40px 0 100px;
    margin-top: 0 !important; /* 强制上边距为 0，死死贴住上方的 Header */
    
    background-image: 
        linear-gradient(to bottom, rgba(255, 255, 255, 0.75) 0%, #ffffff 600px, #ffffff 100%),
        url('images/catalog-bg.webp'); 
        
    background-size: cover;
    background-position: center center;
    background-attachment: fixed; 
    
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   产品卡片特效 - 机械微交互
   ========================================================================== */

.product-grid {
    /* 【核心修复 3】：把原来惹祸的 margin-top 干掉！因为刚才已经在父级加了 padding 留出空间了 */
    margin-top: 0 !important; 
    
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); 
    gap: 40px;
}
/* 【新增】：卡片顶部的隐藏式红色机械能量条 */
.product-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0; /* 默认宽度为 0 */
    height: 4px;
    background: #960000;
    transition: width 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    z-index: 10;
}

/* 悬停时的机械阻尼上浮反应 */
.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    border-color: transparent; /* 悬停时边框消失，与底色融合 */
}

/* 悬停时，顶部红色进度条拉满 */
.product-card:hover::before {
    width: 100%;
}

.product-image {
    width: 100%;
    height: 320px;
    overflow: hidden;
    background: #fdfdfd;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-image img {
    max-width: 95%;
    max-height: 95%;
    object-fit: contain;
    transition: transform 0.6s ease;
}

.product-card:hover .product-image img {
    transform: scale(1.08); /* 图片轻微放大 */
}

.product-info {
    padding: 30px 25px;
    text-align: center;
}

.product-info h3 {
    font-size: 20px;
    font-weight: 800;
    color: #1a1a1a;
    margin: 0 0 10px 0;
    text-transform: uppercase;
}

.product-info p {
    font-size: 14px;
    color: #666;
    margin-bottom: 25px;
    display: -webkit-box;
    -webkit-line-clamp:2; /* 限制显示两行 */
    line-clamp : 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.view-button {
    display: inline-block;
    padding: 10px 25px;
    font-size: 13px;
    font-weight: 700;
    color: #1a1a1a;
    text-decoration: none;
    border: 1px solid #ddd;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.product-card:hover .view-button {
    background: #960000;
    color: #ffffff;
    border-color: #960000;
}

/* ==========================================================================
   保留的遮罩效果（如果你后续开启了 overlay）
   ========================================================================== */
.product-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(15, 23, 42, 0.95); /* 改成了更有黑红色调氛围的深岩黑 */
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0; 
    transition: all 0.4s ease;
    padding: 20px;
    z-index: 5;
}

.product-card:hover .product-overlay {
    opacity: 1; 
}


/*产品详情页面*/

/* 1. 确保内容不被遮挡：保持不变 */
.product-detail-spacer {
    background: #fff;
    height: 180px; 
}

/* 2. 详情页布局控制：左右分割 */
.product-flex-row {
    display: flex;
    gap: 120px;
    padding: 60px 0 100px;
    align-items: flex-start;
}

/* 3. 图片卡片：【修改点：增加容器控制，为放大镜做准备】 */
.image-card {
    flex: 1.1;
    position: relative;
    background: #fff;
    border: none !important;
    /* 修改点：通过 padding 控制图片在视觉上的“缩小”，数值越大图片越小 */
    padding: 60px; 
    box-shadow: none;
    /* 修改点：确保放大镜超出部分不溢出容器 */
    overflow: visible; 
    display: block;
    justify-content: center;
    align-items: center;
}

/*测试增加下*/
#product-main-img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto; /* 居中 */
}
/*测试增加上*/

/* 确保图片本身也干净 */
.image-card img {
    width: 100%;
    height: auto;
    display: block;
    border: none;
    /* 修改点：鼠标指针变为十字，提示此处可放大查看细节 */
    cursor: crosshair; 
}

/* 【新增：放大镜镜片样式】 */
.img-magnifier-glass {
    position: absolute;
    pointer-events: none;
    border: 1px solid #eee; /* 极细边框，符合简约风格 */
    border-radius: 50%;
    cursor: none;
    width: 180px; /* 镜片大小 */
    height: 180px;
    background-repeat: no-repeat;
    /* 增加柔和阴影，体现高端工业质感 */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    z-index: 100;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* 鼠标悬停在卡片上时，显示放大镜 */
.image-card:hover .img-magnifier-glass {
    opacity: 1;
}

/* 磨砂玻璃标签：保持不变 */
.glass-quality-tag {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 800;
    border-left: 3px solid #0056b3;
    color: #333;
    z-index: 101; /* 提升层级，确保在放大镜之上 */
}

/* 参数网格与按钮部分：保持不变，此处省略... *//* 1. 确保内容不被遮挡：保持不变 */
.product-detail-spacer {
    background: #fff;
    height: 180px; 
}

/* 2. 详情页布局控制：左右分割 */
.product-flex-row {
    display: flex;
    gap: 120px;
    padding: 60px 0 100px;
    align-items: flex-start;
}

/* 3. 图片卡片：【修改点：增加容器控制，为放大镜做准备】 */
.image-card {
    flex: 1.1;
    position: relative;
    background: #fff;
    border: none !important;
    /* 修改点：通过 padding 控制图片在视觉上的“缩小”，数值越大图片越小 */
    padding: 60px; 
    box-shadow: none;
    /* 修改点：确保放大镜超出部分不溢出容器 */
    overflow: visible; 
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 确保图片本身也干净 */
.image-card img {
    width: 100%;
    height: auto;
    display: block;
    border: none;
    /* 修改点：鼠标指针变为十字，提示此处可放大查看细节 */
    cursor: crosshair; 
}

/* 【新增：放大镜镜片样式】 */
.img-magnifier-glass {
    position: absolute;
    border: 1px solid #eee; /* 极细边框，符合简约风格 */
    border-radius: 50%;
    cursor: none;
    width: 180px; /* 镜片大小 */
    height: 180px;
    background-repeat: no-repeat;
    /* 增加柔和阴影，体现高端工业质感 */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    z-index: 100;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* 鼠标悬停在卡片上时，显示放大镜 */
.image-card:hover .img-magnifier-glass {
    opacity: 1;
}

/* 磨砂玻璃标签：保持不变 */
.glass-quality-tag {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 800;
    border-left: 3px solid #0056b3;
    color: #333;
    z-index: 101; /* 提升层级，确保在放大镜之上 */
}

/* 参数网格：严谨专业 */
.specs-grid-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin: 40px 0;
    padding: 30px 0;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
}

.spec-cell label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    color: #999;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.spec-cell span {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
}

/* 按钮：深蓝稳重 */
.btn-primary {
    background: #0056b3;
    color: #fff;
    padding: 16px 35px;
    text-decoration: none;
    font-weight: 700;
    display: inline-block;
    transition: 0.3s;
}

.btn-primary:hover {
    background: #004494;
}

.btn-download {
    display: block;
    margin-top: 15px;
    color: #666;
    font-size: 13px;
    text-decoration: underline;
}

/* 响应式：如果是手机访问，变成上下堆叠 */
@media (max-width: 768px) {
    .product-detail-spacer { height: 100px; } /* 移动端距离稍微收窄 */
    .product-flex-row {
        flex-direction: column;
        gap: 40px;
        padding: 40px 0;
    }
    .image-card { padding: 0; }
}

/* ==========================================
   产品详情页TablePress 极简精密智造风专属美化
   ========================================== */
.xvs-product-specs-section {
    padding: 60px 0;
    background: #ffffff;
}
.specs-section-title {
    font-size: 24px;
    font-weight: 800;
    color: #1a1a1a;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 30px;
    border-left: 4px solid #960000; /* 品牌红竖线标识 */
    padding-left: 15px;
}

/* 强行接管 TablePress 默认样式 */
.tablepress {
    width: 100% !important;
    border-collapse: collapse !important;
    font-family: 'Helvetica Neue', Arial, sans-serif !important;
    margin-bottom: 0 !important;
}

/* 表头样式：极简深灰底，白字 */
.tablepress thead th {
    background-color: #333333 !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 15px 20px !important;
    border: 1px solid #444444 !important;
}

/* 表格主体：清爽白灰相间 */
.tablepress tbody td {
    padding: 12px 20px !important;
    font-size: 14px !important;
    color: #444444 !important;
    border: 1px solid #eeeeee !important;
    vertical-align: middle !important;
}

/* 斑马线效果 */
.tablepress tbody tr.odd td {
    background-color: #fdfdfd !important;
}
.tablepress tbody tr.even td {
    background-color: #f7f7f7 !important;
}

/* 鼠标悬停的高亮交互：淡淡的品牌红背景 */
.tablepress tbody tr:hover td {
    background-color: #fff0f0 !important; 
    color: #960000 !important;
    transition: all 0.2s ease;
}

/* 移动端保护：让长表格在手机上可以横向滑动，绝对不撑破网页 */
.specs-table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03); /* 高级微阴影 */
    border-radius: 4px;
}
.specs-empty-msg {
    color: #888888;
    font-style: italic;
    border-left: 3px solid #ccc;
    padding-left: 15px;
}

/* ==========================================
       图纸蓝图视窗与灯箱特效
========================================== */
    .blueprint-viewer {
        background-color: #fdfdfd;
        /* 增加极具工程感的极淡网格背景 */
        background-image: linear-gradient(#f0f0f0 1px, transparent 1px), linear-gradient(90deg, #f0f0f0 1px, transparent 1px);
        background-size: 20px 20px;
        height: 450px; /* 固定高度，完美压住阵脚，防排版崩塌 */
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #eeeeee;
        position: relative;
        cursor: zoom-in;
        overflow: hidden;
        border-radius: 2px;
    }
    .blueprint-viewer img {
        max-width: 90%;
        max-height: 90%;
        object-fit: contain; /* 核心：无论图片多大/多小，全部等比缩放包容在盒子里 */
        mix-blend-mode: multiply; /* 过滤掉图纸自带的死白底色，与网格完美融合 */
        transition: transform 0.4s ease;
    }
    .blueprint-viewer:hover img {
        transform: scale(1.03);
    }
    .blueprint-hint {
        position: absolute;
        bottom: 20px;
        right: 20px;
        background: rgba(26, 26, 26, 0.85);
        color: #fff;
        padding: 6px 15px;
        font-size: 11px;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 1px;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.3s;
    }
    .blueprint-viewer:hover .blueprint-hint { opacity: 1; }

    /* 纯净黑底全屏灯箱 */
    .xvs-drawing-lightbox {
        display: none; position: fixed; z-index: 99999; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(15, 15, 15, 0.95); align-items: center; justify-content: center; backdrop-filter: blur(5px);
    }
    .xvs-drawing-lightbox img { max-width: 90vw; max-height: 90vh; border: 2px solid #333; box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
    .xvs-lightbox-close { position: absolute; top: 30px; right: 40px; color: #fff; font-size: 40px; font-weight: 300; cursor: pointer; transition: color 0.3s; }
    .xvs-lightbox-close:hover { color: #c00; }

/*==========================================
       底部技术区：图纸与表格的绝对平衡 (终极纯净版)
       ========================================== */
    .product-tech-row { 
        display: flex; 
        gap: 60px; 
        padding-bottom: 80px; 
        align-items: flex-start; 
    }
    
    .tech-drawing-box { 
        flex: 1; 
    }

    .tech-table-box { 
        flex: 1; 
        min-width: 0; 
        overflow-x: auto; 
    }

    /* 【核心魔法 2】：保持你的 1200px 完美底座 */
    .tech-table-box table,
    .tech-table-box .tablepress { 
        table-layout: fixed !important; 
        width: 100% !important; 
        min-width: 1200px !important; 
        border-collapse: collapse;
    }
    
    /* 【核心魔法 3】：所有格子的基础样式 (居中、绝对不换行) */
    .tech-table-box table td,
    .tech-table-box table th,
    .tech-table-box .tablepress td,
    .tech-table-box .tablepress th {
        vertical-align: middle !important; 
        text-align: center !important;     
        padding: 12px 10px !important;     
        font-size: 13px !important;        
        border: 1px solid #eeeeee !important;
        white-space: nowrap !important; /* 保持你的要求：绝对不竖排 */
    }

    /* 【致命一击 - 表头篇】：只锁死 150px 宽度，绝对不碰你的颜色！保留白字！ */
    .tech-table-box table thead tr th:first-child,
    .tech-table-box .tablepress thead tr th:first-child {
        width: 150px !important; 
        box-sizing: border-box !important;
        text-align: left !important;
        white-space: normal !important;
        /* 绝对去掉了背景色和字体颜色的干扰，让它跟着你原本的第一排走！ */
    }

    /* 【致命一击 - 数据篇】：控制下面具体部位的数据行，强行黑字白底 */
    .tech-table-box table tbody tr td:first-child,
    .tech-table-box .tablepress tbody tr td:first-child {
        width: 150px !important; 
        box-sizing: border-box !important;
        text-align: left !important;
        font-weight: 800 !important;
        background-color: #fdfdfd !important; /* 浅白底色 */
        color: #333 !important; /* 【终极解药】：强制深灰/黑色字体，绝不允许它变成白字隐身！ */
        white-space: normal !important; 
        word-break: break-word !important;
    }

    /* 【修复表头颜色】：去掉干扰，只保留大写和加粗 */
    .tech-table-box .tablepress thead th,
    .tech-table-box .tablepress tr.row-1 td {
        font-weight: 800 !important; 
        text-transform: uppercase !important; 
        /* 已经彻底删除了干扰你配色的 background-color 和 color！ */
    }


/*公司介绍的效果*/
/* ==========================================
   About Page (关于我们) - 终极结构优化版
   ========================================== */
/* ==========================================
       【修复】：锚点平滑滚动与页头防遮挡
       ========================================== */
/* ==========================================
   【终极修复】：恢复鼠标原生丝滑滚动 & 彻底干掉右侧黑线
   ========================================== */
html {
    /* 🚨 核心修复 1：删除了全局 scroll-behavior: smooth，把丝滑的滚动权还给你的鼠标和系统！ */
    /* 仅保留这行给跳转让位的代码 */
    scroll-behavior: smooth !important;
    scroll-padding-top: 100px !important; 
}

/* ==========================================
   【终极解毒剂】：无视任何全局污染，强行恢复原生丝滑滚动
   ========================================== */
/* ==========================================
   【终极防爆装甲】：彻底消灭双滚动条与底部抖动消失 Bug
   ========================================== */

/* 1. 唯一合法滚动权交由 html，并强制显示滚动条轨道，杜绝忽隐忽现 */
html {
    overflow-y: scroll !important; /* 🚨 强制常驻一条垂直滚动条轨道，网页永远不会因为高度变化而左右抖动 */
    overflow-x: hidden !important; 
    scroll-behavior: auto !important; 
}

/* 2. 剥夺 body 的滚动条生成权，只能乖乖跟随 html */
body {
    overflow-y: visible !important; /* 绝对禁止 body 自己生成第二条滚动条 */
    overflow-x: hidden !important; 
    width: 100%;
    margin: 0;
    padding: 0;
}

/* 3. 核心魔法：用结界包裹主容器，防止底部的 translateY 动画撑破页面高度 */
/* 请确保 .about-page 是你整个页面最外层的那个大盒子 */
.about-page, 
#page, 
.site-content { 
    width: 100%;
    /* 🚨 现代前端裁边魔法：把内部元素偷偷向下位移产生的“幽灵高度”全部一刀切掉！ */
    clip-path: inset(0 0 0 0); 
}
.ind-container { 
    max-width: 1700px; 
    margin: 0 auto; 
    padding: 0 20px; 
}
.reveal-up {
    opacity: 0;
    transform: translateY(60px); 
    transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1); 
    will-change: opacity, transform;
}
.reveal-up.active {
    opacity: 1;
    transform: translateY(0); 
}

/* --- 1. 第一屏 (Hero 区域) --- */
/* --- 1. 第一屏 (Hero 区域) --- */
.about-hero { 
    width: 100vw;             
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw; 
    margin-right: -50vw;
    margin-top: 90px;
    border-radius: 0; 
    
    height: 90vh; 
    min-height: 600px; 
    
    background-color: #fdfdfd; 
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: #000;
    overflow: hidden;        
}

.hero-overlay { 
    text-align: left; 
    width: 100%; 
    max-width: 1600px; 
    /* 【修改标注 2】：移除底部过大的留白，并将标题往上提 60px，给底部悬浮的数据层让出视觉空间 */
    margin: 0 auto;
    transform: translateY(-200px);
    z-index: 10;
}
.hero-kicker {
    display: inline-block;
    font-size: 14px;
    font-weight: 800;
    color: #960000; 
    text-transform: uppercase;
    letter-spacing: 4px; 
    margin-bottom: 20px;
    border-left: 3px solid #960000;
    padding-left: 15px;
}
.hero-overlay h1 {
    font-size: clamp(48px, 6vw, 65px); 
    font-weight: 900;
    color: #1a1a1a; 
    line-height: 1.1;
    letter-spacing: -1px; 
    margin: 0;

     /* 【核心修改】：给黑字加上强烈的白色发光与描边，确保在任何深色背景上都极其清晰 */
    text-shadow: 
        -1px -1px 0 #fff,  
         1px -1px 0 #fff,
        -1px  1px 0 #fff,
         1px  1px 0 #fff,
         0 0 15px rgba(255, 255, 255, 0.9), 
         0 0 30px rgba(255, 255, 255, 0.7);
}
.hero-highlight { color: #960000; }

/* --- 2. 悬浮在背景图底部的大厂数字阵列 (Stats Section) --- */
.hero-stats-wrapper { 
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 20;
    /* 【核心修改】：从 solid #fff 改为几乎不透明的 rgba 白色 */
    /* 我们不使用 linear-gradient，因为 linear-gradient 会在整个区域产生透明。 */
    /* 我们使用一种极妙的方法：在白底上加一个微小的 rgba 顶部边框 blend，实现“顶部微妙透明”的效果。 */
    background: rgba(255, 255, 255, 0.98); /* 整体 98% 不透明，看起来仍是扎实白底 */
}

.stats-grid { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 20px; 
    text-align: center; 
    
    /* 【核心修改】：干掉原本死板的 #eee 浅灰色硬边框 */
    border-top: 1px solid transparent; 
    
    /* 【核心修改】：在顶部内边距上，通过线性渐变增加一个非常短的、半透明白色过渡 */
    /* 算法：前 5px 呈现从 rgba(255,255,255,0.7) 到 rgba(255,255,255,1.0) 的微妙过渡，让顶部看起来“透气” */
    padding: 50px 0 60px 0; 
    background-image: linear-gradient(to top, rgba(255, 255, 255, 0.0) 0px, rgba(255, 255, 255, 0.0) calc(100% - 10px), rgba(255, 255, 255, 0.7) 100%);
    background-size: 100% 100%;
    background-position: top;
}

.stat-item { border-right: 1px solid #eee; }
.stat-item:last-child { border-right: none; }
.stat-value { font-size: clamp(40px, 4vw, 64px); font-weight: 900; color: #960000; font-family: 'Arial Black', sans-serif; line-height: 1; margin-bottom: 10px; }
.stat-suffix { font-size: clamp(20px, 2vw, 32px); }
.stat-label { font-size: 15px; font-weight: 700; color: #666; text-transform: uppercase; letter-spacing: 1px; }

/* --- 3. 视频区域 (Video Section) --- */
.about-video-box { 
    width: 100vw;            
    position: relative;
    left: 50%; right: 50%;
    margin-left: -50vw; margin-right: -50vw;
    background: #fff;
    line-height: 0; 
    overflow: hidden;
    padding: 20px 0; 
}
.video-wrapper { position: relative; width: 100%; }
.factory-video { width: 100%; height: 650px; object-fit: cover; cursor: pointer; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.video-overlay-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; background: rgba(150, 0, 0, 0.9); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.3s; box-shadow: 0 0 20px rgba(0,0,0,0.1); }
.video-overlay-btn:hover { transform: translate(-50%, -50%) scale(1.1); background: #960000; }
#playIcon { font-size: 20px; color: #ffffff; margin-left: 5px; }

/* --- 4. 轮播区域 (Gallery Section) --- */
/* --- 4. 轮播区域 (Gallery Section) 完美三图居中版 --- */
/* ==========================================
   【排版优化】：增加工厂环境与企业荣誉的标题留白
   ========================================== */

.about-gallery-section .gallery-title,
.honors-section .gallery-title {
    /* 强行将标题下方的间距拉大到 80px (原来是 40px~60px) */
    /* 如果你觉得 80px 还不够，可以改成 100px 或 120px */
    margin-bottom: 80px !important; 
}

.about-gallery-section { 
    /* 【修改 1】：底部 padding 从 100px 拉大到 140px，专门给底部的居中按钮腾出位置 */
    padding: 100px 0 140px 0; 
    background: #ffffff; 
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
}

/* 强制和底下的荣誉区块保持相同宽度（假设你的荣誉区是 1400px） */
.gallery-title,
.gallery-slider-wrapper {
    max-width: 1400px !important; 
    margin: 0 auto !important; 
}

.gallery-title { 
    font-size: 24px; 
    font-weight: 800; 
    /* 【修改 2】：把标题和下方图片的间距从 40px 加大到 60px 或 80px，不再觉得挤 */
    margin-bottom: 60px; 
    border-left: 5px solid #cc0000; 
    padding-left: 15px; 
    text-transform: uppercase; 
    display: block; /* 恢复纯粹的块级元素，取消原来的 flex */
}

/* --- 增加底部空间，防止按钮被切掉 --- */
.about-gallery-section { 
    padding: 100px 0 180px 0 !important; /* 👈 底部留白从 140px 拉大到 180px */
    background: #ffffff; 
}

/* --- 按钮重新定位与间距调整 --- */
.slider-nav { 
    position: absolute !important; 
    /* 👈 核心修改 1：往下移！数值越大越靠下，从 -80px 改成了 -120px */
    bottom: -120px !important;      
    left: 50% !important; 
    transform: translateX(-50%) !important; 
    display: flex !important; 
    
    /* 👈 核心修改 2：间距拉大！从 20px 直接拉大到 60px (甚至可以改到 80px) */
    gap: 100px !important; 
    z-index: 50; 
}


/* ==========================================
   【新增】：完美移植 CNC 数控黑红倒角风格
   ========================================== */
.nav-btn { 
    /* 废除原来的圆角和边框 */
    border: none;
    border-radius: 0;
    box-shadow: none;
    
    width: 60px; /* 设为 60px 的正方形，硬朗大气 */
    height: 60px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 24px; /* 箭头稍微调大一点 */
    cursor: pointer; 
    
    /* 极致纯黑底色，白色箭头文字 */
    background-color: #000000; 
    color: #ffffff !important;
    
    /* 核心工业魔法：六边形机械切割（根据按钮大小适配为 15px） */
    clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
    
    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1); 
}

.nav-btn:hover { 
    /* 悬停时，像烧红的金属一样爆发成工业红 */
    background-color: #c8102e; 
    color: #ffffff !important;
    
    /* 悬停时往上抬升 5px，增加打击感 */
    transform: translateY(-5px); 
    
    /* 保持切割形状不变 */
    clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
}

/* --- 彻底抹杀原生的生硬磁吸，把控制权 100% 交给我们的 JS 丝滑引擎 --- */
.gallery-slider-wrapper { 
    overflow-x: auto !important; 
    scrollbar-width: none !important; 
    -ms-overflow-style: none !important; 
    
    /* 🚨 终极防打架代码：强制关闭 CSS 磁吸和原生生硬滚动 */
    scroll-snap-type: none !important; 
    scroll-behavior: auto !important; 
}

.gallery-slider-wrapper::-webkit-scrollbar { 
    display: none; 
}

.gallery-track { 
    display: flex; 
    gap: 20px; 
    padding: 0; 
}


/* --- 轮播图子元素：精准 3 等分 --- */
.gallery-item { 
    /* 🚨 核心数学魔法：(容器总宽度 - 2个20px的间距) ÷ 3 */
    flex: 0 0 calc((100% - 40px) / 3) !important; 
    height: 350px; 
    background: #f9f9f9; 
    overflow: hidden; 
    cursor: zoom-in;  
    border: 1px solid #eee; 
    scroll-snap-align: none !important; 
}

.gallery-item img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1); 
}
.gallery-item:hover img { transform: scale(1.08); }

/* --- 5. 企业荣誉 (Honors Section) --- */
.honors-section { width: 100vw; position: relative; left: 50%; margin-left: -50vw; padding:0 0 80px 0 !important; box-sizing: border-box; overflow: hidden; }
.honors-section .ind-container { max-width: 1400px; margin: 0 auto; display: block !important; }

/* 【修改标注 3】：利用 Flexbox 完美分配第一排3个，第二排5个 */
.certificate-grid { 
    display: flex !important; 
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    
    /* 【精准修改 1】：拆分 gap。左右间距保持 20px 绝不破坏原结构宽度，上下排间距拉大到 60px (数值可依喜好微调) */
    column-gap: 20px !important; 
    row-gap: 60px !important; 
    
    width: 100% !important; 
}
.cert-item { cursor: pointer; text-align: center; }

/* 【智能分配】前 3 个：第一排横板 (33.3%宽度，扣除20px间距) */
.cert-item:nth-child(-n+3) { 
    flex: 0 0 calc(33.333% - 14px) !important; 
}
.cert-item:nth-child(-n+3) .cert-img-box {
    height: 240px; /* 横板略宽，高度适中 */
}

/* 【智能分配】后 5 个：第二排竖版 (20%宽度，扣除20px间距) */
.cert-item:nth-child(n+4) { 
    flex: 0 0 calc(20% - 16px) !important; 
}
.cert-item:nth-child(n+4) .cert-img-box {
    height: 340px; /* 竖版占地窄，高度拉长 */
}

.cert-img-box { width: 100%; background: #f5f5f5; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; transition: height 0.3s; }
.cert-img-box img { max-width: 90% !important; max-height: 90% !important; width: auto !important; height: auto !important; object-fit: contain; }
.cert-name { margin-top: 10px; font-size: 14px; color: #333; word-break: break-word; }

/* ==========================================
   【压轴大模块】：高端大厂极简风 (全彩常亮、重工锚定基座)
   ========================================== */
/* 1. 外层大容器：保留硬核的数控切割角 */
.wide-honor-container { 
    margin-top: 60px !important; 
    position: relative;
    clip-path: polygon(40px 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%, 0 40px);
    overflow: hidden;
    height: 600px !important; 
    background: #fdfdfd;
}

/* 2. 内部结构锁定 */
.wide-viewport {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

/* 3. 图片永远保持最高清的自然原状态 */
.wide-viewport img { 
    height: 600px !important; 
    width: 100% !important;
    object-fit: cover !important; 
    display: block;
    
    /* 彻底干掉滤镜和缩放，永远保持全彩和 1.0 比例 */
    filter: none !important; 
    transform: scale(1.0) !important; 
}

/* 4. 核心极简交互：底部的“工业红基座线” */
.wide-viewport::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    
    /* 默认状态下宽度为 0，高度 8px (非常厚重、有力量感的粗线) */
    width: 0;
    height: 8px; 
    background-color: #c8102e; 
    
    /* 展开的动画极其丝滑干脆 */
    transition: width 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    z-index: 10;
    pointer-events: none;
}

/* 5. 悬停时：红线瞬间铺满整个底部，像钢板一样托住画面 */
.wide-viewport:hover::after {
    width: 100%; 
}
/* --- 6. 全球战略版图 (Global Map) --- */
/* --- 6. 全球战略版图 (Global Map) 终极修复 --- */
.global-map-section { padding: 100px 0; background: #fdfdfd; }

.map-header .gallery-title {
    max-width: 100% !important;
    margin: 0 0 15px 0 !important; 
}

.map-header p { 
    max-width: 800px; color: #666; font-size: 16px; line-height: 1.8; 
    margin-left: 20px !important; padding-left: 0 !important; text-align: left !important;
}

/* 🚨 1. 细长条裁切外壳：决定了最终显示多高 */
.map-viewport {
    width: 100%;
    height: 480px; /* 🎛️ 遥控器：你想让长条多高，就改这个数值（建议 350-450 之间） */
    overflow: hidden; /* 🔪 核心：强行切掉上下多余的地图 */
    
    display: flex;
    align-items: center; /* 让世界地图在这个细长条里绝对垂直居中 */
    
    background-color: #fafafa;
    border: 1px solid #eee;
    border-radius: 8px;
    margin-top: 40px;
}

/* 🚨 2. 真实坐标系：恢复 100% 宽度，保留精准定位 */
.map-container { 
    position: relative; 
    width: 100%; 
    /* 剥离背景和边框，交给外面的 viewport */
    background: transparent; 
    border: none;
    margin: 0; 
    padding: 0;
}

/* 3. 底图依然作为幽灵背景 */
.real-world-map {
    width: 100%;
    height: auto;
    display: block;
    opacity: 0.15; 
    user-select: none;
    pointer-events: none; 
}

/* ---- 下面是你原本非常优秀的交互节点代码，原封不动保留 ---- */
.map-node { position: absolute; display: flex; align-items: center; justify-content: center; z-index: 10; }
.node-dot { width: 8px; height: 8px; background: #1a1a1a; border-radius: 50%; position: relative; z-index: 2; transition: 0.3s; }
.hq-node .node-dot { background: #960000; width: 10px; height: 10px; }

/* 添加悬停时点也稍微变大的互动感 */
.map-node:hover .node-dot { transform: scale(1.2); background: #960000; }

.node-pulse { position: absolute; width: 40px; height: 40px; background: rgba(150, 0, 0, 0.4); border-radius: 50%; animation: pulseMap 2s infinite cubic-bezier(0.19, 1, 0.22, 1); z-index: 1; }
@keyframes pulseMap { 0% { transform: scale(0.5); opacity: 1; } 100% { transform: scale(2.5); opacity: 0; } }

.node-label { 
    position: absolute; 
    top: 20px; left: 50%; 
    transform: translateX(-50%); 
    background: rgba(255,255,255,0.95); 
    backdrop-filter: blur(5px); /* 加入高级的毛玻璃效果 */
    padding: 10px 15px; 
    font-size: 13px; color: #111; white-space: nowrap; 
    border-top: 3px solid #960000; /* 顶部加上辛水红强调线 */
    box-shadow: 0 10px 25px rgba(0,0,0,0.1); 
    text-align: center; line-height: 1.5; opacity: 0; transition: 0.3s; pointer-events: none; 
}
.map-node:hover .node-label { opacity: 1; top: 25px; }


/* --- 7. 弹出层 Lightbox --- */
.id-lightbox { display: none; position: fixed; z-index: 9999 !important; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.96); cursor: zoom-out; align-items:center; justify-content:center; flex-direction:column; animation: idFadeIn 0.3s ease; }
.id-lightbox-content { display: block; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; max-width: 92%; max-height: 90%; object-fit: contain; border: 1px solid #eee; background: #fff; animation: idZoomIn 0.3s cubic-bezier(0.2, 0, 0.2, 1); }
.id-lightbox-close { position: absolute; top: 30px; right: 40px; color: #000; font-size: 40px; font-weight: 200; cursor: pointer; transition: 0.2s; z-index: 10000; }
.id-lightbox-close:hover { color: #960000; transform: rotate(90deg); }
.id-lightbox-caption { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); color: #444; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; }
@keyframes idFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes idZoomIn { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.about-gallery-section img, .honors-section img { position: relative !important; z-index: 10 !important; pointer-events: auto !important; }

/* ==========================================
   8. 全局响应式终端适配
   ========================================== */

/* 平板端适配 (1024px) */
@media (max-width: 1024px) {
    .factory-video { height: 450px; }
    /* 【修改标注 4】：平板端撤销 3-5 布局，强制恢复一行 4 个，保证不穿插错乱 */
    .about-page .honors-section .certificate-grid { justify-content: flex-start !important; }
    .cert-item:nth-child(-n+8) { flex: 0 0 calc(25% - 15px) !important; }
    .cert-item:nth-child(-n+8) .cert-img-box { height: 240px; }
     /* 平板端：每页完整显示 2 张 (减去 1个20px间距) */
    .gallery-item { flex: 0 0 calc((100% - 20px) / 2) !important; }
}

/* 手机端适配 (768px) */
@media (max-width: 768px) {
    /* Hero & Video */
    .about-hero { height: 400px; width: 96vw; margin-left: -48vw; margin-right: -48vw; border-radius: 0 0 20px 20px; }
    .hero-overlay h1 { font-size: 36px; }
    .about-video-box { padding: 20px 0; }
    .factory-video { height: 300px; } 

    /* Stats 手机端微调 */
    .hero-stats-wrapper .stats-grid { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 30px 20px; 
        padding: 30px 0 40px 0; 
        
        /* 【核心修改】：手机端同步应用顶部微妙透明过渡 */
        background-image: linear-gradient(to top, rgba(255, 255, 255, 0.0) 0px, rgba(255, 255, 255, 0.0) calc(100% - 5px), rgba(255, 255, 255, 0.7) 100%);
    }
    .stat-item:nth-child(2) { border-right: none; }
    .stat-item { border-right: 1px solid #eee !important; border-bottom: none; }



    /* 手机端地图缩得很小，放大触控区域和标签显示 */
    .map-container { padding: 20px 0; border: none; background: transparent; }
    .real-world-map { opacity: 0.2; }
    
    .node-label {
        font-size: 11px;
        padding: 6px 10px;
        top: 15px;
    }
    .map-node:hover .node-label { top: 20px; }

    /* Gallery */
    .gallery-item { flex: 0 0 100% !important; }
    
    .slider-nav { display: none; }

    /* Honors & Lightbox */
    /* 【修改标注 5】：手机端撤销 3-5 布局，强制恢复一行 2 个 */
    .cert-item:nth-child(-n+8) { flex: 0 0 calc(50% - 10px) !important; }
    .cert-item:nth-child(-n+8) .cert-img-box { height: 200px; }
    
    .id-lightbox-content { max-width: 96%; max-height: 80%; }
    .id-lightbox-close { top: 20px; right: 25px; }
    .id-lightbox-caption { display: none; }
}


/*technical工艺流程图的效果*/
/*首页展示效果*/

/* ==========================================
   工艺流程页：全局与底层结构 (完全物理级同步缩放)
   ========================================== */
html {
    scroll-behavior: smooth;
}
/*解决滑动条，不限制图片宽度*/

body{
    overflow-x: hidden !important;
}

.my-test-popup { 
    display: none !important; 
}

/* --- 1. 第一屏：物理级钉死在屏幕底层 --- */
.technical-overview {
    position: fixed !important; 
    top: 0 !important;
    
    /* 🚨 核心修复：固定元素不需要算居中，直接左上角顶点对齐，强制铺满视口 */
    left: 0 !important; 
    width: 100vw !important; 
    height: 100vh !important; 
    transform: none !important; /* 彻底废除容易产生误差的 translateX */
    
    z-index: 1; 
    background: #ffffff;
    overflow: hidden;
}


/* --- 修复首页背景图只显示半截的问题 --- */
.fluid-bg-img {
    width: 100%;
    /* 核心修改 1：强制图片高度和屏幕高度一模一样 */
    height: 100vh !important; 
    
    /* 核心修改 2：处理拉伸方式（这里为你准备了两种选择） */
    object-fit: cover; /* 推荐：保持图片正常比例铺满全屏。虽然边缘可能会裁掉一点点，但绝不会把你的阀门或工厂拉变形。 */
    
    /* 如果你的图片最下方有非常重要的设备细节，加上这句可以让底边完全贴合屏幕底部： */
    object-position: center bottom; 
    
    display: block;
    max-width: none !important;
    border: none;
}

.overview-content {
    position: absolute; 
    top: 50%; 
    left: 10%; 
    transform: translateY(-50%); 
    z-index: 10; 
    width: 40%; 
    color: #1a1a1a;
    line-height: normal; 
}

.overview-content h2 {
    font-size: clamp(24px, 4vw, 56px); 
    font-weight: 800; 
    margin-bottom: 1.5vw; 
    border-left: 0.8vw solid #960000; 
    padding-left: 2.5vw; 
    text-transform: uppercase; 
    line-height: 1.1;
}

.overview-content h2 span { color: #960000; }

.overview-content p {
    font-size: clamp(14px, 1.2vw, 20px); 
    line-height: 1.8; 
    color: #444; 
    margin-bottom: 3vw;
}

.scroll-indicator {
    font-size: clamp(10px, 0.8vw, 13px); 
    letter-spacing: 0.4vw; 
    text-transform: uppercase; 
    color: #960000; 
    font-weight: 700;
}

.side-overlay {
    position: absolute; 
    top: 0; left: 0; width: 50%; height: 100%; 
    background: linear-gradient(90deg, rgba(255,255,255,0.5) 0%, transparent 100%);
    z-index: 2;
}

/* --- 2. 流程图总容器：从第二屏开始滑上来覆盖 --- */
.process-full-width {
    position: relative;
    width: 100vw !important; 
    
    /* 🚨 现代前端完美的“突破容器”数学算法，绝对严丝合缝，彻底消灭左右缝隙！ */
    margin-left: calc(-50vw + 50%) !important; 
    left: auto !important;
    transform: none !important; /* 废除 translateX，防止小数点计算漏出背景 */
    
    margin-top: 100vh !important; 
    z-index: 10; 
    background: #ffffff; 
}


/* --- 3. 每一个白色工艺流程卡片 --- */
.process-container {
    width: 90%;
    margin: 0 auto;
    background: #ffffff;
    
    /* 给你加了一个顶部阴影，滑上来的时候有“纸张盖上来”的立体感 */
    box-shadow: 0 -15px 30px rgba(0,0,0,0.1); 
    border-radius: 1.5vw 1.5vw 0 0;
    
    position: relative;
    line-height: 0;
    overflow: hidden;
}

.fluid-process-img {
    width: 100%; 
    height: auto; 
    display: block; 
    max-width: none !important;
    border: none;
}

/* 手机端自适应补丁 */
@media (max-width: 768px) {
    .technical-overview { height: 50vh; }
    .fluid-bg-img { height: 100%; width: auto; object-fit: cover; }
    .overview-content { width: 85%; left: 7.5%; }
    .process-full-width { margin-top: -40px; }
    .process-container { border-radius: 20px 20px 0 0; }
}

/* ==========================================
   工艺流程页：节点交互逻辑 (悬停、呼吸灯、弹出框)
   ========================================== */
.process-node {
    position: absolute;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
}

.process-node .sensor-circle {
    fill: transparent; 
    transition: all 0.3s ease;
}

.process-node:hover .sensor-circle {
    fill: rgba(150, 0, 0, 0.03); 
}

.process-node::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 15px; height: 15px;
    background: rgba(150, 0, 0, 0.2); 
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: pulse 2s infinite;
    pointer-events: none;
}

@keyframes pulse {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
    100% { transform: translate(-50%, -50%) scale(4); opacity: 0; }
}

.process-node .process-popup {
    all: unset; 
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    opacity: 0 !important;
    visibility: hidden !important;
    z-index: 9999 !important;
    pointer-events: none !important;
    
    width: 380px !important; 
    height: 380px !important;
    
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(0.8) !important;
    
    background: #ffffff !important; 
    border-radius: 50% !important;
    
    -webkit-mask-image: radial-gradient(circle, #000 70%, transparent 90%) !important;
    mask-image: radial-gradient(circle, #000 70%, transparent 90%) !important;
    box-shadow: 0 0 60px rgba(255, 255, 255, 0.6) !important;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

.process-node:hover .process-popup {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate(-50%, -50%) scale(1) !important;
}

.process-node.node-lg .process-popup {
    width: 330px !important; 
    height: 330px !important;
    background: #ffffff !important;
}

.process-node.node-sm .process-popup {
    width: 260px !important; 
    height: 260px !important;
    background: #ffffff !important;
}

.process-popup h4 {
    margin: 0 auto 15px !important;
    color: #1a1a1a !important; 
    font-size: 16px !important; 
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: inline-block;
    text-align: center;
    border-bottom: none !important;
    text-shadow: none !important;
    
    /* ==========================================
       【新增】：强制换行与文本限制排版
       ========================================== */
    white-space: normal !important; /* 核心：废除可能存在的禁止换行属性，允许正常折行 */
    word-wrap: break-word !important; /* 核心：如果遇到特别长的英文单词，强制截断换行，绝不撑破容器 */
    overflow-wrap: break-word !important; /* 兼容现代浏览器的换行属性 */
    max-width: 100%; /* 边界锁死：限制它的最大宽度不能超过它的父盒子 */
    line-height: 1.5; /* 优化：既然要换行了，加一点行高（比如 1.5），让上下两行字不要挤在一起 */
}

/* ==========================================
   💻 平板端：全息球降维为“自适应发光胶囊” (彻底解决边缘外溢)
   ========================================== */
@media (max-width: 1024px) {
    /* 🚨 核心修复：解除正圆形束缚，大幅收缩水平体积，防止撞击屏幕边缘！ */
    .process-node .process-popup,
    .process-node.node-lg .process-popup,
    .process-node.node-sm .process-popup {
        /* 从巨型圆圈改为紧凑宽度的胶囊框 */
        width: 500px !important;   
        height: auto !important;   /* 高度根据文字自动撑开 */
        min-height: 180px !important;
        padding: 30px 40px !important;
        
        border-radius: 30px !important; /* 保留高级的圆角质感 */
        
        /* 🔪 彻底解除圆形的强制切图遮罩，释放显示空间 */
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }

    .process-popup h4 { 
        font-size: 26px !important; 
        max-width: 100% !important; /* 空间释放了，文字可以吃满整个胶囊宽度 */
        margin-bottom: 0 !important;
    }
}

/* ==========================================
   📱 手机端：极限空间避让与触控放大
   ========================================== */
@media (max-width: 768px) {
    .process-node .process-popup,
    .process-node.node-lg .process-popup,
    .process-node.node-sm .process-popup {
        /* 📐 精准数学计算：700px 刚好适配你最左侧 354 坐标的节点，绝不溢出！ */
        width: 700px !important; 
        min-height: 250px !important;
        padding: 50px 60px !important;
        border-radius: 50px !important;
    }
    
    .process-popup h4 { 
        /* 抵消手机端 SVG viewBox 的微缩，肉眼看着刚好清晰 */
        font-size: 48px !important; 
        line-height: 1.5 !important;
    }

    /* 🚨 手机端触控激活逻辑：手指按住/点击就弹出 */
    .process-node:active .process-popup,
    .process-node:focus .process-popup { 
        opacity: 1 !important; 
        visibility: visible !important; 
        transform: translate(-50%, -50%) scale(1) !important;
    }
    
    /* 放大手机端的中心雷达点，让用户的粗手指能一次点中 */
    .process-node::after { 
        width: 70px; height: 70px; 
        animation: pulseMobile 2s infinite;
    }
}

/* 专为手机端放大的呼吸灯动画 */
@keyframes pulseMobile {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
    100% { transform: translate(-50%, -50%) scale(5); opacity: 0; }
}

/* ==========================================
   解决方案页：全屏悬浮白卡特效 (精确匹配现有 HTML 结构)
   ========================================== */

/* 1. 强制锁死当前页面滚动，保持全屏应用感 */
body.solution-no-scroll {
   
    background: #ffffff;
    height: 100vh;
}

/* 2. 核心包裹器：计算高度，避开页眉 */
.solution-wrapper {
    position: relative;
    width: 100vw;
    /* 如果你的图片被页眉遮挡，可以微调 90px 这个数值 */
    height: calc(100vh - 90px); 
    margin-top: 90px; 
    display: flex;
    flex-direction: column;
    background: #ffffff;
    overflow: hidden;
}

/* --- 3. 展示舞台 --- */
.solution-stage {
    position: relative;
    flex-grow: 1;
    width: 100%;
    background: #f9f9f9;
    overflow: hidden;
}

.hub-slide {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.8s;
}

.hub-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 5;
}

/* 全屏背景图缩放动效 */
.hub-slide .bg-img {
    width: 100%; height: 100%;
    object-fit: cover;
    transform: scale(1.05);
    transition: transform 2s cubic-bezier(0.19, 1, 0.22, 1);
}

.hub-slide.active .bg-img {
    transform: scale(1);
}

/* --- 4. 悬浮白卡文字 --- */
.hub-text-card {
    position: absolute;
    top: 40%;
    left: 8%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    border-left: 8px solid #960000; /* 标志性辛水红 */
    box-shadow: 20px 20px 40px rgba(0,0,0,0.1);
    padding: clamp(30px, 4vw, 50px);
    width: 35%;
    max-width: 550px;
    z-index: 10;
    opacity: 0;
    margin-left: -30px;
    transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1) 0.2s;
}

.hub-slide.active .hub-text-card {
    opacity: 1;
    margin-left: 0;
}

.hub-text-card .subtitle {
    font-size: 14px;
    font-weight: 700;
    color: #960000;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 10px;
}

.hub-text-card h2 {
    font-size: clamp(32px, 3.5vw, 56px);
    font-weight: 900;
    color: #1a1a1a;
    line-height: 1.1;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.hub-text-card p {
    font-size: clamp(14px, 1.1vw, 17px);
    line-height: 1.8;
    color: #555;
}

/* --- 5. 底部白底琴键按钮 --- */
.hub-bottom-bar {
    width: 100%;
    height: clamp(100px, 15vh, 130px);
    display: flex;
    background: #ffffff;
    border-top: 1px solid #eeeeee;
    z-index: 20;
}

.control-key {
    all: unset;
    flex: 1;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 25px;
    border-right: 1px solid #eeeeee;
    background: #ffffff;
    position: relative;
    transition: background 0.3s;
    box-sizing: border-box; /* 防止边框撑破布局 */
}

.control-key:last-child { border-right: none; }
.control-key:hover { background: #fafafa; }

/* 激活态红线动画 */
.control-key::before {
    content: '';
    position: absolute;
    top: -1px; left: 0;
    width: 0; height: 3px;
    background: #960000;
    transition: width 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.control-key.active::before { width: 100%; }

.control-key .idx {
    font-size: 14px; font-weight: 900; color: #ccc;
    font-family: 'Arial Black', sans-serif; margin-bottom: 5px;
    display: block;
}

.control-key .title {
    font-size: clamp(12px, 0.8vw, 15px);
    font-weight: 800; color: #1a1a1a;
    text-transform: uppercase; line-height: 1.3;
    display: block;
}

.control-key.active .idx, .control-key.active .title { color: #960000; }

/* 📱 方案 B：瀑布流长页降级法 (max-width: 768px) */
@media (max-width: 768px) {
    /* 1. 彻底打破全屏死锁，释放原生滚动条 */
    body.solution-no-scroll { height: auto !important; overflow-y: auto !important; }
    .solution-wrapper { height: auto; margin-top: 80px; display: block; overflow: visible; }
    .solution-stage { height: auto; display: block; overflow: visible; }
    
    /* 2. 干掉幻灯片隐藏机制，让所有卡片排队显示 */
    .hub-slide {
        position: relative; 
        opacity: 1 !important; 
        visibility: visible !important;
        height: auto; 
        margin-bottom: 30px; 
        display: flex; flex-direction: column;
    }
    
    /* 3. 图片与文字自然堆叠 */
    .hub-slide .bg-img { height: 250px; position: relative; transform: none !important; }
    .hub-text-card {
        position: relative; top: 0; left: 0; transform: none; width: 100%;
        margin: 0; box-shadow: 0 10px 20px rgba(0,0,0,0.05);
        border-left: 4px solid #960000; padding: 25px 20px;
        opacity: 1 !important;
    }
    
    .hub-text-card h2 { font-size: 24px; margin-bottom: 10px; }
    .hub-text-card p { font-size: 14px; }

    /* 4. 隐藏底部多余的导航琴键（既然都上下滑了，就不需要它了） */
    .hub-bottom-bar { display: none !important; }
}

/* ==========================================
   全局变量与公用设置 (保证和你的系统兼容)
   ========================================== */
.ind-container {
    max-width: 1400px; /* 匹配你全站的宽度体系 */
    margin: 0 auto;
    padding: 0 20px;
}
.text-red { color: #cc0000; }

/* ==========================================
   一、 全宽 Hero Banner (解决右侧空白)
   ========================================== */
.news-hero-full {
    width: 100vw;
    
    /* 🚨 终极锁定高度：强制规定最大和最小高度，神仙来了也撑不开！ */
    height: 480px !important; 
    min-height: 480px !important;
    max-height: 480px !important; 
    
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw; 
    overflow: hidden;
    display: flex;
    align-items: center; 
}

/* 物理图片自适应装甲 */
.hero-physical-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw !important;
    
    /* 🚨 图片高度也必须被强制锁死在 300px */
    height: 480px !important; 
    max-height: 480px !important;
    
    object-fit: cover !important; /* 强制裁切不拉伸 */
    z-index: 1;
}

.hero-bg-container {
    /* 🚨 修改 1：高度缩短。原来是 550px，现在改成了 380px（你也可以自己调成 350px 或 400px） */
    height: 380px; 
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    /* 🚨 核心：删除了原来的 justify-content: center; 让内容自然跟随容器位置 */
}


.hero-overlay-dark {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 100%);
    z-index: 2;
    display: none;
}
/* 🚨 第 3 处修改：完美控制文字的“上下中间靠左” */
.hero-content {
    position: relative;
    z-index: 5;
    
    width: 100%;
    text-align: left; /* 强制文字排版靠左 */
    
    /* 利用 Flex 引擎，彻底锁死内部元素（标题、红线）的位置 */
    display: flex;
    flex-direction: column;
    justify-content: center; /* 在自己区域内上下居中 */
    align-items: flex-start; /* 强制所有子元素贴紧左侧边缘 */
}

.hero-label { color: #ffffff; font-weight: 800; letter-spacing: 5px; font-size: 14px; display: block; margin-bottom: 15px; }
.hero-main-title { font-size: 60px; color: #fff; font-weight: 900; text-transform: uppercase; margin: 0; }
.hero-line { width: 60px; height: 4px; background: #cc0000; margin: 25px 0 0 0; }

.hero-sub-desc { color: #ccc; font-size: 18px; max-width: 650px; margin: 0 auto; line-height: 1.6; }

/* ==========================================
   二、 极简细长条新闻盒子 (固定高度)
   ========================================== */
.xinshui-news-page-content { background: #f8f8f8; padding: 60px 0 100px; }
/* ==========================================
   二、 新闻筛选菜单 (CNC数控黑红切割机甲风)
   ========================================== */
.news-filter-nav { 
    display: flex; 
    justify-content: center; 
    flex-wrap: wrap; /* 允许在小屏幕上自动折行 */
    gap: 20px; /* 调整按钮之间的间距 */
    margin-bottom: 60px; 
}

/* --- 1. 按钮基础装甲状态 (纯黑 + 倒角切割) --- */
.filter-link { 
    color: #ffffff !important; /* 字体改纯白 */
    background-color: #000000; /* 极致纯黑底色 */
    
    /* 🚨 字体放大，加粗，增加厚重感 */
    font-size: 16px; 
    font-weight: 800; 
    letter-spacing: 2px;
    padding: 16px 35px; /* 把按钮四周撑大，变得像一个厚实的实体按键 */
    
    text-decoration: none; 
    text-transform: uppercase; 
    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1); 
    
    /* 🚨 核心工业魔法：左上和右下 15px 六边形机械切割 */
    clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
}

/* --- 3. 悬停与激活状态 (爆发工业红 + 向上弹射) --- */
.filter-link.active, 
.filter-link:hover { 
    background-color: #cc0000; /* 像烧红的金属一样爆发成工业红 */
    color: #ffffff !important;
    transform: translateY(-5px); /* 悬停时增加物理打击感（向上浮起） */
    
    /* 保持切割形状不变 */
    clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
}
.filter-link.active::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #cc0000; }

.slim-news-list { display: flex; flex-direction: column; gap: 20px; }

.slim-news-item {
    background: #fff;
    height: 180px; /* 🚨 极致窄盒子：高度从240下调至180 */
    display: flex;
    flex-direction: row;
    overflow: hidden;
    border: 1px solid #eee;
    transition: all 0.4s ease;
}

.slim-news-item:hover {
    transform: translateX(10px);
    box-shadow: 15px 15px 40px rgba(0,0,0,0.05);
    border-left: 5px solid #cc0000;
}

/* 图片自适应：4:3 比例裁剪 */
.item-img-frame {
    width: 280px; /* 缩小图片占比 */
    height: 100%;
    flex-shrink: 0;
    position: relative;
}

.item-img-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 🚨 核心：图片上传尺寸不一时自动填充且不拉伸 */
}

/* 日期移动到左上角，并加上工业风的切角设计 */
.item-date {
    position: absolute; 
    top: 0;   /* 👈 强制吸顶 */
    left: 0;  /* 👈 强制靠左 */
    background: #cc0000;
    color: #fff; 
    padding: 10px 16px; 
    text-align: center;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
    z-index: 5;
}
.item-date .d { font-size: 22px; font-weight: 900; display: block; line-height: 1; }
.item-date .m { font-size: 11px; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; margin-top: 3px; }

/* 文本简化处理 */
.item-text-area {
    padding: 25px 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
}

.item-cat { color: #cc0000; font-size: 11px; font-weight: 800; text-transform: uppercase; margin-bottom: 5px; display: block; }
.item-title { margin: 0 0 8px 0; font-size: 18px; font-weight: 800; line-height: 1.2; }
.item-title a { color: #1a1a1a; text-decoration: none; transition: 0.3s; }
.item-title a:hover { color: #cc0000; }

.item-excerpt {
    font-size: 14px;
    color: #777;
    line-height: 1.5;
    margin: 0;
    /* 强制单行显示，防止字数多撑破盒子 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 按钮移动到最右侧 */
.item-more-btn {
    font-size: 15px;
    font-weight: 900;
    color: #1a1a1a;
    text-decoration: none;
    letter-spacing: 1px;
    transition: 0.3s;
    
    /* 🚨 核心魔法：在 Flex 布局中，强制把自己推到最右边 */
    align-self: flex-end; 
    
    display: inline-flex;
    align-items: center;
}
.item-more-btn .x-icon {
    font-style: normal;
    margin-left: 6px;
    transition: transform 0.3s ease;
}

/* 鼠标悬停时，箭头向右推进，颜色变红 */
.item-more-btn:hover { color: #cc0000; }
.item-more-btn:hover .x-icon { transform: translateX(5px); }

/* 分页器 */
.pagination-box { margin-top: 50px; text-align: center; }
.pagination-box .page-numbers {
    display: inline-block; padding: 10px 18px; border: 1px solid #ddd;
    margin: 0 4px; text-decoration: none; color: #333; font-weight: 700; font-size: 14px;
}
.pagination-box .current { background: #cc0000; color: #fff; border-color: #cc0000; }

/* ==========================================
   💻 阶段一：平板端自适应 (max-width: 1024px)
   ========================================== */
@media (max-width: 1024px) {
    /* 缩小过滤按钮，防止平板上一行放不下 */
    .filter-link { padding: 14px 25px; font-size: 14px; }

    /* 压缩新闻列表的图片占比，给文字留足空间 */
    .item-img-frame { width: 220px; }
    .item-text-area { padding: 20px 25px; }
    .item-title { font-size: 16px; }
}

/* ==========================================
   📱 阶段二：手机端极限自适应 (max-width: 768px)
   ========================================== */
@media (max-width: 768px) {
    /* 1. 🚨 强行破拆：用 !important 压制电脑端的 480px 死锁 */
    .news-hero-full { 
        height: 320px !important; 
        min-height: 320px !important; 
        max-height: 320px !important; 
    }
    .hero-physical-img {
        height: 320px !important; 
        max-height: 320px !important; 
    }
    .hero-main-title { font-size: 38px; }
    .hero-line { width: 50px; margin-top: 15px; }
    .xinshui-news-page-content { padding: 40px 0 60px; }

    /* 2. 筛选菜单：彻底无框，纯文字横向滑动 (大厂 App 级排版) */
    .news-filter-nav { 
        display: flex; 
        justify-content: flex-start; /* 靠左对齐，引导滑动 */
        gap: 25px; /* 🚨 彻底拉开字与字的间距，绝不拥挤 */
        margin-bottom: 30px; 
        
        /* 核心防拥挤魔法：绝对不换行，超出的部分变成丝滑横向滑动 */
        flex-wrap: nowrap; 
        overflow-x: auto; 
        -webkit-overflow-scrolling: touch; 
        padding-bottom: 10px; /* 给下方活动红线留点空间 */
        padding-left: 20px; /* 左侧留出呼吸感 */
    }
    
    /* 隐藏丑陋的原生横向滚动条，但保留滑动功能 */
    .news-filter-nav::-webkit-scrollbar { display: none; }
    .news-filter-nav { -ms-overflow-style: none; scrollbar-width: none; }

    .filter-link { 
        background: transparent !important; 
        color: #999999 !important; /* 未选中时是非常低调的浅灰 */
        border: none !important; /* 🔪 彻底干掉所有框框 */
        padding: 0; /* 剥离内边距 */
        font-size: 15px; 
        font-weight: 700;
        white-space: nowrap; /* 强制文字绝不折行 */
        clip-path: none !important; /* 必须关掉切角 */
        position: relative;
    }

    /* 激活状态：文字变成工业红，底下出现一条极简短横线 */
    .filter-link.active, 
    .filter-link:hover { 
        background: transparent !important; 
        color: #cc0000 !important; /* 亮起红色 */
        transform: none !important; 
    }
    
    /* 用极其克制的小红线来标记当前所在的分类 */
    .filter-link.active::after { 
        content: ''; 
        display: block !important; 
        position: absolute; 
        bottom: -6px; 
        left: 0; 
        width: 100%; 
        height: 2px; 
        background: #cc0000; 
    }
   

    /* 3. 新闻卡片：改为上下堆叠结构 */
    .slim-news-item { 
        flex-direction: column; 
        height: auto !important; 
    }
    
    /* 🚨 核心防抖：取消悬停位移，防止手机端点按屏幕时发生页面乱跳 */
    .slim-news-item:hover { transform: none; box-shadow: none; border-left: 1px solid #eee; }

    /* 图片铺满全宽 */
    .item-img-frame { width: 100%; height: 220px; }
    
    /* 缩小左上角日期标签 */
    .item-date { padding: 8px 12px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%); }
    .item-date .d { font-size: 18px; }

    /* 释放文字区域的疯狂内边距 */
    .item-text-area { padding: 20px; }
    .item-title { font-size: 18px; margin-bottom: 12px; }
    .item-excerpt { -webkit-line-clamp: 3; line-clamp: 3; margin-bottom: 20px; } /* 手机端变成上下结构后，多给一行摘要的空间 */
    
    /* 方案 B：机甲切角风 */
    .item-more-btn { 
        margin-top: 15px;
        padding: 12px 0; 
        width: 100%; 
        background: #000000; /* 纯黑底色 */
        color: #ffffff !important; /* 纯白文字 */
        justify-content: center; /* 绝对居中 */
        font-size: 14px;
        /* 缩小版的工业切角 */
        clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    }
    .item-more-btn .x-icon { color: #cc0000; } /* 箭头点缀红色 */
}

/*新闻详情页*/
/* ==========================================
   一、 解决页头穿透与整体容器
   ========================================== */
#content, .site-content { padding-top: 0 !important; }
.xinshui-single-news-wrapper { background: #ffffff; padding-bottom: 100px; margin-top: 0 !important; }

/* ==========================================
   二、 详情页全宽 Hero (🚨 标题回到图中，上下居中，靠左)
   ========================================== */
.single-hero-full {
    width: 100vw;
    height: 480px !important;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-top: 0 !important; 
    overflow: hidden;
    z-index: 1;
    
    /* 核心魔法：让内部文字容器在 480px 的高度里绝对垂直居中 */
    display: flex;
    align-items: center; 
}

.hero-physical-img { 
    position: absolute;
    top: 0; left: 0;
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    z-index: 1;
}

.hero-overlay-dark {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 100%);
    z-index: 2;
}

.hero-content-left {
    position: relative;
    z-index: 5;
    width: 100%;
    text-align: left; /* 靠左对齐 */
    margin-top: 40px;
}

.single-news-title { 
    font-size: clamp(32px, 4vw, 48px); 
    font-weight: 900; 
    color: #ffffff; /* 白字配黑底遮罩 */
    line-height: 1.3; 
    margin: 0; 
    max-width: 900px; 
    text-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.hero-line-left { 
    width: 80px; 
    height: 5px; 
    background: #cc0000; 
    margin: 25px 0 0 0; 
}

/* ==========================================
   三、 沉浸式正文区 (日期分类在左上角，宽度 1300px)
   ========================================== */
.single-news-content { padding-top: 50px; }

.news-content-container { 
    max-width: 1300px !important; 
    margin: 0 auto; 
    padding: 0 40px; 
}

/* 左上角 Meta (分类与日期) */
.detail-meta-top { 
    margin-bottom: 40px; /* 距离正文稍微拉开一点 */
    display: flex; 
    gap: 15px; 
    font-size: 14px; 
    font-weight: 800; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
}
.detail-meta-top .meta-cat { color: #cc0000; }
.detail-meta-top .meta-date { color: #888; }

/* 正文基础排版 */
.the-content-area { font-size: 16px; color: #444; line-height: 2; }
.the-content-area p { margin-bottom: 25px; }
/* ==========================================
   顶级公关稿风格：左侧悬浮 (完美兼容图片引用/说明)
   ========================================== */

/* 1. 🚨 核心：让“包裹图片的整个容器”向左悬浮，而不是单指图片 */
.the-content-area figure.wp-block-image, 
.the-content-area div.wp-caption {
    float: left !important; 
    width: 550px !important; /* 锁定容器宽度 */
    max-width: 60% !important; /* 最大不超过一半 */
    margin: 10px 20px 0px 0px !important; /* 右侧和下方推开文字 */
    padding: 0 !important;
}

/* 2. 图片铺满容器，并加上高级质感 */
.the-content-area figure.wp-block-image img,
.the-content-area div.wp-caption img {
    width: 100% !important; /* 在 420px 的盒子里撑满 */
    height: auto !important;
    margin: 0 !important; /* 内部不需要边距 */
    border-radius: 6px; 
    border: none !important; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* 3. 🚨 精致排版：图片底下的引用/说明文字 */
.the-content-area figcaption,
.the-content-area .wp-caption-text {
    text-align: center !important; /* 引用文字居中 */
    font-size: 13px !important;
    color: #888888 !important; /* 高级的高级灰 */
    margin-top: 12px !important; /* 和图片拉开一点距离 */
    line-height: 1.5;
    font-style: italic; /* 微微倾斜，显得专业 */
}

/* 4. 如果有的图片没有添加引用，只是光秃秃的一张图，加上这个备用保护 */
.the-content-area > img {
    float: left !important;
    width: 420px !important; 
    max-width: 50% !important;
    margin: 10px 40px 30px 0 !important;
    border-radius: 6px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* 5. 护城河：清除浮动，防止排版崩溃 */
.the-content-area::after {
    content: "";
    display: table;
    clear: both;
}

/* 工业级参数表格 (保留你的原设计) */
.the-content-area table { width: 100% !important; border-collapse: collapse; margin: 60px 0; font-size: 15px; background: #ffffff; border-top: 2px solid #111111; border-bottom: 2px solid #111111; display: table !important; }
.the-content-area th { padding: 20px 15px; text-align: left; font-weight: 700; color: #000; text-transform: uppercase; letter-spacing: 1.5px; border-bottom: 1px solid #111111; background: #f9f9f9; }
.the-content-area td { padding: 18px 15px; border-bottom: 1px solid #eeeeee; color: #444; line-height: 1.5; }
.the-content-area tr:last-child td { border-bottom: none; }
.the-content-area tr:hover td { background: #fcfcfc; }

/* ==========================================
   排版护城河：防止章节图片互相串台
   ========================================== */
.the-content-area h2,
.the-content-area h3,
.the-content-area h4,
.the-content-area h5 {
    clear: both !important; /* 🚨 核心：强制清除上方所有的图片浮动 */
    margin-top: 60px !important; /* 强制给新章节的上方留出足够的呼吸空间 */
    display: block;
}
/* ... (你原本的 table 样式不用动，保留即可) ... */

/* ==========================================
   四、 幽灵返回按钮 (升级为 CNC 机甲风按键！)
   ========================================== */
.back-to-news { 
    margin-top: 80px; 
    padding-top: 40px; 
    border-top: 1px solid #e5e5e5; 
    text-align: left; /* 放左边更好看 */
}

.btn-back { 
    /* 🚨 核心修改 3：升级为厚重的工业金属切割按钮 */
    color: #ffffff !important; 
    background-color: #000000;
    padding: 16px 35px;
    font-size: 15px; 
    font-weight: 800; 
    text-decoration: none; 
    text-transform: uppercase;
    letter-spacing: 2px;
    display: inline-flex;
    align-items: center;
    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    /* 经典六边形切角 */
    clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
}

.btn-back .arrow { 
    margin-right: 12px; 
    font-size: 18px;
    transition: 0.3s; 
}

.btn-back:hover { 
    background-color: #cc0000; /* 悬停变红 */
    color: #ffffff !important;
    transform: translateX(-8px); /* 悬停时整个按钮向左冲刺，暗示“返回” */
}

/* ==========================================
   💻 阶段一：平板端自适应 (满宽等分 + 消除边框突出)
   ========================================== */
@media (max-width: 1024px) {
    /* 缩小左右留白 */
    .news-content-container { padding: 0 30px; }
    
    /* 图片保持左侧占位，百分比防挤压 */
    .the-content-area figure.wp-block-image, 
    .the-content-area div.wp-caption,
    .the-content-area > img {
        width: 45% !important; 
        max-width: 45% !important;
        margin-right: 25px !important;
        float: left !important; 
    }

    /* 🚨 1. 外层容器：强行清理浮动，切掉刺出来的边框 */
    .the-content-area figure.wp-block-table,
    .the-content-area .wp-block-table,
    .the-content-area .tablepress-wrapper {
        clear: both !important;
        display: block !important;
        width: 100% !important;
        overflow-x: hidden !important; /* 🚨 核心防刺出：把溢出的黑线切掉 */
        margin: 50px 0 !important; 
    }

    /* 🚨 2. 表格本体：满屏幕平分宽度，解决向左萎缩 */
    .the-content-area table {
        clear: both !important;
        display: table !important; /* 绝对不能用 block，必须用 table */
        width: 100% !important; /* 强行撑满屏幕 */
        max-width: 100% !important; /* 锁死最大宽度 */
        
        box-sizing: border-box !important; /* 🚨 核心防刺出：把边框的厚度算进 100% 里 */
        table-layout: fixed !important; /* 🌟 魔法：无视文字多少，强行把三列（型号/DN/环境）完全平分填满！ */
        
        margin: 0 !important;
        border-collapse: collapse !important;
    }

    /* 🚨 3. 单元格内部：居中对齐，视觉极度匀称 */
    .the-content-area th, 
    .the-content-area td {
        white-space: normal !important; /* 允许换行 */
        word-wrap: break-word !important;
        text-align: center !important; /* 文字居中，大气磅礴 */
        padding: 16px 10px !important;
    }
}
/* ==========================================
   📱 阶段二：手机端极限自适应 (max-width: 768px)
   ========================================== */
@media (max-width: 768px) {
    /* 1. Hero 区域压榨高度，防止一屏全是图，给正文留出视野 */
    .single-hero-full { height: 320px !important; }
    .hero-content-left { margin-top: 20px; }
    .single-news-title { font-size: 26px; }
    .hero-line-left { margin: 15px 0 0 0; width: 60px; }

    /* 2. 容器边距压缩 */
    .news-content-container { padding: 0 20px; }
    .single-news-content { padding-top: 30px; }
    
    /* Meta 信息改为上下排列，更紧凑 */
    .detail-meta-top { flex-direction: column; gap: 8px; margin-bottom: 30px; }

    /* 3. 🚨 核心修复：彻底干掉浮动排版，手机端改为“上下堆叠” */
    .the-content-area figure.wp-block-image, 
    .the-content-area div.wp-caption,
    .the-content-area > img {
        float: none !important; /* 取消悬浮 */
        width: 100% !important; /* 强制撑满手机屏幕 */
        max-width: 100% !important; 
        margin: 25px 0 !important; /* 取消右侧推力，改为上下留白 */
    }

    /* 4. 🚨 防侧漏终极魔法：无需改 HTML 就能让原生表格横向滑动 */
    .the-content-area table {
        display: table !important;
        width: 100% !important;
        overflow-x: auto; /* 开启横向滚动条 */
        -webkit-overflow-scrolling: touch; /* 开启苹果设备的丝滑滚动 */
        border-bottom: 2px solid #111111;
    }
    .the-content-area th, .the-content-area td {
        white-space: nowrap; /* 强制表格内容不换行，保持整齐划一 */
    }

    /* 5. CNC 按钮拉满全宽，增加触摸面积 */
    .back-to-news { margin-top: 50px; padding-top: 30px; text-align: center; }
    .btn-back { 
        width: 100%; 
        justify-content: center; 
        box-sizing: border-box; 
    }
}