/* ============================================================
   product_v8.css — 产品列表页重做 (v8) · 大厂官网风
   布局：工具条(标题+搜索) / 分类chips / 全宽产品网格 / 分页
   ============================================================ */

:root{
	--pl8-blue:#0C60B4;
	--pl8-blue2:#0088D8;
	--pl8-ink:#17233D;
	--pl8-gray:#5E6B85;
	--pl8-line:#E4EAF4;
	--pl8-tint:#EEF4FC;
}

/* ---------- 工具条：标题 + 搜索 ---------- */
.pl8-toolbar{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:32px;
	padding:44px 0 26px;
}
.pl8-tt h2{
	font-size:30px;
	font-weight:700;
	color:var(--pl8-ink);
	margin:0;
	line-height:1.3;
}
.pl8-count{
	display:inline-block;
	margin-left:12px;
	font-size:14px;
	color:var(--pl8-gray);
	font-weight:400;
}
.pl8-search{
	position:relative;
	width:380px;
	max-width:100%;
	flex:0 0 auto;
}
.pl8-search input[type="text"]{
	width:100%;
	height:48px;
	padding:0 96px 0 20px;
	border:1px solid var(--pl8-line);
	border-radius:999px;
	background:#fff;
	font-size:14px;
	color:var(--pl8-ink);
	outline:none;
	transition:border-color .3s ease, box-shadow .3s ease;
	box-sizing:border-box;
}
.pl8-search input[type="text"]:focus{
	border-color:var(--pl8-blue);
	box-shadow:0 0 0 3px rgba(12,96,180,.12);
}
.pl8-search input[type="text"]::placeholder{ color:#A8B3C7; }
.pl8-search button{
	position:absolute;
	right:5px;
	top:5px;
	width:80px;
	height:38px;
	border:0;
	border-radius:999px;
	background:linear-gradient(135deg,var(--pl8-blue),var(--pl8-blue2));
	color:#fff;
	font-size:14px;
	cursor:pointer;
	transition:filter .3s ease;
}
.pl8-search button:hover{ filter:brightness(1.1); }

/* ---------- 分类 chips ---------- */
.pl8-chips{
	display:flex;
	flex-wrap:wrap;
	gap:12px;
	padding-bottom:34px;
}
.pl8-chip{
	display:inline-flex;
	align-items:center;
	height:38px;
	padding:0 22px;
	border:1px solid var(--pl8-line);
	border-radius:999px;
	background:#fff;
	font-size:14px;
	color:var(--pl8-gray);
	text-decoration:none;
	transition:all .3s ease;
}
.pl8-chip:hover{
	border-color:var(--pl8-blue);
	color:var(--pl8-blue);
}
.pl8-chip.on{
	background:linear-gradient(135deg,var(--pl8-blue),var(--pl8-blue2));
	border-color:transparent;
	color:#fff;
}

/* ---------- 产品网格 ---------- */
.pl8-grid{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:24px;
}
.pl8-card{
	display:block;
	background:#fff;
	border:1px solid var(--pl8-line);
	border-radius:12px;
	overflow:hidden;
	text-decoration:none;
	transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.pl8-card:hover{
	transform:translateY(-6px);
	border-color:rgba(12,96,180,.45);
	box-shadow:0 20px 44px rgba(13,31,74,.13);
}
.pl8-pic{
	aspect-ratio:1/1;
	background:var(--pl8-tint);
	overflow:hidden;
}
.pl8-pic img{
	width:100%;
	height:100%;
	object-fit:cover;
	transition:transform .4s ease;
}
.pl8-card:hover .pl8-pic img{ transform:scale(1.04); }
.pl8-txt{
	padding:16px 18px 18px;
	border-top:1px solid var(--pl8-line);
}
.pl8-t{
	font-size:16px;
	font-weight:600;
	color:var(--pl8-ink);
	margin:0 0 6px;
	line-height:1.45;
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:1;
	overflow:hidden;
}
.pl8-card:hover .pl8-t{ color:var(--pl8-blue); }
.pl8-xh{
	display:inline-block;
	font-size:13px;
	color:var(--pl8-gray);
	letter-spacing:.5px;
}

/* ---------- 空状态 ---------- */
.pl8-empty{
	padding:80px 0;
	text-align:center;
	color:var(--pl8-gray);
	font-size:15px;
}

/* ---------- 分页 ---------- */
.pl8-pages{
	display:flex;
	justify-content:center;
	gap:8px;
	flex-wrap:wrap;
	padding:44px 0 72px;
}
.pl8-pages a,
.pl8-pages span{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:38px;
	height:38px;
	padding:0 6px;
	border:1px solid var(--pl8-line);
	border-radius:8px;
	background:#fff;
	font-size:15px;
	color:var(--pl8-gray);
	text-decoration:none;
	box-sizing:border-box;
	transition:all .3s ease;
}
.pl8-pages a:hover{
	border-color:var(--pl8-blue);
	color:var(--pl8-blue);
}
.pl8-pages a.on,
.pl8-pages span.on{
	background:linear-gradient(135deg,var(--pl8-blue),var(--pl8-blue2));
	border-color:transparent;
	color:#fff;
}

/* ---------- 响应式 ---------- */
@media (max-width:1200px){
	.pl8-grid{ grid-template-columns:repeat(3,1fr); }
	.pl8-tt h2{ font-size:26px; }
}
@media (max-width:900px){
	.pl8-grid{ grid-template-columns:repeat(2,1fr); }
	.pl8-toolbar{
		flex-direction:column;
		align-items:stretch;
		gap:20px;
		padding:34px 0 22px;
	}
	.pl8-search{ width:100%; }
}
@media (max-width:600px){
	.pl8-grid{ gap:14px; }
	.pl8-chip{ height:34px; padding:0 16px; font-size:13px; }
	.pl8-txt{ padding:12px 12px 14px; }
	.pl8-t{ font-size:14px; }
}
/* 滚动分批加载：隐藏未到批次的产品卡（桌面与移动通用，不可放进 max-width:600px 媒体查询） */
.pl8-grid .pl8-card.np-hide { display: none; }

/* 产品卡入场动画统一改为 60px 小位移（含首屏 WOW 触发的），避免整卡高度位移扫入页脚 */
.pl8-page .pl8-card.animated{ animation-name:npUpIn; }
/* 正文与页脚留白 */
.pl8-page > .wrap2{ padding-bottom:60px; }