:root {
	--page-background-header-opacity: 1;
	--page-background-sides-opacity: 0.5;
	--page-background-center-opacity: 0.95;
	--page-background-footer-opacity: 0.9;
	--page-background-image-size: 100vw auto;
	/* Replace a page-specific slot with its own url(...) when that image is ready. */
	--page-background-image-homepage: none;
	--page-background-image-catalog: none;
	--page-background-image-cart: none;
	--page-background-image-content: var(--page-background-image-homepage);
	--page-background-image-static: var(--page-background-image-homepage);
}

.page-background-homepage {
	--page-background-image: var(--page-background-image-homepage);
}

.page-background-catalog {
	--page-background-image: var(--page-background-image-catalog);
}

.page-background-cart {
	--page-background-image: var(--page-background-image-cart);
}

.page-background-content {
	--page-background-image: var(--page-background-image-content);
}

.page-background-static {
	--page-background-image: var(--page-background-image-static);
}

@media (min-width: 1024px) {
	body.page-background {
		background-attachment: fixed;
		background-color: #fff;
		background-image:
			linear-gradient(180deg, rgb(255 255 255 / var(--page-background-header-opacity)) 0%, transparent 34%),
			linear-gradient(90deg, rgb(255 255 255 / var(--page-background-sides-opacity)) 0%, transparent 28%),
			linear-gradient(270deg, rgb(255 255 255 / var(--page-background-sides-opacity)) 0%, transparent 28%),
			radial-gradient(ellipse 48% 62% at 50% 48%, rgb(255 255 255 / var(--page-background-center-opacity)) 0%, transparent 100%),
			linear-gradient(0deg, rgb(255 255 255 / var(--page-background-footer-opacity)) 0%, transparent 34%),
			var(--page-background-image, none);
		background-position: center top;
		background-repeat: no-repeat;
		background-size: var(--page-background-image-size, 100vw auto);
	}
}