.footer-is-light .store-footer .store-footer__inner {
    position: relative;
}

.footer-is-light .store-footer .store-footer__inner::after {
    content: "";
    position: absolute;
    bottom: 0;                /* تثبيت أسفل الفوتر */
    left: 0;                  /* زاوية يسار */
    width: 150px;              /* عرض الصورة */
    height: 80%;             /* ارتفاع يتناسب مع الصورة */
    aspect-ratio: 1 / 1;      /* للحفاظ على نسبة مربعة إذا الصورة مربعة */
    
    background-image: url('https://cdn.salla.sa/onKaQB/trg3PfcxVyhZuF3XOObykwuQs5mbrPdMZZe7kjX0.png');
    background-size: contain;   /* اجعل الصورة كاملة ضمن البعد المحدد */
    background-repeat: no-repeat;
    background-position: bottom left; /* في زاوية الصورة نفسها */
    
    z-index: 10;              /* فوق المحتوى لكن أسفل أي عناصر أخرى أعلى */
    
    background-color: transparent; /* إزالة أي خلفية */
}



body {
    position: relative;
    background-image: url("https://cdn.salla.sa/onKaQB/c8skK45hEAquM4CjX8EVJZeZX6jRF3iWpOEdBpRn.png");
    background-repeat: repeat;
    background-position: top left;
    background-size: auto;
}
   .s-product-card-content .h3{
       color: rgb(59,149,143);}
/* طبقة الشفافية */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
 background-color: rgba(255,255,255,0.7); /* عدّل الشفافية هنا */
    pointer-events: none; /* لا تؤثر على التفاعل */
    z-index: -1;
}
.s-block--features__item{
    border: 2px solid #f97316;   /* برتقالي */
    border-radius: 14px;         /* زوايا ناعمة */
    padding: 8px;                /* مسافة بين الإطار والأيقونة */
    box-sizing: border-box;
}
.s-block--features__item .feature-icon {
    
    align-items: center;
    background-color: #414042;
    background-color: #ffffff;
    border-radius: 9999px;
    display: flex;
    height: 4rem;
    justify-content: center;
    margin-bottom: .75rem;
    overflow: hidden;
    width: 4rem;
}
.s-block--features__item {
    background-color: rgba(255,255,255,0.98); /* برتقالي */
    border-radius: 16px;
    padding: 24px;
    text-align: center;
   
}

/* الأيقونة */
.s-block--features__item .feature-icon i {
    font-size: 38px;
    color: #ffac00; /* ذهبي */
    margin-bottom: 12px;
}

/* العنوان */
.s-block--features__item h2 {
    color: #ec8e00; /* ذهبي */
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 6px;
}

/* الوصف */
.s-block--features__item p {
    color: #d97100; /* ذهبي فاتح */
    font-size: 0.9rem;
    line-height: 1.6;
}
.top-navbar{
    background-color: rgb(240, 79, 37);
    color: rgb(250, 208, 53);
}
    .footer-is-light .store-footer .store-footer__inner {
   
    
    color: rgb(255,219,43);
  
    background-color: rgb(226 95 50);
}
.footer-is-light .store-footer .store-footer__inner {
    position: relative; /* مهم لتمكين وضع الصورة داخلها */
}




