/* ===== GLOBAL DESIGN SYSTEM - Modern Professional Theme ===== */
:root {
    /* Primary Brand Colors */
    --brand-primary: #1a4d8f;
    --brand-primary-light: #2b5fa6;
    --brand-primary-dark: #0d3566;
    --brand-accent: #4a90e2;
    
    /* Neutral Palette */
    --color-text-primary: #1a1a1a;
    --color-text-secondary: #4a4a4a;
    --color-text-tertiary: #6c757d;
    --color-text-light: #8e8e8e;
    
    /* Background Colors */
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f8f9fb;
    --color-bg-accent: #f0f4f8;
    
    /* Spacing Scale (8px base) */
    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2rem;
    --space-5: 2.5rem;
    --space-6: 3rem;
    --space-8: 4rem;
    --space-10: 5rem;
    
    /* Typography Scale */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    
    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    
    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 12px 48px rgba(0, 0, 0, 0.16);
}

/* Contact page styles (moved from inline) */
.contact-page .container{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}
.contact-page .banner{background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url('https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');background-size:cover;background-position:center;padding:80px 20px 53px;display:flex;align-items:center;color:#fff;text-align:center;width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;margin-bottom:40px}
/* Make below header section white */
.contact-page .page-header{background:#fff;padding:30px 0;margin-bottom:50px}
.contact-page .banner-content{max-width:800px;margin:0 auto;padding:0 20px}
.contact-page .banner h1{font-size:48px;margin-bottom:20px}
.contact-page .banner p{font-size:20px;margin-bottom:30px}
.contact-page .banner-btn{display:inline-block;background-color:#1a73e8;color:#fff;padding:12px 30px;border-radius:4px;text-decoration:none;font-weight:500;transition:background-color .3s}
.contact-page .banner-btn:hover{background-color:#0d47a1}
.contact-page .main-content{padding:60px 0}
.contact-page .page-header{text-align:center;margin-bottom:50px}
.contact-page .page-title{font-size:36px;margin-bottom:15px;color:#333}
.contact-page .page-description{font-size:18px;color:#666;max-width:700px;margin:0 auto}
.contact-page .contact-section{display:grid;grid-template-columns:1fr 1fr;gap:50px;margin-bottom:60px;align-items:start}
@media (max-width:768px){.contact-page .contact-section{grid-template-columns:1fr}}
.contact-page .contact-info{background:#fff;padding:40px;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.1);text-align:left;display:flex;flex-direction:column}
.contact-page .contact-info h2{text-align:left}
.contact-page .contact-info h2{margin-bottom:25px;font-size:24px;color:#333}
.contact-page .contact-method{display:flex;align-items:flex-start;margin-bottom:25px}
.contact-page .contact-details{margin-top:-6px}
.contact-page .contact-icon{background:#1a73e8;color:#fff;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-right:15px;flex-shrink:0}
.contact-page .contact-details h3{font-size:18px;margin-bottom:5px}
.contact-page .contact-details p{color:#666}
.contact-page .contact-form{background:#fff;padding:40px;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.1);display:flex;flex-direction:column}
.contact-page .contact-form h2{margin-bottom:25px;font-size:24px;color:#333}
.contact-page .form-group{margin-bottom:20px}
.contact-page .form-group label{display:block;margin-bottom:8px;font-weight:500}
.contact-page .form-control{width:100%;padding:12px 15px;border:1px solid #ddd;border-radius:4px;font-size:16px;transition:border-color .3s}
.contact-page .form-control:focus{border-color:#1a73e8;outline:none}
.contact-page textarea.form-control{min-height:90px;max-height:110px;height:90px;resize:vertical}
.contact-page .btn{display:inline-block;background-color:#1a73e8;color:#fff;padding:12px 30px;border:none;border-radius:4px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .3s}
.contact-page .btn:hover{background-color:#0d47a1}
/* Contact Form 7 styling */
.contact-page .wpcf7 .form-group{margin-bottom:20px}
.contact-page .wpcf7 label{display:block;margin-bottom:8px;font-weight:500}
.contact-page .wpcf7 input.form-control,.contact-page .wpcf7 textarea.form-control{width:100%;padding:12px 15px;border:1px solid #ddd;border-radius:4px;font-size:16px;transition:border-color .3s}
.contact-page .wpcf7 input.form-control:focus,.contact-page .wpcf7 textarea.form-control:focus{border-color:#1a73e8;outline:none}
.contact-page .wpcf7 textarea.form-control{min-height:90px;max-height:110px;height:90px;resize:vertical}
.contact-page .wpcf7 input.btn{background:#1a73e8;color:#fff;padding:12px 30px;border:none;border-radius:4px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .3s}
.contact-page .wpcf7 input.btn:hover{background:#0d47a1}
.contact-page .wpcf7-response-output{margin-top:15px;padding:10px 15px;border-radius:4px}
.contact-page .wpcf7-validation-errors{border:1px solid #dc3545;color:#dc3545;background:#f8d7da}
.contact-page .wpcf7-mail-sent-ok{border:1px solid #28a745;color:#28a745;background:#d4edda}
/* Footer Contact Form 7 styling */
.footer-form .wpcf7 .footer-form-group{margin-bottom:12px}
.footer-form .wpcf7 input[type="text"],.footer-form .wpcf7 input[type="email"],.footer-form .wpcf7 textarea{width:100%;padding:10px 12px;border:1px solid rgba(255,255,255,.3);border-radius:6px;background:rgba(255,255,255,.95);font-size:14px;transition:border-color .3s}
.footer-form .wpcf7 input:focus,.footer-form .wpcf7 textarea:focus{border-color:#1a73e8;outline:none;background:#fff}
.footer-form .wpcf7 textarea{min-height:30px;max-height:45px;height:30px;resize:vertical}
.footer-form .wpcf7 input[type="submit"]{width:100%;background:#1a73e8;color:#fff;padding:10px 18px;border:none;border-radius:6px;font-weight:600;cursor:pointer;transition:background .3s}
.footer-form .wpcf7 input[type="submit"]:hover{background:#0d47a1}
.footer-form .wpcf7-response-output{margin-top:10px;padding:8px;border-radius:4px;font-size:13px}
.footer-form .wpcf7-validation-errors{border:1px solid #dc3545;color:#dc3545;background:rgba(220,53,69,.1)}
.footer-form .wpcf7-mail-sent-ok{border:1px solid #28a745;color:#28a745;background:rgba(40,167,69,.1)}
.contact-page .location-section{margin-bottom:60px}
.contact-page .location-section h2{text-align:center;margin-bottom:30px;font-size:28px}
.contact-page .location-container{display:grid;grid-template-columns:1fr 1fr;gap:30px}
@media (max-width:768px){.contact-page .location-container{grid-template-columns:1fr}}
.contact-page .map-placeholder{height:300px;border-radius:8px;overflow:hidden;position:relative}
.contact-page .map-placeholder iframe{width:100%;height:100%;border:0;display:block}
.contact-page .office-info{background:#fff;padding:30px;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.1)}
.contact-page .office-info h3{margin-bottom:20px;font-size:22px}
.contact-page .office-details p{margin-bottom:15px;display:flex;align-items:flex-start}
.contact-page .office-details i{margin-right:10px;color:#1a73e8}
.contact-page .faq-section{margin-bottom:60px}
.contact-page .faq-section h2{text-align:center;margin-bottom:30px;font-size:28px}
.contact-page .faq-container{max-width:800px;margin:0 auto}
.contact-page .faq-item{background:#fff;margin-bottom:15px;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.1);overflow:hidden}
.contact-page .faq-question{padding:20px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:500}
.contact-page .faq-answer{padding:0 20px;max-height:0;overflow:hidden;transition:max-height .3s,padding .3s}
.contact-page .faq-item.active .faq-answer{padding:0 20px 20px;max-height:500px}
/* Products page card/grid styles (moved from inline) */
.products-page-body .products-section{margin-top:10px}
/* Keep flex for other pages that might use products-page-body */
.products-page-body .products-grid{display:flex;flex-wrap:wrap;gap:24px}
/* Override flex layout for product listing pages - use grid instead (must be after general rule) */
body.page-template-page-products .products-page-body .products-grid,
body.taxonomy-product_cat .products-page-body .products-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(366.67px, 1fr)) !important;
    gap: 6px !important;
}
/* 统一产品card样式 - 确保新旧产品页面一致 */
.products-page-body .products-grid .product-card,
body.page-template-page-products .products-page-body .products-grid .product-card,
body.taxonomy-product_cat .products-page-body .products-grid .product-card,
body.page-template-page-products .product-card,
body.taxonomy-product_cat .product-card {
    display:flex !important;
    flex-direction:column !important;
    border:1px solid #e9ecef !important;
    border-radius:12px !important;
    padding:18px !important;
    background:#fff !important;
    max-width:360px !important;
    flex:1 1 360px !important;
    height: 100% !important;
    min-height: 480px !important; /* 确保所有卡片有相同的最小高度 */
    box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important;
    transition: transform .3s, box-shadow .3s !important;
}
.products-page-body .products-grid .product-image{display:flex;align-items:center;justify-content:center;height:260px;margin-bottom:10px}
.products-page-body .products-grid .product-image img{max-width:90%;max-height:90%;object-fit:contain}
/* 统一产品content样式 - 确保新旧产品页面一致 */
.products-page-body .products-grid .product-content,
body.page-template-page-products .products-page-body .products-grid .product-content,
body.taxonomy-product_cat .products-page-body .products-grid .product-content,
body.page-template-page-products .product-content,
body.taxonomy-product_cat .product-content {
    display:flex !important;
    flex-direction:column !important;
    gap:8px !important;
    flex-grow:1 !important;
    min-height: 0 !important; /* 允许flex子元素收缩 */
    padding:22px !important; /* 统一padding，确保内容区域一致 */
}
.products-page-body .products-grid .product-content h3,
body.page-template-page-products .products-page-body .products-grid .product-content h3,
body.taxonomy-product_cat .products-page-body .products-grid .product-content h3,
body.page-template-page-products .product-content h3,
body.taxonomy-product_cat .product-content h3 {
    margin:0 !important;
    font-size:1.3rem !important;
    line-height:1.4 !important;
    min-height: 2.8em !important; /* 固定标题高度，避免文字换行导致变化 */
    margin-bottom:12px !important;
    color:var(--gtr-primary-dark, #222) !important;
}
.products-page-body .products-grid .product-content p,
body.page-template-page-products .products-page-body .products-grid .product-content p,
body.taxonomy-product_cat .products-page-body .products-grid .product-content p,
body.page-template-page-products .product-content p,
body.taxonomy-product_cat .product-content p {
    margin:0 !important;
    color:var(--gtr-text-muted, #495057) !important;
    display:-webkit-box !important;
    -webkit-line-clamp:3 !important;
    -webkit-box-orient:vertical !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    min-height: 4.8em !important; /* 固定描述高度，确保footer位置一致 */
    flex-grow:1 !important;
    font-size:0.95rem !important;
    line-height: 1.6 !important;
    margin-bottom:18px !important;
}
.products-page-body .products-grid .product-features{display:none}
/* 统一产品footer样式 - 与page-products保持一致 */
/* 使用最高优先级选择器确保新旧产品页面样式一致 */
.products-page-body .products-grid .product-footer,
body.page-template-page-products .products-page-body .products-grid .product-footer,
body.taxonomy-product_cat .products-page-body .products-grid .product-footer,
body.page-template-page-products .product-footer,
body.taxonomy-product_cat .product-footer {
    margin-top:12px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    padding-top:12px !important;
    border-top:none !important;
    min-height: 50px !important;
    flex-shrink: 0 !important;
    gap: 12px !important; /* 统一按钮间距 - 使用!important确保优先级 */
}
.products-page-body .products-grid .product-price,
body.page-template-page-products .products-page-body .products-grid .product-price,
body.taxonomy-product_cat .products-page-body .products-grid .product-price,
body.page-template-page-products .product-price,
body.taxonomy-product_cat .product-price {
    font-weight:700 !important;
    color:#ffffff !important;
    background: linear-gradient(90deg, var(--primary-blue, #0d6efd), var(--electric-blue, #00aaff)) !important;
    padding: 6px 8px !important;
    border-radius: 8px !important;
    box-shadow: 0 6px 18px rgba(0,102,255,0.12) !important;
    width: 80px !important; /* 固定宽度，不随文字变化 */
    max-width: 80px !important;
    min-width: 80px !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    text-align: center !important;
    display: inline-block !important;
    box-sizing: border-box !important;
    font-size: 1.1rem !important;
    line-height: 1.2 !important;
}
.products-page-body .products-grid .product-cta,
body.page-template-page-products .products-page-body .products-grid .product-cta,
body.taxonomy-product_cat .products-page-body .products-grid .product-cta,
body.page-template-page-products .product-cta,
body.taxonomy-product_cat .product-cta {
    background:#0d6efd !important;
    color:#fff !important;
    border-radius:8px !important;
    padding:10px 20px !important;
    display:inline-block !important;
    text-decoration:none !important;
    font-weight:500 !important;
    font-size:0.85rem !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    min-width: 100px !important;
    text-align: center !important;
    margin-left: auto !important;
    transition: all 0.3s !important;
}
.products-page-body .products-grid .product-cta:hover,
body.page-template-page-products .products-page-body .products-grid .product-cta:hover,
body.taxonomy-product_cat .products-page-body .products-grid .product-cta:hover,
body.page-template-page-products .product-cta:hover,
body.taxonomy-product_cat .product-cta:hover {
    background:#0056b3 !important;
    transform:translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(0,123,255,0.3) !important;
}
/* About page vertical stack layout */
.about-page .stack-vertical{display:flex;flex-direction:column;gap:24px}
.about-page .stack-vertical .content-image img{width:100%;height:auto;display:block;border-radius:8px}
.about-page .stack-vertical .content-text{width:100%}

/* ===== About page inline styles moved here from page-about.php ===== */
/* 基础样式重置 */
* { box-sizing: border-box; }
body.page-template-page-about-us, .about-template-body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

/* page about specific utilities */
/* Generic page-header - exclude products/taxonomy pages */
.page-header:not(body.page-template-page-products .page-header):not(body.taxonomy-product_cat .page-header) {
        background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
                    url('https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80');
        background-size: cover;
        background-position: center;
        color: white;
        padding: 80px 20px 53px;
        text-align: center;
        margin-bottom: 40px;
        width: 100vw;
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
}
.page-header h1 { font-size: 2.8rem; margin-bottom: 20px; font-weight: 700; }
.page-header p { font-size: 1.3rem; max-width: 800px; margin: 0 auto; opacity: 0.9; }

.content-section { padding: 80px 0; background-color: #fff; margin-bottom: 30px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.content-text h2 { font-size: 1.6rem; margin-bottom: 20px; color: #0056b3; }
.content-text p { margin-bottom: 25px; color: #555; font-size: 1.05rem; }
.content-image { border-radius: 8px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.content-image img { width: 100%; height: auto; display: block; transition: transform 0.5s; }
.content-image:hover img { transform: scale(1.03); }

.values-section { background-color: #f8f9fa; padding: 80px 0; }
.values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.value-card { background: #fff; padding: 40px 30px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); text-align: center; transition: transform 0.3s, box-shadow 0.3s; border-top: 4px solid #007bff; }
.value-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); }
.value-icon { font-size: 48px; color: #007bff; margin-bottom: 25px; }
.value-card h3 { margin-bottom: 20px; color: #0056b3; font-size: 1.4rem; }
.value-card p { color: #6c757d; line-height: 1.7; }

.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; }
.team-member { text-align: center; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: transform 0.3s; }
.team-member:hover { transform: translateY(-10px); }
.member-photo { height: 280px; background-color: #e9ecef; overflow: hidden; }
.member-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.team-member:hover .member-photo img { transform: scale(1.1); }
.member-info { padding: 25px 20px; }
.member-info h3 { margin-bottom: 8px; color: #0056b3; font-size: 1.3rem; }
.member-info .position { color: #007bff; font-weight: 600; margin-bottom: 10px; font-size: 1rem; }
.member-info p { color: #6c757d; margin-bottom: 15px; font-size: 0.95rem; }

.stats-section { background: linear-gradient(135deg, #0056b3, #007bff); color: white; padding: 80px 0; border-radius: 8px; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px; text-align: center; }
.stat-item h3 { font-size: 3rem; margin-bottom: 10px; font-weight: 700; }
.stat-item p { font-size: 1.1rem; opacity: 0.9; }

/* Generic CTA section - exclude products/taxonomy pages */
.cta-section:not(body.page-template-page-products .cta-section):not(body.taxonomy-product_cat .cta-section) { 
    background: #fff; 
    color: #333; 
    padding: 80px 0; 
    text-align: center; 
    border-radius: 8px; 
    margin-top: 40px; 
    border: 1px solid #e9ecef; 
}
.cta-section:not(body.page-template-page-products .cta-section):not(body.taxonomy-product_cat .cta-section) h2 { 
    font-size: 2.2rem; 
    margin-bottom: 20px; 
    color: #0056b3; 
}
.cta-section:not(body.page-template-page-products .cta-section):not(body.taxonomy-product_cat .cta-section) p { 
    max-width: 700px; 
    margin: 0 auto 30px; 
    font-size: 1.1rem; 
    color: #6c757d; 
}
.cta-button:not(body.page-template-page-products .cta-button):not(body.taxonomy-product_cat .cta-button) { 
    display: inline-block; 
    background: #007bff; 
    color: white; 
    padding: 14px 35px; 
    border-radius: 30px; 
    text-decoration: none; 
    font-weight: 600; 
    font-size: 1.1rem; 
    transition: all 0.3s; 
    border: 2px solid #007bff; 
}
.cta-button:not(body.page-template-page-products .cta-button):not(body.taxonomy-product_cat .cta-button):hover { 
    background: transparent; 
    color: #007bff; 
    transform: translateY(-3px); 
    box-shadow: 0 10px 20px rgba(0,0,0,0.1); 
}

@media (max-width: 992px) { .two-column { gap: 40px; } }
@media (max-width: 768px) {
    .two-column { grid-template-columns: 1fr; }
    .page-header { padding: 60px 0 40px; }
    .page-header h1 { font-size: 2.2rem; }
    .section-title h2 { font-size: 1.8rem; }
    .content-section, .values-section, .stats-section { padding: 60px 0; }
}
@media (max-width: 576px) {
    .page-header h1 { font-size: 1.8rem; }
    .page-header p { font-size: 1.1rem; }
    .value-card, .team-member { padding: 25px 20px; }
}

/* End moved page-about styles */

/* Template helpers: hero, grids and product cards (appended) */
.gtr-hero.hero-small { padding: 64px 0; background: #f8f8f8; }
.gtr-hero .hero-title { font-size: 32px; margin: 0 0 12px; }
.gtr-hero .hero-sub { color: #666; margin: 0 0 0; }

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

.product-card { background: #fff; border: 1px solid #eee; padding: 14px; border-radius: 8px; transition: transform .18s ease, box-shadow .18s ease; }
.product-card:hover { transform: translateY(-6px); box-shadow: 0 10px 24px rgba(0,0,0,0.09); }
.product-image { height: 260px; overflow: hidden; display:block; margin-bottom:12px; }
.product-image img { width:100%; height:100%; object-fit:cover; display:block; }
.product-title { font-size:16px; margin:0; color:#222; }

.product-filter .filter-list { list-style:none; padding:0; margin:0 0 18px; display:flex; gap:12px; flex-wrap:wrap; }
.product-filter .filter-list a { padding:6px 10px; border-radius:4px; background:#fff; border:1px solid #ddd; color:#333; text-decoration:none; }
.product-filter .filter-list a.active { background:#222; color:#fff; border-color:#222; }

@media (max-width: 900px) {
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .grid-3 { grid-template-columns: 1fr; }
    .gtr-hero.hero-small { padding: 28px 0; }
}


/* ============================ */
/* Clean Footer Styles (consolidated) */
/* This block is intentionally specific so it overrides earlier fragmented rules.
   If you later want to remove old styles, we can prune the earlier sections. */
html body .main-footer {
    --footer-bg: #0b4ea6;
    --footer-text: #ffffff;
    --footer-muted: rgba(255,255,255,0.88);
    background: linear-gradient(135deg, var(--footer-bg) 0%, #1e6fd9 60%, #26d0ce 100%) !important;
    color: var(--footer-text) !important;
    padding: 60px 0 24px 0 !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    box-sizing: border-box;
}

html body .main-footer .footer-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    gap: 32px;
    align-items: flex-start;
    flex-wrap: wrap;
}

html body .main-footer .footer-col {
    flex: 1 1 220px;
    min-width: 220px;
}

/* Ensure footer columns stack their content from the top so headings align */
html body .main-footer .footer-col { display: flex; flex-direction: column; justify-content: flex-start; }

/* Make sure headings inside columns have no extra top margin/padding so all four align */
html body .main-footer .footer-col h4 { margin-top: 0 !important; padding-top: 0 !important; }

/* Reset any top padding on columns that may push headings down */
html body .main-footer .footer-col { padding-top: 0; }
html body .main-footer .footer-contact-first { padding-top: 0; }
html body .main-footer .footer-product-links { padding-top: 0; }
html body .main-footer .footer-other-links { padding-top: 0; }
/* keep left/right padding for form column but remove top so heading lines up */
html body .main-footer .footer-form-col { padding-top: 0; padding-left: 18px; padding-right: 18px; }

/* About / logo */
html body .main-footer .footer-about .footer-logo img { height: 44px; width: auto; display:block; }
html body .main-footer .footer-about .footer-desc {
    color: var(--footer-muted);
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.6;
}

/* Links column */
html body .main-footer .footer-links h4,
html body .main-footer .footer-contact h4,
html body .main-footer .footer-social-col h4 { color: var(--footer-text); margin-bottom: 12px; font-size: 16px; }

/* Ensure all footer column headings align vertically */
html body .main-footer .footer-col h4 { margin-top: 0; margin-bottom: 12px; padding-top: 0; }

html body .main-footer .footer-menu { list-style: none; padding: 0; margin: 0; display:flex; flex-direction:column; gap:10px; }
html body .main-footer .footer-menu a { color: var(--footer-muted); text-decoration: none; font-weight: 500; }
html body .main-footer .footer-menu a:hover { color: #e6f8ff; }

/* Contact column */
html body .main-footer .footer-contact p { color: var(--footer-muted); margin: 6px 0; font-size: 15px; }

/* Social icons - circular, consistent size */
html body .main-footer .footer-social {
    display:flex; gap:12px; align-items:center; margin-top:10px;
}
html body .main-footer .footer-social a {
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; border-radius:50%;
    background: rgba(255,255,255,0.06); color: var(--footer-text);
    text-decoration:none; transition: transform .15s ease, background .12s ease;
}
html body .main-footer .footer-social a:hover { background: rgba(255,255,255,0.14); transform: translateY(-3px); }
html body .main-footer .footer-social a i { font-size: 18px; }

/* Footer bottom */
html body .main-footer .footer-bottom { margin-top: 28px; border-top: 1px solid rgba(255,255,255,0.06); padding-top: 18px; }
html body .main-footer .footer-bottom-inner { max-width: 1300px; margin: 0 auto; padding: 0 20px; display:flex; justify-content:space-between; gap:20px; align-items:center; color: rgba(255,255,255,0.86); font-size:14px; }

/* Responsive behavior */
@media (max-width: 920px) {
    html body .main-footer .footer-container { flex-direction: column; gap: 18px; }
    html body .main-footer .footer-col { min-width: auto; width: 100%; }
    html body .main-footer .footer-menu { flex-direction: row; flex-wrap: wrap; gap: 12px; }
}

/* Accessibility: focus states for social links */
html body .main-footer .footer-social a:focus { outline: 3px solid rgba(255,255,255,0.12); outline-offset: 3px; }

/* End clean footer styles */

/* ============================ */
/* Footer consolidation overrides: use only one background and remove duplicate bars */
html body .main-footer {
    /* single authoritative background */
    background: linear-gradient(135deg, #0b4ea6 0%, #1e6fd9 60%, #26d0ce 100%) !important;
    padding-top: 48px !important;
    padding-bottom: 20px !important;
}

/* remove any background/box-shadow/borders on child regions so only .main-footer shows the background */
html body .main-footer .footer-top,
html body .main-footer .footer-bottom,
html body .main-footer .footer-top .footer-container,
html body .main-footer .footer-bottom-inner {
    background: transparent !important;
    box-shadow: none !important;
    border-top: 0 !important;
}

/* tune the bottom bar to be subtle and single */
html body .main-footer .footer-bottom { padding-top: 14px !important; padding-bottom: 14px !important; }
html body .main-footer .footer-bottom-inner { justify-content: space-between; align-items: center; }

/* tighten container spacing for a cleaner look */
html body .main-footer .footer-container { gap: 24px !important; }

@media (max-width: 920px) {
    html body .main-footer { padding-top: 36px !important; padding-bottom: 18px !important; }
    html body .main-footer .footer-bottom { padding-top: 12px !important; padding-bottom: 12px !important; }
}

/* End footer consolidation */

/* Footer - new layout adjustments */
html body .main-footer .footer-container { align-items: flex-start; }
/* Column sizing priority - balanced four columns on desktop; stacked on small screens */
@media (min-width: 920px) {
    /* reduce left crowding, distribute columns across width */
    /* redistribute columns: widen left, tighten middle, make right compact */
    html body .main-footer .footer-container { flex-wrap: nowrap; gap: 28px; justify-content: space-between; }
    /* increase left column to give breathing room */
    html body .main-footer .footer-contact-first { flex: 0 0 24%; min-width:200px; padding-right:12px; }
    /* product column: reduce slightly */
    html body .main-footer .footer-product-links { flex: 0 0 20%; min-width:200px; }
    /* other links: reduce width */
    html body .main-footer .footer-other-links { flex: 0 0 14%; min-width:160px; }
    /* form column: compact but stable on right */
    html body .main-footer .footer-form-col { flex: 0 0 24%; min-width:280px; flex-shrink: 0; align-self: flex-start; padding-left: 8px; }
    html body .main-footer .footer-form-col .footer-form { width: 100%; }
}

/* Nudge product column slightly to the right on desktop to match visual alignment */
@media (min-width: 920px) {
    html body .main-footer .footer-product-links { transform: translateX(10px); }
}

@media (max-width: 919px) {
    html body .main-footer .footer-container { flex-direction: column; gap: 18px; }
    html body .main-footer .footer-contact-first, html body .main-footer .footer-links, html body .main-footer .footer-about, html body .main-footer .footer-form-col { width:100%; min-width:auto; }
}

/* Quick Links horizontal menu */
html body .main-footer .footer-menu.horizontal { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
html body .main-footer .footer-menu.horizontal li { margin: 0; }
html body .main-footer .footer-menu.horizontal li a { display: inline-block; padding: 6px 0; }

/* Social icons: keep only icons, no label */
html body .main-footer .footer-contact-first .footer-social { margin-top: 14px; }
html body .main-footer .footer-contact-first .footer-social a { width:44px; height:44px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background: rgba(255,255,255,0.06); color: #fff; }

/* Simple fallback form styling */
.footer-form-simple { display:flex; flex-direction:column; gap:10px; }
.footer-form-simple input, .footer-form-simple textarea { padding:10px; border-radius:6px; border:none; }
.footer-form-simple button { background:#fff; color:#0b4ea6; padding:10px 14px; border-radius:6px; border:none; cursor:pointer; }

@media (max-width: 920px) {
    html body .main-footer .footer-container { gap:14px; }
    html body .main-footer .footer-contact-first, html body .main-footer .footer-links, html body .main-footer .footer-about, html body .main-footer .footer-form-col { width:100%; }
}

/* About page specific styles */
.hero-modern .hero-media-wrap { position:relative; overflow:hidden; }
.hero-modern .hero-media { width:100%; height:420px; object-fit:cover; display:block; filter:contrast(1.02) saturate(1.05); }
.hero-modern .hero-overlay { position:absolute; inset:0; background: linear-gradient(180deg, rgba(10,20,40,0.25), rgba(10,20,40,0.45)); z-index:1; }
.hero-modern .hero-content { position:relative; z-index:2; padding: 80px 0; color:#fff; }
.hero-modern .hero-title { color: #fff; font-size:38px; margin:0 0 8px; }
.hero-modern .hero-sub { color: rgba(255,255,255,0.9); margin:0; }

.about-gallery { display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; margin-top:20px; }
.about-gallery figure { margin:0; overflow:hidden; border-radius:8px; }
.about-gallery img { width:100%; height:220px; object-fit:cover; display:block; transition: transform .28s ease; }
.about-gallery img:hover { transform: scale(1.03); }

.team-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; margin-top:18px; }
.team-member { display:flex; gap:12px; align-items:center; background:#fff; padding:14px; border-radius:10px; box-shadow:0 8px 20px rgba(11,30,60,0.06); }
.team-member .avatar { flex:0 0 84px; height:84px; border-radius:50%; overflow:hidden; }
.team-member .avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.team-member .member-info h4 { margin:0 0 6px; font-size:16px; }
.team-member .member-info p { margin:0; color:#666; }

@media (max-width: 900px) {
    .about-gallery { grid-template-columns: repeat(2,1fr); }
    .team-grid { grid-template-columns: 1fr; }
    .hero-modern .hero-media { height: 300px; }
}

@media (max-width: 600px) {
    .about-gallery { grid-template-columns: 1fr; }
    .hero-modern .hero-media { height: 220px; }
    .hero-modern .hero-content { padding: 36px 0; }
}



/* footer样式 (OLD - commented out during cleanup)
.main-footer {
    background: #1a2980;
    color: #fff;
    padding: 48px 0 0 0;
    font-size: 1rem;
}
*/

/* Footer micro-adjustments */
/* Footer micro-adjustments */
.footer-cta { padding:12px 26px; border-radius:30px; font-size:15px; }
.footer-cta:hover { transform: translateY(-2px); }

.contact-column .social-row a { border:1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.02); }
.contact-column .social-row a:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.14); }

/* Footer typography tweaks: unify sizes for headings, links, contact lines and form inputs */
html body .main-footer { --gtr-footer-base: 15px; font-size: var(--gtr-footer-base); }
html body .main-footer h4 { font-size: 16px; font-weight: 700; margin-bottom: 12px; }
html body .main-footer .footer-menu a,
html body .main-footer .footer-contact p,
html body .main-footer .footer-desc { font-size: 14px; font-weight: 500; line-height: 1.6; color: var(--footer-muted); }
html body .main-footer .footer-menu.vertical a { font-size: 15px; }

/* Form inputs and placeholders */
html body .main-footer .footer-form-simple input,
html body .main-footer .footer-form-simple textarea { font-size: 14px; line-height: 1.4; }
html body .main-footer .footer-form-simple button { font-size: 15px; font-weight: 600; }

/* Footer bottom copyright */
html body .main-footer .footer-bottom-inner { font-size: 13px; color: rgba(255,255,255,0.86); }

/* optional: inputs styled as bottom-line only (uncomment if desired) */
.footer-form-col .footer-form-simple input, .footer-form-col .footer-form-simple textarea {
    background: transparent; border: none; border-bottom: 1px solid rgba(0,0,0,0.08); padding: 10px 6px; width:100%;
}
.footer-form-col .footer-form-simple input:focus, .footer-form-col .footer-form-simple textarea:focus { outline:none; border-bottom-color: rgba(11,111,240,0.9); }


/* 轮播图样式展开为标准CSS */
.fullscreen-carousel {
    position: relative;
    width: 100vw;
    height: 60vh;
    min-height: 400px;
    overflow: hidden;
    margin-bottom: 40px;
}
.carousel-slide {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.7s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.carousel-slide.active { opacity: 1; z-index: 2; }
.carousel-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(90deg,rgba(30,40,80,0.6) 0%,rgba(0,0,0,0.2) 100%);
    z-index: 1;
}
.carousel-caption {
    position: relative;
    z-index: 2;
    color: #fff;
    text-align: left;
    max-width: 600px;
    margin-left: 60px;
}
.carousel-caption h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 16px;
    letter-spacing: 2px;
}
.carousel-caption p {
    font-size: 1.2rem;
    margin-bottom: 24px;
}
.carousel-btn {
    display: inline-block;
    background: #00aaff;
    color: #fff;
    padding: 12px 32px;
    border-radius: 24px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    transition: background 0.2s;
}
.carousel-btn:hover { background: #0077cc; }
.carousel-arrow,
.carousel-control-prev,
.carousel-control-next,
.hero-carousel button[class*="prev"],
.hero-carousel button[class*="next"],
.hero-carousel button[class*="arrow"]{
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}
.carousel-indicators {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 4;
}
.carousel-indicator {
    width: 12px; height: 12px;
    background: #fff;
    border-radius: 50%;
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.2s, background 0.2s;
}
.carousel-indicator.active {
    opacity: 1;
    background: #00aaff;
}
.footer-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 24px;

.footer-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding-bottom: 24px;
    margin-bottom: 32px;
}
.footer-logo img {
    height: 40px;
    width: auto;
}

/* Footer - blue background and responsive layout */
.main-footer{
        background: linear-gradient(180deg,#0b4ea6,#083b82); /* nicer blue gradient */
        color: #fff;
        padding: 48px 0 32px 0;
}
.main-footer .footer-container{ max-width:1200px; margin:0 auto; padding:0 24px; }
.footer-nav{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
.footer-menu{ display:flex; gap:18px; list-style:none; margin:0; padding:0; }
.footer-menu li a{ color:#fff; text-decoration:none; font-weight:600; opacity:0.95; }
.footer-menu li a:hover{ color:#cfe9ff; }
.footer-info{ display:flex; gap:40px; margin-top:24px; }
.footer-contact h3, .footer-form h3{ color:#fff; margin-bottom:8px; }
.footer-bottom{ margin-top:24px; border-top:1px solid rgba(255,255,255,0.06); padding-top:18px; text-align:center; }

@media (max-width:800px){
    .footer-nav{ flex-direction:column; align-items:flex-start; }
    .footer-menu{ flex-wrap:wrap; }
    .footer-info{ flex-direction:column; gap:18px; }
}

.footer-menu {
    display: flex;
    gap: 28px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer-link {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}
.footer-link:hover { color: #00aaff; }
.footer-info {
    display: flex;
}

/* 导航栏显示优化 */
.main-header {
    background: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    position: relative;
    z-index: 10;
}
.navbar {
    display: flex;
    align-items: center;
    /* use flex-start so logo stays at left; the menu will be absolutely centered */
    justify-content: flex-start;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
    height: 64px;
    position: relative;
}
.navbar-logo img {
    height: 48px;
    width: auto;
}
.navbar-menu{
    /* center the menu horizontally within the navbar, with adjustable left-offset
       --nav-offset: positive value moves the whole menu to the left relative to center
       so Home (first item) appears closer to page center while logo stays at left */
    --nav-offset: 80px; /* tweak this value to move menu left/right */
    position: absolute;
    left: calc(50% - var(--nav-offset));
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 32px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.navbar-menu li{ display: inline-block; }
.navbar-menu .nav-link{ padding: 8px 0; }

/* small screens: restore normal flow so menu becomes part of the document flow */
@media (max-width: 900px){
    .navbar-menu{ position: static; transform: none; top: auto; left: auto; display:flex; gap:16px; padding-left:0; --nav-offset:0; }
}
.navbar-menu {
    display: flex;
    gap: 32px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav-link {
    color: #222;
    font-weight: 600;
    text-decoration: none;
    font-size: 1.1rem;
    transition: color 0.2s;
    padding: 8px 0;
    position: relative;
}
.nav-link:hover {
    color: #00aaff;
}
}

/* 首页区块美化 */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.hero-carousel {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    position: relative;
}
.hero-slides {
    position: relative;
    width: 100%;
}
.hero-slide {
    position: relative;
    width: 100%;
}
.hero-slide .hero-overlay{ position:absolute; left:0; top:0; right:0; bottom:0; }
.hero-media {
    width: 100%;
    height: auto; /* 保持宽度为100%时比例缩放 */
    display: block;
    max-width: 100%;
}
/* 视频也使用类似的覆盖方式（如果想要视频充满容器，可使用 object-fit） */
.hero-media[type="video"], .hero-media video, .hero-media video[src] {
    width: 100%;
    height: auto;
    display: block;
}

/* ----------------------------------------------------------------------
   Scoped Products page stylesheet (converted from user HTML example)
   Applies only to the page using the Page Template: page-products.php
   This block intentionally uses the body.page-template-page-products prefix
   so it overrides other theme styles without broad side effects.
   ---------------------------------------------------------------------- */
body.page-template-page-products,
body.taxonomy-product_cat {
    --gtr-primary: #007bff;
    --gtr-primary-dark: #0056b3;
    --gtr-card-bg: #ffffff;
    --gtr-text-muted: #6c757d;
}

body.page-template-page-products .container,
body.taxonomy-product_cat .container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

body.page-template-page-products .page-header,
body.taxonomy-product_cat .page-header {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
                url('https://images.unsplash.com/photo-1568605117036-5fe5e7bab0b7?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80') !important;
    background-size: cover !important;
    background-position: center !important;
    color: #fff !important;
    padding: 80px 20px 53px !important;
    text-align: center !important;
    margin-bottom: 40px !important;
    width: 100vw !important;
    position: relative !important;
    box-sizing: border-box !important;
}

/* Ensure products-page-body doesn't interfere with full-width header */
body.page-template-page-products .products-page-body,
body.taxonomy-product_cat .products-page-body {
    overflow-x: hidden;
    position: relative;
}

body.page-template-page-products .products-page-body > .page-header,
body.taxonomy-product_cat .products-page-body > .page-header {
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    transform: none !important;
    right: auto !important;
}

/* Ensure container inside page-header is centered */
body.page-template-page-products .page-header .container,
body.taxonomy-product_cat .page-header .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    position: relative;
    z-index: 1;
}

body.page-template-page-products .page-header h1,
body.taxonomy-product_cat .page-header h1 { font-size: 2.5rem; margin-bottom: 15px; font-weight:700; }
body.page-template-page-products .page-header p,
body.taxonomy-product_cat .page-header p { font-size:1.2rem; max-width:800px; margin:0 auto; opacity:0.9; }

/* filter */
body.page-template-page-products .filter-section,
body.taxonomy-product_cat .filter-section { background:#fff; padding:25px; border-radius:8px; box-shadow:0 5px 15px rgba(0,0,0,0.05); margin-bottom:40px; }
body.page-template-page-products .filter-title,
body.taxonomy-product_cat .filter-title,
body.page-template-page-products .filter-section h2,
body.taxonomy-product_cat .filter-section h2,
body.page-template-page-products h2.filter-title,
body.taxonomy-product_cat h2.filter-title { 
    text-align: center !important; 
    margin-bottom: 20px !important; 
    color: var(--gtr-primary-dark) !important; 
    font-size: 1.4rem !important; 
    display: block !important;
    width: 100% !important;
}
body.page-template-page-products .filter-buttons,
body.taxonomy-product_cat .filter-buttons { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; }
body.page-template-page-products .filter-btn,
body.taxonomy-product_cat .filter-btn,
body.taxonomy-product_category .filter-btn { 
    background:#f8f9fa; 
    border:2px solid #e9ecef; 
    color:#495057; 
    padding:8px 18px; 
    border-radius:30px; 
    cursor:pointer; 
    font-weight:500; 
    text-decoration: none;
    display: inline-block;
    pointer-events: auto;
    position: relative;
    z-index: 1;
}
body.page-template-page-products .filter-btn.active, 
body.page-template-page-products .filter-btn:hover,
body.taxonomy-product_cat .filter-btn.active,
body.taxonomy-product_cat .filter-btn:hover,
body.taxonomy-product_category .filter-btn.active,
body.taxonomy-product_category .filter-btn:hover { 
    background:var(--gtr-primary); 
    color:#fff; 
    border-color:var(--gtr-primary); 
    text-decoration: none;
}

/* products grid */
body.page-template-page-products .products-section,
body.taxonomy-product_cat .products-section,
body.taxonomy-product_category .products-section { padding: 20px 0 60px; }
body.page-template-page-products .products-grid,
body.taxonomy-product_cat .products-grid,
body.taxonomy-product_category .products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 35px;
}

/* product card - 这些样式已被上面的统一样式覆盖，保留hover效果 */
body.page-template-page-products .product-card:hover,
body.taxonomy-product_cat .product-card:hover { transform: translateY(-8px); box-shadow: 0 15px 40px rgba(0,0,0,0.15); }

body.page-template-page-products .product-image,
body.taxonomy-product_cat .product-image { height:200px; overflow:hidden; position:relative; }
body.page-template-page-products .product-image img,
body.taxonomy-product_cat .product-image img { width:100%; height:100%; object-fit:cover; transition: transform .5s; display:block; }
body.page-template-page-products .product-card:hover .product-image img,
body.taxonomy-product_cat .product-card:hover .product-image img { transform: scale(1.05); }

body.page-template-page-products .product-category,
body.taxonomy-product_cat .product-category { position:absolute; top:15px; right:15px; background:var(--gtr-primary); color:#fff; padding:5px 12px; border-radius:20px; font-size:0.8rem; font-weight:600; }

/* 以下样式已被上面的统一样式覆盖，保留注释以供参考 */
/* body.page-template-page-products .product-content,
body.taxonomy-product_cat .product-content { 
    padding:22px; 
    flex-grow:1; 
    display:flex; 
    flex-direction:column; 
    min-height: 0;
}
body.page-template-page-products .product-content h3,
body.taxonomy-product_cat .product-content h3 { 
    font-size:1.3rem; 
    margin-bottom:12px; 
    color:var(--gtr-primary-dark); 
    line-height: 1.4;
    min-height: 2.8em;
}
body.page-template-page-products .product-content p,
body.taxonomy-product_cat .product-content p { 
    color:var(--gtr-text-muted); 
    margin-bottom:18px; 
    flex-grow:1; 
    font-size:0.95rem; 
    line-height: 1.6;
    min-height: 4.8em;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
} */
body.page-template-page-products .product-features,
body.taxonomy-product_cat .product-features { margin-bottom:18px; }
body.page-template-page-products .product-features ul,
body.taxonomy-product_cat .product-features ul { list-style:none; padding-left:0; }
body.page-template-page-products .product-features li,
body.taxonomy-product_cat .product-features li { padding:4px 0; color:#495057; position:relative; padding-left:20px; font-size:0.9rem; }
body.page-template-page-products .product-features li:before,
body.taxonomy-product_cat .product-features li:before { content:'✓'; position:absolute; left:0; color:#28a745; font-weight:700; }

/* 产品footer、价格和按钮样式已在上方（第143-172行）统一定义，此处移除重复定义 */

/* CTA section */
/* Old CTA styles - removed, using newer styles below */

/* Responsive tweaks copied from sample */
@media (max-width: 992px) {
    body.page-template-page-products .products-grid,
    body.taxonomy-product_cat .products-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap:25px; }
}

@media (max-width: 768px) {
    body.page-template-page-products .page-header,
    body.taxonomy-product_cat .page-header { padding:60px 0 40px; }
    body.page-template-page-products .page-header h1,
    body.taxonomy-product_cat .page-header h1 { font-size:2rem; }
    body.page-template-page-products .products-grid,
    body.taxonomy-product_cat .products-grid { grid-template-columns: 1fr; gap:20px; }
    body.page-template-page-products .filter-buttons,
    body.taxonomy-product_cat .filter-buttons { justify-content:flex-start; }
}

@media (max-width: 576px) {
    body.page-template-page-products .page-header h1,
    body.taxonomy-product_cat .page-header h1 { font-size:1.7rem; }
    body.page-template-page-products .page-header p,
    body.taxonomy-product_cat .page-header p { font-size:1rem; }
    .products-page-body .products-grid .product-content,
    body.page-template-page-products .products-page-body .products-grid .product-content,
    body.taxonomy-product_cat .products-page-body .products-grid .product-content,
    body.page-template-page-products .product-content,
    body.taxonomy-product_cat .product-content { 
        padding:18px !important; /* 移动端使用较小的padding */
    }
    .products-page-body .products-grid .product-footer,
    body.page-template-page-products .products-page-body .products-grid .product-footer,
    body.taxonomy-product_cat .products-page-body .products-grid .product-footer,
    body.page-template-page-products .product-footer,
    body.taxonomy-product_cat .product-footer { 
        flex-direction:column !important; 
        align-items:flex-start !important; 
        gap:12px !important; /* 统一按钮间距 */
    }
    body.page-template-page-products .cta-section,
    body.taxonomy-product_cat .cta-section { padding:50px 0; }
}

/* Force high-specificity safety net for large screens (last-resort) */
@media (min-width: 1200px) {
    body.page-template-page-products .products-grid,
    body.taxonomy-product_cat .products-grid { grid-template-columns: repeat(3, 366.67px); justify-content: space-between; }
    body.page-template-page-products .product-card,
    body.taxonomy-product_cat .product-card { width: 366.67px !important; max-width: 366.67px !important; flex: 0 0 366.67px !important; }
}

/* End scoped products styles */

/* Make product image/title/excerpt anchors behave like blocks and inherit styles */
.product-link-image { display: block; }
.product-link { display: block; color: inherit; text-decoration: none; }
.product-link:hover { text-decoration: none; }
.product-link:hover h3 { text-decoration: underline; }


/* Footer layout tweaks: balanced four-column layout */
.main-footer .footer-container { align-items: flex-start; gap: 24px; }
.main-footer .footer-contact-first { flex: 1 1 25%; min-width: 220px; }
.main-footer .footer-links { flex: 1 1 25%; min-width: 180px; }
.main-footer .footer-about { flex: 1 1 25%; min-width: 200px; }
.main-footer .footer-form-col { flex: 1 1 25%; min-width: 260px; }
.main-footer .footer-logo-left { display:block; margin-bottom:12px; }

@media (max-width: 920px) {
    .main-footer .footer-contact-first, .main-footer .footer-links, .main-footer .footer-about, .main-footer .footer-form-col { width: 100%; flex: 1 1 auto; }
}

/* End footer layout tweaks */
/* Footer description under logo (left) */
.main-footer .footer-desc-left { color: rgba(255,255,255,0.92); margin: 8px 0 14px 0; font-size: 14px; line-height: 1.6; }

/* Form column: slightly wider and with a subtle light background to contrast the blue footer */
.main-footer .footer-form-col { flex: 1 1 25%; min-width:260px; padding: 18px; box-sizing: border-box; }
.main-footer .footer-form-col .footer-form, .main-footer .footer-form-col .footer-form-simple, .main-footer .footer-form-col .contact-form {
    background: rgba(255,255,255,0.92);
    padding: 14px; border-radius: 10px; color: #0b2a4a;
}
.main-footer .footer-form-col .footer-form-simple input, .main-footer .footer-form-col .footer-form-simple textarea { background: #fff; }

/* Tweak spacing so columns look balanced */
.main-footer .footer-links { padding-top: 6px; }
.main-footer .footer-about { padding-top: 6px; }

@media (max-width: 920px) {
    .main-footer .footer-form-col { flex: 1 1 auto; padding: 0; }
    .main-footer .footer-form-col .footer-form, .main-footer .footer-form-col .footer-form-simple { background: transparent; padding: 0; border-radius: 0; }
}

/* End added footer description & form styles */
.contact-column .contact-lines { color: rgba(255,255,255,0.92); font-size:14px; line-height:1.8; }
.contact-column .contact-line { margin-bottom:12px; }
.contact-column .contact-line .icon { display:inline-block; width:28px; text-align:center; margin-right:8px; }

.footer-cta { display:inline-block; background:#0b6ff0; color:#fff; padding:10px 20px; border-radius:28px; margin:12px 0; text-decoration:none; font-weight:700; }
.footer-cta:hover { background:#095ec4; }

.footer-product-links .product-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; }
.footer-product-links .product-list li a { color: rgba(255,255,255,0.92); text-decoration:none; }
.footer-other-links .footer-menu.vertical { display:flex; flex-direction:column; gap:12px; }

/* New: Contact block styled like product links */
.footer-contact-block h4 { color: var(--footer-text); margin-bottom: 12px; font-size: 16px; }
.footer-contact-block .contact-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-contact-block .contact-list li { color: var(--footer-muted); font-weight: 500; line-height: 1.6; }
.footer-contact-block .contact-list li a { color: var(--footer-muted); text-decoration: none; }
.footer-contact-block .contact-list li .icon { display: inline-block; width: 28px; text-align: center; margin-right: 8px; color: var(--footer-text); }
.footer-contact-block .contact-list li a:hover { color: #e6f8ff; }


.footer-form-col .footer-form, .footer-form-col .footer-form-simple, .footer-form-col .contact-form { background: rgba(255,255,255,0.95); padding:18px; border-radius:10px; }
.footer-form-col .footer-form-simple input, .footer-form-col .footer-form-simple textarea { width:100%; padding:10px; border-radius:6px; border:1px solid rgba(0,0,0,0.08); }
.footer-form-col .footer-form-simple button { background:#0b6ff0; color:#fff; padding:10px 18px; border-radius:6px; border:none; font-weight:700; }

/* icons row under CTA like attachment */
.contact-column .social-row { display:flex; gap:12px; margin-top:12px; }
.contact-column .social-row a { width:40px; height:40px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.04); color:#fff; text-decoration:none; }

@media (max-width:920px){
    .footer-cta{ margin-top:8px }
    .footer-form-col { order: 4; }
}

/* End footer visual coordination styles */
.hero-slide { overflow: hidden; }

/* 小屏幕时限制高度以避免过高的 banner */
@media (min-width: 900px) {
    .hero-media { max-height: 70vh; object-fit: cover; }
}
@media (max-width: 899px) {
    .hero-media { max-height: 50vh; object-fit: cover; }
}
.section-title {
    font-size: 2rem;
    font-weight: 700;
    margin: 48px 0 32px 0;
    text-align: center;
    color: #222;
}
.home-products .product-list {
    display: flex;
    gap: 32px;
    justify-content: center;
    flex-wrap: wrap;
}
.product-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.08);
    padding: 32px 24px 24px 24px;
    text-align: center;
    width: 320px;
    transition: box-shadow 0.2s, transform 0.2s;
    display: flex;
    flex-direction: column;
}
.home-products .product-card img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 18px;
}
.product-card h3 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 12px;
}
.product-card p {
    color: #666;
    font-size: 1rem;
    margin-bottom: 18px;
}
.product-btn {
    background: #00aaff;
    color: #fff;
    padding: 8px 24px;
    border-radius: 20px;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.2s;
}
.product-btn:hover { background: #0077cc; }
.product-card:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,0.12);
    transform: translateY(-4px);
}

.home-about {
    background: #f8f9fb;
    padding: 48px 0;
}
.about-flex {
    display: flex;
    gap: 48px;
    align-items: center;
    flex-wrap: wrap;
}
.about-img img {
    width: 320px;
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.08);
}
.about-info h2 {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 18px;
}
.about-info p {
    font-size: 1.1rem;
    color: #444;
    margin-bottom: 18px;
}
.about-adv {
    list-style: none;
    padding: 0;
    margin: 0;
}
.about-adv li {
    font-size: 1rem;
    color: #0077cc;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}
.about-adv i {
    margin-right: 8px;
    color: #00aaff;
}

.scroll-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 8px;
    z-index: 6;
    pointer-events: none; /* allow clicks only on buttons */
}
.scroll-nav .nav-button {
    pointer-events: all;
    background: rgba(255,255,255,0.95);
    border: 0;
    padding: 10px 12px;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.home-cases .case-list {
    display: flex;
    gap: 32px;
    justify-content: center;
    flex-wrap: wrap;
}
.case-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.08);
    padding: 24px 20px 20px 20px;
    text-align: center;
    width: 320px;
    transition: box-shadow 0.2s, transform 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.case-card img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 14px;
}
.case-card h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 10px;
}
.case-card p {
    color: #666;
    font-size: 0.98rem;
    margin-bottom: 8px;
}
.case-card:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,0.12);
    transform: translateY(-4px);
}

.home-contact {
    background: #222;
    color: #fff;
    padding: 48px 0 32px 0;
}
.home-contact .section-title {
    color: #fff;
}
.contact-info {
    text-align: center;
    font-size: 1.1rem;
}
.contact-info p {
    margin: 12px 0;
}
.contact-info i {
    margin-right: 8px;
    color: #00aaff;
}

@media (max-width: 900px) {
    .home-products .product-list, .home-cases .case-list {
        flex-direction: column;
        gap: 24px;
        align-items: center;
    }
    .about-flex {
        flex-direction: column;
        gap: 24px;
        align-items: flex-start;
    }
    .about-img img { width: 100%; }
    .product-card, .case-card { width: 100%; }
}


.about-flex {
    display: flex;
    gap: 48px;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 32px;
}
.footer-contact {
    min-width: 220px;
    flex: 1;
}
.footer-contact h3 { font-size: 1.2rem; margin-bottom: 12px; }
.footer-form {
    min-width: 260px;
    flex: 1;
}
.footer-form h3 { font-size: 1.2rem; margin-bottom: 12px; }
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.contact-form input,
.contact-form textarea {
    padding: 10px 12px;
    border-radius: 6px;
    border: none;
    font-size: 1rem;
    background: #f8f9fa;
    color: #222;
    resize: none;
}
.contact-form textarea { min-height: 80px; }
    .contact-form button {
        background: #2c5aa0;
        color: #fff;
        border: none;
        border-radius: 6px;
        padding: 10px 0;
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;
        transition: background 0.2s;
    }
    .contact-form button:hover {
        background: #00aaff;
    }
.footer-bottom {
    text-align: center;
    padding: 18px 0 12px 0;
    font-size: 0.95rem;
    color: #eee;
    border-top: 1px solid rgba(255,255,255,0.08);
}
@media (max-width: 900px) {
    .footer-info { flex-direction: column; gap: 24px; }
    .footer-nav { flex-direction: column; gap: 18px; align-items: flex-start; }
}
/* header导航样式 */
.main-header {
    width: 100vw;
    position: fixed;
    top: 0; left: 0;
    z-index: 200;
    background: transparent;
}
.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 48px 18px 32px;
    background: transparent;
}
.navbar-logo img {
    height: 48px;
    width: auto;
    display: block;
}
.navbar-menu {
    display: flex;
    gap: 36px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav-link {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 500;
    text-decoration: none;
    letter-spacing: 1px;
    transition: color 0.2s;
    padding: 4px 0;
    position: relative;
}
.nav-link:hover,
.nav-link:focus {
    color: #00aaff;
}
@media (max-width: 900px) {
    .navbar { padding: 12px 10vw 12px 5vw; }
    .navbar-menu { gap: 18px; }
    .navbar-logo img { height: 36px; }
}
@media (max-width: 600px) {
    .navbar { flex-direction: column; align-items: flex-start; padding: 8px 2vw; }
    .navbar-menu { flex-wrap: wrap; gap: 10px; }
}
/* 全屏轮播图样式 */
.fullscreen-carousel {
    position: relative;
    width: 100vw;
    height: 100vh;
    min-height: 500px;
    overflow: hidden;
    z-index: 100;
}
.carousel-slide {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0;
    transition: opacity 1s;
    background-size: cover;
    background-position: center;
}
.carousel-slide.active {
    opacity: 1;
    z-index: 2;
}
.carousel-indicators {
    position: absolute;
    left: 50%;
    bottom: 40px;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 10;
}
.carousel-indicator {
    width: 12px; height: 12px;
    background: rgba(255,255,255,0.7);
    border: 2px solid #2c5aa0;
    cursor: pointer;
    transition: background 0.3s;
}
.carousel-indicator.active {
    background: #2c5aa0;
}
.carousel-arrow,
.carousel-control-prev,
.carousel-control-next,
.hero-carousel button[class*="prev"],
.hero-carousel button[class*="next"],
.hero-carousel button[class*="arrow"]{
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}
@media (max-width: 700px) {
    .fullscreen-carousel { min-height: 300px; height: 60vw; }
    .carousel-indicator { width: 10px; height: 10px; }
}
/* horon模块数字专属样式 */
.honors-container .stat-number {
    font-size: 3.2rem;
    font-weight: 800;
    color: #2c5aa0;
    font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
    letter-spacing: -2px;
    margin-bottom: 8px;
    text-shadow: 0 2px 8px rgba(44,90,160,0.08);
    transition: color 0.3s, font-size 0.3s;
}
/* 强制FontAwesome图标显示 */
.fas, .fa {
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', 'FontAwesome', 'Font Awesome', Arial, sans-serif !important;
    font-weight: 900 !important;
}
/* horon.html 独立命名空间，避免冲突 */
.honors-container {
    max-width: 1300px;
    margin: 0 auto var(--space-5) auto;
    overflow: visible;
}
/* 全屏蓝色背景 - 使用更高优先级覆盖 index-part/style.css */
.honors-container .certificates-section,
.certificates-section {
    padding: var(--space-10) 0 !important;
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%) !important;
    color: white;
    text-align: center;
    position: relative;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    width: 100vw !important;
    max-width: 100vw !important;
}
.honors-container .certificates-section .section-header,
.certificates-section .section-header {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 var(--space-8);
    margin-bottom: var(--space-8);
}
.honors-container .certificates-section .certificates-container,
.certificates-section .certificates-container {
    max-width: 1300px;
    margin: 0 auto;
}
.section-header {
    margin-bottom: var(--space-8);
}
.honors-subtitle {
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    margin-bottom: var(--space-2);
    display: block;
    opacity: 0.92;
}
.honors-title {
    font-size: var(--text-4xl);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
}
.certificates-container {
    position: relative;
    padding: 0 40px;
}
.certificates-scroll {
    display: flex;
    overflow-x: auto;
    gap: 30px;
    padding: 30px 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.5) transparent;
    scroll-behavior: smooth;
}
.certificates-scroll::-webkit-scrollbar {
    height: 8px;
}
.certificates-scroll::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
}
.certificates-scroll::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.5);
    border-radius: 4px;
}
.certificate-item {
    flex: 0 0 auto;
    width: 280px;
    height: 396px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    position: relative;
}
.certificate-item:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}
.certificate-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.certificate-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    color: white;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.certificate-item:hover .certificate-overlay {
    opacity: 1;
}
.certificate-title {
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 5px;
}
.certificate-desc {
    font-size: 14px;
    opacity: 0.9;
}
.scroll-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: rgba(255,255,255,0.9);
    border: none;
    border-radius: 50%;
    color: #2c5aa0;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    z-index: 10;
}
.scroll-nav:hover {
    background: white;
    transform: translateY(-50%) scale(1.1);
}
.scroll-nav.prev {
    left: 0;
}
.scroll-nav.next {
    right: 0;
}
.content-section {
    padding: var(--space-10) var(--space-8);
    background: var(--color-bg-primary);
}
.content-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-8);
    align-items: center;
}
.honors-description {
    font-size: var(--text-lg);
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-3);
}
.stats-section {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.stat-item {
    text-align: center;
    padding: 15px 20px;
    background: #f8f9fa;
    border-radius: 8px;
    transition: transform 0.3s ease;
}
.stat-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.stat-number {
    font-size: var(--text-4xl);
    font-weight: 700;
    color: var(--brand-primary);
    margin-bottom: var(--space-1);
    font-family: 'Inter', 'Montserrat', sans-serif;
    line-height: 1;
    letter-spacing: -0.03em;
}
.stats-container { margin-top: var(--space-2); display: grid; grid-template-columns: repeat(1,1fr); gap: var(--space-4); }
@media (min-width: 900px) {
    .stats-container { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 800px) and (max-width: 899px) {
    .stats-container { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
    .content-section { padding: 48px 24px; }
}

@media (max-width: 768px) {
    .content-section { padding: 40px 20px; }
    .content-grid { grid-template-columns: 1fr; gap: 28px; }
    .text-content { text-align: center; }
    .stats-section { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 18px; }
    .stat-item { flex: 1 1 140px; min-width: 140px; }
}

@media (max-width: 480px) {
    .content-section { padding: 32px 16px; }
    .certificates-container { padding: 0 16px; }
    .text-content { text-align: left; }
}
@media (min-width: 480px) and (max-width: 799px) {
    .stats-container { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 479px) {
    .stats-container { grid-template-columns: 1fr; }
}
.stat-label {
    font-size: 12px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
}
.honors-button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--brand-primary);
    color: white;
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-md);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--text-base);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-md);
    border: none;
    cursor: pointer;
    margin-top: var(--space-5);
}
.honors-button:hover {
    background: var(--brand-primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}
.button-icon {
    font-size: 18px;
}
@media (max-width: 1024px) {
    .content-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .honors-container .certificates-section,
    .certificates-section {
        padding: 40px 0 !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
        width: 100vw !important;
        max-width: 100vw !important;
    }
    .honors-container .certificates-section .section-header,
    .certificates-section .section-header {
        padding: 0 30px;
    }
    .content-section {
        padding: 40px 30px;
    }
    .certificate-item {
        width: 240px;
        height: 340px;
    }
}
@media (max-width: 768px) {
    .honors-container .certificates-section,
    .certificates-section {
        padding: 30px 0 !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
        width: 100vw !important;
        max-width: 100vw !important;
    }
    .honors-container .certificates-section .section-header,
    .certificates-section .section-header {
        padding: 0 20px;
    }
    .content-section {
        padding: 30px 20px;
    }
    .certificates-container {
        padding: 0 20px;
    }
    .scroll-nav {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
    .honors-title {
        font-size: 28px;
    }
    .stat-number {
        font-size: 36px;
    }
    .certificate-item {
        width: 200px;
        height: 283px;
    }
}
@media (max-width: 480px) {
    .honors-container .certificates-section,
    .certificates-section {
        padding: 25px 0 !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
        width: 100vw !important;
        max-width: 100vw !important;
    }
    .honors-container .certificates-section .section-header,
    .certificates-section .section-header {
        padding: 0 15px;
    }
    .content-section {
        padding: 25px 15px;
    }
    .stats-section {
        flex-direction: row;
        justify-content: space-around;
    }
    .stat-item {
        padding: 15px 10px;
    }
    .certificate-item {
        width: 180px;
        height: 255px;
    }
}
:root { --primary-blue: #0066ff; --electric-blue: #00aaff; --deep-blue: #0044cc; --light-blue: #e6f1ff; --card-bg: #ffffff; --text-dark: #333333; --text-light: #666666; --text-lighter: #888888; --border-light: #eeeeee; }

/* Keep box-sizing reset global, but avoid zeroing margins/paddings and forcing a font on every element
   which can break components that rely on default margins (headings, lists, form elements, etc.) */
* { box-sizing: border-box; }

body {
    background: #ffffff;
    color: var(--text-dark);
    font-weight: 400;
    overflow-x: hidden;
    line-height: 1.6;
    font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/* Floating Contact Sidebar - 确保在所有页面上正常显示 */
.floating-contact-sidebar,
body.category .floating-contact-sidebar,
body.page-template-page-products .floating-contact-sidebar,
body.taxonomy-product_cat .floating-contact-sidebar,
body.page-template-page-news .floating-contact-sidebar {
    position:fixed !important;
    right:0 !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    z-index:99999 !important;
    display:flex !important;
    flex-direction:column !important;
    gap:0 !important;
    pointer-events:auto !important;
    visibility:visible !important;
    opacity:1 !important;
}
.floating-contact-sidebar .contact-item{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:0 !important;
    color:#fff !important;
    text-decoration:none !important;
    transition:transform .35s ease,box-shadow .3s ease !important;
    width:60px !important;
    height:60px !important;
    border-radius:12px !important;
    box-shadow:0 2px 8px rgba(0,0,0,.15) !important;
    position:relative !important;
    margin-bottom:8px !important;
    transform:translateX(0) !important;
}
.floating-contact-sidebar .contact-item:hover{
    transform:translateY(-3px) !important;
    box-shadow:0 4px 12px rgba(0,0,0,.25) !important;
}
.floating-contact-sidebar .contact-item i{
    font-size:28px !important;
    width:100% !important;
    height:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-family: "Font Awesome 6 Brands", "Font Awesome 6 Free", "FontAwesome" !important;
    font-weight: 900 !important;
    font-style: normal !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}
.floating-contact-sidebar .contact-item.email i{
    font-family: "Font Awesome 6 Free", "FontAwesome" !important;
    font-weight: 900 !important;
}
.floating-contact-sidebar .contact-item.line i{
    font-family: "Font Awesome 6 Brands", "FontAwesome" !important;
    font-weight: 400 !important;
}
.floating-contact-sidebar .contact-item span{
    display:none !important;
}
.floating-contact-sidebar .whatsapp{background:#25d366}
.floating-contact-sidebar .whatsapp:hover{background:#20ba5a}
.floating-contact-sidebar .line{background:#00b900}
.floating-contact-sidebar .line:hover{background:#009a00}
.floating-contact-sidebar .email{background:#1a73e8}
.floating-contact-sidebar .email:hover{background:#0d47a1}
@media (max-width:768px){
    .floating-contact-sidebar,
    body.category .floating-contact-sidebar,
    body.page-template-page-products .floating-contact-sidebar,
    body.taxonomy-product_cat .floating-contact-sidebar,
    body.page-template-page-news .floating-contact-sidebar {
        top:auto !important;
        bottom:20px !important;
        transform:none !important;
        flex-direction:row !important;
        right:20px !important;
        gap:8px !important;
        z-index:99999 !important;
    }
    .floating-contact-sidebar .contact-item,
    body.category .floating-contact-sidebar .contact-item,
    body.page-template-page-products .floating-contact-sidebar .contact-item,
    body.taxonomy-product_cat .floating-contact-sidebar .contact-item,
    body.page-template-page-news .floating-contact-sidebar .contact-item {
        width:50px !important;
        height:50px !important;
        border-radius:50% !important;
        padding:12px !important;
        justify-content:center !important;
        margin-bottom:0 !important;
        transform:translateX(0) !important;
    }
    .floating-contact-sidebar .contact-item:hover,
    body.category .floating-contact-sidebar .contact-item:hover,
    body.page-template-page-products .floating-contact-sidebar .contact-item:hover,
    body.taxonomy-product_cat .floating-contact-sidebar .contact-item:hover,
    body.page-template-page-news .floating-contact-sidebar .contact-item:hover {
        transform:translateY(-5px) !important;
    }
    .floating-contact-sidebar .contact-item span,
    body.category .floating-contact-sidebar .contact-item span,
    body.page-template-page-products .floating-contact-sidebar .contact-item span,
    body.taxonomy-product_cat .floating-contact-sidebar .contact-item span,
    body.page-template-page-news .floating-contact-sidebar .contact-item span {
        display:none !important;
    }
    .floating-contact-sidebar .contact-item i,
    body.category .floating-contact-sidebar .contact-item i,
    body.page-template-page-products .floating-contact-sidebar .contact-item i,
    body.taxonomy-product_cat .floating-contact-sidebar .contact-item i,
    body.page-template-page-news .floating-contact-sidebar .contact-item i {
        min-width:auto !important;
        margin:0 !important;
    }
}
/* Article share buttons - hide text labels, show icons only */
.article-share .share-label{display:none !important}
.article-share .share-btn{padding:10px 12px;min-width:44px;justify-content:center}
/* X icon - use text X instead of icon */
.article-share .share-x i{font-family:Arial,sans-serif;font-weight:900;font-size:18px;font-style:normal}
.article-share .share-x i:before{content:"X" !important}
/* Breadcrumb navigation - global styles */
.breadcrumb{padding:15px 20px;margin-bottom:20px;font-size:14px;color:#6c757d;background:transparent;text-align:left}
.breadcrumb a{color:#007bff;text-decoration:none;transition:color .2s}
.breadcrumb a:hover{color:#0056b3;text-decoration:underline}
.breadcrumb span{color:#495057}
.container .breadcrumb{max-width:1200px;margin-left:0;margin-right:auto;padding-left:0}
.tech-product-page .breadcrumb,.products-page-body .breadcrumb{max-width:1200px;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px;text-align:left}
/* Sidebar contact form CF7 styling */
.sidebar-widget .wpcf7 .form-group{margin-bottom:2px}
.sidebar-widget .wpcf7 label{display:block;margin-bottom:1px;font-weight:500;font-size:13px}
.sidebar-widget .wpcf7 input.form-control,.sidebar-widget .wpcf7 textarea.form-control{width:100%;padding:5px 8px;border:1px solid #ddd;border-radius:4px;font-size:13px}
.sidebar-widget .wpcf7 textarea.form-control{min-height:40px;resize:vertical}
.sidebar-widget .wpcf7 input[type="submit"],.sidebar-widget .wpcf7 .submit-btn{width:100%;background:#1a73e8;color:#fff;padding:10px 16px;border:none;border-radius:4px;font-weight:600;cursor:pointer;transition:background .3s}
.sidebar-widget .wpcf7 input[type="submit"]:hover,.sidebar-widget .wpcf7 .submit-btn:hover{background:#0d47a1}
.sidebar-widget .wpcf7-response-output{margin-top:10px;padding:8px;border-radius:4px;font-size:13px}
.sidebar-widget .wpcf7-validation-errors{border:1px solid #dc3545;color:#dc3545;background:#f8d7da}
.sidebar-widget .wpcf7-mail-sent-ok{border:1px solid #28a745;color:#28a745;background:#d4edda}
/* why-choose-us 样式 */
.why-choose-us { width: 100%; max-width: 1200px; margin: 0 auto; padding: 80px 20px; position: relative; overflow: hidden; }
.bg-element { position: absolute; z-index: 0; opacity: 0.03; }
.circle-1 { width: 300px; height: 300px; top: -150px; left: -150px; border-radius: 50%; background: var(--primary-blue); }
.circle-2 { width: 500px; height: 500px; bottom: -250px; right: -250px; border-radius: 50%; background: var(--primary-blue); }
.section-header { text-align: center; margin-bottom: 70px; position: relative; z-index: 2; }
.section-title { font-size: 2.5rem; font-weight: 600; color: var(--text-dark); margin-bottom: 15px; letter-spacing: -0.5px; position: relative; display: inline-block; }
.section-subtitle { font-size: 1.1rem; color: var(--text-lighter); font-weight: 400; max-width: 500px; margin: 0 auto; line-height: 1.6; }
.divider { margin: 30px auto; width: 100%; max-width: 60px; height: 3px; background: linear-gradient(90deg, var(--primary-blue), var(--electric-blue)); border-radius: 3px; }
.stats-container { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 25px; position: relative; z-index: 2; }
.stat-card { background: var(--card-bg); border-radius: 16px; padding: 35px 25px; text-align: center; flex: 1; min-width: 0; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.04); transition: all 0.3s ease; border: 1px solid var(--border-light); position: relative; overflow: hidden; }
.stat-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0, 102, 255, 0.1); border-color: rgba(0, 170, 255, 0.2); }
.icon-container { width: 70px; height: 70px; margin: 0 auto 25px; display: flex; align-items: center; justify-content: center; background: var(--light-blue); border-radius: 18px; color: var(--primary-blue); font-size: 1.8rem; position: relative; transition: all 0.3s ease; }
.stat-card:hover .icon-container { background: linear-gradient(135deg, var(--primary-blue), var(--electric-blue)); transform: scale(1.05); color: white; }
.stat-number { font-size: 2.2rem; font-weight: 500; color: var(--text-dark); margin-bottom: 10px; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; transition: all 0.3s ease; letter-spacing: -1px; }
.stat-card:hover .stat-number { color: var(--primary-blue); }
.stat-text { font-size: 1rem; color: var(--text-light); font-weight: 400; letter-spacing: 0.2px; }
.stat-card::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--primary-blue), var(--electric-blue)); opacity: 0; transition: opacity 0.3s ease; }
.stat-card:hover::after { opacity: 1; }
@media (max-width: 1100px) { .stats-container { gap: 20px; } .stat-card { padding: 30px 20px; } .icon-container { width: 60px; height: 60px; font-size: 1.6rem; border-radius: 16px; } .stat-number { font-size: 2rem; } }
@media (max-width: 900px) { .stats-container { flex-wrap: wrap; justify-content: center; } .stat-card { flex: 0 0 calc(33.333% - 20px); min-width: 200px; margin-bottom: 20px; } .section-title { font-size: 2.2rem; } }
@media (max-width: 650px) { .stat-card { flex: 0 0 calc(50% - 15px); } .section-title { font-size: 2rem; } .section-subtitle { font-size: 1rem; } }
@media (max-width: 480px) { .stat-card { flex: 0 0 100%; max-width: 300px; padding: 25px 20px; } .stats-container { gap: 20px; } .why-choose-us { padding: 60px 15px; } .section-title { font-size: 1.8rem; } .icon-container { width: 55px; height: 55px; font-size: 1.4rem; border-radius: 14px; margin-bottom: 20px; } .stat-number { font-size: 1.8rem; } }

.products-section { width: 100%; max-width: 1300px; padding: 80px 20px; position: relative; overflow: hidden; margin: 0 auto; }
.products-section .bg-element { position: absolute; z-index: 0; opacity: 0.03; }
.products-section .circle-1 { width: 300px; height: 300px; top: -150px; left: -150px; border-radius: 50%; background: var(--primary-blue); }
.products-section .circle-2 { width: 500px; height: 500px; bottom: -250px; right: -250px; border-radius: 50%; background: var(--primary-blue); }
.products-section .section-header { text-align: center; margin-bottom: 70px; position: relative; z-index: 2; }
.products-section .section-subtitle { font-size: 1.1rem; color: var(--text-lighter); font-weight: 400; max-width: 500px; margin: 0 auto; line-height: 1.6; }
.products-section .section-title { font-size: 2.5rem; font-weight: 600; color: var(--text-dark); margin-bottom: 15px; letter-spacing: -0.5px; position: relative; display: inline-block; }
.products-section .divider { margin: 30px auto; width: 100%; max-width: 60px; height: 3px; background: linear-gradient(90deg, var(--primary-blue), var(--electric-blue)); border-radius: 3px; }
.products-section .section-description { max-width: 700px; margin: 20px auto 0; font-size: 1.1rem; color: var(--text-light); line-height: 1.8; }
.products-section .products-carousel { position: relative; margin: 40px 0; overflow: hidden; z-index: 2; }
.products-section .carousel-container { display: flex; transition: transform 0.5s ease; --prod-gap: 40px; gap: var(--prod-gap); justify-content: space-between; align-items: stretch; }

/* Ensure carousel inner content is centered and constrained */
.products-section .products-carousel {
    display: flex;
    justify-content: center;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
}
@media (max-width: 650px) {
    .products-section .products-carousel {
        padding: 0 10px;
    }
}
.products-section .product-card { flex: 0 0 calc((100% - 3 * var(--prod-gap)) / 4); background: var(--card-bg); border-radius: 16px; overflow: hidden; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.04); transition: all 0.3s ease; border: 1px solid var(--border-light); position: relative; animation: fadeInUp 0.6s ease forwards; opacity: 0; }
.products-section .product-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0, 102, 255, 0.1); border-color: rgba(0, 170, 255, 0.2); }
.products-section .product-image { position: relative; overflow: hidden; height: 250px; }
.products-section .product-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
/* === Revert: restore original product list layout (thumbnail size and left-aligned text) === */
/* These selectors are intentionally specific so they override more generic fragments added earlier. */
.products-section .product-image {
    /* restore taller thumbnail height used previously */
    height: 260px !important;
}
.products-section .product-card,
.products-section .product-card .product-info,
.products-section .product-card .product-title,
.products-section .product-card .product-excerpt {
    text-align: left !important;
}
.products-section .product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Ensure small screens keep full-width cards */
@media (max-width: 650px) {
    .products-section .product-image { height: 220px !important; }
}

/* News page specific tweaks: badge category top-left and read-more moved up */
body.page-template-page-news .news-item,
body.category .news-item { position: relative; overflow: visible; }
body.page-template-page-news .news-image,
body.category .news-image { position: relative; }
body.page-template-page-news .news-category,
body.category .news-category {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--primary-blue);
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(11,30,60,0.12);
    z-index: 40;
    display: inline-block;
    text-transform: none; /* keep original case */
    border: 2px solid rgba(255,255,255,0.06);
}
/* Position the Read More button higher inside the content block */
body.page-template-page-news .news-header,
body.category .news-header { padding-bottom: 12px; }
body.page-template-page-news .news-header .news-cta,
body.category .news-header .news-cta {
    display: inline-block;
    margin-top: 12px;
    background: var(--primary-blue);
    color: #fff;
    padding: 8px 16px;
    border-radius: 24px;
    text-decoration: none;
    font-weight: 600;
}
/* Remove default positioning of readmore in footer for news page */
body.page-template-page-news .news-footer,
body.category .news-footer { margin-top: 10px; }
body.page-template-page-news .news-footer .news-cta,
body.category .news-footer .news-cta { display: none; }

/* Small screen tweak so button doesn't overlap */
@media (max-width: 700px) {
    body.page-template-page-news .news-header .news-cta,
    body.category .news-header .news-cta { margin-top: 10px; }
    /* make image responsive on small screens while preserving aspect ratio */
    body.page-template-page-news .news-image img,
    body.category .news-image img { width: 100%; height: auto; max-height: 250px; }
}

/* Ensure desktop news images match requested fixed size when space allows */
body.page-template-page-news .news-image img,
body.category .news-image img {
    width: 280px;
    height: 250px;
    object-fit: cover;
    display: block;
}
.products-section .product-card:hover .product-image img { transform: scale(1.05); }
.products-section .product-info { padding: 25px 20px; }
.products-section .product-title { font-size: 1.2rem; font-weight: 600; margin-bottom: 12px; line-height: 1.4; }
.products-section .product-title a { color: var(--text-dark); text-decoration: none; transition: color 0.3s ease; }
.products-section .product-title a:hover { color: var(--primary-blue); }
.products-section .product-price {
    font-size: 1.125rem; /* 放大一个档位 */
    color: var(--primary-blue);
    font-weight: 700; /* 加粗 */
}
.products-section .product-price .price-amount { font-weight: inherit; }
.products-section .carousel-nav { display: flex; justify-content: center; margin-top: 30px; }
.products-section .nav-btn { width: 50px; height: 50px; border-radius: 50%; background: var(--card-bg); border: 1px solid var(--border-light); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; margin: 0 10px; font-size: 1.2rem; color: var(--text-light); }
.products-section .nav-btn:hover { background: var(--primary-blue); border-color: var(--primary-blue); color: #fff; transform: scale(1.05); }
.products-section .view-all { text-align: center; margin-top: 40px; position: relative; z-index: 2; }
.products-section .view-all-btn { display: inline-block; padding: 14px 32px; background: transparent; color: var(--text-dark); border: 2px solid var(--text-dark); text-decoration: none; font-weight: 500; border-radius: 8px; transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 1px; font-size: 0.9rem; }
.products-section .view-all-btn:hover { background: var(--primary-blue); color: #fff; transform: translateY(-2px); border-color: var(--primary-blue); }
.products-section .product-card::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--primary-blue), var(--electric-blue)); opacity: 0; transition: opacity 0.3s ease; }
.products-section .product-card:hover::after { opacity: 1; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.products-section .product-card:nth-child(1) { animation-delay: 0.1s; }
.products-section .product-card:nth-child(2) { animation-delay: 0.2s; }
.products-section .product-card:nth-child(3) { animation-delay: 0.3s; }
.products-section .product-card:nth-child(4) { animation-delay: 0.4s; }
/* Large screens: ensure exactly 3 cards fit per row with larger gaps and even distribution */
@media (min-width: 1100px) {
    .products-section .carousel-container { 
        overflow-x: hidden; 
        justify-content: space-between;
        width: 100%;
    }
    .products-section .product-card {
        /* 3个卡片均匀分布，每个卡片占据可用空间 */
        flex: 0 0 calc((100% - 2 * var(--prod-gap)) / 3);
        max-width: calc((100% - 2 * var(--prod-gap)) / 3);
        min-width: 300px;
    }
}

@media (max-width: 1100px) { /* 3 columns: total gaps = 2 * gap */
    .products-section .product-card { flex: 0 0 calc((100% - 2 * var(--prod-gap)) / 3); }
}
@media (max-width: 900px) { /* 3 columns on tablets: total gaps = 2 * gap */
    .products-section .product-card { flex: 0 0 calc((100% - 2 * var(--prod-gap)) / 3); }
    .products-section .section-title { font-size: 2.2rem; }
    .products-section .section-description { font-size: 1rem; }
}
@media (max-width: 650px) { 
    .products-section .carousel-container { 
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    .products-section .product-card { 
        flex: 0 0 auto;
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
    } 
    .products-section .section-title { font-size: 2rem; } 
}
@media (max-width: 480px) { .products-section { padding: 60px 15px; } .products-section .section-title { font-size: 1.8rem; } .products-section .product-info { padding: 20px 15px; } .products-section .nav-btn { width: 45px; height: 45px; font-size: 1rem; }
}
/* About Us 独立命名空间，避免冲突 */
.rh-about-section, .rh-about-section * { box-sizing: border-box; font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif; }
.rh-about-section {
    background: linear-gradient(135deg, #1a2980 0%, #26d0ce 100%);
    padding: 80px 0;
    width: 100%;
    position: relative;
    overflow: hidden;
}
.rh-about-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 15px;
    position: relative;
    z-index: 2;
}
.rh-about-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
.rh-about-media {
    /* left media area about 40% so text has more room */
    flex: 0 0 40%;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.rh-about-media img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
    max-width: 600px;
}
.rh-about-media:hover img { transform: scale(1.03); }
.rh-video-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(44,90,160,0.95); /* primary blue */
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}
.rh-video-button:hover { transform: translate(-50%, -50%) scale(1.08); }
.rh-play-triangle {
    width: 0;
    height: 0;
    border-top: 18px solid transparent;
    border-bottom: 18px solid transparent;
    border-left: 28px solid #fff; /* white right-pointing triangle */
    margin-left: 4px;
    transition: all 0.25s ease;
}
.rh-video-button:hover .rh-play-triangle { border-left-color: #fff; }
.rh-about-text { flex: 0 0 60%; }
.rh-subtitle {
    color: #1a2980;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 15px;
    display: block;
}
.rh-title {
    color: #1a2980;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
    position: relative;
}
.rh-title:after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 60px;
    height: 3px;
    background: #26d0ce;
}
.rh-description {
    color: #4a5568;
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 30px;
}
.rh-button {
    display: inline-block;
    background: #1a2980;
    color: white;
    padding: 12px 30px;
    border-radius: 30px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(26, 41, 128, 0.3);
    text-decoration: none;
}
.rh-button:hover {
    background: #26d0ce;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(38, 208, 206, 0.4);
}
@media (max-width: 991px) {
    .rh-about-media, .rh-about-text {
        flex: 0 0 100%;
    }
    .rh-about-media {
        margin-bottom: 30px;
    }
    .rh-about-content {
        padding: 30px;
    }
}
.rh-about-container { width: 100%; display: flex; justify-content: center; }
.rh-about-content { display: flex; gap: 40px; align-items: center; }
.rh-about-media { flex: 0 0 40%; position: relative; }
.rh-about-media img { width: 100%; max-width: 600px; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
/* center the video button inside the media area (no bottom-left fallback) */
.rh-video-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: rgba(44,90,160,0.95); border-radius: 50%; width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0,0,0,0.15); transition: all 0.25s ease; }
.rh-video-button:hover { transform: translate(-50%,-50%) scale(1.08); }
.rh-play-triangle { width: 0; height: 0; border-top: 18px solid transparent; border-bottom: 18px solid transparent; border-left: 28px solid #fff; margin-left: 4px; }
.rh-about-text { flex: 2; }
.rh-subtitle { font-size: 16px; color: #2c5aa0; font-weight: 600; text-transform: uppercase; margin-bottom: 10px; display: block; }
.rh-title { font-size: 2.2rem; font-weight: 700; color: #1a1a1a; margin-bottom: 18px; }
.rh-description { font-size: 1.1rem; color: #555; line-height: 1.7; margin-bottom: 22px; }
@media (max-width: 991px) {
    .rh-video-button { width: 56px; height: 56px; }
    .rh-play-triangle { border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 18px solid #fff; }
}
.rh-button { display: inline-block; padding: 12px 28px; background: #2c5aa0; color: #fff; border-radius: 8px; text-decoration: none; font-weight: 500; transition: background 0.3s; }
.rh-button:hover { background: #1e3d6f; }
@media (max-width: 900px) {
    .rh-about-section { padding: 40px 10px; }
    .rh-about-content { flex-direction: column; gap: 24px; padding: 30px; align-items: stretch; }
    .rh-about-media,
    .rh-about-text { flex: 0 0 auto; width: 100%; max-width: 100%; }
    .rh-about-media img { width: 100%; max-width: 100%; }
}

@media (max-width: 768px) {
    .rh-about-section { padding: 48px 12px; }
    .rh-about-content { gap: 24px; padding: 24px; }
    .rh-about-media,
    .rh-about-text { width: 100%; }
    .rh-about-text { text-align: left; }
    .rh-video-button { width: 68px; height: 68px; }
    .rh-play-triangle { border-top-width: 13px; border-bottom-width: 13px; border-left-width: 22px; }
}

@media (max-width: 480px) {
    .rh-about-content { padding: 20px 16px; }
    .rh-video-button { width: 60px; height: 60px; }
    .rh-play-triangle { border-top-width: 12px; border-bottom-width: 12px; border-left-width: 18px; }
}
/* Leadership Team: team-grid and team-member card styles */
.section-title h2 { color: #0b4ea6; }
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 24px; }
.team-member { background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 8px 22px rgba(11,30,60,0.06); transition: transform 0.25s ease, box-shadow 0.25s ease; display: flex; flex-direction: column; }
.team-member:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(11,30,60,0.12); }
.member-photo { width: 100%; height: 220px; overflow: hidden; background: #f4f6f8; }
.member-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.team-member:hover .member-photo img { transform: scale(1.03); }
.member-info { padding: 22px 24px 28px 24px; text-align: center; }
.member-info h3 { margin: 6px 0 6px 0; color: #0b4ea6; font-size: 20px; }
.member-info .position { color: #0077cc; font-weight: 600; margin-bottom: 10px; }
.member-info p { color: #6c757d; font-size: 14px; line-height: 1.6; margin: 0; }

@media (max-width: 1000px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .team-grid { grid-template-columns: 1fr; } .member-photo { height: 200px; } }

/* Typography: moderate H2 sizes for About sections */
.section-title h2 {
    font-size: 28px; /* desktop default */
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: 12px;
}
@media (max-width: 992px) {
    .section-title h2 { font-size: 24px; }
}
@media (max-width: 600px) {
    .section-title h2 { font-size: 18px; }
}

/* Ensure section subtitles use 16px for consistent readability */
.section-title p {
    font-size: 17.6px !important;
    color: rgba(0,0,0,0.6);
    margin-top: 8px;
    margin-bottom: 0;
    font-weight: 400 !important; /* ensure not bold */
}

/* Center section titles and subtitles */
.section-title { text-align: center; }
.section-title h2, .section-title p { margin-left: auto; margin-right: auto; }

/* Strong override for About page: ensure section titles are centered despite other rules */
body.page-template-page-about-us .section-title,
body.page-template-about .section-title,
.page-about .section-title,
.content-section .section-title {
    text-align: center !important;
    display: block !important;
}
body.page-template-page-about-us .section-title h2,
body.page-template-about .section-title h2,
.page-about .section-title h2,
.content-section .section-title h2,
.section-title h2 {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
body.page-template-page-about-us .section-title p,
body.page-template-about .section-title p,
.page-about .section-title p,
.content-section .section-title p,
.section-title p {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    font-weight: 400 !important;
}




/* news.html 独立命名空间，避免冲突 */
.news-section, .news-section * { box-sizing: border-box; font-family: 'Inter', 'Segoe UI', Arial, sans-serif; }
.news-section { max-width: 1300px; margin: var(--space-5) auto var(--space-10) auto; background: var(--color-bg-secondary); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-6) var(--space-6); }
.news-container { width: 100%; }
.news-header { text-align: center; margin-bottom: var(--space-4); padding-top: var(--space-2); padding-bottom: var(--space-2); }
.news-subtitle { font-size: var(--text-lg); color: var(--brand-primary); font-weight: 700; text-transform: uppercase; margin-bottom: var(--space-1); display: block; letter-spacing: 3px; }
.news-title { font-size: var(--text-4xl); font-weight: 700; color: var(--color-text-primary); margin-bottom: 0; letter-spacing: -0.02em; }
.blog-grid { display: flex; gap: var(--space-5); flex-wrap: wrap; justify-content: center; }
.blog-card { background: var(--color-bg-primary); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; width: 370px; margin-bottom: var(--space-5); display: flex; flex-direction: column; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.blog-image { position: relative; width: 100%; height: 210px; overflow: hidden; }
.blog-image img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-lg) var(--radius-lg) 0 0; transition: transform 0.3s ease; }
.blog-card:hover .blog-image img { transform: scale(1.05); }
.blog-category { position: absolute; top: var(--space-2); left: var(--space-2); background: var(--brand-primary); color: #fff; font-size: var(--text-xs); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; }
.blog-content { padding: 22px 18px; flex: 1; display: flex; flex-direction: column; }
.blog-meta { font-size: 13px; color: #888; margin-bottom: 8px; }
.blog-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 10px; line-height: 1.4; }
.blog-title a { color: #1a1a1a; text-decoration: none; transition: color 0.3s; }
.blog-title a:hover { color: #2c5aa0; }
.blog-read-more { margin-top: auto; color: var(--brand-primary); font-weight: 600; text-decoration: none; font-size: var(--text-sm); transition: all 0.2s ease; display: inline-flex; align-items: center; gap: var(--space-1); }
.blog-read-more::after { content: '→'; font-size: 1.1em; }
.blog-read-more:hover { color: var(--brand-primary-dark); transform: translateX(4px); }

/* case/global-footprint section: make overall width and presentation match news-section */
.global-footprint-section, .global-footprint-section * { box-sizing: border-box; font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif; }
.global-footprint-section { max-width: 1300px; margin: 40px auto; background: linear-gradient(135deg, #f5f9ff 0%, #e6f0ff 100%); border-radius: 12px; box-shadow: 0 5px 15px rgba(0,82,204,0.08); padding: 60px 30px; }
.global-footprint-section .products-scroll-container { width: 100%; }
.news-button-container { text-align: center; margin-top: var(--space-6); }
.news-button { display: inline-flex; align-items: center; padding: var(--space-3) var(--space-6); background: var(--brand-primary); color: #fff; border-radius: var(--radius-md); text-decoration: none; font-weight: 600; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: var(--shadow-md); gap: var(--space-2); font-size: var(--text-base); }
.news-button:hover { background: var(--brand-primary-dark); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
@media (max-width: 900px) { .news-section { padding: 40px 10px; } .blog-grid { gap: 20px; } .blog-card { width: 100%; max-width: 400px; } }

/* Override: ensure products-section is centered and constrained across the theme */
html body .products-section {
    max-width: 1200px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

/* Center carousel content */
/* Center carousel content */
html body .products-section .products-carousel {
    position: relative;
    margin: 40px 0;
    overflow: hidden;
    z-index: 2;
    display: flex !important;
    justify-content: center !important;
}

/* Restore horizontal layout for case/global-footprint-section */
.global-footprint-section .products-scroll-container {
    position: relative;
    overflow: hidden;
}

/* Strong override: ensure case section images always fill container like the 3rd image */
.global-footprint-section .product-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    margin: 0 !important;
}

/* Make case product cards image and text clickable when wrapped with .product-link */
.global-footprint-section .product-card { cursor: default; }
.global-footprint-section .product-card .product-image a,
.global-footprint-section .product-card .product-content a {
    display: block;
    color: inherit;
    text-decoration: none;
}
.global-footprint-section .product-card .product-image a:hover img {
    transform: scale(1.03);
}
.global-footprint-section .product-card .product-content a:hover .product-title {
    text-decoration: underline;
}
.global-footprint-section .product-card .product-image a:focus,
.global-footprint-section .product-card .product-content a:focus {
    outline: 3px solid rgba(44,90,160,0.18);
    outline-offset: 4px;
}
.global-footprint-section .products-scroll-wrapper {
    display: flex;
    gap: 30px;
    transition: transform 0.5s ease;
    will-change: transform;
}
.global-footprint-section .product-card {
    flex: 0 0 calc(33.333% - 20px);
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 82, 204, 0.1);
}

.global-footprint-section .product-card {
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.global-footprint-section .product-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0, 82, 204, 0.18); }
.global-footprint-section .product-image {
    position: relative;
    overflow: hidden;
    height: 220px; /* consistent with index-part styles */
    background: #fff; /* avoid dark gaps behind contained images */
}
.global-footprint-section .product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* fill container like the 3rd image */
    object-position: center;
    display: block;
    transition: transform 0.35s ease, filter 0.25s ease;
    margin: 0;
    box-shadow: none !important;
    filter: none !important;
}
/* only show overlay on hover to avoid dark banding by default */
.global-footprint-section .product-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.25) 100%);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}
.global-footprint-section .product-card:hover .product-image img { transform: scale(1.03); filter: brightness(0.98); }
.global-footprint-section .product-card:hover .product-image::after { opacity: 1; }



/* Banner / Hero carousel styles added by theme editor */
.hero-carousel{
    position:relative;
    width:100%;
    /* Let the carousel height be determined by the image's intrinsic aspect ratio */
    display:block;
    overflow:hidden;
    background:transparent;
}

/* Footer styles - blue themed to match homepage */
.main-footer { color: #fff; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
.main-footer .footer-top { background: linear-gradient(135deg,#2c5aa0 0%, #1e6fd9 60%, #26d0ce 100%); padding: 60px 0; }
.main-footer .footer-container { max-width: 1300px; margin: 0 auto; padding: 0 20px; display: flex; gap: 30px; }
.main-footer .footer-col { flex: 1; min-width: 220px; }
.main-footer .footer-about .footer-desc { color: rgba(255,255,255,0.92); margin: 12px 0 18px; line-height: 1.6; }
.main-footer .footer-social a { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background: rgba(255,255,255,0.08); color:#fff; margin-right:8px; text-decoration:none; }
.main-footer .footer-social a:hover { background: rgba(255,255,255,0.18); }
.main-footer .footer-links h4, .main-footer .footer-contact h4 { color: #fff; margin-bottom: 12px; }
.main-footer .footer-menu { list-style: none; padding: 0; margin: 0; }
.main-footer .footer-menu li { margin-bottom: 8px; }
.main-footer .footer-menu li a { color: rgba(255,255,255,0.92); text-decoration: none; }
.main-footer .footer-menu li a:hover { color: #26d0ce; }
.main-footer .footer-contact p { color: rgba(255,255,255,0.9); margin: 6px 0; }
.main-footer .footer-form input, .main-footer .footer-form textarea { width: 100%; padding: 10px; margin-bottom: 8px; border-radius: 6px; border: none; }
.main-footer .footer-form button { background: #fff; color: #1e3d6f; padding: 10px 16px; border-radius: 6px; border: none; cursor: pointer; }

.main-footer .footer-bottom { background: rgba(15,35,70,0.08); padding: 18px 0; }
.main-footer .footer-bottom-inner { max-width: 1300px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; color: rgba(255,255,255,0.85); }
.main-footer .copyright { font-size: 14px; }
.main-footer .credits { font-size: 14px; }

@media (max-width: 900px) {
    .main-footer .footer-container { flex-direction: column; }
    .main-footer .footer-bottom-inner { flex-direction: column; gap: 8px; }
}
.hero-slides{
    position:relative;
    width:100%;
    height:auto;
}
.hero-slide{
    position:relative; /* flow layout so parent height follows content */
    opacity:0;
    transition:opacity .6s ease-in-out, transform .6s ease-in-out;
    display:none; /* hide inactive slides so they don't affect layout */
}
.hero-slide{ overflow:hidden; }
.hero-slide.active{
    display:block;
    opacity:1;
    z-index:2;
}
.hero-slide{ background-color:transparent; }
.hero-slide .hero-overlay{
    position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.25));
}
.hero-media{
    position:relative; z-index:0; /* image in normal flow */
    width:100%; height:auto;
    object-fit:cover; object-position:center center;
    display:block;
}
.hero-controls,
.hero-prev,
.hero-next,
.slick-prev,
.slick-next,
button[aria-label*="Previous"],
button[aria-label*="Next"]{
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}
@media (min-width:1024px){
    .hero-carousel{ min-height:0; }
}
@media (max-width:600px){
  .hero-controls button{ padding:6px 8px; font-size:14px }
}

/* Indicators: replace arrows with dots */
.hero-indicators{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 24px;
    display:flex;
    gap:10px;
    z-index: 6;
}
.hero-indicator{
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255,255,255,0.45);
    border: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.25s;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.hero-indicator:hover { background: rgba(255,255,255,0.7); transform: scale(1.08); }
.hero-indicator.active{ background: #00aaff; transform: scale(1.12); }

/* Scale-up effect for the active slide's media */
.hero-slide .hero-media { transform: scale(1); transition: transform 0.8s ease; }
.hero-slide.active .hero-media { transform: scale(1.06); }

/* end banner styles */

/* Footer social icons and 4-column layout tweaks */
.main-footer .footer-container { display: flex; gap: 32px; align-items: flex-start; }
.main-footer .footer-col { flex: 1; min-width: 200px; }
.main-footer .footer-social { display: flex; gap: 12px; align-items: center; margin-top: 12px; }
.main-footer .footer-social a { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background: rgba(255,255,255,0.04); color: #fff; text-decoration:none; transition: background 0.2s, transform 0.15s; }
.main-footer .footer-social a:hover { background: rgba(255,255,255,0.12); transform: translateY(-3px); }
.main-footer .footer-social a i { font-size: 18px; }
.main-footer .footer-about .footer-desc { margin-bottom: 8px; }

@media (max-width: 900px) {
    .main-footer .footer-container { flex-direction: column; gap: 18px; }
    .main-footer .footer-social { margin-top: 6px; }
}




/* ==========================
   About: stats-section (visual match to attachment)
   - Strongly scoped to avoid colliding with other .stats rules
   - Shows four items horizontally on desktop, stacks on smaller screens
 ========================== */
.stats-section.animate-in {
    background: linear-gradient(135deg,#0060bf 0%,#0088ff 60%); /* bright blue gradient */
    color: #fff;
    padding: 41px 18px; /* increased vertical padding to raise overall height by ~10px */
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(3,45,99,0.18);
    margin: 18px 0 28px 0;
}
.stats-section.animate-in .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 18px;
}
.stats-section.animate-in .stats-grid {
    display: flex;
    gap: 32px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
}
.stats-section.animate-in .stat-item {
    flex: 1 1 0;
    min-width: 160px;
    text-align: center;
    padding: 22px 18px;
}
.stats-section.animate-in .stat-item h3,
.stats-section.animate-in .stat-item .stat-number {
    font-size: 52px; /* a bit larger for presence */
    line-height: 1;
    margin: 0 0 6px 0;
    font-weight: 700; /* reduced from 900 to 700 */
    color: #fff;
    text-shadow: 0 3px 10px rgba(3,45,99,0.12); /* weaker shadow */
    font-family: 'Montserrat', 'Segoe UI', Tahoma, sans-serif;
}
.stats-section.animate-in .stat-item p,
.stats-section.animate-in .stat-item .stat-label {
    margin: 0;
    color: rgba(255,255,255,0.88);
    font-size: 15px;
    font-weight: 400 !important; /* enforce normal weight (not bold) */
}

/* subtle separator lines on very wide screens (optional) */
/* no adjacent-item rule needed */

/* Responsive: allow wrapping to 2 columns and then 1 column */
@media (max-width: 1000px) {
    .stats-section.animate-in .stats-grid { gap: 18px; align-items: center; }
    .stats-section.animate-in .stat-item h3 { font-size: 44px; }
}
@media (max-width: 768px) {
    .stats-section.animate-in .stats-grid { flex-wrap: wrap; justify-content: center; }
    .stats-section.animate-in .stat-item { flex: 0 0 calc(50% - 18px); margin-bottom: 18px; }
    .stats-section.animate-in .stat-item h3 { font-size: 40px; }
}
@media (max-width: 420px) {
    .stats-section.animate-in .stat-item { flex: 0 0 100%; }
    .stats-section.animate-in { padding: 28px 12px; }
    .stats-section.animate-in .stat-item h3 { font-size: 36px; }
    .stats-section.animate-in .stat-item p { font-size: 14px; }
}

/* End stats-section overrides */

/* ------------------------------------------------------------------ */
/* Styles moved from page-products.php (scoped to avoid global resets) */
/* Scoped using body.page-template-page-products to limit global overrides */
/* ------------------------------------------------------------------ */
body.page-template-page-products * { box-sizing: border-box; }

body.page-template-page-products .products-page-body,
body.taxonomy-product_cat .products-page-body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body.page-template-page-products .products-container,
body.taxonomy-product_cat .products-container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* 页面头部 */
body.page-template-page-products .page-header {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
                url('https://images.unsplash.com/photo-1568605117036-5fe5e7bab0b7?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80');
    background-size: cover;
    background-position: center;
    color: white;
    padding: 80px 20px 53px;
    text-align: center;
    margin-bottom: 40px;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

body.page-template-page-products .page-header h1 {
    font-size: 2.5rem;
    margin-bottom: 15px;
    font-weight: 700;
}

body.page-template-page-products .page-header p {
    font-size: 1.2rem;
    max-width: 800px;
    margin: 0 auto;
    opacity: 0.9;
}

/* 产品筛选 */
body.page-template-page-products .filter-section,
body.taxonomy-product_cat .filter-section,
body.taxonomy-product_category .filter-section {
    background-color: #fff;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    margin-bottom: 40px;
    text-align: center !important;
}

body.page-template-page-products .filter-title,
body.taxonomy-product_cat .filter-title,
body.taxonomy-product_category .filter-title,
body.page-template-page-products .filter-section h2,
body.taxonomy-product_cat .filter-section h2,
body.taxonomy-product_category .filter-section h2,
body.page-template-page-products h2.filter-title,
body.taxonomy-product_cat h2.filter-title,
body.taxonomy-product_category h2.filter-title {
    text-align: center !important;
    margin-bottom: 20px !important;
    color: #0056b3 !important;
    font-size: 1.4rem !important;
    display: block !important;
    width: 100% !important;
}

body.page-template-page-products .filter-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

body.page-template-page-products .filter-btn {
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    color: #495057;
    padding: 8px 18px;
    border-radius: 30px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s;
}

body.page-template-page-products .filter-btn:hover, 
body.page-template-page-products .filter-btn.active,
body.taxonomy-product_cat .filter-btn:hover,
body.taxonomy-product_cat .filter-btn.active,
body.taxonomy-product_category .filter-btn:hover,
body.taxonomy-product_category .filter-btn.active {
    background: #007bff;
    color: white;
    border-color: #007bff;
    text-decoration: none;
}

/* 产品网格 */
body.page-template-page-products .products-section,
body.taxonomy-product_cat .products-section { padding: 20px 0 60px; }

body.page-template-page-products .products-grid,
body.taxonomy-product_cat .products-grid,
body.page-template-page-products .products-page-body .products-grid,
body.taxonomy-product_cat .products-page-body .products-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(366.67px, 1fr)) !important;
    gap: 6px !important; /* reduced gap >60% to make layout denser */
}

/* Large screens: force exactly 3 columns of 266.67px and center them */
@media (min-width: 1300px) {
    body.page-template-page-products .products-grid,
    body.taxonomy-product_cat .products-grid,
    body.page-template-page-products .products-page-body .products-grid,
    body.taxonomy-product_cat .products-page-body .products-grid {
        grid-template-columns: repeat(3, 366.67px) !important;
        justify-content: space-between !important; /* evenly distribute the three fixed columns */
    }
}

body.page-template-page-products .product-card,
body.taxonomy-product_cat .product-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
    height: 100%;
}

body.page-template-page-products .product-card:hover,
body.taxonomy-product_cat .product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

body.page-template-page-products .product-image,
body.taxonomy-product_cat .product-image { height: 200px; overflow: hidden; position: relative; }
/* make images full-bleed and round the top corners to match card */
body.page-template-page-products .product-image img,
body.taxonomy-product_cat .product-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}
body.page-template-page-products .product-card:hover .product-image img,
body.taxonomy-product_cat .product-card:hover .product-image img { transform: scale(1.05); }

/* Ensure image is truly full-bleed: remove card padding, remove image margins and force full size */
body.page-template-page-products .product-card,
body.taxonomy-product_cat .product-card {
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 12px !important;
}
body.page-template-page-products .product-image,
body.taxonomy-product_cat .product-image {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}
body.page-template-page-products .product-image img,
body.taxonomy-product_cat .product-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
}

/* badge sits above image */
body.page-template-page-products .product-category,
body.taxonomy-product_cat .product-category { z-index: 5; }

body.page-template-page-products .product-category,
body.taxonomy-product_cat .product-category { position: absolute; top: 15px; right: 15px; background: linear-gradient(90deg,#007bff,#00a1ff); color: white; padding: 6px 14px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; box-shadow: 0 6px 18px rgba(0,123,255,0.12); }

/* 以下样式已被上面的统一样式（第157-198行）覆盖，保留注释以供参考 */
/* body.page-template-page-products .product-content,
body.taxonomy-product_cat .product-content { padding: 22px; flex-grow: 1; display: flex; flex-direction: column; }
body.page-template-page-products .product-content h3,
body.taxonomy-product_cat .product-content h3 { font-size: 1.3rem; margin-bottom: 12px; color: #0056b3; }
body.page-template-page-products .product-content p,
body.taxonomy-product_cat .product-content p { color: #6c757d; margin-bottom: 18px; flex-grow: 1; font-size: 0.95rem; } */

body.page-template-page-products .product-features ul,
body.taxonomy-product_cat .product-features ul { list-style: none; padding-left: 0; }
body.page-template-page-products .product-features li,
body.taxonomy-product_cat .product-features li { padding: 4px 0; color: #495057; position: relative; padding-left: 20px; font-size: 0.9rem; }
body.page-template-page-products .product-features li:before,
body.taxonomy-product_cat .product-features li:before { content: "✓"; position: absolute; left: 0; color: #28a745; font-weight: bold; }

/* 样式已在上方统一定义，此处移除重复定义 */

/* CTA部分 */
body.page-template-page-products .cta-section,
body.taxonomy-product_cat .cta-section {
    background: linear-gradient(90deg,#0b5fb0 0%,#007bff 60%,#00a1ff 100%) !important;
    color: #fff !important;
    padding: 72px 20px !important; /* taller hero-like CTA */
    text-align: center !important;
    border-radius: 12px !important; /* larger radius like reference */
    margin-top: 30px !important;
    box-shadow: 0 10px 36px rgba(3,45,99,0.12) !important;
}

body.page-template-page-products .cta-section h2,
body.taxonomy-product_cat .cta-section h2 {
    font-size: 30px !important;
    margin-bottom: 14px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    letter-spacing: -0.4px !important;
}

body.page-template-page-products .cta-section p,
body.taxonomy-product_cat .cta-section p {
    max-width: 880px !important;
    margin: 0 auto 26px !important;
    font-size: 1.05rem !important;
    color: rgba(255,255,255,0.95) !important;
    line-height: 1.6 !important;
}

body.page-template-page-products .cta-button,
body.taxonomy-product_cat .cta-button {
    display: inline-block !important;
    background: #ffffff !important;
    color: #0077cc !important; /* deep blue text on white pill */
    padding: 12px 34px !important;
    border-radius: 999px !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease !important;
    box-shadow: 0 8px 20px rgba(2,67,150,0.12) !important;
    border: 0 !important;
}

body.page-template-page-products .cta-button:hover,
body.taxonomy-product_cat .cta-button:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 14px 36px rgba(2,67,150,0.18) !important;
}

/* small screens: reduce padding and title size */
@media (max-width: 768px) {
    body.page-template-page-products .cta-section,
    body.taxonomy-product_cat .cta-section { 
        padding: 50px 16px !important; 
    }
    body.page-template-page-products .cta-section h2,
    body.taxonomy-product_cat .cta-section h2 { 
        font-size: 22px !important; 
    }
    body.page-template-page-products .cta-section p,
    body.taxonomy-product_cat .cta-section p { 
        font-size: 1rem !important; 
    }
}

/* 响应式设计 */
@media (max-width: 992px) {
    body.page-template-page-products .products-grid,
    body.taxonomy-product_cat .products-grid,
    body.page-template-page-products .products-page-body .products-grid,
    body.taxonomy-product_cat .products-page-body .products-grid { 
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important; 
        gap: 6px !important; 
    }
}
@media (max-width: 768px) {
    body.page-template-page-products .page-header,
    body.taxonomy-product_cat .page-header { padding: 50px 0 30px; }
    body.page-template-page-products .page-header h1,
    body.taxonomy-product_cat .page-header h1 { font-size: 2rem; }
    body.page-template-page-products .products-grid,
    body.taxonomy-product_cat .products-grid,
    body.page-template-page-products .products-page-body .products-grid,
    body.taxonomy-product_cat .products-page-body .products-grid { 
        grid-template-columns: 1fr !important; 
        gap: 6px !important; 
    }
    body.page-template-page-products .filter-buttons,
    body.taxonomy-product_cat .filter-buttons { justify-content: flex-start; }
}
@media (max-width: 576px) {
    body.page-template-page-products .page-header h1,
    body.taxonomy-product_cat .page-header h1 { font-size: 1.7rem; }
    body.page-template-page-products .page-header p,
    body.taxonomy-product_cat .page-header p { font-size: 1rem; }
    .products-page-body .products-grid .product-content,
    body.page-template-page-products .products-page-body .products-grid .product-content,
    body.taxonomy-product_cat .products-page-body .products-grid .product-content,
    body.page-template-page-products .product-content,
    body.taxonomy-product_cat .product-content { padding: 18px !important; }
    .products-page-body .products-grid .product-footer,
    body.page-template-page-products .products-page-body .products-grid .product-footer,
    body.taxonomy-product_cat .products-page-body .products-grid .product-footer,
    body.page-template-page-products .product-footer,
    body.taxonomy-product_cat .product-footer { 
        flex-direction: column !important; 
        align-items: flex-start !important; 
        gap: 12px !important; /* 统一按钮间距，与桌面端保持一致 */
    }
    body.page-template-page-products .cta-section { padding: 50px 0; }
    body.page-template-page-products .cta-section h2 { font-size: 1.7rem; }
}

/* End moved page-products styles */

/* Small scoped reset and page-level background for the Products reference
   This mirrors the reference HTML's body/reset but is limited to the
   products template to avoid affecting other pages. */
body.page-template-page-products,
body.taxonomy-product_cat,
.products-page-body {
    background-color: #f8f9fa !important;
    color: #333 !important;
    padding: 0 !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    overflow-x: hidden !important;
    position: relative !important;
}

body.page-template-page-products *,
body.taxonomy-product_cat *,
.products-page-body * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Ensure taxonomy pages don't use single product styles */
body.taxonomy-product_cat .tech-product-page,
body.taxonomy-product_cat .tech-product-header,
body.taxonomy-product_cat .tech-product-area {
    display: none !important;
}

/* Visual fine-tuning to match reference: hero sizing, card shadows, buttons */
.container.products-container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* hero / page header tuning */
body.page-template-page-products .page-header h1,
body.taxonomy-product_cat .page-header h1 { font-size: 2.6rem; letter-spacing: -0.5px; }

/* product card: slightly tighter, stronger shadow like reference */
body.page-template-page-products .product-card,
body.taxonomy-product_cat .product-card {
    padding: 0; /* content handles padding */
    border-radius: 12px;
    box-shadow: 0 14px 40px rgba(11,30,60,0.08);
}
body.page-template-page-products .product-image,
body.taxonomy-product_cat .product-image { height: 220px; }

/* product title/price balance */
body.page-template-page-products .product-content h3,
body.taxonomy-product_cat .product-content h3 { font-size: 1.25rem; }
/* 样式已在上方统一定义，此处移除重复定义 */
body.page-template-page-products .cta-button,
body.taxonomy-product_cat .cta-button {
    border-radius: 30px;
    padding: 12px 34px;
    box-shadow: 0 10px 30px rgba(2,67,150,0.12);
}

/* small screen tweaks to keep visual density similar to reference */
@media (max-width: 768px) {
    body.page-template-page-products .page-header,
    body.taxonomy-product_cat .page-header { padding: 60px 0 40px; }
    body.page-template-page-products .product-image,
    body.taxonomy-product_cat .product-image { height: 180px; }
}


/* Override: remove inner white boxes so stats sit directly on the blue gradient */
.stats-section.animate-in .stat-item {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
}

/* Strong final override for Products page: force three fixed columns at common large breakpoints
   This rule is intentionally very specific and placed at the end of the main stylesheet so it
   overrides any earlier or external carousel/flex rules that shrink cards. */
@media (min-width: 1100px) {
    body.page-template-page-products .products-grid,
    body.taxonomy-product_cat .products-grid,
    body.page-template-page-products .products-page-body .products-grid,
    body.taxonomy-product_cat .products-page-body .products-grid {
        grid-template-columns: repeat(3, 366.67px) !important;
        justify-content: space-between !important;
        /* row-gap reduced to ~1/3 of previous 70px (≈23px) per user request */
        row-gap: 23px !important;
        column-gap: 12px !important; /* smaller horizontal gap to match denser layout */
    }
    /* enforce fixed card width/basis so flex-based rules cannot shrink to ~318px */
    body.page-template-page-products .products-section .product-card,
    body.page-template-page-products .product-card,
    body.taxonomy-product_cat .products-section .product-card,
    body.taxonomy-product_cat .product-card {
        flex: 0 0 366.67px !important;
        width: 366.67px !important;
        max-width: 366.67px !important;
    }
}

/* Increase vertical spacing at other common breakpoints so the change is consistent
   across responsive layouts (doubles the previously tighter gaps). */
@media (max-width: 992px) {
    body.page-template-page-products .products-grid,
    body.taxonomy-product_cat .products-grid,
    body.page-template-page-products .products-page-body .products-grid,
    body.taxonomy-product_cat .products-page-body .products-grid {
        /* reduced to ~1/3 of previous 50px → ~17px */
        row-gap: 17px !important;
        column-gap: 8px !important;
    }
}
@media (max-width: 768px) {
    body.page-template-page-products .products-grid,
    body.taxonomy-product_cat .products-grid,
    body.page-template-page-products .products-page-body .products-grid,
    body.taxonomy-product_cat .products-page-body .products-grid {
        /* reduced to ~1/3 of previous 40px → ~13px */
        row-gap: 13px !important;
        column-gap: 6px !important;
    }
}
@media (max-width: 576px) {
    body.page-template-page-products .products-grid,
    body.taxonomy-product_cat .products-grid,
    body.page-template-page-products .products-page-body .products-grid,
    body.taxonomy-product_cat .products-page-body .products-grid {
        /* reduced to ~1/3 of previous 32px → ~11px */
        row-gap: 11px !important;
        column-gap: 6px !important;
    }
}

/* ============================ */
/* News page styles moved from page-news.php */
/* Scoped to avoid affecting other pages */
/* Template: page-news.php */
/* ============================ */
body.page-template-page-news *,
body.category * { box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
body.page-template-page-news,
body.category {
    line-height: 1.6;
    color: #333;
    background-color: #f8f9fa;
    padding: 20px 0;
}
body.page-template-page-news .container,
body.category .container { width: 90%; max-width: 1200px; margin: 0 auto; padding: 0 15px; }

body.page-template-page-news .page-header,
body.category .page-header { background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1504711434969-e33886168f5c?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80'); background-size: cover; background-position: center; color: #fff; padding: 80px 20px 53px; text-align: center; margin-bottom: 40px; width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }
body.page-template-page-news .page-header h1,
body.category .page-header h1 { font-size: 2.5rem; margin-bottom: 15px; font-weight:700; }
body.page-template-page-news .page-header p,
body.category .page-header p { font-size:1.2rem; max-width:800px; margin:0 auto; opacity:0.9; color:#fff; }

body.page-template-page-news .filter-section,
body.category .filter-section { background: transparent !important; padding: 20px 0; border-radius: 0 !important; box-shadow: none !important; margin-bottom: 30px; }
body.page-template-page-news .filter-title,
body.category .filter-title { text-align:center !important; margin-bottom:20px; color:#0056b3; font-size:1.4rem; }
body.page-template-page-news .filter-buttons,
body.category .filter-buttons { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; }
body.page-template-page-news .filter-btn,
body.category .filter-btn { 
    background:#f8f9fa; 
    border:2px solid #e9ecef; 
    color:#495057; 
    padding:8px 18px; 
    border-radius:30px; 
    cursor:pointer; 
    font-weight:500; 
    transition: all 0.3s; 
    text-decoration: none;
    display: inline-block;
}
body.page-template-page-news .filter-btn:hover, 
body.page-template-page-news .filter-btn.active,
body.category .filter-btn:hover, 
body.category .filter-btn.active { 
    background:#007bff; 
    color:#fff; 
    border-color:#007bff; 
    text-decoration: none;
}

body.page-template-page-news .news-section {
    /* Match Products page container sizing */
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 15px 60px;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    max-width: 100% !important;
}

/* Override global .news-section styles for news listing page */
body.page-template-page-news .page-news-container .news-section,
body.page-template-page-news .news-section {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* News list grid layout - overridden by page-news-container styles */
body.page-template-page-news .news-list:not(.page-news-container .news-list),
body.category .news-list:not(.page-news-container .news-list) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
body.page-template-page-news .news-item,
body.category .news-item { display: flex; gap: 24px; align-items: stretch; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(15, 30, 80, 0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; }
body.page-template-page-news .news-item:hover,
body.category .news-item:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(15, 30, 80, 0.12); }
body.page-template-page-news .news-image,
body.category .news-image { position: relative; flex: 0 0 280px; height: 220px; overflow: hidden; }
body.page-template-page-news .news-image img,
body.category .news-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.page-template-page-news .news-category,
body.category .news-category { position: absolute; top: 16px; left: 16px; background: var(--brand-primary); color: #fff; padding: 6px 14px; font-size: 13px; font-weight: 600; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.5px; }
body.page-template-page-news .news-content,
body.category .news-content { flex: 1; padding: 24px 24px 20px; display: flex; flex-direction: column; gap: 18px; }
body.page-template-page-news .news-header h3,
body.category .news-header h3 { font-size: 22px; line-height: 1.35; margin: 0; }
body.page-template-page-news .news-header h3 a,
body.category .news-header h3 a { color: #102043; text-decoration: none; transition: color 0.3s; }
body.page-template-page-news .news-header h3 a:hover,
body.category .news-header h3 a:hover { color: var(--brand-primary); }
body.page-template-page-news .news-excerpt,
body.category .news-excerpt { color: #4b5565; font-size: 16px; line-height: 1.7; }
body.page-template-page-news .news-cta,
body.category .news-cta { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--brand-primary); text-decoration: none; }
body.page-template-page-news .news-cta::after,
body.category .news-cta::after { content: '\2192'; font-size: 14px; transition: transform 0.3s ease; }
body.page-template-page-news .news-cta:hover::after,
body.category .news-cta:hover::after { transform: translateX(4px); }
body.page-template-page-news .news-tags,
body.category .news-tags { display: flex; flex-wrap: wrap; gap: 10px; }
body.page-template-page-news .news-tags .tag,
body.category .news-tags .tag { background: rgba(16,32,67,0.08); color: #102043; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 500; }

@media (max-width: 1024px) { 
    body.page-template-page-news .news-list,
    body.category .news-list { grid-template-columns: 1fr; } 
    body.page-template-page-news .news-item,
    body.category .news-item { flex-direction: column; } 
    body.page-template-page-news .news-image,
    body.category .news-image { width: 100%; flex: 0 0 auto; height: 220px; } 
}

@media (max-width: 768px) { 
    body.page-template-page-news .filter-buttons,
    body.category .filter-buttons { overflow-x: auto; padding-bottom: 8px; gap: 12px; } 
    body.page-template-page-news .filter-btn,
    body.category .filter-btn { flex: 0 0 auto; } 
    body.page-template-page-news .news-item,
    body.category .news-item { gap: 0; } 
    body.page-template-page-news .news-content,
    body.category .news-content { padding: 20px; } 
}

@media (max-width: 600px) { 
    body.page-template-page-news .news-item,
    body.category .news-item { border-radius: 12px; } 
    body.page-template-page-news .news-image,
    body.category .news-image { height: 200px; } 
    body.page-template-page-news .news-content,
    body.category .news-content { padding: 18px; } 
    body.page-template-page-news .news-header h3,
    body.category .news-header h3 { font-size: 20px; } 
    body.page-template-page-news .news-excerpt,
    body.category .news-excerpt { font-size: 15px; } 
}

@media (max-width: 480px) { 
    body.page-template-page-news .news-filter-buttons,
    body.category .news-filter-buttons { flex-wrap: nowrap; overflow-x: auto; } 
    body.page-template-page-news .filter-btn,
    body.category .filter-btn { min-width: 120px; text-align: center; } 
    body.page-template-page-news .news-content,
    body.category .news-content { gap: 14px; } 
    body.page-template-page-news .news-tags,
    body.category .news-tags { gap: 6px; } 
    body.page-template-page-news .news-tags .tag,
    body.category .news-tags .tag { padding: 4px 10px; font-size: 12px; } 
}

body.page-template-page-news .news-item:hover,
body.category .news-item:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.15); }
body.page-template-page-news .news-item:hover .news-image img,
body.category .news-item:hover .news-image img { transform: scale(1.05); }
body.page-template-page-news .news-category,
body.category .news-category { position: absolute; top: 15px; right: 15px; background: #007bff; color: #fff; padding: 5px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; }
body.page-template-page-news .news-content,
body.category .news-content { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; text-align: left; }
body.page-template-page-news .news-header { margin-bottom: 12px; text-align: left !important; }
body.page-template-page-news .news-content h3 { font-size: 1.4rem; margin-bottom: 10px; color: #0056b3; line-height: 1.4; text-align: left !important; }
body.page-template-page-news .news-excerpt { color: #6c757d; font-size: 1rem; line-height: 1.6; text-align: left !important; }
body.page-template-page-news .news-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; font-size: 0.9rem; color: #6c757d; }
body.page-template-page-news .news-date { font-weight: 600; color: #007bff; }
body.page-template-page-news .news-author { display: flex; align-items: center; gap: 8px; }
body.page-template-page-news .author-avatar { width: 28px; height: 28px; border-radius: 50%; background: #007bff; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.8rem; font-weight: 700; }
body.page-template-page-news .news-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #e9ecef; padding-top: 12px; }
body.page-template-page-news .news-tags { display: flex; gap: 8px; flex-wrap: wrap; }
body.page-template-page-news .tag { background: #f8f9fa; color: #6c757d; padding: 4px 10px; border-radius: 15px; font-size: 0.8rem; }
body.page-template-page-news .news-cta { display: none; }

body.page-template-page-news .featured-news { margin-bottom: 40px; }
body.page-template-page-news .featured-item { background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.1); margin-bottom: 30px; }
body.page-template-page-news .featured-image { height: 364px; overflow: hidden; position: relative; }
body.page-template-page-news .featured-image img { width: 100%; height: 100%; object-fit: cover; }
body.page-template-page-news .featured-badge { position: absolute; top: 20px; left: 20px; background: #ff6b6b; color: #fff; padding: 8px 16px; border-radius: 20px; font-size: 0.9rem; font-weight: 600; }
body.page-template-page-news .featured-content { padding: 30px; }
body.page-template-page-news .featured-content h2 { font-size: 1.8rem; margin-bottom: 15px; color: #0056b3; }
body.page-template-page-news .featured-content p { color: #6c757d; font-size: 1.1rem; line-height: 1.7; margin-bottom: 20px; }


/* CTA / Subscribe section */
body.page-template-page-news .cta-section { background: linear-gradient(135deg, #0056b3, #007bff); color: #fff; padding: 60px 0; text-align: center; border-radius: 8px; margin-top: 30px; }
body.page-template-page-news .cta-section h2 { font-size: 2rem; margin-bottom: 15px; color: #fff !important; }
body.page-template-page-news .cta-section p { max-width: 700px; margin: 0 auto 25px; font-size: 1.05rem; opacity: 0.95; color: #fff !important; }
body.page-template-page-news .cta-button { display: inline-block; background: #fff; color: #007bff; padding: 12px 30px; border-radius: 30px; text-decoration: none; font-weight: 600; font-size: 1rem; transition: all 0.3s; }
body.page-template-page-news .cta-button:hover { background: #f1f1f1; transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }

@media (max-width: 768px) {
    body.page-template-page-news .page-header { padding: 60px 0 40px; }
    body.page-template-page-news .page-header h1 { font-size: 2rem; }
    body.page-template-page-news .news-item { flex-direction: column; }
    body.page-template-page-news .news-image { width: 100%; height: 166px; min-width: auto; }
    body.page-template-page-news .featured-image { height: 209px; }
    body.page-template-page-news .featured-content h2 { font-size: 1.5rem; }
}
@media (max-width: 576px) {
    body.page-template-page-news .page-header h1 { font-size: 1.7rem; }
    body.page-template-page-news .page-header p { font-size: 1rem; }
    body.page-template-page-news .news-content { padding: 20px; }
    body.page-template-page-news .news-footer { flex-direction: column; align-items: flex-start; gap: 12px; }
    body.page-template-page-news .cta-section { padding: 50px 0; }
    body.page-template-page-news .cta-section h2 { font-size: 1.7rem; }
    body.page-template-page-news .news-meta { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* End news page styles */

/* Ensure news item titles (links) are visually distinct from body text */
body.page-template-page-news .news-content h3 a,
body.page-template-page-news .news-content h3 a:visited {
    color: #0056b3 !important; /* theme blue */
    font-weight: 700 !important;
    text-decoration: none !important; /* remove underline by default */
}
body.page-template-page-news .news-content h3 a:hover {
    color: #003f87 !important; /* darker blue on hover */
    text-decoration: underline !important; /* underline on hover to indicate clickability */
}


/* ========================================================================
   Global filter button fallback (high specificity, placed last to override
   other theme/plugin rules). This ensures `.filter-btn` appears correctly
   on the News page and any other page that uses the same markup.
   ======================================================================== */
.filter-section .filter-buttons,
.filter-buttons {
    display: flex !important;
    gap: 12px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    padding: 8px 6px !important;
    box-sizing: border-box !important;
}
.filter-btn,
a.filter-btn {
    background: #f8f9fa !important;
    border: 2px solid #e9ecef !important;
    color: #495057 !important;
    padding: 8px 16px !important;
    border-radius: 30px !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    transition: all 0.22s ease !important;
    text-decoration: none !important;
    display: inline-block !important;
    pointer-events: auto !important;
}
.filter-btn:hover, .filter-btn.active {
    background: #007bff !important;
    color: #fff !important;
    border-color: #007bff !important;
}

/* Small-screen left alignment for long button lists */
@media (max-width: 768px) {
    .filter-buttons { justify-content: flex-start !important; }
}

/* End global filter button fallback */

/* Ensure News page container matches Products page rhythm and cannot be overridden
   Added to guarantee the News page uses 90% / 1200px like Products. */
.page-news-container {
    width: 90% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
}

/* ------------------------------------------------------------------
   User-provided News styles (scoped)
   Moved from inline <style> into theme stylesheet. All selectors
   are scoped under body.page-template-page-news and .page-news-container
   to avoid global side-effects. max-width set to 1200px to match Products.
   ------------------------------------------------------------------ */
body.page-template-page-news .page-news-container *,
body.category .page-news-container * { box-sizing: border-box; }

body.page-template-page-news .page-news-container,
body.category .page-news-container {
    background-color: #f8f9fa;
    color: #333;
    padding: 20px 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body.page-template-page-news .page-news-container .page-header,
body.category .page-news-container .page-header {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
                url('https://images.unsplash.com/photo-1504711434969-e33886168f5c?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80');
    background-size: cover;
    background-position: center;
    color: white;
    padding: 80px 20px 53px;
    text-align: center;
    margin-bottom: 40px;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

body.page-template-page-news .page-news-container .page-header h1,
body.category .page-news-container .page-header h1 {
    font-size: 2.5rem;
    margin-bottom: 15px;
    font-weight: 700;
}

body.page-template-page-news .page-news-container .page-header p,
body.category .page-news-container .page-header p {
    font-size: 1.2rem;
    max-width: 800px;
    margin: 0 auto;
    opacity: 0.9;
}

/* Filter */
body.page-template-page-news .page-news-container .filter-section,
body.category .page-news-container .filter-section {
    background: transparent !important;
    padding: 20px 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-bottom: 30px;
}

body.page-template-page-news .page-news-container .filter-title,
body.category .page-news-container .filter-title {
    text-align: center !important;
    margin-bottom: 20px;
    color: #0056b3;
    font-size: 1.4rem;
}

body.page-template-page-news .page-news-container .filter-buttons,
body.category .page-news-container .filter-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

body.page-template-page-news .page-news-container .filter-btn,
body.category .page-news-container .filter-btn {
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    color: #495057;
    padding: 8px 18px;
    border-radius: 30px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s;
    text-decoration: none;
    display: inline-block;
}

body.page-template-page-news .page-news-container .filter-btn:hover,
body.page-template-page-news .page-news-container .filter-btn.active,
body.category .page-news-container .filter-btn:hover,
body.category .page-news-container .filter-btn.active {
    background: #007bff;
    color: white;
    border-color: #007bff;
}

/* News list */
body.page-template-page-news .page-news-container .news-section {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.page-template-page-news .page-news-container .news-list,
body.category .page-news-container .news-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 30px !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.page-template-page-news .page-news-container .news-item,
body.category .page-news-container .news-item {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transition: transform 0.3s, box-shadow 0.3s;
    overflow: hidden;
    display: flex;
    flex-direction: row; /* 左右布局：图片在左，内容在右 */
    align-items: stretch;
}

body.page-template-page-news .page-news-container .news-item:hover,
body.category .page-news-container .news-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

body.page-template-page-news .page-news-container .news-image,
body.category .page-news-container .news-image {
    width: 280px; /* 固定宽度280px */
    min-width: 280px; /* 防止被压缩 */
    height: 260px; /* 固定缩略图高度，超出部分裁剪 */
    overflow: hidden;
    position: relative;
    flex-shrink: 0; /* 防止被压缩 */
}

body.page-template-page-news .page-news-container .news-image img,
body.category .page-news-container .news-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

body.page-template-page-news .page-news-container .news-item:hover .news-image img,
body.category .page-news-container .news-item:hover .news-image img {
    transform: scale(1.05);
}

body.page-template-page-news .page-news-container .news-category,
body.category .page-news-container .news-category {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #007bff;
    color: white;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

body.page-template-page-news .page-news-container .news-content,
body.category .page-news-container .news-content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
}

body.page-template-page-news .page-news-container .news-header,
body.category .page-news-container .news-header { margin-bottom: 12px; text-align:left !important; }

body.page-template-page-news .page-news-container .news-content h3,
body.category .page-news-container .news-content h3 {
    font-size: 1.4rem;
    margin-bottom: 10px;
    color: #0056b3;
    line-height: 1.4;
    text-align: left !important;
}

body.page-template-page-news .page-news-container .news-excerpt,
body.category .page-news-container .news-excerpt { color: #6c757d; font-size: 1rem; line-height: 1.6; text-align:left !important; }

body.page-template-page-news .page-news-container .news-meta,
body.category .page-news-container .news-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; font-size: 0.9rem; color: #6c757d; }

body.page-template-page-news .page-news-container .news-date,
body.category .page-news-container .news-date { font-weight: 600; color: #007bff; }

body.page-template-page-news .page-news-container .news-author,
body.category .page-news-container .news-author { display: flex; align-items: center; gap: 8px; }

body.page-template-page-news .page-news-container .author-avatar,
body.category .page-news-container .author-avatar { width: 28px; height: 28px; border-radius: 50%; background: #007bff; display: flex; align-items: center; justify-content: center; color: white; font-size: 0.8rem; font-weight: bold; }

body.page-template-page-news .page-news-container .news-footer,
body.category .page-news-container .news-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #e9ecef; padding-top: 15px; }

body.page-template-page-news .page-news-container .news-tags,
body.category .page-news-container .news-tags { display: flex; gap: 8px; flex-wrap: wrap; }

body.page-template-page-news .page-news-container .tag,
body.category .page-news-container .tag { background: #f8f9fa; color: #6c757d; padding: 4px 10px; border-radius: 15px; font-size: 0.8rem; }

body.page-template-page-news .page-news-container .news-cta,
body.category .page-news-container .news-cta { display: none; }

/* Featured */
body.page-template-page-news .page-news-container .featured-news { margin-bottom: 40px; }

body.page-template-page-news .page-news-container .featured-item { background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.1); margin-bottom: 30px; }

body.page-template-page-news .page-news-container .featured-image { height: 364px; overflow: hidden; position: relative; }

body.page-template-page-news .page-news-container .featured-image img { width: 100%; height: 100%; object-fit: cover; }

body.page-template-page-news .page-news-container .featured-badge { position: absolute; top: 20px; left: 20px; background: #ff6b6b; color: white; padding: 8px 16px; border-radius: 20px; font-size: 0.9rem; font-weight: 600; }

body.page-template-page-news .page-news-container .featured-content { padding: 30px; }

body.page-template-page-news .page-news-container .featured-content h2 { font-size: 1.8rem; margin-bottom: 15px; color: #0056b3; }

body.page-template-page-news .page-news-container .featured-content p { color: #6c757d; font-size: 1.1rem; line-height: 1.7; margin-bottom: 20px; }

/* Pagination - Styled to match site design */
body.page-template-page-news .page-news-container .pagination,
body.category .page-news-container .pagination,
.page-news-container .pagination {
    display: flex !important;
    justify-content: center !important;
    align-items: center;
    flex-wrap: wrap;
    margin-top: var(--space-10) !important;
    margin-bottom: var(--space-6);
    gap: var(--space-1);
    padding: var(--space-2) 0;
    list-style: none;
    padding-left: 0;
}

body.page-template-page-news .page-news-container .pagination a,
body.page-template-page-news .page-news-container .pagination span,
body.page-template-page-news .page-news-container .pagination .page-numbers,
body.category .page-news-container .pagination a,
body.category .page-news-container .pagination span,
body.category .page-news-container .pagination .page-numbers,
.page-news-container .pagination a,
.page-news-container .pagination span,
.page-news-container .pagination .page-numbers {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 var(--space-3);
    margin: 0;
    background: var(--color-bg-primary);
    border: 2px solid #e9ecef;
    color: var(--color-text-secondary);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-sm);
    line-height: 1;
}

body.page-template-page-news .page-news-container .pagination a:hover,
body.category .page-news-container .pagination a:hover,
.page-news-container .pagination a:hover {
    background: var(--brand-primary) !important;
    color: #ffffff !important;
    border-color: var(--brand-primary) !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

body.page-template-page-news .page-news-container .pagination .current,
body.page-template-page-news .page-news-container .pagination .page-numbers.current,
body.page-template-page-news .page-news-container .pagination span.current,
body.category .page-news-container .pagination .current,
body.category .page-news-container .pagination .page-numbers.current,
body.category .page-news-container .pagination span.current,
.page-news-container .pagination .current,
.page-news-container .pagination .page-numbers.current,
.page-news-container .pagination span.current {
    background: var(--brand-primary) !important;
    color: #ffffff !important;
    border-color: var(--brand-primary) !important;
    box-shadow: var(--shadow-md);
    cursor: default;
}

body.page-template-page-news .page-news-container .pagination .dots,
body.page-template-page-news .page-news-container .pagination .page-numbers.dots,
body.category .page-news-container .pagination .dots,
body.category .page-news-container .pagination .page-numbers.dots,
.page-news-container .pagination .dots,
.page-news-container .pagination .page-numbers.dots {
    background: transparent !important;
    border: none !important;
    color: var(--color-text-tertiary);
    box-shadow: none;
    cursor: default;
    min-width: auto;
    padding: 0 var(--space-2);
}

body.page-template-page-news .page-news-container .pagination .dots:hover,
body.page-template-page-news .page-news-container .pagination .page-numbers.dots:hover,
body.category .page-news-container .pagination .dots:hover,
body.category .page-news-container .pagination .page-numbers.dots:hover,
.page-news-container .pagination .dots:hover,
.page-news-container .pagination .page-numbers.dots:hover {
    transform: none !important;
    background: transparent !important;
    color: var(--color-text-tertiary) !important;
    border: none !important;
    box-shadow: none !important;
}

/* Responsive pagination */
@media (max-width: 768px) {
    body.page-template-page-news .page-news-container .pagination,
    body.category .page-news-container .pagination {
        gap: 0.25rem;
        margin-top: var(--space-6);
    }
    
    body.page-template-page-news .page-news-container .pagination a,
    body.page-template-page-news .page-news-container .pagination span,
    body.category .page-news-container .pagination a,
    body.category .page-news-container .pagination span {
        min-width: 40px;
        height: 40px;
        padding: 0 var(--space-2);
        font-size: var(--text-sm);
    }
}

/* CTA */
body.page-template-page-news .page-news-container .cta-section { background: #ffffff; padding: 70px 0; text-align: center; border-radius: 12px; margin-top: 40px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); border: 1px solid #f0f0f0; }

body.page-template-page-news .page-news-container .cta-section h2 { font-size: 2.2rem; margin-bottom: 20px; color: #2c3e50; font-weight: 700; letter-spacing: -0.5px; }

body.page-template-page-news .page-news-container .cta-section p { max-width: 600px; margin: 0 auto 35px; font-size: 1.15rem; color: #5a6c7d; line-height: 1.7; }

body.page-template-page-news .page-news-container .cta-form { display: flex; justify-content: center; max-width: 500px; margin: 0 auto; gap: 12px; }

body.page-template-page-news .page-news-container .cta-input { flex: 1; padding: 14px 20px; border: 2px solid #e9ecef; border-radius: 8px; font-size: 1rem; transition: all 0.3s; background: #fafbfc; }

body.page-template-page-news .page-news-container .cta-input:focus { outline: none; border-color: #007bff; background: #fff; box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1); }

body.page-template-page-news .page-news-container .cta-button { background: #007bff; color: white; padding: 14px 32px; border: none; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 1rem; transition: all 0.3s; cursor: pointer; white-space: nowrap; }

body.page-template-page-news .page-news-container .cta-button:hover { background: #0056b3; transform: translateY(-2px); box-shadow: 0 7px 20px rgba(0, 123, 255, 0.3); }

body.page-template-page-news .page-news-container .privacy-note { margin-top: 20px; font-size: 0.85rem; color: #8a9ba8; }

/* Responsive */
@media (max-width: 768px) {
    body.page-template-page-news .page-news-container .page-header { padding: 50px 0 30px; }
    body.page-template-page-news .page-news-container .page-header h1 { font-size: 2rem; }
    body.page-template-page-news .page-news-container .news-item { flex-direction: column; }
    body.page-template-page-news .page-news-container .news-image { width: 100%; height: 166px; min-width: auto; }
    body.page-template-page-news .page-news-container .featured-image { height: 209px; }
    body.page-template-page-news .page-news-container .featured-content h2 { font-size: 1.5rem; }
    body.page-template-page-news .page-news-container .cta-form { flex-direction: column; max-width: 350px; }
    body.page-template-page-news .page-news-container .cta-section h2 { font-size: 1.8rem; }
}

@media (max-width: 576px) {
    body.page-template-page-news .page-news-container .page-header h1 { font-size: 1.7rem; }
    body.page-template-page-news .page-news-container .page-header p { font-size: 1rem; }
    body.page-template-page-news .page-news-container .news-content { padding: 20px; }
    body.page-template-page-news .page-news-container .news-footer { flex-direction: column; align-items: flex-start; gap: 12px; }
    body.page-template-page-news .page-news-container .cta-section { padding: 50px 25px; }
    body.page-template-page-news .page-news-container .cta-section h2 { font-size: 1.7rem; }
    body.page-template-page-news .page-news-container .news-meta { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* End user-provided News styles */

/* ==================================================================
   Compatibility block: ensure News styles apply when the page uses
   default page template (body.page-id-28) as well as when a custom
   template class exists (body.page-template-page-news). This block
   mirrors the rules above but is scoped to the page id so we do not
   change visual appearance. It replaces the earlier emergency
   !important overrides with proper template-aware rules.
   ================================================================== */

body.page-id-28 .page-news-container *,
body.page-template-page-news .page-news-container * {
    box-sizing: border-box;
}

body.page-id-28 .page-news-container,
body.page-template-page-news .page-news-container {
    background-color: #f8f9fa;
    color: #333;
    padding: 20px 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Visual card rules (mirrors the main news block above) */
body.page-id-28 .page-news-container .news-item,
body.page-template-page-news .page-news-container .news-item {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transition: transform 0.3s, box-shadow 0.3s;
    overflow: hidden;
    display: flex;
    align-items: stretch;
    max-width: 1200px;
    margin: 0 auto;
}

body.page-id-28 .page-news-container .news-image img,
body.page-template-page-news .page-news-container .news-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.page-id-28 .page-news-container .news-cta,
body.page-template-page-news .page-news-container .news-cta {
    display: none;
}

body.page-id-28 .page-news-container .featured-badge,
body.page-template-page-news .page-news-container .featured-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    background: #ff6b6b;
    color: #fff;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    z-index: 10;
}

/* keep hover effects consistent */
body.page-id-28 .page-news-container .news-item:hover,
body.page-template-page-news .page-news-container .news-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* End compatibility block */

/* -----------------------------------------------------------------
   Fallback: apply News styles directly under .page-news-container
   to handle cases where body template classes are absent. This
   ensures styles render even when only the container class exists.
   Keep selectors specific to avoid global side-effects.
   ----------------------------------------------------------------- */
.page-news-container * { box-sizing: border-box; }

.page-news-container { background-color: #f8f9fa; color: #333; padding: 20px 0; }

.page-news-container .news-list { display: flex; flex-direction: column; gap: 30px; }

.page-news-container .news-item {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transition: transform 0.3s, box-shadow 0.3s;
    overflow: hidden;
    display: flex;
    align-items: stretch;
}

.page-news-container .news-image {
    width: 280px; /* 固定宽度280px */
    min-width: 280px; /* 防止被压缩 */
    height: 260px; /* 全局固定列表缩略图高度，所有分页/分类通用 */
    overflow: hidden;
    position: relative;
    margin: 0;
    padding: 0;
    flex-shrink: 0; /* 防止被压缩 */
}
.page-news-container .news-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.page-news-container .news-content { padding: 20px; flex-grow:1; display:flex; flex-direction:column; justify-content:space-between; text-align:left; }

.page-news-container .news-cta { display: none; }

.page-news-container .featured-badge { position: absolute; top: 20px; left: 20px; background: #ff6b6b; color: #fff; padding: 8px 16px; border-radius: 20px; font-size: 0.9rem; font-weight: 600; z-index: 10; }

.page-news-container .news-item:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.15); }

/* End fallback */

/* -----------------------------------------------------------------
   Single-news template styles (migrated from single-news.php inline <style>)
   Scoped under .page-news-container to avoid global side-effects.
   ----------------------------------------------------------------- */
.page-news-container * { box-sizing: border-box; }
.page-news-container .breadcrumb { margin-bottom: 30px; font-size: 0.9rem; color: #6c757d; }
.page-news-container .breadcrumb a { color: #007bff; text-decoration: none; }
.page-news-container .breadcrumb a:hover { text-decoration: underline; }

.page-news-container .article-container { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; margin-bottom: 60px; }
.page-news-container .article-main { background: #fff; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.08); overflow: hidden; }
.page-news-container .article-header { padding: 40px 40px 20px; }
.page-news-container .article-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; font-size: 0.9rem; color: #6c757d; }
.page-news-container .article-category { background: #007bff; color: #fff; padding: 5px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; }
.page-news-container .article-date { font-weight: 600; color: #007bff; }
.page-news-container .article-title { font-size: 2.2rem; margin-bottom: 20px; color: #0056b3; line-height: 1.3; }
.page-news-container .article-author { display: flex; align-items: center; gap: 12px; margin-bottom: 30px; }
.page-news-container .author-avatar { width: 50px; height: 50px; border-radius: 50%; background: #007bff; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.1rem; font-weight: bold; }
.page-news-container .author-info h4 { margin-bottom: 5px; color: #2c3e50; }
.page-news-container .author-info p { color: #6c757d; font-size: 0.9rem; }
.page-news-container .article-image { width: 100%; height: 400px; overflow: hidden; }
.page-news-container .article-image img { width: 100%; height: 100%; object-fit: cover; }
.page-news-container .article-content { padding: 40px; }

/* Article Table of Contents */
.page-news-container .article-toc { background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 8px; padding: 20px; margin-bottom: 30px; }
.page-news-container .article-toc .toc-title { font-size: 1.1rem; font-weight: 600; color: #0056b3; margin-bottom: 15px; display: flex; align-items: center; gap: 10px; }
.page-news-container .article-toc .toc-title i { color: #007bff; }
.page-news-container .article-toc .toc-nav { }
.page-news-container .article-toc .toc-list { list-style: none; margin: 0; padding: 0; }
.page-news-container .article-toc .toc-list li { margin-bottom: 8px; }
.page-news-container .article-toc .toc-item-h2 > a { font-weight: 600; color: #2c3e50; padding-left: 0; }
.page-news-container .article-toc .toc-item-h3 { padding-left: 20px; }
.page-news-container .article-toc .toc-item-h3 > a { font-weight: 400; color: #495057; font-size: 0.95rem; }
.page-news-container .article-toc .toc-item-h3 > a:before { content: "• "; color: #6c757d; margin-right: 5px; }
.page-news-container .article-toc a { text-decoration: none; display: inline-block; transition: all 0.3s; }
.page-news-container .article-toc a:hover { color: #007bff; transform: translateX(5px); }

.page-news-container .article-content h2 { font-size: 1.6rem; margin: 30px 0 15px; color: #0056b3; scroll-margin-top: 100px; }
.page-news-container .article-content h3 { font-size: 1.3rem; margin: 25px 0 12px; color: #2c3e50; scroll-margin-top: 100px; }
.page-news-container .article-content p { margin-bottom: 20px; color: #444; font-size: 1.05rem; line-height: 1.7; }
.page-news-container .article-content blockquote { border-left: 4px solid #007bff; padding-left: 20px; margin: 25px 0; font-style: italic; color: #5a6c7d; background: #f8f9fa; padding: 20px; border-radius: 0 8px 8px 0; }
.page-news-container .article-content ul, .page-news-container .article-content ol { margin: 20px 0; padding-left: 30px; }
.page-news-container .article-content li { margin-bottom: 10px; }
.page-news-container .article-tags { display: flex; gap: 10px; margin-top: 40px; flex-wrap: wrap; }
.page-news-container .tag { background: #f8f9fa; color: #6c757d; padding: 6px 12px; border-radius: 15px; font-size: 0.85rem; }

.page-news-container .sidebar { display: flex; flex-direction: column; gap: 30px; }
.page-news-container .sidebar-widget { background: #fff; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.08); padding: 12px; }
.page-news-container .widget-title { font-size: 1.05rem; margin-bottom: 6px; color: #0056b3; padding-bottom: 4px; border-bottom: 2px solid #f0f0f0; }

.page-news-container .related-articles { display: flex; flex-direction: column; gap: 20px; }
.page-news-container .related-article { display: flex; gap: 15px; padding-bottom: 15px; border-bottom: 1px solid #f0f0f0; }
.page-news-container .related-article:last-child { border-bottom: none; padding-bottom: 0; }
.page-news-container .related-image { width: 80px; height: 80px; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.page-news-container .related-image img { width: 100%; height: 100%; object-fit: cover; }
.page-news-container .related-content h4 { font-size: 1rem; margin-bottom: 8px; line-height: 1.4; }
.page-news-container .related-content h4 a { color: #2c3e50; text-decoration: none; }
.page-news-container .related-content h4 a:hover { color: #007bff; }
.page-news-container .related-date { font-size: 0.8rem; color: #6c757d; }

.page-news-container .contact-form { display: flex; flex-direction: column; gap: 15px; }
.page-news-container .form-group { display: flex; flex-direction: column; gap: 8px; }
.page-news-container .form-group label { font-weight: 500; color: #2c3e50; font-size: 0.9rem; }
.page-news-container .form-control { padding: 12px 15px; border: 2px solid #e9ecef; border-radius: 8px; font-size: 1rem; transition: all 0.3s; background: #fafbfc; }
.page-news-container .form-control:focus { outline: none; border-color: #007bff; background: #fff; box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1); }
.page-news-container textarea.form-control { min-height: 120px; resize: vertical; }
.page-news-container .submit-btn { background: #007bff; color: #fff; padding: 14px 20px; border: none; border-radius: 8px; font-weight: 600; font-size: 1rem; transition: all 0.3s; cursor: pointer; margin-top: 10px; }
.page-news-container .submit-btn:hover { background: #0056b3; transform: translateY(-2px); box-shadow: 0 7px 20px rgba(0, 123, 255, 0.3); }

@media (max-width: 992px) {
    .page-news-container .article-container { grid-template-columns: 1fr; gap: 30px; }
    .page-news-container .article-title { font-size: 1.9rem; }
}
@media (max-width: 768px) {
    .page-news-container .article-header, .page-news-container .article-content { padding: 30px 25px; }
    .page-news-container .article-title { font-size: 1.7rem; }
    .page-news-container .article-image { height: 300px; }
    .page-news-container .article-meta { flex-direction: column; align-items: flex-start; gap: 10px; }
    .page-news-container .article-toc { padding: 15px; }
    .page-news-container .article-toc .toc-title { font-size: 1rem; }
    .page-news-container .article-toc .toc-item-h3 { padding-left: 15px; }
}
@media (max-width: 576px) {
    .page-news-container .article-header, .page-news-container .article-content { padding: 25px 20px; }
    .page-news-container .article-title { font-size: 1.5rem; }
    .page-news-container .article-image { height: 250px; }
}

/* 分享按钮样式 */
.page-news-container .article-share {
    display: flex;
    gap: 12px;
    align-items: center;
    margin: 26px 0 12px;
    flex-wrap: wrap;
}
.page-news-container .article-share .share-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f5f6f8;
    color: #1f2d3d;
    padding: 8px 12px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    border: 1px solid rgba(0,0,0,0.06);
    transition: all 0.15s ease-in-out;
}
.page-news-container .article-share .share-btn i { font-size: 16px; }
.page-news-container .article-share .share-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(31,45,61,0.08); }
.page-news-container .article-share .share-facebook { background: #1877f2; color: #fff; border-color: rgba(24,119,242,0.2); }
.page-news-container .article-share .share-x { background: #1d9bf0; color: #fff; border-color: rgba(29,155,240,0.2); }
.page-news-container .article-share .share-whatsapp { background: #25D366; color: #fff; border-color: rgba(37,211,102,0.12); }
.page-news-container .article-share .share-reddit { background: #ff4500; color: #fff; border-color: rgba(255,69,0,0.12); }
.page-news-container .article-share .share-instagram { background: linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); color: #fff; border-color: rgba(0,0,0,0.06); }
.page-news-container .article-share .share-label { font-size: 0.95rem; }

@media (max-width: 992px) {
    .page-news-container .article-share { justify-content: flex-start; }
}

/* End single-news styles */

/* -----------------------------------------------------------------
   Contact page styles
   Scoped under .page-contact-container to avoid interfering with other pages
   ----------------------------------------------------------------- */
.page-contact-container { padding: 40px 0; background: #f8f9fa; color: #333; }
.page-contact-container .contact-header { text-align: center; margin-bottom: 30px; }
.page-contact-container .contact-header h1 { font-size: 2.2rem; color: #0056b3; margin-bottom: 6px; }
.page-contact-container .contact-header p { color: #6c757d; font-size: 1rem; }
.page-contact-container .contact-section,
.page-contact-container .contact-container { display: grid; grid-template-columns: 1fr 320px; gap: 30px; max-width: 1200px; margin: 0 auto; }

/* alias: some templates use .contact-panel, others use .contact-form-section */
.page-contact-container .contact-panel,
.page-contact-container .contact-form-section { background: #fff; border-radius: 10px; padding: 30px; box-shadow: 0 5px 15px rgba(0,0,0,0.06); }

/* contact-info wrapper: support both .contact-info and .contact-info-section */
.page-contact-container .contact-info,
.page-contact-container .contact-info-section { display: flex; flex-direction: column; gap: 30px; }

.page-contact-container .contact-info .info-card,
.page-contact-container .info-card { background: #fff; border-radius: 10px; padding: 20px; box-shadow: 0 5px 15px rgba(0,0,0,0.06); }

/* contact item layout and icon sizing */
.page-contact-container .contact-details { display: flex; flex-direction: column; gap: 16px; }
.page-contact-container .contact-item { display: flex; align-items: flex-start; gap: 12px; }
.page-contact-container .contact-item .icon,
.page-contact-container .info-card .icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; font-size: 18px; flex-shrink: 0; }

/* office cards */
.page-contact-container .office-locations { display: grid; grid-template-columns: 1fr; gap: 16px; }
.page-contact-container .office-card { background: #f8f9fa; border-radius: 8px; padding: 16px; border-left: 4px solid #007bff; }
.page-contact-container .contact-success { background: #e9f7ef; border: 1px solid #d4f4db; color: #1b7a3a; padding: 15px; border-radius: 8px; margin-bottom: 18px; }
.page-contact-container .contact-errors { background: #fff6f6; border: 1px solid #fdecea; color: #a33; padding: 12px; border-radius: 8px; margin-bottom: 18px; }
.page-contact-container .contact-errors ul { margin: 0; padding-left: 18px; }
.page-contact-container .contact-form .form-row { display: flex; gap: 16px; }
.page-contact-container .form-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.page-contact-container label { font-weight: 600; color: #2c3e50; }
.page-contact-container .form-control { padding: 12px 14px; border: 2px solid #e9ecef; border-radius: 8px; background: #fafbfc; transition: all 0.2s; }
.page-contact-container .form-control:focus { outline: none; border-color: #007bff; box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.08); }
.page-contact-container .form-actions { margin-top: 10px; }
.page-contact-container .submit-btn { background: #007bff; color: #fff; padding: 12px 22px; border-radius: 8px; border: none; cursor: pointer; font-weight: 600; }
.page-contact-container .submit-btn:hover { background: #0056b3; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 123, 255, 0.18); }

@media (max-width: 992px) {
    .page-contact-container .contact-section { grid-template-columns: 1fr; }
    .page-contact-container .contact-form .form-row { flex-direction: column; }
}

/* AJAX form notices */
.gtr-form-notice { margin-bottom: 16px; padding: 12px; border-radius: 8px; }
.gtr-form-notice.gtr-success { background: #e9f7ef; color: #1b7a3a; border: 1px solid #d4f4db; }
.gtr-form-notice.gtr-error { background: #fff6f6; color: #a33; border: 1px solid #fdecea; }








/* -----------------------------------------------------------------
   Default footer styles (static fallback)
   These provide a baseline appearance in `style.css`. The Customizer
   will still inject dynamic values (colors, sizes) via inline styles
   attached to the enqueued stylesheet when users change settings.
   ----------------------------------------------------------------- */
.main-footer {
    background: #0b5fa5; /* default blue */
    color: #ffffff;
    font-size: 14px;
    padding-top: 60px;
    line-height: 1.6;
}
.main-footer a { color: #ffffff; }
.main-footer .footer-top, .main-footer .footer-bottom { color: #ffffff; }
.main-footer .footer-desc, .main-footer .footer-contact p { color: #ffffff; }

/* small responsive tweak */
@media (max-width: 768px) {
    .main-footer { padding-top: 40px; }
}





/* ==================================================================
   Consolidated Header styles (authoritative)
   - Purpose: provide a single, maintainable header/navbar definition
   - Ensures: header height 50px, logo visible, nav items on one line and right-aligned
   - This block is intentionally placed near the end to override earlier scattered rules.
   ================================================================== */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    z-index: 10000;
    background: rgba(255,255,255,0.96); /* subtle opaque white so black nav is readable */
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    border-bottom: 1px solid rgba(0,0,0,0.04);
    display: block;
}

.main-header .navbar {
    max-width: 1200px;
    margin: 0 auto;
    height: 50px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 20px;
    box-sizing: border-box;
}

.main-header .navbar-logo {
    display: flex;
    align-items: center;
    margin-left: 12px;
    z-index: 10000;
}
.main-header .navbar-logo img,
.main-header .site-logo {
    height: 40px; /* slightly larger for visibility */
    max-height: 40px;
    width: auto;
    display: block;
}

.main-header .navbar-menu {
    margin-left: auto; /* push menu to right */
    display: flex !important;
    gap: 22px;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    white-space: nowrap; /* keep items on single line when space allows */
}
.main-header .navbar-menu { visibility: visible; }
.main-header .navbar-menu a { color: #000000 !important; }

/* When WP admin bar is present, place header below it so admin controls are not covered */
body.admin-bar .main-header { top: 32px; }
@media screen and (max-width: 782px) {
    body.admin-bar .main-header { top: 46px; }
}
.main-header .navbar-menu li { list-style: none; }
.main-header .navbar-menu a {
    color: #000000 !important; /* ensure readability */
    font-weight: 600;
    text-decoration: none;
    font-size: 1.05rem;
    padding: 6px 4px;
    display: inline-block;
}
.main-header .navbar-menu a:hover,
.main-header .navbar-menu a:focus { color: #00aaff !important; }

/* Mobile menu toggle button (hamburger) */
.mobile-menu-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;padding:8px;cursor:pointer;z-index:1001}
.mobile-menu-toggle .hamburger-line{width:28px;height:3px;background:#333;border-radius:2px;transition:all .3s ease}
.header-solid .mobile-menu-toggle .hamburger-line{background:#fff}
.mobile-menu-toggle.active .hamburger-line:nth-child(1){transform:rotate(45deg) translateY(8px)}
.mobile-menu-toggle.active .hamburger-line:nth-child(2){opacity:0}
.mobile-menu-toggle.active .hamburger-line:nth-child(3){transform:rotate(-45deg) translateY(-8px)}

/* Responsive: collapse behavior for small screens */
@media (max-width: 900px) {
    .main-header { position: relative; height: auto; }
    .main-header .navbar { height: auto; padding: 12px 16px; position: relative; }
    .main-header .navbar-logo img { height: 36px; }
    .mobile-menu-toggle{display:flex}
    .main-header .navbar-menu{
        position:fixed;
        top:0;
        right:-100%;
        width:280px;
        height:100vh;
        background:#fff;
        box-shadow:-4px 0 12px rgba(0,0,0,.1);
        padding:80px 30px 30px;
        flex-direction:column !important;
        align-items:flex-start !important;
        gap:0 !important;
        margin:0;
        transition:right .3s ease;
        z-index:1000;
        overflow-y:auto;
        display:flex !important;
        flex-wrap:nowrap !important;
    }
    .main-header .navbar-menu.mobile-menu-open{right:0}
    .main-header .navbar-menu li{
        width:100% !important;
        border-bottom:1px solid #f0f0f0;
        padding:12px 0;
        display:block !important;
        flex:none !important;
    }
    .main-header .navbar-menu a{
        font-size:16px;
        color:#333 !important;
        display:block !important;
        width:100% !important;
    }
}

/* Header nav links: 移除点击/聚焦时的蓝色外边框 */
.main-header .navbar-menu a:focus {
    outline: none;
    box-shadow: none;
}

/* Header fixed to the very top (no down-shift) */
/* - The header will be positioned at top:0 and overlay page content.
   - We remove body padding-top so the page does not shift down.
   - If you prefer the header to not overlay content, re-enable body padding-top or add spacing to the main content container. */
.main-header { top: 0; z-index: 99999; }

/* Remove the body top padding that previously pushed content down */
body { padding-top: 0; }

/* No special admin-bar offset: header remains at the absolute top. */
body.admin-bar .main-header { top: 0; }

@media (max-width: 900px) {
    /* On small screens header switches to relative; ensure normal flow spacing */
    .main-header { position: relative; top: 0; }
    body { padding-top: 0; }
}

/* Navigation dropdown (second-level) styling
   - show submenu as a block under the parent menu item on hover
   - smaller font for submenu, clear background and subtle shadow
   - ensure accessibility via :focus-within so keyboard users can open submenu
*/
.main-header .navbar-menu { z-index: 12000; }
.main-header .navbar-menu li { position: relative; }
.main-header .navbar-menu .sub-menu {
    display: none;
    position: absolute;
    /* overlap slightly to avoid cursor gap between parent and submenu */
    top: calc(100% - 4px);
    left: 0;
    background: #ffffff;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    min-width: 180px;
    padding: 6px 6px;
    white-space: normal;
    z-index: 12001;
}
.main-header .navbar-menu .sub-menu li { list-style: none; }
.main-header .navbar-menu .sub-menu a {
    display: block;
    padding: 8px 12px;
    color: #222 !important;
    font-size: 0.92rem; /* slightly smaller */
    text-decoration: none;
}
.main-header .navbar-menu .sub-menu a:hover,
.main-header .navbar-menu .sub-menu a:focus {
    background: rgba(0,0,0,0.04);
    color: #000 !important;
}

/* Show submenu on hover or when focused (keyboard) */
.main-header .navbar-menu li:hover > .sub-menu,
.main-header .navbar-menu li:focus-within > .sub-menu,
.main-header .navbar-menu .sub-menu:hover {
    /* keep visible while hovering submenu itself to avoid accidental hide */
    display: block;
}

/* enlarge hover target slightly to make it easier to move pointer between menu and submenu */
.main-header .navbar-menu > li > a {
    padding-bottom: 8px;
}

/* Responsive fallback: on small screens make sub-menus static so they flow with page
   (mobile navigation usually uses a different toggle; keep this safe) */
@media (max-width: 900px) {
    .main-header .navbar-menu .sub-menu {
        position: static !important;
        display: block !important;
        box-shadow: none !important;
        background: transparent !important;
        padding: 0 !important;
        min-width: 0 !important;
        width: 100% !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        margin: 0 !important;
        list-style: none !important;
    }
    .main-header .navbar-menu .sub-menu li {
        width: 100% !important;
        display: block !important;
        flex: none !important;
        border-bottom: 1px solid #f0f0f0;
        padding: 8px 0;
        margin: 0 !important;
        float: none !important;
    }
    .main-header .navbar-menu .sub-menu a {
        padding-left: 18px;
        width: 100% !important;
        display: block !important;
        float: none !important;
    }
}

/* =====================
   Hero carousel styles
   ===================== */
.hero-carousel { position: relative; overflow: hidden; }
.hero-slides { display: block; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 600ms ease; display: flex; align-items: center; justify-content: center; }
.hero-slide.active { opacity: 1; position: relative; }
.hero-slide .hero-media { display: block; width: 100%; height: auto; max-height: 640px; object-fit: cover; transition: transform 600ms ease; }
.hero-slide.active .hero-media { transform: scale(1.04); }
.hero-overlay { position: absolute; inset: 0; pointer-events: none; }

/* dot indicators at bottom */
.hero-indicators { position: absolute; left: 50%; transform: translateX(-50%); bottom: 18px; display: flex; gap: 10px; z-index: 50; }
.hero-indicator { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.6); border: 1px solid rgba(255,255,255,0.8); padding: 0; cursor: pointer; transition: background 200ms ease, transform 200ms ease; }
.hero-indicator:hover { transform: scale(1.12); }
.hero-indicator.active { background: #ffffff; box-shadow: 0 2px 6px rgba(0,0,0,0.18); }

/* ensure indicators are visible over dark or light backgrounds */
@media (prefers-reduced-motion: reduce) { .hero-slide .hero-media, .hero-slide.active .hero-media { transition: none; } }

/* Ensure product category label is visible in carousel and product lists
   - Some rules target page-specific selectors; provide a generic fallback for other contexts
*/
.products-section .product-image { position: relative; }
.products-section .product-category {
    position: absolute;
    top: 12px;
    right: 12px;
    background: linear-gradient(90deg,#007bff,#00a1ff);
    color: #fff;
    padding: 6px 12px;
    border-radius: 18px;
    font-size: 0.78rem;
    font-weight: 600;
    z-index: 20;
    box-shadow: 0 6px 18px rgba(0,123,255,0.12);
}

/* Force: news list title links - no underline and no color change on hover/focus
   This overrides earlier theme rules so titles like the specified article keep a stable color.
*/
.news-section .blog-title a,
.news-section .blog-title a:visited,
.page-news-container .news-content h3 a,
.page-news-container .news-content h3 a:visited,
body.page-template-page-news .news-content h3 a,
body.page-template-page-news .news-content h3 a:visited,
.blog-title a,
.blog-title a:visited {
    color: inherit !important;
    text-decoration: none !important;
}
.news-section .blog-title a:hover,
.page-news-container .news-content h3 a:hover,
body.page-template-page-news .news-content h3 a:hover,
.blog-title a:hover,
.news-section .blog-title a:focus,
.page-news-container .news-content h3 a:focus {
    color: inherit !important;
    text-decoration: none !important;
    outline: none !important;
}

/* =========================================================
   Cases / Case studies page styles
   Scoped to .page-case-container and body.page-template-page-case
   ========================================================= */
.page-case-container,
body.page-template-page-case .page-case-container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 20px;
    box-sizing: border-box;
}

.page-case-container .page-header {
    text-align: center;
    margin-bottom: 36px;
    /* give the case header a clear, dark gradient so white text is readable */
    background: linear-gradient(135deg, #0056b3, #007bff);
    color: #ffffff;
    padding: 48px 20px;
    border-radius: 8px;
}
.page-case-container .page-header h1 { font-size: 2.4rem; color: #ffffff; margin-bottom: 8px; }
.page-case-container .page-header p { color: rgba(255,255,255,0.92); max-width: 900px; margin: 0 auto; }

.cases-section { padding: 10px 0 40px; }
.cases-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.case-card { background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 8px 24px rgba(11,30,60,0.06); transition: transform .22s ease, box-shadow .22s ease; }
.case-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(11,30,60,0.12); }
.case-link { display: block; color: inherit; text-decoration: none; }

.case-image { width: 100%; height: 220px; background-size: cover; background-position: center; }
.case-content { padding: 18px; }
.case-title { font-size: 1.15rem; color: #0b4ea6; margin: 0 0 10px; }
.case-excerpt { color: #556; font-size: 0.98rem; line-height: 1.6; margin: 0; }

.cases-pagination { margin-top: 28px; display: flex; justify-content: center; }
.cases-pagination ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 8px; }
.cases-pagination li { margin: 0; }
.cases-pagination a { display: inline-block; padding: 8px 12px; background: #fff; border: 1px solid #e9ecef; color: #333; border-radius: 6px; text-decoration: none; }
.cases-pagination a:hover, .cases-pagination .current { background: #007bff; color: #fff; border-color: #007bff; }

@media (max-width: 1100px) {
    .cases-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
    .cases-grid { grid-template-columns: 1fr; }
    .case-image { height: 180px; }
}

/* End Cases styles */

/* -----------------------------------------------------------------
   Tech product page styles moved from single-product.php
   Purpose: styles for product detail layout (tech-product-*) were
   previously inline in `single-product.php`. Moving them here keeps
   CSS centralized and allows caching. Scoped to `.tech-product-page`.
   ----------------------------------------------------------------- */
/* Only apply tech-product-page styles on single product pages, not taxonomy pages */
body:not(.taxonomy-product_cat) .tech-product-page {
    --primary-blue: #0066ff;
    --accent-blue: #4d94ff;
    --light-blue: #f0f7ff;
    --dark-blue: #0047b3;
    --text-light: #ffffff;
    --text-dark: #333333;
    --text-gray: #666666;
    --border-light: #e0e0e0;
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    --glow: 0 0 10px rgba(0, 102, 255, 0.2);
    max-width: 1200px;
    margin: 0 auto;
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
    color: var(--text-dark);
    line-height: 1.6;
}

.tech-product-header {
    background: var(--primary-blue);
    color: var(--text-light);
    padding: 25px 20px;
    margin-bottom: 30px;
    text-align: center;
}

.tech-product-title { font-size: 2rem; margin-bottom: 10px; font-weight: 700; letter-spacing: -0.5px; }
.tech-product-subtitle { font-size: 1.1rem; opacity: 0.9; font-weight: 400; }

.tech-product-area { display: flex; flex-wrap: wrap; gap: 40px; padding: 0 20px; }
.tech-product-gallery { flex: 1; min-width: 300px; }
.tech-main-image { width: 560px; max-width: 100%; aspect-ratio: 1 / 1; height: auto; border-radius: 8px; overflow: hidden; box-shadow: var(--shadow); margin-bottom: 20px; background: white; display: flex; align-items: center; justify-content: center; }
.tech-main-image img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.tech-thumbnail-gallery { display: flex; gap: 12px; justify-content: center; }
.tech-thumbnail { width: 70px; height: 70px; border-radius: 6px; overflow: hidden; cursor: pointer; border: 2px solid transparent; transition: all 0.3s ease; }
.tech-thumbnail:hover, .tech-thumbnail.active { border-color: var(--primary-blue); }
.tech-thumbnail img { width: 100%; height: 100%; object-fit: cover; }

.tech-product-info { flex: 1; min-width: 300px; background: white; padding: 0; box-shadow: none; }
.tech-product-meta { display: flex; flex-wrap: wrap; gap: 30px; margin-bottom: 30px; align-items: flex-start; }
.tech-price-box { flex: 1; min-width: 200px; }
.tech-price-label { font-size: 0.9rem; color: var(--text-gray); margin-bottom: 8px; text-transform: uppercase; font-weight: 600; letter-spacing: 0.5px; }
.tech-price { font-size: 2.2rem; font-weight: 700; color: var(--primary-blue); letter-spacing: -0.5px; }
.tech-status-box { flex: 1; min-width: 200px; }
.tech-status { font-weight: 600; color: #2e7d32; display: flex; align-items: center; font-size: 1.1rem; }
.tech-status::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: #2e7d32; margin-right: 10px; }

.tech-features-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; margin: 30px 0; }
.tech-feature { padding: 20px 15px; text-align: center; transition: all 0.3s ease; border: 1px solid var(--border-light); border-radius: 8px; background: white; }
.tech-feature:hover { transform: translateY(-5px); border-color: var(--primary-blue); box-shadow: var(--shadow); }
.tech-feature-icon { color: var(--primary-blue); }
.tech-feature-title { font-weight: 600; margin-bottom: 8px; color: var(--text-dark); font-size: 1.1rem; }
.tech-feature-desc { font-size: 0.9rem; color: var(--text-gray); }

.tech-cta-section { margin-top: 10px; padding: 10px 10px; }
.tech-cta-title { font-size: 1.4rem; margin-bottom: 10px; color: var(--text-dark); font-weight: 600; }
.tech-cta-subtitle { font-size: 1rem; color: var(--text-gray); margin-bottom: 20px; }
.tech-cta-buttons { display: flex; gap: 15px; flex-wrap: wrap; }
.tech-cta-button { display: inline-block; background: var(--primary-blue); color: white; padding: 14px 35px; border-radius: 6px; text-decoration: none; font-weight: 600; font-size: 1.1rem; transition: all 0.3s ease; border: none; cursor: pointer; text-transform: uppercase; letter-spacing: 0.5px; flex: 1; min-width: 150px; text-align: center; }
.tech-cta-button:hover { background: var(--dark-blue); transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0, 102, 255, 0.3); }
.tech-whatsapp-button { background: #25d366 !important; }
.tech-whatsapp-button:hover { background: #20ba5a !important; box-shadow: 0 6px 15px rgba(37, 211, 102, 0.3) !important; }
.tech-whatsapp-button i { margin-right: 8px; }

.tech-tabs-container { margin: 50px 0; background: white; overflow: hidden; border-top: 1px solid var(--border-light); padding-top: 30px; }
.tech-tabs-header { display: flex; background: transparent; border-bottom: 1px solid var(--border-light); }
.tech-tab { padding: 15px 25px; color: var(--text-gray); cursor: pointer; font-weight: 600; transition: all 0.3s ease; position: relative; border-bottom: 2px solid transparent; }
.tech-tab.active { color: var(--primary-blue); border-bottom-color: var(--primary-blue); }
.tech-tab-content { padding: 30px 0; display: none; }
.tech-tab-content.active { display: block; }
.tech-tab-content h2 { color: var(--text-dark); margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid var(--border-light); font-weight: 600; }

.tech-related-products { margin: 60px 0; padding: 0 20px; }
.tech-section-title { text-align: center; font-size: 1.8rem; color: var(--text-dark); margin-bottom: 40px; position: relative; padding-bottom: 15px; font-weight: 700; }
.tech-section-title::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 80px; height: 3px; background: var(--primary-blue); }
.tech-products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 30px; }
.tech-product-card { background: white; border-radius: 8px; overflow: hidden; box-shadow: var(--shadow); transition: transform 0.3s ease; border: 1px solid var(--border-light); }
.tech-product-card:hover { transform: translateY(-10px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); }
.tech-product-card-image { width: 100%; height: 200px; overflow: hidden; }
.tech-product-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.tech-product-card:hover .tech-product-card-image img { transform: scale(1.05); }
.tech-product-card-content { padding: 20px; }
.tech-product-card-title { font-size: 1.1rem; margin-bottom: 15px; color: var(--text-dark); font-weight: 600; line-height: 1.4; }
.tech-product-card-button { display: inline-block; background: transparent; color: var(--primary-blue); padding: 8px 15px; border-radius: 4px; text-decoration: none; font-weight: 600; font-size: 0.9rem; transition: all 0.3s ease; border: 1px solid var(--primary-blue); }
.tech-product-card-button:hover { background: var(--primary-blue); color: white; }

.tech-product-categories { margin: 40px 0; background: white; padding: 25px; border-radius: 8px; box-shadow: var(--shadow); border: 1px solid var(--border-light); }
.tech-categories-title { font-size: 1.2rem; color: var(--text-dark); margin-bottom: 20px; font-weight: 600; }
.tech-categories-list { display: flex; flex-wrap: wrap; gap: 12px; }
.tech-category-tag { background: var(--light-blue); color: var(--primary-blue); padding: 8px 16px; border-radius: 20px; font-size: 0.9rem; text-decoration: none; transition: all 0.3s ease; font-weight: 500; }
.tech-category-tag:hover { background: var(--primary-blue); color: white; }

.tech-product-navigation { display: flex; justify-content: space-between; margin: 50px 0; padding: 0 20px; }
.tech-nav-button { display: inline-flex; align-items: center; background: white; color: var(--text-dark); padding: 12px 20px; border-radius: 6px; text-decoration: none; font-weight: 600; box-shadow: var(--shadow); transition: all 0.3s ease; max-width: 45%; border: 1px solid var(--border-light); }
.tech-nav-button:hover { background: var(--primary-blue); color: white; transform: translateY(-3px); }

@media (max-width: 768px) {
    .tech-product-area { flex-direction: column; gap: 30px; }
    .tech-product-meta { flex-direction: column; gap: 20px; }
    .tech-features-grid { grid-template-columns: 1fr; }
    .tech-products-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
    .tech-tabs-header { flex-direction: column; }
    .tech-tab { text-align: center; }
    .tech-product-navigation { flex-direction: column; gap: 15px; }
    .tech-nav-button { max-width: 100%; }
}

/* End tech product page styles */


/* ==========================================================
   High-specificity fixes for News category badge and Price box
   - Ensures the category label overlays the news image (left-top)
   - Adds a blue background box for product prices
   These rules are intentionally specific and placed at the end
   of the stylesheet so they override earlier conflicting rules.
   ========================================================== */

/* Force news category to sit on top-left of the image */
.page-news-container .news-image .news-category,
body.page-template-page-news .news-image .news-category,
body.category .news-image .news-category {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    right: auto !important;
    background: var(--primary-blue) !important;
    color: #ffffff !important;
    padding: 6px 10px !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    box-shadow: 0 8px 20px rgba(0,102,255,0.12) !important;
    z-index: 60 !important;
    display: inline-block !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    max-width: calc(100% - 36px) !important; /* keep inside image */
}

/* Make sure the news-image container establishes positioning context */
.page-news-container .news-image,
body.page-template-page-news .news-image,
body.category .news-image {
    position: relative !important;
}

/* Price blue box - 样式已在上方（第157-172行）统一定义，此处仅保留其他场景的样式 */
.products-section .product-price,
.product-price:not(.products-page-body .products-grid .product-price):not(body.page-template-page-products .product-price):not(body.taxonomy-product_cat .product-price) {
    background: linear-gradient(90deg, var(--primary-blue), var(--electric-blue)) !important;
    color: #ffffff !important;
    padding: 6px 10px !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    display: inline-block !important;
    box-shadow: 0 6px 18px rgba(0,102,255,0.12) !important;
}

/* Small-screen adjustments: keep label readable and images responsive */
@media (max-width: 768px) {
    .page-news-container .news-image .news-category,
    body.page-template-page-news .news-image .news-category {
        top: 10px !important;
        left: 10px !important;
        font-size: 0.85rem !important;
        padding: 5px 8px !important;
    }
    /* 移动端也保持统一裁剪：容器定高，图片填满并裁剪 */
    .page-news-container .news-image img,
    body.page-template-page-news .news-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        max-height: none !important;
    }
}

/* -----------------------------------------------------------------
   Compatibility block: apply News styles when only body template
   classes are present (e.g., body.page-id-28 or
   body.page-template-page-news). This ensures older templates
   without the .page-news-container wrapper still render correctly.
   ----------------------------------------------------------------- */
 
        /* 局部样式 - 避免全局冲突 */
        .tech-product-page {
            --primary-blue: #0066ff;
            --accent-blue: #4d94ff;
            --light-blue: #f0f7ff;
            --dark-blue: #0047b3;
            --text-light: #ffffff;
            --text-dark: #333333;
            --text-gray: #666666;
            --border-light: #e0e0e0;
            --shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            --glow: 0 0 10px rgba(0, 102, 255, 0.2);
            
            max-width: 1200px;
            margin: 0 auto;
            font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
            color: var(--text-dark);
            line-height: 1.6;
        }
        
        .tech-product-header {
            background: var(--primary-blue);
            color: var(--text-light);
            padding: 25px 20px;
            margin-bottom: 30px;
            text-align: center;
            border-radius: 0;
        }
        
        .tech-product-title {
            font-size: 2rem;
            margin-bottom: 10px;
            font-weight: 700;
            letter-spacing: -0.5px;
        }
        
        .tech-product-subtitle {
            font-size: 1.1rem;
            opacity: 0.9;
            font-weight: 400;
        }
        
        .tech-product-area {
            display: flex;
            flex-wrap: wrap;
            gap: 40px;
            padding: 0 20px;
        }
        
        .tech-product-gallery {
            flex: 1;
            min-width: 300px;
        }
        
        .tech-main-image {
            width: 100%;
            max-width: 560px;
            aspect-ratio: 1 / 1;
            min-height: 0;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: var(--shadow);
            margin-bottom: 20px;
            background: white;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .tech-main-image img {
            max-width: 100%;
            max-height: 100%;
            width: auto;
            height: auto;
            object-fit: contain;
            display: block;
        }
        
        .tech-thumbnail-gallery {
            display: flex;
            gap: 12px;
            justify-content: center;
        }
        
        .tech-thumbnail {
            width: 70px;
            height: 70px;
            border-radius: 6px;
            overflow: hidden;
            cursor: pointer;
            border: 2px solid transparent;
            transition: all 0.3s ease;
        }
        
        .tech-thumbnail:hover, .tech-thumbnail.active {
            border-color: var(--primary-blue);
        }
        
        .tech-thumbnail img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .tech-product-info {
            flex: 1;
            min-width: 300px;
            background: white;
            border-radius: 0;
            padding: 0;
            box-shadow: none;
        }
        
        .tech-product-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 30px;
            margin-bottom: 30px;
            align-items: flex-start;
        }
        
        .tech-price-box {
            flex: 1;
            min-width: 200px;
        }
        
        .tech-price-label {
            font-size: 0.9rem;
            color: var(--text-gray);
            margin-bottom: 8px;
            text-transform: uppercase;
            font-weight: 600;
            letter-spacing: 0.5px;
        }
        
        .tech-price {
            font-size: 2.2rem;
            font-weight: 700;
            color: var(--primary-blue);
            letter-spacing: -0.5px;
        }
        
        .tech-status-box {
            flex: 1;
            min-width: 200px;
        }
        
        .tech-status {
            font-weight: 600;
            color: #2e7d32;
            display: flex;
            align-items: center;
            font-size: 1.1rem;
        }
        
        .tech-status::before {
            content: '';
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #2e7d32;
            margin-right: 10px;
        }
        
        .tech-features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 20px;
            margin: 30px 0;
        }
        
        .tech-feature {
            padding: 20px 15px;
            text-align: center;
            transition: all 0.3s ease;
            border: 1px solid var(--border-light);
            border-radius: 8px;
            background: white;
        }
        
        .tech-feature:hover {
            transform: translateY(-5px);
            border-color: var(--primary-blue);
            box-shadow: var(--shadow);
        }
        
        .tech-feature-icon {
            color: var(--primary-blue);
        }
        
        .tech-feature-title {
            font-weight: 600;
            margin-bottom: 8px;
            color: var(--text-dark);
            font-size: 1.1rem;
        }
        
        .tech-feature-desc {
            font-size: 0.9rem;
            color: var(--text-gray);
        }
        
        .tech-cta-section {
            margin-top: 10px;
            padding: 10px 10px;
        }
        
        .tech-cta-title {
            font-size: 1.4rem;
            margin-bottom: 10px;
            color: var(--text-dark);
            font-weight: 600;
        }
        
        .tech-cta-subtitle {
            font-size: 1rem;
            color: var(--text-gray);
            margin-bottom: 20px;
        }
        
        .tech-cta-buttons {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
        }
        
        .tech-cta-button {
            display: inline-block;
            background: var(--primary-blue);
            color: white;
            padding: 14px 35px;
            border-radius: 6px;
            text-decoration: none;
            font-weight: 600;
            font-size: 1.1rem;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            flex: 1;
            min-width: 150px;
            text-align: center;
        }
        
        .tech-cta-button:hover {
            background: var(--dark-blue);
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(0, 102, 255, 0.3);
        }
        
        .tech-whatsapp-button {
            background: #25d366 !important;
        }
        
        .tech-whatsapp-button:hover {
            background: #20ba5a !important;
            box-shadow: 0 6px 15px rgba(37, 211, 102, 0.3) !important;
        }
        
        .tech-whatsapp-button i {
            margin-right: 8px;
        }
        
        /* 标签页样式 */
        .tech-tabs-container {
            margin: 50px 0;
            background: white;
            border-radius: 0;
            overflow: hidden;
            box-shadow: none;
            border-top: 1px solid var(--border-light);
            padding-top: 30px;
        }
        
        .tech-tabs-header {
            display: flex;
            background: transparent;
            border-bottom: 1px solid var(--border-light);
        }
        
        .tech-tab {
            padding: 15px 25px;
            color: var(--text-gray);
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s ease;
            position: relative;
            border-bottom: 2px solid transparent;
        }
        
        .tech-tab.active {
            color: var(--primary-blue);
            border-bottom-color: var(--primary-blue);
        }
        
        .tech-tab-content {
            padding: 30px 0;
            display: none;
        }
        
        .tech-tab-content.active {
            display: block;
        }
        
        .tech-tab-content h2 {
            color: var(--text-dark);
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--border-light);
            font-weight: 600;
        }
        
        /* 相关产品样式 */
        .tech-related-products {
            margin: 60px 0;
            padding: 0 20px;
        }
        
        .tech-section-title {
            text-align: center;
            font-size: 1.8rem;
            color: var(--text-dark);
            margin-bottom: 40px;
            position: relative;
            padding-bottom: 15px;
            font-weight: 700;
        }
        
        .tech-section-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 3px;
            background: var(--primary-blue);
        }
        
        .tech-products-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 30px;
        }
        
        .tech-product-card {
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: transform 0.3s ease;
            border: 1px solid var(--border-light);
        }
        
        .tech-product-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }
        
        .tech-product-card-image {
            width: 100%;
            height: 200px;
            overflow: hidden;
        }
        
        .tech-product-card-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        
        .tech-product-card:hover .tech-product-card-image img {
            transform: scale(1.05);
        }
        
        .tech-product-card-content {
            padding: 20px;
        }
        
        .tech-product-card-title {
            font-size: 1.1rem;
            margin-bottom: 15px;
            color: var(--text-dark);
            font-weight: 600;
            line-height: 1.4;
        }
        
        .tech-product-card-button {
            display: inline-block;
            background: transparent;
            color: var(--primary-blue);
            padding: 8px 15px;
            border-radius: 4px;
            text-decoration: none;
            font-weight: 600;
            font-size: 0.9rem;
            transition: all 0.3s ease;
            border: 1px solid var(--primary-blue);
        }
        
        .tech-product-card-button:hover {
            background: var(--primary-blue);
            color: white;
        }
        
        /* 产品分类样式 */
        .tech-product-categories {
            margin: 40px 0;
            background: white;
            padding: 25px;
            border-radius: 8px;
            box-shadow: var(--shadow);
            border: 1px solid var(--border-light);
        }
        
        .tech-categories-title {
            font-size: 1.2rem;
            color: var(--text-dark);
            margin-bottom: 20px;
            font-weight: 600;
        }
        
        .tech-categories-list {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
        }
        
        .tech-category-tag {
            background: var(--light-blue);
            color: var(--primary-blue);
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 0.9rem;
            text-decoration: none;
            transition: all 0.3s ease;
            font-weight: 500;
        }
        
        .tech-category-tag:hover {
            background: var(--primary-blue);
            color: white;
        }
        
        /* 产品导航样式 */
        .tech-product-navigation {
            display: flex;
            justify-content: space-between;
            margin: 50px 0;
            padding: 0 20px;
        }
        
        .tech-nav-button {
            display: inline-flex;
            align-items: center;
            background: white;
            color: var(--text-dark);
            padding: 12px 20px;
            border-radius: 6px;
            text-decoration: none;
            font-weight: 600;
            box-shadow: var(--shadow);
            transition: all 0.3s ease;
            max-width: 45%;
            border: 1px solid var(--border-light);
        }
        
        .tech-nav-button:hover {
            background: var(--primary-blue);
            color: white;
            transform: translateY(-3px);
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .tech-product-area {
                flex-direction: column;
                gap: 30px;
            }
            
            .tech-product-gallery {
                width: 100%;
            }
            
            .tech-main-image {
                width: 100%;
                max-width: 100%;
                aspect-ratio: 1 / 1;
                height: auto;
            }
            
            .tech-product-meta {
                flex-direction: column;
                gap: 20px;
            }
            
            .tech-features-grid {
                grid-template-columns: 1fr;
            }
            
            .tech-products-grid {
                grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            }
            
            .tech-tabs-header {
                flex-direction: column;
            }
            
            .tech-tab {
                text-align: center;
            }
            
            .tech-product-navigation {
                flex-direction: column;
                gap: 15px;
            }
            
            .tech-nav-button {
                max-width: 100%;
            }
        }
        
        @media (max-width: 576px) {
            .tech-main-image {
                width: 100%;
                aspect-ratio: 1 / 1;
            }
        }