/* ==========================================================================
   移动端自适应修复补丁
   修复详情页面在移动设备上的显示问题
   ========================================================================== */

/* 修复产品详情页表格溢出问题 */
.specs-table-wrapper {
    overflow-x: auto;
    margin: 0 -1rem;
    padding: 0 1rem;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
    .specs-table-wrapper {
        margin: 0 -1rem;
        padding: 0 1rem;
        border-radius: 0;
    }
    
    .specs-table {
        min-width: 500px;
        font-size: 0.875rem;
    }
    
    .specs-table th,
    .specs-table td {
        padding: 0.75rem 0.5rem;
        white-space: nowrap;
    }
    
    .specs-table th {
        font-size: 0.875rem;
        font-weight: 600;
    }
}

@media (max-width: 480px) {
    .specs-table {
        min-width: 400px;
        font-size: 0.75rem;
    }
    
    .specs-table th,
    .specs-table td {
        padding: 0.5rem 0.375rem;
    }
}

/* ========================================================================== 
   新增：更完善的技术规格移动端优化
   ========================================================================== */

/* 技术规格表格移动端优化 */
@media (max-width: 768px) {
    /* 优化表格容器 - 全屏展示 */
    .specs-table-wrapper {
        position: relative;
        background: var(--white);
        border-radius: 0; /* 移除圆角以实现全屏效果 */
        box-shadow: none; /* 移除阴影 */
        overflow: hidden;
        margin: 0 -1rem; /* 负边距实现全屏宽度 */
        padding: 0;
        width: calc(100% + 2rem); /* 计算全屏宽度 */
        max-width: none;
    }
    
    /* 添加全屏背景 */
    .specs-table-wrapper::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, var(--white) 0%, var(--gray-25) 100%);
        z-index: 0;
    }
    
    /* 添加滚动提示 - 全屏模式 */
    .specs-table-wrapper::after {
        content: '← 左右滑动查看完整技术参数 →';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(135deg, rgba(30, 64, 175, 0.9) 0%, rgba(30, 64, 175, 0.8) 100%);
        color: var(--white);
        text-align: center;
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
        font-weight: 500;
        opacity: 0.9;
        pointer-events: none;
        z-index: 3;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }
    
    /* 表格样式优化 - 全屏模式 */
    .specs-table {
        position: relative;
        background: transparent;
        border: none;
        border-radius: 0;
        box-shadow: none;
        margin-bottom: 0;
        width: 100%;
        min-width: 100vw; /* 使用视口宽度确保全屏 */
        z-index: 1;
    }
    
    /* 表格行分隔 - 增强视觉效果 */
    .specs-table tr {
        border-bottom: 1px solid var(--gray-200);
        transition: background-color 0.2s ease;
    }
    
    .specs-table tr:hover {
        background-color: var(--primary-25);
    }
    
    .specs-table tr:last-child {
        border-bottom: none;
    }
    
    /* 表头样式 - 全屏模式 */
    .specs-table th {
        background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
        color: var(--white);
        font-weight: 600;
        font-size: 0.875rem;
        position: sticky;
        top: 0;
        z-index: 2;
        padding: 1rem 0.75rem;
        text-align: center;
        border-right: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    .specs-table th:last-child {
        border-right: none;
    }
    
    /* 数据单元格 - 全屏优化 */
    .specs-table td {
        background: var(--white);
        color: var(--text-secondary);
        font-weight: 500;
        font-size: 0.875rem;
        padding: 0.875rem 0.75rem;
        text-align: center;
        border-right: 1px solid var(--gray-100);
        transition: all 0.2s ease;
    }
    
    .specs-table td:last-child {
        border-right: none;
    }
    
    /* 交替行背景 - 全屏模式 */
    .specs-table tbody tr:nth-child(even) td {
        background: var(--gray-25);
    }
    
    .specs-table tbody tr:hover td {
        background: var(--primary-25);
        color: var(--text-primary);
        transform: scale(1.01);
    }
    
    /* 技术规格区域标题优化 */
    #specifications h3 {
        margin-bottom: 1.5rem !important;
        padding: 0 1rem !important;
        font-size: 1.5rem !important;
        text-align: center !important;
        color: var(--text-primary) !important;
    }
    
    /* 为技术规格添加说明文字 */
    #specifications::before {
        content: '滑动表格查看完整技术参数信息';
        display: block;
        text-align: center;
        font-size: 0.875rem;
        color: var(--text-secondary);
        margin-bottom: 1rem;
        padding: 0 1rem;
        font-style: italic;
    }
}

