:root{
  --skel-bg:#f1f5f9; /* slate-100 */
  --skel-wave:#e2e8f0; /* slate-200 */
}

.skeleton-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
@media (min-width:768px){.skeleton-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}}

.skeleton-card{background:#fff;border-radius:.5rem;overflow:hidden;border:1px solid #e5e7eb}
.skeleton-media{aspect-ratio:1/1;background:linear-gradient(90deg,var(--skel-bg),var(--skel-wave),var(--skel-bg));background-size:200% 100%;animation:skel-shimmer 1.2s infinite}
.skeleton-body{padding:.75rem}
.skeleton-badge{width:64px;height:18px;border-radius:6px;background:linear-gradient(90deg,var(--skel-bg),var(--skel-wave),var(--skel-bg));background-size:200% 100%;animation:skel-shimmer 1.2s infinite;margin-bottom:.5rem}
.skeleton-title{height:16px;border-radius:6px;background:linear-gradient(90deg,var(--skel-bg),var(--skel-wave),var(--skel-bg));background-size:200% 100%;animation:skel-shimmer 1.2s infinite;margin-bottom:.4rem}
.skeleton-title.short{width:60%}
.skeleton-title.long{width:90%}
.skeleton-price{height:14px;width:40%;border-radius:6px;background:linear-gradient(90deg,var(--skel-bg),var(--skel-wave),var(--skel-bg));background-size:200% 100%;animation:skel-shimmer 1.2s infinite;margin-top:.25rem}

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