/* =====================================================================
   DesiFresh - Customer shimmer (skeleton) loader
   ---------------------------------------------------------------------
   Shape-matched placeholders shown only while product data is loading.
   Every selector is prefixed with .df-sk (or scoped to the existing
   loading states), so nothing here affects the loaded UI.
   ===================================================================== */

:root {
    --df-sk-base: #eceff0;
    --df-sk-shine: rgba(255, 255, 255, 0.7);
    --df-sk-speed: 1.3s;
}

@keyframes df-sk-shimmer {
    0% {
        background-position: 150% 0;
    }

    100% {
        background-position: -50% 0;
    }
}

/* ---------- Base shimmer block ---------- */
.df-sk {
    display: block;
    background-color: var(--df-sk-base);
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, var(--df-sk-shine) 50%, rgba(255, 255, 255, 0) 100%);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    background-position: 150% 0;
    animation: df-sk-shimmer var(--df-sk-speed) ease-in-out infinite;
    border-radius: 6px;
}

.df-sk-line {
    height: 10px;
    border-radius: 999px;
}

/* ---------- Product card skeleton (mirrors .product-card) ---------- */
.df-sk-card {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0.45rem 0.5rem 0.55rem;
    background: var(--white, #ffffff);
    border: 1px solid var(--line, #e4e4e4);
    border-radius: 12px;
    pointer-events: none;
    user-select: none;
}

    .df-sk-card .df-sk-media {
        height: var(--product-media-h, 132px);
        margin-bottom: 0.1rem;
        border-radius: 10px;
    }

    .df-sk-card .df-sk-price {
        width: 42%;
        height: 14px;
    }

    .df-sk-card .df-sk-qty {
        width: 30%;
        height: 8px;
    }

    .df-sk-card .df-sk-name {
        width: 92%;
    }

    .df-sk-card .df-sk-name--short {
        width: 64%;
    }

.df-sk-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    margin-top: auto;
    min-height: var(--product-ctrl-h, 34px);
}

    .df-sk-bar .df-sk-stock {
        width: 38%;
        height: 9px;
    }

    .df-sk-bar .df-sk-add {
        flex: 0 0 auto;
        width: var(--product-ctrl-h, 34px);
        height: var(--product-ctrl-h, 34px);
        border-radius: 50%;
    }

/* ---------- Category / shop grid cell (mirrors .shop-item) ---------- */
.df-sk-cell {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
}

    .df-sk-cell .df-sk-media {
        height: clamp(72px, 11vw, 132px);
    }

/* ---------- Horizontal product row (mirrors the aisle Swiper) ---------- */
.df-sk-rail {
    --df-pv: 2.2;
    --df-gap: 10px;
    display: flex;
    align-items: stretch;
    gap: var(--df-gap);
    width: 100%;
    overflow: hidden;
    padding: 2px 0 6px;
}

    .df-sk-rail > .df-sk-card {
        flex: 0 0 calc((100% - (var(--df-pv) - 1) * var(--df-gap)) / var(--df-pv));
        height: auto;
    }

@media (min-width: 400px) {
    .df-sk-rail {
        --df-pv: 2.3;
    }
}

@media (min-width: 576px) {
    .df-sk-rail {
        --df-pv: 3.15;
    }
}

@media (min-width: 768px) {
    .df-sk-rail {
        --df-pv: 4.2;
    }
}

@media (min-width: 992px) {
    .df-sk-rail {
        --df-pv: 5.2;
    }
}

@media (min-width: 1400px) {
    .df-sk-rail {
        --df-pv: 6.4;
        --df-gap: 14px;
    }
}

/* Similar products uses its own spacing breakpoints */
.df-sk-rail--similar {
    --df-gap: 8px;
}

@media (min-width: 576px) {
    .df-sk-rail--similar {
        --df-gap: 10px;
    }
}

@media (min-width: 768px) {
    .df-sk-rail--similar {
        --df-gap: 12px;
    }
}

@media (min-width: 1400px) {
    .df-sk-rail--similar {
        --df-gap: 14px;
    }
}

/* ---------- Home section skeleton (mirrors .aisle-section) ---------- */
.df-sk-section {
    padding: 0.35rem 0 1.15rem;
}

.df-sk-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.85rem;
}

    .df-sk-head .df-sk-title {
        width: min(180px, 45%);
        height: 20px;
    }

    .df-sk-head .df-sk-seeall {
        width: 70px;
        height: 14px;
    }

/* ---------- Home offer banner tiles (mirrors .promo-slider-item) ---------- */
.df-sk-offer {
    flex: 0 0 375px;
    height: 215px;
    border-radius: 18px;
}

@media (max-width: 1200px) {
    .df-sk-offer {
        flex-basis: 270px;
        height: 200px;
    }
}

@media (max-width: 900px) {
    .df-sk-offer {
        flex-basis: 240px;
        height: 190px;
    }
}

@media (max-width: 576px) {
    .df-sk-offer {
        flex-basis: calc(100vw - 40px);
        height: 180px;
    }
}

