/* Add custom CSS styles below */ 
/* Add custom CSS styles below */
body.index{background-color:#fff;}
.navbar-brand img {max-height: 5rem;}
body.index header.store-header + section.s-block.s-block--fixed-banner {
  margin-top:0 !important;
}
body.index salla-slider.photos-slider .swiper {
  padding-bottom: 0 !important;
}
[dir=rtl] .carousel-slider .swiper {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
section.s-block.s-block--photos-slider {
  margin-top:0 !important;
}
section.s-block.s-block--photos-slider img {
  border-radius: 0 !important;
}
section.s-block.s-block--photos-slider .swiper-slide {
  margin: 0 !important;
  padding:0 !important; 
  width: 100% !important;
  border-radius: 0 !important;
}

/* Product */
.s-product-card-entry {
  border:1px solid #6D4937 !important;
  box-shadow: 0 0 5px 0px #68686894 !important;
}
.s-products-slider-card {
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}
.s-slider-block__title h2 {
  color: #090909 !important;
}
.s-product-card-image {
  background-color:transparent !important;
}
.s-slider-nav-arrow {
  border-color: #6D4937 !important;
  background-color: #6D4937 !important;
}
.s-slider-nav-arrow svg, .s-slider-nav-arrow:not(:disabled):hover svg {
  fill: #ffffff !important;
}
.product-index-offers .s-products-list-vertical-cards,.product-index .s-products-list-vertical-cards {
 margin:0.2rem; 
}
/* End product */

.s-button-primary-outline {
  background-color: #6D4937 !important;
  color: #fff !important;
}


/**/
.s-block--fixed-banner .container {
  max-width:100% !important;
  padding:0 !important;
  margin: 0 !important;
}
.banner--fixed img {
  border-radius:0 !important;
  background-color: transparent !important;
}

/*** FLEX ***/
section.s-block.s-block--banners.container div.grid {
  display:flex !important;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
}
section.s-block.s-block--banners.container div.grid a.banner-entry {
  width: 20%;
  background-color: transparent !important;
  border-radius: 0 !important;
  height:375px !important;
}
@media(max-width:767px) {
  section.s-block.s-block--banners.container div.grid a.banner-entry {
    width: 31%;
    height: 180px !important;
  }
  .store-footer__inner * {
  justify-content: center;
  text-align: center;
}	
}
.banner-entry > div {
  background-size:contain !important;
  background-repeat: no-repeat;
}

.store-footer .store-footer__inner {
  background-color: #6D4937 !important;
}
.store-footer {
  color: #fff !important;
}


section.s-block--banners .grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
}


body {
    background-color:  #10180B !important;
}

.app-inner {
    background-color: #10180B !important;
}
h2 {
    color: antiquewhite;
}

.store-footer .store-footer__inner {
    background-color: #10180B !important;
}

@keyframes slideLeftRight {
    0%   { transform: translateX(0px); }
    50%  { transform: translateX(15px); }
    100% { transform: translateX(0px); }
}

section.s-block--banners .banner-entry:nth-child(1) { animation: slideLeftRight 2s ease-in-out infinite 0s; }
section.s-block--banners .banner-entry:nth-child(2) { animation: slideLeftRight 2s ease-in-out infinite 0.3s; }
section.s-block--banners .banner-entry:nth-child(3) { animation: slideLeftRight 2s ease-in-out infinite 0.6s; }
section.s-block--banners .banner-entry:nth-child(4) { animation: slideLeftRight 2s ease-in-out infinite 0.9s; }
section.s-block--banners .banner-entry:nth-child(5) { animation: slideLeftRight 2s ease-in-out infinite 1.2s; }
section.s-block--banners .banner-entry:nth-child(6) { animation: slideLeftRight 2s ease-in-out infinite 1.5s; }

section.s-block--banners .banner-entry {
    transition: transform 0.3s ease;
}

section.s-block--banners .banner-entry:hover {
    transform: translateX(10px);
}

.s-block__title h2 {
    position: fixed;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.75rem
28px
;
    line-height: 1.2;
    position: relative;
    left: -547px;
    font-size: 32px;
}


.text-gray-800 {
    --tw-text-opacity: 1;
    color: #1f2937;
    color: rgb(255 255 255);
}



li.s-breadcrumb-item {
    color: white;
}

p.font-bold.text-xl.inline-block {
    color: white;
}

a {
    color: #ffffff;
    text-decoration: inherit;
}

h2 {
    color: antiquewhite;
}

h1#page-main-title {
    color: white;
}


span {
    color: black;
}
span {
    color: #ffffff;
}


.s-block__title h2 {
    position: fixed;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.75rem 28px;
    line-height: 1.2;
    position: relative;
    left: -100px;
    font-size: 32px;
}