/* 技术规格小屏幕优化 - 全屏模式 */
@media (max-width: 480px) {
    .specs-table-wrapper {
        margin: 0 -0.75rem;
        width: calc(100% + 1.5rem);
    }
    
    .specs-table-wrapper::after {
        font-size: 0.75rem;
        padding: 0.625rem 0.75rem;
        content: '← 滑动查看完整参数 →';
    }
    
    .specs-table {
        font-size: 0.75rem;
        min-width: calc(100vw - 1.5rem);
    }
    
    .specs-table th,
    .specs-table td {
        padding: 0.625rem 0.5rem;
        font-size: 0.75rem;
    }
    
    .specs-table th {
        font-size: 0.8125rem;
    }
    
    #specifications h3 {
        font-size: 1.375rem !important;
        padding: 0 0.75rem !important;
    }
    
    #specifications::before {
        font-size: 0.8125rem;
        padding: 0 0.75rem;
    }
}

/* 超小屏幕优化 */
@media (max-width: 375px) {
    .specs-table-wrapper {
        margin: 0 -0.5rem;
        width: calc(100% + 1rem);
    }
    
    .specs-table {
        min-width: calc(100vw - 1rem);
    }
    
    .specs-table th,
    .specs-table td {
        padding: 0.5rem 0.375rem;
        font-size: 0.6875rem;
    }
    
    .specs-table th {
        font-size: 0.75rem;
    }
    
    .specs-table-wrapper::after {
        font-size: 0.6875rem;
        padding: 0.5rem;
        content: '← 滑动查看 →';
    }
}

/* 为技术规格添加视觉增强 */
@media (max-width: 768px) {
    /* 添加表格边框装饰 */
    .specs-table-wrapper {
        border-top: 3px solid var(--primary-color);
        border-bottom: 3px solid var(--primary-color);
    }
    
    /* 表格标题区域装饰 */
    .specs-table thead {
        position: relative;
    }
    
    .specs-table thead::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--primary-light), var(--primary-color), var(--primary-light));
        z-index: 3;
    }
    
    /* 滚动阴影效果 */
    .specs-table-wrapper.scrolling {
        box-shadow: 
            inset 10px 0 10px -10px rgba(0, 0, 0, 0.1),
            inset -10px 0 10px -10px rgba(0, 0, 0, 0.1);
    }
}

/* ========================================================================== 
   新增：应用场景卡片移动端优化
   ========================================================================== */

@media (max-width: 768px) {
    /* 应用场景网格优化 */
    .applications-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        padding: 0 0.5rem;
    }
    
    /* 应用卡片样式优化 */
    .application-card {
        padding: 1.5rem 1rem;
        text-align: center;
        border: 1px solid var(--gray-100);
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
        background: var(--white);
        border-radius: var(--radius-lg);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        min-height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }
    
    /* 卡片悬浮效果 */
    .application-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
        transform: scaleX(0);
        transition: transform 0.3s ease;
    }
    
    .application-card:hover::before {
        transform: scaleX(1);
    }
    
    .application-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    }
    
    /* 图标容器优化 */
    .application-icon {
        width: 48px;
        height: 48px;
        margin: 0 auto 1rem;
        background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
        flex-shrink: 0;
    }
    
    .application-icon::after {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
        transform: rotate(45deg);
        animation: shimmer 3s infinite;
    }
    
    @keyframes shimmer {
        0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
        100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
    }
    
    /* 图标大小调整 */
    .application-icon i {
        font-size: 1.25rem;
        color: var(--white);
    }
    
    /* 卡片标题优化 - 修正为h3 */
    .application-title {
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 0.75rem;
        line-height: 1.3;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
    }
    
    /* 卡片描述优化 */
    .application-description {
        font-size: 0.8125rem;
        line-height: 1.5;
        color: var(--text-secondary);
        margin: 0;
        text-align: center;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* 应用场景小屏幕优化 */
@media (max-width: 480px) {
    .applications-grid {
        grid-template-columns: 1fr;
        gap: 0.875rem;
        padding: 0 0.25rem;
    }
    
    .application-card {
        padding: 1.25rem 1rem;
    }
    
    .application-icon {
        width: 40px;
        height: 40px;
        margin-bottom: 0.875rem;
    }
    
    .application-icon i {
        font-size: 1.125rem;
    }
    
    .application-title {
        font-size: 0.9375rem;
        margin-bottom: 0.625rem;
        white-space: normal;
    }
    
    .application-description {
        font-size: 0.75rem;
        -webkit-line-clamp: 4;
    }
}

/* ========================================================================== 
   新增：安装指导步骤移动端优化
   ========================================================================== */

@media (max-width: 768px) {
    /* 安装步骤网格优化 */
    .installation-steps {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 0 0.5rem;
    }
    
    /* 步骤卡片样式优化 */
    .step-card {
        padding: 2rem 1.5rem 1.5rem;
        background: linear-gradient(135deg, var(--gray-50) 0%, var(--white) 100%);
        border: 1px solid var(--gray-100);
        border-radius: var(--radius-xl);
        position: relative;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        transition: all 0.3s ease;
    }
    
    .step-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    }
    
    /* 步骤编号优化 */
    .step-number {
        position: absolute;
        top: -18px;
        left: 1.5rem;
        width: 36px;
        height: 36px;
        background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
        color: var(--white);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 1rem;
        border: 3px solid var(--white);
        box-shadow: 0 2px 8px rgba(30, 64, 175, 0.3);
        z-index: 1;
    }
    
    /* 步骤标题优化 */
    .step-title {
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--text-primary);
        margin: 1rem 0 0.75rem;
        line-height: 1.3;
    }
    
    /* 步骤描述优化 */
    .step-card p {
        font-size: 0.9375rem;
        line-height: 1.6;
        color: var(--text-secondary);
        margin: 0;
    }
    
    /* 添加步骤连接线（仅在较大屏幕显示） */
    .step-card:not(:last-child)::after {
        content: '';
        position: absolute;
        bottom: -1.75rem;
        left: 50%;
        transform: translateX(-50%);
        width: 2px;
        height: 1.5rem;
        background: linear-gradient(to bottom, var(--primary-color), transparent);
        z-index: 0;
    }
}

