/* === زر الوضع الليلي (يظهر أعلى اليسار) === */
.salla-dark-toggle {
    position: fixed;
    top: 67px;
    left: 147px;
    width: 48px;
    height: 42px;
    background: #da272700;
    border-radius: 50%;
    border: 1px solid #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    cursor: pointer;
    z-index: 9999;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .15);
    transition: .25s;
}

.salla-dark-toggle:hover {
    transform: scale(1.05);
}

/* الشمس والقمر */
.salla-dark-toggle .sun {
    display: none;
}

.salla-dark-toggle.dark .sun {
    display: block;
}

.salla-dark-toggle.dark .moon {
    display: none;
}

/* === الوضع الليلي على مستوى الموقع === */

html.dark-mode body {
    background: #333333 !important;
    color: #f1f1f1 !important;
}

/* الهيدر */
html.dark-mode header,
html.dark-mode .header {
    background: #1a1a1a !important;
}

/* الفوتر */
html.dark-mode footer,
html.dark-mode .footer {
    background: #000 !important;
    color: #fff !important;
}

/* بطاقات المنتجات */
html.dark-mode .product-card,
html.dark-mode .card,
html.dark-mode .box {
    background: #1d1d1d !important;
    color: #fff !important;
    border-color: #333 !important;
}

/* النصوص */
html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode p,
html.dark-mode span {
    color: #fff !important;
}

/* الروابط */
tml.dark-mode a {
    color: #333333 !important;
}

/* الأزرار */
html.dark-mode button,
html.dark-mode .btn {
    background: #2563eb !important;
    color: #fff !important;
}




.salla-dark-toggle {
    position: absolute !important; /* التثبيت داخل الهيدر فقط */
     z-index: 10;                   /* فوق الأيقونات */
}


html.dark-mode button, html.dark-mode .btn {
    background: #1d1f1f !important;
    color: #fff !important;
}

footer .footer-wrapper, footer .copyright, .border-primary, footer, .main-nav-container.fixed-header .inner, .shadow-default {
    background: linear-gradient(to right, #333333 ) !important;
}





html.dark-mode button, html.dark-mode .btn {
    background: #1d1f1f00 !important;
    color
Sets the color of an element's text

Widely available across major browsers (Baseline since January 2018)
Learn more

Don't show
: #fff !important;
}


html.dark-mode h1, html.dark-mode h2, html.dark-mode h3, html.dark-mode p, html.dark-mode span {
    color: #fdb52f  !important;
}


.header-btn__icon {
    align-items: center;
    border-radius: 9999px;
    border-width: 1px;
    display: flex;
    height: 2.5rem;
    justify-content: center;
    width: 2.5rem;
    --tw-border-opacity: 1;
    border-color: #e5e7eb;
    border-color: rgba(229, 231, 235, var(--tw-border-opacity, 1));
    font-size: 1.25rem;
    line-height: 1.75rem;
    --tw-text-opacity: 1;
    color: #374151;
    color: rgb(255 255 255);
}




.s-product-card-price, .s-product-card-starting-price h4 {
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.25rem;
    color: #000000;
}


.s-cart-summary-total {
    font-weight: 600;
    --tw-text-opacity
1
: 1;
    color: #000;
    color: rgb(253 181 47);
}





[class^=sicon-], [class*=" sicon-"] {
    font-family: "sallaicons" !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #fdb52f;
}

.mm-spn ul {
    -webkit-overflow-scrolling: touch;
    background: #262626;
    bottom: 0;
    cursor: default;
    left: 100%;
    line-height: 24px;
    line-height: var(--mm-spn-line-height);
    overflow: visible;
    overflow-y: auto;
    padding-right: 30%;
    padding-right
Shorthand property to set values for the thickness of the padding area. If left is omitted, it is the same as right. If bottom is omitted it is the same as top, if right is omitted it is the same as top. The value may not be negative.

Widely available across major browsers (Baseline since January 2018)
Learn more

Don't show
: var(--mm-spn-panel-offset);
    position: fixed;
    top: 0;
    transition: left .3s ease 0s;
    width: 130%;
    width: calc(100% + var(--mm-spn-panel-offset));
    z-index: 2;
}
















.s-product-card-entry {
    position: relative;
    display: flex;
    height: 99%;
    justify-content: space-between;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255);
    transition-property: box-shadow;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    box-shadow: 0px 0px 5px 3px #333330, 0px 0px 8px 0px #00000000;
    padding: 6px;
    border-radius: 0px 32px;
    top: 10px;
    text-align: center;
}


.s-product-card-fit-height.s-product-card-vertical .s-product-card-image {
    background-color: #ffffff;
    flex: none;
    border-radius: 0px 16px;
}

.s-product-card-vertical .s-product-card-wishlist-btn button {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(0 0 0) !important;
}








.s-reviews-testimonial {
    position: relative;
    display: flex;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    padding: 11px;
    border-radius: 0px 60px;
    top: 13px;
    text-align: center;
    height: 150px;
    background-color: #333330;
    color: #d58e09;
    box-shadow: 0px 0px 5px 3px #f39f00, 0px 0px 8px 0px #00000000;
}





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
















salla-slider[type]:not(.hydrated) > div, salla-slider[type]:not(.hydrated) .swiper > div > div, .carousel-slider .swiper {
    margin-left: -0.625rem;
    margin-right: -0.625rem;
    display: flex
;
    padding-left: 5px;
    padding-right: 11px;
    padding-top: 10px;
    padding-bottom: 10px;
}


