/* --------------------------------------------------------------------------
 * GRZ Gaming — viewport-safe homepage compositor (v1.7.7)
 *
 * v176 painted the atmosphere on .grz-home. At ultra-wide production widths,
 * legacy pseudo-element geometry could still resolve against the content box,
 * exposing a vertical boundary. This layer deliberately belongs to the full
 * #content viewport instead. The merchandising markup and slider behaviour are
 * unchanged.
 * ----------------------------------------------------------------------- */

body.home .grz-site-content {
	position: relative;
	isolation: isolate;
	min-width: 0;
	background: var(--grz-home-atmo-canvas, #eef3f9);
	overflow: clip;
}

body.home .grz-site-content::before,
body.home .grz-site-content::after {
	position: absolute;
	left: 50%;
	right: auto;
	z-index: 0;
	display: block;
	width: calc(100vw + 180px);
	max-width: none;
	height: calc(100% + 96px);
	min-height: 1260px;
	border: 0;
	border-radius: 0;
	content: "";
	pointer-events: none;
	transform-origin: 50% 0;
}

body.home .grz-site-content::before {
	top: -96px;
	background: var(--grz-home-atmosphere-img, var(--grz-home-header-img, none)) center 8% / cover no-repeat;
	filter: blur(58px) saturate(1.14) brightness(.7);
	opacity: .82;
	-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 43%, rgba(0, 0, 0, .92) 58%, rgba(0, 0, 0, .62) 73%, rgba(0, 0, 0, .22) 89%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 0%, #000 43%, rgba(0, 0, 0, .92) 58%, rgba(0, 0, 0, .62) 73%, rgba(0, 0, 0, .22) 89%, transparent 100%);
	transform: translateX(-50%) scale(1.045);
}

body.home .grz-site-content::after {
	top: -42px;
	background-image:
		radial-gradient(ellipse 72% 48% at 0% 0%, color-mix(in srgb, var(--grz-home-atmosphere-color, var(--grz-home-header-ambient, #0762e6)) 72%, transparent), transparent 72%),
		radial-gradient(ellipse 76% 54% at 100% 1%, rgba(7, 22, 43, .9), transparent 77%),
		linear-gradient(180deg, rgba(7, 21, 40, .08) 0%, rgba(7, 21, 40, .19) 34%, rgba(238, 243, 249, .34) 58%, rgba(238, 243, 249, .72) 76%, rgba(238, 243, 249, .96) 91%, var(--grz-home-atmo-canvas, #eef3f9) 100%),
		url("../images/product-atmosphere-smoke-v1.png");
	background-position: center, center, center, center top;
	background-repeat: no-repeat;
	background-size: 100% 100%, 100% 100%, 100% 100%, cover;
	background-blend-mode: normal, normal, normal, soft-light;
	opacity: 1;
	transform: translateX(-50%);
}

body.home .grz-site-content > * {
	position: relative;
	z-index: 1;
}

/* Retire the content-box compositor completely; otherwise two different
 * coordinate systems can become visible side by side on very wide screens. */
body.home .grz-home.has-ambient {
	background: transparent;
}

body.home .grz-home.has-ambient::before,
body.home .grz-home.has-ambient::after {
	display: none !important;
	content: none !important;
}

/* A manual Featured selection may contain fewer than five products. Match the
 * real count so the section remains intentional instead of leaving empty grid
 * columns across most of a wide panel. */
@media (min-width: 981px) {
	.grz-fx-grid--count-1 {
		grid-template-columns: minmax(280px, 430px);
	}

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

	.grz-fx-grid--count-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.grz-fx-grid--count-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 760px) {
	body.home .grz-site-content::before,
	body.home .grz-site-content::after {
		width: calc(100vw + 108px);
		height: calc(100% + 54px);
		min-height: 1180px;
	}

	body.home .grz-site-content::before {
		top: -64px;
		filter: blur(38px) saturate(1.08) brightness(.69);
		opacity: .68;
		transform: translateX(-50%) scale(1.035);
	}

	body.home .grz-site-content::after {
		top: -26px;
		background-image:
			radial-gradient(ellipse 90% 42% at 0% 0%, color-mix(in srgb, var(--grz-home-atmosphere-color, var(--grz-home-header-ambient, #0762e6)) 66%, transparent), transparent 72%),
			radial-gradient(ellipse 94% 44% at 100% 1%, rgba(7, 22, 43, .86), transparent 79%),
			linear-gradient(180deg, rgba(7, 21, 40, .14) 0%, rgba(7, 21, 40, .24) 29%, rgba(238, 243, 249, .42) 49%, rgba(238, 243, 249, .78) 68%, rgba(238, 243, 249, .96) 84%, var(--grz-home-atmo-canvas, #eef3f9) 100%),
			url("../images/product-atmosphere-smoke-v1.png");
	}
}

@media (prefers-reduced-motion: reduce) {
	body.home .grz-site-content::before,
	body.home .grz-site-content::after {
		transition: none;
	}
}

@media (forced-colors: active) {
	body.home .grz-site-content::before,
	body.home .grz-site-content::after {
		display: none;
		content: none;
	}
}