/**
 * English Single Product Page - Western Market Style
 * 英文产品详情页 - 欧美市场风格优化
 * 
 * Design Philosophy:
 * - Clean & Professional: Modern B2B aesthetic with ample white space
 * - Trust & Credibility: Enterprise-grade design elements
 * - Easy to Read: Large fonts, high contrast, generous line spacing
 * - Action-Oriented: Clear CTAs and conversion-focused layout
 * - Mobile-First: Responsive design for all devices
 * 
 * Priority: Use !important to override default styles
 */

/* ============================================================================
   Global Overrides - English Language Specific
   ============================================================================ */

body.lang-en .product-detail-page {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    letter-spacing: 0 !important;
}

/* ============================================================================
   Breadcrumb Navigation - Professional Style
   ============================================================================ */

body.lang-en .product-breadcrumb {
    background: #ffffff !important;
    border-bottom: 1px solid #e8eaed !important;
}

body.lang-en .breadcrumb-nav {
    font-size: 14px !important;
    font-weight: 500 !important;
}

body.lang-en .breadcrumb-nav a {
    color: #666 !important;
}

body.lang-en .breadcrumb-nav a:hover {
    color: #1976d2 !important;
}

/* ============================================================================
   Hero Section - Modern Western Style (优化高度，更加大气)
   英文站点专用优化：减小字体，防止内容溢出
   ============================================================================ */

body.lang-en .product-hero {
    /* 移除 background 属性，让内联样式的背景图片生效 */
    /* background: linear-gradient(...) 已通过内联样式设置 */
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    min-height: 550px !important; /* 统一为 550px */
    padding: 60px 40px !important; /* 从 70px 减少到 60px，减少垂直空间 */
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body.lang-en .hero-content {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 60px !important; /* 从 80px 减少到 60px，给文字更多空间 */
    align-items: center !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    width: 100% !important;
}

body.lang-en .hero-image {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

body.lang-en .hero-image img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: 450px !important; /* 从 500px 减少到 450px */
    object-fit: contain !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4) !important;
    background: rgba(255,255,255,0.1) !important;
    padding: 20px !important;
    border: 2px solid rgba(255,255,255,0.2) !important;
}

body.lang-en .hero-info {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 0 !important; /* 完全移除 gap，改用 margin 控制间距 */
}

/* 标题底部间距 */
body.lang-en .hero-info h1 {
    margin-bottom: 16px !important;
}

/* 摘要底部间距 */
body.lang-en .hero-excerpt {
    margin-bottom: 16px !important;
}

/* Key Specs 底部间距 */
body.lang-en .key-specs-list {
    margin-bottom: 16px !important;
}

/* 如果摘要为空或只有空白字符，完全隐藏 */
body.lang-en .hero-excerpt:empty,
body.lang-en .hero-excerpt:blank {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    visibility: hidden !important;
}

/* 强制隐藏空的或只包含空白的摘要 */
body.lang-en .hero-excerpt:not(:has(*)):not(:has(text)) {
    display: none !important;
}

/* 标题优化：减小字体，防止溢出 */
body.lang-en .hero-info h1 {
    font-size: 42px !important; /* 从 52px 减少到 42px */
    font-weight: 800 !important;
    color: #fff !important;
    line-height: 1.15 !important; /* 从 1.2 减少到 1.15，更紧凑 */
    letter-spacing: -0.8px !important; /* 从 -1px 调整到 -0.8px */
    margin-bottom: 16px !important; /* 从 28px 减少到 16px */
    word-wrap: break-word !important; /* 允许长单词换行 */
    overflow-wrap: break-word !important;
    hyphens: auto !important; /* 启用自动断字 */
}

/* 摘要优化：减小字体和行高 */
body.lang-en .hero-excerpt {
    font-size: 16px !important; /* 从 19px 减少到 16px */
    line-height: 1.6 !important; /* 从 1.8 减少到 1.6 */
    color: rgba(255,255,255,0.95) !important;
    margin-bottom: 20px !important; /* 从 32px 减少到 20px */
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-height: 120px !important; /* 限制最大高度，防止过长 */
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 5 !important; /* 最多显示 5 行 */
    -webkit-box-orient: vertical !important;
}

/* 如果摘要为空，隐藏该区域，避免空白 */
body.lang-en .hero-excerpt:empty {
    display: none !important;
    margin-bottom: 0 !important;
}