/* 安装指导小屏幕优化 */
@media (max-width: 480px) {
    .installation-steps {
        gap: 1.25rem;
        padding: 0 0.25rem;
    }
    
    .step-card {
        padding: 1.75rem 1.25rem 1.25rem;
    }
    
    .step-number {
        width: 32px;
        height: 32px;
        top: -16px;
        left: 1.25rem;
        font-size: 0.875rem;
    }
    
    .step-title {
        font-size: 1rem;
        margin: 0.875rem 0 0.625rem;
    }
    
    .step-card p {
        font-size: 0.875rem;
        line-height: 1.5;
    }
    
    /* 移除连接线 */
    .step-card:not(:last-child)::after {
        display: none;
    }
}

/* ========================================================================== 
   新增：产品特点移动端优化
   ========================================================================== */

@media (max-width: 768px) {
    /* 产品特点容器优化 */
    #features .tab-content > div[style*="max-width"] {
        max-width: 100% !important;
        padding: 0 0.5rem;
    }
    
    /* 特点项目优化 */
    #features .tab-content > div > div {
        margin-bottom: 1.75rem !important;
        padding: 1.5rem !important;
        background: linear-gradient(135deg, var(--white) 0%, var(--gray-25) 100%) !important;
        border: 1px solid var(--gray-100) !important;
        border-radius: var(--radius-xl) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
        position: relative !important;
        overflow: hidden !important;
    }
    
    /* 添加左侧装饰条 */
    #features .tab-content > div > div::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: linear-gradient(to bottom, var(--primary-color), var(--primary-light));
    }
    
    /* 特点标题优化 */
    #features .tab-content h4 {
        font-size: 1.125rem !important;
        font-weight: 600 !important;
        margin-bottom: 0.875rem !important;
        color: var(--text-primary) !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.75rem !important;
    }
    
    /* 图标样式优化 */
    #features .tab-content h4 i {
        font-size: 1.25rem !important;
        color: var(--primary-color) !important;
        width: 24px !important;
        text-align: center !important;
    }
    
    /* 特点描述优化 */
    #features .tab-content p {
        font-size: 0.9375rem !important;
        line-height: 1.6 !important;
        color: var(--text-secondary) !important;
        margin-bottom: 1rem !important;
    }
    
    /* 特点列表优化 */
    #features .tab-content ul {
        list-style: none !important;
        padding-left: 0 !important;
        margin: 0 !important;
    }
    
    #features .tab-content li {
        display: flex !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
        margin-bottom: 0.75rem !important;
        padding: 0.5rem 0 !important;
        font-size: 0.875rem !important;
        line-height: 1.5 !important;
    }
    
    #features .tab-content li:last-child {
        margin-bottom: 0 !important;
    }
    
    /* 列表图标优化 */
    #features .tab-content li i {
        font-size: 0.875rem !important;
        color: var(--success-color) !important;
        margin-top: 0.125rem !important;
        flex-shrink: 0 !important;
    }
}

