/********************************************
 * 0. GLOBAL – منع القفزات بسبب الصور والعناصر
 ********************************************/
html, body {
    scroll-behavior: smooth;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/********************************************
 * 1. الهيدر + شريط الأعلى (يمنع الاهتزاز)
 ********************************************/
header,
.site-header,
.main-header {
    min-height: 70px !important;
}

header img,
.site-header img,
.main-header img {
    max-height: 40px;
}

/********************************************
 * 2. البنر الرئيسي (Hero Banner) – تعيين مساحة ثابتة لتقليل CLS
 ********************************************/
section:first-of-type,
section.hero,
.home-hero,
.hero-section,
.banner-section {
    min-height: 260px;
    max-height: 360px;
    overflow: hidden;
}

/* على الموبايل */
@media (max-width: 767px) {
    section:first-of-type,
    .banner-section {
        min-height: 220px;
        max-height: 280px;
    }
}

section:first-of-type img,
.hero img,
.banner-section img {
    width: 100%;
    aspect-ratio: 16 / 6;
    object-fit: cover;
}

/********************************************
 * 3. كروت المنتجات
 ********************************************/
.product-card,
.product-item,
.product-box {
    min-height: 330px;
}

.product-card img,
.product-item img,
.product-box img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

.product-card button,
.product-item button,
.product-box button,
.add-to-cart,
.btn {
    min-height: 44px;
}

/********************************************
 * 4. قسم الآراء / التستيمونيال
 ********************************************/
.testimonials,
.testimonials-slider,
.reviews-section {
    min-height: 180px;
}

.testimonials .swiper,
.reviews-section .swiper {
    min-height: 150px;
    overflow: hidden;
}

/********************************************
 * 5. قسم الإحصائيات
 ********************************************/
.stats,
.statistics {
    min-height: 160px;
}

/********************************************
 * 6. الفوتر
 ********************************************/
footer,
.site-footer {
    min-height: 220px;
}

/********************************************
 * 7. شريط التنقل السفلي للموبايل
 ********************************************/
.bottom-nav,
.mobile-nav,
.sticky-bottom-nav,
.fixed-bottom-bar {
    min-height: 60px;
}

/********************************************
 * 8. منع الانتقالات الثقيلة
 ********************************************/
* {
    transition-property: color, background-color, border-color, box-shadow, transform;
    transition-duration: 0.15s;
}

/********************************************
 * 9. تثبيت شبكة المنتجات لتقليل التحرك
 ********************************************/
.products-grid,
.products-list,
.products-section {
    min-height: 500px;
}

/********************************************
 * 10. تعديل البنر بعد شكوى القصّ
 ********************************************/
section:first-of-type {
    min-height: 380px;
    max-height: none;
    overflow: visible;
}

section:first-of-type img {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
}