.s-button-btn ..store-footer__inner {
    background-color: #ff7f00 ;
    color: #ffffff ;     
}
.s-product-card-content-title a{color: #ff7f00; }
.s-product-card-entry {
   border: 2px solid #00e8fd !important; /* إطار برتقالي */
    border-radius: 6px;                   /* زاوية مستديرة بسيطة، اختياري */
}
.mobile-menu{color: #ff7f00;}S/* تأكد أن محتوى الموقع فوق الطبقة */
body > * {
    position: relative;
    z-index: 1;
}

/* تغيير خلفية الموقع بالكامل */
 body {
    background-color: #fff2e9 !important;
}
/* الحاوية الأساسية للفوتر - "محبس" للنص */
.store-footer__inner {
    position: relative;
    z-index: 50;
    overflow: visible; /* السماح للنص بالخروج للعرض */
}

/* إنشاء منطقة عرض محددة أسفل بداية الفوتر */
.store-footer__inner::after {
    content: "";
    position: absolute;
    top: 0; /* فوق محتوى الفوتر مباشرة */
    left: 0;
    width: 100%;
    height: 40px; /* ارتفاع الشريط */
       background-color: rgb(226 95 50);
    z-index: 45;
    overflow: hidden; 
}

/* النص المتحرك */
.store-footer__inner::before {
   content: "🔥 التوصيل متاح الرياض المدينة المنورة الدمام جدة و مكة، حائل، تبوك، عرعر، سكاكا، رفحاء، دومة الجندل، الجبيل، القطيف، حفر الباطن، الخفجي، رأس تنورة، بقيق، ينبع، العلا، رابغ، القنفذة، الليث، جازان، الباحة، بيشة، محايل عسير، صامطة، أبو عريش، صبيا، النماص، الخرج، المجمعة، الدوادمي، وادي الدواسر، الرس، البكيرية، المزاحمية، الغاط، الأفلاج وباقي  المدن عبر واتساب للطلب 🔔 \00a0\00a0\00a0\00a0 🔥 التوصيل متاح الرياض المدينة المنورة الدمام جدة و مكة، حائل، تبوك، عرعر، سكاكا، رفحاء، دومة الجندل، الجبيل، القطيف، حفر الباطن، الخفجي، رأس تنورة، بقيق، ينبع، العلا، رابغ، القنفذة، الليث، جازان، الباحة، بيشة، محايل عسير، صامطة، أبو عريش، صبيا، النماص، الخرج، المجمعة، الدوادمي، وادي الدواسر، الرس، البكيرية، المزاحمية، الغاط، الأفلاج وباقي المدن عبر واتساب للطلب 🔔";
    position: absolute;
    top: 0; /* فوق محتوى الفوتر مباشرة */
    left: 0;
    width: 100%;
    height: 40px;
    line-height: 40px;
    white-space: nowrap;
    color: #ffffff;
    font-weight: bold;
    z-index: 50;

    display: block;
    overflow: hidden;

    /* الحركة */
    animation: marquee-footer 15s linear infinite;
}

/* حركة النص */
@keyframes marquee-footer {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* الحاوية الأساسية */
#mainnav {
    position: relative;
    z-index: 50;
    overflow: visible;
}

/* خلفية الشريط */
#mainnav::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    min-height: 44px;
    background-color: #ff002c;
    z-index: 45;
}

#mainnav::before {
    content: "🔥 التوصيل متاح الرياض المدينة المنورة الدمام جدة و مكة، حائل، تبوك، عرعر، سكاكا، رفحاء، دومة الجندل، الجبيل، القطيف، حفر الباطن، الخفجي، رأس تنورة، بقيق، ينبع، العلا، رابغ، القنفذة، الليث، جازان، الباحة، بيشة، محايل عسير، صامطة، أبو عريش، صبيا، النماص، الخرج، المجمعة، الدوادمي، وادي الدواسر، الرس، البكيرية، المزاحمية، الغاط، الأفلاج وباقي المدن عبر واتساب للطلب 🔔 \00a0\00a0\00a0\00a0 🔥 التوصيل متاح الرياض المدينة المنورة الدمام جدة و مكة، حائل، تبوك، عرعر، سكاكا، رفحاء، دومة الجندل، الجبيل، القطيف، حفر الباطن، الخفجي، رأس تنورة، بقيق، ينبع، العلا، رابغ، القنفذة، الليث، جازان، الباحة، بيشة، محايل عسير، صامطة، أبو عريش، صبيا، النماص، الخرج، المجمعة، الدوادمي، وادي الدواسر، الرس، البكيرية، المزاحمية، الغاط، الأفلاج وباقي المدن عبر واتساب للطلب 🔔";

    position: absolute;
    top: 100%;
    right: 100%; /* يبدأ خارج الشاشة من اليمين */
    width: max-content;

    min-height: 44px;
    padding: 0 16px;

    display: flex;
    align-items: center;

    white-space: nowrap;
    direction: rtl;
    text-align: right;

    color: #ffffff;
    font-weight: 300;
    font-size: 14px;

    z-index: 50;
    pointer-events: none;

    animation: marquee-rtl-right 25s linear infinite;
}


