/* =========================================
   REGAL — الهيدر فوق الفيديو وليس فوق الشريط
   ========================================= */
body.regal-selia-home .header.store-header {
    position: absolute !important;
    top: var(--regal-marquee-height, 15px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

/* =========================================
   شريط الخصم يبقى فوق الهيدر
   ========================================= */
body.regal-selia-home .s-block--header-marquee {
    position: relative !important;
    z-index: 10000 !important;
}

/* =========================================
   كل طبقات الهيدر شفافة
   ========================================= */
body.regal-selia-home .header.store-header #main-nav,
body.regal-selia-home .header.store-header #main-nav .inner,
body.regal-selia-home .header.store-header #main-nav .bg-inherit,
body.regal-selia-home .header.store-header .main-nav__content,
body.regal-selia-home .header.store-header .quicklinks,
body.regal-selia-home .header.store-header .quicklinks__inner {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

body.regal-selia-home .header.store-header .quicklinks {
    background-color: transparent !important;
}

/* =========================================
   الفيديو يبدأ مباشرة تحت شريط الخصم
   ========================================= */
body.regal-selia-home .s-block--main-slider-1 {
    position: relative !important;
    z-index: 1 !important;
    margin-top: 0 !important;
}

/* =========================================
   البحث — أيقونة فقط
   ========================================= */
body.regal-selia-home .header__search {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    margin: 0 !important;
}
body.regal-selia-home .header__search salla-search {
    display: block !important;
    width: 44px !important;
    height: 44px !important;
}

/* =========================================
   Glass عند السكرول (تم إصلاح القوس هنا)
   ========================================= */
body.regal-selia-home .header.store-header.regal-scrolled {
    position: fixed !important;
    top: 0 !important;
    background: rgba(18, 59, 62, 0.58) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,.12) !important;
}

body.regal-selia-home .header.store-header.regal-scrolled #main-nav,
body.regal-selia-home .header.store-header.regal-scrolled #main-nav .inner,
body.regal-selia-home .header.store-header.regal-scrolled #main-nav .bg-inherit,
body.regal-selia-home .header.store-header.regal-scrolled .main-nav__content,
body.regal-selia-home .header.store-header.regal-scrolled .quicklinks,
body.regal-selia-home .header.store-header.regal-scrolled .quicklinks__inner {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}













/* =========================================
   وضع قسمين (أحدث العطور وبكجات هدايا)
   جنباً إلى جنب
   ========================================= */

@media (min-width: 1024px) {

    .app-inner {
        display: flex !important;
        flex-direction: column !important;
    }

    .s-block--features-products.container {
        display: inline-block !important;
        width: 49% !important;
        vertical-align: top !important;
        margin-bottom: 30px !important;
    }

    .app-inner {
        display: block !important;
        unicode-bidi: isolate;
    }
}


/* =========================================
   تنسيق العناوين
   ========================================= */

.s-block__title {
    text-align: center !important;
    margin-bottom: 20px !important;
    font-size: 1.5rem !important;
    position: relative;
    padding-bottom: 10px;
}

.s-block__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 3px;
    background-color: #d4a373;
}


/* =========================================
   الجوال
   ========================================= */

@media (max-width: 1023px) {

    .s-block--features-products.container {
        width: 100% !important;
        display: block !important;
    }
}


/* =========================================
   بطاقات المنتجات بشكل أفقي
   ========================================= */

.has-featured-one-col .grid.grid-cols-2.sm\:grid-cols-3 {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    align-items: flex-start !important;
}

.has-featured-one-col .grid.grid-cols-2.sm\:grid-cols-3 custom-salla-product-card {
    height: 120px !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: row-reverse !important;
    align-items: center !important;
    overflow: visible !important;
    
    /* مهم حتى يتم تحديد مكان الزر بالنسبة للبطاقة */
    position: relative !important;
}


/* =========================================
   زر أضف للسلة
   استخدام ستايل سلة الأصلي
   بدون تغيير اللون أو التصميم
   ========================================= */

/* إظهار الزر */
.has-featured-one-col
.grid.grid-cols-2.sm\:grid-cols-3
.s-product-card-add-button {
    display: flex !important;

    position: absolute !important;

    /* مكان الزر */
    left: 12px !important;
    bottom: 10px !important;

    right: auto !important;
    top: auto !important;

    transform: none !important;

    z-index: 5 !important;
}


/* =========================================
   منع تغيير شكل زر سلة الأصلي
   ========================================= */

.has-featured-one-col
.grid.grid-cols-2.sm\:grid-cols-3
.s-product-card-add-button button {
    width: auto !important;
    height: auto !important;
}


/* =========================================
   مساحة للنصوص حتى لا تتداخل مع الزر
   ========================================= */

.has-featured-one-col
.grid.grid-cols-2.sm\:grid-cols-3
.content-wrap {
    padding-bottom: 45px !important;
}


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

.has-featured-one-col
.grid.grid-cols-2.sm\:grid-cols-3
.product-entry__image-wrap {
    width: 100px !important;
    height: 100px !important;
    border-radius: 8px !important;
}


/* =========================================
   الجوال
   ========================================= */

@media (max-width: 768px) {

    .has-featured-one-col
    .grid.grid-cols-2.sm\:grid-cols-3
    custom-salla-product-card {
        height: 115px !important;
    }


    /* زر أضف للسلة في الجوال */
    .has-featured-one-col
    .grid.grid-cols-2.sm\:grid-cols-3
    .s-product-card-add-button {
        display: flex !important;

        left: 10px !important;
        bottom: 8px !important;

        right: auto !important;
        top: auto !important;

        transform: none !important;
    }


    /* مساحة مناسبة للجوال */
    .has-featured-one-col
    .grid.grid-cols-2.sm\:grid-cols-3
    .content-wrap {
        padding-bottom: 42px !important;
    }
}




/* استهداف القسم الحالي رقم 11 */
#products-slider-11-slider .content-area {
    display: none !important;
}