/* 如果摘要内容为空白字符，也隐藏 */
body.lang-en .hero-excerpt:blank {
    display: none !important;
    margin-bottom: 0 !important;
}

/* 如果摘要为空，隐藏该区域，避免空白 */
body.lang-en .hero-excerpt:empty {
    display: none !important;
    margin-bottom: 0 !important;
}

/* 如果摘要内容为空白字符，也隐藏 */
body.lang-en .hero-excerpt:blank {
    display: none !important;
    margin-bottom: 0 !important;
}

/* Key Specs - Clean Western Style */
body.lang-en .key-specs-list {
    background: rgba(255,255,255,0.15) !important;
    backdrop-filter: blur(10px) !important;
    padding: 24px !important; /* 从 36px 减少到 24px */
    border-radius: 12px !important;
    border: 2px solid rgba(255,255,255,0.25) !important;
    margin-bottom: 20px !important; /* 从 28px 减少到 20px */
}

body.lang-en .key-specs-list h3 {
    font-size: 16px !important; /* 从 18px 减少到 16px */
    font-weight: 700 !important;
    color: #fff !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important; /* 从 1px 减少到 0.8px */
    margin-bottom: 16px !important; /* 从 24px 减少到 16px */
}

body.lang-en .key-specs-list ul {
    display: grid !important;
    gap: 8px !important; /* 从 12px 减少到 8px */
}

body.lang-en .key-specs-list li {
    font-size: 15px !important; /* 从 17px 减少到 15px */
    line-height: 1.5 !important; /* 从 1.7 减少到 1.5 */
    font-weight: 500 !important;
    color: #fff !important;
    margin-bottom: 0 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* CTA Buttons - Blue Theme - 优化字体渲染 */
body.lang-en .btn-hero,
body.lang-en .btn-cta {
    padding: 14px 28px !important; /* 从 18px 36px 减少到 14px 28px */
    font-size: 16px !important; /* 增加到 16px，提升可读性 */
    font-weight: 700 !important; /* 增加到 700，更粗更清晰 */
    border-radius: 8px !important;
    letter-spacing: 0.5px !important; /* 增加到 0.5px，字母间距更大 */
    /* 优化字体渲染，提升清晰度 */
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
    font-feature-settings: "kern" 1 !important;
    /* 确保文字不会被压缩 */
    white-space: nowrap !important;
    text-transform: none !important;
    /* 强制使用系统字体，确保清晰 */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

body.lang-en .btn-primary,
body.lang-en .btn-hero.btn-primary {
    background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%) !important;
    color: #fff !important;
    border: none !important;
    /* 增强文字对比度 - 更强的阴影 */
    text-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
}

body.lang-en .btn-primary:hover,
body.lang-en .btn-hero.btn-primary:hover {
    background: linear-gradient(135deg, #1565c0 0%, #0d47a1 100%) !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 28px rgba(25, 118, 210, 0.4) !important;
}

body.lang-en .btn-secondary,
body.lang-en .btn-hero.btn-secondary {
    background: rgba(255,255,255,0.15) !important;
    color: #fff !important;
    border: 2px solid rgba(255,255,255,0.35) !important;
    /* 增强文字对比度 - 更强的阴影 */
    text-shadow: 0 1px 3px rgba(0,0,0,0.25) !important;
}

body.lang-en .btn-secondary:hover,
body.lang-en .btn-hero.btn-secondary:hover {
    background: rgba(255,255,255,0.25) !important;
    border-color: rgba(255,255,255,0.6) !important;
}

/* Hero CTA 按钮容器 */
body.lang-en .hero-cta {
    display: flex !important;
    gap: 12px !important; /* 从 16px 减少到 12px */
    flex-wrap: wrap !important;
    margin-top: 8px !important;
}

/* 按钮内的图标优化 */
body.lang-en .btn-hero .dashicons,
body.lang-en .btn-cta .dashicons {
    font-size: 16px !important;
    width: 16px !important;
    height: 16px !important;
    vertical-align: middle !important;
    margin-right: 6px !important;
}

/* ============================================================================
   Section Headers - Professional Style
   ============================================================================ */

body.lang-en .section-header {
    margin-bottom: 56px !important;
    padding-bottom: 28px !important;
}

body.lang-en .section-icon {
    width: 64px !important;
    height: 64px !important;
    background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%) !important;
    border-radius: 16px !important;
    font-size: 32px !important;
    box-shadow: 0 8px 24px rgba(25, 118, 210, 0.35) !important;
}

body.lang-en .section-title {
    font-size: 36px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    letter-spacing: -0.5px !important;
}

/* ============================================================================
   Paragraph Text - Enhanced Typography for Readability
   大段落文字排版优化 - 提升可读性
   ============================================================================ */

/* 产品详情页所有段落文字 */
body.lang-en .product-section p,
body.lang-en .column-box p,
body.lang-en .info-card p,
body.lang-en .product-content p {
    font-size: 17px !important;
    line-height: 1.9 !important; /* 增加行高，提升可读性 */
    color: #444 !important; /* 稍微深一点的灰色，提升对比度 */
    margin-bottom: 24px !important; /* 增加段落间距 */
    font-weight: 400 !important;
    letter-spacing: 0.2px !important; /* 轻微增加字间距 */
    max-width: 85ch !important; /* 限制每行字符数，提升可读性 */
}

/* 段落首行缩进（可选，西方排版通常不用） */
body.lang-en .product-section p + p {
    /* text-indent: 2em; */ /* 如果需要首行缩进，取消注释 */
}

/* 最后一个段落不需要底部间距 */
body.lang-en .product-section p:last-child,
body.lang-en .column-box p:last-child,
body.lang-en .info-card p:last-child {
    margin-bottom: 0 !important;
}

/* 强调文字 */
body.lang-en .product-section strong,
body.lang-en .product-section b {
    font-weight: 700 !important;
    color: #1a1a1a !important;
}

/* 斜体文字 */
body.lang-en .product-section em,
body.lang-en .product-section i {
    font-style: italic !important;
    color: #555 !important;
}

/* 引用文字 */
body.lang-en .product-section blockquote {
    margin: 32px 0 !important;
    padding: 24px 32px !important;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%) !important;
    border-left: 5px solid #1976d2 !important;
    border-radius: 8px !important;
    font-size: 18px !important;
    line-height: 1.8 !important;
    color: #555 !important;
    font-style: italic !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
}

