// Loading Skeleton Functions
function showProductSkeletons(count = 6) {
    const skeleton = `
        <div class="bg-white rounded-2xl shadow-md overflow-hidden border border-[#e8ddd0] animate-pulse">
            <div class="w-full h-56 bg-gradient-to-br from-[#e8ddd0] to-[#d4c4b0]"></div>
            <div class="p-6">
                <div class="h-6 bg-[#e8ddd0] rounded mb-2 w-3/4"></div>
                <div class="h-4 bg-[#e8ddd0] rounded mb-1 w-full"></div>
                <div class="h-4 bg-[#e8ddd0] rounded mb-4 w-2/3"></div>
                <div class="flex items-center justify-between pt-4 border-t border-[#e8ddd0]">
                    <div class="h-8 bg-[#e8ddd0] rounded w-24"></div>
                    <div class="h-10 bg-[#e8ddd0] rounded-full w-32"></div>
                </div>
            </div>
        </div>
    `;
    
    return skeleton.repeat(count);
}

function showFilterSkeleton() {
    return `
        <div class="bg-white p-6 rounded-2xl shadow-md border border-[#e8ddd0] animate-pulse">
            <div class="h-6 bg-[#e8ddd0] rounded mb-6 w-1/3"></div>
            <div class="space-y-5">
                <div class="h-4 bg-[#e8ddd0] rounded mb-2 w-1/4"></div>
                <div class="h-10 bg-[#e8ddd0] rounded-xl"></div>
                <div class="h-4 bg-[#e8ddd0] rounded mb-2 w-1/4"></div>
                <div class="h-10 bg-[#e8ddd0] rounded-xl"></div>
                <div class="h-4 bg-[#e8ddd0] rounded mb-2 w-1/4"></div>
                <div class="h-10 bg-[#e8ddd0] rounded-xl"></div>
            </div>
        </div>
    `;
}

window.showProductSkeletons = showProductSkeletons;
window.showFilterSkeleton = showFilterSkeleton;

















