/* تحسين الخطوط والنصوص */
body, html {
    font-family: 'Tajawal', sans-serif !important;
    background-color: #fcfcfc !important; /* خلفية هادئة */
}

/* جعل الهيدر (رأس الصفحة) أكثر فخامة */
header.header-style-01 {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px); /* تأثير الزجاج الضبابي */
    box-shadow: 0 4px 20px rgba(0,0,0,0.05) !important;
    border-bottom: 1px solid #eee !important;
}

/* تحسين شكل بطاقات المنتجات */
.single-product-item {
    border: none !important;
    transition: all 0.4s ease-in-out !important;
    border-radius: 15px !important;
    overflow: hidden;
    background: #fff !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03) !important;
}

.single-product-item:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important;
}

/* أزرار الشراء (الذهبي الفخم) */
.add_to_cart_button, .cmn-btn {
    background: linear-gradient(45deg, #d4af37, #b8860b) !important; /* تدرج ذهبي */
    border: none !important;
    border-radius: 50px !important;
    font-weight: bold !important;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3) !important;
}

/* شريط التنقل السفلي (الموبايل) */
.mobile-nav {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(15px);
    border-top-left-radius: 30px !important;
    border-top-right-radius: 30px !important;
    height: 75px !important;
    box-shadow: 0 -10px 30px rgba(0,0,0,0.08) !important;
}





js
(function() {
    // 1. تفعيل خاصية التحميل الذكي (Lazy Loading) لكل الصور
    const optimizeImages = () => {
        const allImages = document.querySelectorAll('img');
        
        allImages.forEach(img => {
            // إضافة خاصية التحميل المتأخر (لا يتم تحميل الصورة إلا عند الاقتراب منها)
            if (!img.hasAttribute('loading')) {
                img.setAttribute('loading', 'lazy');
            }

            // منع الصور من التسبب في انزياح المحتوى (CLS) عبر تثبيت الأبعاد
            if (img.clientWidth > 0 && !img.style.height) {
                img.style.aspectRatio = `${img.clientWidth} / ${img.clientHeight}`;
            }

            // تحسين جودة العرض البرمجي
            img.style.imageRendering = '-webkit-optimize-contrast';
        });
    };

    // 2. تقليل جودة الصور العالية جداً برمجياً لتسريع العرض
    // (هذه تعمل إذا كانت المنصة تدعم تغيير الحجم عبر الرابط)
    const sharpenImages = () => {
        const products = document.querySelectorAll('.single-product-item img');
        products.forEach(img => {
            img.style.filter = 'contrast(1.05) brightness(1.02)'; // تحسين المظهر البصري لتعويض الضغط
        });
    };

    // تشغيل العمليات
    if (document.readyState === 'complete') {
        optimizeImages();
        sharpenImages();
    } else {
        window.addEventListener('load', () => {
            optimizeImages();
            sharpenImages();
        });
    }
})();