.s-block--features__item {
    background: #8D7058;
}

.s-block--features__item>.feature-icon {
    background: #e7e3d8 !important;
}

.s-block--features__item>.feature-icon i {
    color: #8D7058 !important;
}

.s-block--features__item h2, .s-block--features__item p{
    color: #e7e3d8 !important;
}

input.s-search-input {
    background: #fff !important;
}

.top-navbar {
    background: #8D7058 !important;
}

section.s-block.s-block--fixed-banner.wide-placeholder>.container {
    max-width: 100% !important;
    padding: 0 !important;
}


body#app {
    background: #e7e3d8 !important;
}
.banner--fixed img{
    border-radius: 0 !important;
}


button.undefined.s-button-element.s-button-btn.s-button-wide.s-button-loader-center {
    background-color: #8D7058 !important;
}

.s-button-btn span.s-button-text {
    color: #fff !important;
}

button.undefined.s-button-element.s-button-btn.s-button-outline.s-button-wide.s-button-primary-outline.s-button-loader-center:hover {
    background-color: #8d7058b2 !important;
}

.s-button-outline{
    border: none !important;}


.s-slider-nav-arrow {
    border-color: #8d7058e3 !important;
}

.s-slider-nav-arrow svg{
    fill: #8d7058e3 !important;
}


.slide--cat-entry{
    background-color: #ffffff00 !important;
    border-color: #ffffff00 !important;
}

.slide--cat-entry{
    height: 13rem !important;
}

a.slide--cat-entry img{
    height:9rem !important;
    width: 9rem !important;    
}


.banner--fixed img{
    background-color:#ffffff00 !important;
}


footer.store-footer {
    background: #8D7058 !important;
}

.store-footer__inner {
    background: #8D7058 !important;
    color: #fff !important;
    border-bottom: none !important;
}

.copyright-text p{
    color: #fff !important;
}

footer.store-footer>.justify-between.py-4.container.text-center {
    border-top: 1px solid #fff;
}


/* fullwidth slider */

   salla-slider.photos-slider .swiper:where([dir=rtl],[dir=rtl] *)
 {
        padding-left: 0rem !important;
    }

       salla-slider.photos-slider .swiper-slide {
        padding: 0 !important;
        margin-left: 1rem;
        margin-right: 1rem;
        width: 100%;
        border-radius: 0 !important;
    }

section.s-block.s-block--photos-slider {
    margin-top: 0 !important;
}

div#swiper-wrapper-7b47f7a745b8e326 .swiper-slide {
    padding: 0 !important;
}


.s-block--photos-slider .swiper-slide img {
  border-radius: 0px !important;
}

@media (max-width: 1024px) {
    salla-slider.photos-slider .swiper:where([dir=rtl],[dir=rtl] *)
 {
        padding-right: 0rem !important;
    }
}



@media (min-width: 750px) {
    salla-slider.photos-slider .swiper:where([dir=rtl],[dir=rtl] *)
 {
        padding-right: 0rem !important;
    }

    .s-block--categories .swiper-wrapper {
    display: flex !important;
    justify-content: center !important;
}
}


salla-slider.photos-slider.swiper{
    padding-bottom: 0rem !important;
}

salla-slider.photos-slider .swiper
 {
    padding-bottom: 0rem !important;
}


footer .store-footer__inner * {
        text-align: center;
        justify-content: center;}

@media (min-width:750px){

.store-footer__inner>.lg\:grid-cols-6 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
        }
    
.store-footer__inner {
    @media (min-width: 1024px) {
    .lg\:col-span-2 {
        grid-column: span 1 / span 2 !important;
    }
}
}

 .store-footer a h3{   
     position: relative;
     font-size: 0; /* إخفاء النص */
}

 .store-footer a h3::before {
  content: "";
  display: block;
  width: 100px;      /* عرض اللوجو */
  height: 50px;      /* ارتفاع اللوجو */
  background-image: url('https://cdn.salla.sa/wWrvXj/c6d8a830-5f69-4e3e-b92c-18eb66be78cf-1000x570.13574660633-S9sSI4a9kFCG2hEt3SVwZdlEhtY0M0AQckPfi7Z1.png'); /* مسار صورة اللوجو */
  background-size: cover;
  background-repeat: no-repeat !important;
  background-position: center;
}

