/* ─── Page Builder Skeleton / Shimmer Loader ─── */

@keyframes pb-shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position:  600px 0; }
}

/* ── Base shimmer block ── */
.pb-skel {
    background: linear-gradient(90deg, #f0f0f0 25%, #e4e4e4 50%, #f0f0f0 75%);
    background-size: 600px 100%;
    animation: pb-shimmer 1.4s ease-in-out infinite;
    border-radius: 6px;
    display: block;
    width: 100%;
}

/* White-tinted shimmer for overlaid sub-elements on dark/shimmer bg */
.pb-skel-overlay {
    background: linear-gradient(90deg, rgba(255,255,255,.22) 25%, rgba(255,255,255,.36) 50%, rgba(255,255,255,.22) 75%);
    background-size: 600px 100%;
    animation: pb-shimmer 1.4s ease-in-out infinite;
    border-radius: 4px;
    display: block;
}

/* ── Simple height shapes (legacy / fallback) ── */
.pb-skel-hero   { height: 420px; }
.pb-skel-grid   { height: 300px; }
.pb-skel-banner { height: 180px; }
.pb-skel-text   { height: 130px; }
.pb-skel-row    { height:  90px; }
.pb-skel-short  { height:  56px; }
.pb-skel-card   { height:  48px; border-radius: 8px; }
.pb-skel-line   { height:  14px; border-radius: 4px; }
.pb-skel-circle { border-radius: 50%; flex-shrink: 0; }

/* ── Frontend page skeleton wrapper ── */
.pb-skeleton-page { padding-top: 12px; padding-bottom: 12px; }

/* ── Content hidden until skeleton finishes ── */
.pb-content-hidden { display: none !important; }


/* ═══════════════════════════════════════════════════════
   DETAILED SKELETON — Hero Slider
   ═══════════════════════════════════════════════════════ */
.pb-skel-d-hero {
    position: relative;
    height: 420px;
    border-radius: 6px;
    overflow: hidden;
}
.pb-skel-d-hero > .pb-skel {
    position: absolute;
    inset: 0;
    border-radius: 0;
    height: 100%;
}
.pb-skel-d-hero__body {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0 60px;
    gap: 14px;
}
.pb-skel-d-hero__dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    align-items: center;
}
.pb-skel-d-hero__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.pb-skel-d-hero__dot--active {
    width: 22px;
    border-radius: 4px;
}
.pb-skel-d-hero__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
.pb-skel-d-hero__nav--prev { right: 20px; }
.pb-skel-d-hero__nav--next { left: 20px; }
@media (max-width: 767px) {
    .pb-skel-d-hero { height: 240px; }
    .pb-skel-d-hero__body { padding: 0 24px; }
}


/* ═══════════════════════════════════════════════════════
   DETAILED SKELETON — Product / Item Grid
   ═══════════════════════════════════════════════════════ */
.pb-skel-d-grid__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}
.pb-skel-d-grid__cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.pb-skel-d-grid__card { display: flex; flex-direction: column; gap: 8px; }
.pb-skel-d-grid__img  { height: 190px; border-radius: 8px; }
.pb-skel-d-grid__tag  { height: 12px; width: 50%; border-radius: 3px; }
.pb-skel-d-grid__name { height: 15px; width: 85%; border-radius: 3px; }
.pb-skel-d-grid__price{ height: 15px; width: 55%; border-radius: 3px; }
.pb-skel-d-grid__btn  { height: 34px; border-radius: 6px; margin-top: 4px; }
@media (max-width: 991px) {
    .pb-skel-d-grid__cards { grid-template-columns: repeat(3, 1fr); }
    .pb-skel-d-grid__card:nth-child(4) { display: none; }
}
@media (max-width: 575px) {
    .pb-skel-d-grid__cards { grid-template-columns: repeat(2, 1fr); }
    .pb-skel-d-grid__card:nth-child(3),
    .pb-skel-d-grid__card:nth-child(4) { display: none; }
    .pb-skel-d-grid__img { height: 140px; }
}


/* ═══════════════════════════════════════════════════════
   DETAILED SKELETON — Banner
   ═══════════════════════════════════════════════════════ */
.pb-skel-d-banner {
    position: relative;
    height: 200px;
    border-radius: 8px;
    overflow: hidden;
}
.pb-skel-d-banner > .pb-skel {
    position: absolute;
    inset: 0;
    border-radius: 0;
    height: 100%;
}
.pb-skel-d-banner__body {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 48px;
    gap: 12px;
}
@media (max-width: 575px) {
    .pb-skel-d-banner { height: 140px; }
    .pb-skel-d-banner__body { padding: 0 24px; }
}


