/**
 * ProWPCommerce - Initial-paint skeleton shimmer (2.0.85)
 *
 * Loaded only when enable_skeleton_loading is ON.
 * Never targets homepage / shop hero LCP images (preload + aspect only).
 *
 * @package ProWPCommerce
 */

/* Media hosts that shimmer until JS marks is-media-ready */
body.prowp-skeletons-on .prowp-card-image-wrap:not(.is-media-ready),
body.prowp-skeletons-on .prowp-homepage-category__thumb:not(.is-media-ready),
body.prowp-skeletons-on .prowp-archive-subcat__media:not(.is-media-ready),
body.prowp-skeletons-on .prowp-homepage .prowp-card-image-wrap:not(.is-media-ready) {
	position: relative;
	isolation: isolate;
	background-color: color-mix(in srgb, var(--prowp-skeleton-base, #a1a1aa) 22%, var(--prowp-bg-soft, #f8fafc));
}

body.prowp-skeletons-on .prowp-card-image-wrap:not(.is-media-ready)::after,
body.prowp-skeletons-on .prowp-homepage-category__thumb:not(.is-media-ready)::after,
body.prowp-skeletons-on .prowp-archive-subcat__media:not(.is-media-ready)::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	border-radius: inherit;
	background-image: linear-gradient(
		90deg,
		transparent 0%,
		color-mix(in srgb, var(--prowp-skeleton-base, #a1a1aa) 28%, transparent) 45%,
		color-mix(in srgb, #ffffff 55%, transparent) 50%,
		color-mix(in srgb, var(--prowp-skeleton-base, #a1a1aa) 28%, transparent) 55%,
		transparent 100%
	);
	background-size: 200% 100%;
	background-position: 100% 0;
	animation: prowp-skel-shimmer 1.35s ease-in-out infinite;
}

/* Keep primary images under the shimmer until ready */
body.prowp-skeletons-on .prowp-card-image-wrap:not(.is-media-ready) > a img,
body.prowp-skeletons-on .prowp-card-image-wrap:not(.is-media-ready) > img,
body.prowp-skeletons-on .prowp-homepage-category__thumb:not(.is-media-ready) img,
body.prowp-skeletons-on .prowp-archive-subcat__media:not(.is-media-ready) img {
	opacity: 0;
	transition: opacity 0.22s ease;
}

body.prowp-skeletons-on .prowp-card-image-wrap.is-media-ready > a img,
body.prowp-skeletons-on .prowp-card-image-wrap.is-media-ready > img,
body.prowp-skeletons-on .prowp-homepage-category__thumb.is-media-ready img,
body.prowp-skeletons-on .prowp-archive-subcat__media.is-media-ready img {
	opacity: 1;
}

body.prowp-skeletons-on .prowp-card-image-wrap.is-media-ready::after,
body.prowp-skeletons-on .prowp-homepage-category__thumb.is-media-ready::after,
body.prowp-skeletons-on .prowp-archive-subcat__media.is-media-ready::after {
	display: none;
}

@keyframes prowp-skel-shimmer {
	0% {
		background-position: 100% 0;
	}
	100% {
		background-position: -100% 0;
	}
}

/* RTL: reverse shimmer travel via logical animation direction */
[dir="rtl"] body.prowp-skeletons-on .prowp-card-image-wrap:not(.is-media-ready)::after,
[dir="rtl"] body.prowp-skeletons-on .prowp-homepage-category__thumb:not(.is-media-ready)::after,
[dir="rtl"] body.prowp-skeletons-on .prowp-archive-subcat__media:not(.is-media-ready)::after,
body.rtl.prowp-skeletons-on .prowp-card-image-wrap:not(.is-media-ready)::after,
body.rtl.prowp-skeletons-on .prowp-homepage-category__thumb:not(.is-media-ready)::after,
body.rtl.prowp-skeletons-on .prowp-archive-subcat__media:not(.is-media-ready)::after {
	animation-direction: reverse;
}

/* LCP heroes - never shimmer (preload + dimensions / aspect only) */
body.prowp-skeletons-on .prowp-hero .prowp-card-image-wrap,
body.prowp-skeletons-on .prowp-hero__picture,
body.prowp-skeletons-on .prowp-hero__media,
body.prowp-skeletons-on .prowp-shop-hero,
body.prowp-skeletons-on .prowp-shop-hero__lcp,
body.prowp-skeletons-on .prowp-homepage__section--hero .prowp-card-image-wrap {
	background-image: none !important;
}

body.prowp-skeletons-on .prowp-hero .prowp-card-image-wrap::after,
body.prowp-skeletons-on .prowp-hero__picture::after,
body.prowp-skeletons-on .prowp-hero__media::after,
body.prowp-skeletons-on .prowp-shop-hero::after,
body.prowp-skeletons-on .prowp-shop-hero__lcp::after,
body.prowp-skeletons-on .prowp-homepage__section--hero .prowp-card-image-wrap::after {
	content: none !important;
	display: none !important;
	animation: none !important;
}

body.prowp-skeletons-on .prowp-hero img,
body.prowp-skeletons-on .prowp-hero__media,
body.prowp-skeletons-on .prowp-shop-hero__lcp {
	opacity: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
	body.prowp-skeletons-on .prowp-card-image-wrap:not(.is-media-ready)::after,
	body.prowp-skeletons-on .prowp-homepage-category__thumb:not(.is-media-ready)::after,
	body.prowp-skeletons-on .prowp-archive-subcat__media:not(.is-media-ready)::after {
		animation: none;
		background-image: none;
		background-color: color-mix(in srgb, var(--prowp-skeleton-base, #a1a1aa) 18%, transparent);
	}

	body.prowp-skeletons-on .prowp-card-image-wrap:not(.is-media-ready) > a img,
	body.prowp-skeletons-on .prowp-card-image-wrap:not(.is-media-ready) > img,
	body.prowp-skeletons-on .prowp-homepage-category__thumb:not(.is-media-ready) img,
	body.prowp-skeletons-on .prowp-archive-subcat__media:not(.is-media-ready) img {
		opacity: 1;
		transition: none;
	}
}