{{-- List of product card skeletons --}}
@php $n = $count ?? 6; @endphp
<div class="space-y-3">
    @for($i = 0; $i < $n; $i++)
        <article class="skel-card p-3 lg:p-4 grid grid-cols-[100px_1fr] sm:grid-cols-[160px_1fr_auto] gap-4 items-start">
            <div class="aspect-square skel"></div>
            <div class="space-y-2">
                <div class="skel skel-line w-3/5"></div>
                <div class="skel skel-line w-2/5"></div>
                <div class="flex items-center gap-2 mt-2">
                    <div class="skel skel-line w-16" style="height:18px"></div>
                    <div class="skel skel-line w-12" style="height:14px"></div>
                </div>
                <div class="skel skel-line w-1/3" style="height:18px"></div>
            </div>
            <div class="hidden sm:flex flex-col gap-2 items-end">
                <div class="skel" style="height:36px;width:120px;border-radius:8px"></div>
                <div class="skel" style="height:36px;width:120px;border-radius:8px"></div>
            </div>
        </article>
    @endfor
</div>