.s-product-card-content {
    position: relative;
    display: flex
;
    flex-direction: inherit;
    padding: 0.75rem;
}


.s-button-element:not(:disabled):not([loading]) {
    pointer-events: auto;
    border-radius: 8px 54px;
    background: #333330;
    color: #ffffff;
   box-shadow: 0px 0px 8px 0px #f39f00, 0 0px 2px 0 #f39f00;
}




salla-slider[type]:not(.hydrated) > div, salla-slider[type]:not(.hydrated) .swiper > div > div, .carousel-slider .swiper {
    margin-left: -0.625rem;
    margin-right: -0.625rem;
    display: flex
;
    padding-left: 5px;
    padding-right: 11px;
    padding-top: 10px;
    padding-bottom: 10px;
}


.s-product-card-content {
    position: relative;
    display: flex
;
    flex-direction: inherit;
    padding: 0.75rem;
}



.s-button-element:not(:disabled):not([loading]) {
    pointer-events: auto;
    border-radius: 8px 54px;
    background: #333330;
    color: #ffffff;
   box-shadow: 0px 0px 8px 0px #f39f00, 0 0px 2px 0 #f39f00;
}





salla-slider[type]:not(.hydrated) > div, salla-slider[type]:not(.hydrated) .swiper > div > div, .carousel-slider .swiper {
    margin-left: -0.625rem;
    margin-right: -0.625rem;
    display: flex
;
    padding-left: 5px;
    padding-right: 11px;
    padding-top: 10px;
    padding-bottom: 10px;
}


.s-product-card-content {
    position: relative;
    display: flex
;
    flex-direction: inherit;
    padding: 0.75rem;
}


.s-button-element:not(:disabled):not([loading]) {
    pointer-events: auto;
    border-radius: 8px 54px;
    background: #333330;
    color: #ffffff;
   box-shadow: 0px 0px 8px 0px #f39f00, 0 0px 2px 0 #f39f00;
}




salla-slider[type]:not(.hydrated) > div, salla-slider[type]:not(.hydrated) .swiper > div > div, .carousel-slider .swiper {
    margin-left: -0.625rem;
    margin-right: -0.625rem;
    display: flex
;
    padding-left: 5px;
    padding-right: 11px;
    padding-top: 10px;
    padding-bottom: 10px;
}


.s-product-card-content {
    position: relative;
    display: flex
;
    flex-direction: inherit;
    padding: 0.75rem;
}



.s-button-element:not(:disabled):not([loading]) {
    pointer-events: auto;
    border-radius: 8px 54px;
    background: #333330;
    color: #ffffff;
   box-shadow: 0px 0px 8px 0px #f39f00, 0 0px 2px 0 #f39f00;
}















/* التصميم للشاشات الصغيرة */
@media (max-width: 768px) {
    .s-block--banners .grid {
        grid-template-columns: repeat(3, 1fr); /* 3 عناصر في كل صف */
        gap: 8px; /* مسافة أصغر بين العناصر */
    }



  .banner-entry {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: .375rem;
    height: 151px;
    overflow: hidden;
    padding: .75rem;
    position: relative;
    text-align: center;
    --tw-text-opacity: 1;
    color: #fff;
    color: rgba(255, 255, 255, var(--tw-text-opacity, 1));
}



  @media (max-width: 768px) {
    .banner-entry {
        background-position: 50%;
        background-repeat: no-repeat;
        background-size
Specifies the size of the background images.

Widely available across major browsers (Baseline since January 2018)
Learn more

Don't show
: cover;
        border-radius: 0px;
        height: 71px;
        overflow: hidden;
        padding: .75rem;
        position: relative;
        text-align: center;
        --tw-text-opacity: 1;
        color: #fff;
        color: rgba(255, 255, 255, var(--tw-text-opacity, 1));
    }
}

  .store-footer__inner {
    border-bottom: 1px hsla(0, 0%, 100%, .1);
    border-style: dashed;
    --tw-bg-opacity: 1;
    background-color: #1d1f1f;
    background-color: #333333;
    padding-bottom: 2rem;
    padding-top: 2rem;
    color: #f1c165;
}

  .topnav-is-dark .top-navbar {
    --tw-bg-opacity: 1;
    background-color: #1d1f1f;
    background-color: rgb(51 51 51);
    --tw-text-opacity: 1;
    color: #d1d5db;
    color: rgba(209, 213, 219, var(--tw-text-opacity, 1));
}



















































/* شكل دوائر الماركات + حجمها */
.index .brand-item {
    padding: 0.5rem;
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    overflow: hidden;
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto !important;
    max-width: none !important;
    margin: 0 8px !important;
}

/* الحاوية اللي بنحوّلها لسلايدر أفقي (يتم إضافتها بالـ JS) */
.index .brands-slider-row {
    display: flex !important;
    flex-wrap: nowrap !important;   /* يمنع انها تصير صفين */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
}

/* كل دائرة تثبت على السلايدر */
.index .brands-slider-row .brand-item {
    scroll-snap-align: center;
}

/* إخفاء شريط التمرير */
.index .brands-slider-row::-webkit-scrollbar {
    display: none;
}
.index .brands-slider-row {
    scrollbar-width: none;
}

/* لو حابة يطبق بس على الجوال */
@media (max-width: 768px) {
    .index .brands-slider-row {
        padding-inline: 10px;
    }
}
































@media (max-width: 768px) {
    @media (max-width: 768px) {
        .dark-mode .bg-gray-100 {
            --tw-bg-opacity: 1;
            background-color: #333333;
        }
    }
}