/* 产品特点小屏幕优化 */
@media (max-width: 480px) {
    #features .tab-content > div[style*="max-width"] {
        padding: 0 0.25rem;
    }
    
    #features .tab-content > div > div {
        margin-bottom: 1.5rem !important;
        padding: 1.25rem !important;
    }
    
    #features .tab-content h4 {
        font-size: 1rem !important;
        margin-bottom: 0.75rem !important;
        gap: 0.625rem !important;
    }
    
    #features .tab-content h4 i {
        font-size: 1.125rem !important;
        width: 20px !important;
    }
    
    #features .tab-content p {
        font-size: 0.875rem !important;
        margin-bottom: 0.875rem !important;
    }
    
    #features .tab-content li {
        font-size: 0.8125rem !important;
        gap: 0.625rem !important;
        margin-bottom: 0.625rem !important;
    }
}

/* 修复标签页导航在移动端的显示 */
@media (max-width: 768px) {
    .tab-navigation {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 0.5rem;
        padding: 0 1rem;
        margin-bottom: 2rem;
        border-bottom: none;
        background: var(--gray-50);
        border-radius: 0.75rem;
        padding: 1rem;
    }
    
    .tab-button {
        flex: 1;
        min-width: calc(50% - 0.25rem);
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
        text-align: center;
        background: var(--white);
        border: 1px solid var(--gray-200);
        border-radius: 0.5rem;
        border-bottom: 1px solid var(--gray-200) !important;
        transition: all 0.3s ease;
    }
    
    .tab-button.active {
        background: var(--primary-color);
        color: var(--white);
        border-color: var(--primary-color);
        border-bottom: 1px solid var(--primary-color) !important;
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(30, 64, 175, 0.2);
    }
    
    .tab-button:hover {
        background: var(--primary-color);
        color: var(--white);
        border-color: var(--primary-color);
        border-bottom: 1px solid var(--primary-color) !important;
    }
}

@media (max-width: 480px) {
    .tab-navigation {
        padding: 0.75rem;
    }
    
    .tab-button {
        min-width: 100%;
        font-size: 0.875rem;
        padding: 0.875rem 1rem;
    }
}

/* 修复产品图片画廊的移动端显示 */
@media (max-width: 768px) {
    .product-gallery {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
    }
    
    .main-image-container {
        order: 1;
        width: 100%;
    }
    
    .main-image {
        max-width: 100%;
        height: auto;
    }
    
    .thumbnail-gallery {
        order: 2;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        max-width: 100%;
        gap: 0.5rem;
    }
    
    .thumbnail {
        width: 60px;
        height: 60px;
        flex-shrink: 0;
    }
}

@media (max-width: 480px) {
    .product-gallery {
        padding: 0.75rem;
        gap: 0.75rem;
    }
    
    .thumbnail {
        width: 50px;
        height: 50px;
    }
    
    .thumbnail-gallery {
        gap: 0.375rem;
    }
}

