/* ==========================================================================
   Reusable Skeleton Loader Component  (Magento2_performance.md §8.1)
   - One component reused across header, PLP, PDP, cart, checkout.
   - Occupies the EXACT box of the real content => zero layout shift (CLS = 0).
   - Pure CSS shimmer (GPU transform), no JS, no extra requests.
   - RTL-safe and respects prefers-reduced-motion.
   Usage:
     <div class="b-skel" style="--sk-h:200px"></div>          fixed height box
     <div class="b-skel" style="--sk-ar:16/9"></div>           aspect-ratio box
     <span class="b-skel b-skel--text"></span>                 one text line
     <div class="b-skel b-skel--circle" style="--sk-h:48px"></div>
   Remove/replace the skeleton the moment real content is ready.
   ========================================================================== */

.b-skel,
.cz-skel {            /* cz-skel kept as alias for the Home page pattern */
    position: relative;
    display: block;
    width: 100%;
    height: var(--sk-h, 100%);
    aspect-ratio: var(--sk-ar, auto);
    border-radius: var(--sk-radius, 8px);
    background-color: #ececec;
    background-image: linear-gradient(
        90deg,
        rgba(236, 236, 236, 0) 0%,
        rgba(255, 255, 255, 0.65) 50%,
        rgba(236, 236, 236, 0) 100%
    );
    background-size: 200% 100%;
    background-repeat: no-repeat;
    background-position: 150% 0;       /* LTR start off-screen right */
    overflow: hidden;
    will-change: background-position;
    animation: b-skel-shimmer 1.25s ease-in-out infinite;
}

/* RTL: run the shimmer the other way so it reads correctly in Arabic */
html[dir="rtl"] .b-skel,
html[dir="rtl"] .cz-skel,
html:lang(ar) .b-skel,
html:lang(ar) .cz-skel {
    background-position: -50% 0;
    animation-name: b-skel-shimmer-rtl;
}

.b-skel--text { height: var(--sk-h, 1em); border-radius: 4px; margin: 0.25em 0; }
.b-skel--text.is-short { width: 60%; }
.b-skel--text.is-shorter { width: 40%; }
.b-skel--circle { width: var(--sk-h, 40px); height: var(--sk-h, 40px); border-radius: 50%; aspect-ratio: 1; }
.b-skel--card { --sk-radius: 12px; }
.b-skel--btn { height: var(--sk-h, 44px); border-radius: 6px; }

/* ==========================================================================
   Checkout boot skeleton
   - Overlay placed INSIDE #checkout. The real Knockout checkout renders
     underneath at full height, then the overlay is removed => no layout shift.
   - #checkout gets `.has-checkout-skeleton` only while the overlay is present
     so the container reserves height; removing the class + overlay together
     never shifts already-rendered content.
   - A hard safety timeout in the inline script guarantees it can NEVER stick.
   ========================================================================== */
#checkout.has-checkout-skeleton { position: relative; min-height: 560px; }

.checkout-skeleton {
    position: absolute;
    inset: 0;
    z-index: 5;
    background: #fff;
    display: flex;
    gap: 32px;
    padding: 24px 0;
    pointer-events: none;
}
.checkout-skeleton__col { display: flex; flex-direction: column; gap: 16px; }
.checkout-skeleton__col--main { flex: 1 1 62%; min-width: 0; }
.checkout-skeleton__col--aside { flex: 0 0 32%; }
.checkout-skeleton__row { display: flex; gap: 16px; }
.checkout-skeleton__row > .b-skel { flex: 1; }
.checkout-skeleton.is-ready { opacity: 0; visibility: hidden; transition: opacity .25s ease; }

@media (max-width: 768px) {
    .checkout-skeleton { flex-direction: column; gap: 20px; padding: 16px 0; }
    .checkout-skeleton__col--aside { flex-basis: auto; }
    #checkout.has-checkout-skeleton { min-height: 640px; }
}

/* ==========================================================================
   Minicart dropdown skeleton (shown until the Knockout minicart content paints)
   - Pure CSS: visible by default, auto-hidden the moment the real
     `.block-content` renders inside the dropdown. No JS => can't get stuck.
   ========================================================================== */
