/* Add custom CSS styles below */ 
:root {
    --main-color: #000;
    --second-color: #020202;
    --third-color: black;
    --body: white;
    --logo: url(https://cdn.files.salla.network/theme/721411343/8f928afc-e613-40c9-b845-47ac6d19a86f_500x500.png);
}
* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
img[src*="96851d6d-10f6-466a-96ad-2ec62a95ad49"],
img[src*="ccc3f144-b8a1-4aff-94fa-621554bace89"] {
    width: 100%;
    height: auto;
}
::-webkit-scrollbar-track-piece {
    background-color: var(--body);
    -webkit-border-radius: 0;
}

::-webkit-scrollbar-thumb:vertical {
    height: 200px;
    background-color: var(--main-color);
    -webkit-border-radius: 0;
}

::-webkit-scrollbar-thumb:vertical:hover {
    background-color: var(--second-color);
}
body:not(.product-index):not(.product-single):after {
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    position: fixed;
    z-index: 999999;
    background: var(--body) 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); }
    85% { opacity: .5; transform: scale(1); }
    99% { opacity: .1; transform: scale(1); }
    100% { opacity: 0; transform: scale(.1); }
}
.flex-col {
    background: var(--body);
}
.s-block {
    margin-top: 2rem;
    background: unset;
}
header.store-header:before {
    content: '';
    background: url(https://iili.io/2Mm8EYv.png);
    background-repeat-y: no-repeat;
    background-position-x: 0;
    animation: scrollBrands 4000s linear alternate both infinite;
    background-size: contain;
    height: 50px;
    display: block;
    background-color: #D7AE5D;
    background-position: center;
    margin-bottom: 16px;
    z-index: 9999999999999999;
    color : black;
}

@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
    }
}     
/* ----- start nav -----*/

.bg-inherit {
    background-color: inherit;
    background: var(--body);
}
.top-navbar {
    display: flex;
    min-height: 48px;
    padding-top: .5rem;
    padding-bottom: .5rem;
    background: unset;
}
.s-contacts-topnav-link:last-child:where([dir=rtl],[dir=rtl] *) {
    display: none;
}
@media only screen and (min-width: 1024px) {
    .main-menu li.root-level>a { color: var(--main-color); }
    .main-menu li.root-level>a:hover { color: var(--second-color); }
}
.sicon-user-circle {
    content: "\f072";
    color: var(--main-color);
    border: none;
}
.sicon-user-circle:hover {
    content: "\f072";
    color: var(--second-color);
}
.header-btn__icon.icon:where([dir=rtl],[dir=rtl] *) {
    margin-left: 9px;
    margin-right: 0;
    margin-right: initial;
    color: var(--main-color) !important;
    border: none;
}
.header-btn__icon.icon:hover {
    margin-left: 9px;
    margin-right: 0;
    margin-right: initial;
    color: var(--second-color) !important;
}
.sicon-shopping-bag:before { content: "\e901"; text-align: center; }
.sicon-user-circle:before { content: "\f077"; text-align: center; }
i.text-base.sicon-shopping-bag:before { content: "\ea6e"; text-align: center; }
.s-cart-summary-total {
    font-weight: 600;
    --tw-text-opacity: 1;
    color: #000;
    color: var(--main-color);
}
.sicon-menu { content: "\ed7f"; color: var(--main-color); }
.sicon-menu:hover { content: "\ed7f"; color: var(--second-color); }
.s-contacts-topnav-link:where([dir=rtl],[dir=rtl] *) { border-left-width: 1px; color: var(--main-color); }
.s-contacts-topnav-link:hover { border-left-width: 1px; color: var(--second-color); }
.topnav-link-item:last-child:where([dir=rtl],[dir=rtl] *) { border-width: 0; padding-left: 0; color: var(--main-color); }
.topnav-link-item:last-child:hover { border-width: 0; padding-left: 0; color: var(--second-color); }
.topnav-link-item.right-side:first-child:where([dir=rtl],[dir=rtl] *) { padding-right: 0; color: var(--main-color); }
.topnav-link-item.right-side:first-child:hover { padding-right: 0; color: var(--second-color); }
.s-search-icon svg { height: 1rem; width: 1rem; fill: var(--body); }
.s-cart-summary-count { top: -.125rem; --tw-bg-opacity: 1; background-color: var(--second-color); }
.top-navbar .s-search-input {
    border-style: none;
    background: var(--main-color);
    box-shadow: 1px 1px 5px var(--second-color);
}
.s-user-menu-trigger { background: transparent; }
.main-nav-container { min-height: 70px; background: var(--body); box-shadow: none; }
@media (min-width: 1024px) {
  .main-nav-container { min-height: 100px; background: var(--body); box-shadow: none; }
}
.navbar-brand img:hover { -webkit-animation: blink-1 0.6s both; animation: blink-1 0.6s both; }
@-webkit-keyframes blink-1 { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } }
@keyframes blink-1 { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } }
/*----- end nav -----*/

