/* ============================================================
   Digital Commerce Integration — Shared skeleton loaders (tj-skeleton)
   ------------------------------------------------------------
   Full-page navigation skeleton + image shimmer for every
   surface. Theme + layout are chosen by tj-skeleton.js:
     #tj-skel-overlay.tjsk-dark      → slate-navy console surfaces
     #tj-skel-overlay.tjsk-sidebar   → side rail + content shell
     #tj-skel-overlay.tjsk-site      → top-nav + hero + card grid
   Foundations v1: one 1.4s linear shimmer sweep shared by every
   bar on the page (same clock → reads as one pass), 2px bars,
   flat surfaces, no blur, no aurora. Full-page navigation is a
   2px indigo progress rule at the top edge; the overlay stays
   available for pages that mount it explicitly.
   ============================================================ */

/* ── shimmer primitives ── */
.tjsk{
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg,
        var(--sk-base, #eceef1) 25%,
        var(--sk-sheen, #f7f8fa) 37%,
        var(--sk-base, #eceef1) 63%);
    background-size: 280% 100%;
    animation: tjskShimmer 1.4s linear infinite;
    border-radius: var(--tj-r-sm, 6px);
    color: transparent !important;
    pointer-events: none;
    user-select: none;
}
@keyframes tjskShimmer{ 0%{ background-position: -140% 0; } 100%{ background-position: 240% 0; } }
.tjsk-line{ height: 10px; margin: 9px 0; }
.tjsk-line.sm{ width: 34%; }
.tjsk-line.md{ width: 58%; }
.tjsk-line.lg{ width: 84%; }
.tjsk-title{ height: 16px; width: 44%; margin: 10px 0 14px; }

/* image shimmer while streaming in (JS toggles the class) */
img.tjsk-img{
    background: linear-gradient(90deg,
        var(--sk-base, #eceef1) 25%,
        var(--sk-sheen, #f7f8fa) 37%,
        var(--sk-base, #eceef1) 63%);
    background-size: 280% 100%;
    animation: tjskShimmer 1.4s linear infinite;
    color: transparent;
}

/* ── full-page navigation: 2px indigo progress rule at the top edge ── */
#tj-skel-bar{
    position: fixed; inset-block-start: 0; inset-inline-start: 0; z-index: 99995;
    height: 2px; width: 0; background: var(--tj-brand);
    transition: width 280ms cubic-bezier(.2,.8,.2,1), opacity 180ms ease-out;
    pointer-events: none;
}
#tj-skel-bar.on{ width: 38%; }
#tj-skel-bar.mid{ width: 72%; }
#tj-skel-bar.done{ width: 100%; opacity: 0; }

/* ── the overlay ── */
#tj-skel-overlay{
    /* light defaults (marketplace) */
    --sk-canvas: #f5f6f8;
    --sk-base:   #eef0f3;
    --sk-sheen:  #f8f9fb;
    --sk-side:   #fff;
    --sk-border: #e5e7eb;
    --sk-topbar: #ffffff;
    --sk-card:   #fff;

    position: fixed;
    inset: 0;
    z-index: 99990;
    display: none;
    background: var(--sk-canvas);
    opacity: 0;
    transition: opacity 180ms ease-out;
}
#tj-skel-overlay.tjsk-dark{
    --sk-canvas: #0a0f1e;
    --sk-base:   #182234;
    --sk-sheen:  #26334c;
    --sk-side:   #0d1424;
    --sk-border: #1b2338;
    --sk-topbar: #0d1424;
    --sk-card:   #0d1424;
}
#tj-skel-overlay.on{ display: flex; opacity: 1; }

/* side rail (sidebar layout only) */
#tj-skel-overlay .tjsk-side{
    display: none;
    width: 224px; flex: 0 0 auto;
    background: var(--sk-side);
    border-inline-end: 1px solid var(--sk-border);
    padding: 18px 18px;
    flex-direction: column; gap: 14px;
}
#tj-skel-overlay.tjsk-sidebar .tjsk-side{ display: flex; }
#tj-skel-overlay .tjsk-side .tjsk-avatar{ width: 22px; height: 22px; border-radius: var(--tj-r-sm, 6px); }

/* main column */
#tj-skel-overlay .tjsk-main{
    flex: 1 1 auto; min-width: 0;
    display: flex; flex-direction: column;
    padding: 0 26px 26px;
}
#tj-skel-overlay .tjsk-top{
    height: 58px; margin: 0 -26px 22px;
    background: var(--sk-topbar);
    border-bottom: 1px solid var(--sk-border);
}
#tj-skel-overlay .tjsk-hero{ height: 130px; border-radius: var(--tj-r-lg, 12px); margin-bottom: 20px; }
#tj-skel-overlay .tjsk-tiles{
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-bottom: 20px;
    border: 1px solid var(--sk-border); border-radius: var(--tj-r-lg, 12px); overflow: hidden; background: var(--sk-card);
}
#tj-skel-overlay .tjsk-tiles .tjsk{ height: 78px; border-radius: 0; border-inline-end: 1px solid var(--sk-border); }
#tj-skel-overlay .tjsk-tiles .tjsk:last-child{ border-inline-end: 0; }
/* site layout: taller tiles read as product cards */
#tj-skel-overlay.tjsk-site .tjsk-tiles{ gap: 16px; border: 0; background: transparent; overflow: visible; }
#tj-skel-overlay.tjsk-site .tjsk-tiles .tjsk{ height: 220px; border: 1px solid var(--sk-border); border-radius: var(--tj-r-lg, 12px); }
#tj-skel-overlay .tjsk-block{ flex: 1 1 auto; border-radius: var(--tj-r-lg, 12px); max-height: 400px; border: 1px solid var(--sk-border); }