@keyframes marquee-rtl-right {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(120%);
    }
}

/* تأكيد إضافي لمنع السكرول العرضي في الصفحة كاملة */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}
.s-block--fixed-banner {margin-top: 1.8rem;}
.s-block--fixed-banner .container {padding-left: 0px;
    padding-right: 0px;}
.banner--fixed img{border-radius: 0rem;}
.container.flex.justify-between {
  all: unset;                 /* إلغاء خصائصه القديمة */
  display: flex;
  align-items: center;
  justify-content: center;
 
  cursor: pointer;
  border-radius: 50%;
  position: relative;
}
.top-navbar{
    background-color: rgb(240, 79, 37);
    color: rgb(250, 208, 53);
}
.top-navbar .s-search-input {
   background-color: rgb(255,255,255);
   color: rgb(250, 208, 53);
        width: 100%;
}
/* استهداف الحاوية التي تجمع العناصر الثلاثة */
.inner.bg-inherit .flex.items-stretch.justify-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* جعل الشعار يأخذ وضعية التوسط المطلق بالنسبة للحاوية الأم */
.navbar-brand {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0 auto;
    z-index: 10;
}

/* التأكد من أن القوائم الجانبية لا تتدخل في التوسيط */
.inner.bg-inherit .flex.items-center {
    flex: 1; /* يعطي مساحة متساوية للطرفين لضمان بقاء الشعار في المنتصف الحسابي */
}

