/* Add custom CSS styles below */ 
/* تغيير خلفية المحتوى الرئيسي لجميع الصفحات */
body, 
main, 
#app, 
.site-content, 
.main-content,
.content-wrapper {
  background-color: #E4E4E4 !important;
}

/* استثناء الهيدر والفوتر للحفاظ على ألوانهما الأصلية */
header, 
footer, 
.s-header, 
.s-footer,
[class*="header"],
[class*="footer"] {
  background-color: initial;
}

/* تغيير لون مسار التنقل (الرئيسية والكلمات المجاورة) للون الأسود */
.breadcrumbs,
.breadcrumbs a,
.s-breadcrumb-item,
.s-breadcrumb-item a,
.s-breadcrumb-arrow,
salla-breadcrumb,
salla-breadcrumb * {
  color: #000000 !important;
  opacity: 1 !important;
}
/* تغيير لون كلمة "ترتيب حسب" والقائمة المنسدلة للون الأسود */
label[for="product-filter"],
#product-filter,
#product-filter option {
  color: #000000 !important;
  opacity: 1 !important;
}
/* تغيير لون أيقونات العرض والإطار الخاص بها للون الأسود */
.sicon-keypad,
.sicon-list,
.filter-menue i,
[class*="sicon-"] {
  color: #000000 !important;
  border-color: #000000 !important;
}
/* تغيير لون كلمة التصنيفات والقوائم الجانبية للون الأسود */
#filters-menu h2,
#filters-menu,
#filters-menu *,
nav[aria-label="Sidebar"] h2 {
  color: #000000 !important;
  opacity: 1 !important;
}
/* =========================
   منع أي سكرول أفقي
========================= */
html,
body {
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
}

/* =========================
   البنر Full Width
========================= */
.home-banner,
.main-banner,
.slider-banner {
    position: relative !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    margin-bottom: 20px !important;
}

/* شيل أي padding أو max-width من الحاويات الداخلية */
.home-banner .container,
.main-banner .container,
.slider-banner .container,
.home-banner .container-fluid,
.main-banner .container-fluid,
.slider-banner .container-fluid {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* =========================
   صورة البنر
========================= */
.main-banner img,
.slider-banner img,
.banner-entry img,
.home-banner img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 0 !important;
    object-fit: cover !important;
    object-position: top center !important; /* مهم جداً */
}

/* لو في عنصر ماسك ارتفاع ثابت للسلايدر */
.main-banner .swiper,
.slider-banner .swiper,
.home-banner .swiper,
.main-banner .swiper-slide,
.slider-banner .swiper-slide,
.home-banner .swiper-slide {
    width: 100% !important;
    height: auto !important;
}

/* =========================
   سطح المكتب
========================= */
@media (min-width: 769px) {
    .main-banner img,
    .slider-banner img,
    .banner-entry img,
    .home-banner img {
        aspect-ratio: 2.7 / 1 !important;
        object-fit: cover !important;
        object-position: top center !important;
    }
}

/* =========================
   التابلت
========================= */
@media (max-width: 768px) {
    .main-banner img,
    .slider-banner img,
    .banner-entry img,
    .home-banner img {
        aspect-ratio: 16 / 9 !important;
        object-fit: cover !important;
        object-position: top center !important;
    }
}

/* =========================
   الموبايل الصغير
========================= */
@media (max-width: 480px) {
    .main-banner img,
    .slider-banner img,
    .banner-entry img,
    .home-banner img {
        aspect-ratio: 4 / 3 !important;
        object-fit: cover !important;
        object-position: top center !important;
    }
}

/* =========================
   صور المنتجات
========================= */
.product-details img,
.product-single img,
.product-images img,
.product-gallery img {
    width: 100% !important;
    height: auto !important;
    max-height: 500px !important;
    object-fit: contain !important;
    object-position: center !important;
}
/* تغيير لون جميع النصوص والروابط والأيقونات في الهيدر لجميع الصفحات */
header a,
header button,
header span,
header div,
header p,
header i,
.site-header a,
.site-header button,
.site-header span,
.main-header a,
.main-header button,
.main-header span,
.header-wrapper a,
.header-wrapper button,
[class*="header"] a,
[class*="header"] button,
[class*="header"] span {
    color: #ffffff !important;
}

/* تغيير لون الأيقونات والرموز SVG لجميع أشكال الهيدر */
header svg,
header svg path,
.site-header svg,
.site-header svg path,
.main-header svg,
.main-header svg path,
.header-wrapper svg,
.header-wrapper svg path,
[class*="header"] svg,
[class*="header"] svg path {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

/* ضمان بقاء اللون أبيض عند التمرير لأسفل (Sticky Header) */
.is-sticky a,
.is-sticky span,
.is-sticky button,
.is-sticky svg,
.is-sticky svg path,
.header-sticky a,
.header-sticky span,
.header-sticky svg,
.header-sticky svg path {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
}
h1.text-xl.md\:text-2xl.leading-normal.font-bold {
    color: #000 !important;
}
h1.text-xl.md\:text-2xl.leading-normal.font-bold,
.text-primary,
.product-price,
.price {
    color: #000 !important;
}
.main-content .text-grey {
    color: #000 !important;
}
/* كل نصوص وصف المنتج بالأسود */
.product-description,
.product-description * {
    color: #000000 !important;
}
.product-description,
.product-description *,
.product-description .text-white,
.product-description .color-white,
.product-description .text-grey,
.product-description .color-grey {
    color: #000000 !important;
}
.main-content .color-grey,
.main-content small.color-grey {
    color: #000000 !important;
}
.total-price {
    color: #000000 !important;
}
.product-form,
.product-form * {
    color: #000000 !important;
}
.similar-products,
.similar-products * {
    color: #000000 !important;
}
.similar-products__title {
    color: #000000 !important;
}
.space-y-16 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 1.5rem !important; /* يمكنك تقليل الرقم حسب رغبتك مثلاً 1rem أو 20px */
}

.space-y-8 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 1rem !important;
}
.s-infinite-scroll-last {
    color: #000000 !important;
}
main#main-content .flex.flex-col.min-h-screen {
    min-height: auto !important;
}
@media (min-width: 992px) {
    salla-products-list[source="latest"] .s-products-list-wrapper.s-products-list-vertical-cards {
        grid-template-columns: repeat(3, 280px) !important;
        justify-content: center !important;
        gap: 15px !important;
    }
}
footer .container.items-center.justify-between {
    flex-wrap: wrap !important;
}

.ghamer-credit {
    width: 100%;
    text-align: center;
    margin-top: 8px;
    padding: 6px 0;
    color: #fff;
    font-size: 13px;
}

.ghamer-credit a {
    color: #4caf50;
    font-weight: 700;
    text-decoration: none;
}

.ghamer-credit a:hover {
    text-decoration: underline;
}
.content-entry,
.content-entry *,
.content-entry p,
.content-entry li,
.content-entry strong {
    color: #000000 !important;
}
/* ضبط حجم شعار السجل التجاري والشارات في الفوتر */
salla-trust-badges img,
.s-trust-badges-image,
.store-footer salla-trust-badges img {
    width: 50px !important;
    max-width: 50px !important;
    height: auto !important;
    object-fit: contain !important;
    display: inline-block !important;
}
/* لتغيير لون القوائم المحددة */
.ql-direction-rtl {
    color: #000000 !important;
}

/* أو لتغيير لون النص داخل عنصر span المحدد */
.ql-direction-rtl span {
    color: #000000 !important;
}