#products-slider-11-slider .simpleParallax {
    display: none !important;
}

#products-slider-11-slider .custom-video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}












/* التأكد من أن الصورة تغطي كامل المساحة وتمنع ظهور الفراغات */
.bg-area.simpleParallax {
    min-height: 120% !important; /* زيادة الارتفاع لتعويض حركة البارالاكس */
    top: -10% !important;        /* موازنة الصورة في المنتصف */
    background-size: cover !important; /* التأكد من أن الصورة تغطي المساحة */
    background-position: center !important;
}

/* في حال كانت الصورة داخل div آخر */
.absolute.w-screen.lg\:w-\[50vw\].h-full.overflow-hidden {
    background-color: transparent !important; /* إزالة أي لون خلفية قد يظهر */
}













#products-slider-8-slider .custom-slider-video {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    
    /* التعديل هنا: جعل الارتفاع يتبع العنصر ولا يتمدد بشكل طولي */
    height: 100% !important; 
    max-height: 460px !important; /* هذا الارتفاع التقريبي للعنصر الذي قبله */
    
    /* أهم سطر لمنع النحافة: يجعل الفيديو يملأ المساحة مع القص بدلاً من التمدد */
    object-fit: cover !important; 
    
    object-position: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}


#products-slider-8-slider .bg-area {
    height: 460px !important; /* نفس طول العنصر المجاور */
    overflow: hidden !important;
    position: relative !important;
}



@media (max-width: 1023px) {
  .bg-area.lazy.absolute {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background-position: center !important;
  }
}


















/* إزالة الظل من جميع أنواع بطاقات المنتجات */
.product-entry, 
salla-product-card, 
.s-products-list-vertical-cards > *,
.s-product-card-entry {
    box-shadow: none !important;
    filter: none !important;
    -webkit-box-shadow: none !important;
}

/* إزالة الظل الذي يظهر عند تمرير الماوس (Hover) */
.product-entry:hover, 
salla-product-card:hover,
.s-product-card-entry:hover {
    box-shadow: none !important;
    filter: none !important;
}

