/* --------------------------------------------------------------------------
 * GRZ Gaming — contrast-safe immersive product header (v1.8.4)
 *
 * The header keeps the approved transparent geometry while a feathered,
 * product-colored veil guarantees a light foreground on bright and dark
 * artwork. Atmosphere texture/tint layers now share the main compositor so
 * no child-section boundary can create a horizontal blend seam.
 * ----------------------------------------------------------------------- */

body.single-product.grz-product-immersive .grz-header {
	position: relative;
	z-index: 4;
	isolation: isolate;
}

body.single-product.grz-product-immersive .grz-header::before {
	position: absolute;
	z-index: 0;
	top: 0;
	inset-inline: 0;
	height: calc(var(--grz-atmo-header-height, 76px) + 56px);
	background: linear-gradient(
		180deg,
		rgba(var(--grz-atmo-deep-rgb, 11, 28, 53), .58) 0%,
		rgba(var(--grz-atmo-deep-rgb, 11, 28, 53), .39) 48%,
		rgba(var(--grz-atmo-deep-rgb, 11, 28, 53), .16) 76%,
		transparent 100%
	);
	content: "";
	pointer-events: none;
}

body.single-product.grz-product-immersive .grz-header__shell {
	position: relative;
	z-index: 1;
}

body.single-product.grz-product-immersive .grz-primary-menu > li > a,
body.single-product.grz-product-immersive .grz-primary-menu > li > a:hover,
body.single-product.grz-product-immersive .grz-primary-menu > li.current-menu-item > a,
body.single-product.grz-product-immersive .grz-primary-menu > li.current-menu-ancestor > a,
body.single-product.grz-product-immersive .grz-primary-menu .grz-menu-icon,
body.single-product.grz-product-immersive .grz-mobile-menu-button {
	color: rgba(255, 255, 255, .96);
	text-shadow: 0 1px 16px rgba(2, 8, 20, .68);
}

