:root {
    --sk-base: #e8ecef;
    --sk-highlight: #f5f7fa;
    --sk-shimmer: linear-gradient(90deg, var(--sk-base) 0%, var(--sk-highlight) 50%, var(--sk-base) 100%);
    --sk-radius: 6px;
    --sk-duration: 1.4s;
}

@keyframes sk-shimmer {
    0% { background-position: -468px 0; }
    100% { background-position: 468px 0; }
}

.sk-animate {
    background: var(--sk-base);
    background-image: var(--sk-shimmer);
    background-size: 800px 100%;
    animation: sk-shimmer var(--sk-duration) ease-in-out infinite;
}

/* Section skeleton — fills each section's own box (no full-page overlay) */
[data-sk-section]:not(.sk-ready),
.sk-section:not(.sk-ready) {
    position: relative;
}

[data-sk-section]:not(.sk-ready)::before,
.sk-section:not(.sk-ready)::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 5;
    border-radius: inherit;
    background: var(--sk-base);
    background-image: var(--sk-shimmer);
    background-size: 800px 100%;
    animation: sk-shimmer var(--sk-duration) ease-in-out infinite;
    pointer-events: none;
}

[data-sk-section]:not(.sk-ready) > *,
.sk-section:not(.sk-ready) > * {
    opacity: 0;
    visibility: hidden;
}

[data-sk-section].sk-ready > *,
.sk-section.sk-ready > * {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease;
}

.sk-page-section {
    min-height: 1px;
}

.sk-content-root > .sk-page-section:not(.mfm-hero-slider),
.pageContent > .sk-page-section:not(.mfm-hero-slider) {
    overflow: hidden;
}

/* Skip skeleton on modals and small UI */
[data-sk-skip],
.modal,
.dropdown-menu,
.select2-container,
.toast,
.notiflix-notify,
#addToCart .c-preloader {
    /* excluded */
}

@media (prefers-reduced-motion: reduce) {
    [data-sk-section]:not(.sk-ready)::before,
    .sk-section:not(.sk-ready)::before,
    .sk-animate {
        animation: none;
        background: var(--sk-base);
    }

    [data-sk-section].sk-ready > *,
    .sk-section.sk-ready > * {
        transition: none;
    }
}