body.lang-en .product-section blockquote p {
    margin-bottom: 0 !important;
}

/* 链接样式 */
body.lang-en .product-section a:not(.btn) {
    color: #1976d2 !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(25, 118, 210, 0.3) !important;
    text-underline-offset: 3px !important;
    transition: all 0.2s ease !important;
}

body.lang-en .product-section a:not(.btn):hover {
    color: #1565c0 !important;
    text-decoration-color: #1565c0 !important;
    text-underline-offset: 5px !important;
}

/* 内容区域的整体优化 */
body.lang-en .product-content,
body.lang-en .section-content {
    max-width: 100% !important;
}

/* 段落之间的分隔 */
body.lang-en .product-section p + h3,
body.lang-en .product-section p + h4 {
    margin-top: 40px !important;
}

/* 小标题样式 */
body.lang-en .product-section h3 {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin-bottom: 20px !important;
    margin-top: 40px !important;
    letter-spacing: -0.3px !important;
}

body.lang-en .product-section h4 {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin-bottom: 16px !important;
    margin-top: 32px !important;
}

/* 数字和数据强调 */
body.lang-en .product-section .highlight-number {
    font-size: 120% !important;
    font-weight: 700 !important;
    color: #1976d2 !important;
}

/* 响应式优化 - 平板 */
@media (max-width: 1024px) {
    body.lang-en .product-section p,
    body.lang-en .column-box p,
    body.lang-en .info-card p {
        font-size: 16px !important;
        line-height: 1.85 !important;
    }
}

/* 响应式优化 - 手机 */
@media (max-width: 768px) {
    body.lang-en .product-section p,
    body.lang-en .column-box p,
    body.lang-en .info-card p {
        font-size: 15px !important;
        line-height: 1.8 !important;
        margin-bottom: 20px !important;
        max-width: 100% !important;
    }
    
    body.lang-en .product-section h3 {
        font-size: 20px !important;
        margin-top: 32px !important;
    }
    
    body.lang-en .product-section h4 {
        font-size: 18px !important;
        margin-top: 24px !important;
    }
}

/* ============================================================================
   Technical Parameters Table - Clean Design
   ============================================================================ */