/*----- start sidebar -----*/
@media only screen and (max-width: 1024px) {
    .mm-spn.mm-spn--navbar.mm-spn--main:where([dir=rtl],[dir=rtl] *):after { padding-right: .75rem; background: var(--body); color: var(--main-color); }
}
.mm-spn.mm-spn--navbar ul { top: calc(var(--mm-spn-item-height) + 1px); background: var(--body); color: var(--main-color); }
@media only screen and (max-width: 1024px) {
    .mm-spn li a span:hover { padding: 0; color: var(--second-color); }
}
/*----- end sidebar -----*/

/*----- start content -----*/
.lazy__bg{
    background-size: 100% 100%;
    background-size: contain!important;
    background-repeat:no-repeat!important;
}
.lazy__bg:after {
    content: ""; position: absolute; top: -50%; left: -60%; width: 20%; height: 200%; opacity: 0; transform: rotate(30deg);
    background: rgba(255, 255, 255, 0.13);
    background: linear-gradient(to right, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.13) 77%, rgba(255, 255, 255, 0.5) 92%, rgba(255, 255, 255, 0.0) 100%);
}
.lazy__bg:hover:after { opacity: 1; left: 130%; transition-property: left, top, opacity; transition-duration: 0.7s, 0.7s, 0.15s; transition-timing-function: ease; }
.lazy__bg:active:after { opacity: 0; }

.s-slider-block__display-all, a.s-block__display-all { color: var(--main-color); font-weight: 700; font-size: .875rem; }
.s-slider-block__display-all:hover, a.s-block__display-all:hover { color: var(--second-color); }
.s-slider-block__title h2, .s-block__title h2 { position: relative; font-size: 1.125rem; font-weight: 700; line-height: 1.2; color: var(--main-color); padding: 10px; border-radius: 32px; }
.banner--fixed img { display: block; width: 100%; border-radius: .375rem; object-fit: cover; background: none; }
.s-breadcrumb-item { display: inline-block; color: black; }
.s-breadcrumb-item:hover, .s-breadcrumb-primary-reverse li:hover, .profile-header .breadcrumbs a:hover { color: var(--second-color); }
.s-breadcrumb-primary-reverse li, .profile-header .breadcrumbs a { color: var(--second-color); opacity: 0.8; }
.btn--outline-primary { border-width: 1px; border-color: var(--main-color); color: var(--main-color); }
.no-content-placeholder .icon { display: flex; height: 8rem; width: 8rem; align-items: center; justify-content: center; border-radius: 9999px; font-size: 3rem; color: var(--body); background: var(--main-color); }
.no-content-placeholder p { font-size: 1rem; color: var(--main-color); }
.rtl\:pl-3:where([dir=rtl],[dir=rtl] *) { padding-left: .75rem; color: var(--third-color); }
.text-xl { font-size: 1.25rem; color: var(--body); background: var(--main-color); padding: 5px; border-radius: 30px; text-align: center; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; color: black; }
span.text-gray-500.line-through { color: var(--second-color); }
label.hidden.sm\:block.rtl\:ml-3.ltr\:mr-3.whitespace-nowrap { color: var(--main-color); }
.product__description a { color: var(--main-color); }
.s-products-list-placeholder span { display: flex; height: 8rem; width: 8rem; align-items: center; justify-content: center; border-radius: 9999px; font-size: 3rem; background: var(--main-color); }
.s-products-list-placeholder p { padding-top: .5rem; text-align: center; color: var(--main-color); }
.s-products-list-placeholder span svg { margin-left: auto; margin-right: auto; height: 4rem; width: 4rem; fill: var(--body); }
.s-block--photos-slider { margin-top: 0 !important; }
.swiper { padding-left: 0 !important; }