span {
    color: #000000;
}

.s-block--banners .s-block__title h2 {
    position: relative !important ;
     left: -70px !important ;
  top: 50px !important;
}
span.unicode {
    color: aliceblue;
}
p.text-gray-400.mb-2\.5.md\:mb-0 {
    visibility: hidden;
}

.product__description.p-2.px-5.sm\:p-1.leading-7.mb-3 {
    color: white;
}

span
 {
    color: white;
}

strong {
    color: white;
}

element.style {
    background-color: transparent;
    color: rgb(255 255 255);
}

.bg-white {
    --tw-bg-opacity: 1;
    background-color: #2b2123;
    background-color: rgb(0 0 0);
}



@media only screen and (max-width: 1024px) {
    .mm-spn.mm-spn--light {
        background: #000000fc;
        color: #000;
    }
}



/* استهداف القائمة الفرعية وتغيير خلفيتها للأسود */
.main-menu .sub-menu {
    background-color: rgb(8, 3, 1) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* تأكد من أن النصوص داخل هذه القائمة باللون الأبيض لتظهر */
.main-menu .sub-menu a {
    color: #ffffff !important;
}


.s-comments-product {
  background-color: rgb(16 24 11);
  }
 
.s-button-light-outline {
    background-color: rgb(0 0 0);
  }


.bg-white {
    --tw-bg-opacity: 1;
    background-color: #2b2123;
    background-color: #a28b5e;
}



/* استهداف صفحة المنتج فقط لتغيير الخلفية ولون النص */
.product-single {
    background-color: #0d1309 !important; /* اللون الجديد للخلفية - تقدر تغيره */
}

/* تلوين كل النصوص داخل وصف المنتج بالأبيض */
.product_description, 
.product_description *, 
.product__description, 
.product__description * {
    color: #ffffff !important;
    background-color: transparent !important; /* عشان لو في خلفية بيضاء منسوخة من الوورد تختفي */
}

/* تلوين السعر والعنوان لضمان الظهور */
.product-single__title, 
.product-single__price-wrapper,
.s-product-sp-price {
    color: #ffffff !important;
}

/* تلوين الأيقونات والنصوص الصغيرة تحت السعر */
.product-single__meta-item,
.product-single__meta-item * {
    color: rgba(255, 255, 255, 0.8) !important;
}


.bg-inherit {
    background-color: #fbfbfb;
}

span {
    color: #020000;
}

.bg-white {
    --tw-bg-opacity: 1;
    background-color: #2b2123;
    background-color: #fffdfd;
}

.s-button-light-outline {
    background-color: rgb(255 249 249);
}

h2 {
    color: #060101;
}



h2 {
    color: #f9f9f9;
}


.total-price, 
h2.total-price {
    color: #6d4937 !important; /* اللون البني الظاهر في الـ Inspect الخاص بك */
}

/* لضمان التطبيق داخل نطاق صفحة المنتج فقط */
.product-details h2 {
    color: #6d4937 !important;
}


/* تغيير لون عنوان الصفحة وعدد المنتجات للأبيض دون التأثير على الهيدر */
#page-main-title, 
#page-main-title span {
    color: #ffffff !important;
}

/* لضمان استهداف نصوص العناوين في صفحات الأقسام فقط */
.product-index h1, 
.product-index h1 span {
    color: #ffffff !important;
}

@media only screen and (max-width: 1024px) {
    .mm-spn.mm-spn--light {
        background: #fffbfbfc;
        color: #cd1111;
    }
}
.main-menu .sub-menu {
    background-color: rgb(249 248 247) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}
.s-social-link a svg {
    fill: rgb(255 255 255);
    height: 0.875rem;
    width: 0.875rem;
}
.s-button-primary-outline {
    background-color: #2d483f !important;
    color: #fff !important;
}


/* 1. إخفاء الزيادات لأول شريط فقط عشان ميعملش سكرول (شريط تمرير) بالعرض في المتجر */
.s-advertisement:first-child .s-advertisement-content {
    overflow: hidden;
}

/* 2. تطبيق الحركة على النص اللي جوه أول شريط فقط */
.s-advertisement:first-child .s-advertisement-content-main {
    white-space: nowrap;
    animation: scrollRight 15s linear infinite;
    display: inline-block; /* ضفنا دي عشان الحركة تشتغل بشكل سليم على عنصر الـ span */
}

/* 3. مسار الحركة من الشمال لليمين */
@keyframes scrollRight {
    0% {
        transform: translateX(-100vw); /* بيبدأ من بره الشاشة ناحية الشمال */
    }
    100% {
        transform: translateX(100vw); /* بيخلص بره الشاشة ناحية اليمين */
    }
}