/* Sale prices: solid red with a soft light sweep that loops continuously.
   The gradient tiles seamlessly, so the price is never cut off mid-animation.
   Used on the homepage cards and on WooCommerce sale prices (<ins>) sitewide. */

.srh-price.is-sale strong,
.srh-deal__price.is-sale strong,
.woocommerce .price ins .amount,
.woocommerce-page .price ins .amount {
	display: inline-block;
	text-decoration: none;
	color: #d6301f;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.srh-price.is-sale strong,
	.srh-deal__price.is-sale strong,
	.woocommerce .price ins .amount,
	.woocommerce-page .price ins .amount {
		background-image: linear-gradient(105deg, #d6301f 0%, #d6301f 42%, #ff8f80 50%, #d6301f 58%, #d6301f 100%);
		background-size: 200% 100%;
		background-repeat: repeat-x;
		background-position: 0 0;
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		animation: srh-shimmer 3.6s linear infinite;
	}
}

/* One full tile of travel = a perfect loop. */
@keyframes srh-shimmer {
	from { background-position: 0 0; }
	to   { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
	.srh-price.is-sale strong,
	.srh-deal__price.is-sale strong,
	.woocommerce .price ins .amount,
	.woocommerce-page .price ins .amount {
		animation: none;
		background-image: none;
		-webkit-text-fill-color: currentColor;
		color: #d6301f;
	}
}