/* ============================================================
   ECOMREALITY CATEGORY LAYOUT
   ============================================================ */

.ercl-page {
	--ercl-navy:#16085a;
	--ercl-blue:#2f63ff;
	--ercl-blue-dark:#2456ea;
	--ercl-blue-soft:#edf3ff;
	--ercl-text:#5b6371;
	--ercl-muted:#8b929d;
	--ercl-border:#e3e9ef;
	--ercl-bg:#f5f9fc;
	--ercl-white:#fff;
	font-family:inherit;
}

.ercl-page *,
.ercl-page *::before,
.ercl-page *::after {
	box-sizing:border-box;
}

.ercl-shell {
	width:min(1320px, calc(100% - 48px));
	margin:0 auto;
}

/* HERO */

.ercl-hero {
	position:relative;
	overflow:hidden;
	padding:74px 24px 78px;
	background:
		radial-gradient(circle at 82% 10%, rgba(255,255,255,.16) 0 110px, transparent 111px),
		radial-gradient(circle at 94% 65%, rgba(255,255,255,.12) 0 72px, transparent 73px),
		linear-gradient(120deg,#334ee9 0%,#268fef 100%);
	color:#fff;
}

.ercl-hero::after {
	content:"";
	position:absolute;
	left:-3%;
	right:-3%;
	bottom:-24px;
	height:48px;
	background:#f5f9fc;
	border-radius:50% 50% 0 0 / 100% 100% 0 0;
}

.ercl-hero-copy {
	position:relative;
	z-index:1;
	max-width:850px;
}

.ercl-eyebrow {
	display:block;
	margin-bottom:12px;
	font-size:11px;
	line-height:1;
	font-weight:800;
	letter-spacing:1.15px;
	text-transform:uppercase;
	color:rgba(255,255,255,.82);
}

.ercl-title {
	margin:0 0 14px !important;
	padding:0 !important;
	font-size:clamp(36px,4vw,58px);
	line-height:1.04;
	font-weight:800;
	letter-spacing:-1.2px;
	color:#fff;
}

.ercl-description {
	max-width:780px;
	margin:0 !important;
	font-size:17px;
	line-height:1.62;
	color:rgba(255,255,255,.91);
}

/* LIBRARY */

.ercl-library {
	padding:44px 24px 78px;
	background:var(--ercl-bg);
}

.ercl-filter-card {
	padding:30px;
	margin-bottom:30px;
	background:#fff;
	border:1px solid rgba(22,8,90,.07);
	border-radius:22px;
	box-shadow:0 7px 22px rgba(24,35,65,.035), 0 20px 55px rgba(24,35,65,.025);
}

.ercl-filter-heading {
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	gap:24px;
	margin-bottom:22px;
}

.ercl-filter-kicker,
.ercl-brand-caption {
	display:block;
	margin-bottom:8px;
	font-size:10.5px;
	line-height:1;
	font-weight:800;
	text-transform:uppercase;
	letter-spacing:.9px;
	color:var(--ercl-blue);
}

.ercl-filter-heading h2 {
	margin:0 0 7px !important;
	padding:0 !important;
	font-size:28px;
	line-height:1.15;
	font-weight:760;
	letter-spacing:-.45px;
	color:var(--ercl-navy);
}

.ercl-filter-heading p {
	max-width:760px;
	margin:0 !important;
	font-size:14.5px;
	line-height:1.55;
	color:var(--ercl-text);
}

.ercl-reset-top {
	flex:0 0 auto;
	color:var(--ercl-blue) !important;
	font-size:12.5px;
	font-weight:750;
	text-decoration:none !important;
}

.ercl-controls {
	display:grid;
	grid-template-columns:minmax(240px,360px) minmax(190px,240px) 110px;
	gap:12px;
	margin:0;
}

.ercl-controls select,
.ercl-controls button {
	height:50px;
	border-radius:12px;
	font:inherit;
}

.ercl-controls select {
	width:100%;
	padding:0 14px;
	background:#fafbfd;
	border:1px solid #dde4eb;
	color:var(--ercl-navy);
	font-size:13.5px;
	outline:none;
	cursor:pointer;
}

.ercl-controls select:focus {
	background:#fff;
	border-color:rgba(47,99,255,.52);
	box-shadow:0 0 0 3px rgba(47,99,255,.08);
}

.ercl-controls button {
	padding:0 18px;
	background:var(--ercl-navy);
	border:0;
	color:#fff;
	font-size:12px;
	font-weight:750;
	cursor:pointer;
	transition:.2s ease;
}

.ercl-controls button:hover {
	transform:translateY(-1px);
	background:#251078;
}

.ercl-brand-block {
	margin-top:20px;
}

.ercl-chips {
	display:flex;
	flex-wrap:wrap;
	gap:8px;
}

.ercl-chip {
	display:inline-flex;
	align-items:center;
	min-height:35px;
	padding:0 13px;
	border:1px solid #e5eaf0;
	border-radius:9px;
	background:#f6f8fb;
	color:#515865 !important;
	font-size:11.5px;
	font-weight:650;
	text-decoration:none !important;
	transition:.18s ease;
}

.ercl-chip:hover {
	transform:translateY(-1px);
	background:#fff;
	border-color:rgba(47,99,255,.25);
	color:var(--ercl-blue) !important;
}

.ercl-chip.is-active {
	background:var(--ercl-blue);
	border-color:var(--ercl-blue);
	color:#fff !important;
}

/* RESULTS */

.ercl-results-bar {
	display:flex;
	align-items:center;
	justify-content:space-between;
	margin-bottom:19px;
}

.ercl-results-count {
	font-size:14px;
	font-weight:700;
	color:var(--ercl-navy);
}

.ercl-results-count span {
	color:var(--ercl-muted);
	font-weight:500;
}

/* CARDS */

.ercl-grid {
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:24px;
}

.ercl-card {
	min-width:0;
	margin:0 !important;
	overflow:hidden;
	background:#fff;
	border:1px solid var(--ercl-border);
	border-radius:18px;
	box-shadow:0 3px 10px rgba(20,30,60,.025), 0 12px 30px rgba(20,30,60,.025);
	transition:.22s ease;
}

.ercl-card:hover {
	transform:translateY(-5px);
	border-color:rgba(47,99,255,.23);
	box-shadow:0 9px 23px rgba(20,30,60,.055), 0 20px 40px rgba(20,30,60,.045);
}

.ercl-card-link {
	display:flex;
	flex-direction:column;
	height:100%;
	color:inherit !important;
	text-decoration:none !important;
}

.ercl-media {
	position:relative;
	aspect-ratio:16/9;
	overflow:hidden;
	background:#edf2f7;
}

.ercl-image {
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	transition:transform .35s ease;
}

.ercl-card:hover .ercl-image {
	transform:scale(1.025);
}

.ercl-no-image {
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	height:100%;
	padding:28px;
	background:
		radial-gradient(circle at 20% 20%,rgba(47,99,255,.18),transparent 40%),
		linear-gradient(135deg,#f3f7fc,#e8eef7);
	text-align:center;
	color:var(--ercl-navy);
	font-size:22px;
	font-weight:800;
}

.ercl-category-badge {
	position:absolute;
	left:15px;
	bottom:14px;
	display:inline-flex;
	align-items:center;
	min-height:28px;
	padding:0 10px;
	border-radius:8px;
	background:rgba(255,255,255,.95);
	box-shadow:0 3px 10px rgba(20,30,60,.08);
	color:var(--ercl-blue);
	font-size:9px;
	font-weight:800;
	letter-spacing:.65px;
	text-transform:uppercase;
}

.ercl-card-body {
	display:flex;
	flex-direction:column;
	flex:1;
	padding:21px 22px 20px;
}

.ercl-card-title {
	display:-webkit-box;
	overflow:hidden;
	margin:0 0 11px !important;
	padding:0 !important;
	color:var(--ercl-navy);
	font-size:20px;
	line-height:1.3;
	font-weight:760;
	letter-spacing:-.3px;
	-webkit-line-clamp:3;
	-webkit-box-orient:vertical;
}

.ercl-excerpt {
	display:-webkit-box;
	overflow:hidden;
	margin:0 0 22px !important;
	color:var(--ercl-text);
	font-size:13px;
	line-height:1.62;
	-webkit-line-clamp:3;
	-webkit-box-orient:vertical;
}

.ercl-card-footer {
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	margin-top:auto;
	padding-top:14px;
	border-top:1px solid #edf0f3;
}

.ercl-date {
	color:#9399a3;
	font-size:10.5px;
}

.ercl-read {
	color:var(--ercl-blue);
	font-size:11.5px;
	font-weight:750;
	white-space:nowrap;
}

/* PAGINATION */

.ercl-pagination {
	margin-top:38px;
}

.ercl-pagination ul {
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:8px;
	margin:0 !important;
	padding:0 !important;
	list-style:none;
}

.ercl-pagination li {
	margin:0 !important;
}

.ercl-pagination a,
.ercl-pagination span {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:40px;
	height:40px;
	padding:0 12px;
	border:1px solid var(--ercl-border);
	border-radius:10px;
	background:#fff;
	color:var(--ercl-navy) !important;
	font-size:12px;
	font-weight:700;
	text-decoration:none !important;
}

.ercl-pagination .current {
	background:var(--ercl-blue);
	border-color:var(--ercl-blue);
	color:#fff !important;
}

.ercl-empty {
	padding:65px 25px;
	border:1px solid var(--ercl-border);
	border-radius:18px;
	background:#fff;
	text-align:center;
}

.ercl-empty strong {
	display:block;
	margin-bottom:7px;
	font-size:20px;
	color:var(--ercl-navy);
}

.ercl-empty span {
	display:block;
	margin-bottom:15px;
	font-size:13px;
	color:var(--ercl-text);
}

.ercl-empty a {
	color:var(--ercl-blue) !important;
	font-size:12.5px;
	font-weight:750;
	text-decoration:none !important;
}

/* RESPONSIVE */

@media (max-width:1050px) {
	.ercl-shell {
		width:min(940px,calc(100% - 30px));
	}

	.ercl-grid {
		grid-template-columns:repeat(2,minmax(0,1fr));
	}
}

@media (max-width:760px) {
	.ercl-hero {
		padding:54px 16px 62px;
	}

	.ercl-library {
		padding:40px 15px 55px;
	}

	.ercl-filter-card {
		padding:22px 18px;
		border-radius:17px;
	}

	.ercl-filter-heading {
		display:block;
	}

	.ercl-reset-top {
		display:inline-block;
		margin-top:12px;
	}

	.ercl-controls {
		grid-template-columns:1fr 1fr;
	}

	.ercl-controls button {
		grid-column:1/-1;
	}

	.ercl-chips {
		flex-wrap:nowrap;
		margin-right:-18px;
		padding-right:18px;
		padding-bottom:3px;
		overflow-x:auto;
		scrollbar-width:none;
	}

	.ercl-chips::-webkit-scrollbar {
		display:none;
	}

	.ercl-chip {
		flex:0 0 auto;
	}
}

@media (max-width:620px) {
	.ercl-shell {
		width:100%;
	}

	.ercl-title {
		font-size:36px;
	}

	.ercl-description {
		font-size:15px;
	}

	.ercl-controls {
		grid-template-columns:1fr;
	}

	.ercl-controls button {
		grid-column:auto;
	}

	.ercl-grid {
		grid-template-columns:1fr;
		gap:16px;
	}

	.ercl-card-title {
		font-size:19px;
	}
}