/* ====================== 【全局公共基础样式】所有页面共用，不做任何改动 ====================== */
:root {
    --primary-color: #1b5e20;
    --accent-color: #2e7d32;
    --hover-color: #43a047;
    --dark-bg: #111a12;
    --light-bg: #f8faf8;
    --card-bg: #ffffff;
    --text-main: #2c3e50;
    --text-light: #666666;
    --footer-text: #a0b2a6;
    --wa-color: #25d366;
    --border-color: #e2e8e2;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: "PingFang SC", "Microsoft YaHei", sans-serif; color: var(--text-main); line-height: 1.6; background-color: #fff; }
.top-bar { background: var(--primary-color); color: #e8f5e9; font-size: 13px; padding: 8px 5%; text-align: center; }
header {
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
}
.header-container {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 30px;
    width: 100%;
}
.brand-cluster {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
}
.logo-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-decoration: none;
    align-items: flex-start;
}
.logo-top-row { display: flex; align-items: center; gap: 8px; line-height: 1; }
.logo-icon { font-size: 21px; color: var(--accent-color); display: flex; align-items: center; }
.logo-en { font-size: 20px; font-weight: 900; color: var(--primary-color); letter-spacing: 1.5px; font-family: 'Arial Black', sans-serif; line-height: 1.1; }
.logo-cn-sub { display: flex; align-items: baseline; gap: 8px; margin-top: 3px; }
.logo-cn { font-size: 13px; font-weight: 800; color: #2c3e50; letter-spacing: 1px; line-height: 1; }
.logo-slogan { font-size: 10.5px; color: var(--accent-color); font-weight: 600; letter-spacing: 0.5px; white-space: nowrap; line-height: 1; }
.brand-divider {
    width: 1px;
    height: 32px;
    background-color: #d1ded1;
}
.header-trust-badge {
    display: flex;
    align-items: center;
    gap: 9px;
    background: linear-gradient(135deg, #f4f9f4 0%, #eef5ef 100%);
    border: 1px solid #c8e6c9;
    padding: 4px 10px;
    border-radius: 6px;
    white-space: nowrap;
}
.secure-emblem {
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, var(--accent-color), #1b5e20);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(46,125,50,0.25);
}
.badge-text-stack {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.25;
    text-align: left;
}
.badge-row-1 {
    font-size: 11.5px;
    color: var(--text-main);
    font-weight: 600;
}
.badge-row-1 .highlight {
    color: var(--primary-color);
    font-weight: 800;
}
.badge-row-2 {
    font-size: 11px;
    color: var(--accent-color);
    font-weight: 700;
    letter-spacing: 0.2px;
}
.header-right-group {
    display: flex;
    align-items: center;
    gap: 20px;
}

nav { display: flex; gap: 18px; align-items: center; }
nav a { text-decoration: none; color: var(--text-main); font-weight: 500; font-size: 13.5px; transition: color 0.3s; padding: 6px 0; white-space: nowrap; }
nav a:hover, nav a.active { color: var(--accent-color); font-weight: 600; }
.dropdown { position: relative; display: inline-block; }
.dropdown-menu {
    display: none; position: absolute; top: 100%; left: 0; background-color: #ffffff;
    min-width: 150px; box-shadow: 0 8px 20px rgba(0,0,0,0.12); border-radius: 6px;
    padding: 8px 0; z-index: 1001; border: 1px solid #eef2ee;
}
.dropdown-menu a { color: var(--text-main); padding: 9px 16px; text-decoration: none; display: block; font-size: 13.5px; transition: background 0.2s, color 0.2s; }
.dropdown-menu a:hover { background-color: #f0f7f0; color: var(--primary-color); font-weight: 600; }
.dropdown:hover .dropdown-menu { display: block; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.lang-switch { display: flex; background: #f0f4f1; padding: 3px; border-radius: 20px; border: 1px solid #e0e8e1; }
.lang-btn { text-decoration: none; font-size: 11.5px; padding: 3px 7px; border-radius: 15px; color: var(--text-light); font-weight: 600; }
.lang-btn.active { background: var(--primary-color); color: #fff; }
.btn-quote { background: var(--accent-color); color: #fff; padding: 7px 15px; border-radius: 6px; text-decoration: none; font-size: 13px; font-weight: 600; white-space: nowrap; transition: background 0.3s; }
.btn-quote:hover { background: var(--hover-color); }
.mobile-menu-btn { display: none; font-size: 24px; cursor: pointer; color: var(--primary-color); }
.section-container { max-width: 1280px; margin: 0 auto; padding: 70px 20px; }
        /* 子页通用 Banner 区域 */
        .page-hero {
            background: linear-gradient(rgba(10, 30, 12, 0.75), rgba(6, 20, 8, 0.85)), #3e5241;
            color: #fff;
            padding: 70px 5%;
            text-align: center;
        }
        .page-hero h1 { font-size: 36px; margin-bottom: 12px; font-weight: 800; }
        .page-hero p { font-size: 15px; max-width: 700px; margin: 0 auto; opacity: 0.9; }

        /* 资质页面主体容器 */
        .certs-container {
            max-width: 1100px;
            margin: -40px auto 70px;
            background: #ffffff;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
            border: 1px solid var(--border-color);
            padding: 50px 60px;
            position: relative;
            z-index: 10;
        }

        .intro-lead {
            font-size: 16px;
            color: var(--text-main);
            line-height: 1.8;
            margin-bottom: 40px;
            text-align: center;
            max-width: 850px;
            margin-left: auto;
            margin-right: auto;
        }

        .intro-lead strong {
            color: var(--primary-color);
        }

        /* 资质卡片网格布局 */
        .certs-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 30px;
            margin-bottom: 50px;
        }

        .cert-card {
            background: var(--light-bg);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: 30px;
            display: flex;
            flex-direction: column;
            gap: 15px;
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .cert-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(27,94,32,0.08);
            border-color: var(--accent-color);
        }

        .cert-header {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .cert-icon {
            width: 50px;
            height: 50px;
            background: var(--primary-color);
            color: #fff;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            flex-shrink: 0;
        }

        .cert-title-group h3 {
            font-size: 18px;
            color: var(--primary-color);
            font-weight: 700;
        }

        .cert-title-group span {
            font-size: 12px;
            color: var(--accent-color);
            font-weight: 600;
            background: #e8f5e9;
            padding: 2px 8px;
            border-radius: 4px;
            display: inline-block;
            margin-top: 4px;
        }

        .cert-desc {
            font-size: 14px;
            color: var(--text-main);
            line-height: 1.7;
        }

        .cert-features {
            list-style: none;
            margin-top: 5px;
        }

        .cert-features li {
            font-size: 13.5px;
            color: var(--text-light);
            margin-bottom: 6px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .cert-features li::before {
            content: '✓';
            color: var(--accent-color);
            font-weight: 700;
        }

        /* === 证书展示墙样式（含点击弹出放大效果） === */
        .cert-gallery-section {
            margin-bottom: 50px;
        }

        .section-title-box {
            text-align: center;
            margin-bottom: 30px;
        }

        .section-title-box h2 {
            font-size: 24px;
            color: var(--primary-color);
            font-weight: 800;
            margin-bottom: 8px;
        }

        .section-title-box p {
            font-size: 14px;
            color: var(--text-light);
        }

        .cert-gallery-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 25px;
        }

        .cert-thumb-card {
            background: #fff;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0,0,0,0.03);
            transition: transform 0.3s, box-shadow 0.3s;
            cursor: pointer; /* 提示可点击弹出 */
        }

        .cert-thumb-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 20px rgba(27,94,32,0.1);
            border-color: var(--accent-color);
        }

        .cert-img-frame {
            width: 100%;
            height: 220px;
            background: #eef2ee;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }

        /* 证书占位符样式：后期可直接更换为正式的 <img> 标签 */
        .cert-img-placeholder {
            text-align: center;
            color: #55705a;
            padding: 20px;
        }

        .cert-img-placeholder .placeholder-icon {
            font-size: 40px;
            margin-bottom: 8px;
        }

        .cert-img-placeholder .placeholder-text {
            font-size: 13px;
            font-weight: 600;
        }

        .cert-img-frame::after {
            content: '点击放大查看';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(27, 94, 32, 0.8);
            color: #fff;
            font-size: 12px;
            text-align: center;
            padding: 4px;
            transform: translateY(100%);
            transition: transform 0.3s ease;
        }

        .cert-thumb-card:hover .cert-img-frame::after {
            transform: translateY(0);
        }

        .cert-caption {
            padding: 15px;
            text-align: center;
            background: #fafbfc;
            border-top: 1px solid var(--border-color);
        }

        .cert-caption h4 {
            font-size: 14.5px;
            color: var(--primary-color);
            font-weight: 700;
            margin-bottom: 4px;
        }

        .cert-caption p {
            font-size: 12px;
            color: var(--text-light);
        }

        /* === 证书弹窗灯箱 (LightBox) 样式 === */
        .cert-lightbox-modal {
            display: none; /* 默认隐藏 */
            position: fixed;
            z-index: 99999;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .cert-lightbox-content {
            background: #fff;
            max-width: 650px;
            width: 100%;
            border-radius: 10px;
            overflow: hidden;
            position: relative;
            box-shadow: 0 15px 40px rgba(0,0,0,0.3);
            animation: modalZoomIn 0.3s ease;
        }

        @keyframes modalZoomIn {
            from { transform: scale(0.9); opacity: 0; }
            to { transform: scale(1); opacity: 1; }
        }

        .lightbox-close-btn {
            position: absolute;
            top: 15px;
            right: 20px;
            font-size: 26px;
            color: #666;
            cursor: pointer;
            z-index: 10;
            background: none;
            border: none;
            font-weight: bold;
        }

        .lightbox-close-btn:hover {
            color: var(--primary-color);
        }

        .lightbox-body {
            padding: 40px 30px 30px;
            text-align: center;
        }

        .lightbox-img-box {
            width: 100%;
            height: 380px;
            background: #eef2ee;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
            border: 1px dashed var(--accent-color);
        }

        .lightbox-placeholder-content {
            color: var(--primary-color);
        }

        .lightbox-placeholder-content .lb-icon {
            font-size: 60px;
            margin-bottom: 10px;
        }

        .lightbox-placeholder-content .lb-text {
            font-size: 16px;
            font-weight: 700;
        }

        .lightbox-body h3 {
            font-size: 20px;
            color: var(--primary-color);
            margin-bottom: 8px;
        }

        .lightbox-body p {
            font-size: 14px;
            color: var(--text-light);
        }

        /* 国际出口标准说明区 */
        .export-standards-section {
            background: linear-gradient(135deg, #f4f9f4 0%, #eef5ef 100%);
            border: 1px solid #c8e6c9;
            border-radius: 10px;
            padding: 40px;
            margin-bottom: 40px;
        }

        .export-standards-section h2 {
            font-size: 22px;
            color: var(--primary-color);
            margin-bottom: 15px;
            font-weight: 700;
            text-align: center;
        }

        .export-standards-section p {
            font-size: 14.5px;
            color: var(--text-main);
            text-align: center;
            max-width: 800px;
            margin: 0 auto 25px;
        }

        .export-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }

        .export-item {
            background: #ffffff;
            padding: 20px;
            border-radius: 8px;
            border: 1px solid #d2e7d3;
            text-align: center;
        }

        .export-item h4 {
            font-size: 15px;
            color: var(--primary-color);
            margin-bottom: 8px;
            font-weight: 700;
        }

        .export-item p {
            font-size: 13px;
            color: var(--text-light);
            margin: 0;
            text-align: center;
        }

        /* 样品与检测索取引导栏 */
        .cta-banner {
            background: var(--primary-color);
            color: #fff;
            padding: 35px 40px;
            border-radius: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20px;
        }

        .cta-banner-text h3 {
            font-size: 20px;
            margin-bottom: 8px;
            font-weight: 700;
        }

        .cta-banner-text p {
            font-size: 14px;
            opacity: 0.9;
            margin: 0;
        }

        .cta-btn-group {
            display: flex;
            gap: 12px;
            flex-shrink: 0;
        }

        .btn-white {
            background: #ffffff;
            color: var(--primary-color);
            padding: 10px 20px;
            border-radius: 6px;
            text-decoration: none;
            font-size: 14px;
            font-weight: 700;
            transition: background 0.3s;
        }

        .btn-white:hover {
            background: #f0f0f0;
        }

        .btn-wa-action {
            background: var(--wa-color);
            color: #ffffff;
            padding: 10px 20px;
            border-radius: 6px;
            text-decoration: none;
            font-size: 14px;
            font-weight: 700;
            transition: opacity 0.3s;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .btn-wa-action:hover {
            opacity: 0.9;
        }
footer { background: var(--dark-bg); color: var(--footer-text); padding: 60px 0 20px; font-size: 13.5px; border-top: 3px solid var(--accent-color); }
.footer-container { max-width: 1280px; margin: 0 auto; padding: 0 25px; display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 40px; }
.footer-col h4 { color: #ffffff; font-size: 15px; font-weight: 700; margin-bottom: 18px; position: relative; padding-bottom: 8px; }
.footer-col h4::after { content: ''; position: absolute; bottom: 0; left: 0; width: 30px; height: 2px; background-color: var(--accent-color); }
.footer-brand .footer-logo { display: flex; flex-direction: column; margin-bottom: 15px; }
.footer-brand .footer-logo .en { font-size: 20px; font-weight: 900; color: #fff; font-family: 'Arial Black', sans-serif; }
.footer-brand .footer-logo .cn { font-size: 13px; color: #81c784; font-weight: 700; margin-top: 2px; }
.footer-brand p { line-height: 1.7; font-size: 13px; opacity: 0.85; margin-bottom: 15px; }
.cert-badges-mini { display: flex; gap: 8px; flex-wrap: wrap; }
.cert-tag { background: rgba(255,255,255,0.08); color: #e8f5e9; padding: 3px 8px; border-radius: 4px; font-size: 11px; border: 1px solid rgba(255,255,255,0.12); }
.footer-links { list-style: none; }
.footer-links li { margin-bottom: 10px; }
.footer-links a { color: var(--footer-text); text-decoration: none; transition: color 0.2s, padding-left 0.2s; display: inline-block; }
.footer-links a:hover { color: #ffffff; padding-left: 4px; }
.footer-contact-item { display: flex; gap: 10px; margin-bottom: 12px; align-items: flex-start; line-height: 1.5; }
.footer-contact-item .icon { color: var(--accent-color); font-size: 15px; }
.footer-contact-item a { color: var(--footer-text); text-decoration: none; }
.footer-contact-item a:hover { color: #fff; }
.footer-bottom { max-width: 1280px; margin: 40px auto 0; padding: 20px 25px 0; border-top: 1px solid rgba(255,255,255,0.08); display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; flex-wrap: wrap; gap: 10px; }
.footer-bottom-links { display: flex; gap: 15px; }
.footer-bottom-links a { color: var(--footer-text); text-decoration: none; }
.footer-bottom-links a:hover { color: #fff; }
.whatsapp-float { position: fixed; bottom: 25px; right: 25px; background-color: var(--wa-color); color: #FFF; border-radius: 50px; padding: 10px 18px; z-index: 9999; display: flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 600; font-size: 13.5px; box-shadow: 2px 5px 15px rgba(0,0,0,0.3); }


/* ====================== 【首页页面独有样式】 ====================== */
 /* ==========================================================
           【新手重点看这里】首屏 Banner 背景图设置位置
           ==========================================================
           当前为了保证不加载外部图片出错，默认使用的是深绿色纯色。
           如果你想换成真实的茶园背景图片，请修改下面这一行的 background 属性：
           例如改成：
           background: linear-gradient(rgba(10, 30, 12, 0.72), rgba(6, 20, 8, 0.80)), url('你的图片链接或文件名.jpg') center/cover no-repeat;
           ========================================================== */
        .hero { 
            /*background: linear-gradient(rgba(10, 30, 12, 0.72), rgba(6, 20, 8, 0.80)), center/cover no-repeat; */
            background: linear-gradient(rgba(10, 30, 12, 0.72), rgba(6, 20, 8, 0.80)), url('/static/upload/image/20260830/1788086909413910.gif') center/cover no-repeat;
            background-color: #3e5241; 
            color: #fff; 
            padding: 110px 5%; 
            text-align: center; 
        }
        
.hero h1 { font-size: 38px; margin-bottom: 18px; font-weight: 800; line-height: 1.3; text-shadow: 0 2px 4px rgba(0,0,0,0.4); }
.hero p { font-size: 16px; max-width: 800px; margin: 0 auto 28px; opacity: 0.95; line-height: 1.7; text-shadow: 0 1px 2px rgba(0,0,0,0.3); }
.badges { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 30px; }
.badge-item { background: rgba(255,255,255,0.18); backdrop-filter: blur(6px); padding: 7px 16px; border-radius: 25px; font-size: 13.5px; border: 1px solid rgba(255,255,255,0.25); font-weight: 500; }
.hero-btns .btn { padding: 12px 26px; border-radius: 6px; text-decoration: none; font-weight: bold; margin: 6px; display: inline-block; font-size: 14.5px; transition: all 0.3s; }
.btn-main { background: var(--accent-color); color: #fff; box-shadow: 0 4px 12px rgba(46,125,50,0.4); }
.btn-main:hover { background: var(--hover-color); transform: translateY(-2px); }
.btn-sub { border: 1px solid rgba(255,255,255,0.8); color: #fff; background: rgba(0,0,0,0.25); }
.btn-sub:hover { background: rgba(255,255,255,0.25); transform: translateY(-2px); }
.products-section { background-color: var(--light-bg); }
.product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; }
.product-card { background: var(--card-bg); border-radius: 8px; overflow: hidden; border: 1px solid var(--border-color); box-shadow: 0 4px 12px rgba(0,0,0,0.03); transition: transform 0.3s, box-shadow 0.3s; }
.product-card:hover { transform: translateY(-5px); box-shadow: 0 12px 24px rgba(0,0,0,0.08); }
.product-img { height: 200px; background-color: #e2ebe2; display: flex; align-items: center; justify-content: center; font-size: 40px; color: var(--accent-color); position: relative; }
.product-tag { position: absolute; top: 12px; left: 12px; background: var(--primary-color); color: #fff; font-size: 11px; padding: 3px 8px; border-radius: 4px; font-weight: 600; }
.product-info { padding: 20px; }
.product-info h3 { font-size: 18px; margin-bottom: 8px; color: var(--text-main); }
.product-info p { font-size: 13.5px; color: var(--text-light); margin-bottom: 15px; line-height: 1.5; }
.product-specs { list-style: none; margin-bottom: 18px; font-size: 12.5px; color: #555; }
.product-specs li { margin-bottom: 5px; display: flex; justify-content: space-between; border-bottom: 1px solid #f0f0f0; padding-bottom: 3px; }
.btn-card { display: block; text-align: center; background: #f0f7f0; color: var(--primary-color); padding: 9px 0; border-radius: 5px; text-decoration: none; font-size: 13.5px; font-weight: 700; transition: background 0.2s, color 0.2s; }
.btn-card:hover { background: var(--primary-color); color: #fff; }
.capacity-section { background-color: #ffffff; }
.capacity-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; }
.capacity-card { text-align: center; padding: 30px 20px; border-radius: 8px; background: #fafdfa; border: 1px solid #eaf2ea; }
.capacity-icon { font-size: 38px; margin-bottom: 15px; display: inline-block; }
.capacity-card h3 { font-size: 17px; color: var(--primary-color); margin-bottom: 10px; font-weight: 700; }
.capacity-card p { font-size: 13.5px; color: var(--text-light); line-height: 1.6; }
.capacity-number { font-size: 32px; font-weight: 900; color: var(--accent-color); margin: 10px 0; font-family: 'Arial Black', sans-serif; }
.news-section { background-color: var(--light-bg); }
.news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 25px; }
.news-card { background: #fff; border-radius: 8px; overflow: hidden; border: 1px solid var(--border-color); display: flex; flex-direction: column; }
.news-body { padding: 22px; flex-grow: 1; display: flex; flex-direction: column; }
.news-date { font-size: 12px; color: var(--accent-color); font-weight: 700; margin-bottom: 8px; }
.news-body h3 { font-size: 16px; margin-bottom: 10px; line-height: 1.4; }
.news-body h3 a { color: var(--text-main); text-decoration: none; transition: color 0.2s; }
.news-body h3 a:hover { color: var(--accent-color); }
.news-body p { font-size: 13px; color: var(--text-light); line-height: 1.6; margin-bottom: 15px; flex-grow: 1; }
.news-link { font-size: 13px; font-weight: 700; color: var(--primary-color); text-decoration: none; }
.news-link:hover { text-decoration: underline; }
.rfq-section { background: var(--primary-color); color: #fff; padding: 60px 5%; }
.rfq-container { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: start; }
.rfq-info { text-align: left; }
.rfq-info h2 { font-size: 28px; font-weight: 800; margin-bottom: 15px; line-height: 1.3; }
.rfq-info p { font-size: 14.5px; opacity: 0.9; line-height: 1.6; margin-bottom: 25px; }
.rfq-feature-list { list-style: none; margin-bottom: 25px; }
.rfq-feature-item { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.rfq-feature-icon { background: rgba(255,255,255,0.15); width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.rfq-feature-text h4 { font-size: 15px; font-weight: 700; color: #e8f5e9; margin-bottom: 3px; }
.rfq-feature-text p { font-size: 12.5px; margin-bottom: 0; opacity: 0.85; line-height: 1.5; }
.rfq-trust-box { background: rgba(0,0,0,0.18); padding: 15px 20px; border-radius: 8px; border-left: 4px solid var(--accent-color); font-size: 13px; opacity: 0.95; line-height: 1.5; }
.rfq-form { text-align: left; background: #fff; padding: 30px; border-radius: 10px; color: #333; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 13.5px; }
.form-group label .hint { font-size: 11.5px; color: #777; font-weight: normal; margin-left: 5px; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; font-size: 13.5px; font-family: inherit; }
.dropdown-multiselect { position: relative; width: 100%; }
.dropdown-select-box {
    width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; font-size: 13.5px;
    background: #fff; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
    user-select: none; min-height: 41px;
}
.dropdown-select-box:after { content: '▾'; font-size: 14px; color: #666; }
.dropdown-list-content {
    display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff;
    border: 1px solid #ccc; border-radius: 5px; margin-top: 4px; box-shadow: 0 6px 16px rgba(0,0,0,0.12);
    z-index: 100; max-height: 240px; overflow-y: auto; padding: 10px;
}
.dropdown-multiselect.open .dropdown-list-content { display: block; }
.multiselect-option-item {
    display: flex; align-items: center; gap: 8px; padding: 6px 8px; font-size: 13px; cursor: pointer; border-radius: 4px;
}
.multiselect-option-item:hover { background: #f0f7f0; color: var(--primary-color); }
.multiselect-option-item input { width: auto; cursor: pointer; }


/* ====================== 【茶园基地实况页面独有样式】 ====================== 基地实况背景 */
.page-header-banner {
  /*  background: linear-gradient(rgba(10, 30, 12, 0.78), rgba(6, 20, 8, 0.85)), #3e5241; */
  background: linear-gradient(rgba(10, 30, 12, 0.72), rgba(6, 20, 8, 0.80)), url('/static/upload/image/20260830/1788086909413910.gif') center/cover no-repeat;
    color: #fff;
    padding: 75px 5%;
    text-align: center;
}
.page-header-banner h1 { font-size: 36px; margin-bottom: 12px; font-weight: 800; letter-spacing: 0.5px; }
.page-header-banner p { font-size: 15.5px; max-width: 850px; margin: 0 auto; opacity: 0.95; line-height: 1.7; }
.intro-section { background-color: #fff; }
.intro-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 50px; align-items: center; margin-bottom: 60px; }
.intro-grid.reverse { grid-template-columns: 0.9fr 1.1fr; }
.intro-text h2 { font-size: 26px; color: var(--primary-color); margin-bottom: 18px; font-weight: 800; }
.intro-text p { font-size: 14.5px; color: var(--text-light); line-height: 1.8; margin-bottom: 15px; }
.intro-features { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 25px; }
.intro-feature-box { background: var(--light-bg); padding: 16px; border-radius: 6px; border-left: 3px solid var(--accent-color); box-shadow: 0 2px 8px rgba(0,0,0,0.02); }
.intro-feature-box h4 { font-size: 14px; color: var(--primary-color); margin-bottom: 6px; font-weight: 700; }
.intro-feature-box p { font-size: 12.5px; color: var(--text-light); margin-bottom: 0; line-height: 1.5; }
.intro-image-card {
    background: #e2ebe2;
    border-radius: 10px;
    height: 350px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 52px;
    color: var(--accent-color);
    box-shadow: 0 8px 25px rgba(0,0,0,0.06);
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #eaf2ea 0%, #d8e6d8 100%);
}
.intro-image-card .card-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(15, 35, 18, 0.82);
    color: #fff;
    font-size: 13px;
    padding: 10px 15px;
    text-align: center;
    font-weight: 500;
    letter-spacing: 0.5px;
}
.trust-metrics-bar {
    background: var(--light-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 30px;
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    text-align: center;
}
.metric-item h3 { font-size: 26px; color: var(--primary-color); font-weight: 900; margin-bottom: 5px; }
.metric-item p { font-size: 13px; color: var(--text-light); font-weight: 600; }
.live-section { background-color: var(--light-bg); border-top: 1px solid var(--border-color); }
.live-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 30px; }
.live-card { background: var(--card-bg); border-radius: 8px; overflow: hidden; border: 1px solid var(--border-color); box-shadow: 0 4px 15px rgba(0,0,0,0.04); transition: transform 0.3s; }
.live-card:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0,0,0,0.08); }
.live-player-box {
    position: relative;
    width: 100%;
    height: 220px;
    background-color: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.live-tag {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(220, 53, 69, 0.92);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 5px;
    z-index: 10;
}
.live-tag::before {
    content: '';
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
    animation: pulse 1.5s infinite;
}
@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}
.live-info { padding: 20px; }
.live-info h3 { font-size: 15.5px; color: var(--text-main); margin-bottom: 8px; font-weight: 700; }
.live-info p { font-size: 13px; color: var(--text-light); line-height: 1.6; margin-bottom: 12px; }
.live-stream-url {
    background: #f1f5f1;
    padding: 8px 12px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 11.5px;
    color: var(--primary-color);
    word-break: break-all;
    border: 1px dashed #cbd5cb;
}


/* ====================== 【关于我们页面独有样式】 ====================== */

.page-hero h1 { font-size: 36px; margin-bottom: 12px; font-weight: 800; }
.page-hero p { font-size: 15px; max-width: 700px; margin: 0 auto; opacity: 0.9; }
.about-intro-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 50px;
    align-items: center;
}
.about-text h3 { font-size: 24px; color: var(--primary-color); margin-bottom: 20px; font-weight: 700; line-height: 1.4; }
.about-text p { font-size: 14.5px; color: var(--text-light); line-height: 1.8; margin-bottom: 15px; }
.vision-box {
    background: #f0f7f0;
    border-left: 4px solid var(--accent-color);
    padding: 20px;
    border-radius: 0 8px 8px 0;
    margin-top: 25px;
}
.vision-box h4 { font-size: 16px; color: var(--primary-color); margin-bottom: 8px; font-weight: 700; }
.vision-box p { font-size: 13.5px; margin-bottom: 0; color: #444; }
.video-container-box {
    position: relative;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    background: #000;
    aspect-ratio: 16/9;
    display: flex;
    align-items: center;
    justify-content: center;
}
.video-container-box video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.chain-section { background-color: var(--light-bg); }
.chain-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; }
.chain-card { background: #fff; border-radius: 8px; padding: 35px 25px; border: 1px solid var(--border-color); box-shadow: 0 4px 12px rgba(0,0,0,0.03); text-align: center; transition: transform 0.3s; }
.chain-card:hover { transform: translateY(-5px); }
.chain-icon { font-size: 40px; margin-bottom: 20px; display: inline-block; }
.chain-card h3 { font-size: 18px; color: var(--primary-color); margin-bottom: 12px; font-weight: 700; }
.chain-card p { font-size: 13.5px; color: var(--text-light); line-height: 1.6; }
.cert-showcase-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 25px; }
.cert-box { background: #fafdfa; border: 1px solid #e2e8e2; border-radius: 8px; padding: 25px; text-align: left; }
.cert-box h3 { font-size: 16px; color: var(--primary-color); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.cert-box p { font-size: 13px; color: var(--text-light); line-height: 1.6; }


/* ====================== 【资质认证页面独有样式】 ================资质认证背景====== */
.cert-hero {
   /* background: linear-gradient(rgba(10, 30, 12, 0.78), rgba(6, 20, 8, 0.85)), center/cover no-repeat;*/
   background: linear-gradient(rgba(10, 30, 12, 0.72), rgba(6, 20, 8, 0.80)), url('/static/upload/image/20260830/1788086909413910.gif') center/cover no-repeat;
    background-color: #3e5241;
    color: #fff;
    padding: 90px 5%;
    text-align: center;
}
.cert-hero h1 { font-size: 36px; margin-bottom: 15px; font-weight: 800; }
.cert-hero p { font-size: 15.5px; max-width: 750px; margin: 0 auto; opacity: 0.95; line-height: 1.6; }
.trust-highlight-bar {
    background-color: #f1f8f1;
    border-bottom: 1px solid var(--border-color);
    padding: 25px 20px;
}
.trust-highlight-grid {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}
.trust-highlight-item {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #fff;
    padding: 15px 20px;
    border-radius: 8px;
    border: 1px solid #c8e6c9;
}
.trust-highlight-item .icon {
    font-size: 28px;
    flex-shrink: 0;
}
.trust-highlight-item h5 {
    font-size: 14px;
    color: var(--primary-color);
    margin-bottom: 3px;
    font-weight: 700;
}
.trust-highlight-item p {
    font-size: 12px;
    color: var(--text-light);
    line-height: 1.4;
}
.cert-grid-section { background-color: var(--light-bg); }
.cert-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 30px;
}
.cert-card {
    background: var(--card-bg);
    border-radius: 10px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
}
.cert-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}
.cert-img-box {
    width: 100%;
    height: 260px;
    background: #eef2ee;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.cert-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
}
.cert-card:hover .cert-img-box img {
    transform: scale(1.03);
}
.zoom-tip {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 12px;
    text-align: center;
    padding: 6px;
    opacity: 0;
    transition: opacity 0.3s;
}
.cert-img-box:hover .zoom-tip {
    opacity: 1;
}
.cert-tag-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(27, 94, 32, 0.88);
    backdrop-filter: blur(4px);
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11.5px;
    font-weight: 600;
}
.cert-content {
    padding: 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.cert-content h3 {
    font-size: 18px;
    color: var(--primary-color);
    margin-bottom: 10px;
    font-weight: 700;
}
.cert-content p {
    font-size: 13.5px;
    color: var(--text-light);
    line-height: 1.6;
    margin-bottom: 15px;
}
.cert-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #f0f4f0;
    padding-top: 12px;
    font-size: 12px;
    color: #777;
}
.cert-meta-row .issuer {
    font-weight: 600;
    color: var(--accent-color);
}
.credibility-extra-section {
    background-color: #ffffff;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}
.cred-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 25px;
}
.cred-card {
    background: var(--light-bg);
    border: 1px solid var(--border-color);
    padding: 30px 25px;
    border-radius: 8px;
    text-align: center;
}
.cred-card .c-icon {
    font-size: 36px;
    margin-bottom: 15px;
    display: inline-block;
}
.cred-card h4 {
    font-size: 16px;
    color: var(--primary-color);
    margin-bottom: 10px;
    font-weight: 700;
}
.cred-card p {
    font-size: 13px;
    color: var(--text-light);
    line-height: 1.6;
}
.cert-trust-banner {
    background: var(--light-bg);
    padding: 20px 20px 60px 20px;
}
.trust-banner-box {
    max-width: 1200px;
    margin: 0 auto;
    background: linear-gradient(135deg, #f4f9f4 0%, #eef5ef 100%);
    border: 1px solid #c8e6c9;
    border-radius: 10px;
    padding: 30px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
}
.trust-banner-text h4 {
    font-size: 18px;
    color: var(--primary-color);
    margin-bottom: 6px;
    font-weight: 700;
}
.trust-banner-text p {
    font-size: 13.5px;
    color: var(--text-light);
}
.lightbox-modal {
    display: none;
    position: fixed;
    z-index: 99999;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.lightbox-modal.active {
    display: flex;
}
.lightbox-content-box {
    position: relative;
    max-width: 850px;
    width: 100%;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    animation: zoomIn 0.3s ease;
}
@keyframes zoomIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
.lightbox-header {
    background: var(--primary-color);
    color: #fff;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.lightbox-close-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
}
.lightbox-body {
    padding: 20px;
    text-align: center;
    background: #f4f6f4;
}
.lightbox-body img {
    max-width: 100%;
    max-height: 60vh;
    object-fit: contain;
    border-radius: 4px;
    border: 1px solid #ccc;
}
.lightbox-footer-desc {
    padding: 15px 20px;
    font-size: 13.5px;
    color: var(--text-light);
    border-top: 1px solid #e2e8e2;
    text-align: center;
    background: #fff;
}


/* ====================== 【联系我们页面独有样式】 ====================== */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 40px;
    align-items: start;
}
.contact-info-box {
    background: var(--light-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 40px;
}
.contact-info-box h3 {
    font-size: 22px;
    color: var(--primary-color);
    margin-bottom: 20px;
    font-weight: 700;
}
.contact-info-box p {
    font-size: 14.5px;
    color: var(--text-light);
    margin-bottom: 30px;
    line-height: 1.7;
}
.info-item-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.info-row {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}
.info-icon-badge {
    width: 40px;
    height: 40px;
    background: #e8f5e9;
    color: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.info-content h4 {
    font-size: 14px;
    color: var(--text-light);
    margin-bottom: 4px;
    font-weight: 600;
}
.info-content div, .info-content a {
    font-size: 15px;
    color: var(--text-main);
    text-decoration: none;
    font-weight: 600;
}
.info-content a:hover {
    color: var(--accent-color);
}
.contact-form-box {
    background: #ffffff;
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    border-radius: 12px;
    padding: 40px;
}
.contact-form-box h3 {
    font-size: 22px;
    color: var(--primary-color);
    margin-bottom: 8px;
    font-weight: 700;
}
.contact-form-box p.form-desc {
    font-size: 14px;
    color: var(--text-light);
    margin-bottom: 25px;
}
.form-group {
    margin-bottom: 20px;
}
.form-group label {
    display: block;
    font-size: 13.5px;
    color: var(--text-main);
    font-weight: 600;
    margin-bottom: 8px;
}
.form-control {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 14px;
    color: var(--text-main);
    outline: none;
    transition: border-color 0.3s;
    background: #fafdfa;
}
.form-control:focus {
    border-color: var(--accent-color);
    background: #fff;
}
textarea.form-control {
    resize: vertical;
    min-height: 120px;
}
.checkbox-group-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    background: #fafdfa;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 12px 15px;
}
.checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--text-main);
    cursor: pointer;
}
.checkbox-item input[type="checkbox"] {
    accent-color: var(--accent-color);
    width: 16px;
    height: 16px;
    cursor: pointer;
}
.submit-btn {
    background: var(--accent-color);
    color: #fff;
    border: none;
    width: 100%;
    padding: 14px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.3s;
}
.submit-btn:hover {
    background: var(--hover-color);
}


/* ====================== 【全部合并后的响应式媒体查询，原样保留不修改】 ====================== */
@media (max-width: 1150px) {
    .header-trust-badge { display: none; }
    .brand-divider { display: none; }
}
@media (max-width: 1024px) {
    .header-right-group { gap: 16px; }
    nav { gap: 14px; }
}
@media (max-width: 960px) {
    .footer-container { grid-template-columns: 1fr 1fr; gap: 30px; }
    .rfq-container { grid-template-columns: 1fr; gap: 30px; }
    .intro-grid { grid-template-columns: 1fr; gap: 30px; }
    .intro-grid.reverse { grid-template-columns: 1fr; }
    .trust-metrics-bar { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 880px) {
    nav { display: none; }
    .mobile-menu-btn { display: block; }
    .hero h1 { font-size: 26px; }
    .hero p { font-size: 14.5px; }
    .about-intro-grid { grid-template-columns: 1fr; gap: 30px; }
    .contact-grid { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 580px) {
    .footer-container { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; text-align: center; }
    .trust-metrics-bar { grid-template-columns: 1fr; }
    .trust-banner-box { padding: 20px; text-align: center; }
    .checkbox-group-grid { grid-template-columns: 1fr; }
}

/* ==================== 3. 沉浸式页头横幅区 (Banner) ==================== */
        /* archive-hero列表页顶部banner区块：资讯归档页面头部，渐变深色背景 */
        .archive-hero {
            background: linear-gradient(135deg, #0d3811 0%, #1b5e20 100%);
            color: #fff;
            padding: 55px 0;
            text-align: center;
            position: relative;
            overflow: hidden;
            margin-bottom: 50px;
        }
        /* archive-hero::after banner背景装饰叶子emoji，低透明度水印装饰，不干扰阅读 */
        .archive-hero::after {
            content: "🍵";
            position: absolute; right: 5%; bottom: -20px;
            font-size: 140px; opacity: 0.08; transform: rotate(-15deg);
        }
        /* archive-hero-content banner内部内容容器，控制最大宽度居中 */
        .archive-hero-content { max-width: 800px; margin: 0 auto; padding: 0 20px; position: relative; z-index: 2; }
        /* banner页面大标题 h1 */
        .archive-hero h1 { font-size: 34px; font-weight: 800; margin-bottom: 12px; letter-spacing: 1px; }
        /* banner页面描述副标题 */
        .archive-hero p { font-size: 15px; color: #c8e6c9; margin-bottom: 20px; }
        
        /* hero-breadcrumb面包屑导航：首页 > 行业动态，路径导航 */
        .hero-breadcrumb {
            display: inline-flex; align-items: center; gap: 8px;
            background: rgba(255, 255, 255, 0.1);
            padding: 6px 16px; border-radius: 20px;
            font-size: 13px; backdrop-filter: blur(4px);
        }
        /* 面包屑内链接文字 */
        .hero-breadcrumb a { color: #e8f5e9; text-decoration: none; }
        /* 面包屑当前页文本 */
        .hero-breadcrumb span { color: #a5d6a7; }

        /* ==================== 4. 主体文章列表区域 ==================== */
        /* main-container页面主体大容器：限制内容最大宽度，水平居中，设置左右内边距，底部留白 */
        .main-container { max-width: 1280px; margin: 0 auto; padding: 0 30px 80px; }

        /* 4.1 置顶头条大图卡片样式：头条重点资讯，左右分栏大图+文字 */
        .featured-article-card {
            display: grid;
            grid-template-columns: 1.2fr 1fr; /* 网格：图片占1.2份，文字占1份 */
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            overflow: hidden;
            margin-bottom: 40px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.04);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        /* 头条卡片hover悬浮：向上浮起+加深阴影动效 */
        .featured-article-card:hover { transform: translateY(-4px); box-shadow: 0 15px 35px rgba(27,94,32,0.1); }
        /* featured-img头条卡片图片容器 */
        .featured-img {
            background: #e8f5e9; min-height: 320px;
            position: relative; display: flex; align-items: center; justify-content: center;
            font-size: 48px; color: var(--accent-color); overflow: hidden;
        }
        /* 头条图片img标签样式 */
        .featured-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
        /* hover图片轻微放大动效 */
        .featured-article-card:hover .featured-img img { transform: scale(1.04); }
        /* featured-badge置顶标签：左上角红色“置顶精选”角标 */
        .featured-badge {
            position: absolute; top: 20px; left: 20px;
            background: #b71c1c; color: #fff; font-size: 12px; font-weight: 700;
            padding: 5px 12px; border-radius: 4px; letter-spacing: 0.5px;
            box-shadow: 0 4px 10px rgba(183,28,28,0.3);
        }
        /* featured-content头条卡片右侧文字内容区域，垂直居中 */
        .featured-content { padding: 40px; display: flex; flex-direction: column; justify-content: center; }
        /* featured-meta头条元信息：日期、浏览量、标签 */
        .featured-meta { font-size: 13px; color: var(--accent-color); font-weight: 700; margin-bottom: 12px; display: flex; gap: 15px; }
        /* 头条文章标题h2 */
        .featured-content h2 { font-size: 24px; line-height: 1.35; margin-bottom: 15px; }
        /* 头条标题超链接 */
        .featured-content h2 a { color: var(--text-main); text-decoration: none; transition: color 0.2s; }
        /* 头条标题hover变色 */
        .featured-content h2 a:hover { color: var(--accent-color); }
        /* 头条文章简介描述段落 */
        .featured-content p { font-size: 14.5px; color: var(--text-light); line-height: 1.7; margin-bottom: 25px; }
        /* read-btn-inline头条阅读详情按钮 */
        .read-btn-inline {
            display: inline-flex; align-items: center; gap: 8px;
            background: var(--light-bg); color: var(--primary-color);
            padding: 10px 20px; border-radius: 8px; text-decoration: none;
            font-weight: 700; font-size: 14px; width: fit-content;
            transition: all 0.3s; border: 1px solid #c8e6c9;
        }
        /* 阅读按钮hover状态 */
        .read-btn-inline:hover { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }

        /* 4.2 常规三列文章网格排版：普通资讯列表，桌面端3列布局 */
        .articles-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
            margin-bottom: 60px;
        }
        /* article-card普通资讯卡片容器，垂直flex布局，图片在上文字在下 */
        .article-card {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            transition: all 0.3s ease;
        }
        /* 普通卡片hover悬浮上浮+阴影+边框变色 */
        .article-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 30px rgba(27,94,32,0.08);
            border-color: #a5d6a7;
        }
        /* card-img-wrap资讯卡片图片外层容器，固定高度 */
        .card-img-wrap {
            height: 200px; background: #f0f7f0;
            position: relative; overflow: hidden;
            display: flex; align-items: center; justify-content: center;
            font-size: 32px; color: var(--accent-color);
        }
        /* 卡片内部图片，cover裁剪铺满容器 */
        .card-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
        /* hover卡片图片缩放动效 */
        .article-card:hover .card-img-wrap img { transform: scale(1.06); }
        /* card-tag资讯分类角标（市场动态、企业新闻等），图片左上角 */
        .card-tag {
            position: absolute; top: 12px; left: 12px;
            background: rgba(27,94,32,0.9); backdrop-filter: blur(4px);
            color: #fff; font-size: 11.5px; padding: 3px 10px; border-radius: 4px; font-weight: 600;
        }
        /* card-body卡片正文内容区域，flex-grow:1自动占满剩余高度，保证卡片底部对齐 */
        .card-body { padding: 24px; flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; }
        /* card-date-row卡片顶部元信息行：日期+浏览量横向分布 */
        .card-date-row { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-light); margin-bottom: 10px; }
        /* card-date资讯发布日期高亮绿色 */
        .card-date { color: var(--accent-color); font-weight: 700; }
        /* 资讯卡片标题h3 */
        .card-body h3 { font-size: 17px; line-height: 1.4; margin-bottom: 12px; }
        /* 卡片标题链接 */
        .card-body h3 a { color: var(--text-main); text-decoration: none; transition: color 0.2s; }
        /* 卡片标题hover变色 */
        .card-body h3 a:hover { color: var(--accent-color); }
        /* 卡片摘要简介，-webkit-line-clamp:2限制只显示2行文字，超出省略号 */
        .card-body p {
            font-size: 13.5px; color: var(--text-light); line-height: 1.6; margin-bottom: 20px;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
        }
        /* card-footer卡片底部栏：来源文字 + 详情链接，上边框分割 */
        .card-footer {
            display: flex; align-items: center; justify-content: space-between;
            border-top: 1px solid #f2f5f2; padding-top: 14px; font-size: 13px;
        }
        /* link-arrow详情跳转链接，箭头会往右偏移动效 */
        .link-arrow { color: var(--primary-color); font-weight: 700; text-decoration: none; display: flex; align-items: center; gap: 4px; transition: gap 0.2s; }
        /* hover箭头拉开间距 */
        .link-arrow:hover { gap: 8px; color: var(--accent-color); }

        /* ==================== 5. 高级感页码翻页组件 (Pagination) ==================== */
        /* pagination-container分页外层容器，水平居中，flex横向排列页码按钮 */
        .pagination-container {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
            margin-top: 50px;
        }
        /* 分页的a链接、span页码数字基础样式：统一大小、圆角、边框 */
        .pagination-container a, 
        .pagination-container span {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 44px;
            height: 44px;
            padding: 0 14px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            font-size: 14px;
            font-weight: 600;
            color: var(--text-main);
            background-color: #ffffff;
            text-decoration: none;
            transition: all 0.25s ease;
            box-shadow: 0 2px 5px rgba(0,0,0,0.02);
        }
        /* 鼠标悬停时的动效：边框变色、背景变色、轻微上浮、阴影 */
        .pagination-container a:hover {
            border-color: var(--accent-color);
            color: var(--accent-color);
            background-color: #f4f9f4;
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(46,125,50,0.1);
        }
        /* 当前选中页的高亮样式：绿色填充背景，白色文字 */
        .pagination-container .current,
        .pagination-container .page-item.active span {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
            color: #ffffff;
            box-shadow: 0 4px 12px rgba(27,94,32,0.25);
        }
        /* 不可用按钮/置灰状态：比如第一页的上一页，禁止点击cursor:not-allowed */
        .pagination-container .page-inactive,
        .pagination-container .page-item.disabled span {
            color: #bbb;
            background-color: #fafafa;
            border-color: #eee;
            cursor: not-allowed;
            box-shadow: none;
        }
/* ==================== 3. 沉浸式面包屑微型横幅区 ==================== */
        /* article‑hero‑mini详情页顶部小banner：深色渐变背景，只放面包屑导航，无大标题 */
        .article-hero-mini {
            background: linear-gradient(135deg, #0d3811 0%, #1b5e20 100%);
            color: #fff;
            padding: 35px 20px;
            text-align: center;
            margin-bottom: 30px;
        }
        /* hero‑breadcrumb面包屑导航组件：首页 > 分类 > 正文；backdrop‑filter毛玻璃半透明背景 */
        .article-hero-mini .hero-breadcrumb {
            display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center;
            background: rgba(255, 255, 255, 0.1);
            padding: 6px 16px; border-radius: 20px;
            font-size: 12.5px; backdrop-filter: blur(4px);
        }
        /* 面包屑内可点击链接文字 */
        .article-hero-mini .hero-breadcrumb a { color: #e8f5e9; text-decoration: none; }
        /* 面包屑当前页面不可点击文本 */
        .article-hero-mini .hero-breadcrumb span { color: #a5d6a7; }

        /* ==================== 4. 详情页主体容器与左右分栏布局 ==================== */
        /* main‑container页面主体大容器，限制最大宽度，水平居中，设置左右内边距，底部留白 */
        .main-container { max-width: 1280px; margin: 0 auto; padding: 0 20px 60px; }
        /* article‑layout详情页左右分栏网格：左侧正文2.8份，右侧边栏1.2份；align‑items:start两栏顶部对齐，不会等高拉伸 */
        .article-layout {
            display: grid;
            grid-template-columns: 2.8fr 1.2fr;
            gap: 30px;
            align-items: start;
        }

        /* 4.1 文章正文左侧卡片区 */
        /* article‑main‑card正文白色卡片容器：圆角、边框、柔和阴影 */
        .article-main-card {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            padding: 40px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.03);
        }
        
        /* article‑header‑section文章头部区域：标题+元信息，底部边框分割与正文隔开 */
        .article-header-section {
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 22px;
            margin-bottom: 25px;
        }
        /* article‑title文章大标题 */
        .article-title {
            font-size: 26px;
            line-height: 1.35;
            color: var(--text-main);
            margin-bottom: 15px;
            font-weight: 800;
        }
        /* article‑meta‑row文章元信息行：发布时间、浏览量、标签；flex‑wrap:wrap小屏幕自动换行 */
        .article-meta-row {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            font-size: 12.5px;
            color: var(--text-light);
        }
        .article-meta-row span {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        /* .highlight‑date发布日期高亮绿色 */
        .article-meta-row .highlight-date {
            color: var(--accent-color);
            font-weight: 700;
        }

        /* article‑content富文本正文容器：PbootCMS内容输出区域；word‑break:break‑word长英文单词自动换行防止撑破容器 */
        .article-content {
            font-size: 15px;
            color: #333333;
            line-height: 1.85;
            word-break: break-word;
        }
        /* 正文段落p，设置底部外边距控制行间距 */
        .article-content p {
            margin-bottom: 18px;
        }
        /* 正文二级标题h2：左侧绿色竖线装饰 */
        .article-content h2 {
            font-size: 19px;
            color: var(--primary-color);
            margin: 28px 0 12px;
            font-weight: 700;
            border-left: 4px solid var(--accent-color);
            padding-left: 10px;
        }
        /* 正文三级标题h3 */
        .article-content h3 {
            font-size: 16.5px;
            color: var(--text-main);
            margin: 22px 0 10px;
            font-weight: 700;
        }
        /* 正文ul无序列表、ol有序列表 */
        .article-content ul, .article-content ol {
            margin: 0 0 18px 20px;
        }
        .article-content li {
            margin-bottom: 6px;
        }
        /* 正文内图片，max‑width:100%图片自适应容器宽度 */
        .article-content img {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
        }
        
        /* content‑image‑box文章插图占位框：虚线边框，用于pbootcms内容图片占位 */
        .content-image-box {
            background: #f4f8f4;
            border: 1px dashed #c8e6c9;
            border-radius: 10px;
            padding: 25px 15px;
            text-align: center;
            margin: 25px 0;
            color: var(--accent-color);
            font-weight: 600;
            font-size: 13.5px;
        }
        /* content‑quote‑box重点引用提示框：左侧粗绿竖线，背景浅绿，用于高亮提示重点文字 */
        .content-quote-box {
            background: #f4f9f4;
            border-left: 4px solid var(--primary-color);
            padding: 16px 20px;
            border-radius: 0 8px 8px 0;
            margin: 22px 0;
            font-size: 14px;
            color: #1b4d1e;
        }
        /* article‑pagination‑nav上下篇导航：上一篇、下一篇链接，上边框分割 */
        .article-pagination-nav {
            margin-top: 35px;
            padding-top: 20px;
            border-top: 1px solid var(--border-color);
            display: flex;
            flex-direction: column;
            gap: 10px;
            font-size: 13px;
        }
        .article-pagination-nav a {
            color: var(--primary-color);
            text-decoration: none;
            font-weight: 600;
            transition: color 0.2s;
        }
        .article-pagination-nav a:hover {
            color: var(--accent-color);
            text-decoration: underline;
        }

        /* 4.2 右侧边栏区域样式 */
        /* sidebar侧边栏总容器，纵向排列各个小组件widget，gap控制组件间距 */
        .sidebar {
            display: flex;
            flex-direction: column;
            gap: 25px;
        }
        /* sidebar‑widget侧边栏每一个模块卡片：白色背景、圆角、边框、微弱阴影 */
        .sidebar-widget {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 14px;
            padding: 22px;
            box-shadow: 0 6px 20px rgba(0,0,0,0.02);
        }
        /* 侧边栏模块标题h3，底部横线装饰 */
        .sidebar-widget h3 {
            font-size: 15.5px;
            font-weight: 700;
            color: var(--text-main);
            margin-bottom: 16px;
            position: relative;
            padding-bottom: 8px;
            border-bottom: 2px solid var(--light-bg);
        }
        /* h3伪元素：标题下方绿色短横线 */
        .sidebar-widget h3::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -2px;
            width: 35px;
            height: 2px;
            background-color: var(--accent-color);
        }

        /* recommend‑list侧边栏推荐文章列表，纵向排布 */
        .recommend-list {
            display: flex;
            flex-direction: column;
            gap: 14px;
        }
        /* recommend‑item单条推荐文章项：缩略图+标题+日期横向布局 */
        .recommend-item {
            display: flex;
            gap: 12px;
            align-items: flex-start;
            text-decoration: none;
        }
        /* recommend‑thumb推荐缩略图容器，固定宽高，flex‑shrink:0不被压缩 */
        .recommend-thumb {
            width: 65px;
            height: 50px;
            background: #f0f7f0;
            border-radius: 6px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            color: var(--accent-color);
            overflow: hidden;
        }
        /* 缩略图内部图片 object‑fit:cover裁剪铺满 */
        .recommend-thumb img { width: 100%; height: 100%; object-fit: cover; }
        /* recommend‑info推荐文章文字区域；‑webkit‑line‑clamp:2限制标题最多2行，超出省略 */
        .recommend-info h4 {
            font-size: 12.5px;
            line-height: 1.4;
            color: var(--text-main);
            font-weight: 600;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            transition: color 0.2s;
        }
        /* hover推荐标题变色 */
        .recommend-item:hover .recommend-info h4 {
            color: var(--accent-color);
        }
        /* recommend‑date推荐文章发布日期小字 */
        .recommend-date {
            font-size: 11px;
            color: var(--text-light);
            margin-top: 3px;
        }

        /* sidebar‑cat‑-links侧边栏产品分类快速导航列表，清除默认列表符号 */
        .sidebar-cat-links {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        /* 分类导航链接：左右两端对齐，背景浅底色；hover背景变主色文字变白 */
        .sidebar-cat-links a {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 12px;
            background: var(--light-bg);
            border-radius: 6px;
            color: var(--text-main);
            text-decoration: none;
            font-size: 13px;
            transition: all 0.2s;
        }
        .sidebar-cat-links a:hover {
            background: var(--primary-color);
            color: #ffffff;
            padding-left: 14px;
        }

        /* sidebar‑contact‑card侧边栏联系卡片：深色渐变背景，放whatsapp咨询按钮 */
        .sidebar-contact-card {
            background: linear-gradient(135deg, #1b5e20 0%, #0d3811 100%);
            color: #ffffff;
            border-radius: 14px;
            padding: 22px;
            text-align: center;
        }
        .sidebar-contact-card h4 {
            font-size: 16px;
            margin-bottom: 8px;
            font-weight: 700;
        }
        .sidebar-contact-card p {
            font-size: 12.5px;
            color: #c8e6c9;
            margin-bottom: 16px;
            line-height: 1.5;
        }
        /* sidebar‑btn‑whatsapp侧边栏WhatsApp按钮，圆角全宽按钮 */
        .sidebar-btn-whatsapp {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            background-color: #25d366;
            color: #ffffff;
            width: 100%;
            padding: 10px;
            border-radius: 50px;
            font-weight: 700;
            font-size: 13.5px;
            text-decoration: none;
            box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
            transition: background 0.2s;
        }
        .sidebar-btn-whatsapp:hover {
            background-color: #20ba5a;
        }
        
        /* mobile‑menu‑btn移动端汉堡菜单触发按钮：桌面端display:none隐藏 */
        .mobile-menu-btn { display: none; font-size: 22px; cursor: pointer; color: var(--primary-color); background: none; border: none; padding: 4px; }

        /* ---------------- 移动端抽屉导航样式（右侧滑出菜单） ---------------- */
        /* mobile‑drawer‑overlay抽屉遮罩层：半透明黑色背景，点击可关闭抽屉；opacity+visibility实现平滑显隐 */
        .mobile-drawer-overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.5); z-index: 1999;
            opacity: 0; visibility: hidden; transition: all 0.3s ease;
        }
        /* active类：遮罩激活显示状态 */
        .mobile-drawer-overlay.active { opacity: 1; visibility: visible; }
        
        /* mobile‑drawer抽屉面板：默认在屏幕右侧外right:-280px；cubic‑bezier实现弹性滑出动效；overflow‑y:auto内容过长内部滚动 */
        .mobile-drawer {
            position: fixed; top: 0; right: -280px; width: 280px; height: 100%;
            background: #ffffff; z-index: 2000; box-shadow: -5px 0 25px rgba(0,0,0,0.15);
            transition: right 0.35s cubic-bezier(0.1, 0.9, 0.2, 1);
            display: flex; flex-direction: column; overflow-y: auto;
        }
        /* active类：抽屉滑入屏幕可视区域 right:0 */
        .mobile-drawer.active { right: 0; }
        /* mobile‑drawer‑header抽屉头部：标题+关闭按钮，底部分割线 */
        .mobile-drawer-header {
            display: flex; align-items: center; justify-content: space-between;
            padding: 20px; border-bottom: 1px solid var(--border-color); background: #f9fbf9;
        }
        /* mobile‑drawer‑title抽屉头部文字标题 */
        .mobile-drawer-title { font-weight: 800; color: var(--primary-color); font-size: 16px; }
        /* mobile‑drawer‑close抽屉关闭叉号按钮 */
        .mobile-drawer-close { font-size: 22px; background: none; border: none; cursor: pointer; color: var(--text-light); }
        /* mobile‑drawer‑nav抽屉主导航链接容器，纵向排列 */
        .mobile-drawer-nav { display: flex; flex-direction: column; padding: 15px 20px; gap: 4px; }
        /* 抽屉一级导航链接 */
        .mobile-drawer-nav a {
            padding: 12px 14px; color: var(--text-main); text-decoration: none;
            font-size: 14.5px; font-weight: 600; border-radius: 6px; transition: background 0.2s;
        }
        /* 抽屉导航hover悬浮、active当前页高亮 */
        .mobile-drawer-nav a:hover, .mobile-drawer-nav a.active { background: var(--light-bg); color: var(--accent-color); }
        /* mobile‑drawer‑sub抽屉二级子菜单，缩进padding‑left，区分一级菜单 */
        .mobile-drawer-sub { padding-left: 20px; display: flex; flex-direction: column; gap: 4px; margin: 4px 0 8px; }
        /* 抽屉子菜单链接 */
        .mobile-drawer-sub a { font-size: 13.5px; font-weight: 400; color: var(--text-light); padding: 8px 12px; }
        
        /* mobile‑menu‑btn移动端汉堡菜单按钮：桌面端隐藏，移动端显示 */
        .mobile-menu-btn { display: none; font-size: 24px; cursor: pointer; color: var(--primary-color); }

        /* ====================== 通用区块容器与标题组件，全站复用 ====================== */
        /* section‑container内容区块最大宽度容器，统一内边距、水平居中 */
        .section-container { max-width: 1280px; margin: 0 auto; padding: 70px 20px; }
        /* section‑title‑box区块标题容器：大标题+描述文本，居中布局 */
        .section-title-box { text-align: center; margin-bottom: 45px; }
        .section-title-box h2 { font-size: 30px; color: var(--primary-color); font-weight: 800; margin-bottom: 10px; }
        .section-title-box p { font-size: 15px; color: var(--text-light); max-width: 700px; margin: 0 auto; }

     
        .hero h1 { font-size: 38px; margin-bottom: 18px; font-weight: 800; line-height: 1.3; text-shadow: 0 2px 4px rgba(0,0,0,0.4); }
        .hero p { font-size: 16px; max-width: 800px; margin: 0 auto 28px; opacity: 0.95; line-height: 1.7; text-shadow: 0 1px 2px rgba(0,0,0,0.3); }
        /* badges banner下方标签组：多个半透明圆角标签，展示核心卖点 */
        .badges { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 30px; }
        .badge-item { background: rgba(255,255,255,0.18); backdrop-filter: blur(6px); padding: 7px 16px; border-radius: 25px; font-size: 13.5px; border: 1px solid rgba(255,255,255,0.25); font-weight: 500; }
        /* hero‑btns banner按钮组，主按钮+副按钮 */
        .hero-btns .btn { padding: 12px 26px; border-radius: 6px; text-decoration: none; font-weight: bold; margin: 6px; display: inline-block; font-size: 14.5px; transition: all 0.3s; }
        .btn-main { background: var(--accent-color); color: #fff; box-shadow: 0 4px 12px rgba(46,125,50,0.4); }
        .btn-main:hover { background: var(--hover-color); transform: translateY(-2px); }
        .btn-sub { border: 1px solid rgba(255,255,255,0.8); color: #fff; background: rgba(0,0,0,0.25); }
        .btn-sub:hover { background: rgba(255,255,255,0.25); transform: translateY(-2px); }

        /* advantage‑section核心实力优势模块；advantage‑grid自适应网格三张实力卡片 */
        .advantage-section { background-color: var(--light-bg); }
        .advantage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 25px; }
        .advantage-card { background: var(--card-bg); padding: 30px; border-radius: 8px; border: 1px solid var(--border-color); box-shadow: 0 4px 12px rgba(0,0,0,0.03); transition: transform 0.3s; }
        .advantage-card:hover { transform: translateY(-5px); } /* hover卡片上浮动效 */
        .advantage-card h3 { font-size: 18px; color: var(--primary-color); margin-bottom: 12px; font-weight: 700; }
        .advantage-card p { font-size: 13.5px; color: var(--text-light); line-height: 1.6; }

        /* service‑mode‑section OEM/ODM两种服务模式模块；service‑grid双列自适应网格 */
        .service-mode-section { background-color: #ffffff; }
        .service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 30px; }
        .service-card { background: #f4f9f4; border: 1px solid #c8e6c9; border-radius: 8px; padding: 35px 30px; }
        .service-card h3 { font-size: 20px; color: var(--primary-color); margin-bottom: 15px; font-weight: 800; }
        .service-card p { font-size: 14px; color: var(--text-main); line-height: 1.7; margin-bottom: 20px; }
        .service-card ul { list-style: none; font-size: 13.5px; color: #444; }
        .service-card ul li { margin-bottom: 8px; position: relative; padding-left: 20px; }
        .service-card ul li::before { content: '✓'; position: absolute; left: 0; color: var(--accent-color); font-weight: bold; } /* 自定义对勾列表符号 */

        /* trust‑matrix‑section B端大客户四大保障承诺信任背书模块 */
        .trust-matrix-section { background-color: var(--light-bg); border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }
        .trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
        .trust-card { background: #fff; padding: 25px; border-radius: 8px; border: 1px solid var(--border-color); box-shadow: 0 3px 10px rgba(0,0,0,0.02); }
        .trust-card .t-icon { font-size: 28px; margin-bottom: 12px; display: block; }
        .trust-card h4 { font-size: 16px; color: var(--primary-color); margin-bottom: 8px; font-weight: 700; }
        .trust-card p { font-size: 13px; color: var(--text-light); line-height: 1.6; }

        /* process‑section六步标准化合作流程模块；process‑grid自适应多列流程卡片 */
        .process-section { background-color: #ffffff; }
        .process-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; text-align: center; }
        .process-item { background: var(--light-bg); border: 1px solid var(--border-color); padding: 25px 15px; border-radius: 8px; position: relative; }
        .process-num { font-size: 22px; font-weight: 900; color: var(--accent-color); margin-bottom: 10px; display: block; font-family: 'Arial Black', sans-serif; } /* 流程序号大号粗体 */
        .process-item h4 { font-size: 15px; color: var(--text-main); margin-bottom: 8px; font-weight: 700; }
        .process-item p { font-size: 12.5px; color: var(--text-light); line-height: 1.5; }

        /* rfq‑section询盘表单区块：深绿色背景，左侧介绍文案，右侧提交表单；id="rfq"用于页面锚点跳转 */
        .rfq-section { background: var(--primary-color); color: #fff; padding: 60px 5%; }
        .rfq-container { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: start; }
        .rfq-info { text-align: left; }
        .rfq-info h2 { font-size: 28px; font-weight: 800; margin-bottom: 15px; line-height: 1.3; }
        .rfq-info p { font-size: 14.5px; opacity: 0.9; line-height: 1.6; margin-bottom: 25px; }
        .rfq-feature-list { list-style: none; margin-bottom: 25px; }
        .rfq-feature-item { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
        .rfq-feature-icon { background: rgba(255,255,255,0.15); width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
        .rfq-feature-text h4 { font-size: 15px; font-weight: 700; color: #e8f5e9; margin-bottom: 3px; }
        .rfq-feature-text p { font-size: 12.5px; margin-bottom: 0; opacity: 0.85; line-height: 1.5; }
        .rfq-trust-box { background: rgba(0,0,0,0.18); padding: 15px 20px; border-radius: 8px; border-left: 4px solid var(--accent-color); font-size: 13px; opacity: 0.95; line-height: 1.5; }

        /* rfq‑form白色表单卡片，询盘提交表单容器 */
        .rfq-form { text-align: left; background: #fff; padding: 30px; border-radius: 10px; color: #333; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
        .form-group { margin-bottom: 16px; }
        .form-group label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 13.5px; }
        .form-group label .hint { font-size: 11.5px; color: #777; font-weight: normal; margin-left: 5px; }
        .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; font-size: 13.5px; font-family: inherit; }
        /* dropdown‑multiselect自定义多选下拉框组件样式，js控制open类切换显隐 */
        .dropdown-multiselect { position: relative; width: 100%; }
        .dropdown-select-box {
            width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; font-size: 13.5px;
            background: #fff; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
            user-select: none; min-height: 41px;
        }
        .dropdown-select-box:after { content: '▾'; font-size: 14px; color: #666; }
        .dropdown-list-content {
            display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff;
            border: 1px solid #ccc; border-radius: 5px; margin-top: 4px; box-shadow: 0 6px 16px rgba(0,0,0,0.12);
            z-index: 100; max-height: 240px; overflow-y: auto; padding: 10px;
        }
        .dropdown-multiselect.open .dropdown-list-content { display: block; }
        .multiselect-option-item {
            display: flex; align-items: center; gap: 8px; padding: 6px 8px; font-size: 13px; cursor: pointer; border-radius: 4px;
        }
        .multiselect-option-item:hover { background: #f0f7f0; color: var(--primary-color); }
        .multiselect-option-item input { width: auto; cursor: pointer; }
        
        
        /* mobile‑menu‑btn移动端汉堡菜单按钮：桌面端隐藏，移动端显示 */
        .mobile-menu-btn { display: none; font-size: 24px; cursor: pointer; color: var(--primary-color); }

        /* ====================== 页面独有样式：隐私政策页面 =======关于我们背景=============== */
        /* page‑hero子页面顶部banner：深色渐变背景，页面标题+简介 */
        .page-hero {
           /* background: linear-gradient(rgba(10, 30, 12, 0.75), rgba(6, 20, 8, 0.85)), #3e5241;*/
           background: linear-gradient(rgba(10, 30, 12, 0.72), rgba(6, 20, 8, 0.80)), url('/static/upload/image/20260901/1788253334490184.jpg') center/cover no-repeat;
            color: #fff;
            padding: 70px 5%;
            text-align: center;
        }
        .page-hero h1 { font-size: 36px; margin-bottom: 12px; font-weight: 800; }
        .page-hero p { font-size: 15px; max-width: 700px; margin: 0 auto; opacity: 0.9; }

        /* policy‑container隐私政策正文白色卡片；margin负值向上叠加，实现卡片嵌入banner下方视觉效果；z‑index提升层级 */
        .policy-container {
            max-width: 960px;
            margin: -40px auto 70px;
            background: #ffffff;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
            border: 1px solid var(--border-color);
            padding: 50px 60px;
            position: relative;
            z-index: 10;
        }
        /* policy‑update‑time政策更新生效时间；底部边框分割与正文隔开 */
        .policy-update-time {
            font-size: 13px;
            color: var(--text-light);
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 20px;
            margin-bottom: 30px;
        }
        /* policy‑section政策每一个章节区块 */
        .policy-section {
            margin-bottom: 35px;
        }
        /* 章节二级标题h2 */
        .policy-section h2 {
            font-size: 20px;
            color: var(--primary-color);
            font-weight: 700;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        /* 政策段落p，text‑justify两端对齐，适合法律声明类文本 */
        .policy-section p {
            font-size: 14.5px;
            color: var(--text-main);
            margin-bottom: 12px;
            text-align: justify;
        }
        /* 无序列表ul，政策条款列表 */
        .policy-section ul {
            margin: 10px 0 15px 20px;
            color: var(--text-main);
            font-size: 14.5px;
        }
        .policy-section li {
            margin-bottom: 8px;
        }
        /* highlight‑box重点提示引用框：左侧绿色粗竖线，浅绿背景，用于展示联系地址等重要信息 */
        .highlight-box {
            background: var(--light-bg);
            border-left: 4px solid var(--accent-color);
            padding: 15px 20px;
            border-radius: 0 6px 6px 0;
            margin: 15px 0;
            font-size: 14px;
            color: var(--text-main);
        }
        
        /* ==================== 响应式媒体查询，多设备自适应 ==================== */
        @media (max-width: 1024px) {
            .product-grid { grid-template-columns: repeat(2, 1fr); } /* 平板产品网格改为2列 */
            .footer-container { grid-template-columns: repeat(2, 1fr); gap: 25px; } /* 页脚4栏变2栏 */
        }
        @media (max-width: 768px) {
            nav { display: none; } /* 手机端隐藏桌面导航，使用抽屉汉堡菜单 */
            .mobile-menu-btn { display: block; }
            .header-trust-badge { display: none; } /* 移动端隐藏头部信任徽章释放导航栏空间 */
            .header-container { padding: 10px 15px; }
            .product-hero { padding: 30px 15px; margin-bottom: 20px; }
            .product-hero h1 { font-size: 22px; }
            .main-container { padding: 0 12px 40px; }
            .product-grid { grid-template-columns: 1fr; gap: 18px; } /* 手机产品网格单列 */
            .category-filter-bar { gap: 6px; margin-bottom: 25px; }
            .cat-tag { padding: 6px 14px; font-size: 12.5px; }
            .footer-container { grid-template-columns: 1fr; gap: 20px; } /* 页脚变为单列 */
            .footer-bottom { flex-direction: column; gap: 12px; text-align: center; } /* 版权栏纵向堆叠 */
            .whatsapp-float { right: 15px; bottom: 15px; padding: 9px 15px; font-size: 13px; }
        }
        
        /* mobile‑menu‑btn移动端汉堡菜单按钮：桌面端隐藏 */
        .mobile-menu-btn { display: none; font-size: 22px; cursor: pointer; color: var(--primary-color); background: none; border: none; padding: 4px; }

        /* ---------------- 移动端抽屉导航（全站共用侧滑菜单） ---------------- */
        /* mobile‑drawer‑overlay抽屉遮罩层：半透明黑色背景；opacity+visibility做平滑显隐 */
        .mobile-drawer-overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.5); z-index: 1999;
            opacity: 0; visibility: hidden; transition: all 0.3s ease;
        }
        .mobile-drawer-overlay.active { opacity: 1; visibility: visible; }
        /* mobile‑drawer抽屉面板：默认在屏幕右侧外；cubic‑bezier弹性滑出动画；overflow‑y:auto内容过长内部滚动 */
        .mobile-drawer {
            position: fixed; top: 0; right: -280px; width: 280px; height: 100%;
            background: #ffffff; z-index: 2000; box-shadow: -5px 0 25px rgba(0,0,0,0.15);
            transition: right 0.35s cubic-bezier(0.1, 0.9, 0.2, 1);
            display: flex; flex-direction: column; overflow-y: auto;
        }
        .mobile-drawer.active { right: 0; }
        /* mobile‑drawer‑header抽屉头部：标题+关闭按钮，底部分割线 */
        .mobile-drawer-header {
            display: flex; align-items: center; justify-content: space-between;
            padding: 20px; border-bottom: 1px solid var(--border-color); background: #f9fbf9;
        }
        .mobile-drawer-title { font-weight: 800; color: var(--primary-color); font-size: 16px; }
        .mobile-drawer-close { font-size: 22px; background: none; border: none; cursor: pointer; color: var(--text-light); }
        /* mobile‑drawer‑nav抽屉一级导航链接容器，纵向排列 */
        .mobile-drawer-nav { display: flex; flex-direction: column; padding: 15px 20px; gap: 4px; }
        .mobile-drawer-nav a {
            padding: 12px 14px; color: var(--text-main); text-decoration: none;
            font-size: 14.5px; font-weight: 600; border-radius: 6px; transition: background 0.2s;
        }
        .mobile-drawer-nav a:hover, .mobile-drawer-nav a.active { background: var(--light-bg); color: var(--accent-color); }
        /* mobile‑drawer‑sub抽屉二级子菜单，缩进区分一级导航 */
        .mobile-drawer-sub { padding-left: 20px; display: flex; flex-direction: column; gap: 4px; margin: 4px 0 8px; }
        .mobile-drawer-sub a { font-size: 13.5px; font-weight: 400; color: var(--text-light); padding: 8px 12px; }

        /* ==================== 3. 产品列表页面独有样式 ==================== */
        /* product‑hero产品列表页顶部banner：深色渐变背景，页面标题、简介、面包屑 */
        .product-hero {
            /*background: linear-gradient(135deg, #0d3811 0%, #1b5e20 100%);*/
            background: linear-gradient(rgba(10, 30, 12, 0.72), rgba(6, 20, 8, 0.80)), url('/static/upload/image/20260901/1788252731442112.jpg') center/cover no-repeat;
            color: #fff;
            padding: 45px 20px;
            text-align: center;
            margin-bottom: 30px;
        }
        .product-hero-container { max-width: 1280px; margin: 0 auto; }
        .product-hero h1 { font-size: 28px; font-weight: 800; margin-bottom: 10px; letter-spacing: 0.5px; }
        .product-hero p { font-size: 14px; color: #c8e6c9; max-width: 700px; margin: 0 auto 20px; line-height: 1.6; }
        /* hero‑breadcrumb面包屑导航：首页 > 产品中心；毛玻璃半透明背景 */
        .hero-breadcrumb {
            display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center;
            background: rgba(255, 255, 255, 0.1);
            padding: 6px 16px; border-radius: 20px;
            font-size: 12.5px; backdrop-filter: blur(4px);
        }
        .hero-breadcrumb a { color: #e8f5e9; text-decoration: none; }
        .hero-breadcrumb span { color: #a5d6a7; }

        /* main‑container页面主体大容器：限制最大宽度，水平居中，设置左右内边距、底部留白 */
        .main-container { max-width: 1280px; margin: 0 auto; padding: 0 20px 60px; }
        /* category‑filter‑bar产品分类标签筛选栏：全部产品、抹茶、绿茶等分类按钮组 */
        .category-filter-bar {
            display: flex;
            flex-wrap: wrap; /* 屏幕变小时自动换行 */
            gap: 10px;
            justify-content: center;
            margin-bottom: 35px;
            padding-bottom: 20px;
            border-bottom: 1px solid var(--border-color);
        }
        /* cat‑tag单个分类标签按钮；active为当前选中分类高亮样式 */
        .cat-tag {
            background: var(--light-bg);
            border: 1px solid var(--border-color);
            color: var(--text-main);
            padding: 8px 18px;
            border-radius: 50px; /* 大圆角胶囊按钮 */
            font-size: 13.5px;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.2s ease;
        }
        .cat-tag:hover, .cat-tag.active {
            background: var(--primary-color);
            color: #ffffff;
            border-color: var(--primary-color);
            box-shadow: 0 4px 12px rgba(27, 94, 32, 0.2);
        }
        /* product‑grid产品卡片网格布局：桌面端3列自适应网格 */
        .product-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 25px;
        }
        /* product‑product‑card产品卡片容器，flex纵向布局，flex‑grow实现卡片底部对齐 */
        .product-card {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 14px;
            overflow: hidden;
            box-shadow: 0 6px 20px rgba(0,0,0,0.02);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            display: flex;
            flex-direction: column;
        }
        /* hover卡片上浮+加深阴影动效 */
        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 30px rgba(0,0,0,0.08);
            border-color: #c8e6c9;
        }
        /* product‑img‑wrap产品图片外层容器，固定高度，溢出隐藏 */
        .product-img-wrap {
            position: relative;
            width: 100%;
            height: 220px;
            background: #f0f7f0;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
        .product-img-wrap img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* 图片裁剪铺满容器不变形 */
            transition: transform 0.5s ease;
        }
        /* hover图片轻微放大 */
        .product-card:hover .product-img-wrap img {
            transform: scale(1.05);
        }
        /* product‑badge‑flag产品角标（欧标、源头直采等）图片左上角标签 */
        .product-badge-flag {
            position: absolute;
            top: 12px;
            left: 12px;
            background: rgba(27, 94, 32, 0.85);
            color: #ffffff;
            font-size: 11px;
            font-weight: 700;
            padding: 3px 10px;
            border-radius: 4px;
            backdrop-filter: blur(4px);
        }
        /* product‑info产品卡片文字信息区域；flex‑grow:1占满剩余高度 */
        .product-info {
            padding: 20px;
            display: flex;
            flex-direction: column;
            flex-grow: 1;
        }
        .product-title {
            font-size: 17px;
            font-weight: 700;
            color: var(--text-main);
            margin-bottom: 8px;
            line-height: 1.4;
        }
        .product-title a {
            color: inherit;
            text-decoration: none;
            transition: color 0.2s;
        }
        .product-title a:hover {
            color: var(--accent-color);
        }
        /* product‑specs‑brief产品简短规格标签 */
        .product-specs-brief {
            font-size: 12px;
            color: var(--accent-color);
            font-weight: 600;
            margin-bottom: 10px;
            background: var(--light-bg);
            padding: 4px 8px;
            border-radius: 4px;
            display: inline-block;
            width: fit-content;
        }
        /* product‑desc产品简介；‑webkit‑line‑clamp限制最多显示3行，超出部分省略号 */
        .product-desc {
            font-size: 13.5px;
            color: var(--text-light);
            line-height: 1.6;
            margin-bottom: 18px;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            flex-grow: 1;
        }
        /* product‑footer‑row卡片底栏：产地+详情按钮，上边框分割 */
        .product-footer-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: 15px;
            border-top: 1px solid var(--border-color);
            margin-top: auto;
        }
        .product-origin {
            font-size: 11.5px;
            color: var(--text-light);
        }
        .product-btn-detail {
            background-color: var(--light-bg);
            color: var(--primary-color);
            border: 1px solid #c8e6c9;
            padding: 6px 14px;
            border-radius: 6px;
            font-size: 12.5px;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.2s;
        }
        .product-btn-detail:hover {
            background-color: var(--primary-color);
            color: #ffffff;
        }
        /* pboot‑pagination分页组件样式，适配pbootcms系统分页输出 */
        .pboot-pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
            margin-top: 50px;
        }
        .pboot-pagination a, .pboot-pagination span {
            padding: 8px 14px;
            border: 1px solid var(--border-color);
            background: var(--card-bg);
            color: var(--text-main);
            font-size: 13px;
            border-radius: 6px;
            text-decoration: none;
            transition: all 0.2s;
        }
        .pboot-pagination a:hover, .pboot-pagination .current {
            background: var(--primary-color);
            color: #ffffff;
            border-color: var(--primary-color);
        }
        
        /* mobile‑menu‑btn移动端汉堡菜单按钮：桌面端隐藏 */
        .mobile-menu-btn { display: none; font-size: 22px; cursor: pointer; color: var(--primary-color); background: none; border: none; padding: 4px; }

        /* ---------------- 移动端抽屉导航（全站共用侧滑菜单） ---------------- */
        /* mobile‑drawer‑overlay抽屉遮罩层：半透明黑色背景；opacity+visibility实现平滑显隐 */
        .mobile-drawer-overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.5); z-index: 1999;
            opacity: 0; visibility: hidden; transition: all 0.3s ease;
        }
        .mobile-drawer-overlay.active { opacity: 1; visibility: visible; }
        /* mobile‑drawer抽屉面板：默认在屏幕右侧外；cubic‑bezier实现弹性滑出动效；overflow‑y:auto内容过长内部滚动 */
        .mobile-drawer {
            position: fixed; top: 0; right: -280px; width: 280px; height: 100%;
            background: #ffffff; z-index: 2000; box-shadow: -5px 0 25px rgba(0,0,0,0.15);
            transition: right 0.35s cubic-bezier(0.1, 0.9, 0.2, 1);
            display: flex; flex-direction: column; overflow-y: auto;
        }
        .mobile-drawer.active { right: 0; }
        /* mobile‑drawer‑header抽屉头部：标题+关闭按钮，底部分割线 */
        .mobile-drawer-header {
            display: flex; align-items: center; justify-content: space-between;
            padding: 20px; border-bottom: 1px solid var(--border-color); background: #f9fbf9;
        }
        .mobile-drawer-title { font-weight: 800; color: var(--primary-color); font-size: 16px; }
        .mobile-drawer-close { font-size: 22px; background: none; border: none; cursor: pointer; color: var(--text-light); }
        /* mobile‑drawer‑nav抽屉一级导航链接容器，纵向排列 */
        .mobile-drawer-nav { display: flex; flex-direction: column; padding: 15px 20px; gap: 4px; }
        .mobile-drawer-nav a {
            padding: 12px 14px; color: var(--text-main); text-decoration: none;
            font-size: 14.5px; font-weight: 600; border-radius: 6px; transition: background 0.2s;
        }
        .mobile-drawer-nav a:hover, .mobile-drawer-nav a.active { background: var(--light-bg); color: var(--accent-color); }
        /* mobile‑drawer‑sub抽屉二级子菜单，缩进区分一级导航 */
        .mobile-drawer-sub { padding-left: 20px; display: flex; flex-direction: column; gap: 4px; margin: 4px 0 8px; }
        .mobile-drawer-sub a { font-size: 13.5px; font-weight: 400; color: var(--text-light); padding: 8px 12px; }

        /* ==================== 3. 产品详情页独有样式：面包屑、顶部图文两栏、相册缩略图 ==================== */
        /* main‑container页面主体大容器：限制最大宽度，水平居中，设置上下左右内边距、底部留白 */
        .main-container { max-width: 1280px; margin: 0 auto; padding: 25px 20px 60px; }
        /* breadcrumb面包屑导航：首页 > 产品中心 > 分类 > 当前详情；展示页面层级路径 */
        .breadcrumb {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            color: var(--text-light);
            margin-bottom: 25px;
        }
        .breadcrumb a { color: var(--primary-color); text-decoration: none; }
        .breadcrumb span { color: var(--text-main); }

        /* product‑detail‑top产品详情顶部核心布局：左侧相册，右侧标题/参数/询盘；grid两栏等分 */
        .product-detail-top {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            margin-bottom: 50px;
        }
        /* product‑gallery左侧产品相册总容器：主大图 + 下方缩略图列表，纵向flex */
        .product-gallery {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        /* main‑img‑box相册主图容器，固定高度，溢出隐藏；js控制子slide‑img切换active实现换图 */
        .main-img-box {
            width: 100%;
            height: 100%;
            background: var(--light-bg);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            position: relative;
        }
        /* slide‑img单张轮播图，默认隐藏；active类才显示 */
        .main-img-box .slide-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: none;
        }
        .main-img-box .slide-img.active {
            display: block;
        }
        /* gallery‑thumbs缩略图网格容器，4列布局 */
        .gallery-thumbs {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
        }
        /* thumb‑item单个缩略图项，鼠标hover、active选中高亮边框 */
        .thumb-item {
            height: 85px;
            background: var(--light-bg);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            color: var(--text-light);
            cursor: pointer;
            overflow: hidden;
            transition: all 0.2s;
        }
        .thumb-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .thumb-item:hover, .thumb-item.active {
            border-color: var(--primary-color);
            box-shadow: 0 2px 8px rgba(27,94,32,0.15);
        }

        /* product‑summary‑info右侧信息区：标签、标题、简介、参数、询盘表单；纵向flex布局 */
        .product-summary-info {
            display: flex;
            flex-direction: column;
        }
        /* detail‑badge‑row标签行：多个pill圆角标签，展示认证、源头卖点 */
        .detail-badge-row {
            display: flex;
            gap: 10px;
            margin-bottom: 12px;
        }
        .tag-pill {
            background: rgba(46, 125, 50, 0.1);
            color: var(--primary-color);
            font-size: 11.5px;
            font-weight: 700;
            padding: 3px 10px;
            border-radius: 4px;
        }
        /* product‑title‑h1产品详情主标题 */
        .product-title-h1 {
            font-size: 24px;
            font-weight: 800;
            color: var(--text-main);
            margin-bottom: 12px;
            line-height: 1.35;
        }
        /* product‑subtitle‑desc产品简短描述摘要 */
        .product-subtitle-desc {
            font-size: 14px;
            color: var(--text-light);
            line-height: 1.6;
            margin-bottom: 20px;
        }
        /* specs‑grid‑box产品规格参数卡片：两列网格展示各项参数 */
        .specs-grid-box {
            background: var(--light-bg);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: 16px;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            margin-bottom: 25px;
        }
        .spec-item {
            font-size: 12.5px;
            color: var(--text-main);
        }
        .spec-item strong {
            color: var(--primary-color);
            font-weight: 600;
        }
        /* quick‑inquiry‑card快捷询盘表单卡片：B端客户快速提交采购需求 */
        .quick-inquiry-card {
            background: #ffffff;
            border: 2px solid #c8e6c9;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.02);
        }
        .quick-inquiry-card h3 {
            font-size: 15px;
            font-weight: 700;
            color: var(--primary-color);
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        /* inquiry‑form‑group询盘表单内部容器，纵向排列表单项 */
        .inquiry-form-group {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        /* inquiry‑row表单一行内放两个输入框，横向flex */
        .inquiry-row {
            display: flex;
            gap: 10px;
        }
        /* 表单输入框、下拉、文本域统一样式；focus聚焦时边框变色 */
        .inquiry-input, .inquiry-select, .inquiry-textarea {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            font-size: 13px;
            font-family: inherit;
            outline: none;
            transition: border-color 0.2s;
        }
        .inquiry-input:focus, .inquiry-select:focus, .inquiry-textarea:focus {
            border-color: var(--accent-color);
        }
        .inquiry-textarea {
            resize: vertical; /* 只允许垂直拉伸文本域 */
            height: 70px;
        }
        /* btn‑submit‑inquiry询盘提交按钮 */
        .btn-submit-inquiry {
            background: var(--accent-color);
            color: #fff;
            border: none;
            padding: 11px 20px;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            transition: background 0.2s, transform 0.1s;
            text-align: center;
        }
        .btn-submit-inquiry:hover {
            background: var(--hover-color);
        }

        /* ==================== 4. Tab选项卡详情内容区：产品说明、工艺、质检 ==================== */
        .product-content-section {
            margin-top: 40px;
        }
        /* content‑tabs‑header选项卡头部按钮栏，底部分割线 */
        .content-tabs-header {
            display: flex;
            border-bottom: 2px solid var(--border-color);
            gap: 30px;
        }
        /* tab‑btn每一个选项卡按钮；active时文字变色+底部下划线伪元素 */
        .tab-btn {
            background: none;
            border: none;
            font-size: 16px;
            font-weight: 700;
            color: var(--text-light);
            padding: 12px 0;
            cursor: pointer;
            position: relative;
            transition: color 0.2s;
        }
        .tab-btn.active {
            color: var(--primary-color);
        }
        .tab-btn.active::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 3px;
            background-color: var(--primary-color);
        }
        /* tab‑-pane选项卡内容面板：默认隐藏，active才显示 */
        .tab-pane {
            display: none;
            padding: 30px 0;
            font-size: 14.5px;
            color: var(--text-main);
            line-height: 1.8;
        }
        .tab-pane.active {
            display: block;
        }
        .tab-pane h3 {
            font-size: 18px;
            color: var(--primary-color);
            margin: 20px 0 10px;
            font-weight: 700;
        }
        .tab-pane p {
            margin-bottom: 15px;
            color: #4a5568;
        }
        /* cert‑highlight‑grid资质认证亮点三列网格卡片 */
        .cert-highlight-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin: 25px 0;
        }
        .cert-box {
            background: var(--light-bg);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 18px;
            text-align: center;
        }
        .cert-box .icon { font-size: 28px; margin-bottom: 8px; }
        .cert-box h4 { font-size: 14px; font-weight: 700; color: var(--primary-color); margin-bottom: 6px; }
        .cert-box p { font-size: 12px; color: var(--text-light); margin: 0; }

        /* ==================== 5. 底部相关推荐产品模块 ==================== */
        .related-products-wrap {
            margin-top: 60px;
            border-top: 1px solid var(--border-color);
            padding-top: 40px;
        }
        .section-title-center {
            text-align: center;
            font-size: 22px;
            font-weight: 800;
            color: var(--primary-color);
            margin-bottom: 30px;
        }
        /* related‑grid相关产品4列网格布局 */
        .related-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
        }
        /* related‑card相关推荐卡片，a标签直接跳转产品详情 */
        .related-card {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            overflow: hidden;
            transition: transform 0.2s, box-shadow 0.2s;
            text-decoration: none;
            display: flex;
            flex-direction: column;
        }
        .related-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.06);
        }
        .related-img {
            height: 140px;
            background: var(--light-bg);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: var(--accent-color);
        }
        .related-info {
            padding: 12px;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        .related-name {
            font-size: 13.5px;
            font-weight: 700;
            color: var(--text-main);
        }
        .related-price {
            font-size: 12px;
            color: var(--accent-color);
            font-weight: 600;
        }
        
 <style>
.tg-float-btn {
  position: fixed;
  right: 25px;
  bottom: 95px; /* 向上调整了距离，避免与底部的 WhatsApp 重叠（可根据实际情况微调此数值） */
  z-index: 9999;
}

.tg-float-btn a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 55px;
  height: 55px;
  background-color: #0088cc; /* Telegram 经典蓝 */
  background: linear-gradient(135deg, #2abee2 0%, #0088cc 100%); /* 渐变色效果 */
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 136, 204, 0.4);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  text-decoration: none;
}

.tg-float-btn a svg {
  width: 30px;
  height: 30px;
  fill: #ffffff;
  transition: transform 0.3s ease;
}

/* 鼠标悬停时的动画和阴影效果 */
.tg-float-btn a:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0, 136, 204, 0.6);
}

.tg-float-btn a:hover svg {
  transform: rotate(-10deg);
}

/* 文字提示气泡样式（可选，悬停时显示） */
.tg-tooltip {
  position: absolute;
  right: 65px;
  background-color: #333;
  color: #fff;
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  pointer-events: none;
}

.tg-tooltip::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -4px;
  transform: translateY(-50%);
  border-width: 4px 0 4px 4px;
  border-style: solid;
  border-color: transparent transparent transparent #333;
}

.tg-float-btn a:hover .tg-tooltip {
  opacity: 1;
  visibility: visible;
  right: 68px;
}
</style>
<!-- Telegram 客服悬浮按钮结束 -->