:root {
            --primary-blue: #1A73E8;
            --border-color: #E5E7EB;
        }

        /* 顶部导航 */
        .page-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 18%;
            border-bottom: 1px solid var(--border-color);
        }
        .category-title {
            font-size: 20px;
            font-weight: bold;
            color: #333;
        }
        .breadcrumb {
            color: #666;
            font-size: 14px;
        }

        /* 主体内容 */
        .main-content {
            display: flex;
            gap: 40px;
            padding: 30px 17%;
            max-width: 1200px;
            margin: 0 auto;
        }

        /* 产品图区域 */
        .product-gallery {
            flex: 0 0 400px 20%;
        }
       .main-image {
    width: 400px;/* 固定宽 */
    height: 300px; /* 固定高 */
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}
        .main-image img {
            width: 100%;
            height: auto;
            display: block;
            max-width: 400px;
        }
        .thumbnail-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 8px;
        }
        .thumbnail {
            width: 94px;
            height: 70px;
            background-size: cover;
            border: 2px solid transparent;
            border-radius: 4px;
            cursor: pointer;
        }
        .thumbnail.active {
            border-color: var(--primary-blue);
        }

        /* 产品信息 */
        .product-info {
            flex: 1;
        }
        .product-title {
            font-size: 35px;
            color: #333;
            margin: 0 0 25px 0;
        }
        .summary-box {
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 25px;
        }
        .summary-box h3 {
            color: #333;
            font-size: 18px;
            margin: 0 0 15px 0;
        }
        .summary-box p {
            color: #666;
            line-height: 1.8;
            margin: 0;
            font-size: 15px;
        }
  /* 按钮容器 */
        .button-group {
            display: flex;
            gap: 25px;
        }
  /* 按钮组 */
        .btn-primary {
            background: var(--primary-blue);
            color: white;
            padding: 12px 40px;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            gap: 40px;
            margin-left: 50px;
            margin-right: 50px
            
        }
        .btn-secondary {
            background: white;
            color: var(--primary-blue);
            border: 1px solid var(--primary-blue);
            padding: 12px 40px;
            border-radius: 10px;
            cursor: pointer;
        }


/* 分割线容器 */
.detail-header {
   position: relative;
    margin: 30px 18%;
padding: 0 0px;
}

/* 黑色标签按钮 */
.detail-tab {
   display: inline-block;
    background: #000;
    color: #fff;
    padding: 8px 25px;
    border-radius: 4px;
    font-size: 16px;
    height: 25px; /* 固定高度 */
    line-height: 1.5;
}

/* 灰色分割线 */
.detail-divider {
    border-top: 40px solid #666;
    margin-top: -40px;
}

/* 内容区域 */
.detail-content {
margin: 30px 18%;
font-family: "微软雅黑", Microsoft YaHei; /* 统一字体 */
}


/* 以下是产品特点模块 *//* 以下是产品特点模块 */
/* 主容器样式 */
.features-container {
    max-width: 1200px;
    margin: 3rem auto;
    padding: 2rem;
    background-color: #f8f9fa;
}

/* 网格布局优化 */
.features-grid {
  display: grid;
    grid-template-columns: repeat(4, 280px); /* 严格固定卡片宽度 */
    justify-content: center; /* 水平居中排列 */
    gap: 20px; /* 固定间距 */
    max-width: 1240px; /* (280 * 4)+(20 * 3)=1180 → 保留安全边距 */
    margin: 0 auto;
    padding: 0 10px; /* 防止屏幕边缘挤压 */
    justify-items: center;
}

/* 卡片布局调整 */
.feature-card {
    width: 90%; /* 自动适应容器*/
    min-height: 160px;
    padding: 20px;
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    transition: all 0.3s ease;
    display: block; /* 改为块级布局*/
}

/* 标题行优化 */
.feature-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px; /* 增大下间距*/
    position: relative;
    padding-left: 38px; /* 给图标预留空间*/
    transform: translateX(12px); /* 微调整体位置 */
}

/* 图标定位调整 */
.feature-icon {
    position: absolute; /* 绝对定位*/
    left: 0;
    font-size: 28px; /* 匹配图片尺寸*/
    color: #FF6B00;
    width: 32px;
    height: 32px;
    margin-right: 15px;
    flex-shrink: 0;
}

/* 标题装饰线 */
.feature-header h3 {
    margin: 0;
    line-height: 1.3;
    color: #333;
    font-size: 18px;
    position: relative;
    padding-left: 15px; /* 装饰线空间*/
    left: -4px; /* 补偿盾牌图标的视觉重量 */
}

.feature-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 18px;
    background: #FF6B00; /* 橙色装饰线*/
}

/* 内容优化 */
.feature-content p {
    margin: 0;
    color: #666;
    font-size: 14px;
    line-height: 1.6;
    text-align: justify; /* 两端对齐*/
    hyphens: auto; /*自动换行*/
}

/* 悬停效果优化 */
.feature-card:hover {
    transform: translateY(-3px); /* 微调浮动幅度*/
    box-shadow: 0 8px 20px rgba(255,107,0,0.12); /* 橙色系阴影*/
    background: #FFF9F5;
}
/* 响应式处理 */
@media (max-width: 768px) {
    .features-grid {
   grid-template-columns: repeat(2, calc(50% - 10px));
    }
}


.full-width-bg {
    width: 100%;
    background-color: #f8f9fa;
    padding: 2rem 0;
}