/* 标签按钮样式 */
.container{margin: 3% 0 0;}
.tab-buttons {width: 260px; display: flex; justify-content: center; margin: 0 auto 40px; padding: 5px; gap: 10px; background-color: #f3f4f6; border-radius: 10px;}
.tab-btn {padding: 10px 24px; border: 2px solid #165DFF;  background-color: white; color: #165DFF; border-radius: 4px;
font-size: 16px; cursor: pointer; transition: all 0.3s ease;
font-weight: 500;}
.tab-btn:nth-child(2) {border: 2px solid #16A24A; color: #16A24A;}
.tab-btn:hover {background-color: #f0f7ff;}
.tab-btn.active {background-color: #165DFF; color: white;}
.tab-btn:nth-child(2).active {background-color: #16A24A; border: 2px solid #16A24A; color: white;}

/* 产品容器样式 */
.products-container {position: relative;}
.tab-content {display: none;}
.tab-content.active {display: flex; gap: 24px;  justify-content: center;  flex-wrap: wrap;}

/* 产品卡片样式 */
.product-card {width:20%; background-color: white;    border-radius: 8px;  overflow: hidden;  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.product-card img { width: 100%; height: 220px; object-fit: cover; display: block;}
.product-card h3 {font-size: 20px; margin: 20px 20px 12px;    color: #333;    font-weight: 600;}
.product-card p {margin: 0 20px 20px;    color: #666;    font-size: 15px;    line-height: 1.6;}

.details-link {display: inline-flex;    align-items: center;    margin: 0 20px 20px;    color: #165DFF;    text-decoration: none;    font-weight: 500;    transition: color 0.3s ease;}
.details-link:hover {color: #0e43cc;}
.details-link span {margin-left: 5px; transition: transform 0.3s ease;}

.details-link:hover span {
    transform: translateX(3px);
}

/* 响应式设计 */
@media (max-width: 768px) {
.tab-content.active {align-items: center;}
.product-card {width: 46%;max-width: 400px;}
.product-card h3{font-size: 1.57rem;}
.product-card p{display: none;}
.tab-buttons {align-items: center;}
.tab-btn {width: 50%;}
.product-card img{width: 100%; height: auto;}
}

@media (max-width: 480px) {
.tab-buttons {margin-bottom: 20px;}
}