/*
 * GRZ Gaming — Razer Gold approved production model (dev 88).
 *
 * This stylesheet is intentionally loaded after every shared theme stylesheet.
 * It is the single authoritative cascade for the signed-off Razer page so the
 * live WooCommerce template cannot drift back to generic header, card or footer
 * styling.
 */

body.grz-brand-razer-gold {
	--grz-razer: var(--grz-blp-accent, #44d62c);
	--grz-razer-bright: color-mix(in srgb, var(--grz-blp-accent, #44d62c) 78%, white);
	--grz-razer-deep: var(--grz-blp-deep, #001a0e);
	--grz-razer-deeper: color-mix(in srgb, var(--grz-blp-deep, #001108) 82%, black);
	--grz-razer-panel: color-mix(in srgb, var(--grz-blp-deep-2, #022b16) 78%, transparent);
	--grz-razer-line: color-mix(in srgb, var(--grz-blp-accent, #44d62c) 42%, transparent);
	--grz-razer-muted: rgba(255, 255, 255, .68);
	/*
	 * The approved composition occupies the first 1004px of a 2400px-wide
	 * outpainted canvas. Anchor that unchanged core to the centred content shell,
	 * while the extra artwork continues past the viewport edge. This preserves
	 * the approved card position and native sharpness without exposing a black
	 * gutter on wide or zoomed-out screens.
	 */
	--grz-razer-page-core-width: 1004px;
	--grz-razer-page-art-width: 2400px;
	--grz-razer-shell-half: min(660px, calc(50vw - 56px));
	/*
	 * The v6 artwork stores the cards lower inside the single full-page raster.
	 * Start that raster behind the opaque header so the first visible hero pixel
	 * samples the clean energy field while the cards land about 185px inside the
	 * hero—the approved composition—without a duplicate image or a dark seam.
	 */
	--grz-razer-page-art-y: 34px;
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: #000;
	background-image: var(--grz-blp-page, var(--grz-blp-hero));
	background-attachment: scroll;
	background-position: calc(50vw + var(--grz-razer-shell-half) - var(--grz-razer-page-core-width)) var(--grz-razer-page-art-y);
	background-repeat: no-repeat;
	background-size: var(--grz-razer-page-art-width) auto;
	color: #fff;
	font-family: Inter, Arial, sans-serif;
}

/*
 * Keep the single page artwork close to its native pixel density. The old
 * 100%-wide rule enlarged a 1004px source to the entire monitor (and enlarged
 * it again when browser zoom was reduced), which caused the soft, oversized
 * card artwork reported in QA. Native-size rendering keeps the source sharp;
 * shell-relative positioning keeps the cards and energy ribbons attached to
 * the actual page composition instead of the monitor edge.
 */
body.grz-brand-razer-gold > .grz-site-content {
	flex: 1 0 auto;
	width: 100%;
}

body.grz-brand-razer-gold > .grz-footer {
	flex: 0 0 auto;
	width: 100%;
}

body.grz-brand-razer-gold :is(.grz-site-content, .grz-blp) {
	margin: 0;
	padding: 0;
	background: transparent;
}

/* Header: one compact, integrated, green-aware navigation surface. */
body.grz-brand-razer-gold .grz-header,
body.grz-brand-razer-gold .grz-header__shell,
body.grz-brand-razer-gold .grz-main-header {
	background: var(--grz-razer-deeper);
	box-shadow: none;
	color: #fff;
}

body.grz-brand-razer-gold .grz-header {
	position: relative;
	z-index: 30;
	margin: 0;
}

body.grz-brand-razer-gold .grz-header::before,
body.grz-brand-razer-gold .grz-main-header::after {
	display: none;
}

body.grz-brand-razer-gold .grz-main-header {
	border-bottom: 1px solid color-mix(in srgb, var(--grz-razer) 19%, transparent);
}

body.grz-brand-razer-gold .grz-main-header__inner {
	display: grid;
	box-sizing: border-box;
	width: min(calc(100% - 56px), 1440px);
	max-width: 1440px;
	min-height: 70px;
	grid-template-columns: 106px minmax(430px, 1fr) minmax(290px, 340px) 168px;
	align-items: center;
	gap: 18px;
	margin-inline: auto;
	padding: 0;
}

body.grz-brand-razer-gold .grz-brand {
	width: 104px;
	color: #fff;
}

body.grz-brand-razer-gold .grz-brand__image {
	max-width: 104px;
	max-height: 40px;
	filter: brightness(0) invert(1);
}

body.grz-brand-razer-gold :is(.grz-brand__main, .grz-brand__sub) {
	color: #fff;
	-webkit-text-fill-color: #fff;
}

body.grz-brand-razer-gold .grz-primary-menu {
	display: flex;
	align-items: stretch;
	gap: 3px;
	margin: 0;
	padding: 0;
}

body.grz-brand-razer-gold .grz-primary-menu > li > a {
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	margin-block: 7px;
	padding-inline: 10px;
	border: 1px solid transparent;
	border-radius: 8px;
	box-shadow: none;
	color: #fff;
	font-size: 11px;
	font-weight: 760;
	text-decoration: none;
	transform: none;
}

body.grz-brand-razer-gold .grz-primary-menu > li > a:is(:hover, :focus-visible) {
	border-color: color-mix(in srgb, var(--grz-razer) 20%, transparent);
	background: color-mix(in srgb, var(--grz-razer) 8%, transparent);
	color: #fff;
}

body.grz-brand-razer-gold .grz-primary-menu > li.current-menu-item > a,
body.grz-brand-razer-gold .grz-primary-menu > li.current-menu-ancestor > a,
body.grz-brand-razer-gold .grz-primary-menu > li:has(> a[href*="gift-card"]) > a,
body.grz-brand-razer-gold .grz-primary-menu > li:has(> a[href*="game-card"]) > a {
	position: relative;
	border-color: color-mix(in srgb, var(--grz-razer) 13%, transparent);
	background: color-mix(in srgb, var(--grz-razer) 11%, transparent);
	box-shadow: none;
	color: #fff;
}

body.grz-brand-razer-gold .grz-primary-menu > li.current-menu-item > a::after,
body.grz-brand-razer-gold .grz-primary-menu > li.current-menu-ancestor > a::after,
body.grz-brand-razer-gold .grz-primary-menu > li:has(> a[href*="gift-card"]) > a::after,
body.grz-brand-razer-gold .grz-primary-menu > li:has(> a[href*="game-card"]) > a::after {
	position: absolute;
	inset-inline: -1px;
	bottom: -14px;
	height: 3px;
	border-radius: 999px;
	background: var(--grz-razer-bright);
	box-shadow: 0 0 8px rgba(57, 242, 41, .28);
	content: "";
}

body.grz-brand-razer-gold .grz-product-search {
	width: 100%;
	max-width: 340px;
	justify-self: end;
}

body.grz-brand-razer-gold .grz-product-search input {
	width: 100%;
	height: 42px;
	min-height: 42px;
	border: 1px solid color-mix(in srgb, var(--grz-razer) 34%, transparent);
	border-radius: 8px;
	background: rgba(0, 8, 4, .42);
	box-shadow: none;
	color: #fff;
	font-size: 12px;
	padding-inline: 14px 46px;
}

body.grz-brand-razer-gold .grz-product-search input::placeholder {
	color: rgba(255, 255, 255, .64);
	opacity: 1;
}

body.grz-brand-razer-gold .grz-product-search button {
	inset-inline-end: 4px;
	width: 34px;
	height: 34px;
	border: 0;
	background: transparent;
	color: #fff;
}

body.grz-brand-razer-gold .grz-header-actions {
	position: relative;
	display: flex;
	width: 168px;
	height: 58px;
	min-width: 168px;
	align-items: center;
	justify-content: flex-end;
	gap: 4px;
	padding-top: 18px;
}

body.grz-brand-razer-gold .grz-mobile-search-button {
	display: none;
}

body.grz-brand-razer-gold .grz-razer-header-locales {
	position: absolute;
	top: 0;
	right: 0;
	display: inline-flex;
	height: 19px;
	align-items: center;
	gap: 2px;
	margin: 0;
}

body.grz-brand-razer-gold .grz-razer-locale {
	display: inline-flex;
	min-width: 0;
	height: 19px;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 0 4px;
	border: 1px solid transparent;
	border-radius: 8px;
	background: transparent;
	color: #fff;
	font-size: 9.5px;
	font-weight: 760;
	line-height: 1;
	text-decoration: none;
}

body.grz-brand-razer-gold .grz-razer-locale .grz-locale-country-flag {
	display: inline-flex;
	width: 14px;
	height: 14px;
	flex: 0 0 14px;
	overflow: hidden;
	border-radius: 50%;
}

body.grz-brand-razer-gold .grz-razer-locale .grz-flag-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

body.grz-brand-razer-gold .grz-razer-locale .grz-icon {
	width: 12px;
	height: 12px;
}

body.grz-brand-razer-gold .grz-razer-locale:is(:hover, :focus-visible) {
	border-color: color-mix(in srgb, var(--grz-razer) 46%, transparent);
	background: color-mix(in srgb, var(--grz-razer) 10%, transparent);
	color: var(--grz-razer-bright);
}

body.grz-brand-razer-gold .grz-header-actions .grz-icon-button {
	display: inline-grid;
	width: 34px;
	height: 34px;
	min-height: 34px;
	place-items: center;
	border: 1px solid transparent;
	border-radius: 8px;
	background: transparent;
	box-shadow: none;
	color: #fff;
}

body.grz-brand-razer-gold .grz-header-actions .grz-icon-button .grz-icon {
	width: 19px;
	height: 19px;
}

body.grz-brand-razer-gold .grz-header-actions .grz-icon-button:is(:hover, :focus-visible) {
	border-color: color-mix(in srgb, var(--grz-razer) 52%, transparent);
	background: color-mix(in srgb, var(--grz-razer) 12%, transparent);
	box-shadow: none;
	color: var(--grz-razer-bright);
	transform: none;
}

body.grz-brand-razer-gold .grz-cart-count {
	border-color: var(--grz-razer-deeper);
}

body.grz-brand-razer-gold .grz-sign-in {
	display: inline-flex;
	height: 34px;
	min-height: 34px;
	align-items: center;
	justify-content: center;
	padding: 0 11px;
	border: 1px solid color-mix(in srgb, var(--grz-razer) 50%, transparent);
	border-radius: 8px;
	background: color-mix(in srgb, var(--grz-razer) 5.5%, transparent);
	box-shadow: none;
	color: var(--grz-razer-bright);
	font-size: 10.5px;
	font-weight: 780;
	text-decoration: none;
}

body.grz-brand-razer-gold .grz-sign-in:is(:hover, :focus-visible) {
	border-color: var(--grz-razer-bright);
	background: var(--grz-razer);
	box-shadow: 0 10px 28px rgba(52, 218, 48, .22);
	color: #00150b;
	transform: translateY(-1px);
}

/* Hero: transparent because the body owns the one uninterrupted page image. */
body.grz-brand-razer-gold .grz-blp-shell {
	box-sizing: border-box;
	width: min(calc(100% - 112px), 1320px);
	max-width: 1320px;
	margin-inline: auto;
}

body.grz-brand-razer-gold .grz-blp--hero-integrated .grz-blp-hero {
	position: relative;
	min-height: 680px;
	background: transparent;
}

body.grz-brand-razer-gold .grz-blp--hero-integrated .grz-blp-hero::before {
	position: absolute;
	z-index: 1;
	inset: 0;
	background: linear-gradient(90deg, rgba(0, 11, 6, .05), transparent 52%, rgba(0, 8, 4, .04));
	content: "";
	pointer-events: none;
}

body.grz-brand-razer-gold .grz-blp--hero-integrated .grz-blp-hero::after {
	display: none;
	background: none;
	content: none;
}

body.grz-brand-razer-gold .grz-blp-hero > .grz-blp-shell {
	position: relative;
	z-index: 2;
	padding-top: 12px;
}

body.grz-brand-razer-gold .grz-blp-breadcrumb {
	display: flex;
	min-height: 30px;
	align-items: center;
	gap: 9px;
	color: rgba(235, 255, 241, .64);
	font-size: 11px;
}

body.grz-brand-razer-gold .grz-blp-breadcrumb :is(a, b) {
	color: inherit;
	text-decoration: none;
}

body.grz-brand-razer-gold .grz-blp-hero__grid {
	display: grid;
	min-height: 620px;
	grid-template-columns: minmax(440px, .84fr) minmax(520px, 1.16fr);
	align-items: center;
	gap: 28px;
	padding: 22px 28px 42px;
}

body.grz-brand-razer-gold .grz-blp-hero__copy {
	max-width: 490px;
}

body.grz-brand-razer-gold .grz-blp-brand-lockup {
	display: block;
	width: auto;
	max-width: 182px;
	height: 60px;
	margin: 0 0 24px;
	object-fit: contain;
	object-position: left center;
	mix-blend-mode: lighten;
}

body.grz-brand-razer-gold .grz-blp-hero__copy h1 {
	max-width: 500px;
	margin: 0;
	color: #fff;
	font-size: clamp(46px, 3.55vw, 56px);
	font-weight: 820;
	letter-spacing: -.04em;
	line-height: 1.04;
}

body.grz-brand-razer-gold .grz-blp-hero__copy h1 :is(span, strong) {
	display: block;
}

body.grz-brand-razer-gold .grz-blp-hero__copy h1 strong {
	color: var(--grz-razer-bright);
}

body.grz-brand-razer-gold .grz-blp-hero__copy > p {
	max-width: 455px;
	margin: 17px 0 0;
	color: #fff;
	font-size: 18px;
	font-weight: 580;
	line-height: 1.42;
}

body.grz-brand-razer-gold .grz-blp-hero__copy > .grz-blp-hero__secondary {
	max-width: 445px;
	margin-top: 15px;
	color: rgba(255, 255, 255, .82);
	font-size: 14px;
	font-weight: 450;
	line-height: 1.5;
}

body.grz-brand-razer-gold .grz-blp-assurances {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
	margin-top: 28px;
}

body.grz-brand-razer-gold .grz-blp-assurances > span {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	column-gap: 9px;
}

body.grz-brand-razer-gold .grz-blp-assurances .grz-icon {
	grid-row: 1 / 3;
	width: 25px;
	height: 25px;
	color: var(--grz-razer);
}

body.grz-brand-razer-gold .grz-blp-assurances b {
	color: #fff;
	font-size: 12px;
	line-height: 1.3;
}

body.grz-brand-razer-gold .grz-blp-assurances small {
	color: rgba(255, 255, 255, .62);
	font-size: 10px;
	line-height: 1.3;
}

body.grz-brand-razer-gold .grz-blp-hero__products {
	min-height: 500px;
}

/* Finder: approved glass panel and compact five-column open catalogue. */
body.grz-brand-razer-gold .grz-blp-body {
	padding: 0 0 26px;
	background: transparent;
}

body.grz-brand-razer-gold .grz-blp-body::before {
	display: none;
}

body.grz-brand-razer-gold .grz-blp-body > .grz-blp-shell {
	position: static;
}

body.grz-brand-razer-gold .grz-blp-finder {
	box-sizing: border-box;
	padding: 28px 30px 30px;
	border: 1px solid var(--grz-razer-line);
	border-radius: 14px;
	background: var(--grz-razer-panel);
	box-shadow: 0 26px 64px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .04);
	backdrop-filter: blur(14px);
}

body.grz-brand-razer-gold .grz-blp-finder__header {
	display: block;
	min-height: 48px;
	margin: 0;
	padding: 0;
	border: 0;
}

body.grz-brand-razer-gold .grz-blp-finder__toolbar {
	display: flex;
	min-width: 0;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin: 15px 0 25px;
	padding: 10px;
	border: 1px solid color-mix(in srgb, var(--grz-razer) 20%, transparent);
	border-radius: 12px;
	background: rgba(0, 22, 11, .34);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

body.grz-brand-razer-gold .grz-blp-finder h2 {
	margin: 0;
	color: #fff;
	font-size: 28px;
	font-weight: 810;
	letter-spacing: -.03em;
	line-height: 1.12;
}

body.grz-brand-razer-gold .grz-blp-search {
	display: flex;
	box-sizing: border-box;
	width: 340px;
	height: 50px;
	align-items: center;
	gap: 10px;
	padding: 0 14px;
	border: 1px solid color-mix(in srgb, var(--grz-razer) 39%, transparent);
	border-radius: 10px;
	background: rgba(0, 10, 5, .22);
	color: rgba(255, 255, 255, .76);
}

body.grz-brand-razer-gold .grz-blp-search .grz-icon {
	width: 17px;
	height: 17px;
}

body.grz-brand-razer-gold .grz-blp-search input {
	width: 100%;
	min-width: 0;
	border: 0;
	outline: 0;
	background: transparent;
	box-shadow: none;
	color: #fff;
	font-size: 12px;
}

body.grz-brand-razer-gold .grz-blp-search input::placeholder {
	color: rgba(255, 255, 255, .7);
	opacity: 1;
}

body.grz-brand-razer-gold .grz-blp-filters {
	display: flex;
	min-width: 0;
	flex: 1 1 auto;
	flex-wrap: nowrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	border: 0;
}

body.grz-brand-razer-gold .grz-blp-filters button {
	min-height: 42px;
	padding: 0 20px;
	border: 1px solid color-mix(in srgb, var(--grz-razer) 42%, transparent);
	border-radius: 10px;
	background: rgba(0, 18, 9, .34);
	box-shadow: none;
	color: rgba(255, 255, 255, .9);
	font-size: 14px;
	font-weight: 760;
	line-height: 1;
}

body.grz-brand-razer-gold .grz-blp-filters button:is(:hover, :focus-visible),
body.grz-brand-razer-gold .grz-blp-filters button.is-active {
	border-color: var(--grz-razer);
	background: var(--grz-razer);
	box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--grz-razer-bright) 62%, transparent), 0 8px 25px color-mix(in srgb, var(--grz-razer) 24%, transparent);
	color: #fff;
	transform: none;
}

body.grz-brand-razer-gold .grz-blp-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 27px 25px;
	margin: 0;
	padding: 0;
	border: 0;
}

body.grz-brand-razer-gold .grz-blp-card {
	min-width: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	transition: transform .24s ease;
}

body.grz-brand-razer-gold .grz-blp-card__link {
	display: block;
	min-height: 0;
	color: inherit;
	text-decoration: none;
}

body.grz-brand-razer-gold .grz-blp-card__art {
	position: relative;
	display: grid;
	height: 194px;
	min-height: 194px;
	place-items: center;
	padding: 0;
	overflow: visible;
	border: 1px solid transparent;
	border-radius: 10px;
	background: transparent;
	transition: border-color .24s ease, background .24s ease, box-shadow .24s ease, transform .24s ease;
}

body.grz-brand-razer-gold .grz-blp-card__art > img:not(.grz-blp-card__flag) {
	position: static;
	display: block;
	width: 150px;
	height: 168px;
	max-width: 150px;
	max-height: 168px;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	filter: none;
	mix-blend-mode: normal;
	opacity: 1;
	object-fit: contain;
	object-position: center;
	pointer-events: auto;
	transition: filter .24s ease, transform .24s ease;
}

body.grz-brand-razer-gold .grz-blp-card__art::before,
body.grz-brand-razer-gold .grz-blp-card__art::after {
	display: none;
	content: none;
}

body.grz-brand-razer-gold .grz-blp-card__flag,
body.grz-brand-razer-gold .grz-blp-card__global {
	position: absolute;
	z-index: 3;
	top: 21px;
	right: calc(50% - 68px);
}

body.grz-brand-razer-gold .grz-blp-card__flag {
	display: block;
	width: 28px;
	height: 19px;
	min-height: 0;
	border: 1px solid rgba(255, 255, 255, .76);
	border-radius: 3px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, .22);
	object-fit: cover;
}

body.grz-brand-razer-gold .grz-blp-card__global {
	display: grid;
	width: 26px;
	height: 26px;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 50%;
	background: rgba(0, 17, 8, .76);
	color: #fff;
}

body.grz-brand-razer-gold .grz-blp-card__global .grz-icon {
	width: 14px;
	height: 14px;
}

body.grz-brand-razer-gold .grz-blp-card__content {
	display: block;
	width: 157px;
	margin-inline: auto;
	padding: 10px 0 0;
}

body.grz-brand-razer-gold .grz-blp-card__content > strong {
	display: -webkit-box;
	min-height: 32px;
	overflow: hidden;
	color: #fff;
	font-size: 12px;
	font-weight: 760;
	line-height: 1.34;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

body.grz-brand-razer-gold .grz-blp-card__region {
	display: block;
	margin-top: 3px;
	color: rgba(255, 255, 255, .57);
	font-size: 10.5px;
	line-height: 1.35;
}

body.grz-brand-razer-gold .grz-blp-card__meta {
	display: none;
}

body.grz-brand-razer-gold .grz-blp-card__meta .grz-icon {
	width: 12px;
	height: 12px;
}

body.grz-brand-razer-gold .grz-blp-card__meta em {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	margin-inline-start: 7px;
	color: rgba(255, 255, 255, .82);
	font-style: normal;
}

body.grz-brand-razer-gold .grz-blp-card:is(:hover, :focus-within) {
	transform: translateY(-5px);
}

body.grz-brand-razer-gold .grz-blp-card:is(:hover, :focus-within) .grz-blp-card__art {
	border-color: transparent;
	background: transparent;
	box-shadow: none;
}

body.grz-brand-razer-gold .grz-blp-card:is(:hover, :focus-within) .grz-blp-card__art > img:not(.grz-blp-card__flag) {
	filter: drop-shadow(0 14px 18px rgba(40, 238, 49, .24));
	transform: scale(1.025);
}

/* Information and guide panels. */
body.grz-brand-razer-gold .grz-blp-info-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	margin-top: 20px;
	padding: 28px 24px;
	border: 1px solid color-mix(in srgb, var(--grz-razer) 38%, transparent);
	border-radius: 14px;
	background: rgba(3, 39, 18, .67);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .12);
	backdrop-filter: blur(14px);
}

body.grz-brand-razer-gold .grz-blp-info-grid article {
	display: grid;
	min-height: 210px;
	grid-template-columns: 38px minmax(0, 1fr);
	align-content: start;
	padding: 0 26px;
}

body.grz-brand-razer-gold .grz-blp-info-grid article + article {
	border-inline-start: 1px solid color-mix(in srgb, var(--grz-razer) 24%, transparent);
}

body.grz-brand-razer-gold .grz-blp-info-icon {
	display: grid;
	width: 30px;
	height: 30px;
	grid-column: 1;
	grid-row: 1;
	place-items: center;
	border: 1px solid rgba(255, 222, 76, .72);
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #fff3a2 0 8%, #ffd83d 18%, #d99a00 72%, #7c4800 100%);
	box-shadow: 0 5px 14px rgba(255, 190, 0, .16), inset 0 0 0 2px rgba(255, 247, 169, .25);
	color: #173c0d;
}

body.grz-brand-razer-gold .grz-blp-info-grid h3 {
	grid-column: 2;
	grid-row: 1;
	align-self: center;
	margin: 0;
	color: #fff;
	font-size: 17px;
	line-height: 1.3;
}

body.grz-brand-razer-gold .grz-blp-info-grid :is(p, ul, ol) {
	grid-column: 1 / -1;
	margin: 18px 0 0;
	color: rgba(255, 255, 255, .73);
	font-size: 12px;
	line-height: 1.55;
}

body.grz-brand-razer-gold .grz-blp-info-grid p + p {
	margin-top: 8px;
}

body.grz-brand-razer-gold .grz-blp-info-grid :is(ul, ol) {
	display: grid;
	gap: 7px;
	padding: 0;
	list-style: none;
}

body.grz-brand-razer-gold .grz-blp-info-grid li {
	display: flex;
	align-items: center;
	gap: 7px;
}

body.grz-brand-razer-gold .grz-blp-info-grid li > .grz-icon,
body.grz-brand-razer-gold .grz-blp-info-grid ol li::before {
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	color: var(--grz-razer);
}

body.grz-brand-razer-gold .grz-blp-info-grid ol {
	counter-reset: grz-razer-step;
}

body.grz-brand-razer-gold .grz-blp-info-grid ol li {
	counter-increment: grz-razer-step;
}

body.grz-brand-razer-gold .grz-blp-info-grid ol li::before {
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--grz-razer);
	color: #fff;
	font-size: 9px;
	font-weight: 800;
	content: counter(grz-razer-step);
}

body.grz-brand-razer-gold .grz-blp-guides {
	margin: 20px 0 0;
	padding: 20px 22px 23px;
	border: 1px solid color-mix(in srgb, var(--grz-razer) 38%, transparent);
	border-radius: 14px;
	background: rgba(3, 39, 18, .67);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .12);
	backdrop-filter: blur(14px);
}

body.grz-brand-razer-gold .grz-blp-guides h2 {
	margin: 0 0 18px;
	color: #fff;
	font-size: 20px;
}

body.grz-brand-razer-gold .grz-blp-guides__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

body.grz-brand-razer-gold .grz-blp-guides__grid > a {
	position: relative;
	display: grid;
	min-height: 162px;
	grid-template-columns: minmax(0, 1fr) 28px;
	grid-template-rows: 100px auto auto;
	padding: 0;
	overflow: hidden;
	border: 1px solid color-mix(in srgb, var(--grz-razer) 32%, transparent);
	border-radius: 11px;
	background: rgba(0, 0, 0, .16);
	color: #fff;
	text-decoration: none;
	transition: border-color .25s ease, background .25s ease, box-shadow .25s ease, transform .25s ease;
}

body.grz-brand-razer-gold .grz-blp-guide-art {
	display: block;
	width: 100%;
	height: 100px;
	grid-column: 1 / -1;
	grid-row: 1;
	overflow: hidden;
}

body.grz-brand-razer-gold .grz-blp-guide-art img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: filter .3s ease, transform .3s ease;
}

body.grz-brand-razer-gold .grz-blp-guides__grid b,
body.grz-brand-razer-gold .grz-blp-guides__grid small {
	grid-column: 1;
	padding-inline: 14px 4px;
}

body.grz-brand-razer-gold .grz-blp-guides__grid b {
	grid-row: 2;
	align-self: end;
	padding-top: 9px;
	font-size: 13px;
}

body.grz-brand-razer-gold .grz-blp-guides__grid small {
	grid-row: 3;
	align-self: start;
	padding-bottom: 10px;
	color: rgba(255, 255, 255, .58);
	font-size: 10px;
}

body.grz-brand-razer-gold .grz-blp-guides__grid > a > .grz-icon {
	grid-column: 2;
	grid-row: 2 / 4;
	align-self: center;
	justify-self: center;
	color: #fff;
}

body.grz-brand-razer-gold .grz-blp-guides__grid > a:is(:hover, :focus-visible) {
	border-color: var(--grz-razer-bright);
	background: rgba(34, 196, 39, .09);
	box-shadow: 0 16px 30px rgba(32, 218, 40, .13);
	transform: translateY(-4px);
}

body.grz-brand-razer-gold .grz-blp-guides__grid > a:is(:hover, :focus-visible) .grz-blp-guide-art img {
	filter: saturate(1.08) brightness(1.06);
	transform: scale(1.035);
}

/* Footer: continuous dark Razer surface; never inherit the light footer. */
body.grz-brand-razer-gold .grz-footer,
body.grz-brand-razer-gold .grz-footer__shell,
body.grz-brand-razer-gold .grz-footer-main,
body.grz-brand-razer-gold .grz-footer-bottom {
	margin: 0;
	background: var(--grz-razer-deeper);
	color: #fff;
}

body.grz-brand-razer-gold .grz-footer {
	padding: 0;
}

body.grz-brand-razer-gold .grz-footer__shell {
	overflow: hidden;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

body.grz-brand-razer-gold .grz-footer-trust {
	background: linear-gradient(135deg, #064fc7 0%, #0878f2 100%);
	color: #fff;
}

body.grz-brand-razer-gold .grz-footer-trust::after,
body.grz-brand-razer-gold :is(.grz-footer-main, .grz-footer-bottom)::before,
body.grz-brand-razer-gold :is(.grz-footer-main, .grz-footer-bottom)::after {
	display: none;
}

body.grz-brand-razer-gold .grz-footer-trust__track,
body.grz-brand-razer-gold .grz-footer-main__grid,
body.grz-brand-razer-gold .grz-footer-bottom__row,
body.grz-brand-razer-gold .grz-footer-copyright {
	box-sizing: border-box;
	width: min(calc(100% - 112px), 1320px);
	max-width: 1320px;
	margin-inline: auto;
}

body.grz-brand-razer-gold .grz-footer-main {
	padding: 24px 0 18px;
	border-top: 1px solid color-mix(in srgb, var(--grz-razer) 16%, transparent);
}

body.grz-brand-razer-gold .grz-footer-main__grid {
	grid-template-columns: 1.35fr repeat(4, minmax(120px, .78fr)) 1.25fr;
	gap: 24px;
}

body.grz-brand-razer-gold .grz-brand--footer .grz-brand__image {
	filter: brightness(0) invert(1);
}

body.grz-brand-razer-gold :is(.grz-footer-column h2, .grz-footer-support h2, .grz-footer-apps h3, .grz-payment-methods strong, .grz-social-links strong, .grz-footer-media__label) {
	color: #fff;
}

body.grz-brand-razer-gold .grz-footer-column h2 .grz-icon,
body.grz-brand-razer-gold .grz-footer-support__links a .grz-icon,
body.grz-brand-razer-gold .grz-footer-copyright .grz-icon {
	color: var(--grz-razer);
}

body.grz-brand-razer-gold :is(.grz-footer-brand p, .grz-footer-menu a, .grz-footer-support > p, .grz-footer-apps p, .grz-footer-locales, .grz-footer-copyright, .grz-footer-media__label) {
	color: rgba(232, 255, 239, .68);
}

body.grz-brand-razer-gold .grz-footer-menu a:is(:hover, :focus-visible) {
	color: var(--grz-razer-bright);
}

body.grz-brand-razer-gold :is(.grz-footer-main, .grz-footer-bottom, .grz-footer-support, .grz-footer-trustpilot, .grz-footer-copyright, .grz-social-links) {
	border-color: rgba(255, 255, 255, .13);
}

body.grz-brand-razer-gold :is(.grz-footer-brand__badge, .grz-footer-support__links a, .grz-footer-apps__buttons a, .grz-payment-methods span, .grz-social-links a, .grz-footer-locales .grz-locale-link) {
	border-color: color-mix(in srgb, var(--grz-razer) 24%, transparent);
	background: rgba(255, 255, 255, .05);
	box-shadow: none;
	color: #fff;
}

body.grz-brand-razer-gold :is(.grz-footer-brand__badge, .grz-footer-support__links a, .grz-footer-apps__buttons a, .grz-social-links a, .grz-footer-locales .grz-locale-link):is(:hover, :focus-visible) {
	border-color: color-mix(in srgb, var(--grz-razer) 58%, transparent);
	background: color-mix(in srgb, var(--grz-razer) 12%, transparent);
	color: var(--grz-razer-bright);
}

body.grz-brand-razer-gold .grz-footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, .1);
}

@media (max-width: 1320px) {
	body.grz-brand-razer-gold .grz-main-header__inner {
		width: min(calc(100% - 40px), 1240px);
		grid-template-columns: 94px minmax(360px, 1fr) minmax(230px, 280px) 164px;
		gap: 10px;
	}

	body.grz-brand-razer-gold .grz-primary-menu > li > a {
		padding-inline: 12px;
	}
}

@media (max-width: 1120px) {
	body.grz-brand-razer-gold {
		--grz-razer-shell-half: calc(50vw - 24px);
	}

	body.grz-brand-razer-gold .grz-main-header__inner {
		width: min(calc(100% - 30px), 1040px);
		grid-template-columns: 40px 104px minmax(0, 1fr) auto;
	}

	body.grz-brand-razer-gold .grz-primary-nav,
	body.grz-brand-razer-gold .grz-product-search,
	body.grz-brand-razer-gold .grz-razer-header-locales,
	body.grz-brand-razer-gold .grz-sign-in {
		display: none;
	}

	body.grz-brand-razer-gold .grz-header-actions {
		width: auto;
		height: auto;
		min-width: 0;
		padding-top: 0;
	}

	body.grz-brand-razer-gold .grz-mobile-search-button {
		display: inline-grid;
	}

	body.grz-brand-razer-gold .grz-blp-shell,
	body.grz-brand-razer-gold .grz-footer-trust__track,
	body.grz-brand-razer-gold .grz-footer-main__grid,
	body.grz-brand-razer-gold .grz-footer-bottom__row,
	body.grz-brand-razer-gold .grz-footer-copyright {
		width: min(calc(100% - 48px), 1080px);
	}

	body.grz-brand-razer-gold .grz-blp-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	body.grz-brand-razer-gold .grz-footer-main__grid {
		grid-template-columns: 1.3fr repeat(4, minmax(110px, .78fr));
	}

	body.grz-brand-razer-gold .grz-footer-support {
		grid-column: 1 / -1;
		padding: 18px 0 0;
		border-inline-start: 0;
		border-top: 1px solid rgba(255, 255, 255, .12);
	}
}

@media (max-width: 720px) {
	body.grz-brand-razer-gold {
		--grz-razer-page-art-width: auto;
		--grz-razer-shell-half: 0px;
		background-image: var(--grz-blp-hero);
		background-attachment: scroll;
		/* Keep the hero cards in the right visual lane, clear of the mobile copy. */
		background-position: 42% top;
		background-size: auto 1500px;
	}
	body.grz-brand-razer-gold .grz-main-header__inner {
		width: min(calc(100% - 24px), 680px);
		min-height: 60px;
		grid-template-columns: 38px minmax(0, 1fr) auto;
	}

	body.grz-brand-razer-gold .grz-main-header__inner > .grz-brand {
		justify-self: start;
	}

	body.grz-brand-razer-gold .grz-blp-shell,
	body.grz-brand-razer-gold .grz-footer-trust__track,
	body.grz-brand-razer-gold .grz-footer-main__grid,
	body.grz-brand-razer-gold .grz-footer-bottom__row,
	body.grz-brand-razer-gold .grz-footer-copyright {
		width: min(calc(100% - 26px), 680px);
	}

	body.grz-brand-razer-gold .grz-blp--hero-integrated .grz-blp-hero {
		min-height: 0;
		background: transparent;
	}

	body.grz-brand-razer-gold .grz-blp-hero__grid {
		min-height: 0;
		grid-template-columns: 1fr;
		padding: 20px 0 28px;
	}

	body.grz-brand-razer-gold .grz-blp-hero__copy h1 {
		font-size: clamp(37px, 11vw, 49px);
	}

	body.grz-brand-razer-gold .grz-blp-hero__copy > p {
		font-size: 15px;
	}

	body.grz-brand-razer-gold .grz-blp-assurances {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	body.grz-brand-razer-gold .grz-blp-hero__products {
		display: none;
	}

	body.grz-brand-razer-gold .grz-blp-finder {
		padding: 21px 14px 24px;
		border-radius: 12px;
	}

	body.grz-brand-razer-gold .grz-blp-finder h2 {
		font-size: 23px;
	}

	body.grz-brand-razer-gold .grz-blp-finder__toolbar {
		align-items: stretch;
		flex-direction: column-reverse;
		gap: 10px;
		margin-block: 13px 21px;
		padding: 9px;
	}

	body.grz-brand-razer-gold .grz-blp-search {
		width: 100%;
	}

	body.grz-brand-razer-gold .grz-blp-filters {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding: 0 0 3px;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
	}

	body.grz-brand-razer-gold .grz-blp-filters::-webkit-scrollbar {
		display: none;
	}

	body.grz-brand-razer-gold .grz-blp-filters button {
		flex: 0 0 auto;
		min-height: 44px;
		padding-inline: 18px;
		scroll-snap-align: start;
	}

	body.grz-brand-razer-gold .grz-blp-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 22px 12px;
	}

	body.grz-brand-razer-gold .grz-blp-card__art {
		height: 159px;
		min-height: 159px;
	}

	body.grz-brand-razer-gold .grz-blp-card__art > img:not(.grz-blp-card__flag) {
		width: 122px;
		height: 137px;
		max-width: 122px;
		max-height: 137px;
	}

	body.grz-brand-razer-gold .grz-blp-card__content {
		width: 127px;
	}

	body.grz-brand-razer-gold .grz-blp-card__flag,
	body.grz-brand-razer-gold .grz-blp-card__global {
		top: 18px;
		right: calc(50% - 55px);
	}

	body.grz-brand-razer-gold .grz-blp-info-grid,
	body.grz-brand-razer-gold .grz-blp-guides__grid {
		grid-template-columns: 1fr;
	}

	body.grz-brand-razer-gold .grz-blp-info-grid {
		padding: 10px 18px;
	}

	body.grz-brand-razer-gold .grz-blp-info-grid article {
		min-height: 0;
		padding: 20px 0;
	}

	body.grz-brand-razer-gold .grz-blp-info-grid article + article {
		border-inline-start: 0;
		border-top: 1px solid color-mix(in srgb, var(--grz-razer) 24%, transparent);
	}

	body.grz-brand-razer-gold .grz-blp-guides {
		padding: 18px 14px;
	}

	body.grz-brand-razer-gold .grz-blp-guides__grid > a {
		grid-template-rows: 94px auto auto;
		min-height: 158px;
	}

	body.grz-brand-razer-gold .grz-blp-guide-art {
		height: 94px;
	}

	body.grz-brand-razer-gold .grz-footer-trust__track {
		display: flex;
		overflow-x: auto;
		padding: 0;
	}

	body.grz-brand-razer-gold .grz-footer-trust__item {
		min-width: 230px;
	}

	body.grz-brand-razer-gold .grz-footer-main__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	body.grz-brand-razer-gold :is(.grz-footer-brand, .grz-footer-support) {
		grid-column: 1 / -1;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.grz-brand-razer-gold .grz-blp-card,
	body.grz-brand-razer-gold .grz-blp-card__art,
	body.grz-brand-razer-gold .grz-blp-card__art img,
	body.grz-brand-razer-gold .grz-blp-guides__grid > a,
	body.grz-brand-razer-gold .grz-blp-guide-art img {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
 * Shared approved platform system
 * ---------------------------------------------------------------------- */

/*
 * Razer keeps its shell-anchored source composition. Every other platform
 * uses a true 2400px single-page raster centred on the viewport, so artwork
 * never repeats, splits at the catalogue, or leaves a hard edge at wide zoom.
 */
body.grz-brand-approved-immersive:not(.grz-brand-key-razer-gold) {
	position: relative;
	isolation: isolate;
	background-color: var(--grz-razer-deeper);
	background-image: none;
}

/*
 * Non-Razer platform art is a single fixed high-resolution canvas. It covers
 * the viewport for the whole scroll journey instead of ending after 1566px,
 * and it uses the lossless PNG source rather than the compressed preview JPG.
 */
body.grz-brand-approved-immersive:not(.grz-brand-key-razer-gold)::before {
	position: fixed;
	z-index: -2;
	inset: 0;
	background-color: var(--grz-razer-deeper);
	background-image: var(--grz-blp-page, var(--grz-blp-hero));
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	content: "";
	pointer-events: none;
	transform: translateZ(0);
}

body.grz-brand-approved-immersive:not(.grz-brand-key-razer-gold) .grz-blp-hero {
	position: relative;
	min-height: 680px;
	background: transparent;
}

body.grz-brand-approved-immersive:not(.grz-brand-key-razer-gold) .grz-blp-hero::before {
	position: absolute;
	z-index: 1;
	inset: 0;
	background: linear-gradient(90deg, color-mix(in srgb, var(--grz-razer-deeper) 54%, transparent), transparent 58%);
	content: "";
	pointer-events: none;
}

body.grz-brand-approved-immersive:not(.grz-brand-key-razer-gold) .grz-blp-hero::after {
	display: none;
}

body.grz-brand-approved-immersive:not(.grz-brand-key-razer-gold) .grz-blp-hero__products {
	display: flex;
	min-height: 500px;
	align-items: center;
	justify-content: center;
	gap: 0;
	perspective: 1000px;
}

body.grz-brand-approved-immersive:not(.grz-brand-key-razer-gold) .grz-blp-hero__product {
	display: block;
	width: 190px;
	height: 260px;
	border: 1px solid color-mix(in srgb, white 50%, transparent);
	border-radius: 18px;
	box-shadow: 0 28px 70px rgba(0, 0, 0, .38);
	object-fit: cover;
	object-position: center;
}

body.grz-brand-approved-immersive:not(.grz-brand-key-razer-gold) .grz-blp-hero__product--1 {
	margin-right: -58px;
	transform: rotate(-8deg) translateY(18px);
}

body.grz-brand-approved-immersive:not(.grz-brand-key-razer-gold) .grz-blp-hero__product--2 {
	z-index: 2;
	transform: translateY(-7px);
}

body.grz-brand-approved-immersive:not(.grz-brand-key-razer-gold) .grz-blp-hero__product--3 {
	margin-left: -58px;
	transform: rotate(8deg) translateY(18px);
}

/* Panels and micro-interactions inherit each platform's palette. */
body.grz-brand-approved-immersive .grz-blp-finder__toolbar {
	background: color-mix(in srgb, var(--grz-razer-deeper) 72%, transparent);
}

body.grz-brand-approved-immersive :is(.grz-blp-info-grid, .grz-blp-guides) {
	background: color-mix(in srgb, var(--grz-razer-deep) 73%, transparent);
}

body.grz-brand-approved-immersive .grz-blp-info-icon {
	border-color: color-mix(in srgb, var(--grz-razer-bright) 62%, transparent);
	background: radial-gradient(circle at 35% 30%, color-mix(in srgb, white 86%, var(--grz-razer)) 0 8%, var(--grz-razer-bright) 20%, var(--grz-razer) 74%, var(--grz-razer-deep) 100%);
	box-shadow: 0 5px 14px color-mix(in srgb, var(--grz-razer) 20%, transparent), inset 0 0 0 2px color-mix(in srgb, white 22%, transparent);
	color: #fff;
}

body.grz-brand-approved-immersive .grz-sign-in:is(:hover, :focus-visible) {
	box-shadow: 0 10px 28px color-mix(in srgb, var(--grz-razer) 22%, transparent);
	color: #fff;
}

@media (max-width: 1120px) {
	body.grz-brand-approved-immersive:not(.grz-brand-key-razer-gold)::before {
		background-position: 56% center;
	}

	body.grz-brand-approved-immersive:not(.grz-brand-key-razer-gold) .grz-blp-hero__product {
		width: 154px;
		height: 216px;
	}
}

@media (max-width: 720px) {
	body.grz-brand-approved-immersive:not(.grz-brand-key-razer-gold)::before {
		background-position: 62% center;
	}

	body.grz-brand-approved-immersive:not(.grz-brand-key-razer-gold) .grz-blp-hero {
		min-height: auto;
	}

	body.grz-brand-approved-immersive:not(.grz-brand-key-razer-gold) .grz-blp-hero__products {
		display: none;
	}

}

/* -------------------------------------------------------------------------
 * Native marketplace card system — all approved gift-card brands
 * ---------------------------------------------------------------------- */

/*
 * Every marketplace artwork is now a finished transparent PNG with its own
 * physical hanger slot. Keep the frame completely transparent and never add
 * a second CSS notch, mask, crop, blend mode, or enlargement.
 */
body.grz-brand-approved-immersive .grz-blp-card {
	min-width: 0;
	background: transparent;
}

body.grz-brand-approved-immersive .grz-blp-card__link {
	display: flex;
	min-width: 0;
	flex-direction: column;
	align-items: stretch;
}

body.grz-brand-approved-immersive .grz-blp-card__art {
	position: relative;
	display: grid;
	height: 194px;
	min-height: 194px;
	place-items: center;
	padding: 0;
	overflow: visible;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

body.grz-brand-approved-immersive .grz-blp-card__art::before,
body.grz-brand-approved-immersive .grz-blp-card__art::after {
	display: none;
	content: none;
}

body.grz-brand-approved-immersive .grz-blp-card__art > img:not(.grz-blp-card__flag) {
	position: static;
	display: block;
	width: 150px;
	height: 168px;
	max-width: 150px;
	max-height: 168px;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	filter: none;
	mix-blend-mode: normal;
	opacity: 1;
	object-fit: contain;
	object-position: center;
	transform: none;
	transform-origin: center;
	transition: filter .24s ease, transform .24s ease;
}

body.grz-brand-approved-immersive .grz-blp-card:is(:hover, :focus-within) .grz-blp-card__art > img:not(.grz-blp-card__flag) {
	filter: drop-shadow(0 14px 18px color-mix(in srgb, var(--grz-blp-accent) 24%, transparent));
	transform: scale(1.025);
}

body.grz-brand-approved-immersive .grz-blp-card__flag,
body.grz-brand-approved-immersive .grz-blp-card__global {
	top: 20px;
	right: max(8px, calc((100% - 150px) / 2 + 7px));
}

body.grz-brand-approved-immersive .grz-blp-card__content {
	width: 100%;
	min-width: 0;
}

body.grz-brand-approved-immersive .grz-blp-card__meta {
	display: none;
}

@media (max-width: 720px) {
	body.grz-brand-approved-immersive .grz-blp-card__art {
		height: 159px;
		min-height: 159px;
	}

	body.grz-brand-approved-immersive .grz-blp-card__art > img:not(.grz-blp-card__flag) {
		width: 122px;
		height: 137px;
		max-width: 122px;
		min-height: 137px;
		max-height: 137px;
	}

	body.grz-brand-approved-immersive .grz-blp-card__flag,
	body.grz-brand-approved-immersive .grz-blp-card__global {
		top: 15px;
		right: max(6px, calc((100% - 122px) / 2 + 5px));
	}
}

/* -------------------------------------------------------------------------
 * dev.111 — balanced marketplace cards and low-cost brand interactions
 * ---------------------------------------------------------------------- */

/*
 * Normalize the visible retail-card silhouette, not only its CSS box. The
 * Razer source contains more transparent top/bottom breathing room than the
 * other six packs, so it needs a small source-aware scale correction.
 */
body.grz-brand-approved-immersive {
	--grz-marketplace-pack-width: 150px;
	--grz-marketplace-pack-height: 168px;
	--grz-marketplace-copy-width: 174px;
	--grz-marketplace-hover: var(--grz-blp-accent-2, var(--grz-blp-accent));
}

body.grz-brand-approved-immersive.grz-brand-key-razer-gold {
	--grz-marketplace-pack-width: 160px;
	--grz-marketplace-pack-height: 179px;
	--grz-marketplace-hover: #5cff45;
}

body.grz-brand-approved-immersive.grz-brand-key-steam {
	--grz-marketplace-hover: #55c9ff;
}

body.grz-brand-approved-immersive.grz-brand-key-itunes {
	--grz-marketplace-hover: #ff79a4;
}

body.grz-brand-approved-immersive.grz-brand-key-nintendo {
	--grz-marketplace-hover: #ff6b77;
}

body.grz-brand-approved-immersive.grz-brand-key-playstation {
	--grz-marketplace-hover: #62b7ff;
}

body.grz-brand-approved-immersive.grz-brand-key-google-play {
	--grz-marketplace-hover: #61e49a;
}

body.grz-brand-approved-immersive.grz-brand-key-xbox {
	--grz-marketplace-hover: #83ed70;
}

body.grz-brand-approved-immersive .grz-blp-card {
	contain: layout paint style;
	content-visibility: auto;
	contain-intrinsic-size: 253px;
	transition: transform .18s ease;
}

body.grz-brand-approved-immersive .grz-blp-card__link {
	align-items: center;
}

body.grz-brand-approved-immersive .grz-blp-card__art > img:not(.grz-blp-card__flag) {
	width: var(--grz-marketplace-pack-width);
	height: var(--grz-marketplace-pack-height);
	max-width: var(--grz-marketplace-pack-width);
	max-height: var(--grz-marketplace-pack-height);
	transition: transform .18s ease;
}

body.grz-brand-approved-immersive .grz-blp-card__flag,
body.grz-brand-approved-immersive .grz-blp-card__global {
	right: max(8px, calc((100% - var(--grz-marketplace-pack-width)) / 2 + 7px));
}

body.grz-brand-approved-immersive .grz-blp-card__content {
	display: grid;
	width: min(100%, var(--grz-marketplace-copy-width));
	min-width: 0;
	justify-items: center;
	margin-inline: auto;
	padding-top: 8px;
	box-shadow: inset 0 -2px 0 transparent;
	text-align: center;
	transition: box-shadow .18s ease;
}

body.grz-brand-approved-immersive .grz-blp-card__content > strong {
	display: grid;
	width: 100%;
	height: 34px;
	min-height: 34px;
	place-items: center;
	overflow: hidden;
	color: #fff;
	font-size: 12px;
	font-weight: 760;
	line-height: 1.32;
	text-align: center;
	text-wrap: balance;
	transition: color .18s ease;
}

body.grz-brand-approved-immersive .grz-blp-card__region {
	display: block;
	width: 100%;
	min-height: 15px;
	margin-top: 3px;
	overflow: hidden;
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Brand-coloured response without animated blur or filter work. */
body.grz-brand-approved-immersive .grz-blp-card:is(:hover, :focus-within) {
	transform: translateY(-3px);
}

body.grz-brand-approved-immersive .grz-blp-card:is(:hover, :focus-within) .grz-blp-card__art > img:not(.grz-blp-card__flag) {
	filter: none;
	transform: translateY(-2px);
}

body.grz-brand-approved-immersive .grz-blp-card:is(:hover, :focus-within) .grz-blp-card__content {
	box-shadow: inset 0 -2px 0 var(--grz-marketplace-hover);
}

body.grz-brand-approved-immersive .grz-blp-card:is(:hover, :focus-within) .grz-blp-card__content > strong {
	color: var(--grz-marketplace-hover);
}

/*
 * Performance pass: these panels already use sufficiently opaque brand
 * surfaces, so continuously blurring the entire catalogue behind them adds
 * cost without a visible quality benefit.
 */
body.grz-brand-approved-immersive :is(.grz-blp-finder, .grz-blp-info-grid, .grz-blp-guides) {
	backdrop-filter: none;
}

body.grz-brand-approved-immersive .grz-blp-finder {
	background: color-mix(in srgb, var(--grz-razer-deep) 90%, transparent);
}

body.grz-brand-approved-immersive :is(.grz-blp-info-grid, .grz-blp-guides) {
	background: color-mix(in srgb, var(--grz-razer-deep) 88%, transparent);
	content-visibility: auto;
	contain-intrinsic-size: 280px;
}

body.grz-brand-approved-immersive.grz-adaptive-header.grz-header-mode-embedded .grz-header__shell {
	backdrop-filter: saturate(1.08) blur(8px);
}

body.grz-brand-approved-immersive :is(.grz-blp-search input, .grz-product-search input, .grz-blp-brand-name) {
	backdrop-filter: none;
}

body.grz-brand-approved-immersive:not(.grz-brand-key-razer-gold)::before {
	transform: none;
}

@media (max-width: 720px) {
	body.grz-brand-approved-immersive {
		--grz-marketplace-pack-width: 122px;
		--grz-marketplace-pack-height: 137px;
		--grz-marketplace-copy-width: 132px;
	}

	body.grz-brand-approved-immersive.grz-brand-key-razer-gold {
		--grz-marketplace-pack-width: 130px;
		--grz-marketplace-pack-height: 146px;
	}

	body.grz-brand-approved-immersive .grz-blp-card__content > strong {
		height: 32px;
		min-height: 32px;
		font-size: 11px;
	}

	body.grz-brand-approved-immersive .grz-blp-card__flag,
	body.grz-brand-approved-immersive .grz-blp-card__global {
		right: max(6px, calc((100% - var(--grz-marketplace-pack-width)) / 2 + 5px));
	}

	body.grz-brand-approved-immersive.grz-adaptive-header.grz-header-mode-embedded .grz-header__shell {
		backdrop-filter: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.grz-brand-approved-immersive .grz-blp-card,
	body.grz-brand-approved-immersive .grz-blp-card__content,
	body.grz-brand-approved-immersive .grz-blp-card__content > strong,
	body.grz-brand-approved-immersive .grz-blp-card__art > img:not(.grz-blp-card__flag) {
		transition: none;
	}
}