/* 修复产品信息区域的移动端显示 */
@media (max-width: 768px) {
    .product-info {
        padding: 1rem;
    }
    
    .product-info h1 {
        font-size: 1.5rem;
        line-height: 1.3;
        margin-bottom: 1rem;
    }
    
    .product-meta {
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-bottom: 1rem;
    }
    
    .product-code,
    .product-status {
        font-size: 0.75rem;
        padding: 0.375rem 0.75rem;
    }
    
    .product-description {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }
    
    .product-highlights {
        justify-content: center;
        gap: 0.75rem;
        margin-bottom: 1.5rem;
    }
    
    .highlight-item {
        text-align: center;
    }
    
    .highlight-text {
        font-size: 0.875rem;
    }
    
    .cta-buttons {
        flex-direction: column;
        gap: 0.75rem;
        margin-bottom: 1.5rem;
    }
    
    .cta-buttons .btn {
        width: 100%;
        justify-content: center;
        padding: 1rem;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .product-info {
        padding: 0.75rem;
    }
    
    .product-info h1 {
        font-size: 1.375rem;
    }
    
    .product-description {
        font-size: 0.875rem;
    }
    
    .highlight-text {
        font-size: 0.75rem;
    }
}

/* 修复相关产品卡片的移动端显示 */
@media (max-width: 768px) {
    .related-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .related-card {
        margin: 0 auto;
        max-width: 400px;
    }
    
    .related-card img {
        height: 200px;
    }
    
    .related-card-content {
        padding: 1.25rem;
    }
}

@media (max-width: 480px) {
    .related-card {
        max-width: 100%;
    }
    
    .related-card img {
        height: 180px;
    }
    
    .related-card-content {
        padding: 1rem;
    }
}

/* 修复面包屑导航的移动端显示 */
@media (max-width: 768px) {
    .breadcrumb {
        padding: 80px 0 10px !important;
    }
    
    .breadcrumb div {
        padding: 80px 0 10px !important;
        font-size: 0.875rem;
    }
}

@media (max-width: 480px) {
    .breadcrumb div {
        font-size: 0.75rem;
        line-height: 1.4;
    }
}

/* 修复产品标签页内容的移动端显示 */
@media (max-width: 768px) {
    .tab-content {
        padding: 0 1rem;
    }
    
    .tab-content h3 {
        font-size: 1.375rem !important;
        margin-bottom: 1.5rem !important;
        text-align: center !important;
    }
}

@media (max-width: 480px) {
    .tab-content {
        padding: 0 0.5rem;
    }
    
    .tab-content h3 {
        font-size: 1.25rem !important;
        margin-bottom: 1.25rem !important;
    }
}

/* 修复产品特点列表的移动端显示 */
@media (max-width: 768px) {
    .features-list {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .feature-item {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 1rem;
        background: var(--gray-50);
        border-radius: 0.75rem;
        border-left: 3px solid var(--primary-color);
    }
    
    .feature-item i {
        font-size: 1.25rem;
        color: var(--primary-color);
        margin-top: 0.125rem;
        flex-shrink: 0;
    }
    
    .feature-item h4 {
        font-size: 1rem;
        margin-bottom: 0.5rem;
        color: var(--text-primary);
    }
    
    .feature-item p {
        font-size: 0.875rem;
        color: var(--text-secondary);
        margin: 0;
        line-height: 1.5;
    }
}

/* 修复联系表单的移动端显示 */
@media (max-width: 768px) {
    .contact-form {
        padding: 1.5rem;
        background: var(--white);
        border-radius: 1rem;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    }
    
    .form-row {
        flex-direction: column;
        gap: 1rem;
    }
    
    .form-group {
        margin-bottom: 1rem;
    }
    
    .form-group label {
        font-size: 0.875rem;
        margin-bottom: 0.5rem;
    }
    
    .form-group input,
    .form-group textarea {
        font-size: 1rem;
        padding: 0.875rem;
    }
    
    .form-group textarea {
        min-height: 120px;
    }
}

/* 修复页面标题的移动端显示 */
@media (max-width: 768px) {
    .page-title {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }
    
    .page-description {
        font-size: 1rem !important;
        line-height: 1.5 !important;
    }
}

@media (max-width: 480px) {
    .page-title {
        font-size: 1.75rem !important;
    }
    
    .page-description {
        font-size: 0.875rem !important;
    }
}

/* 修复产品英雄区域的移动端显示 */
@media (max-width: 768px) {
    .product-hero {
        padding: 100px 0 60px;
    }
    
    .product-hero-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

@media (max-width: 480px) {
    .product-hero {
        padding: 90px 0 40px;
    }
    
    .product-hero-content {
        gap: 1.5rem;
    }
}

/* 修复解决方案页面的移动端显示 */
@media (max-width: 768px) {
    .solutions-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .solution-card {
        padding: 1.5rem;
        text-align: center;
    }
    
    .solution-content {
        flex-direction: column !important;
        gap: 2rem;
    }
    
    .solution-content.reverse {
        flex-direction: column !important;
    }
    
    .solution-text,
    .solution-visual {
        width: 100%;
    }
    
    .solution-stats {
        flex-direction: row;
        justify-content: space-around;
        flex-wrap: wrap;
        gap: 1rem;
    }
    
    .stat-item {
        flex: 1;
        min-width: calc(33.333% - 0.5rem);
        text-align: center;
    }
}

@media (max-width: 480px) {
    .solution-card {
        padding: 1.25rem;
    }
    
    .solution-stats {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .stat-item {
        min-width: 100%;
    }
}

/* 修复时间轴的移动端显示 */
@media (max-width: 768px) {
    .timeline {
        margin-left: 20px;
    }
    
    .timeline::before {
        left: 20px;
    }
    
    .timeline-item.timeline-left,
    .timeline-item.timeline-right {
        margin-left: 40px;
    }
    
    .timeline-item.timeline-left .timeline-content,
    .timeline-item.timeline-right .timeline-content {
        margin-left: 20px;
        margin-right: 0;
    }
    
    .timeline-year {
        position: absolute;
        left: -60px;
        top: 20px;
        background: var(--primary-color);
        color: var(--white);
        padding: 0.5rem;
        border-radius: 0.5rem;
        font-size: 0.75rem;
        font-weight: 600;
        width: 50px;
        text-align: center;
    }
}

/* 提升触摸体验 */
@media (hover: none) and (pointer: coarse) {
    .btn,
    .tab-button,
    .thumbnail,
    .contact-method,
    .solution-card {
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    
    .btn:active,
    .tab-button:active,
    .thumbnail:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }
}

/* 修复产品咨询表单的移动端显示 */
@media (max-width: 768px) {
    /* 联系咨询表单区域 */
    .contact#contact-form {
        padding: var(--spacing-16) 0 !important;
    }
    
    /* 修复产品咨询区域的网格布局 */
    .contact .container > div[style*="grid-template-columns"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important;
    }
    
    /* 联系方式和咨询表单卡片 */
    .contact .container > div > div {
        width: 100% !important;
        margin-bottom: 1rem;
    }
    
    /* 联系方式卡片内的布局 */
    .contact .container div[style*="flex-direction: column"] {
        gap: 1rem !important;
    }
    
    /* 联系方式项目 */
    .contact .container div[style*="align-items: center"] {
        flex-direction: row !important;
        gap: 1rem !important;
        padding: 1rem !important;
    }
    
    /* 表单输入框 */
    .contact form input,
    .contact form textarea {
        font-size: 1rem !important;
        padding: 0.875rem !important;
        border-radius: 0.5rem !important;
    }
    
    /* 表单按钮 */
    .contact form button {
        padding: 1rem !important;
        font-size: 1rem !important;
        border-radius: 0.5rem !important;
    }
    
    /* 联系方式标题 */
    .contact h3 {
        font-size: 1.25rem !important;
        margin-bottom: 1rem !important;
        text-align: center;
    }
    
    /* 联系方式项目标题 */
    .contact h4 {
        font-size: 1rem !important;
        margin-bottom: 0.25rem !important;
    }
    
    /* 联系方式项目文本 */
    .contact p {
        font-size: 0.875rem !important;
    }
}

@media (max-width: 480px) {
    .contact#contact-form {
        padding: var(--spacing-12) 0 !important;
    }
    
    /* 进一步缩小间距 */
    .contact .container > div {
        gap: 1.5rem !important;
    }
    
    /* 联系方式卡片 */
    .contact .container > div > div {
        padding: 1.5rem !important;
        border-radius: 1rem !important;
    }
    
    /* 联系方式项目 */
    .contact .container div[style*="align-items: center"] {
        padding: 0.75rem !important;
        border-radius: 0.5rem !important;
    }
    
    /* 图标 */
    .contact i[style*="width: 40px"] {
        width: 35px !important;
        height: 35px !important;
        font-size: 0.875rem !important;
    }
    
    /* 表单项目间距 */
    .contact form > div {
        margin-bottom: 1rem !important;
    }
    
    /* 输入框 */
    .contact form input,
    .contact form textarea {
        padding: 0.75rem !important;
    }
    
    /* 文本域 */
    .contact form textarea {
        min-height: 100px !important;
    }
}

/* 修复产品详情页的联系咨询区域 */
@media (max-width: 768px) {
    /* product-detail.html 页面的联系表单 */
    .contact-content {
        flex-direction: column !important;
        gap: 2rem !important;
    }
    
    .contact-info,
    .contact-form {
        width: 100% !important;
        margin-bottom: 1rem;
    }
    
    .contact-items {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    .contact-item {
        display: flex !important;
        align-items: center !important;
        gap: 1rem !important;
        padding: 1rem !important;
        background: var(--gray-50) !important;
        border-radius: 0.75rem !important;
    }
    
    .contact-item i {
        width: 40px !important;
        height: 40px !important;
        background: var(--primary-color) !important;
        color: var(--white) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }
}

/* 修复字体在小屏幕上的可读性 */
@media (max-width: 320px) {
    .specs-table {
        min-width: 320px;
        font-size: 0.625rem;
    }
    
    .specs-table th,
    .specs-table td {
        padding: 0.375rem 0.25rem;
    }
    
    .tab-button {
        font-size: 0.75rem;
        padding: 0.75rem 0.5rem;
    }
    
    .product-info h1 {
        font-size: 1.25rem;
    }
    
    .highlight-text {
        font-size: 0.625rem;
    }
    
    /* 联系咨询区域的超小屏幕优化 */
    .contact h3 {
        font-size: 1.125rem !important;
    }
    
    .contact .container > div > div {
        padding: 1.25rem !important;
    }
    
    .contact i[style*="width: 40px"] {
        width: 30px !important;
        height: 30px !important;
        font-size: 0.75rem !important;
    }
}

/* ========================================================================== 
   新增：安全警告区域移动端优化
   ========================================================================== */

@media (max-width: 768px) {
    /* 安全警告容器优化 */
    #installation div[style*="background: var(--warning-color)"] {
        margin-top: 2rem !important;
        padding: 1.25rem !important;
        border-radius: var(--radius-lg) !important;
        background: linear-gradient(135deg, var(--warning-color) 0%, #f59e0b 100%) !important;
        border: none !important;
        box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3) !important;
    }
    
    /* 警告标题优化 */
    #installation div[style*="background: var(--warning-color)"] h4 {
        font-size: 1.125rem !important;
        margin-bottom: 1rem !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        color: var(--white) !important;
    }
    
    #installation div[style*="background: var(--warning-color)"] h4 i {
        font-size: 1.25rem !important;
        color: var(--white) !important;
    }
    
    /* 警告列表优化 */
    #installation div[style*="background: var(--warning-color)"] ul {
        list-style: none !important;
        padding-left: 0 !important;
        margin: 0 !important;
    }
    
    #installation div[style*="background: var(--warning-color)"] li {
        margin-bottom: 0.75rem !important;
        font-size: 0.9375rem !important;
        line-height: 1.5 !important;
        color: var(--white) !important;
        display: flex !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
    }
    
    #installation div[style*="background: var(--warning-color)"] li:last-child {
        margin-bottom: 0 !important;
    }
    
    #installation div[style*="background: var(--warning-color)"] li::before {
        content: '⚠️';
        flex-shrink: 0;
        margin-top: 0.125rem;
    }
}