/* ═══════════════════════════════════════════════════════
   DETAILED SKELETON — Text / Content Section
   ═══════════════════════════════════════════════════════ */
.pb-skel-d-text {
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pb-skel-d-text__heading { height: 26px; width: 260px; border-radius: 5px; }
.pb-skel-d-text__sub     { height: 16px; width: 180px; border-radius: 3px; margin-bottom: 6px; }


/* ═══════════════════════════════════════════════════════
   DETAILED SKELETON — Category / Icon Row
   ═══════════════════════════════════════════════════════ */
.pb-skel-d-row__header { margin-bottom: 16px; }
.pb-skel-d-row__items {
    display: flex;
    gap: 12px;
    overflow: hidden;
}
.pb-skel-d-row__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 72px;
    max-width: 110px;
}
.pb-skel-d-row__thumb {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    flex-shrink: 0;
}
.pb-skel-d-row__label { height: 12px; width: 54px; border-radius: 3px; }
@media (max-width: 575px) {
    .pb-skel-d-row__item:nth-child(n+6) { display: none; }
    .pb-skel-d-row__thumb { width: 50px; height: 50px; }
}


/* ═══════════════════════════════════════════════════════
   DETAILED SKELETON — Dashboard: Welcome + Stats
   ═══════════════════════════════════════════════════════ */
.db-skel-welcome {
    height: 88px;
    border-radius: 12px;
    margin-bottom: 12px;
}
.db-skel-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}
.db-skel-stat {
    height: 72px;
    border-radius: 12px;
}
@media (max-width: 575px) {
    .db-skel-stats { grid-template-columns: 1fr; }
}

/* ─── Dashboard: Order Row ─── */
.db-skel-order {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid #f5f5f5;
}
.db-skel-order__imgs {
    display: flex;
    gap: 5px;
    flex-shrink: 0;
}
.db-skel-order__img {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    flex-shrink: 0;
}
.db-skel-order__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.db-skel-order__end {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
    min-width: 90px;
}

/* ─── Dashboard: Address Card ─── */
.db-skel-addrs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    padding: 16px 20px;
}
.db-skel-addr {
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
@media (max-width: 767px) {
    .db-skel-addrs { grid-template-columns: 1fr; }
}

/* ─── Dashboard: Q&A / Comment Item ─── */
.db-skel-qa {
    padding: 14px 20px;
    border-bottom: 1px solid #f5f5f5;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.db-skel-qa__product {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}
.db-skel-qa__pimg {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    flex-shrink: 0;
}

/* ─── Dashboard: Table Row ─── */
.db-skel-table {
    width: 100%;
}
.db-skel-table-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 20px;
    border-bottom: 1px solid #f5f5f5;
}
.db-skel-table-row__img {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    flex-shrink: 0;
}

/* ─── Dashboard: Product Card Grid ─── */
.db-skel-pcgrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 16px 20px;
}
@media (max-width: 991px) { .db-skel-pcgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575px)  { .db-skel-pcgrid { grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 12px; } }

/* ═══════════════════════════════════════════════════════
   DETAILED SKELETON — Blog Card
   ═══════════════════════════════════════════════════════ */
.blog-skel-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #f0f0f0;
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
}
.blog-skel-card__img {
    height: 200px;
    width: 100%;
    border-radius: 0;
}
.blog-skel-card__body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ═══════════════════════════════════════════════════════
   DETAILED SKELETON — Category Page Product Card
   ═══════════════════════════════════════════════════════ */
.cp-skel-product {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #f0f0f0;
    display: flex;
    flex-direction: column;
}
.cp-skel-product__img {
    aspect-ratio: 1 / 1;
    width: 100%;
    border-radius: 0;
}
.cp-skel-product__body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.cp-skel-product__btn {
    height: 34px;
    border-radius: 8px;
    margin-top: 4px;
}

