/* ==========================================================================
   Koko Mart — Lazy-load skeleton shimmer
   Site-wide animated placeholder for any image LiteSpeed lazy-loads.
   ========================================================================== */

/*
 * How it works:
 *  - LiteSpeed lazy-loads by putting the real URL in `data-src` and a
 *    TRANSPARENT placeholder in `src` (Page Optimization → Media → Basic Image
 *    Placeholder). We match images that are STILL showing that placeholder
 *    (`src` begins with `data:image`) and animate a gradient behind them.
 *  - On load, LiteSpeed swaps `src` to the real URL → `src^="data:image"` no
 *    longer matches → the shimmer stops automatically. No JS, and it does not
 *    depend on the `data-lazyloaded` attribute (whose timing varies by version).
 *  - `Add Missing Sizes` (LiteSpeed) keeps each <img>'s width/height so the box
 *    has a size to fill (and prevents CLS).
 *
 * `[data-src]` ensures we only target real lazy-load images (not, say, an inline
 * SVG icon that legitimately uses a data: URI as its permanent src).
 */

img[data-src][src^="data:image"] {
	display: block;
	border-radius: var(--km-radius-sm, 6px);
	background: linear-gradient(
		90deg,
		var(--km-neutral-100, #f5f5f4) 25%,
		var(--km-neutral-200, #e5e5e4) 37%,
		var(--km-neutral-100, #f5f5f4) 63%
	);
	background-size: 400% 100%;
	animation: km-skeleton-shimmer 1.4s ease infinite;
}

@keyframes km-skeleton-shimmer {
	0% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0 50%;
	}
}

/* ─── Brand category cards: shimmer the WHOLE card ─────────────────────────
 * These cards render their colour + text instantly server-side; only the <img>
 * lazy-loads. To skeleton the entire card (not just the image area) we detect a
 * card whose image is still on the placeholder via :has(), paint the card as one
 * shimmer, and hide its contents. When the real image loads the src flips, :has()
 * stops matching, and the card returns to normal.
 */
.km-brand-cat-card:has(img[data-src][src^="data:image"]) {
	background-color: var(--km-neutral-100, #f5f5f4) !important;
	background-image: linear-gradient(
		90deg,
		var(--km-neutral-100, #f5f5f4) 25%,
		var(--km-neutral-200, #e5e5e4) 37%,
		var(--km-neutral-100, #f5f5f4) 63%
	) !important;
	background-size: 400% 100%;
	background-repeat: no-repeat;
	animation: km-skeleton-shimmer 1.4s ease infinite;
}

/* Hide the card's contents (incl. the inner image's own shimmer) while skeletoned.
   visibility:hidden keeps the layout box so the card keeps its size. */
.km-brand-cat-card:has(img[data-src][src^="data:image"]) > * {
	visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
	img[data-src][src^="data:image"],
	.km-brand-cat-card:has(img[data-src][src^="data:image"]) {
		animation: none;
	}
}