/* ============================================================
   Product Page & Contact Page Specific Styles
   ============================================================ */

/* --- 1. 产品中心布局 (Catalog) --- */
.catalog-layout { display: flex; gap: 40px; padding: 60px 0; }

/* 侧边栏小组件 */
.sidebar { width: 280px; flex-shrink: 0; }
.sidebar-widget { border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; margin-bottom: 30px; background: var(--white); }
.widget-title { background: var(--bg-light); color: var(--primary-blue); padding: 15px 20px; font-size: 16px; font-weight: 700; border-bottom: 1px solid var(--border-color); }

.category-list li { border-bottom: 1px solid var(--border-color); }
.category-list li:last-child { border-bottom: none; }
.category-list a { display: flex; justify-content: space-between; padding: 12px 20px; color: var(--text-main); font-size: 14px; }
.category-list a:hover, .category-list a.active { background: var(--primary-blue); color: var(--white); padding-left: 25px; }

/* 产品内容区头部 */
.content-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; padding-bottom: 15px; border-bottom: 2px solid var(--bg-light); }
.content-header h3 { font-size: 22px; color: var(--primary-blue); }
.content-header a { text-decoration: none; transition: var(--transition); color: var(--primary-blue); }

/* 产品网格补丁 */
.catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 25px; }
.catalog-card { border: 1px solid var(--border-color); 

/* --- 产品详情页专用 --- */
.breadcrumb-nav { background: var(--bg-light); padding: 12px 0; font-size: 13px; color: var(--text-light); margin-bottom: 40px; }
.breadcrumb-nav a { color: var(--text-main); margin: 0 5px; }

.detail-wrapper { padding-bottom: 80px; }
.product-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; margin-bottom: 60px; }

/* 图集 */
.product-gallery .main-img { border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; height: 400px; display: flex; align-items: center; justify-content: center; }
.product-gallery .main-img img { max-width: 100%; max-height: 100%; transition: transform 0.5s; }
.product-gallery .main-img:hover img { transform: scale(1.1); }
.thumb-list { display: flex; gap: 15px; margin-top: 15px; }
.thumb-list img { width: 80px; height: 80px; border: 1px solid var(--border-color); border-radius: 4px; cursor: pointer; opacity: 0.6; }
.thumb-list img.active { border-color: var(--accent-orange); opacity: 1; border-width: 2px; }

/* 信息面板 */
.detail-title { font-size: 28px; color: var(--primary-blue); margin-bottom: 10px; }
.detail-subtitle { color: var(--text-light); margin-bottom: 30px; font-size: 16px; }
.quick-specs { background: var(--bg-light); padding: 25px; border-radius: 8px; margin-bottom: 35px; }
.quick-specs li { margin-bottom: 12px; font-size: 15px; border-bottom: 1px dashed #d1d5db; padding-bottom: 8px; }
.quick-specs li span { font-weight: bold; color: var(--primary-blue); width: 100px; display: inline-block; }
.action-btns { display: flex; gap: 15px; }

/* 选项卡与表格 */
.detail-tabs { margin-top: 80px; }
.tab-header { border-bottom: 2px solid var(--border-color); margin-bottom: 30px; }
.tab-header span { display: inline-block; padding: 15px 30px; font-weight: bold; cursor: pointer; border-bottom: 3px solid transparent; }
.tab-header span.active { color: var(--primary-blue); border-bottom-color: var(--primary-blue); }

.spec-table { width: 100%; border-collapse: collapse; margin-top: 20px; }
.spec-table th, .spec-table td { border: 1px solid var(--border-color); padding: 15px; text-align: left; }
.spec-table th { background: var(--bg-light); color: var(--primary-blue); width: 200px; }

.advantage-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px; }
.adv-item { padding: 20px; border: 1px solid var(--border-color); border-radius: 8px; text-align: center; }
.adv-item i { font-size: 30px; color: var(--accent-orange); margin-bottom: 15px; }

/* 分页控件 */
.pagination { display: flex; justify-content: center; gap: 10px; margin-top: 50px; }
.pagination a { padding: 8px 15px; border: 1px solid var(--border-color); color: var(--text-main); border-radius: 4px; transition: 0.3s; }
.pagination a.active, .pagination a:hover { background: var(--primary-blue); color: var(--white); border-color: var(--primary-blue); }
		
@media (max-width: 768px) {
    .product-intro, .advantage-list { grid-template-columns: 1fr; }
    .action-btns { flex-direction: column; }
}