/* ---------- Overlay shimmer (hero banner) ---------- */
.df-sk-overlay {
    position: relative;
}

    .df-sk-overlay::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 20;
        border-radius: inherit;
        background-color: var(--df-sk-base);
        background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, var(--df-sk-shine) 50%, rgba(255, 255, 255, 0) 100%);
        background-size: 200% 100%;
        background-repeat: no-repeat;
        background-position: 150% 0;
        animation: df-sk-shimmer var(--df-sk-speed) ease-in-out infinite;
        pointer-events: none;
    }

/* =====================================================================
   PRODUCT DETAIL PAGE
   Driven by the existing "is-product-api-loading" class that
   customer-product.js already adds/removes (try/finally).
   ===================================================================== */
[data-product-page].is-product-api-loading .detail-main-media,
[data-product-page].is-product-api-loading .detail-info h1,
[data-product-page].is-product-api-loading .detail-info .detail-stock,
[data-product-page].is-product-api-loading .detail-size:empty,
[data-product-page].is-product-api-loading .detail-price-row strong,
[data-product-page].is-product-api-loading .detail-crumb > span,
[data-product-page].is-product-api-loading .detail-add,
[data-product-page].is-product-api-loading .detail-wish,
[data-product-page].is-product-api-loading .detail-thumbs:empty::before,
[data-product-page].is-product-api-loading .detail-specs dl:empty::before {
    background-color: var(--df-sk-base);
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, var(--df-sk-shine) 50%, rgba(255, 255, 255, 0) 100%);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    background-position: 150% 0;
    animation: df-sk-shimmer var(--df-sk-speed) ease-in-out infinite;
}

/* After the API responds, keep the image area shimmering until the real
   image file has finished downloading (the existing "detail-image-pending"
   class is removed by the page script on load / error).
   Kept as its own rule so browsers without :has() simply skip it. */
[data-product-page][data-product-api-loaded] .detail-main-media:has(> img.detail-image-pending) {
    background-color: var(--df-sk-base);
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, var(--df-sk-shine) 50%, rgba(255, 255, 255, 0) 100%);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    background-position: 150% 0;
    animation: df-sk-shimmer var(--df-sk-speed) ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    [data-product-page][data-product-api-loaded] .detail-main-media:has(> img.detail-image-pending) {
        animation: none;
    }
}

/* Text placeholders keep their space but hide the dummy text */
[data-product-page].is-product-api-loading .detail-info h1,
[data-product-page].is-product-api-loading .detail-info .detail-stock,
[data-product-page].is-product-api-loading .detail-price-row strong,
[data-product-page].is-product-api-loading .detail-crumb > span,
[data-product-page].is-product-api-loading .detail-add,
[data-product-page].is-product-api-loading .detail-wish {
    color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    border-radius: 8px;
    pointer-events: none;
    user-select: none;
}

    [data-product-page].is-product-api-loading .detail-add *,
    [data-product-page].is-product-api-loading .detail-wish * {
        visibility: hidden;
    }

[data-product-page].is-product-api-loading .detail-info h1 {
    min-width: min(340px, 70vw);
}

[data-product-page].is-product-api-loading .detail-info .detail-stock {
    min-width: 84px;
}

[data-product-page].is-product-api-loading .detail-size:empty {
    display: block;
    width: 120px;
    height: 12px;
    border-radius: 999px;
}

[data-product-page].is-product-api-loading .detail-price-row strong {
    display: inline-block;
    min-width: 96px;
}

/* Thumbnails column: three thumb-sized blocks */
[data-product-page].is-product-api-loading .detail-thumbs:empty::before {
    content: "";
    display: block;
    width: 58px;
    height: 190px;
    -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 58px, transparent 58px 66px);
    mask-image: repeating-linear-gradient(to bottom, #000 0 58px, transparent 58px 66px);
}

/* Product details list: stacked lines */
[data-product-page].is-product-api-loading .detail-specs dl:empty::before {
    content: "";
    display: block;
    grid-column: 1 / -1;
    height: 104px;
    -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 12px, transparent 12px 23px);
    mask-image: repeating-linear-gradient(to bottom, #000 0 12px, transparent 12px 23px);
}

/* ---------- Accessibility: respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .df-sk,
    .df-sk-overlay::after,
    [data-product-page].is-product-api-loading .detail-main-media,
    [data-product-page].is-product-api-loading .detail-info h1,
    [data-product-page].is-product-api-loading .detail-info .detail-stock,
    [data-product-page].is-product-api-loading .detail-size:empty,
    [data-product-page].is-product-api-loading .detail-price-row strong,
    [data-product-page].is-product-api-loading .detail-crumb > span,
    [data-product-page].is-product-api-loading .detail-add,
    [data-product-page].is-product-api-loading .detail-wish,
    [data-product-page].is-product-api-loading .detail-thumbs:empty::before,
    [data-product-page].is-product-api-loading .detail-specs dl:empty::before {
        animation: none;
    }
}