body.lang-en .tech-params-table {
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}

body.lang-en .tech-params-table th {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    color: #1a1a1a !important;
}

body.lang-en .tech-params-table td {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #666 !important;
}

/* ============================================================================
   Two Column Layout - Modern Cards
   ============================================================================ */

body.lang-en .column-box {
    background: linear-gradient(135deg, #fafbfc 0%, #ffffff 100%) !important;
    padding: 44px !important;
    border-radius: 12px !important;
    border-left: 5px solid #1976d2 !important;
}

body.lang-en .column-box h3 {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin-bottom: 24px !important;
}

body.lang-en .column-box li {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #666 !important;
    line-height: 1.7 !important;
}

/* ============================================================================
   Standards & Certifications - Badge Style
   ============================================================================ */

body.lang-en .standard-badge {
    background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%) !important;
    padding: 36px 28px !important;
    border-radius: 12px !important;
    border: 2px solid #e8eaed !important;
}

body.lang-en .standard-badge:hover {
    border-color: #1976d2 !important;
    transform: translateY(-10px) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.15) !important;
}

body.lang-en .standard-badge .dashicons {
    color: #1976d2 !important;
    background: rgba(25, 118, 210, 0.1) !important;
}

body.lang-en .standard-badge h4 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
}

body.lang-en .standard-badge p {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #666 !important;
    text-transform: uppercase !important;
}

/* ============================================================================
   Packaging & Logistics - Info Cards
   ============================================================================ */

body.lang-en .info-card {
    background: linear-gradient(135deg, #fafbfc 0%, #ffffff 100%) !important;
    padding: 44px !important;
    border-radius: 12px !important;
    border: 2px solid #e8eaed !important;
}

body.lang-en .info-card h3 {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
}

body.lang-en .info-card .content {
    font-size: 15px !important;
    line-height: 1.8 !important;
    color: #666 !important;
}

/* ============================================================================
   Quality Control Flow - Process Steps
   ============================================================================ */

body.lang-en .quality-step {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%) !important;
    padding: 40px 28px !important;
    border-radius: 12px !important;
    border: 2px solid #90caf9 !important;
}

body.lang-en .quality-step:hover {
    border-color: #1976d2 !important;
}

body.lang-en .quality-step .step-number {
    background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%) !important;
    width: 56px !important;
    height: 56px !important;
    font-size: 22px !important;
    font-weight: 800 !important;
}

body.lang-en .quality-step h4 {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
}

body.lang-en .quality-step p {
    font-size: 14px !important;
    color: #666 !important;
}

/* ============================================================================
   Technical Support Cards - Service Highlights
   ============================================================================ */

body.lang-en .support-card {
    background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%) !important;
    padding: 40px 32px !important;
    border-radius: 12px !important;
    border: 2px solid #e8eaed !important;
}

body.lang-en .support-card:hover {
    border-color: #1976d2 !important;
}

body.lang-en .support-card .dashicons {
    color: #1976d2 !important;
    background: rgba(25, 118, 210, 0.1) !important;
    font-size: 52px !important;
}

body.lang-en .support-card:hover .dashicons {
    background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%) !important;
    color: #fff !important;
}

body.lang-en .support-card h4 {
    font-size: 19px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
}

body.lang-en .support-card p {
    font-size: 15px !important;
    color: #666 !important;
    line-height: 1.7 !important;
}

/* ============================================================================
   CTA Section - Strong Call to Action
   ============================================================================ */

body.lang-en .cta-section {
    background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%) !important;
    padding: 80px 48px !important;
    border-radius: 16px !important;
}

body.lang-en .cta-section h2 {
    font-size: 40px !important;
    font-weight: 800 !important;
    color: #fff !important;
    letter-spacing: -0.5px !important;
    margin-bottom: 20px !important;
}

body.lang-en .cta-section p {
    font-size: 19px !important;
    color: rgba(255,255,255,0.95) !important;
    margin-bottom: 40px !important;
}

body.lang-en .btn-cta-primary {
    background: #fff !important;
    color: #1976d2 !important;
    padding: 18px 40px !important;
    font-size: 17px !important;
    font-weight: 700 !important;
}

body.lang-en .btn-cta-primary:hover {
    background: #f5f5f5 !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,0.35) !important;
}

