/* --------------------------------------------------------------------------
 * GRZ Gaming — adaptive product atmosphere (v1.8.1)
 *
 * The product featured image is an input, never a banner. A blurred artwork
 * layer and deterministic contrast/fade layers build one continuous canvas
 * behind the hero and purchase flow. The UI remains GRZ blue and every game
 * receives its own atmosphere without needing a separate banner upload.
 * ----------------------------------------------------------------------- */

body.single-product.grz-product-design {
	background: var(--grz-atmo-canvas, #f4f7fb);
}

.single-product.grz-product-design .grz-site-content,
.single-product.grz-product-design .grz-woo-main {
	background: var(--grz-atmo-canvas, #f4f7fb);
}

.single-product.grz-product-design .grz-woo-main {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.single-product.grz-product-design .grz-woo-main::before,
.single-product.grz-product-design .grz-woo-main::after {
	position: absolute;
	inset-inline-start: 50%;
	top: calc(-1 * min(9vw, 112px));
	width: calc(100vw + 220px);
	pointer-events: none;
	content: "";
}

/* The featured image is deliberately over-scaled and heavily blurred so no
 * duplicate poster, title or character reads as a second piece of content. */
.single-product.grz-product-design .grz-woo-main::before {
	z-index: 0;
	height: var(--grz-atmo-height, 860px);
	background-image: var(--grz-atmo-image, none);
	background-position: var(--grz-atmo-focus-x, 50%) var(--grz-atmo-focus-y, 38%);
	background-repeat: no-repeat;
	background-size: cover;
	filter: blur(var(--grz-atmo-blur, 58px)) saturate(var(--grz-atmo-saturation, 1.12)) brightness(.82);
	opacity: var(--grz-atmo-opacity, .82);
	transform: translateX(-50%) scale(1.12);
	transform-origin: center top;
}

/* Three safety layers: a product-colored glow, a deep readability field, and
 * a complete fade to the lower neutral canvas. */
.single-product.grz-product-design .grz-woo-main::after {
	z-index: 0;
	height: calc(var(--grz-atmo-height, 860px) + var(--grz-atmo-fade, 360px));
	background:
		radial-gradient(
			ellipse 54% 46% at 10% 5%,
			rgba(var(--grz-atmo-accent-rgb, 7, 98, 230), .58),
			transparent 72%
		),
		radial-gradient(
			ellipse 76% 58% at 88% 3%,
			rgba(var(--grz-atmo-deep-rgb, 11, 24, 48), .78),
			transparent 76%
		),
		linear-gradient(
			180deg,
			rgba(var(--grz-atmo-deep-rgb, 11, 24, 48), var(--grz-atmo-darkness, .62)) 0,
			rgba(var(--grz-atmo-deep-rgb, 11, 24, 48), .42) 30%,
			rgba(var(--grz-atmo-canvas-rgb, 244, 247, 251), .42) 58%,
			rgba(var(--grz-atmo-canvas-rgb, 244, 247, 251), .92) 78%,
			var(--grz-atmo-canvas, #f4f7fb) 100%
		);
	transform: translateX(-50%);
}

.single-product.grz-product-design .grz-woo-main > * {
	position: relative;
	z-index: 1;
}

/* v140 painted a pale wash from the shell itself. It sat above the new
 * atmosphere and reduced every game to the same near-white background. */
.single-product.grz-product-design .grz-tp-shell::before {
	content: none;
}

/* The old full-width image band is retired. The product identity now lives on
 * the same continuous adaptive canvas as the purchase cards. */
.single-product .grz-tp-hero,
.single-product .grz-tp-hero.has-custom-atmosphere {
	margin-bottom: 22px;
	padding: 52px 0 44px;
	background: transparent;
	background-image: none;
}

.single-product .grz-tp-hero::before,
.single-product .grz-tp-hero::after {
	content: none;
}

.single-product .grz-tp-hero__inner {
	grid-template-columns: 138px minmax(0, 1fr) auto;
	gap: 24px;
}

.single-product .grz-tp-hero__icon {
	width: 138px;
	height: 166px;
	border: 2px solid rgba(255, 255, 255, .72);
	border-radius: 16px;
	background: rgba(255, 255, 255, .94);
	box-shadow: 0 20px 46px rgba(3, 10, 24, .34);
	transform: none;
}

.single-product .grz-tp-hero__img {
	border-radius: 13px;
	object-fit: cover;
}

.single-product .grz-tp-hero__title {
	max-width: 820px;
	color: #fff;
	font-size: clamp(27px, 2.65vw, 39px);
	font-weight: 720;
	line-height: 1.13;
	letter-spacing: -.022em;
	text-shadow: 0 2px 18px rgba(3, 8, 20, .38);
}

.single-product .grz-tp-hero__title-accent {
	color: inherit;
}

.single-product .grz-tp-hero__excerpt {
	max-width: 720px;
	margin: 10px 0 0;
	color: rgba(247, 250, 255, .82);
	font-size: 13px;
	line-height: 1.58;
	text-shadow: 0 1px 12px rgba(3, 8, 20, .3);
}

.single-product .grz-tp-hero__excerpt > :first-child,
.single-product .grz-tp-hero__excerpt > :last-child {
	margin-block: 0;
}

.single-product .grz-tp-hero__badges {
	gap: 24px;
	margin: 20px 0 0;
}

.single-product .grz-tp-hero__badge,
.single-product .grz-tp-hero__badge:first-child {
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: rgba(248, 251, 255, .9);
	font-size: 12px;
	font-weight: 650;
	backdrop-filter: none;
}

.single-product .grz-tp-hero__badge-icon {
	width: 16px;
	height: 16px;
	color: #fff;
}

.single-product .grz-tp-hero__meta {
	margin-top: 14px;
	color: rgba(244, 248, 255, .72);
}

.single-product .grz-tp-hero__rating strong,
.single-product .grz-tp-hero__sold {
	color: #fff;
}

.single-product .grz-tp-hero__note,
.single-product .grz-tp-hero__rating-count {
	color: rgba(244, 248, 255, .72);
}

.single-product .grz-tp-hero__divider {
	background: rgba(255, 255, 255, .28);
}

.single-product .grz-tp-hero .grz-favorite-button--product {
	border-color: rgba(255, 255, 255, .36);
	background: rgba(7, 18, 38, .16);
	color: #fff;
	box-shadow: 0 10px 26px rgba(3, 9, 22, .14);
}

.single-product .grz-tp-hero .grz-favorite-button--product:hover,
.single-product .grz-tp-hero .grz-favorite-button--product:focus-visible {
	border-color: rgba(255, 255, 255, .62);
	background: rgba(255, 255, 255, .17);
}

/* White surfaces retain the exact purchase hierarchy while picking up the
 * subtle translucency and edge definition from the approved concept. */
.single-product .grz-tp-card,
.single-product .grz-tp-about,
.single-product .grz-tp-related {
	border-color: rgba(199, 213, 231, .9);
	background: rgba(255, 255, 255, .975);
	box-shadow: 0 14px 38px rgba(25, 45, 78, .075);
}

@media (max-width: 1040px) {
	.single-product .grz-tp-hero__inner {
		grid-template-columns: 112px minmax(0, 1fr) auto;
		gap: 18px;
	}

	.single-product .grz-tp-hero__icon {
		width: 112px;
		height: 138px;
	}
}

@media (max-width: 720px) {
	.single-product.grz-product-design .grz-woo-main::before {
		top: -54px;
		height: var(--grz-atmo-mobile-height, 560px);
		filter: blur(calc(var(--grz-atmo-blur, 58px) * .78)) saturate(var(--grz-atmo-saturation, 1.12)) brightness(.78);
		opacity: var(--grz-atmo-mobile-opacity, .58);
		transform: translateX(-50%) scale(1.16);
	}

	.single-product.grz-product-design .grz-woo-main::after {
		top: -54px;
		height: calc(var(--grz-atmo-mobile-height, 560px) + min(var(--grz-atmo-fade, 360px), 320px));
		background:
			radial-gradient(ellipse 78% 44% at 8% 3%, rgba(var(--grz-atmo-accent-rgb, 7, 98, 230), .42), transparent 72%),
			linear-gradient(180deg, rgba(var(--grz-atmo-deep-rgb, 11, 24, 48), var(--grz-atmo-darkness, .62)) 0, rgba(var(--grz-atmo-deep-rgb, 11, 24, 48), .42) 38%, rgba(var(--grz-atmo-canvas-rgb, 244, 247, 251), .84) 72%, var(--grz-atmo-canvas, #f4f7fb) 100%);
	}

	.single-product .grz-tp-hero,
	.single-product .grz-tp-hero.has-custom-atmosphere {
		margin-bottom: 14px;
		padding: 30px 0 28px;
	}

	.single-product .grz-tp-hero__inner {
		grid-template-columns: 88px minmax(0, 1fr);
		gap: 14px;
	}

	.single-product .grz-tp-hero__icon {
		width: 88px;
		height: 108px;
		border-radius: 13px;
	}

	.single-product .grz-tp-hero__img {
		border-radius: 10px;
	}

	.single-product .grz-tp-hero__title {
		font-size: clamp(21px, 6.4vw, 27px);
	}

	.single-product .grz-tp-hero__excerpt {
		display: -webkit-box;
		overflow: hidden;
		font-size: 12px;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
	}

	.single-product .grz-tp-hero__badges {
		grid-column: 1 / -1;
		gap: 12px 18px;
		margin-top: 14px;
	}

	.single-product .grz-tp-hero__meta {
		grid-column: 1 / -1;
	}

	.single-product .grz-tp-hero .grz-favorite-button--product {
		display: none;
	}
}

@media (max-width: 420px) {
	.single-product .grz-tp-hero__badges {
		display: flex;
	}

	.single-product .grz-tp-hero__badge {
		font-size: 11px;
	}
}

@media (prefers-reduced-data: reduce) {
	.single-product.grz-product-design .grz-woo-main::before {
		background-image: none;
		opacity: 0;
	}
}