/* About Products integration for the shared ARC-32 exA Stage component. */

.exa-page > #dedicated-product.exa-stage-shell {
	--exa-stage-boundary-half: 2rem;
	/* About Products runs an 18px body scale; the ARC-32 component is authored
	   against 16px and sizes several inner margins in em (.45em, .75em,
	   .5em 0 0 1.2em). Inheriting 18px silently scales those by 12.5% against
	   the reference, so the clone is pinned back to the context it was drawn
	   for. Elements that set their own font-size are unaffected either way. */
	font-size: 16px;
	margin-top: var(--exa-stage-boundary-half);
	background: #030303;
	overflow: visible;
	isolation: isolate;
}

/* The Stage is a 1:1 replication of the ARC-32 section, so this bridge must not
   touch its geometry — only the surface it sits on.
 *
 * Two earlier overrides lived here and both shrank the section against its
 * reference: a padding pair (32px/64px against ARC-32's 60px) and a
 * --dp-stage-chrome that added 327px where ARC-32 adds 295px. Chrome is
 * subtracted from the media allocation in
 * clamp(280px, min(38vw, calc(100vh - chrome)), 540px), so the extra 32px came
 * straight off the card: at 1440x900 the media measured 428px against 460px,
 * the track 558px against 590px and the whole section 789px against 845px.
 * Both are gone; padding and chrome now inherit from the component. */
.exa-page > #dedicated-product.exa-stage-shell .dp-stage {
	background: #030303;
}

/* Match the Games carousel's frosted navigation treatment explicitly. The
   loaded slide artwork is the backdrop that makes the blur legible. */
.exa-page > #dedicated-product.exa-stage-shell .dp-stage__nav {
	border-color: rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.16);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	backdrop-filter: blur(20px) saturate(180%);
	color: rgba(255, 255, 255, 0.82);
}

.exa-page > #dedicated-product.exa-stage-shell .dp-stage__nav:hover,
.exa-page > #dedicated-product.exa-stage-shell .dp-stage__nav:focus-visible {
	background: rgba(255, 255, 255, 0.26);
	color: #fff;
}

.exa-page > #dedicated-product.exa-stage-shell .dp-stage.dp-section-divider::before,
.exa-page > #dedicated-product.exa-stage-shell .dp-stage.dp-section-divider::after {
	content: '';
	position: absolute;
	left: 50%;
	width: min(
		calc(100% - (var(--exa-section-divider-gutter, 1.25rem) * 2)),
		var(--exa-section-divider-content-max, 49rem)
	);
	height: var(--exa-section-divider-width, 1px);
	background: var(--exa-section-divider-color, #6e7264);
	opacity: var(--exa-section-divider-opacity, 0.7);
	pointer-events: none;
	transform: translateX(-50%);
	z-index: 1;
}

.exa-page > #dedicated-product.exa-stage-shell .dp-stage.dp-section-divider::before {
	top: 0;
}

.exa-page > #dedicated-product.exa-stage-shell .dp-stage.dp-section-divider::after {
	top: auto;
	bottom: 0;
}

/* The Stage owns the following boundary, so the Game Carousel must not paint a
   second line in the same seam. Half a gap remains on each side of the line. */
.exa-page > #dedicated-product.exa-stage-shell + #exa-carousel-1 {
	margin-top: var(--exa-stage-boundary-half);
}

.exa-page > #dedicated-product.exa-stage-shell + #exa-carousel-1::before {
	display: none;
}

@media (max-width: 768px) {
	.exa-page > #dedicated-product.exa-stage-shell {
		--exa-stage-boundary-half: 1.5rem;
	}
}