/* ================= 页面横幅 (Page Banner) ================= */
	.page-banner { 
		background: linear-gradient(rgba(30, 58, 138, 0.8), rgba(30, 58, 138, 0.8)), url('../images/bg.jpg') center/cover;
		color: var(--white);
		padding: 90px 0;
		text-align: center;
	}
	.page-banner h2 { font-size: 32px; margin-bottom: 20px; font-weight: 600; }
	.breadcrumb { font-size: 14px; color: #cbd5e1; }
	.breadcrumb a { color: var(--white); }
	.breadcrumb a:hover { color: var(--accent-orange); }
		
	.catalog-content { flex: 1; }
	.content-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; padding-bottom: 15px; border-bottom: 1px solid var(--border-color); }
	.content-header h3 { font-size: 22px; color: var(--primary-blue); }
	
	/* ================= 针对详情页主图的限制 ================= */

	/* 1. 基础响应式设置（PC和手机通用） */
	#current-img {
	width: 100%;           /* 宽度尝试撑满父容器 */
	max-width: 100%;       /* 核心：确保图片绝对不会超过父容器的宽度 */
	height: auto;          /* 核心：高度自动缩放，保持图片比例，防止拉伸变形 */
	display: block;        /* 消除图片底部的微小空隙 */
	margin: 0 auto;        /* 如果容器比图片宽，让图片居中 */
	border-radius: 8px;    /* 可选：添加圆角 */
	border: 1px solid #eee; /* 可选：添加边框 */
	}

	/* 2. 针对手机端的特殊限制（Max 768px） */
	@media (max-width: 768px) {
	#current-img {
		/* 如果图片原图非常大，在手机端限制最大高度，防止占满首屏 */
		max-height: 350px; /* 您可以根据需要调整这个像素值 */
		
		/* 核心：配合 max-height 使用，确保图片在缩放时居中裁剪或完整显示 */
		object-fit: contain; /* 完整显示整张图片（推荐用于产品图） */
		/* 如果您希望图片填满区域即使裁剪一点：使用 object-fit: cover; */
		
		background-color: #f8f8f8; /* 可选：如果使用 contain，为两边的空白添加背景色 */
		padding: 10px;            /* 可选：为图片留出内边距 */
	}
	}