/* Mercan category showcase — v16 */

.custom-showcase-container {
	content-visibility: auto;
	contain: layout style paint;
	contain-intrinsic-size: auto 280px;
}

.custom-showcase-container .custom-seo-clean-collapse img {
	display: none !important;
}

@supports selector(p:has(img)) {
	.custom-showcase-container .custom-seo-clean-collapse p:has(img) {
		display: none !important;
	}
}

.custom-showcase-container .custom-seo-clean-collapse {
	width: 100%;
	overflow: hidden;
	font-size: 0.875rem;
	line-height: 1.65;
	color: #475569;
	font-weight: 400;
}

.custom-showcase-container .custom-seo-clean-collapse:not(.custom-seo-clean-expanded) p ~ p,
.custom-showcase-container:not(.is-expanded) .custom-seo-clean-collapse:not(.custom-seo-clean-expanded) p:first-of-type ~ * {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	margin: 0;
	padding: 0;
	border: 0;
	visibility: hidden;
	transition: opacity 0.12s ease-out, margin 0.12s ease-out, visibility 0s linear 0.12s;
}

.custom-showcase-container .custom-seo-clean-collapse.custom-seo-clean-expanded p ~ p,
.custom-showcase-container.is-expanded .custom-seo-clean-collapse p:first-of-type ~ * {
	max-height: none;
	opacity: 1;
	visibility: visible;
	transition: opacity 0.18s ease-in, margin 0.18s ease-in;
}

.custom-showcase-container .custom-seo-clean-collapse.custom-seo-clean-expanded p ~ p,
.custom-showcase-container.is-expanded .custom-seo-clean-collapse p:first-of-type ~ p {
	margin-top: 0.75rem;
}

.custom-showcase-container.is-expanded .custom-seo-clean-collapse p:first-of-type ~ h3,
.custom-showcase-container.is-expanded .custom-seo-clean-collapse p:first-of-type ~ h4 {
	margin: 1rem 0 0.5rem;
}

.custom-showcase-container.is-expanded .custom-seo-clean-collapse p:first-of-type ~ ul,
.custom-showcase-container.is-expanded .custom-seo-clean-collapse p:first-of-type ~ ol {
	margin: 0 0 0.75rem;
	padding-left: 1.25rem;
}

.custom-showcase-text-fade {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2.5rem;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff 78%);
	opacity: 1;
	transition: opacity 0.12s ease-out;
}

.custom-showcase-container.is-expanded .custom-showcase-text-fade,
.custom-showcase-container .custom-seo-clean-collapse.custom-seo-clean-expanded + .custom-showcase-text-fade {
	opacity: 0;
}

.custom-showcase-container .custom-seo-clean-collapse h1,
.custom-showcase-container .custom-seo-clean-collapse h2,
.custom-showcase-container .custom-seo-clean-collapse h3.mercan-showcase-primary-heading {
	font-size: 1.125rem;
	font-weight: 700;
	color: #002a66;
	line-height: 1.35;
	margin: 0 0 0.75rem;
	padding-left: 0.75rem;
	border-left: 4px solid #002a66;
}

.custom-showcase-container .custom-seo-clean-collapse h3,
.custom-showcase-container .custom-seo-clean-collapse h4 {
	font-size: 1rem;
	font-weight: 700;
	color: #002a66;
	line-height: 1.4;
	margin: 1rem 0 0.5rem;
}

.custom-showcase-container .custom-seo-clean-collapse p {
	margin: 0 0 0.75rem;
	font-weight: 400;
	color: #475569;
}

.custom-showcase-container .custom-seo-clean-collapse ul,
.custom-showcase-container .custom-seo-clean-collapse ol {
	margin: 0 0 0.75rem;
	padding-left: 1.25rem;
}

.custom-showcase-container .custom-seo-clean-collapse ul {
	list-style: disc;
}

.custom-showcase-container .custom-seo-clean-collapse ol {
	list-style: decimal;
}

.custom-showcase-container .custom-seo-clean-collapse li {
	margin: 0.25rem 0;
}

.custom-showcase-container .custom-seo-clean-collapse strong,
.custom-showcase-container .custom-seo-clean-collapse b {
	font-weight: 700;
	color: #1e293b;
}

.custom-showcase-container .custom-seo-clean-collapse a {
	color: #002a66;
	text-decoration: underline;
}

.custom-showcase-container.is-expanded .custom-showcase-grid {
	max-height: none;
}

.custom-showcase-banner--logo {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #f8fafc 0%, #ffffff 55%, #f1f5f9 100%);
	border-left: 1px solid #e2e8f0;
}

.custom-showcase-banner--logo .custom-showcase-banner-img {
	position: static;
	display: block;
	width: auto;
	height: auto;
	max-width: min(50%, 320px);
	max-height: calc(100% - 1rem);
	object-fit: contain;
	margin: 0 auto;
}

.custom-showcase-banner:not(.custom-showcase-banner--logo) .custom-showcase-banner-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 1024px) {
	.custom-showcase-banner {
		min-height: 100%;
	}
}

@media (max-width: 1023px) {
	.custom-showcase-container {
		contain-intrinsic-size: auto 180px;
	}

	.custom-showcase-banner {
		display: none !important;
	}
}