/* Skeleton loaders — gray placeholders shown while content fetches.
   Used by infinite scroll on items list / user profile pages.
   Improves perceived speed: instead of empty space → user sees structure
   immediately and "feels" content arrived faster. */

.bz-skel-grid {
    display: flex; flex-wrap: wrap; gap: 14px;
    margin-top: 14px;
}
.bz-skel-card {
    flex: 0 0 calc(33.333% - 10px);
    background: #fff;
    border: 1px solid #f1f3f5;
    border-radius: 6px;
    overflow: hidden;
    min-height: 280px;
    display: flex; flex-direction: column;
}
@media (max-width: 992px) { .bz-skel-card { flex: 0 0 calc(50% - 7px); } }
@media (max-width: 600px) { .bz-skel-card { flex: 0 0 calc(50% - 7px); min-height: 230px; } }

.bz-skel-img {
    width: 100%; aspect-ratio: 4 / 3;
    background: linear-gradient(90deg, #f1f3f5 0%, #e9ecef 50%, #f1f3f5 100%);
    background-size: 200% 100%;
    animation: bz-skel-shimmer 1.4s infinite linear;
}
.bz-skel-body { padding: 10px 12px; flex: 1; }
.bz-skel-line {
    height: 12px; border-radius: 4px; margin-bottom: 8px;
    background: linear-gradient(90deg, #f1f3f5 0%, #e9ecef 50%, #f1f3f5 100%);
    background-size: 200% 100%;
    animation: bz-skel-shimmer 1.4s infinite linear;
}
.bz-skel-line.w-80 { width: 80%; }
.bz-skel-line.w-60 { width: 60%; }
.bz-skel-line.w-40 { width: 40%; }
.bz-skel-price {
    height: 18px; width: 50%; border-radius: 4px; margin-top: 12px;
    background: linear-gradient(90deg, #f1f3f5 0%, #e9ecef 50%, #f1f3f5 100%);
    background-size: 200% 100%;
    animation: bz-skel-shimmer 1.4s infinite linear;
}

@keyframes bz-skel-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}