/* تصفير المتغيرات الخاصة بمتجر سلة التي قد تتحكم في الظل */
:root {
    --s-product-card-shadow-normal: none !important;
    --s-product-card-shadow-hover: none !important;
}









/* حل مشكلة اختفاء الفيديو أو انزياحه في الجوال */

@media (max-width: 1023px) {
    /* 1. الحاوية الرئيسية: نلغي أي تأثيرات قديمة ونضمن العرض الكامل */
    #products-slider-8-slider .content-area-wrap {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        position: relative !important;
        overflow: visible !important;
    }

    /* 2. حاوية الفيديو: نجعلها تأخذ المساحة المتاحة بالكامل دون إزاحات */
    #products-slider-8-slider .absolute.w-screen {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 !important;
        transform: none !important; /* إلغاء أي انزياح */
    }

    #products-slider-8-slider .bg-area {
        width: 100% !important;
        height: auto !important;
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        background-image: none !important;
    }

    /* 3. الفيديو نفسه: نضمن ظهوره بكامل العرض وبشكل طبيعي */
    #products-slider-8-slider .custom-slider-video {
        width: 100% !important;
        height: auto !important;
        display: block !important;
        position: relative !important;
        left: 0 !important;
        object-fit: contain !important; /* يعرض الفيديو كاملاً بدون قص */
        pointer-events: none !important;
    }
}

/* إخفاء زر عرض الكل */
#products-slider-8-slider .content-area .more-link {
    display: none !important;
}

/* الشاشة الكبيرة تبقى كما هي لأنها كانت "ولا غلطة" */
@media (min-width: 1024px) {
    #products-slider-8-slider .content-area-wrap { overflow: hidden !important; }
    #products-slider-8-slider .bg-area { background-image: none !important; transform: none !important; }
    #products-slider-8-slider .custom-slider-video {
        width: 100% !important; height: 100% !important;
        object-fit: cover !important; position: absolute !important;
        top: 0 !important; left: 0 !important; transform: none !important;
    }
}




@media (max-width: 1023px) {

    #products-slider-8-slider .content-area-wrap,
    #products-slider-8-slider .absolute.w-screen,
    #products-slider-8-slider .bg-area {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: 9 / 16 !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        overflow: hidden !important;
    }

    #products-slider-8-slider .custom-slider-video {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        min-width: 100% !important;
        min-height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        position: absolute !important;
        inset: 0 !important;
        margin: 0 !important;
    }
}





































@media (min-width: 1024px) {
  section.s-block.s-block--features-products.container {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 1200px; /* يمكنك تعديل العرض حسب رغبتك */
    float: none !important;
  }
}



















/* القسم بالكامل — بدون خلفية */
.s-block-trust-testimonials {
    background: transparent !important;
}

/* بطاقة العميل */
.s-block-trust-testimonials__slide--inner {
    background: #ffffff !important;
    border: 1px solid rgba(50, 152, 160, 0.22) !important;
    border-radius: 5px !important;
    box-shadow: none !important;
}

/* إخفاء صورة العميل */
.s-block-trust-testimonials__image,
.s-block-trust-testimonials__image-wrapper {
    display: none !important;
}























/* تحويل الحاوية إلى شبكة (Grid) بدلاً من Flex العادي */
.grid.grid-cols-2.sm\:grid-cols-3 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* عرض منتجين في كل صف على الجوال */
    gap: 12px !important; /* مسافة بين البطاقات */
    width: 100% !important;
    padding: 10px; /* مساحة جانبية لعدم التصاق البطاقات بالحواف */
}

/* تحسين شكل بطاقة المنتج نفسها */
custom-salla-product-card {
    display: flex !important;
    flex-direction: column !important; /* جعل الصورة فوق والنص تحت */
    width: 100% !important;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* ظل خفيف للجمال */
}

/* تعديل عرض الشاشات الأكبر (أجهزة التابلت والكمبيوتر) */
@media (min-width: 640px) {
    .grid.grid-cols-2.sm\:grid-cols-3 {
        grid-template-columns: repeat(3, 1fr) !important; /* 3 منتجات في الصف */
    }
}