
.hpcp-wrap{
	--hpcp-blue:#4183B3;
	width:100%;
	font-family:Helvetica,Arial,sans-serif;
}

.hpcp-heading{
	max-width:760px;
	margin:0 auto 28px;
	text-align:center;
}

.hpcp-eyebrow{
	display:inline-flex;
	align-items:center;
	min-height:28px;
	padding:0 11px;
	border-radius:999px;
	background:#EAF3F8;
	color:var(--hpcp-blue);
	font-size:11px;
	font-weight:700;
	letter-spacing:.08em;
}

.hpcp-title{
	margin:12px 0 0;
	color:#17324D;
	font-size:34px;
	font-weight:800;
	line-height:1.08;
}

.hpcp-subtitle{
	margin:10px 0 0;
	color:#647789;
	font-size:15px;
	line-height:1.5;
}

.hpcp-grid{
	display:grid;
	grid-template-columns:repeat(4,minmax(0,1fr));
	gap:18px;
}

.hpcp-card{
	position:relative;
	display:flex;
	flex-direction:column;
	overflow:hidden;
	min-height:360px;
	border:1px solid #DDE7ED;
	border-radius:16px;
	background:#fff;
	color:#17324D!important;
	text-decoration:none!important;
	transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}

.hpcp-shadow-yes .hpcp-card{
	box-shadow:0 10px 28px rgba(27,69,98,.08);
}

.hpcp-shadow- .hpcp-card{
	box-shadow:none;
}

.hpcp-card:hover{
	transform:translateY(-4px);
	border-color:var(--hpcp-blue);
	box-shadow:0 16px 36px rgba(27,69,98,.14);
	color:#17324D!important;
}

.hpcp-image-wrap{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	height:220px;
	overflow:hidden;
	background:#F4F7F9;
}

.hpcp-image-wrap img{
	width:100%;
	height:100%;
	object-fit:cover;
	transition:transform .3s ease;
}

.hpcp-card:hover .hpcp-image-wrap img{
	transform:scale(1.045);
}

.hpcp-placeholder{
	display:flex;
	align-items:center;
	justify-content:center;
	width:72px;
	height:72px;
	border-radius:50%;
	background:#EAF3F8;
	color:var(--hpcp-blue);
	font-size:34px;
}

.hpcp-badge{
	position:absolute;
	top:12px;
	left:12px;
	z-index:2;
	display:inline-flex;
	align-items:center;
	min-height:28px;
	padding:0 10px;
	border-radius:999px;
	background:var(--hpcp-blue);
	color:#fff;
	font-size:10px;
	font-weight:700;
}

.hpcp-card-body{
	display:flex;
	flex:1;
	flex-direction:column;
	padding:18px;
}

.hpcp-card-topline{
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:12px;
}

.hpcp-card-title{
	margin:0;
	color:#17324D;
	font-size:18px;
	font-weight:700;
	line-height:1.18;
}

.hpcp-count{
	flex:0 0 auto;
	color:#7A8B99;
	font-size:10px;
	white-space:nowrap;
}

.hpcp-card-description{
	margin-top:8px;
	color:#66798A;
	font-size:12px;
	line-height:1.45;
}

.hpcp-card-price{
	margin-top:10px;
	color:var(--hpcp-blue);
	font-size:14px;
	font-weight:700;
}

.hpcp-card-link{
	display:flex;
	align-items:center;
	gap:8px;
	margin-top:auto;
	padding-top:16px;
	color:var(--hpcp-blue);
	font-size:12px;
	font-weight:700;
}

.hpcp-card-link span{
	transition:transform .2s ease;
}

.hpcp-card:hover .hpcp-card-link span{
	transform:translateX(4px);
}

@media(max-width:1024px){
	.hpcp-grid{
		grid-template-columns:repeat(2,minmax(0,1fr));
	}
}

@media(max-width:767px){
	.hpcp-heading{
		margin-bottom:18px;
		padding:0 12px;
	}

	.hpcp-title{
		font-size:26px;
	}

	.hpcp-subtitle{
		font-size:13px;
	}

	.hpcp-grid{
		grid-template-columns:repeat(2,minmax(0,1fr));
		gap:10px;
	}

	.hpcp-card{
		min-height:250px;
		border-radius:12px;
	}

	.hpcp-image-wrap{
		height:140px;
	}

	.hpcp-card-body{
		padding:12px;
	}

	.hpcp-card-topline{
		display:block;
	}

	.hpcp-card-title{
		font-size:14px;
	}

	.hpcp-count{
		display:block;
		margin-top:4px;
		font-size:9px;
	}

	.hpcp-card-description{
		font-size:10px;
	}

	.hpcp-card-price{
		font-size:12px;
	}

	.hpcp-card-link{
		padding-top:12px;
		font-size:10px;
	}
}


/* Hanlob Product Categories Pro 1.1 */
.hpcp-heading{
	margin-bottom:24px;
}

.hpcp-card{
	min-height:330px;
}

.hpcp-image-wrap{
	height:200px;
}

.hpcp-image-wrap img{
	object-fit:contain;
	object-position:50% var(--hpcp-image-y,50%);
	transition:transform .3s ease;
}