.s-block--tabs-produtcs .tab-trigger.is-active button { border-color: var(--main-color); color: var(--third-color); background: var(--main-color); }
button.btn--wishlist.animated.hidden.sm\:inline-flex.s-button-element.s-button-icon.s-button-outline.s-button-light-outline.s-button-loader-center.s-button-wrap.hydrated.not-added { color: var(--second-color); }
.btn--wishlist.is-added { color: var(--main-color); }
.s-comments-product { padding-top: 1rem; padding-bottom: 1rem; background: unset; }
.s-breadcrumb-arrow svg { height: .875rem; width: .875rem; fill: var(--second-color); }
.s-add-product-button-mini-checkout-content { display: flex; flex-shrink: 0; align-items: center; white-space: nowrap; font-size: .8rem; color: black; background: 0 0 !important; width: 107%; height: 110%; justify-content: center; }
.s-add-product-button-mini-checkout-content:hover { color: var(--second-color); }
button.s-slider-next.s-slider-nav-arrow.swiper-button-disabled.swiper-button-lock, button.s-slider-prev.s-slider-nav-arrow.swiper-button-disabled.swiper-button-lock { opacity: 0; }
.s-login-modal-header-icon svg { height: 1.25rem; width: 1.25rem; fill: var(--main-color); }
.s-modal-title, label.s-login-modal-label, .iti__selected-dial-code { color: var(--main-color); font-weight: bold; }
span.s-login-modal-header-icon { border: 2px solid var(--main-color); }
input.s-tel-input-control.tel-input.s-ltr { border: 2px solid var(--main-color); }
a.s-login-modal-link { color: var(--main-color); }
a.s-login-modal-link:hover { color: var(--second-color); }
.s-block--features__item .feature-icon { margin-bottom: .75rem; display: flex; height: 6rem; width: 6rem; align-items: center; justify-content: center; overflow: hidden; border-radius: 9999px; background-color: var(--main-color); }
.s-block--features__item .feature-icon i { font-size: 3.875rem; color: var(--third-color); }
.s-block--features__item h2 { margin-bottom: .25rem; font-size: 20px; font-weight: 700; color: #1f2937; }
.s-block--features__item p { font-size: 15px; color: var(--main-color); font-weight: 700; }
#salla-modal:not(.s-search-modal)>div.s-modal-wrapper>div>div.s-modal-header:before { display: block !important; content: ''; background: var(--logo); background-size: contain; background-repeat: no-repeat; background-position: center; width: 100%; height: 102px; margin: 15px auto; }
/*----- end content -----*/

/*----- start product card -----*/
.s-button-primary-outline { color: var(--main-color); border: solid var(--main-color); }
.s-button-primary-outline:hover { background: var(--main-color); color: var(--third-color); border: solid var(--main-color); }
.s-product-card-content { display: flex; flex-direction: column; padding: .75rem; border-radius: 9px; align-items: center; }
.s-product-card-vertical { background: unset; border: 2px solid var(--main-color); width: 193px; height: 335px; }
.s-button-wide { width: 100%; color: #D7AE5D; border-radius: 15px; background: none !important; border: solid 2px; box-shadow: 5px 5px 1px #D7AE5D; }
.s-button-wide:hover { box-shadow: 5px 5px 1px var(--second-color); }
button.undefined.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center { color: var(--body); border-radius: 40px 10px; background: 0 0 !important; border: solid 2px; box-shadow: 5px 5px 1px var(--body); }
button.undefined.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center:hover { box-shadow: 5px 5px 1px var(--second-color); }
.s-add-product-button-main .s-add-product-button-mini-checkout .s-fast-checkout-button.outline { width: 50%; color: var(--main-color); border-radius: 40px 10px; background: none !important; border: solid 2px; border-block-end-width: 6px; }
.s-product-card-content-title a { display: block; font-size: .875rem; font-weight: 700; color: var(--main-color); text-align: center; height: 20px; overflow:hidden }
.s-product-card-content-title a:hover { color: var(--second-color); }
.s-fast-checkout-button.outline { color: var(--main-color); border-radius: 40px 10px; background: none !important; border: solid 2px; border-block-end-width: 6px; }
.s-product-card-price, .s-product-card-sale-price h4 { font-size: .875rem; font-weight: 700; color: var(--second-color) !important; }
.s-product-card-sale-price { color: var(--main-color); }
.s-product-card-vertical .s-product-card-image { flex: 1 1 0%; border-top-left-radius: .75rem; border-top-right-radius: .75rem; background: unset; max-height: 244px; }
.s-product-card-content-sub { margin-bottom: 1.25rem; display: flex; width: 100%; align-items: center; justify-content: center; }
.s-product-card-entry { transition: transform .2s ease-in-out; }
.s-product-card-entry:hover { transform: scale(1.03) }
.s-product-card-image img.loaded { background: var(--third-color); position: relative; opacity: 1; border-radius: 20px; }
button.undefined.s-button-element.s-button-btn.s-button-outline.s-button-wide.s-button-primary-outline.s-button-loader-center { width: 67px; transition: width 500ms ease 0s; }
button.undefined.s-button-element.s-button-btn.s-button-outline.s-button-wide.s-button-primary-outline.s-button-loader-center:hover { width: 200px; }
.s-product-card-image-cover { object-fit: fill; }
.s-product-card-vertical .s-product-card-image-cover { transition: all 0.3s ease-in-out; }
.s-product-card-vertical .s-product-card-image-cover:hover { transform: scale(1.1) rotate(10deg); }
/*----- end product card -----*/

/*----- start footer -----*/
.footer-is-light .store-footer .store-footer__inner { background: var(--body); color: var(--main-color); border-radius: 84px; border-bottom: 7px solid var(--main-color); font-weight: 500; text-align: center; }
.store-footer h3 { margin-bottom: .75rem; font-weight: 700; padding: 10px; text-align: center; color: var(--main-color); font-size: 25px; font-family: sans-serif; }
a.flex.items-center.m-0 { display: flex; flex-direction: column; }
.store-footer a h3:nth-child(1), a.flex.items-center.m-0:after { display: none; }
@media (max-width: 1024px) {
    .store-footer a h3:nth-child(1) { display: block; font-size: 1rem; color: transparent; background-image: var(--logo); background-size: 100%; background-repeat: no-repeat; scale: 3; line-height: 4; background-position: center; margin-top: 10px; }
}
@media (min-width: 1024px) {
    .rtl\:lg\:pr-20:where([dir=rtl],[dir=rtl] *) { padding-right: 5rem; background: var(--logo); background-repeat: no-repeat; background-size: contain; scale: 0.7; line-height: 0; }
}
.s-menu-footer-item:hover, .s-contacts-item:hover, a.hover\:text-primary:hover, .s-social-link a:hover { color: var(--second-color); }
.copyright-text p { color: var(--main-color); padding-top: 20px; }
.store-footer__inner { border: none; padding-top: 2rem; padding-bottom: 2rem; }
.footer-is-light .store-footer { background: var(--body); border-radius: 85px 85px 0px 0px; }
.s-social-list { display: flex; gap: .625rem; justify-content: center; }
.lg\:col-span-2.rtl\:lg\:pl-20.ltr\:lg\:pr-20, .s-menu-footer-list { display: flex; flex-direction: column; align-items: center; }
.s-contacts-list.s-contacts-list-vertical { display: flex; align-items: center; flex-direction: row; flex-wrap: wrap; justify-content: center; }
span.unicode { display: none; }
.footer-is-light .store-footer .contact-social { border: none; }
.s-user-menu-login-btn svg { height: 1.25rem; width: 1.25rem; fill: var(--main-color); }
.custom-footer-dev { background: #000 !important; }
.navbar-brand img { max-height: 3rem; max-width: 100px; width: 300px; }
.rtl\:space-x-reverse:where([dir=rtl],[dir=rtl] *)>:not([hidden])~:not([hidden]) { color: wheat; }
.product__description li, .product__description ul { list-style: inherit !important; color: black; }
/*----- end footer -----*/


/* ========================================================
   تنسيق الـ Object-Contain للسلايدرات (حل مشكلة الـ 100% والـ 64%)
   ======================================================== */

/* 1. السلايدر الأول الرئيسي: إجباره على العرض الكامل 100% وإلغاء أي تأثير */
salla-slider:first-of-type .object-contain,
.s-slider-block:first-of-type .object-contain,
salla-slider:nth-of-type(1) .object-contain,
.s-slider-block:nth-of-type(1) .object-contain {
    -o-object-fit: contain !important;
    object-fit: contain !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: auto !important;
    padding: 0px !important;
}

/* 2. السلايدر الثاني والثالث: تطبيق حجم الـ 64% الخاص بك بالملي والتوسيط */
salla-slider:nth-of-type(2) .object-contain,
.s-slider-block:nth-of-type(2) .object-contain,
salla-slider:nth-of-type(3) .object-contain,
.s-slider-block:nth-of-type(3) .object-contain {
    -o-object-fit: contain !important;
    object-fit: contain !important;
    width: 64% !important;
    max-width: 64% !important;
    margin: auto !important;
    padding: 10px !important;
}


/* ========================================================
   تنسيق قسم البنرات الـ 6 (إظهار صورتين بجانب بعض وعمل سكرول)
   ======================================================== */

/* إلغاء نظام الـ Grid وقوانين القالب تماماً وتحويل الحاوية لـ Flex أفقي */
div.grid.md\:grid-cols-3.two-row.grid-flow-row.gap-3,
div.grid.md\:grid-cols-3.two-row-grid,
div.grid.md\:grid-cols-3.grid-flow-row.gap-3 {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-behavior: smooth !important;
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: none !important;
    grid-auto-flow: unset !important;
    gap: 10px !important;
    padding-bottom: 8px !important;
}

/* إخفاء شريط التمرير السفلي تماماً */
div.grid.md\:grid-cols-3.two-row.grid-flow-row.gap-3::-webkit-scrollbar,
div.grid.md\:grid-cols-3.two-row-grid::-webkit-scrollbar,
div.grid.md\:grid-cols-3.grid-flow-row.gap-3::-webkit-scrollbar {
    display: none !important;
}

/* إجبار كل شريحة بنر على أخذ مساحة نصف الشاشة بالملي والاصطفاف جنباً إلى جنب */
div.grid.md\:grid-cols-3.two-row.grid-flow-row.gap-3 .banner-entry,
div.grid.md\:grid-cols-3.two-row-grid .banner-entry,
div.grid.md\:grid-cols-3.grid-flow-row.gap-3 .banner-entry {
    display: block !important;
    flex: 0 0 calc((100% - 10px) / 2) !important;
    width: calc((100% - 10px) / 2) !important;
    max-width: calc((100% - 10px) / 2) !important;
}

/* ضبط حجم الصور الداخلية للبنرات لتعمل بكفاءة */
div.grid.md\:grid-cols-3.two-row.grid-flow-row.gap-3 .banner-entry img,
div.grid.md\:grid-cols-3.two-row-grid .banner-entry img,
div.grid.md\:grid-cols-3.grid-flow-row.gap-3 .banner-entry img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: cover !important;
    border-radius: 8px !important;
}
.lazy__bg.loaded {
    opacity: 1;
    background-color: white;
}div.grid.md\:grid-cols-3.two-row.grid-flow-row.gap-3 .banner-entry, div.grid.md\:grid-cols-3.two-row-grid .banner-entry, div.grid.md\:grid-cols-3.grid-flow-row.gap-3 .banner-entry {
    display: block !important;
    flex: 0 0 calc((100% - 10px) / 2) !important;
    width: calc((100% - 10px) / 2) !important;
    max-width: calc((100% - 10px) / 2) !important;
    background-color: white;
}
.carousel-slider .swiper-wrapper>div, salla-slider[type]:not(.hydrated) .swiper>div>div>div, salla-slider[type]:not(.hydrated)>div>div {
    flex-shrink: 0;
    padding-left: 5px;
    padding-right: 5px;
    width: 200px;
}
.s-block {
    margin-top: 2rem;
    background: unset;
    margin-top: 4px;
}