/* Add custom CSS styles below */ 


.banner--fixed img {
    height: 450px;
    width:1400px;
   /* يحافظ على الصورة كاملة بدون قص */
}

.s-product-card-image {
    background-color: white !important;
        border: 2px solid #ddd;
    border-radius: 10px; 
    padding: 10px; 
 
}

.s-slider-container .swiper-slide img {
    width: 400px;  /* تقليل العرض */
    height: 200px; /* تقليل الارتفاع */
    max-width: 100%; /* لمنع تجاوز الحاوية */
    object-fit: cover; /* للحفاظ على جودة الصورة دون تمدد */
    display: block;
    margin: 0 auto; /* لتوسيط الصور داخل السلايدر */
}

/*..............صور المشاريع..............*/

/* إعادة ضبط الهوامش الافتراضية لجميع العناصر داخل content-entry */
.content-entry * {
    margin: 0;
    padding: 0;
}

/* إعدادات خاصة للفقرات والعناوين */
.content-entry p, .content-entry h1, .content-entry h2, .content-entry h3 {
    margin-bottom: 10px; /* مسافة موحدة بين النصوص */
}

/* ضبط آخر عنصر نصي لتقليل المسافة قبل الصور */
.content-entry p:last-of-type, 
.content-entry h3:last-of-type {
    margin-bottom: 5px; /* تقليل المسافة قبل الحاويات */
}

/* الحاويات */
.image-container, .video-container {
    margin-top: 5px; /* مسافة صغيرة جدًا فوق الحاويات */
    margin-bottom: 10px; /* مسافة معقولة تحت الحاويات */
}

/* ترتيب الصور */
.image-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 5px;
}

.image-container img {
    width: 25%;
    border-radius: 10px;
    transition: transform 0.3s ease-in-out;
}

.image-container img:hover {
    transform: scale(1.05);
}

/* ترتيب الفيديوهات */
.video-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    padding: 5px;
}

.video-container iframe {
    width: 48%;
    height: 250px;
    border-radius: 10px;
}

/*------ اضافة نص على الصورة----*/

.banner {
    position: relative; /* جعل الـ <a> حاوية للنص */
    display: inline-block; /* لضمان التكيف مع حجم الصورة */
    width: 100%; /* للتأكد من أن البنر يأخذ العرض الكامل */
}

.banner img {
    display: block;
    width: 100%;
    height: auto;
}

.banner::after {
    content: "أثاث مكتبي لمساحات تنبض بالفخامة"; /* النص المطلوب */
    position: absolute;
    bottom: 10px; /* الموقع الافتراضي للنص من الأسفل */
    left: 10px; /* محاذاة النص إلى اليسار */
    color: #fff;
    font-size: 2rem; /* حجم الخط الافتراضي للشاشات الكبيرة */
    font-weight: bold;
    font-family: Arial, sans-serif;
    text-align: left;
    /* إزالة الخلفية الافتراضية */
    background: none; 
    padding: 10px 15px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); /* ظل للنص ليبقى واضحًا */
    transition: none; /* إزالة التأثير الانتقالي لأنه مرتبط بالخلفية */
}

.banner:hover::after {
    /* إزالة تغيير الخلفية عند التحويم لأن الخلفية مخفية */
    background: none;
}

/* تعديلات لشاشات الموبايل (أقل من 768px) */
@media (max-width: 768px) {
    .banner::after {
        font-size: 1.2rem; /* تقليل حجم الخط للموبايل */
        padding: 8px 12px; /* تقليل الحشوة */
        bottom: 20px; /* رفع النص لأعلى في وضع الموبايل */
        left: 5px; /* تقليل المسافة من اليسار */
    }
}

/* تعديلات إضافية للشاشات الصغيرة جدًا (أقل من 480px) */
@media (max-width: 480px) {
    .banner::after {
        font-size: 1rem; /* تقليل حجم الخط أكثر */
        padding: 6px 10px; /* تقليل الحشوة أكثر */
        bottom: 0px; /* رفع النص أكثر قليلاً */
        left: 3px; /* تقليل المسافة من اليسار */
    }
}

/*..تصغير جملة الخصم لمدة محدودة..*/

