:root {
    --storefront-skeleton-base: #edf0f3;
    --storefront-skeleton-highlight: #fafbfc;
}

#storefront-page-skeleton {
    display: none;
}

/* The legacy refresh component should exist only while explicitly active. */
.aiz-refresh:not(.active) {
    display: none !important;
}

html.storefront-js:not(.storefront-ready) #storefront-page-skeleton,
html.storefront-js.storefront-navigating #storefront-page-skeleton {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    z-index: 20000;
    display: block;
    overflow: hidden;
    pointer-events: none;
    background: var(--storefront-skeleton-base);
}

#storefront-page-skeleton::after {
    content: '';
    display: block;
    width: 38%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #149dcc 45%, #ffb400 70%, transparent);
    animation: storefront-progress 1.1s ease-in-out infinite;
}

img.storefront-image-pending {
    background-color: var(--storefront-skeleton-base) !important;
    background-image: linear-gradient(100deg, transparent 20%, var(--storefront-skeleton-highlight) 45%, transparent 70%) !important;
    background-repeat: no-repeat !important;
    background-size: 220% 100% !important;
    animation: storefront-shimmer 1.25s linear infinite !important;
}

img.lazyload[src*="loading-skeleton.svg"],
img.lazyloading[src*="loading-skeleton.svg"] {
    background-color: var(--storefront-skeleton-base);
    object-fit: cover;
}

img.storefront-image-loaded {
    animation: storefront-image-reveal .22s ease-out both;
}

@keyframes storefront-shimmer {
    from { background-position: 180% 0; }
    to { background-position: -80% 0; }
}

@keyframes storefront-progress {
    from { transform: translateX(-110%); }
    to { transform: translateX(265%); }
}

@keyframes storefront-image-reveal {
    from { opacity: .55; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    #storefront-page-skeleton::after,
    img.storefront-image-pending,
    img.storefront-image-loaded {
        animation: none !important;
    }
}