/* --------------------------------------------------------------------------
 * GRZ Gaming — premium product merchandising surfaces (v1.8.5)
 *
 * A restrained typography and surface pass for the immersive product layout.
 * Product-derived color remains atmospheric; the purchase UI uses calm pearl
 * neutrals, precise edges and layered elevation so price and actions stay the
 * clearest elements on every game palette.
 * ----------------------------------------------------------------------- */

body.single-product.grz-product-immersive {
	--grz-product-pearl: rgba(251, 252, 254, .965);
	--grz-product-pearl-strong: rgba(253, 254, 255, .985);
	--grz-product-edge: rgba(var(--grz-atmo-deep-rgb, 11, 28, 53), .15);
	--grz-product-divider: rgba(var(--grz-atmo-deep-rgb, 11, 28, 53), .09);
	--grz-product-elevation:
		0 1px 0 rgba(255, 255, 255, .82) inset,
		0 14px 38px rgba(var(--grz-atmo-deep-rgb, 11, 28, 53), .105),
		0 32px 72px rgba(var(--grz-atmo-deep-rgb, 11, 28, 53), .055);
}

/* One quiet light rule gives the transparent header a deliberate edge without
 * turning it back into an opaque navbar or reintroducing the old hard seam. */
body.single-product.grz-product-immersive .grz-header::after {
	position: absolute;
	z-index: 2;
	bottom: 0;
	left: 50%;
	width: min(calc(100% - 48px), 1160px);
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(255, 255, 255, .14) 4%,
		rgba(255, 255, 255, .46) 22%,
		rgba(255, 255, 255, .46) 78%,
		rgba(255, 255, 255, .14) 96%,
		transparent 100%
	);
	box-shadow: 0 1px 10px rgba(255, 255, 255, .08);
	content: "";
	pointer-events: none;
	transform: translateX(-50%);
}

/* The product name is a headline, not a billboard. Keep enough presence for
 * long game names without overpowering the cover art or purchase surface. */
body.single-product.grz-product-immersive .grz-tp-hero__title {
	max-width: 760px;
	font-size: clamp(25px, 2vw, 32px);
	font-weight: 700;
	letter-spacing: -.018em;
	line-height: 1.14;
	text-wrap: balance;
}

body.single-product.grz-product-immersive .grz-tp-hero__excerpt {
	max-width: 670px;
	color: rgba(247, 250, 255, .82);
}

body.single-product.grz-product-immersive .grz-tp-card,
body.single-product.grz-product-immersive .grz-tp-about,
body.single-product.grz-product-immersive .grz-tp-related,
body.single-product.grz-product-immersive .grz-tp-reviews {
	border-color: var(--grz-product-edge);
	border-radius: 12px;
	background: var(--grz-product-pearl);
	box-shadow: var(--grz-product-elevation);
	backdrop-filter: blur(18px) saturate(1.05);
}

body.single-product.grz-product-immersive .grz-tp-card--summary {
	background: var(--grz-product-pearl-strong);
}

body.single-product.grz-product-immersive .grz-tp-card__title,
body.single-product.grz-product-immersive .grz-tp-about__heading,
body.single-product.grz-product-immersive .grz-tp-related > h2,
body.single-product.grz-product-immersive .grz-tp-reviews__title {
	color: #172238;
	font-weight: 760;
	letter-spacing: -.015em;
}

body.single-product.grz-product-immersive .grz-tp-card__sub,
body.single-product.grz-product-immersive .grz-tp-about__content,
body.single-product.grz-product-immersive .grz-tp-related__copy span {
	color: #657187;
}

body.single-product.grz-product-immersive .grz-tp-step {
	box-shadow:
		0 1px 0 rgba(255, 255, 255, .28) inset,
		0 8px 18px rgba(var(--grz-tp-accent-rgb, 7, 98, 230), .2);
}

body.single-product.grz-product-immersive .grz-tp-pill {
	border-color: rgba(var(--grz-atmo-deep-rgb, 11, 28, 53), .17);
	border-radius: 9px;
	background: rgba(255, 255, 255, .76);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .86) inset;
	transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

body.single-product.grz-product-immersive .grz-tp-pill:hover {
	border-color: rgba(var(--grz-tp-accent-rgb, 7, 98, 230), .42);
	background: rgba(255, 255, 255, .94);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, .9) inset,
		0 8px 20px rgba(var(--grz-atmo-deep-rgb, 11, 28, 53), .07);
	transform: translateY(-1px);
}

