/* ============================================================
   ProductSkeleton — 1:1 shaped skeleton for the whole PDP.
   CSS-only shimmer (no JS animation loop). RTL-aware direction.
   Colors match the site's Noon-style skeleton language:
   bg #F7F7F7, base #ECECEC, highlight #F8F8F8.
   ============================================================ */

.pdp-sk-shimmer {
    position: relative;
    overflow: hidden;
    background-color: var(--pdp-sk-base);
    background-image: linear-gradient(
        90deg,
        var(--pdp-sk-base) 0%,
        var(--pdp-sk-base) 40%,
        var(--pdp-sk-highlight) 50%,
        var(--pdp-sk-base) 60%,
        var(--pdp-sk-base) 100%
    );
    background-size: 220% 100%;
    animation: pdp-sk-shimmer 1.4s linear infinite;
    border-radius: 8px;
}
@keyframes pdp-sk-shimmer {
    from {
        background-position: 120% 0;
    }
    to {
        background-position: -120% 0;
    }
}
html[dir="ltr"] .pdp-sk-shimmer {
    animation-direction: reverse;
}

@media (prefers-reduced-motion: reduce) {
    .pdp-sk-shimmer {
        animation: none;
        background-image: none;
    }
}

/* Toggle: skeleton vs real content, scoped per independent async
   region (buybox / tabs / reviews / bought-together / recommended)
   via `.pdp-loading-scope`. Each region reveals as soon as ITS OWN
   data is ready — a natural, staggered reveal with no full-page
   flash. Real block fades in instead of popping; sizes match 1:1
   so nothing shifts. */
.pdp-loading-scope .pdp-skel {
    display: block;
}
.pdp-loading-scope .pdp-real {
    display: none;
}
.pdp-loading-scope.is-loaded .pdp-skel {
    display: none;
}
.pdp-loading-scope.is-loaded .pdp-real {
    display: block;
    animation: pdp-fade-in var(--pdp-fade) var(--pdp-ease) both;
}
.pdp-loading-scope.is-loaded .pdp-real.pdp-real-flex {
    display: flex;
    flex-direction: column;
}
.pdp-loading-scope.is-loaded .pdp-real.pdp-real-grid {
    display: grid;
}
.pdp-loading-scope.is-loaded .pdp-real.pdp-real-inline {
    display: inline-flex;
}

.pdp-skel-row {
    display: flex;
    gap: 8px;
}
.pdp-skel-line {
    height: 12px;
    border-radius: 6px;
}

/* ---- Gallery skeleton ---- */
.pdp-skel-gallery {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pdp-skel-gallery-main {
    width: 100%;
    aspect-ratio: 2 / 1;
    border-radius: var(--pdp-radius);
}
.pdp-skel-gallery-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
}
.pdp-skel-gallery-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pdp-sk-base);
}
.pdp-skel-thumbs {
    display: flex;
    gap: 8px;
}
.pdp-skel-thumb {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    flex: none;
}
@media (min-width: 1200px) {
    .pdp-skel-gallery {
        flex-direction: row-reverse;
    }
    .pdp-skel-thumbs {
        flex-direction: column;
    }
    .pdp-skel-thumb {
        width: 72px;
        height: 72px;
    }
}

/* ---- Info skeleton ---- */
.pdp-skel-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 2px;
}
.pdp-skel-title-1 {
    width: 92%;
    height: 20px;
}
.pdp-skel-title-2 {
    width: 62%;
    height: 20px;
}
.pdp-skel-rating {
    width: 140px;
    height: 16px;
}
.pdp-skel-price {
    width: 160px;
    height: 30px;
}
.pdp-skel-stock {
    width: 120px;
    height: 14px;
}
.pdp-skel-card-block {
    width: 100%;
    height: 64px;
    border-radius: 14px;
}

/* ---- Chips / variants skeleton ---- */
.pdp-skel-chip-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.pdp-skel-chip {
    width: 56px;
    height: 56px;
    border-radius: 14px;
}

/* ---- Seller card skeleton ---- */
.pdp-skel-seller {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pdp-skel-seller-name {
    width: 70%;
    height: 16px;
}
.pdp-skel-seller-line {
    width: 100%;
    height: 12px;
}
.pdp-skel-cta {
    width: 100%;
    height: 48px;
    border-radius: 12px;
    margin-top: 6px;
}

/* ---- Tabs / specs / reviews skeleton ---- */
.pdp-skel-tabs {
    display: flex;
    gap: 18px;
}
.pdp-skel-tab {
    width: 80px;
    height: 16px;
}
.pdp-skel-spec-row {
    display: flex;
    gap: 14px;
}
.pdp-skel-spec-row span {
    height: 14px;
    border-radius: 6px;
}
.pdp-skel-spec-row span:first-child {
    width: 30%;
}
.pdp-skel-spec-row span:last-child {
    width: 50%;
}

/* ---- Carousel card skeleton ---- */
.pdp-skel-cards {
    display: flex;
    gap: 10px;
    overflow: hidden;
}
.pdp-skel-card {
    flex: 0 0 155px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pdp-skel-card-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
}
.pdp-skel-card-line {
    height: 12px;
    border-radius: 6px;
}
.pdp-skel-card-line.w70 {
    width: 70%;
}
.pdp-skel-card-line.w40 {
    width: 40%;
}

/* Utility spacers reused across skeleton blocks */
.pdp-skel-gap-sm {
    height: 8px;
}
.pdp-skel-gap-md {
    height: 14px;
}