/*
 * Product hero (fittings, equipment and pipe system product pages).
 *
 * Single source for the hero that used to be copied into every product page's
 * own Elementor custom CSS. Selectors start with `.elementor` so they keep the
 * same specificity the per-page `selector` prefix had.
 *
 * Build: the band's base is the light panel colour and one skewed navy shape
 * (::before) draws the diagonal. The panel itself has no clip-path, isolation
 * or blend mode, so nothing is pushed onto a separate compositing layer that
 * could paint late and flash the navy through.
 */

/* ---- Band ---- */
.elementor .egr-product-hero {
	position: relative !important;
	width: 100% !important;
	max-width: none !important;
	min-height: 600px !important;
	padding: 0 !important;
	overflow: hidden !important;
	background: linear-gradient(180deg, #ffffff 0 64%, #edf3f6 64% 100%) !important;
}

/* The navy side and its diagonal. Elementor's own .e-con::before rule forces
   height:100%, so position it with top + height rather than top/bottom. */
.elementor .egr-product-hero::before {
	content: "" !important;
	position: absolute !important;
	top: 0 !important;
	bottom: auto !important;
	left: -14% !important;
	width: 61% !important;
	height: 100% !important;
	background: #102a43 !important;
	transform: skewX(-5deg) !important;
	z-index: 0 !important;
	pointer-events: none !important;
}

.elementor .egr-product-hero > .e-con-inner {
	position: relative !important;
	z-index: 1 !important;
	display: flex !important;
	width: 100% !important;
	max-width: none !important;
	min-height: 600px !important;
	padding: 0 !important;
	align-items: stretch !important;
}

/* ---- Copy column ---- */
.elementor .egr-product-hero > .e-con-inner > .e-con:first-child {
	box-sizing: border-box !important;
	width: 47% !important;
	padding: 72px 58px 72px max(40px, calc((100vw - 1360px) / 2 + 40px)) !important;
}

.elementor .egr-product-hero h1 .elementor-heading-title {
	max-width: 720px !important;
	font-size: 56px !important;
	line-height: 1.02 !important;
	letter-spacing: -.035em !important;
}

.elementor .egr-product-hero .egr-breadcrumb {
	margin-bottom: 28px !important;
}

.elementor .egr-product-hero .egr-tag {
	margin-bottom: 20px !important;
	background: #eaf4df !important;
}

.elementor .egr-product-hero .egr-actions {
	margin-top: 10px !important;
}

.elementor .egr-product-hero .egr-actions .elementor-button {
	min-width: 164px !important;
	justify-content: center !important;
}

.elementor .egr-product-hero .egr-hero-actions .egr-button-secondary .elementor-button,
.elementor .egr-product-hero .egr-actions .egr-button-secondary .elementor-button {
	border-color: #fff !important;
	color: #fff !important;
}

/* ---- Photo panel ---- */
.elementor .egr-product-hero-stage {
	position: relative !important;
	box-sizing: border-box !important;
	width: 53% !important;
	min-height: 600px !important;
	padding: 64px 58px 128px 88px !important;
	overflow: hidden !important;
	/* Transparent so the band's own panel colour and diagonal show through
	   (the Elementor element settings give this container a white fill). */
	background: none !important;
}

.elementor .egr-product-hero-image,
.elementor .egr-product-hero-image .elementor-widget-container {
	position: relative !important;
	z-index: 1 !important;
	width: 100% !important;
	height: 100% !important;
}

.elementor .egr-product-hero-image img {
	display: block !important;
	width: 100% !important;
	height: 365px !important;
	object-fit: contain !important;
	object-position: center !important;
	filter: none !important;
}

/* ---- Spec box ---- */
.elementor .egr-product-hero-specs {
	position: absolute !important;
	z-index: 2 !important;
	left: 88px !important;
	right: 58px !important;
	bottom: 32px !important;
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	background: #102a43 !important;
	color: #fff !important;
	border-top: 4px solid #79b82a !important;
	box-shadow: 0 18px 38px rgba(16, 42, 67, .22) !important;
}

.elementor .egr-product-hero-specs span {
	padding: 17px 20px !important;
	border-right: 1px solid rgba(255, 255, 255, .16) !important;
}

.elementor .egr-product-hero-specs span:last-child {
	border-right: 0 !important;
}

.elementor .egr-product-hero-specs small {
	display: block !important;
	color: #9fc8dc !important;
	font-size: 10px !important;
	font-weight: 800 !important;
	letter-spacing: .11em !important;
	text-transform: uppercase !important;
}

.elementor .egr-product-hero-specs strong {
	display: block !important;
	margin-top: 5px !important;
	font-size: 15px !important;
	line-height: 1.3 !important;
	color: #fff !important;
}

/* ---- Up to 1400px ---- */
@media (max-width: 1400px) {
	.elementor .egr-product-hero,
	.elementor .egr-product-hero > .e-con-inner {
		min-height: 540px !important;
	}

	.elementor .egr-product-hero > .e-con-inner > .e-con:first-child {
		padding: 54px 40px !important;
	}

	.elementor .egr-product-hero h1 .elementor-heading-title {
		font-size: 48px !important;
	}

	.elementor .egr-product-hero-stage {
		min-height: 540px !important;
		padding: 48px 40px 116px 68px !important;
	}

	.elementor .egr-product-hero-image img {
		height: 325px !important;
	}

	.elementor .egr-product-hero-specs {
		left: 68px !important;
		right: 40px !important;
		bottom: 28px !important;
	}
}

/* ---- Phones: copy stacks above the photo, so no diagonal ---- */
@media (max-width: 767px) {
	.elementor .egr-product-hero {
		background: #102a43 !important;
	}

	.elementor .egr-product-hero::before {
		display: none !important;
	}

	.elementor .egr-product-hero,
	.elementor .egr-product-hero > .e-con-inner {
		min-height: 0 !important;
	}

	.elementor .egr-product-hero > .e-con-inner {
		flex-direction: column !important;
	}

	.elementor .egr-product-hero > .e-con-inner > .e-con:first-child {
		width: 100% !important;
		padding: 42px 20px 38px !important;
	}

	.elementor .egr-product-hero h1 .elementor-heading-title {
		font-size: 39px !important;
		line-height: 1.04 !important;
	}

	.elementor .egr-product-hero .egr-actions {
		flex-direction: column !important;
		align-items: stretch !important;
	}

	.elementor .egr-product-hero .egr-actions > .e-con {
		width: 100% !important;
	}

	.elementor .egr-product-hero .egr-actions .elementor-button {
		width: 100% !important;
	}

	.elementor .egr-product-hero-stage {
		width: 100% !important;
		min-height: 390px !important;
		padding: 30px 20px 110px !important;
		background: linear-gradient(180deg, #ffffff 0 64%, #edf3f6 64% 100%) !important;
	}

	.elementor .egr-product-hero-image img {
		height: 245px !important;
	}

	.elementor .egr-product-hero-specs {
		left: 20px !important;
		right: 20px !important;
		bottom: 20px !important;
	}

	.elementor .egr-product-hero-specs span {
		padding: 13px !important;
	}

	.elementor .egr-product-hero-specs strong {
		font-size: 13px !important;
	}
}