body.single-product.grz-product-immersive .grz-tp-pill.is-active {
	border-color: rgba(var(--grz-tp-accent-rgb, 7, 98, 230), .82);
	background: color-mix(in srgb, var(--grz-tp-accent, #0762e6) 6%, #fff);
	box-shadow:
		0 0 0 1px rgba(var(--grz-tp-accent-rgb, 7, 98, 230), .08) inset,
		0 8px 22px rgba(var(--grz-tp-accent-rgb, 7, 98, 230), .1);
	transform: none;
}

body.single-product.grz-product-immersive .grz-tp-about[open] > .grz-tp-about__summary {
	border-bottom: 1px solid var(--grz-product-divider);
}

body.single-product.grz-product-immersive .grz-tp-about__summary,
body.single-product.grz-product-immersive .grz-tp-reviews__header {
	background: rgba(255, 255, 255, .34);
}

body.single-product.grz-product-immersive .grz-tp-related__item + .grz-tp-related__item {
	border-top: 1px solid var(--grz-product-divider);
}

body.single-product.grz-product-immersive .grz-tp-related__item:hover {
	background: color-mix(in srgb, var(--grz-tp-accent, #0762e6) 5%, #fff);
}

body.single-product.grz-product-immersive .grz-tp-info {
	box-shadow: none;
}

@media (min-width: 861px) {
	body.single-product.grz-product-immersive div.product form.grz-tp-form {
		align-items: start;
	}

	body.single-product.grz-product-immersive div.product form.grz-tp-form > .grz-tp-card--package,
	body.single-product.grz-product-immersive div.product form.grz-tp-form > .grz-tp-rail,
	body.single-product.grz-product-immersive .grz-tp-card--package,
	body.single-product.grz-product-immersive .grz-tp-rail > .grz-tp-card--summary:only-child {
		height: auto;
	}

	body.single-product.grz-product-immersive .grz-tp-rail {
		align-self: start;
	}

	body.single-product.grz-product-immersive .grz-tp-hero,
	body.single-product.grz-product-immersive .grz-tp-hero.has-custom-atmosphere {
		padding: 58px 0 48px;
	}

	body.single-product.grz-product-immersive .grz-tp-card__head,
	body.single-product.grz-product-immersive .grz-tp-card--account .grz-tp-card__head,
	body.single-product.grz-product-immersive .grz-tp-card--summary .grz-tp-card__head {
		padding: 18px 20px 14px;
		border-bottom: 1px solid var(--grz-product-divider);
		background: rgba(255, 255, 255, .28);
	}

	body.single-product.grz-product-immersive .grz-tp-card__body--packages {
		padding-top: 16px;
	}

	body.single-product.grz-product-immersive .grz-tp-card--summary .grz-tp-card__body {
		padding: 16px 20px 20px;
	}

	body.single-product.grz-product-immersive .grz-tp-total {
		margin-inline: -7px;
		padding: 14px 10px 12px;
		border: 1px solid rgba(var(--grz-tp-accent-rgb, 7, 98, 230), .11);
		border-radius: 9px;
		background: color-mix(in srgb, var(--grz-tp-accent, #0762e6) 4%, #fff);
	}

	body.single-product.grz-product-immersive .grz-tp-card--summary .single_variation_wrap {
		margin-top: 12px;
	}
}

@media (max-width: 720px) {
	body.single-product.grz-product-immersive .grz-header::after {
		width: calc(100% - 28px);
		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .4) 16%, rgba(255, 255, 255, .4) 84%, transparent);
	}

	body.single-product.grz-product-immersive .grz-tp-hero__title {
		font-size: clamp(19px, 5.4vw, 24px);
		line-height: 1.16;
	}

	body.single-product.grz-product-immersive .grz-tp-card,
	body.single-product.grz-product-immersive .grz-tp-about,
	body.single-product.grz-product-immersive .grz-tp-related,
	body.single-product.grz-product-immersive .grz-tp-reviews {
		border-radius: 11px;
		box-shadow:
			0 1px 0 rgba(255, 255, 255, .82) inset,
			0 10px 28px rgba(var(--grz-atmo-deep-rgb, 11, 28, 53), .1);
		backdrop-filter: blur(12px) saturate(1.04);
	}

	body.single-product.grz-product-immersive .grz-tp-pill:hover {
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.single-product.grz-product-immersive .grz-tp-pill {
		transition: none;
	}
}

@media (forced-colors: active) {
	body.single-product.grz-product-immersive .grz-tp-card,
	body.single-product.grz-product-immersive .grz-tp-about,
	body.single-product.grz-product-immersive .grz-tp-related,
	body.single-product.grz-product-immersive .grz-tp-reviews,
	body.single-product.grz-product-immersive .grz-tp-pill {
		border-color: CanvasText;
		background: Canvas;
		box-shadow: none;
		backdrop-filter: none;
	}
}