@media (max-width: 480px) {
    #installation div[style*="background: var(--warning-color)"] {
        margin-top: 1.5rem !important;
        padding: 1rem !important;
    }
    
    #installation div[style*="background: var(--warning-color)"] h4 {
        font-size: 1rem !important;
        margin-bottom: 0.875rem !important;
    }
    
    #installation div[style*="background: var(--warning-color)"] li {
        font-size: 0.875rem !important;
        margin-bottom: 0.625rem !important;
    }
}

/* ========================================================================== 
   新增：产品标签页内容通用优化
   ========================================================================== */

@media (max-width: 768px) {
    /* 标签页内容区域优化 */
    .tab-content {
        padding: 0 1rem !important;
        animation: none !important; /* 移动端禁用动画以提升性能 */
    }
    
    /* 标签页标题优化 */
    .tab-content h3 {
        font-size: 1.5rem !important;
        margin-bottom: 2rem !important;
        text-align: center !important;
        color: var(--text-primary) !important;
        line-height: 1.3 !important;
    }
    
    /* 标签页内容间距优化 */
    .tab-content > * {
        margin-bottom: 1rem;
    }
    
    .tab-content > *:last-child {
        margin-bottom: 0;
    }
}

@media (max-width: 480px) {
    .tab-content {
        padding: 0 0.75rem !important;
    }
    
    .tab-content h3 {
        font-size: 1.375rem !important;
        margin-bottom: 1.5rem !important;
    }
}

