---
/**
 * Skeleton loading placeholder for ProductCard.
 * Shows a shimmer animation while real products load.
 */
---

<div class="flex flex-col overflow-hidden rounded-2xl border border-border/50 bg-bg-card animate-pulse">
  <!-- Image placeholder -->
  <div class="aspect-square w-full bg-white rounded-t-2xl"></div>

  <!-- Info placeholder -->
  <div class="flex flex-col gap-2.5 p-4">
    <div class="h-3 w-12 rounded bg-bg-elevated"></div>
    <div class="h-4 w-3/4 rounded bg-bg-elevated"></div>
    <div class="h-3 w-1/2 rounded bg-bg-elevated"></div>
    <div class="mt-2 h-5 w-24 rounded bg-bg-elevated"></div>
    <div class="h-3 w-16 rounded bg-bg-elevated"></div>
  </div>
</div>