/**
 * Woodmart Child - universal image skeleton 
 * Works with Woodmart lazy load, LiteSpeed lazy load and native loading="lazy".
 */

:root {
    --wdch-skeleton-radius: var(--lili-ui-radius, 9px);
    --wdch-skeleton-base: #f2f2f2;
    --wdch-skeleton-shine: #fafafa;
    --wdch-skeleton-speed: 1.15s;
}

/*
 * The image keeps its own width/height, so this does not create a second box
 * and does not cause CLS. The parent only supplies the animated background
 * while the real image is transparent.
 */
html.wdch-image-skeletons .wdch-img-shell {
    background-color: var(--wdch-skeleton-base) !important;
    background-image: linear-gradient(
        100deg,
        var(--wdch-skeleton-base) 18%,
        var(--wdch-skeleton-shine) 40%,
        var(--wdch-skeleton-base) 62%
    ) !important;
    background-repeat: no-repeat !important;
    background-size: 220% 100% !important;
    background-position: 100% 0;
    border-radius: var(--wdch-skeleton-radius);
    animation: wdch-image-skeleton-shimmer var(--wdch-skeleton-speed) ease-in-out infinite;
}

html.wdch-image-skeletons img.wdch-img-pending {
    opacity: 0 !important;
    transition: opacity .22s ease;
}

html.wdch-image-skeletons img.wdch-img-ready {
    opacity: 1 !important;
    transition: opacity .22s ease;
}

/* Woodmart lazy-loaded CSS background blocks. */
html.wdch-image-skeletons .wd-lazy-bg {
    background-color: var(--wdch-skeleton-base) !important;
    background-image: linear-gradient(
        100deg,
        var(--wdch-skeleton-base) 18%,
        var(--wdch-skeleton-shine) 40%,
        var(--wdch-skeleton-base) 62%
    ) !important;
    background-repeat: no-repeat !important;
    background-size: 220% 100% !important;
    background-position: 100% 0;
    animation: wdch-image-skeleton-shimmer var(--wdch-skeleton-speed) ease-in-out infinite;
}

/* Keep the global 9px UI language on common image cards while loading. */
html.wdch-image-skeletons :where(
    .product-image-link,
    .woocommerce-product-gallery__image,
    .wd-post-img,
    .post-img-wrapp,
    .category-image-wrapp,
    .wd-banner,
    .wd-slide-bg,
    .elementor-widget-image,
    .wp-block-image
).wdch-img-shell {
    border-radius: var(--wdch-skeleton-radius);
}

@keyframes wdch-image-skeleton-shimmer {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -120% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.wdch-image-skeletons .wdch-img-shell,
    html.wdch-image-skeletons .wd-lazy-bg {
        animation: none;
    }

    html.wdch-image-skeletons img.wdch-img-pending,
    html.wdch-image-skeletons img.wdch-img-ready {
        transition: none;
    }
}