/* ============================================
   SKELETON LOADING SYSTEM
   Shimmer animation for product grid & cards
   ============================================ */

@keyframes skeleton-shimmer {
    0%   { background-position: 200% center; }
    100% { background-position: -200% center; }
}

.skeleton-pulse {
    background: linear-gradient(
        90deg,
        #f0ece6 25%,
        #e8e2da 50%,
        #f0ece6 75%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.6s ease-in-out infinite;
    border-radius: 3px;
}

/* ── Product card skeleton ─────────────────── */
.pc-skeleton {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.pc-skeleton .sk-img {
    width: 100%;
    aspect-ratio: 3 / 4;
}

.pc-skeleton .sk-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pc-skeleton .sk-brand {
    height: 10px;
    width: 40%;
}

.pc-skeleton .sk-title {
    height: 14px;
    width: 80%;
}

.pc-skeleton .sk-title-2 {
    height: 14px;
    width: 60%;
}

.pc-skeleton .sk-price {
    height: 18px;
    width: 30%;
    margin-top: 4px;
}

.pc-skeleton .sk-btn {
    height: 38px;
    width: 100%;
    margin-top: 8px;
    border-radius: 2px;
}

/* ── Sidebar cart item skeleton ────────────── */
.sidebar-item-skeleton {
    display: flex;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid #f0ece6;
}

.sidebar-item-skeleton .sk-img-sq {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    border-radius: 3px;
}

.sidebar-item-skeleton .sk-lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 4px;
}

.sidebar-item-skeleton .sk-line-lg  { height: 12px; width: 75%; }
.sidebar-item-skeleton .sk-line-md  { height: 10px; width: 50%; }
.sidebar-item-skeleton .sk-line-sm  { height: 10px; width: 35%; }

/* ── Review card skeleton ───────────────────── */
.rv-card-skeleton {
    padding: 20px 0;
    border-bottom: 1px solid #f0ece6;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rv-card-skeleton .sk-stars { height: 14px; width: 100px; }
.rv-card-skeleton .sk-rv-title { height: 16px; width: 65%; }
.rv-card-skeleton .sk-rv-body   { height: 12px; width: 100%; }
.rv-card-skeleton .sk-rv-body-2 { height: 12px; width: 85%; }
.rv-card-skeleton .sk-rv-meta   { height: 10px; width: 45%; margin-top: 4px; }