@media (max-width: 1024px) { /* الأجهزة اللوحية */
    .promotion-title {
        font-size: 16px;
    }
}

@media (max-width: 768px) { /* الهواتف العادية */
    .promotion-title {
        font-size: 14px;
    }
}

@media (max-width: 480px) { /* الهواتف الصغيرة */
    .promotion-title {
        font-size: 12px;
    }
}

@media (max-width: 320px) { /* الشاشات الصغيرة جدًا */
    .promotion-title {
        font-size: 10px;
    }
}
/*.. في صفحة المنتجاتتصغير جملة الخصم لمدة محدودة..*/

@media (max-width: 1024px) { /* الأجهزة اللوحية */
    .s-product-card-promotion-title {
        font-size: 16px;
    }
}

@media (max-width: 768px) { /* الهواتف العادية */
    .s-product-card-promotion-title {
        font-size: 14px;
    }
}

@media (max-width: 480px) { /* الهواتف الصغيرة */
    .s-product-card-promotion-title {
        font-size: 12px;
    }
}

@media (max-width: 320px) { /* الشاشات الصغيرة جدًا */
    .s-product-card-promotion-title {
        font-size: 10px;
    }
}
.s-product-card-promotion-title {
    margin-top: -10px; /* رفع النص للأعلى */
}
.promotion-title {
   margin-top: -10px;
}

/*العنوان اسفل الصورة*/
.banner-entry {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    height: auto; /* زيادة ارتفاع الـ div */
    justify-content: flex-start; /* يضمن بقاء الصورة في الأعلى والنص أسفلها */
     background-color: inhiret
   
}
.banner-entry .lazy__bg {
    width: 100%;
    height: 200px; /* لا تغيير في ارتفاع الصورة */
    background-size: cover;
    background-position: center;
}

.banner-entry h3 {
    display: block !important; /* إجبار النص على الظهور دائمًا */
    opacity: 1 !important; /* ضمان عدم اختفائه */
    visibility: visible !important; /* إجبار العنصر على البقاء مرئيًا */
    position: static !important; /* منع أي تأثير للـ hover */
    margin-top: 170px; /* إضافة مسافة بين الصورة والنص */
     margin-bottom: 15px; 
    font-size: 1rem;
    color: #333; /* تغيير اللون حسب التصميم */
   
}
.banner-entry:hover {
  opacity: 0.9!important; /* ضمان عدم اختفائه */
}


.banner-entry:hover .lazy__bg {
    width: 100%;
    height: 200px; /* لا تغيير في ارتفاع الصورة */
    background-size: cover;
    background-position: center;
   
    
}

.banner-entry:hover h3 {
    transform: none !important; /* منع تحريك النص */

    opacity: 1 !important; /* ضمان عدم اختفائه */
    visibility: visible !important; /* إجبار العنصر على البقاء مرئيًا */
    position: static !important; /* منع أي تأثير للـ hover */
    margin-top: 170px; !important; /* إضافة مسافة بين الصورة والنص */
     margin-bottom: 15px; !important;
    font-size: 1rem;
    color: #333; /* تغيير اللون حسب التصميم */
}

/*صور المنتجات*/

.object-cover {

    object-fit: contain; !important;
    }
    
.s-slider-container .swiper-slide img {
    object-fit: contain;    !important;
    }
    
    /*البانر*/
    
    /* تعديل ارتفاع السلايدر والصورة */
salla-slider .swiper,
salla-slider .swiper-wrapper,
salla-slider .swiper-slide {
    height: 300px !important; /* ارتفاع البانر */
}

salla-slider .swiper-slide img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important; /* تغطية كاملة للصورة */
    border-radius: 0 !important; /* إزالة الزوايا المستديرة إن وجدت */
    display: block !important;
}
/* تغيير مدة حركة انتقال الشرائح إلى ثانيتين */
salla-slider .swiper-wrapper {
  transition-duration: 1s !important;
  transition-timing-function: ease-in-out !important;
}

/*....صور صفحة المنتج....*/

.swiper-wrapper a img {
    object-fit: contain !important;
    width: 100% !important;
    height: auto !important;
    max-height: 100% !important;
}


/*..... تقريب حقول المنتجات من بعضها....*/
.s-metadata-row {

justify-content: normal !important;
}