body.lang-en .btn-cta-secondary {
    background: rgba(255,255,255,0.15) !important;
    color: #fff !important;
    border: 2px solid rgba(255,255,255,0.4) !important;
}

body.lang-en .btn-cta-secondary:hover {
    background: rgba(255,255,255,0.25) !important;
    border-color: rgba(255,255,255,0.6) !important;
}

/* ============================================================================
   Related Products - Clean Grid
   ============================================================================ */

body.lang-en .related-products {
    background: #ffffff !important;
    padding: 72px 56px !important;
    border-radius: 16px !important;
}

body.lang-en .related-products h2 {
    font-size: 40px !important;
    font-weight: 800 !important;
    color: #1a1a1a !important;
    letter-spacing: -0.5px !important;
    margin-bottom: 56px !important;
}

body.lang-en .related-product-card {
    border: 2px solid #e8eaed !important;
    border-radius: 12px !important;
}

body.lang-en .related-product-card:hover {
    border-color: #1976d2 !important;
    transform: translateY(-10px) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.15) !important;
}

body.lang-en .related-product-info h3 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
}

body.lang-en .related-product-card:hover .related-product-info h3 {
    color: #1976d2 !important;
}

body.lang-en .related-product-info p {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #666 !important;
}

/* ============================================================================
   Download Modal - Professional Form
   ============================================================================ */

body.lang-en .modal-content {
    padding: 48px !important;
    border-radius: 16px !important;
}

body.lang-en .modal-content h3 {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #1a1a1a !important;
    letter-spacing: -0.5px !important;
}

body.lang-en .modal-content p {
    font-size: 16px !important;
    color: #666 !important;
    line-height: 1.6 !important;
}

body.lang-en .form-group label {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
}

body.lang-en .form-group input {
    padding: 14px 16px !important;
    font-size: 15px !important;
    border: 2px solid #e8eaed !important;
    border-radius: 8px !important;
}

body.lang-en .form-group input:focus {
    border-color: #1976d2 !important;
    box-shadow: 0 0 0 4px rgba(25, 118, 210, 0.1) !important;
}

body.lang-en .btn-submit {
    background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%) !important;
    padding: 16px 24px !important;
    font-size: 17px !important;
    font-weight: 700 !important;
}

