/*
 * Mobile scroll performance.
 *
 * backdrop-filter asks the compositor to re-blur everything sitting behind
 * an element. On a fixed bar that means a fresh blur of the whole strip on
 * every frame of every scroll, and on a card badge it means one more blurred
 * layer per card. The home page carries twenty-one of them at once, which is
 * what turns a scroll into a stutter on a mid-range phone.
 *
 * The blur is dropped below 1024px and the surface is made opaque instead.
 * At the alpha values these rules already used (.88 to .98) the difference
 * is barely visible, and the desktop treatment is left exactly as it was.
 */

@media (max-width: 1024px) {

	/* ---- fixed header ------------------------------------------------ */

	.rvth-bar,
	.rvth-mbar,
	.rvt-header {
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
		background: #ffffff !important;
	}

	/* "all" animates layout properties too; only these two ever change. */
	.rvt-header {
		transition: box-shadow .25s ease, background-color .25s ease !important;
	}

	/* ---- fixed bottom bars ------------------------------------------- */

	.rvt-mcta,
	.rvt-buybar,
	.rvt-mobile-buybar {
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
		background: #ffffff !important;
	}

	/* A 30px shadow blur on a fixed bar repaints with the page. */
	.rvt-buybar,
	.rvt-mobile-buybar {
		box-shadow: 0 -1px 0 rgba(13, 13, 13, .10), 0 -4px 12px rgba(13, 13, 13, .06) !important;
	}

	/* ---- anchor nav --------------------------------------------------- */

	.rvt-anchor-nav {
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
		background: #ffffff !important;
	}

	/* ---- repeated elements: one blurred layer per card ---------------- */

	.rvt-card-badge,
	.rvt-slider-button,
	.rvt-image-counter {
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
	}

	.rvt-card-badge {
		background: rgba(255, 255, 255, .94) !important;
	}

	.rvt-slider-button {
		background: rgba(255, 255, 255, .95) !important;
	}

	.rvt-image-counter {
		background: rgba(13, 13, 13, .82) !important;
	}

	/* ---- redesigned product page -------------------------------------- */

	.rvt2 .rvt2-sticky {
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
	}
}

/*
 * Everything below applies at every width: it costs nothing on desktop and
 * removes work the phone was doing for no visual gain.
 */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}