/* Category page subcategory chip skeletons */
.cp-skel-subcats {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.cp-skel-subcat {
    height: 36px;
    border-radius: 20px;
    flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════
   DETAILED SKELETON — Checkout Page
   ═══════════════════════════════════════════════════════ */
.ck-skel-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 20px 0 28px;
}
.ck-skel-step {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ck-skel-step__num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ck-skel-step__label {
    width: 80px;
    height: 13px;
    border-radius: 3px;
}
.ck-skel-step__line {
    width: 60px;
    height: 2px;
    border-radius: 2px;
    margin: 0 8px;
}
.ck-skel-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 20px;
    align-items: start;
}
.ck-skel-card {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 16px;
}
.ck-skel-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid #f5f5f5;
}
.ck-skel-card__title { width: 120px; height: 15px; border-radius: 4px; }
.ck-skel-card__action { width: 80px; height: 28px; border-radius: 8px; }
.ck-skel-card__body { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.ck-skel-addr-row { height: 72px; border-radius: 10px; }
.ck-skel-ship-row { height: 52px; border-radius: 10px; }
.ck-skel-pay-row { height: 52px; border-radius: 10px; }
.ck-skel-input { height: 42px; border-radius: 8px; }
.ck-skel-oi {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid #f5f5f5;
}
.ck-skel-oi__img { width: 52px; height: 52px; border-radius: 8px; flex-shrink: 0; }
.ck-skel-oi__info { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.ck-skel-oi__name { height: 13px; border-radius: 3px; width: 75%; }
.ck-skel-oi__price { height: 13px; border-radius: 3px; width: 40%; }
.ck-skel-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
}
.ck-skel-summary-row__label { height: 13px; width: 90px; border-radius: 3px; }
.ck-skel-summary-row__val   { height: 13px; width: 60px; border-radius: 3px; }
.ck-skel-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0 2px;
}
.ck-skel-total-row__label { height: 16px; width: 70px; border-radius: 3px; }
.ck-skel-total-row__val   { height: 20px; width: 100px; border-radius: 4px; }
.ck-skel-btn { height: 48px; border-radius: 10px; }
@media (max-width: 991px) {
    .ck-skel-layout { grid-template-columns: 1fr; }
    .ck-skel-step__label { display: none; }
    .ck-skel-step__line { width: 40px; }
}


/* ═══════════════════════════════════════════════════════
   DETAILED SKELETON — Cart Page
   ═══════════════════════════════════════════════════════ */
.ct-skel-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 20px;
    align-items: start;
    padding: 8px 0;
}
.ct-skel-card {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 16px;
}
.ct-skel-card__head {
    padding: 14px 20px;
    border-bottom: 1px solid #f5f5f5;
}
.ct-skel-card__title { height: 16px; width: 130px; border-radius: 4px; }
.ct-skel-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid #f5f5f5;
}
.ct-skel-item__img { width: 80px; height: 80px; border-radius: 10px; flex-shrink: 0; }
.ct-skel-item__info { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.ct-skel-item__name  { height: 14px; border-radius: 3px; width: 70%; }
.ct-skel-item__meta  { height: 13px; border-radius: 3px; width: 40%; }
.ct-skel-item__qty   { height: 32px; width: 90px; border-radius: 8px; }
.ct-skel-item__price { height: 18px; width: 72px; border-radius: 4px; flex-shrink: 0; }
.ct-skel-summary-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; }
.ct-skel-sum-row { display: flex; justify-content: space-between; }
.ct-skel-sum-row__label { height: 13px; width: 80px; border-radius: 3px; }
.ct-skel-sum-row__val   { height: 13px; width: 55px; border-radius: 3px; }
.ct-skel-btn { height: 48px; border-radius: 10px; }
@media (max-width: 991px) {
    .ct-skel-layout { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════
   Section-level shimmer overlay (admin preview)
   ═══════════════════════════════════════════════════════ */
.pb-section-wrap.pb-skel-loading {
    position: relative;
    pointer-events: none;
}
.pb-section-wrap.pb-skel-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(240,240,240,.7) 25%, rgba(228,228,228,.7) 50%, rgba(240,240,240,.7) 75%);
    background-size: 600px 100%;
    animation: pb-shimmer 1.4s ease-in-out infinite;
    z-index: 80;
    border-radius: inherit;
}

/* ═══════════════════════════════════════════════════════
   Mobile-first responsive sweep for all skeletons
   ═══════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .pb-skel-d-grid__cards,
    .pb-skel-grid,
    .pb-skel-products,
    .pb-skel-cards { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }

    .pb-skel-d-grid__img,
    .pb-skel-product__img,
    .pb-skel-card__img { height: 120px !important; }

    .pb-skel-d-grid__card:nth-child(n+5),
    .pb-skel-card:nth-child(n+5) { display: none; }

    .pb-skel-d-hero,
    .pb-skel-hero,
    .pb-skel-banner,
    .pb-skel-d-banner { height: 180px !important; }

    .pb-skel-d-banner__body,
    .pb-skel-hero__body { padding: 0 16px !important; gap: 8px !important; }

    .pb-skel-d-grid__header,
    .pb-skel-section-header { flex-wrap: wrap; gap: 8px; margin-bottom: 12px !important; }

    .pb-skel-d-text,
    .pb-skel-text,
    .pb-skel-content { padding: 12px !important; }

    /* Generic page padding */
    .pb-skeleton-page { padding-inline: 12px !important; }
}

