/**
 * 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: inherit;
    filter: blur(12px);
    z-index: 25;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

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

/* Contexts where other layers (hover overlays, captions) must stay above the
   preview: the preview sits at the bottom of the stack and the real image
   gets a small positive z-index of its own. */
.fs-lqip-under {
    z-index: 0;
}

/* Square-cornered contexts (the product gallery strip). Declared after
   .fs-skel so it wins at equal specificity. */
.fs-skel-flat {
    border-radius: 0;
}