/* GRZ Gaming home v1.5.61 — pure-color ambient (no image), Featured header restyle.
 *
 * The ambient effect is re-invented per feedback: NO banner image anywhere in
 * the background — only the slide's COLOR, extracted (--grz-hero-ambient,
 * already morphed per slide by slider-v159.js), diffused as three soft
 * self-fading color glows. Radial gradients need no filter:blur(), so this
 * is also cheaper to composite than any image layer ever was.
 *
 * Featured Products header: Arial stack (site-wide approved font), the
 * "View more" pill becomes a SEAGM-style black square button, and on phones
 * the head wraps with real spacing so the button gets a clean row. */

/* Horizontal swipes reach the JS; vertical page scroll keeps working. */
.grz-hero-slider__viewport {
	touch-action: pan-y;
}

/* Pager dots are a desktop extra — on phones the banner is swipe-only. */
.grz-hero-slider__dots {
	position: absolute;
	bottom: clamp(10px, 2vw, 16px);
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 6px 10px;
	border-radius: 999px;
	background: rgba(9, 18, 34, 0.32);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	z-index: 6;
}

.grz-hero-slider__dot {
	box-sizing: border-box;
	width: 8px;
	height: 8px;
	min-width: 8px;
	min-height: 8px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.55);
	cursor: pointer;
	transition: width 200ms ease, background 200ms ease;
}

.grz-hero-slider__dot:hover {
	background: rgba(255, 255, 255, 0.85);
}

.grz-hero-slider__dot.is-active {
	width: 20px;
	background: #fff;
}

.grz-hero-slider__dot:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* Autoplay must always have a visible, keyboard-operable stop control. */
.grz-hero-slider__pause {
	position: absolute;
	inset-inline-end: calc((100% - var(--grz-hero-card-width)) / 2 + 12px);
	bottom: clamp(10px, 2vw, 16px);
	z-index: 7;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 40px;
	padding: 8px 12px;
	border: 1px solid rgba(255, 255, 255, 0.42);
	border-radius: 999px;
	background: rgba(9, 18, 34, 0.68);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	color: #fff;
	font: 700 11px/1 Arial, "Helvetica Neue", sans-serif;
	cursor: pointer;
}

.grz-hero-slider__pause:hover {
	background: rgba(9, 18, 34, 0.84);
}

.grz-hero-slider__pause:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

.grz-hero-slider__pause[hidden] {
	display: none;
}

.grz-hero-slider__pause-icon {
	width: 11px;
	height: 12px;
	background: linear-gradient(90deg, currentColor 0 3px, transparent 3px 7px, currentColor 7px 10px, transparent 10px);
}

.grz-hero-slider__pause.is-paused .grz-hero-slider__pause-icon {
	background: currentColor;
	clip-path: polygon(8% 0, 100% 50%, 8% 100%);
}

@media (max-width: 760px) {
	.grz-hero-slider__dots {
		display: none;
	}

	.grz-hero-slider__pause {
		inset-inline-end: 10px;
		bottom: 10px;
		min-height: 44px;
	}

	/* Jank killers: no 700ms full-page color-mix repaint storm on slide
	 * change, and a snappier slide transition (fewer frames to drop). */
	.grz-home.has-ambient {
		transition: none;
	}

	.grz-hero-slider {
		--grz-slide-transition: 480ms cubic-bezier(0.22, 0.61, 0.36, 1);
	}
}

/* Featured variation offers on phones: 2 rows inside a horizontal snap
 * scroller with SEAGM-sized cards (~1.7 cards visible per row).
 * !important: earlier versions of this layout were pinned by later inline
 * Customizer CSS; the structure must win. */
@media (max-width: 640px) {
	.grz-fx-grid {
		grid-template-columns: none !important;
		grid-template-rows: repeat(2, auto) !important;
		grid-auto-flow: column !important;
		grid-auto-columns: clamp(225px, 56vw, 270px) !important;
		overflow-x: auto !important;
		overflow-y: hidden;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		padding-bottom: 6px;
	}

	.grz-fx-grid::-webkit-scrollbar {
		display: none;
	}

	.grz-fx-card {
		scroll-snap-align: start;
	}
}

/* --------------------------------------------------------------------------
 * The ambient effect: ONLY the slide's extracted color, as three soft glows
 * (top-center aura + two side auras) that melt into the canvas. No image,
 * no blur filter — radial gradients fade by themselves. v140 gives this
 * pseudo-element content:none / circle geometry; every such property is
 * explicitly reset here (same specificity, this file loads later).
 * ------------------------------------------------------------------------ */
.grz-home.has-ambient::before {
	content: "";
	display: block;
	position: absolute;
	top: -140px;
	left: 50%;
	right: auto;
	width: min(1200px, 160vw);
	height: 560px;
	aspect-ratio: auto;
	border: 0;
	border-radius: 0;
	transform: translateX(-50%);
	background:
		radial-gradient(ellipse 55% 52% at 50% 30%, color-mix(in srgb, var(--grz-hero-ambient) 30%, transparent) 0%, transparent 72%),
		radial-gradient(ellipse 38% 40% at 22% 22%, color-mix(in srgb, var(--grz-hero-ambient) 20%, transparent) 0%, transparent 70%),
		radial-gradient(ellipse 40% 38% at 80% 26%, color-mix(in srgb, var(--grz-hero-ambient) 16%, transparent) 0%, transparent 70%);
	opacity: 1;
	filter: none;
	pointer-events: none;
	z-index: 0;
	-webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 98%);
	mask-image: linear-gradient(180deg, #000 62%, transparent 98%);
}

@media (max-width: 760px) {
	.grz-home.has-ambient::before {
		top: -90px;
		height: 430px;
	}
}

@media (forced-colors: active) {
	.grz-home.has-ambient::before {
		content: none;
		display: none;
	}
}

/* --------------------------------------------------------------------------
 * Featured Products header: approved Arial stack + SEAGM-style square button
 * + a mobile head that gives the button real space.
 * ------------------------------------------------------------------------ */
section[data-grz-featured-variant="accent-frame"] .grz-home-section__title,
section[data-grz-featured-variant="accent-frame"] .grz-home-section__desc,
section[data-grz-featured-variant="accent-frame"] .grz-home-section__more--button {
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

section[data-grz-featured-variant="accent-frame"] .grz-home-section__more--button {
	border-radius: 6px;
	background: #14181f;
	box-shadow: none;
	padding: 9px 16px;
}

section[data-grz-featured-variant="accent-frame"] .grz-home-section__more--button:hover {
	background: #000;
	transform: none;
	box-shadow: none;
}

@media (max-width: 640px) {
	section[data-grz-featured-variant="accent-frame"] .grz-home-section__head--compact {
		flex-wrap: wrap;
		row-gap: 12px;
	}

	section[data-grz-featured-variant="accent-frame"] .grz-home-section__title {
		font-size: 18px;
	}

	section[data-grz-featured-variant="accent-frame"] .grz-home-section__more--button {
		flex-shrink: 0;
	}
}