body.single-product.grz-product-immersive .grz-primary-menu > li > a:hover,
body.single-product.grz-product-immersive .grz-primary-menu > li > a:focus-visible,
body.single-product.grz-product-immersive .grz-primary-menu > li.current-menu-item > a,
body.single-product.grz-product-immersive .grz-primary-menu > li.current-menu-ancestor > a {
	background: rgba(255, 255, 255, .11);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

body.single-product.grz-product-immersive .grz-brand {
	color: #fff;
	filter: drop-shadow(0 2px 12px rgba(2, 8, 20, .5));
}

body.single-product.grz-product-immersive .grz-brand__image {
	filter: brightness(0) invert(1);
}

body.single-product.grz-product-immersive .grz-brand__main,
body.single-product.grz-product-immersive .grz-brand__sub {
	background: none;
	color: #fff;
	-webkit-text-fill-color: currentColor;
}

body.single-product.grz-product-immersive .grz-product-search button,
body.single-product.grz-product-immersive .grz-header-actions .grz-icon-button,
body.single-product.grz-product-immersive .grz-header-actions .grz-icon-button.is-authenticated {
	filter: drop-shadow(0 1px 9px rgba(2, 8, 20, .48));
}

/* Keep all cinematic layers in one compositor. The shell pseudo-elements used
 * by v182 created a separate blend group whose edge could become visible at
 * the hero boundary on some product palettes. */
body.single-product.grz-product-immersive .grz-tp-shell::before,
body.single-product.grz-product-immersive .grz-tp-shell::after {
	display: none;
	content: none;
}

body.single-product.grz-product-immersive .grz-woo-main::before {
	background-image:
		radial-gradient(ellipse 54% 58% at 3% 5%, rgba(var(--grz-atmo-accent-rgb, 244, 154, 44), 1), transparent 69%),
		radial-gradient(ellipse 36% 33% at 5% -2%, rgba(255, 246, 220, .18), transparent 72%),
		radial-gradient(ellipse 76% 63% at 96% 4%, rgba(var(--grz-atmo-deep-rgb, 11, 28, 53), .94), transparent 75%),
		linear-gradient(90deg, rgba(var(--grz-atmo-accent-rgb, 244, 154, 44), .48) 0%, rgba(var(--grz-atmo-deep-rgb, 11, 28, 53), .52) 52%, rgba(var(--grz-atmo-deep-rgb, 11, 28, 53), .86) 100%),
		linear-gradient(
			180deg,
			rgba(var(--grz-atmo-deep-rgb, 11, 28, 53), .04) 0%,
			rgba(var(--grz-atmo-deep-rgb, 11, 28, 53), .11) 28%,
			rgba(var(--grz-atmo-deep-rgb, 11, 28, 53), .18) 42%,
			rgba(var(--grz-atmo-canvas-rgb, 244, 247, 251), .22) 54%,
			rgba(var(--grz-atmo-canvas-rgb, 244, 247, 251), .46) 66%,
			rgba(var(--grz-atmo-canvas-rgb, 244, 247, 251), .7) 77%,
			rgba(var(--grz-atmo-canvas-rgb, 244, 247, 251), .9) 88%,
			var(--grz-atmo-canvas, #f4f7fb) 100%
		),
		var(--grz-atmo-image, none);
	background-position: center, center, center, center, center, var(--grz-atmo-focus-x, 50%) var(--grz-atmo-focus-y, 38%);
	background-repeat: no-repeat;
	background-size: auto, auto, auto, auto, auto, cover;
}

body.single-product.grz-product-immersive .grz-woo-main::after {
	background: url("../images/product-atmosphere-smoke-v1.png") center top / cover no-repeat;
	mix-blend-mode: soft-light;
	opacity: var(--grz-atmo-texture-opacity, .48);
}

@media (max-width: 720px) {
	body.single-product.grz-product-immersive .grz-header::before {
		height: calc(var(--grz-atmo-header-height, 58px) + 38px);
		background: linear-gradient(
			180deg,
			rgba(var(--grz-atmo-deep-rgb, 11, 28, 53), .64) 0%,
			rgba(var(--grz-atmo-deep-rgb, 11, 28, 53), .42) 54%,
			transparent 100%
		);
	}

	body.single-product.grz-product-immersive .grz-woo-main::before {
		background-image:
			radial-gradient(ellipse 78% 46% at 1% 3%, rgba(var(--grz-atmo-accent-rgb, 244, 154, 44), .82), transparent 70%),
			radial-gradient(ellipse 88% 58% at 98% 4%, rgba(var(--grz-atmo-deep-rgb, 11, 28, 53), .9), transparent 78%),
			linear-gradient(
				180deg,
				rgba(var(--grz-atmo-deep-rgb, 11, 28, 53), .12) 0%,
				rgba(var(--grz-atmo-deep-rgb, 11, 28, 53), .24) 34%,
				rgba(var(--grz-atmo-canvas-rgb, 244, 247, 251), .32) 53%,
				rgba(var(--grz-atmo-canvas-rgb, 244, 247, 251), .66) 72%,
				rgba(var(--grz-atmo-canvas-rgb, 244, 247, 251), .9) 88%,
				var(--grz-atmo-canvas, #f4f7fb) 100%
			),
			var(--grz-atmo-image, none);
		background-position: center, center, center, var(--grz-atmo-focus-x, 50%) var(--grz-atmo-focus-y, 38%);
		background-size: auto, auto, auto, cover;
	}

	body.single-product.grz-product-immersive .grz-woo-main::after {
		background-position: 43% top;
		opacity: min(var(--grz-atmo-texture-opacity, .48), .36);
	}
}

@media (prefers-contrast: more) {
	body.single-product.grz-product-immersive .grz-header::before {
		background: linear-gradient(
			180deg,
			rgba(var(--grz-atmo-deep-rgb, 11, 28, 53), .78) 0%,
			rgba(var(--grz-atmo-deep-rgb, 11, 28, 53), .56) 58%,
			transparent 100%
		);
	}
}