/* ========== 产品列表页局部样式 ========== */
.prod-hero {
    background: linear-gradient(135deg, #0a1a2e 0%, #1a3a5c 100%);
    padding: 60px 0 50px;
    text-align: center;
    color: #fff;
}
.prod-hero h1 { font-size: 32px; font-weight: 700; margin-bottom: 12px; }
.prod-hero p { font-size: 15px; opacity: .8; max-width: 600px; margin: 0 auto; line-height: 1.8; }
.prod-list-section { padding: 40px 0 60px; background: #f5f7fa; }
.prod-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.prod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.prod-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    transition: all .3s ease;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: block;
}
.prod-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.prod-card-img {
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: #f0f0f0;
    position: relative;
}
.prod-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.prod-card:hover .prod-card-img img { transform: scale(1.05); }
.prod-card-badge {
    position: absolute; top: 10px; right: 10px;
    background: rgba(0,0,0,.6); color: #fff;
    font-size: 12px; padding: 3px 10px; border-radius: 12px;
}
.prod-card-body { padding: 16px 18px; }
.prod-card-title {
    font-size: 16px; font-weight: 600; color: #2c3e50;
    margin-bottom: 8px; line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.prod-card-summary {
    font-size: 13px; color: #888; line-height: 1.6;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; margin-bottom: 10px;
}
.prod-card-meta { display: flex; justify-content: space-between; align-items: center; }
.prod-card-date { font-size: 12px; color: #bbb; }
.prod-card-more { font-size: 13px; color: #1e5fbf; text-decoration: none; }
.prod-card-more:hover { text-decoration: underline; }
.prod-empty { text-align: center; padding: 80px 20px; color: #999; }
.prod-empty p { font-size: 16px; margin-bottom: 8px; }
.prod-pagination { text-align: center; margin-top: 40px; }
.prod-pagination a, .prod-pagination span {
    display: inline-block; padding: 8px 14px; margin: 0 3px;
    border: 1px solid #e1e8ed; border-radius: 6px;
    font-size: 14px; color: #666; text-decoration: none;
}
.prod-pagination .current { background: #1e5fbf; color: #fff; border-color: #1e5fbf; }
.prod-pagination a:hover { border-color: #1e5fbf; color: #1e5fbf; }
@media (max-width: 900px) { .prod-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .prod-grid { grid-template-columns: 1fr; } .prod-hero h1 { font-size: 24px; } }

/* ========== 产品详情页局部样式 ========== */
.prod-detail-hero {
    background: linear-gradient(135deg, #0a1a2e 0%, #1a3a5c 100%);
    padding: 40px 0 36px;
    text-align: center;
    color: #fff;
}
.prod-detail-hero h1 { font-size: 28px; font-weight: 700; margin-bottom: 10px; }
.prod-detail-hero .prod-meta { font-size: 13px; opacity: .7; }
.prod-detail-hero .prod-meta span { margin: 0 12px; }
.prod-detail-section { padding: 40px 0 60px; background: #f5f7fa; }
.prod-detail-container { max-width: 1000px; margin: 0 auto; padding: 0 20px; }

/* 产品图片网格 */
.prod-thumb-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 30px;
}
.prod-thumb-item {
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    background: #f0f0f0;
    transition: all .3s ease;
}
.prod-thumb-item:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0,0,0,.15); }
.prod-thumb-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.prod-thumb-item:hover img { transform: scale(1.08); }
.prod-thumb-num {
    position: absolute; bottom: 6px; right: 6px;
    background: rgba(0,0,0,.6); color: #fff;
    font-size: 11px; padding: 2px 8px; border-radius: 10px;
}

/* 内容区 */
.prod-content-box {
    background: #fff;
    border-radius: 10px;
    padding: 30px 35px;
    box-shadow: 0 2px 12px rgba(0,0,0,.05);
    margin-bottom: 30px;
}
.prod-content-box .prod-content { font-size: 15px; line-height: 2; color: #333; }
.prod-content img { max-width: 100%; border-radius: 6px; margin: 10px 0; }
.prod-content p { margin-bottom: 14px; }
.prod-content h2, .prod-content h3 { margin: 20px 0 12px; color: #2c3e50; }

/* 上一个/下一个 */
.prod-prev-next {
    display: flex; justify-content: space-between; gap: 20px;
    margin-bottom: 40px;
}
.prod-prev-next a {
    flex: 1; padding: 14px 20px; background: #fff;
    border-radius: 8px; text-decoration: none; color: #555;
    font-size: 14px; border: 1px solid #e1e8ed;
    transition: all .25s ease;
}
.prod-prev-next a:hover { border-color: #1e5fbf; color: #1e5fbf; box-shadow: 0 2px 8px rgba(30,95,191,.1); }
.prod-prev-next .pn-label { display: block; font-size: 12px; color: #bbb; margin-bottom: 4px; }
.prod-prev-next .pn-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prod-prev-next .prod-pn-next { text-align: right; }

/* 相关产品推荐 */
.prod-recommend-title { font-size: 20px; font-weight: 600; color: #2c3e50; margin-bottom: 20px; }
.prod-recommend-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.prod-rec-card {
    background: #fff; border-radius: 8px; overflow: hidden;
    text-decoration: none; color: inherit;
    transition: all .3s ease; box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.prod-rec-card:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0,0,0,.1); }
.prod-rec-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.prod-rec-card .prod-rec-body { padding: 12px 14px; }
.prod-rec-card h4 { font-size: 14px; color: #2c3e50; line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }

@media (max-width: 900px) {
    .prod-thumb-grid { grid-template-columns: repeat(3, 1fr); }
    .prod-recommend-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .prod-thumb-grid { grid-template-columns: repeat(2, 1fr); }
    .prod-recommend-grid { grid-template-columns: 1fr; }
    .prod-prev-next { flex-direction: column; }
    .prod-content-box { padding: 20px; }
    .prod-detail-hero h1 { font-size: 22px; }
}