.hpcp-card:hover .hpcp-image-wrap img{
	transform:scale(1.03);
}

.hpcp-count{
	display:block;
	margin-top:5px;
	color:#7A8B99;
	font-size:10px;
}

.hpcp-card-link{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	width:100%;
	min-height:36px;
	margin-top:auto;
	padding:0 12px;
	border-radius:8px;
	background:#EEF5F9;
	color:var(--hpcp-blue);
	transition:background .2s ease,color .2s ease,transform .2s ease;
}

.hpcp-card:hover .hpcp-card-link{
	background:var(--hpcp-blue);
	color:#FFFFFF;
}

.hpcp-card-body{
	padding:16px;
}

@media(max-width:767px){
	.hpcp-heading{
		margin-bottom:16px;
	}

	.hpcp-card{
		min-height:232px;
	}

	.hpcp-image-wrap{
		height:126px;
	}

	.hpcp-card-body{
		padding:10px;
	}

	.hpcp-card-link{
		min-height:32px;
		padding:0 8px;
	}
}


/* Hanlob Product Categories Pro 1.2 */
.hpcp-heading{
	margin-bottom:18px;
}

.hpcp-title{
	font-size:40px;
}

.hpcp-card{
	min-height:315px;
}

.hpcp-image-wrap{
	height:190px;
}

.hpcp-card-body{
	padding:14px;
}

.hpcp-count{
	margin-top:4px;
	color:#6E7F8D;
	font-size:11px;
	font-weight:600;
}

.hpcp-card-description{
	margin-top:6px;
}

.hpcp-card-price{
	margin-top:8px;
}

.hpcp-card-link{
	min-height:34px;
}

.hpcp-image-wrap::after{
	content:"";
	position:absolute;
	left:10%;
	right:10%;
	bottom:8px;
	z-index:0;
	height:28px;
	border-radius:50%;
	background:#FFFFFF;
	box-shadow:0 9px 18px rgba(22,49,73,.12);
	opacity:0;
	transform:scale(.96);
	transition:opacity .2s ease,transform .2s ease;
}

.hpcp-pedestal-yes .hpcp-image-wrap::after{
	opacity:1;
}

.hpcp-image-wrap img{
	position:relative;
	z-index:1;
}

.hpcp-card:hover{
	transform:translateY(-3px);
	border-color:var(--hpcp-blue);
}

.hpcp-card:hover .hpcp-image-wrap img{
	transform:scale(1.04);
}

@media(max-width:767px){
	.hpcp-title{
		font-size:28px;
	}

	.hpcp-card{
		min-height:220px;
	}

	.hpcp-image-wrap{
		height:118px;
	}

	.hpcp-card-body{
		padding:10px;
	}

	.hpcp-count{
		font-size:9px;
	}

	.hpcp-card-link{
		min-height:30px;
	}
}

/* Hanlob Product Categories Pro 1.3 - category-first visual refresh */
.hpcp-heading{max-width:820px;margin-bottom:20px}
.hpcp-eyebrow{min-height:26px;padding:0 12px;background:#EAF3F8;font-size:10px;letter-spacing:.12em}
.hpcp-title{margin-top:10px;font-size:38px;line-height:1.05}
.hpcp-subtitle{margin-top:8px}
.hpcp-grid{align-items:stretch}
.hpcp-card{min-height:360px;border-color:#DCE7EE;border-radius:16px;background:#fff;box-shadow:0 8px 24px rgba(23,50,77,.055)}
.hpcp-image-wrap{height:238px;background:#fff}
.hpcp-image-wrap img{padding:8px;object-fit:contain}
.hpcp-card-body{padding:15px 15px 14px}
.hpcp-card-title{font-size:18px;font-weight:800;line-height:1.15}
.hpcp-card-description{margin-top:7px;min-height:34px;font-size:12px;line-height:1.4}
.hpcp-badge{min-height:26px;padding:0 11px;font-size:10px;text-transform:uppercase;letter-spacing:.025em}
.hpcp-card-link{min-height:38px;margin-top:14px;padding:0 14px;background:var(--hpcp-blue);color:#fff;font-size:12px;font-weight:700}
.hpcp-card:hover .hpcp-card-link{background:var(--hpcp-blue);color:#fff}
.hpcp-card:hover{transform:translateY(-4px);box-shadow:0 15px 34px rgba(23,50,77,.11)}
.hpcp-card:hover .hpcp-image-wrap img{transform:scale(1.035)}
@media(max-width:767px){
 .hpcp-heading{margin-bottom:14px}
 .hpcp-title{font-size:27px}
 .hpcp-subtitle{font-size:12px;line-height:1.4}
 .hpcp-grid{gap:10px}
 .hpcp-card{min-height:244px;border-radius:12px}
 .hpcp-image-wrap{height:132px}
 .hpcp-image-wrap img{padding:5px}
 .hpcp-card-body{padding:10px}
 .hpcp-card-title{font-size:14px}
 .hpcp-card-description{min-height:28px;margin-top:5px;font-size:9.5px}
 .hpcp-badge{top:8px;left:8px;min-height:21px;padding:0 7px;font-size:8px}
 .hpcp-card-link{min-height:31px;margin-top:9px;padding:0 7px;font-size:9.5px}
}
