/* --- إعدادات السويبر المرنة والاحترافية --- */

/* 1. الحاوية الأساسية (الكمبيوتر الافتراضي) */
.hero-swiper.swiper {
    width: 99%;
    /* إضافة الـ aspect-ratio هنا هيحل مشكلة الـ LCP */
    aspect-ratio: 16 / 8; /* نسبة قياسية ممتازة للصور العرضية */
    height: auto;         /* نلغي الثبات عشان الـ aspect-ratio يشتغل صح */
    min-height: 600px;    /* نضع الـ 600px كحد أدنى عشان ما يصغرش زيادة */
    overflow: hidden;
    position: relative;
}

/* 2. الـ Wrapper: اصطفاف السلايدات */
.hero-swiper .swiper-wrapper {
    display: flex;
    height: 100%;
}

/* 3. الكارت الواحد (السلايد): المساحة كاملة */
.hero-swiper .swiper-slide {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
}

/* 4. الصورة: ملء المساحة بدون تشويه */
.hero-swiper .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* --- تخصيص مقاسات الموبايل (نقطة الفصل 768px) --- */
@media (max-width: 768px) {
    .hero-swiper.swiper {
        aspect-ratio: 4 / 3; /* نسبة أنسب للموبايل */
        min-height: 400px;  /* نضع الـ 400px كحد أدنى للموبايل */
    }
}

/* --- إعدادات إضافية للأزرار (مرئية للكمبيوتر والموبايل) --- */
.hero-swiper .swiper-pagination-bullet {
    background: #ffffff;
    opacity: 0.7;
    width: 10px;
    height: 10px;
}

.hero-swiper .swiper-pagination-bullet-active {
    background: #ff0000;
    opacity: 1;
}

/* 1️⃣ إعطاء أزرار العداد وقت نعومة للحركة */
.quantity-controls button {
    transition: transform 0.1s ease-in-out !important;
}

/* 2️⃣ تأثير النبض أو الانكماش البسيط لحظة الضغط الفعلي بالإصبع */
.quantity-controls button:active {
    transform: scale(0.85) !important;
}