/* Add custom CSS styles below */ 
.app-inner.has-pattern:before{
	-webkit-mask-image: unset !important;
}
/* ==========================================================================
   1. تحسين استقرار العناصر ومنع الانزياح الحركي (Fix CLS)
   ========================================================================== */

/* تثبيت أبعاد البنرات الرئيسية وحجز مساحتها في المتصفح قبل التحميل */
.main-slider, .banner-home, .slider-container {
    aspect-ratio: 16 / 9 !important;
    background-color: #111111 !important; /* خلفية داكنة مؤقتة تناسب هوية المتجر */
    content-visibility: auto;
}

/* توحيد أبعاد أطر صور المنتجات لمنع تداخل أو قفز الأزرار والأسعار */
.product-card, .product-box {
    content-visibility: auto;
    contain-intrinsic-size: 0 350px;
}

.product-card .product-card-img, .product-box img {
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    height: auto !important;
}

/* ==========================================================================
   2. تأثير التحميل الذكي للصور (Skeleton Loading Layout)
   ========================================================================== */

/* إخفاء الصور المكسورة أو التي لم تبدأ في الاستجابة بعد */
img:not([src]) {
    visibility: hidden !important;
}

/* إضافة تأثير الهيكل العظمي المتحرك للصور قيد الانتظار لتسريع الإدراك البصري */
img-lazy, img[loading="lazy"] {
    background: linear-gradient(90deg, #1a1a1a 25%, #2a2a2a 50%, #1a1a1a 75%) !important;
    background-size: 200% 100% !important;
    animation: loadingSkeletonCustom 1.5s infinite linear !important;
}

@keyframes loadingSkeletonCustom {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ==========================================================================
   3. تخفيف حجم الأكواد المعروضة على الجوال (Optimize Mobile DOM)
   ========================================================================== */

/* إلغاء الحركات والتأثيرات البصرية الثقيلة على شاشات الجوال لرفع نتيجة PageSpeed */
@media (max-width: 768px) {
    * {
        animation-delay: 0s !important;
        transition-duration: 0.1s !important;
    }
    
    .hide-on-mobile-custom {
        display: none !important;
    }
}