@media (max-width: 768px){
    #tj-skel-overlay .tjsk-side{ display: none !important; }
    #tj-skel-overlay .tjsk-main{ padding: 0 14px 14px; }
    #tj-skel-overlay .tjsk-top{ margin: 0 -14px 16px; }
    #tj-skel-overlay .tjsk-tiles{ grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce){
    .tjsk, img.tjsk-img{ animation: none; }
    #tj-skel-bar{ transition: none; }
}

/* ── page-shaped variants (marketplace, built by tj-skeleton.js) ── */
#tj-skel-overlay.tjsk-shop .tjsk-main{ max-width: 1280px; width: 100%; margin: 0 auto; padding: 0 40px 28px; }
#tj-skel-overlay.tjsk-shop .tjsk-top{ margin: 0 0 22px; border-radius: 0; }
#tj-skel-overlay .tjsk-hero-tall{ height: clamp(220px, 32vw, 380px); border-radius: var(--tj-r-lg, 12px); border: 1px solid var(--sk-border); }
#tj-skel-overlay .tjsk-tiles-6{ grid-template-columns: repeat(6, 1fr); gap: 12px; border: 0; background: transparent; overflow: visible; }
#tj-skel-overlay .tjsk-tiles-6 .tjsk{ aspect-ratio: 1; height: auto; border-radius: var(--tj-r-lg, 12px); border: 1px solid var(--sk-border); }
#tj-skel-overlay .tjsk-cards{ display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
#tj-skel-overlay .tjsk-card{ border: 1px solid var(--sk-border); border-radius: var(--tj-r-lg, 12px); background: var(--sk-card); overflow: hidden; padding: 0 14px 14px; }
#tj-skel-overlay .tjsk-card-media{ aspect-ratio: 4 / 3; margin: 0 -14px 12px; border-radius: 0; border-bottom: 1px solid var(--sk-border); }
#tj-skel-overlay .tjsk-split{ display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: 24px; align-items: start; }
#tj-skel-overlay .tjsk-split-even{ grid-template-columns: 1fr 1fr; gap: 32px; }
#tj-skel-overlay .tjsk-split-cart{ grid-template-columns: minmax(0, 1fr) 360px; }
#tj-skel-overlay .tjsk-aside{ height: 420px; border-radius: var(--tj-r-lg, 12px); border: 1px solid var(--sk-border); }
#tj-skel-overlay .tjsk-square{ aspect-ratio: 1; border-radius: var(--tj-r-lg, 12px); border: 1px solid var(--sk-border); }
#tj-skel-overlay .tjsk-panel{ height: 260px; border-radius: var(--tj-r-lg, 12px); margin-top: 16px; border: 1px solid var(--sk-border); }
#tj-skel-overlay .tjsk-row{ display: grid; grid-template-columns: 88px minmax(0, 1fr) 120px; gap: 16px; align-items: center; padding: 14px; border: 1px solid var(--sk-border); border-radius: var(--tj-r-lg, 12px); background: var(--sk-card); margin-bottom: -1px; }
#tj-skel-overlay .tjsk-row-media{ aspect-ratio: 1; border-radius: var(--tj-r-sm, 6px); }
@media (max-width: 991px){
    #tj-skel-overlay .tjsk-split, #tj-skel-overlay .tjsk-split-even, #tj-skel-overlay .tjsk-split-cart{ grid-template-columns: 1fr; }
    #tj-skel-overlay .tjsk-aside{ display: none; }
    #tj-skel-overlay .tjsk-tiles-6{ grid-template-columns: repeat(3, 1fr); }
    #tj-skel-overlay .tjsk-cards{ grid-template-columns: repeat(2, 1fr); gap: 12px; }
}