/* ========================================================================== 
   新增：表格滚动指示器优化
   ========================================================================== */

@media (max-width: 768px) {
    /* 表格滚动指示器动画 */
    .specs-table-wrapper::after {
        animation: scrollHint 2s ease-in-out infinite;
    }
    
    @keyframes scrollHint {
        0%, 100% { opacity: 0.8; }
        50% { opacity: 0.5; }
    }
    
    /* 表格滚动时隐藏指示器 */
    .specs-table-wrapper.scrolling::after {
        opacity: 0;
        transition: opacity 0.3s ease;
    }
}

/* ========================================================================== 
   新增：优化产品高亮标签
   ========================================================================== */

@media (max-width: 768px) {
    .product-highlights {
        justify-content: center !important;
        gap: 0.75rem !important;
        margin-bottom: 1.5rem !important;
        flex-wrap: wrap !important;
    }
    
    .product-highlights .highlight-item {
        background: linear-gradient(135deg, var(--primary-50) 0%, var(--primary-25) 100%) !important;
        border: 1px solid var(--primary-200) !important;
        border-radius: var(--radius-full) !important;
        padding: 0.5rem 1rem !important;
        transition: all 0.3s ease !important;
    }
    
    .product-highlights .highlight-item:hover {
        background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%) !important;
        border-color: var(--primary-color) !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 12px rgba(30, 64, 175, 0.2) !important;
    }
    
    .product-highlights .highlight-item:hover .highlight-text {
        color: var(--white) !important;
    }
    
    .highlight-text {
        font-weight: 500 !important;
        font-size: 0.875rem !important;
        color: var(--primary-color) !important;
        line-height: 1.2 !important;
    }
}