@media (max-width: 480px) {
    .pb-skel-d-grid__cards,
    .pb-skel-grid,
    .pb-skel-products,
    .pb-skel-cards { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }

    .pb-skel-d-grid__img,
    .pb-skel-product__img,
    .pb-skel-card__img { height: 110px !important; }

    .pb-skel-d-grid__btn,
    .pb-skel-card__btn { height: 28px !important; }

    .pb-skel-d-hero,
    .pb-skel-hero,
    .pb-skel-banner,
    .pb-skel-d-banner { height: 140px !important; }

    /* Hide decorative skeleton elements on tiny screens */
    .pb-skel-d-hero__nav,
    .pb-skel-hero__nav,
    .pb-skel-decorative,
    .pb-skel-d-grid__tag { display: none !important; }
}

/* Avoid horizontal overflow on any skeleton container */
.pb-skel-page,
.pb-skeleton-page,
[class*="pb-skel-d-"],
[class*="pb-skel-page"] { max-width: 100%; overflow-x: hidden; }

/* Theme-aware skeleton surfaces
   Keep loading states aligned with the active storefront design tokens. */
html[data-surface-tone="dark"] {
    --skel-bg: color-mix(in srgb, var(--background, #0f172a) 92%, black);
    --skel-card: color-mix(in srgb, var(--surface, #111827) 88%, transparent);
    --skel-line: color-mix(in srgb, var(--surface-alt, #1f2937) 78%, white 4%);
    --skel-line-hot: color-mix(in srgb, var(--accent, var(--primary, #64748b)) 26%, var(--surface-alt, #1f2937));
    --skel-border: color-mix(in srgb, var(--border-color, #334155) 72%, rgba(255,255,255,.18));
}
html[data-surface-tone="dark"] .pb-skeleton-page,
html[data-surface-tone="dark"] .pb-skel-page {
    background: transparent;
    color: var(--text, #f8fafc);
}
html[data-surface-tone="dark"] .pb-skel,
html[data-surface-tone="dark"] .pb-skel-overlay,
html[data-surface-tone="dark"] [class*="skel-"][class*="__line"],
html[data-surface-tone="dark"] [class*="skel-"][class*="__img"],
html[data-surface-tone="dark"] [class*="skel-"][class*="__thumb"],
html[data-surface-tone="dark"] [class*="skel-"][class*="__btn"],
html[data-surface-tone="dark"] [class*="skel-"][class*="__tag"],
html[data-surface-tone="dark"] [class*="skel-"][class*="__name"],
html[data-surface-tone="dark"] [class*="skel-"][class*="__price"],
html[data-surface-tone="dark"] [class*="skel-"][class*="__label"],
html[data-surface-tone="dark"] [class*="skel-"][class*="__val"] {
    background: linear-gradient(90deg, var(--skel-line) 20%, var(--skel-line-hot) 50%, var(--skel-line) 80%) !important;
    background-size: 600px 100% !important;
    animation: pb-shimmer 1.4s ease-in-out infinite;
}
html[data-surface-tone="dark"] :is(.blog-skel-card,.cp-skel-product,.ck-skel-card,.ct-skel-card,.db-skel-addr,.pb-skel-d-grid__card) {
    background: var(--skel-card) !important;
    border-color: var(--skel-border) !important;
    box-shadow: 0 18px 54px rgba(0,0,0,.20);
}
html[data-surface-tone="dark"] :is(.db-skel-order,.db-skel-qa,.db-skel-table-row,.ck-skel-card__head,.ck-skel-oi,.ct-skel-card__head,.ct-skel-item) {
    border-color: var(--skel-border) !important;
}
html[data-surface-tone="dark"] .pb-section-wrap.pb-skel-loading::after {
    background: linear-gradient(90deg, rgba(17,24,39,.58) 20%, rgba(var(--primary-rgb, 100,116,139), .20) 50%, rgba(17,24,39,.58) 80%) !important;
    background-size: 600px 100% !important;
}