.inner.bg-inherit .flex.items-center.justify-end {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.navbar-brand img {
    max-height: 7rem;}

/* 1. استهداف أيقونة المستخدم */
.header-btn__icon.sicon-user-circle {
    display: inline-block;
    width: 32px;  /* حجم الأيقونة */
    height: 32px;
    /* تحويل الـ SVG إلى خلفية بصيغة Data URI لضمان الجودة */
    background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 256 256"><defs><linearGradient id="color-1" x1="9.071" y1="19.185" x2="22.927" y2="33.041" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="%23f04f23"></stop><stop offset="1" stop-color="%23f47350"></stop></linearGradient><linearGradient id="color-2" x1="9.071" y1="19.185" x2="22.927" y2="33.041" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="%23f04f23"></stop><stop offset="1" stop-color="%23ffffff" stop-opacity="0.3"></stop></linearGradient></defs><g transform="scale(8,8)"><path d="M6.406,29h19.17c1.616,0 2.571,-0.734 2.571,-1.965c0,-3.727 -4.664,-8.869 -12.155,-8.869c-7.473,0 -12.137,5.141 -12.137,8.869c-0.001,1.231 0.954,1.965 2.551,1.965z" fill="url(%23color-1)"></path><path d="M16,3c-2.921,0 -5.51,2.554 -5.51,5.948c0,3.411 2.589,6.052 5.51,6.052c2.921,0 5.51,-2.641 5.51,-6.052c0,-3.394 -2.589,-5.948 -5.51,-5.948z" fill="url(%23color-1)"></path></g></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.3s ease;
}

/* 2. حذف الأيقونة القديمة */
.header-btn__icon.sicon-user-circle::before {
    content: none !important;
}

/* 3. تأثير حركي عند مرور الماوس */
.header-btn:hover .header-btn__icon.sicon-user-circle {
    transform: translateY(-3px); /* حركة خفيفة للأعلى */
    filter: drop-shadow(0 4px 6px rgba(240, 79, 35, 0.2)); /* ظل ناعم بنفس لون الهوية */
}

/* 4. تنظيف الزر */
.header-btn {
    background: transparent !important;
    border: none !important;
    outline: none !important;
}/* 1. إزالة الإطار والخلفية من الزر المحيط بالأيقونة */
.header-btn {
    border: none !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important; /* إزالة أي ظل قد يشبه الإطار */
    outline: none !important;
    padding: 0 !important;
    margin: 0 5px !important; /* مسافة بسيطة بين الأيقونات */
}

/* 2. التأكد من أن الأيقونة نفسها ليس لها إطار */
.header-btn__icon.sicon-user-circle {
    border: none !important;
    background-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

/* 3. إزالة أي إطار يظهر عند الضغط (Focus) */
.header-btn:focus, 
.header-btn:active {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* 4. إزالة الإطار من حاوية السلة أيضاً لتوحيد الشكل */
.s-cart-summary-wrapper {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}
/* 1. استهداف أيقونة السلة واستبدالها بالـ SVG الجديد */
.s-cart-summary-icon, 
.header-btn__icon.sicon-shopping-bag {
    display: inline-block;
    width: 30px; /* حجم متناسق مع أيقونة الحساب */
    height: 30px;
    background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" viewBox="0 0 256 256"><g fill="%23f04f25"><g transform="scale(5.33333,5.33333)"><path d="M23,2c-4.61471,0 -8.44031,3.51408 -8.94141,8h-2.05859c-2.312,0 -4.23656,1.7332 -4.47656,4.0332l-2.5,24c-0.132,1.265 0.28081,2.53347 1.13281,3.48047c0.852,0.945 2.07175,1.48633 3.34375,1.48633h29c1.272,0 2.49175,-0.54133 3.34375,-1.48633c0.852,-0.946 1.26286,-2.21547 1.13086,-3.48047l-2.49805,-24c-0.24,-2.3 -2.16456,-4.0332 -4.47656,-4.0332h-2.04687c0.031,0.33 0.04688,0.664 0.04688,1v2h2c0.771,0 1.41219,0.5787 1.49219,1.3457l2.5,24c0.044,0.422 -0.09395,0.8442 -0.37695,1.1582c-0.284,0.315 -0.69123,0.49609 -1.11523,0.49609h-29c-0.424,0 -0.83028,-0.18014 -1.11328,-0.49414c-0.284,-0.315 -0.42291,-0.73816 -0.37891,-1.16016l2.5,-24c0.08,-0.767 0.72119,-1.3457 1.49219,-1.3457h2v3.5c-0.00765,0.54095 0.27656,1.04412 0.74381,1.31683c0.46725,0.27271 1.04514,0.27271 1.51238,0c0.46725,-0.27271 0.75146,-0.77588 0.74381,-1.31683v-5.5c0,-3.33128 2.66872,-6 6,-6c2.98976,0 5.43994,2.15108 5.91211,5h-9.7793c-0.084,0.32 -0.13281,0.654 -0.13281,1v2h10v3.5c-0.00765,0.54095 0.27656,1.04412 0.74381,1.31683c0.46725,0.27271 1.04514,0.27271 1.51238,0c0.46725,-0.27271 0.75146,-0.77588 0.74381,-1.31683v-5.5c0,-4.95272 -4.04728,-9 -9,-9z"></path></g></g></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* 2. إخفاء أيقونة سلة سلة الافتراضية والـ SVG القديم */
.sicon-shopping-bag::before, 
#s-cart-icon svg {
    display: none !important;
}

/* 3. تعديل موقع دائرة عدد المنتجات لتكون فوق الشنطة مباشرة */
.s-cart-summary-count {
    top: -2px !important;
    right: -8px !important;
    background-color: #f04f25 !important;
    color: #fff !important;
    font-size: 11px !important;
    min-width: 18px;
    height: 18px;
    border: 2px solid #fff;
}

/* 4. إزالة أي إطارات أو خلفيات حول السلة */
.s-cart-summary-wrapper {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    display: flex;
    align-items: center;
    text-decoration: none !important;
}

/* 5. إخفاء نص "0 ر.س" لجعل الهيدر أنيقاً وبسيطاً */
.s-cart-summary-content {
    display: none !important;
}
/* إزالة الإطار والخلفية من حاوية السلة */
.s-cart-summary-wrapper, 
#s-cart-icon,
.salla-cart-summary {
    border: none !important;
    outline: none !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

/* إزالة الإطار من زر الحساب */
.header-btn {
    border: none !important;
    outline: none !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* إزالة التأثير الجمالي (الإطار) الذي يظهر عند تمرير الماوس */
.header-btn:hover, 
.s-cart-summary-wrapper:hover {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* التأكد من إخفاء أي حدود داخلية للـ SVG */
.header-btn__icon, 
.s-cart-summary-icon {
    border: none !important;
    outline: none !important;
}/* تنسيق الحاوية الرئيسية للقسم */
.slide--cat-entry {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none !important;
    border: none !important; /* إزالة أي إطار خارجي */
    background: transparent !important;
}

/* تنسيق الصورة (تكبيرها وجعل الزوايا منحنية) */
.slide--cat-entry img {
    width: 120px !important;  /* تكبير العرض */
    height: 120px !important; /* تكبير الطول */
    object-fit: cover;       /* لضمان عدم تمدد الصورة بشكل خاطئ */
    border-radius: 15px !important; /* حواف منحنية قليلاً بدلاً من الدائرة */
    border: none !important;  /* إزالة الإطار من الصورة */
    box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* ظل ناعم جداً يعطي فخامة */
    margin-bottom: 12px !important;
    transition: transform 0.3s ease;
}

/* تنسيق عنوان القسم (النص) */
.slide--cat-entry h2 {
    font-size: 16px !important;
    font-weight: bold !important;
    color: #333 !important;
    margin: 0 !important;
    line-height: 1.4;
}

/* تأثير عند مرور الماوس على القسم */
.slide--cat-entry:hover img {
    transform: translateY(-5px); /* حركة خفيفة للأعلى */
    box-shadow: 0 8px 20px rgba(240, 79, 37, 0.15); /* يتغير الظل للون هويتك */
}

/* إخفاء أي حدود إضافية من Swiper */
.swiper-slide {
    border: none !important;
    background: transparent !important;
}.swiper-wrapper{justify-content: center}

.s-slider-block__title ,.s-block__title{justify-content: center}
/* استهداف العنوان الجانبي المحدد بدقة */
/* استهداف العناوين وإضافة خصائص التمركز */
.s-slider-controls-outer .s-slider-block__title-right h2,
.right-side h2,
.s-products-slider-slider h2 {
    font-size: 34px !important;
    font-weight: 800 !important;
    position: relative; /* ضروري لتموضع الخط تحت النص */
    display: inline-block; /* يجعل الحاوية بحجم النص فقط ليصبح الخط بنفس العرض */
    padding-bottom: 8px; /* مسافة بين النص والخط */
    
    /* الألوان المتحركة للنص */
    background: linear-gradient(to right, #f04f23, #cf4528, #f04f23);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-shine 4s linear infinite;
}

/* إضافة الخط السفلي المتحرك */
.s-slider-controls-outer .s-slider-block__title-right h2::after,
.right-side h2::after,
.s-products-slider-slider h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%; /* العرض هنا سيكون 100% من حجم الـ h2 (أي عرض النص) */
    height: 4px; /* سمك الخط */
    border-radius: 2px;
    
    /* جعل الخط بنفس ألوان وحركة النص */
    background: linear-gradient(to right, #f04f23, #cf4528, #f04f23);
    background-size: 200% auto;
    animation: gradient-shine 4s linear infinite;
}




/* توحيد حركة الأنيميشن للنص والخط */
@keyframes gradient-shine {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

/* تنسيق الجوال */
@media (max-width: 768px) {
    .s-slider-controls-outer .s-slider-block__title-right h2,
    .right-side h2,
    .s-products-slider-slider h2 {
        font-size: 20px !important;
    }
    .s-slider-controls-outer .s-slider-block__title-right h2::after,
    .right-side h2::after,
    .s-products-slider-slider h2::after {
        height: 3px; /* تقليل سمك الخط في الجوال */
    }