.s-slider-block__title-right h2 {
  position: relative;
  display: inline-block;
  color: #000; /* اللون الأساسي للنص */
  font-size: 24px;
  overflow: hidden; /* علشان الوميض يبان جوا النص بس */
}

.s-slider-block__title-right h2::after {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.7) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  animation: shineText 3s infinite;
}

@keyframes shineText {
  0% {
    left: 150%;
  }
  100% {
    left: -150%;
  }
}





/* -----------preloader بداية ---------*/

:root {
    --logo: url(https://cdn.salla.sa/wWrvXj/LJHhJeXjGYxNtRwfoNoKHN8WZN6GM2cAkQQ99EMh.png) ;
    --main-color: #8d6f57;
    --second-color: #45311d;
    --third-color: #FFF;
}

.mm-ocd--open ,.mm-ocd__backdrop {
    z-index: 9999999999999999;
}

.sub-menu {
    z-index: 999999999999999999;
}

.header-search.flex-1 {
    z-index: 0 !important;
}

body {
    background-color: var(--third-color);
    /* background-image: url(https://i.postimg.cc/s2V3wJXD/Artboard-1.png)!important; */
    background-position: center;
    background-repeat: repeat-y;
    background-size: cover;
}



@keyframes scrollBrands {
    0% {
        background-position-x: 0
    }

    50% {
        background-position-x: 35000px
    }

    100% {
        background-position-x: 0
    }
}

@media(max-width: 767px) {
    header.store-header:before {
        background-size:180%;
        height: 39px;
        background-position: center;
        margin-bottom: -2px
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

body {
    background-color: var(--third-color);
}

.banner--fixed img {
    background: unset;
}

section {
    background: unset !important;
}

body:not(.product-index):not(.product-single):after {
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    position: fixed;
    z-index: 999999;
    background: var(--third-color) var(--logo);
    left: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 360px;
    animation-name: fade-in;
    animation-duration: 1.5s;
    transform: scale(0);
    border: none
}

@keyframes fade-in {
    0% {
        opacity: 1;
        transform: scale(1)
    }

    75% {
        opacity: 1;
        transform: scale(1.1)
    }

    85% {
        opacity: .5;
        transform: scale(1.2)
    }

    99% {
        opacity: .1;
        transform: scale(1.1)
    }

    100% {
        opacity: 0;
        transform: scale(.1)
    }
}

/* ------ تحريك الإعلان ---- */



/* ====== Marquee banner for .s-advertisement ====== */

/* حاوية الشريط: اخفاء الزوائد والتأكد من وضعية relative */
.s-advertisement {
  overflow: hidden;
  position: relative;
  --marquee-duration: 18s; /* سرعة الحركة: قلّلي أو زودي حسب الرغبة */
}

/* المحتوى اللي هيتحرك — نخليه inline-block و no-wrap */
.s-advertisement .s-advertisement-content-main {
  display: inline-block;
  white-space: nowrap;
  padding-left: 0%;              /* يضمن البداية من خارج الشاشة على اليمين */
  padding-right: 2.5rem;          /* مساحة لتجنب تغطية زر الإغلاق */
  box-sizing: content-box;
  will-change: transform;
  animation: salla-marquee var(--marquee-duration) linear infinite;
  font-size: 1rem;                /* عدّلي لو حابة تكبري/تصغري */
  line-height: 1.6;
}

/* keyframes: من خارج الشاشة يميناً لمعادّة الخروج يساراً */
@keyframes salla-marquee {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

/* إيقاف الحركة عند المرور بالفأرة (اختياري لكن مفيد على الديسكتوب) */
.s-advertisement:hover .s-advertisement-content-main,
.s-advertisement .s-advertisement-content-main:focus {
  animation-play-state: paused;
}

/* تأكد أن زر الإغلاق يظهر فوق النص ويعمل */
.s-advertisement .s-advertisement-action {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
}

/* تحسين للعرض على الموبايل — نخلي الحركة أسرع بشكل افتراضي */
@media (max-width: 768px) {
  .s-advertisement { --marquee-duration: 12s; }
  .s-advertisement .s-advertisement-content-main { font-size: 0.95rem; padding-right: 3rem; }
}

/* احترام تفضيلات المستخدم لتقليل الحركة */
@media (prefers-reduced-motion: reduce) {
  .s-advertisement .s-advertisement-content-main {
    animation: none;
    padding-left: 1rem;
    transform: none;
  }
}