/* f:/WP-B2B-Products-Management/hilighting/assets/css/hilighting-frontend.css */

/* ======= 1. 产品图集 (Gallery) ======= */
.hl-product-gallery {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.hl-main-image img {
	width: 100%;
	height: auto;
	object-fit: cover;
	display: block;
	border-radius: 8px;
}
.hl-thumbnails {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	padding-bottom: 8px; /* 给滚动条预留空间 */
	/* 平滑滚动及隐藏原生滚动条(部分浏览器兼容) */
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin; 
}
.hl-thumb {
	width: 80px;
	flex-shrink: 0;
	cursor: pointer;
	border: 2px solid transparent;
	border-radius: 4px;
	overflow: hidden;
	transition: border-color 0.3s ease;
}
.hl-thumb:hover {
	border-color: #666;
}
.hl-thumb img {
	width: 100%;
	height: auto;
	display: block;
}

/* ======= 2. 产品属性表格 (Attributes) ======= */
.hl-attributes-wrapper {
	border: 1px solid #eaeaea;
	border-radius: 4px;
	overflow: hidden;
}
.hl-attributes-table {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
	table-layout: fixed; /* 固定布局，防止长单词撑爆表格 */
}
.hl-attributes-table th, 
.hl-attributes-table td {
	padding: 12px 15px;
	word-wrap: break-word; /* 允许折行 */
	line-height: 1.5;
}
.hl-attributes-table th {
	width: 35%; /* PC端占据35%宽度 */
	color: #333;
	font-weight: 600;
	border-right: 1px solid #eaeaea;
}
.hl-attributes-table tr {
	border-bottom: 1px solid #eaeaea;
}
.hl-attributes-table tr:nth-child(even) {
	background-color: #fcfcfc;
}

/* ======= 3. SKU 对比表 (SKUs) ======= */
.hl-skus-wrapper {
	overflow-x: auto;
	width: 100%;
	-webkit-overflow-scrolling: touch; /* 移动端平滑滚动 */
	border: 1px solid #eaeaea;
	border-radius: 4px;
}
.hl-skus-table {
	width: 100%;
	border-collapse: collapse;
	/* 保留最小宽度，使其在手机上不至于被挤压得无法阅读而是开启横向滚动 */
	min-width: 600px; 
	text-align: left;
}
.hl-skus-table thead {
	background-color: #f1f1f1;
	border-bottom: 2px solid #ddd;
}
.hl-skus-table th, 
.hl-skus-table td {
	padding: 12px 15px;
	line-height: 1.5;
}
.hl-skus-table tbody tr {
	border-bottom: 1px solid #eee;
}

/* ======= 移动端媒体查询 (Mobile & Tablet) ======= */
@media (max-width: 767px) {
	/* 属性表格：缩小缩进与字体排版 */
	.hl-attributes-table th, 
	.hl-attributes-table td {
		padding: 10px;
		font-size: 14px;
	}
	.hl-attributes-table th {
		width: 40%; /* 移动端让出一点空间给数值 */
	}

	/* 缩略图：适当减小以屏幕呈现更多 */
	.hl-thumb {
		width: 65px;
	}
}