.minicart-skel { padding: 16px; display: block; }
.block-minicart:has(#minicart-content-wrapper .block-content) .minicart-skel,
.block-minicart:has(#minicart-content-wrapper .minicart-items-wrapper) .minicart-skel { display: none; }
.minicart-skel__item { display: flex; gap: 12px; margin-bottom: 16px; align-items: flex-start; }
.minicart-skel__item .b-skel { flex: 1; }

/* ==========================================================================
   Product slider (owl-carousel) skeleton — Related/Upsell (PDP), Featured,
   Filterproducts widgets, category & home product sliders.
   - Owl keeps carousels `display:none` until it adds `.owl-loaded`, so content
     below jumps DOWN when the slider finally appears (CLS). We reserve a row's
     height and show a shimmer until owl finishes initializing.
   - Pure CSS, scoped to PRODUCT carousels only (so banner/logo/testimonial
     sliders are untouched). Driven by owl's own `.owl-loaded` class — the same
     mechanism every slider in the theme already relies on. No JS, no markup.
   ========================================================================== */
.owl-carousel.product-items:not(.owl-loaded),
.owl-carousel.filterproducts:not(.owl-loaded) {
    display: block !important;
    position: relative;
    height: var(--owl-skel-h, 360px);
    overflow: hidden;
}
.owl-carousel.product-items:not(.owl-loaded) > *,
.owl-carousel.filterproducts:not(.owl-loaded) > * {
    visibility: hidden;
}
.owl-carousel.product-items:not(.owl-loaded)::before,
.owl-carousel.filterproducts:not(.owl-loaded)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: var(--sk-radius, 8px);
    background-color: #ececec;
    background-image: linear-gradient(
        90deg,
        rgba(236, 236, 236, 0) 0%,
        rgba(255, 255, 255, 0.65) 50%,
        rgba(236, 236, 236, 0) 100%
    );
    background-size: 200% 100%;
    background-repeat: no-repeat;
    background-position: 150% 0;
    animation: b-skel-shimmer 1.25s ease-in-out infinite;
}
@media (max-width: 768px) {
    .owl-carousel.product-items:not(.owl-loaded),
    .owl-carousel.filterproducts:not(.owl-loaded) { height: var(--owl-skel-h-m, 300px); }
}
html[dir="rtl"] .owl-carousel.product-items:not(.owl-loaded)::before,
html[dir="rtl"] .owl-carousel.filterproducts:not(.owl-loaded)::before,
html:lang(ar) .owl-carousel.product-items:not(.owl-loaded)::before,
html:lang(ar) .owl-carousel.filterproducts:not(.owl-loaded)::before {
    background-position: -50% 0;
    animation-name: b-skel-shimmer-rtl;
}
@media (prefers-reduced-motion: reduce) {
    .owl-carousel.product-items:not(.owl-loaded)::before,
    .owl-carousel.filterproducts:not(.owl-loaded)::before {
        animation: none;
        background-image: none;
    }
}

/* ==========================================================================
   Amasty "Related Products" slider skeleton (slick-based).
   - The slider markup `[data-amrelated-js="slider"]` renders its items stacked
     until slick adds `.slick-initialized`; that collapse shifts content (CLS).
   - Reserve the row height + shimmer until slick initializes. Pure CSS.
   - `.amrelated-fallback` (added by grid.phtml if slick fails to load) force-
     reveals the products so the skeleton can never stay stuck.
   ========================================================================== */
.amrelated-grid-wrapper [data-amrelated-js="slider"]:not(.slick-initialized):not(.amrelated-fallback) {
    position: relative;
    height: var(--owl-skel-h, 360px);
    overflow: hidden;
}
.amrelated-grid-wrapper [data-amrelated-js="slider"]:not(.slick-initialized):not(.amrelated-fallback) > * {
    visibility: hidden;
}
.amrelated-grid-wrapper [data-amrelated-js="slider"]:not(.slick-initialized):not(.amrelated-fallback)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: var(--sk-radius, 8px);
    background-color: #ececec;
    background-image: linear-gradient(
        90deg,
        rgba(236, 236, 236, 0) 0%,
        rgba(255, 255, 255, 0.65) 50%,
        rgba(236, 236, 236, 0) 100%
    );
    background-size: 200% 100%;
    background-repeat: no-repeat;
    background-position: 150% 0;
    animation: b-skel-shimmer 1.25s ease-in-out infinite;
}
@media (max-width: 768px) {
    .amrelated-grid-wrapper [data-amrelated-js="slider"]:not(.slick-initialized):not(.amrelated-fallback) {
        height: var(--owl-skel-h-m, 300px);
    }
}
html[dir="rtl"] .amrelated-grid-wrapper [data-amrelated-js="slider"]:not(.slick-initialized):not(.amrelated-fallback)::before,
html:lang(ar) .amrelated-grid-wrapper [data-amrelated-js="slider"]:not(.slick-initialized):not(.amrelated-fallback)::before {
    background-position: -50% 0;
    animation-name: b-skel-shimmer-rtl;
}
/* Fallback: if slick never loads, reveal the products (no stuck skeleton). */
.amrelated-grid-wrapper [data-amrelated-js="slider"].amrelated-fallback { height: auto; overflow: visible; }
.amrelated-grid-wrapper [data-amrelated-js="slider"].amrelated-fallback > * { visibility: visible; }
@media (prefers-reduced-motion: reduce) {
    .amrelated-grid-wrapper [data-amrelated-js="slider"]:not(.slick-initialized):not(.amrelated-fallback)::before {
        animation: none;
        background-image: none;
    }
}

/* Skeleton shell wrapper: holds skeletons until real content swaps in.
   Add .is-ready on the parent to fade the skeleton out with no shift. */
.b-skel-shell { position: relative; }
.b-skel-shell.is-ready .b-skel,
.b-skel-shell.is-ready .cz-skel {
    opacity: 0;
    visibility: hidden;
    animation: none;
    transition: opacity 0.2s ease;
}

@keyframes b-skel-shimmer {
    from { background-position: 150% 0; }
    to   { background-position: -50% 0; }
}
@keyframes b-skel-shimmer-rtl {
    from { background-position: -50% 0; }
    to   { background-position: 150% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .b-skel,
    .cz-skel {
        animation: none;
        background-image: none;
        background-color: #ececec;
    }
}