/**
 * Unified light Hero treatment for Catalog, Product Category and Contact.
 *
 * Elementor owns the title typography and text colour. This stylesheet owns
 * only the shared container treatment and the layouts that Elementor cannot
 * express consistently across archive contexts.
 */

:where(
	body.single-catalog_product,
	body.tax-product_category,
	body.post-type-archive-catalog_product,
	body.elementor-page-29306,
	body.elementor-page-29369,
	body.elementor-page-29381,
	body.elementor-page-4439
) .elementor-element.elementor-element-1c12c63 {
	position: relative;
	isolation: isolate;
	height: 200px !important;
	min-height: 200px !important;
	max-height: 200px !important;
	overflow: hidden;
	background-color: #f3f7f8;
	background-image: none;
}

/* The old image overlay is deliberately disabled on every shared Hero. */
:where(
	body.single-catalog_product,
	body.tax-product_category,
	body.post-type-archive-catalog_product,
	body.elementor-page-29306,
	body.elementor-page-29369,
	body.elementor-page-29381,
	body.elementor-page-4439
) .elementor-element.elementor-element-1c12c63::before {
	display: none;
	content: none;
}

/* Preserve the existing full-viewport category Hero and content alignment. */
body.tax-product_category .elementor-element.elementor-element-1c12c63 {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-right: calc(50% - 50vw) !important;
	margin-left: calc(50% - 50vw) !important;
	padding-right: max(20px, calc((100vw - 1440px) / 2)) !important;
	padding-left: max(20px, calc((100vw - 1440px) / 2)) !important;
}

@supports (width: 100dvw) {
	body.tax-product_category .elementor-element.elementor-element-1c12c63 {
		width: 100dvw !important;
		max-width: 100dvw !important;
		margin-right: calc(50% - 50dvw) !important;
		margin-left: calc(50% - 50dvw) !important;
	}
}

/* Contact keeps its current page width and spacing. */
body.elementor-page-4439 main#main-content.wd-content-layout.container {
	width: 100%;
	max-width: 1480px;
	padding: 0 20px 72px;
}

body.elementor-page-4439 .elementor-element.elementor-element-1c12c63 :is(
	.elphguard-contact-hero-copy,
	.elementor-element-9b3ff3e
) {
	max-width: 720px;
	margin-bottom: 0;
	color: #60747a;
}

body.elementor-page-4439 .elementor-element.elementor-element-1c12c63 :is(
	.elphguard-contact-hero-copy,
	.elementor-element-9b3ff3e
) p {
	margin-bottom: 0;
	color: inherit;
}

@media (max-width: 479px) {
	body.elementor-page-4439 main#main-content.wd-content-layout.container {
		padding-right: 16px;
		padding-left: 16px;
	}
}