@media (max-width: 480px) {
    .product-highlights {
        gap: 0.5rem !important;
    }
    
    .product-highlights .highlight-item {
        padding: 0.375rem 0.875rem !important;
    }
    
    .highlight-text {
        font-size: 0.8125rem !important;
    }
}

/* ========================================================================== 
   新增：产品信息按钮优化
   ========================================================================== */

@media (max-width: 768px) {
    .cta-buttons {
        flex-direction: column !important;
        gap: 1rem !important;
        margin-bottom: 2rem !important;
    }
    
    .cta-buttons .btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 1rem 1.5rem !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        border-radius: var(--radius-lg) !important;
        transition: all 0.3s ease !important;
        position: relative !important;
        overflow: hidden !important;
    }
    
    .cta-buttons .btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.5s ease;
    }
    
    .cta-buttons .btn:hover::before {
        left: 100%;
    }
}

@media (max-width: 480px) {
    .cta-buttons .btn {
        padding: 0.875rem 1.25rem !important;
        font-size: 0.9375rem !important;
    }
}

/* ========================================================================== 
   新增：滚动性能优化
   ========================================================================== */

@media (max-width: 768px) {
    /* 开启硬件加速 */
    .tab-content,
    .specs-table-wrapper,
    .application-card,
    .step-card,
    .related-card {
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        will-change: transform;
    }
    
    /* 优化触摸滚动 */
    .specs-table-wrapper {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }
    
    /* 减少不必要的重绘 */
    .application-icon::after,
    .step-card:not(:last-child)::after,
    .related-card::before {
        will-change: transform, opacity;
    }
}

/* ========================================================================== 
   新增：避免重复样式冲突
   ========================================================================== */

/* 移除原有重复的应用卡片样式 */

/* 移除原有重复的安装步骤样式 */

/* ========================================================================== 
   新增：修复首页移动端被导航栏遮挡的问题
   ========================================================================== */

/* 移动端导航栏高度和偏移修复 */
@media (max-width: 768px) {
    /* 确保页面顶部不被固定导航栏遮挡 */
    body {
        padding-top: 80px; /* 为固定导航栏留出空间 */
    }
    
    /* 调整英雄区域顶部间距 */
    .hero {
        padding-top: var(--spacing-16); /* 减少顶部内边距，因为body已经有padding-top */
        min-height: calc(100vh - 80px); /* 调整最小高度以适应导航栏 */
    }
    
    /* 确保导航栏高度一致 */
    .header {
        height: 80px; /* 明确设置导航栏高度 */
        display: flex;
        align-items: center;
    }
    
    .navbar {
        width: 100%;
        padding: var(--spacing-3) 0; /* 调整内边距 */
    }
    
    /* 确保英雄内容不被遮挡 */
    .hero-content {
        padding-top: var(--spacing-8);
        position: relative;
        z-index: 1;
    }
    
    /* 调整英雄标题位置 */
    .hero-title {
        margin-top: 0;
        line-height: 1.2;
    }
    
    /* 确保页面滚动时的正确定位 */
    html {
        scroll-padding-top: 100px; /* 为锚点链接留出空间 */
    }
}

/* 小屏幕设备额外优化 */
@media (max-width: 480px) {
    body {
        padding-top: 70px; /* 小屏幕使用更小的导航栏高度 */
    }
    
    .header {
        height: 70px;
    }
    
    .hero {
        min-height: calc(100vh - 70px);
        padding-top: var(--spacing-12);
    }
    
    .hero-content {
        padding-top: var(--spacing-6);
    }
    
    html {
        scroll-padding-top: 90px;
    }
}