/**
 * Product-card image loading state: a soft shimmer plus a Telegram-style
 * blurred tiny preview (.fs-lqip). Both layers are only visible while the
 * real image is still downloading — its onload adds .fs-loaded to the
 * wrapper, which fades the preview out and stops the shimmer. The loaded
 * card looks exactly as it did before this feature existed.
 */

.fs-skel {
    background: linear-gradient(110deg, #ececec 8%, #f6f6f6 18%, #ececec 33%);
    background-size: 200% 100%;
    border-radius: 16px;
    animation: fs-shimmer 1.4s linear infinite;
}

.dark .fs-skel {
    background: linear-gradient(110deg, #161616 8%, #222222 18%, #161616 33%);
    background-size: 200% 100%;
}

.fs-skel.fs-loaded,
.dark .fs-skel.fs-loaded {
    background: none;
    animation: none;
}

@keyframes fs-shimmer {
    to {
        background-position-x: -200%;
    }
}

.fs-lqip {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
    filter: blur(12px);
    z-index: 25;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.fs-loaded .fs-lqip {
    opacity: 0;
}