body.lang-en .btn-submit:hover {
    background: linear-gradient(135deg, #1565c0 0%, #0d47a1 100%) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 20px rgba(25,118,210,0.4) !important;
}

/* ============================================================================
   Responsive Design - Tablet
   ============================================================================ */

@media (max-width: 1024px) {
    body.lang-en .product-hero {
        padding: 50px 30px !important;
        min-height: 480px !important;
    }
    
    body.lang-en .hero-content {
        gap: 40px !important;
    }
    
    body.lang-en .hero-info h1 {
        font-size: 36px !important;
        line-height: 1.15 !important;
    }
    
    body.lang-en .hero-excerpt {
        font-size: 15px !important;
        line-height: 1.55 !important;
        max-height: 100px !important;
        -webkit-line-clamp: 4 !important;
    }
    
    body.lang-en .key-specs-list {
        padding: 20px !important;
    }
    
    body.lang-en .key-specs-list h3 {
        font-size: 15px !important;
    }
    
    body.lang-en .key-specs-list li {
        font-size: 14px !important;
    }
    
    body.lang-en .section-title {
        font-size: 32px !important;
    }
    
    body.lang-en .cta-section h2,
    body.lang-en .related-products h2 {
        font-size: 36px !important;
    }
}

@media (max-width: 968px) {
    body.lang-en .hero-content {
        grid-template-columns: 48% 52% !important;
        gap: 30px !important;
    }
    
    body.lang-en .hero-image img {
        max-height: 320px !important;
    }
    
    body.lang-en .hero-info h1 {
        font-size: 30px !important;
        margin-bottom: 12px !important;
    }
    
    body.lang-en .hero-excerpt {
        font-size: 14px !important;
        line-height: 1.5 !important;
        margin-bottom: 16px !important;
        max-height: 84px !important;
        -webkit-line-clamp: 4 !important;
    }
    
    body.lang-en .key-specs-list {
        padding: 16px !important;
    }
    
    body.lang-en .key-specs-list h3 {
        font-size: 14px !important;
        margin-bottom: 12px !important;
    }
    
    body.lang-en .key-specs-list li {
        font-size: 13px !important;
        line-height: 1.4 !important;
    }
    
    body.lang-en .btn-hero {
        padding: 12px 24px !important;
        font-size: 14px !important;
    }
}

/* ============================================================================
   Responsive Design - Mobile
   ============================================================================ */

@media (max-width: 768px) {
    body.lang-en .product-hero {
        padding: 40px 24px !important;
    }
    
    body.lang-en .hero-content {
        grid-template-columns: 45% 55% !important;
        gap: 30px !important;
    }
    
    body.lang-en .hero-image img {
        max-height: 320px !important;
        padding: 12px !important;
    }
    
    body.lang-en .hero-info h1 {
        font-size: 28px !important;
    }
    
    body.lang-en .hero-excerpt {
        font-size: 15px !important;
    }
    
    body.lang-en .key-specs-list {
        padding: 18px !important;
    }
    
    body.lang-en .key-specs-list h3 {
        font-size: 14px !important;
    }
    
    body.lang-en .key-specs-list li {
        font-size: 13px !important;
    }
    
    body.lang-en .btn-hero {
        padding: 12px 24px !important;
        font-size: 14px !important;
    }
    
    body.lang-en .section-title {
        font-size: 24px !important;
    }
    
    body.lang-en .cta-section {
        padding: 44px 24px !important;
    }
    
    body.lang-en .cta-section h2 {
        font-size: 26px !important;
    }
}

@media (max-width: 640px) {
    body.lang-en .product-hero {
        padding: 35px 12px 20px 12px !important;
    }
    
    body.lang-en .hero-content {
        grid-template-columns: 40% 60% !important;
        gap: 12px !important;
    }
    
    body.lang-en .hero-image img {
        max-height: 160px !important;
        padding: 6px !important;
    }
    
    body.lang-en .hero-info h1 {
        font-size: 18px !important;
        margin-bottom: 8px !important;
    }
    
    body.lang-en .hero-excerpt {
        font-size: 12px !important;
        margin-bottom: 10px !important;
    }
    
    body.lang-en .key-specs-list {
        padding: 10px !important;
    }
    
    body.lang-en .key-specs-list h3 {
        font-size: 11px !important;
    }
    
    body.lang-en .key-specs-list li {
        font-size: 10px !important;
    }
    
    body.lang-en .btn-hero,
    body.lang-en .btn-cta {
        padding: 8px 12px !important;
        font-size: 11px !important;
    }
    
    body.lang-en .section-title {
        font-size: 20px !important;
    }
    
    body.lang-en .cta-section h2,
    body.lang-en .related-products h2 {
        font-size: 20px !important;
    }
}

@media (max-width: 480px) {
    body.lang-en .product-hero {
        padding: 31px 10px 16px 10px !important;
    }
    
    body.lang-en .hero-content {
        grid-template-columns: 38% 62% !important;
        gap: 10px !important;
    }
    
    body.lang-en .hero-image img {
        max-height: 140px !important;
        padding: 4px !important;
    }
    
    body.lang-en .hero-info h1 {
        font-size: 16px !important;
    }
    
    body.lang-en .hero-excerpt {
        font-size: 11px !important;
    }
    
    body.lang-en .key-specs-list {
        padding: 8px !important;
    }
    
    body.lang-en .key-specs-list h3 {
        font-size: 10px !important;
    }
    
    body.lang-en .key-specs-list li {
        font-size: 9px !important;
    }
    
    body.lang-en .btn-hero,
    body.lang-en .btn-cta {
        padding: 7px 10px !important;
        font-size: 10px !important;
    }
    
    body.lang-en .section-title {
        font-size: 18px !important;
    }
    
    body.lang-en .cta-section h2,
    body.lang-en .related-products h2 {
        font-size: 18px !important;
    }
}

/* ============================================================================
   Print Styles
   ============================================================================ */

@media print {
    body.lang-en .product-breadcrumb,
    body.lang-en .hero-cta,
    body.lang-en .cta-section,
    body.lang-en .related-products,
    body.lang-en .modal {
        display: none !important;
    }
}

/* ============================================================================
   JavaScript Enhancement - Force Hide Empty Excerpt
   使用 JavaScript 强制隐藏空摘要，确保没有空白区域
   ============================================================================ */

/* 为 JavaScript 添加的辅助类 */
body.lang-en .hero-excerpt.js-hidden {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    visibility: hidden !important;
}