/*
 * Optimized hero backgrounds.
 *
 * Serves the small WebP/JPEG exports of the approved hero photograph for the
 * non-homepage heroes (Shop and commerce). The homepage hero is handled by
 * inc/homepage-settings.php so the admin-selected Media Library image keeps
 * working.
 *
 * Loaded after site.css and commerce.css. Declares the JPEG first as a safe
 * fallback, then upgrades to image-set() so modern browsers pick the WebP.
 * Only background-image is touched; position, size and repeat are preserved.
 */

.rr-shop-hero::after,
.rr-shop-hero__inner::after,
.rr-commerce-hero::after,
.rr-commerce-promo::after {
	background-image: url('../images/hero-beet-amla-v1.jpg');
	background-image: image-set(url('../images/hero-beet-amla-v1.webp') 1x, url('../images/hero-beet-amla-v1.jpg') 1x);
}

/*
 * .rr-shop-promo uses a two-layer background (gradient + hero photo). Only the
 * image layer is swapped for the optimized export; the gradient, position,
 * repeat and size declared in site.css are preserved.
 */
.rr-shop-promo {
	background-image:
		linear-gradient(90deg, #f3e8dc 0%, #f3e8dc 44%, rgba(243, 232, 220, 0.35) 68%, rgba(243, 232, 220, 0) 100%),
		url('../images/hero-beet-amla-v1.jpg');
	background-image:
		linear-gradient(90deg, #f3e8dc 0%, #f3e8dc 44%, rgba(243, 232, 220, 0.35) 68%, rgba(243, 232, 220, 0) 100%),
		image-set(url('../images/hero-beet-amla-v1.webp') 1x, url('../images/hero-beet-amla-v1.jpg') 1x);
}