/* Add custom CSS styles below */ 
.s-block {
    margin-top: 1rem;
}

.main-menu li>a:hover {
        color: white;
    }
    
.product-card .s-rating-stars-wrapper .s-rating-stars-reviews {
    flex: 1 1 auto;
    padding-right: 20px;
}

.fit-slider-products .s-slider-swiper-wrapper .swiper-slide custom-salla-product-card form {
height: 100%;
    padding-top: 1rem;
}


salla-slider[type]:not(.hydrated) > div, salla-slider[type]:not(.hydrated) .swiper > div > div, .carousel-slider .swiper {
    padding-inline: 3rem;

}



/* ✅ 1. تحسين LCP - البانرات الرئيسية */
.banner--fixed img,
.s-block--fixed-banner img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    aspect-ratio: 16/9;
    max-height: 600px;
}

/* ✅ 2. منع CLS - تثبيت أبعاد الصور */
img {
    display: block;
    max-width: 100%;
    height: auto;
}

img.lazy {
    min-height: 200px;
    background: #f3f4f6;
    opacity: 0;
    transition: opacity .3s ease;
}

img.lazy.loaded {
    opacity: 1;
    min-height: unset;
}

/* ✅ 3. تثبيت سلايدرات المنتجات */
.swiper-slide {
    min-height: 350px;
}

.swiper-slide img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
}

/* ✅ 4. تحسين الهيدر - منع CLS */
.store-header {
    min-height: 80px;
}

.main-nav-container {
    min-height: 48px;
}

.navbar-brand img {
    width: auto;
    height: 48px;
    display: block;
}

/* ✅ 5. تثبيت البلوكات */
.s-block {
    min-height: 100px;
}

.s-block--square-links {
    min-height: 300px;
}

.s-block--testimonials {
    min-height: 400px;
}

/* ✅ 6. تحسين كروت المنتجات */
salla-products-slider {
    display: block;
    min-height: 450px;
}

/* ✅ 7. تعطيل الأنيميشنز الثقيلة */
.animated,
.fade-in,
.slide-up,
.enhanced-title-border,
[class*="animation"] {
    animation: none !important;
    transition: none !important;
}

/* ✅ 8. تحسين الخطوط */
@font-face {
    font-family: 'Apple';
    font-display: swap;
}

body,
.font-apple {
    font-display: swap;
}

/* ✅ 9. Loading Overlay */
.loading-overlay {
    pointer-events: none;
    will-change: opacity;
}

/* ✅ 10. تحسين الفوتر */
.store-footer {
    min-height: 400px;
}

.footer-bottom {
    min-height: 80px;
}

/* ✅ 11. منع Reflow */
button,
a {
    transition: none !important;
}

.header-btn,
.social-link {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ✅ 12. تحسين الريفيوز */
.review {
    min-height: 200px;
}

.reviews-slider {
    display: block;
    min-height: 250px;
}

/* ✅ 13. الموبايل - منع CLS */
@media (max-width: 768px) {
    .banner--fixed img,
    .s-block--fixed-banner img {
        min-height: 200px;
        aspect-ratio: 16/9;
    }
    
    .s-block--square-links {
        min-height: 200px;
    }
    
    .swiper-slide {
        min-height: 280px;
    }
    
    .store-header {
        min-height: 60px;
    }
    
    .navbar-brand img {
        height: 40px;
    }
    
    salla-products-slider {
        min-height: 350px;
    }
    
    .s-block--testimonials {
        min-height: 300px;
    }
}

/* ✅ 14. تحسين Salla Components */
salla-slider,
salla-cart-summary,
salla-search,
salla-login-modal {
    display: block;
    contain: layout style paint;
}

/* ✅ 15. Logo - منع Layout Shift */
.navbar-brand {
    width: 200px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ✅ 16. Container Stability */
.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* ✅ 17. Scroll Optimization */
* {
    scroll-behavior: auto !important;
}

/* ✅ 18. Reduce Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}