/*
 * ============================================================
 *  CSS محسّن ومطوّر لمتجر سلة
 *  النسخة: 3.0 — ألوان محسنة + أداء أفضل + إصلاح المسار
 * ============================================================
 */

/* ========================================================= */
/* --- 0. CSS Variables (متغيرات الألوان المركزية) ---------- */
/* ========================================================= */

:root {
    --color-primary:        #734c7a;    /* البنفسجي الرئيسي */
    --color-primary-dark:   #5a3a60;    /* بنفسجي داكن */
    --color-primary-soft:   #f5f0f6;    /* خلفية بنفسجية فاتحة */

    --color-secondary:      #37789a;    /* الأزرق المساعد */
    --color-secondary-dark: #2a5e7a;
    --color-secondary-soft: #eef7fb;

    --color-sale:           #e74c3c;    /* لون التخفيضات */
    --color-sale-bg:        #fff1f0;

    --color-header-bg:      #ffffff;
    --color-header-border:  #eef0f3;
    --color-footer-bg:      #734c7a;

    --color-text-dark:      #1f2933;
    --color-text-muted:     #6b7280;
    --color-text-light:     #ffffff;
    --color-border:         #eef0f3;
    --color-shadow:         rgba(67, 61, 105, 0.16);

    --radius-sm:            6px;
    --radius-md:            12px;
    --radius-lg:            18px;
    --transition-fast:      0.22s ease;
    --transition-normal:    0.32s ease;
}

/* ========================================================= */
/* --- 1. Global Imports & Base Styles -------------------- */
/* ========================================================= */
/* الخط المخصص */
@font-face {
    font-family: "BalooBhaijaan-Regular";
    src: url("https://cdn.salla.sa/XWGDb/EcCdw80whrjDKkpXfb5WPWGkg9UtSJCvr6gBAL2r");
    font-display: swap;
}

*, *::before, *::after {
    box-sizing: border-box;
}

body, html {
    background: #fff;
    margin-top: 0;
    padding-top: 0;
    overflow-x: clip;
    color: var(--color-text-dark);
}

@supports not (overflow-x: clip) {
    body, html { overflow-x: hidden; }
}

/* ========================================================= */
/* --- 2. Header & Navigation ----------------------------- */
/* ========================================================= */

/* الهيدر — أبيض نظيف مع حد بنفسجي */
header .site-header,
.top-header {
    background-color: var(--color-header-bg) !important;
    border-bottom: 1px solid var(--color-header-border) !important;
    padding: 0 !important;
    min-height: unset !important;
    height: auto !important;
}

header .site-header__wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-header .top-header__info {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

a.theme-logo {
    margin-left: 10px;
}

/* صندوق البحث */
#searchbox {
    background-color: #fff !important;
    border: 1.5px solid var(--color-primary) !important;
    border-radius: var(--radius-sm) !important;
}

#searchbox::placeholder,
.form--search .form-group:before {
    color: var(--color-primary) !important;
}

.form--search .form-group .form-control {
    padding: 8px 15px !important;
}

/* أيقونة البحث والسلة */
span.sicon-search.icon,
i.cart-icon.sicon-shopping-bag.mr-2 {
    background-color: var(--color-primary);
    color: #fff;
    padding: 5px;
    border-radius: var(--radius-sm);
    box-shadow: 1px 1px 4px 0px var(--color-shadow);
    transition: background-color var(--transition-fast);
}

span.sicon-search.icon:hover,
i.cart-icon.sicon-shopping-bag.mr-2:hover {
    background-color: var(--color-primary-dark);
}

a#main-cart-btn,
a.mobile-search-trigger.header-side-panel-trigger.d-md-none.ml-2 {
    color: var(--color-primary);
}

/* --- زر السلة المُحسَّن --- */
#main-cart-btn {
    background-color: var(--color-primary);
    color: #fff !important;
    border-radius: 50px;
    padding: 6px 12px;
    box-shadow: 0 2px 6px var(--color-shadow);
    transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
}

#main-cart-btn:hover {
    background-color: var(--color-secondary) !important;
    box-shadow: 0 4px 10px rgba(55, 120, 154, 0.35) !important;
    color: #fff !important;
}

/* معلومات الهيدر العلوي */
ul.top-header__info span,
ul.top-header__info i {
    color: var(--color-primary);
}

/* --- التنقل للشاشات الكبيرة --- */
.nav-desktop.nav-desktop--horizontal > ul {
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-desktop.nav-desktop--horizontal > ul > li > a,
.nav-desktop.nav-desktop--horizontal .sub-menu ul > li > a {
    font-weight: bold;
    font-size: 1.1rem;
    color: var(--color-primary);
    transition: color var(--transition-fast), background-color var(--transition-fast);
}

.nav-desktop.nav-desktop--horizontal > ul > li:hover > a,
.nav-desktop.nav-desktop--horizontal > ul > li.active > a,
.nav-desktop.nav-desktop--horizontal .sub-menu ul > li:hover > a,
.nav-desktop.nav-desktop--horizontal .sub-menu ul > li:active > a {
    color: var(--color-secondary) !important;
    background-color: #f5f0f6;
    opacity: 1;
}

/* خط سفلي متحرك على القائمة */
.nav-desktop.nav-desktop--horizontal > ul > li > a {
    position: relative;
}

.nav-desktop.nav-desktop--horizontal > ul > li > a:before {
    content: "";
    position: absolute;
    top: 3rem;
    left: 0;
    right: 0;
    border-top: 2.5px solid var(--color-secondary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s linear;
}

.nav-desktop.nav-desktop--horizontal > ul > li:hover > a:before {
    transform: scaleX(1);
    transform-origin: right;
}

/* --- التنقل للجوال --- */
.header-block--nav-wrapper,
.mm-spn.mm-spn--light {
    background-color: #fff;
    color: var(--color-primary) !important;
}

.header-side-panel-trigger {
    color: var(--color-primary) !important;
}

.nav-mobile .main-nav li a,
.nav-mobile .main-nav li a i {
    color: var(--color-primary);
    transition: all var(--transition-normal);
}

.nav-mobile .main-nav li a.active,
.nav-mobile .main-nav li a:hover {
    color: #fff;
    background-color: var(--color-primary);
    border-radius: var(--radius-sm);
}

.nav-mobile .main-nav li a.active i,
.nav-mobile .main-nav li a:hover i {
    color: #fff;
}

/* تثبيت الهيدر على الجوال */
@media (max-width: 768px) {
    header .site-header {
        position: sticky !important;
        top: 0;
        z-index: 999;
        background: #fff !important;
        box-shadow: 0 2px 8px rgba(115, 76, 122, 0.15);
    }
}

/* --- أيقونة تسجيل الدخول --- */
.avatar-wrapper.avatar-wrapper--medium.avatar-wrapper--circular.avatar-wrapper--primary {
    border: none;
    border-radius: 0;
    background: url("https://cdn.salla.sa/VxPBb/oCbTYeYMjzqFcmF0K0hw9z3xwifU9TjQSnTs0rc0.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 75px;
    height: 75px;
    margin-bottom: 0 !important;
}

.login-modal .login-methods {
    margin-top: 0;
}

.avatar-wrapper.avatar-wrapper--medium.avatar-wrapper--circular.avatar-wrapper--primary i {
    display: none;
}

/* ========================================================= */
/* --- 3. Homepage Sections ------------------------------- */
/* ========================================================= */

/* عناوين الأقسام */
.title.title--primary.title--x-large.title--has-dash.mb-30 {
    font-size: 1.7rem;
    color: var(--color-primary) !important;
    font-family: "BalooBhaijaan-Regular" !important;
}

.title.title--primary.title--x-large.title--has-dash.mb-30:before,
.page--category .category-title .title.title--primary.title--has-dash::before {
    content: none;
}

.page--category .category-title .title.title--primary.title--has-dash {
    font-size: 1.7rem;
    color: var(--color-primary) !important;
    font-weight: 600 !important;
}

.title--primary {
    color: #000 !important;
    font-weight: bold;
    font-size: 19px !important;
}

/* --- قسم المميزات --- */
.home-block.home-block--store-features .row {
    padding-top: 40px;
}

.home-block.home-block--store-features .row:before {
    content: "مميزاتنا";
    display: block;
    visibility: visible;
    position: absolute;
    left: calc(50% - 40px);
    top: 2.5%;
    font-size: 1.6rem;
    color: var(--color-primary);
    height: 2.5rem;
    font-family: "BalooBhaijaan-Regular" !important;
}

.home-block--store-features .col-md-4 {
    border: 2px solid rgb(67, 61, 105);
    border-radius: var(--radius-md);
    margin: 0 2.5%;
    padding: 10px 20px;
    box-shadow: 1px 2px 4px 0 var(--color-shadow);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.home-block--store-features .col-md-4:hover {
    transform: translateY(-3px);
    box-shadow: 2px 6px 14px var(--color-shadow);
}

.store-feature__icon {
    width: 95px;
    height: 85px;
    border-radius: 0;
    margin-bottom: 0 !important;
}

.home-block--store-features .store-feature__icon:after {
    background: none !important;
}

/* أيقونات مميزات المتجر المخصصة */
.store-feature__icon .sicon-medal:before {
    font-family: "Font Awesome 5 pro" !important;
    content: "\f5a2" !important;
    font-weight: lighter !important;
    color: var(--color-primary);
    font-size: 4rem;
}

.store-feature__icon .sicon-earth:before {
    font-family: "Font Awesome 5 pro" !important;
    content: "\f57e" !important;
    font-weight: lighter !important;
    color: var(--color-primary);
    font-size: 4rem;
}

.store-feature__icon .sicon-devices:before {
    font-family: "Font Awesome 5 pro" !important;
    content: "\f87a" !important;
    font-weight: lighter !important;
    color: var(--color-primary);
    font-size: 4rem;
}

/* صور أيقونات GIF */
.home-block--store-features .col-md-4:nth-child(1) .store-feature__icon {
    background-image: url(https://cdn.salla.sa/Xovzq/JpLNCIe83AgRjhEVdkJTVlpkQfAADuj86lw8yPJJ.gif);
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: unset;
    opacity: 1 !important;
}

.home-block--store-features .col-md-4:nth-child(2) .store-feature__icon {
    background-image: url(https://cdn.salla.sa/Xovzq/4VrDzsO94qocDERmuayO0AjOmUXfVj2NNk2Lor6l.gif);
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: unset;
    opacity: 1 !important;
}

.home-block--store-features .col-md-4:nth-child(3) .store-feature__icon {
    background-image: url(https://cdn.salla.sa/Xovzq/JOSwau1ffHcq3appy6UZ5LaNKsp7DYw2dciaZZVn.gif);
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: unset;
    opacity: 1 !important;
}

.store-home .store-feature i:before { content: none !important; }
.store-feature__icon i { opacity: 0; }

/* --- بطاقات المنتجات (محسّنة) --- */
.product-block {
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08) !important;
    margin-left: 7.5px;
    margin-right: 7.5px;
    border-radius: var(--radius-md) !important;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast) !important;
    overflow: hidden;
}

.product-block:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12) !important;
}

body .product-block .title {
    color: var(--color-primary);
}

body .product-block .product-block__info {
    text-align: center;
}

.product-block__info .product-title p {
    color: var(--color-text-dark);
}

/* --- أقسام الصور المربعة --- */
@media only screen and (max-width: 991px) {
    section.home-block--square-images > .container > .row:not(.products-grid):not(.products-listing):nth-of-type(2) {
        grid-template-columns: 1fr 1fr !important;
    }

    section.home-block--square-images .col-md-4:nth-child(2n) {
        padding-left: 6px !important;
        padding-right: 2% !important;
    }

    section.home-block--square-images .col-md-4:nth-child(2n-1) {
        padding-right: 6px !important;
        padding-left: 2% !important;
    }
}

section.home-block--square-images > .container > .row:not(.products-grid):not(.products-listing):nth-of-type(2) {
    display: grid !important;
    column-gap: 10px !important;
    grid-template-columns: 1fr 1fr;
}

section.home-block--square-images .col-md-4 {
    width: 100%;
    max-width: 100% !important;
}

.banner--square {
    background-color: rgba(116, 133, 153, 0.05) !important;
}

section.home-block--square-images {
    padding: 10px 0 0 !important;
}

section.home-block--square-images .title {
    text-align: center;
    color: var(--color-primary);
    font-size: 1.7rem;
    font-family: "BalooBhaijaan-Regular" !important;
}

/* --- إعدادات عامة للأقسام --- */
.home-block.home-block--bg.home-block--slide-products.home-block--products-slider.show-all {
    background: #fff;
}

.home-block.home-block--fixed-banner:last-of-type {
    padding: 0 !important;
    margin-bottom: -7px !important;
}

.home-block.home-block--fixed-banner:last-of-type .row div {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.home-block.home-block--fixed-banner:last-of-type .container {
    max-width: 2000px !important;
}

.home-block--products-slider {
    padding: 15px 0 !important;
}

.splide__track {
    position: relative;
    z-index: 0;
    overflow: hidden;
}

/* ========================================================= */
/* --- 4. Product Page & Cart Styles ---------------------- */
/* ========================================================= */

.article--product-details {
    overflow: hidden;
}

/* أزرار صفحة المنتج والسلة */
.product-sections-wrapper .btn.btn--wide.btn--large.btn--oval.btn--primary,
.page--cart .btn.btn--wide.btn--padded.btn--oval.btn--primary,
.btn.btn--wide.btn--large.btn--oval.btn--primary.btn--proceed.next {
    background-color: var(--color-primary) !important;
    color: #fff !important;
    box-shadow: 2px 2px 6px var(--color-shadow);
    transition: background-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
    border: none !important;
}

.product-sections-wrapper .btn.btn--wide.btn--large.btn--oval.btn--primary:hover,
.page--cart .btn.btn--wide.btn--padded.btn--oval.btn--primary:hover,
.btn.btn--wide.btn--large.btn--oval.btn--primary.btn--proceed.next:hover {
    background-color: var(--color-primary-dark) !important;
    box-shadow: none;
    transform: translateY(-1px);
    opacity: 1 !important;
    color: #fff;
}

.product-sections-wrapper .btn.btn--wide.btn--large.btn--oval.btn--primary i,
.page--cart .btn.btn--wide.btn--padded.btn--oval.btn--primary i,
.btn.btn--wide.btn--large.btn--oval.btn--primary.btn--proceed.next i {
    display: none;
}

/* أزرار المشاركة */
.share-btns-list li a i {
    color: var(--color-secondary);
    transition: color var(--transition-normal);
}

.share-btns-list li a:hover i {
    color: var(--color-primary);
}

/* --- خطوات السلة --- */
.page--cart .cart-progress .step-1 .step__icon {
    background-color: #fff;
    border: 1px solid var(--color-primary);
}

.cart-progress .step.is-active .step__icon {
    color: var(--color-primary) !important;
}

/* --- صفحة الإيصال بعد الدفع --- */
.receipt__wrapper .icon-holder {
    display: none !important;
}

.receipt__wrapper h1.title::before {
    content: " ";
    display: block;
    height: 140px;
    background-image: url(https://cdn.salla.sa/VxPBb/oCbTYeYMjzqFcmF0K0hw9z3xwifU9TjQSnTs0rc0.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 24px;
    background-color: #fff !important;
}

/* ========================================================= */
/* --- 5. Footer ------------------------------------------ */
/* ========================================================= */

.footer {
    background-color: var(--color-footer-bg);
}

.footer * {
    color: var(--color-text-light) !important;
    text-align: center;
}

.footer .footer__top {
    background-image: url('https://cdn.salla.sa/VxPBb/oCbTYeYMjzqFcmF0K0hw9z3xwifU9TjQSnTs0rc0.png');
    background-size: 200%;
    background-repeat: no-repeat;
    background-position: 12rem -7rem;
}

.footer .footer__block,
.footer .footer-list {
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer .footer__top .title--has-dash::before {
    content: none;
}

.footer .footer__top .title--has-dash {
    font-size: 1.4em !important;
    font-weight: bold;
    color: #fff !important;
    font-family: "BalooBhaijaan-Regular";
}

.footer .store-links .footer-list li a:hover {
    text-decoration: underline;
}

.store-about > p {
    line-height: 25px;
}

/* أيقونات السوشيال ميديا */
.footer-list--social-links li a {
    border-radius: var(--radius-sm) !important;
    background-color: #fff !important;
    transition: background-color var(--transition-fast), border var(--transition-fast);
}

.footer-list--social-links li a i {
    color: var(--color-primary) !important;
    transition: color var(--transition-fast);
}

.footer-list--social-links li a:hover {
    border: 1px solid #fff !important;
    background-color: var(--color-primary-dark) !important;
}

.footer-list--social-links li a:hover *:before {
    color: #fff !important;
}

/* الفوتر السفلي */
.footer__bottom .container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer__bottom .container span {
    padding: 0 10px;
    display: inline-block;
    color: rgba(255,255,255,0.7) !important; /* إصلاح التباين */
}

.footer__bottom .container span:nth-child(2) {
    display: none; /* إخفاء "Made by Salla" */
}

/* لوجو الفوتر */
.footer .store-about:before {
    display: block;
    content: "";
    width: 100%;
    margin: 0 auto 15px;
    background: url(https://cdn.salla.sa/VxPBb/U1ZfcGJc0xGXegKStvIwqGCMVX6ckItKbse4vlhU.png);
    height: 100px;
    background-size: contain;
    background-repeat: no-repeat;
    filter: brightness(22.5);
    background-position: center;
}

/* الفوتر على الجوال */
@media (max-width: 768px) {
    .footer .footer__top > .row {
        text-align: center;
        display: grid !important;
        grid-template-columns: 1fr;
        grid-auto-rows: minmax(50px, auto);
    }

    .footer .footer__top > .row > div:nth-child(1) { order: 2; }
    .footer .footer__top > .row > div:nth-child(2) { order: 1; }
    .footer .footer__top > .row > div:nth-child(3) { order: 3; }

    .footer .footer__top .footer-list,
    .footer .footer__top .footer__block,
    .footer .payment-methods-wrap {
        align-items: center !important;
        justify-content: center !important;
    }

    .footer .footer__top .col-sm-12,
    .footer .footer__mid .col-md-8,
    .footer .footer__mid .col-md-4 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .store-about { margin-bottom: 15px; }
    .title--has-dash { padding-right: 5px !important; }

    .home-block--store-features .col-sm-12 {
        flex: 0 0 70%;
        border: 2px solid var(--color-primary);
        border-radius: var(--radius-md);
        margin: 10px auto !important;
        padding: 20px 0 0;
    }

    .store-feature { margin-bottom: 20px !important; }
    .home-block--square-images .banner--square { margin: 0 0 15px; }
}

/* ========================================================= */
/* --- 6. Splash Screen ----------------------------------- */
/* ========================================================= */

body.index:before {
    content: '';
    width: 100%;
    height: 100%;
    background: #fafafa url(https://cdn.salla.sa/VxPBb/YJro2W7JDlSbMxIMG2FA2suqlUqsp7Wx27SXWpHJ.png);
    position: fixed;
    z-index: 9999; /* تم تصحيح القيمة من 99999999999999999 */
    transform: scale(0);
    background-size: 250px !important;
    background-repeat: no-repeat;
    background-position: center !important;
    animation: logobg 1s forwards;
}

@keyframes logobg {
    0%   { transform: scale(1); }
    20%  { transform: scale(1); }
    78%  { transform: scale(1); }
    100% { transform: scale(0); }
}

/* ========================================================= */
/* --- 7. Hiding Rules ------------------------------------ */
/* ========================================================= */

/* إخفاء قسم الفئات */
.home-block.home-block--categories,
.home-block.home-block--category-grid,
.home-block.categories-block,
.home-block--square-images.categories,
.home-block[data-block-type="categories"],
.home-categories-section,
section[data-home-block-type="categories"],
.categories-wrapper,
.home-block.home-block--category-listing,
.categories-grid,
.category-block-grid,
.categories-list-container,
.product-categories-section ul,
.product-categories-section li {
    display: none !important;
}

/* إخفاء قسم قائمة المنتجات */
.products-listing,
.products-list-container,
.home-block.home-block--products-listing,
.home-block.home-block--featured-products.list-view,
.home-block[data-block-type="products-list"],
.product-grid-view.list-view,
.section-products-list {
    display: none !important;
}

/* إخفاء السلايدر الرئيسي */
.home-block.home-block--main-slider.pb-5 {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* ========================================================= */
/* --- 8. Floating Elements ------------------------------- */
/* ========================================================= */

/* زر واتساب عائم */
#whatsapp-fixed-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999;
    background-color: #25d366;
    color: #fff;
    border-radius: 50%;
    width: 55px;
    height: 55px;
    font-size: 28px;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}

#whatsapp-fixed-button:hover {
    background-color: #128c7e;
    transform: scale(1.08);
}

#whatsapp-fixed-button i {
    font-family: "Font Awesome 5 Brands";
}

/* نافذة عرض خاص (popup) — مرفوع عن زر الواتساب */
#popup-offer {
    position: fixed;
    bottom: 90px; /* إصلاح: لا يتداخل مع زر الواتساب */
    left: 20px;
    background-color: var(--color-primary);
    color: #fff;
    padding: 15px 20px;
    border-radius: var(--radius-md);
    z-index: 999;
    font-family: "BalooBhaijaan-Regular";
    box-shadow: 0 4px 12px var(--color-shadow);
    animation: popupAnim 0.8s ease-in-out;
}

@keyframes popupAnim {
    0%   { transform: translateY(100px); opacity: 0; }
    100% { transform: translateY(0);     opacity: 1; }
}

/* تحسين السلايدر */
.home-block--main-slider .slick-slide img {
    border-radius: var(--radius-md);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* ========================================================= */
/* --- 9. Breadcrumb + Category Spacing Final Fix ---------- */
/* ========================================================= */

/* مسار الصفحة في صف واحد مع تمرير أفقي عند الحاجة */
.breadcrumb,
nav.breadcrumb,
ol.breadcrumb,
ul.breadcrumb,
.breadcrumbs,
.breadcrumb-wrapper,
.breadcrumbs-wrapper,
salla-breadcrumb,
.s-breadcrumb,
.s-breadcrumb-wrapper,
.s-breadcrumb-list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    list-style: none !important;
    margin-top: 16px !important;
    margin-bottom: 8px !important;
    padding: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.breadcrumb::-webkit-scrollbar,
.breadcrumbs::-webkit-scrollbar,
.breadcrumb-wrapper::-webkit-scrollbar,
.breadcrumbs-wrapper::-webkit-scrollbar,
.s-breadcrumb-wrapper::-webkit-scrollbar,
.s-breadcrumb-list::-webkit-scrollbar {
    display: none;
}

.breadcrumb > *,
.breadcrumb li,
.breadcrumb-item,
.breadcrumbs > *,
.breadcrumbs li,
salla-breadcrumb a,
salla-breadcrumb span,
.s-breadcrumb-item,
.s-breadcrumb-list > * {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    white-space: nowrap !important;
}

.breadcrumb a,
.breadcrumb span,
.breadcrumb-item a,
.breadcrumb-item span,
.breadcrumbs a,
.breadcrumbs span,
.s-breadcrumb-item a,
.s-breadcrumb-item span,
salla-breadcrumb a,
salla-breadcrumb span {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    max-width: none !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    color: var(--color-text-dark) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.breadcrumb a:hover,
.breadcrumb-item a:hover,
.breadcrumbs a:hover,
.s-breadcrumb-item a:hover,
salla-breadcrumb a:hover {
    color: var(--color-primary) !important;
}

.breadcrumb li + li::before,
.breadcrumb-item + .breadcrumb-item::before,
.breadcrumbs li + li::before,
.s-breadcrumb-item + .s-breadcrumb-item::before {
    content: "‹" !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 8px !important;
    margin: 0 !important;
    color: #000 !important;
    opacity: 0.85 !important;
    float: none !important;
}

/* تقليل المسافة بين مسار الصفحة والعنوان */
.page--category main,
.page--category .main-content,
.page--category .page-content,
.page--category .app-content,
.page--product main,
.page--product .main-content,
.page--product .page-content,
.page--product .app-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.page--category .category-title,
.page--category .category-title-wrapper,
.page--category .products-title,
.page--category .section-title,
.page--category .title-wrapper,
.page--category .page-title,
.page--category h1.title,
.page--category h1.title--primary,
.page--category .title.title--primary.title--has-dash {
    margin-top: 6px !important;
    margin-bottom: 16px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: auto !important;
}

.page--category .category-title .title,
.page--category h1.title,
.page--category h1.title--primary,
.page--category .title.title--primary.title--has-dash {
    line-height: 1.4 !important;
    font-size: 1.45rem !important;
    color: var(--color-text-dark) !important;
}

.page--category .products-grid,
.page--category .products-listing,
.page--category .products-list,
.page--category .category-products,
.page--category .s-products-list-wrapper {
    margin-top: 10px !important;
    padding-top: 0 !important;
}

/* ========================================================= */
/* --- 10. Color Refinement + Performance Tweaks ---------- */
/* ========================================================= */

/* هيدر أنظف وأخف */
header .site-header,
.top-header {
    border-bottom: 1px solid var(--color-border) !important;
    box-shadow: none !important;
}

.top-header {
    min-height: 38px !important;
}

header .site-header__wrapper {
    gap: 16px !important;
}

/* البحث بشكل أخف */
#searchbox,
.form--search .form-group .form-control {
    border-color: var(--color-border) !important;
    box-shadow: none !important;
}

#searchbox:focus,
.form--search .form-group .form-control:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(115, 76, 122, 0.08) !important;
}

/* القائمة الرئيسية */
.nav-desktop.nav-desktop--horizontal > ul {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
}

.nav-desktop.nav-desktop--horizontal > ul > li > a {
    color: var(--color-text-dark) !important;
    padding: 18px 16px !important;
    border-radius: 0 !important;
}

.nav-desktop.nav-desktop--horizontal > ul > li:hover > a,
.nav-desktop.nav-desktop--horizontal > ul > li.active > a {
    color: var(--color-primary) !important;
    background-color: var(--color-primary-soft) !important;
}

/* زر التخفيضات - واضح لكن أرقى */
.nav-desktop.nav-desktop--horizontal > ul > li > a[href*="offer"],
.nav-desktop.nav-desktop--horizontal > ul > li > a[href*="sale"],
.nav-desktop.nav-desktop--horizontal > ul > li > a[href*="discount"],
.nav-desktop.nav-desktop--horizontal > ul > li > a[href*="تخفيض"] {
    color: var(--color-sale) !important;
    background-color: var(--color-sale-bg) !important;
}

.nav-desktop.nav-desktop--horizontal > ul > li > a[href*="offer"]:hover,
.nav-desktop.nav-desktop--horizontal > ul > li > a[href*="sale"]:hover,
.nav-desktop.nav-desktop--horizontal > ul > li > a[href*="discount"]:hover,
.nav-desktop.nav-desktop--horizontal > ul > li > a[href*="تخفيض"]:hover {
    color: #fff !important;
    background-color: var(--color-sale) !important;
}

/* كروت المنتجات أخف على الأداء */
.product-block {
    box-shadow: 0 2px 10px rgba(31, 41, 51, 0.08) !important;
    border: 1px solid rgba(238, 240, 243, 0.9) !important;
}

.product-block:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 18px rgba(31, 41, 51, 0.12) !important;
}

/* تعطيل شاشة البداية الثقيلة لتحسين الإحساس بسرعة الموقع */
body.index:before {
    display: none !important;
    animation: none !important;
}

/* تحسين الرندر للأقسام الطويلة في المتصفحات الداعمة */
@supports (content-visibility: auto) {
    .home-block--products-slider,
    .home-block--square-images,
    .home-block--store-features,
    .products-grid,
    .products-listing {
        content-visibility: auto;
        contain-intrinsic-size: 1px 700px;
    }
}

/* احترام تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

@media (max-width: 768px) {
    .breadcrumb,
    nav.breadcrumb,
    ol.breadcrumb,
    ul.breadcrumb,
    .breadcrumbs,
    .breadcrumb-wrapper,
    .breadcrumbs-wrapper,
    salla-breadcrumb,
    .s-breadcrumb,
    .s-breadcrumb-wrapper,
    .s-breadcrumb-list {
        margin-top: 12px !important;
        margin-bottom: 6px !important;
        font-size: 13px !important;
    }

    .page--category .category-title,
    .page--category .category-title-wrapper,
    .page--category .products-title,
    .page--category .section-title,
    .page--category .title-wrapper,
    .page--category .page-title,
    .page--category h1.title,
    .page--category h1.title--primary,
    .page--category .title.title--primary.title--has-dash {
        margin-top: 4px !important;
        margin-bottom: 14px !important;
    }

    .page--category .category-title .title,
    .page--category h1.title,
    .page--category h1.title--primary,
    .page--category .title.title--primary.title--has-dash {
        font-size: 1.25rem !important;
    }

    .nav-mobile .main-nav li a {
        border-radius: 10px !important;
    }
}

/* ========================================================= */
/* SDT V4 Final Additions - Breadcrumb + Features ترتيب كامل */
/* هذا الجزء مضاف في آخر الملف حتى يغلب أي تنسيقات قديمة */
/* ========================================================= */

/* ========================================================= */
/* 1) إصلاح مسار الصفحة Breadcrumb بشكل نهائي */
/* ========================================================= */

.breadcrumb,
nav.breadcrumb,
ol.breadcrumb,
ul.breadcrumb,
.breadcrumbs,
.breadcrumb-wrapper,
.breadcrumbs-wrapper,
salla-breadcrumb,
.s-breadcrumb,
.s-breadcrumb-wrapper,
.s-breadcrumb-list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;

    width: 100% !important;
    max-width: 100% !important;

    margin-top: 14px !important;
    margin-bottom: 8px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;

    list-style: none !important;
    white-space: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.breadcrumb::-webkit-scrollbar,
.breadcrumbs::-webkit-scrollbar,
.breadcrumb-wrapper::-webkit-scrollbar,
.breadcrumbs-wrapper::-webkit-scrollbar,
.s-breadcrumb-wrapper::-webkit-scrollbar,
.s-breadcrumb-list::-webkit-scrollbar {
    display: none;
}

.breadcrumb > *,
.breadcrumb li,
.breadcrumb-item,
.breadcrumbs > *,
.breadcrumbs li,
salla-breadcrumb a,
salla-breadcrumb span,
.s-breadcrumb-item,
.s-breadcrumb-list > * {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex: 0 0 auto !important;

    width: auto !important;
    max-width: none !important;
    min-width: auto !important;

    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    white-space: nowrap !important;
}

.breadcrumb a,
.breadcrumb span,
.breadcrumb-item a,
.breadcrumb-item span,
.breadcrumbs a,
.breadcrumbs span,
.s-breadcrumb-item a,
.s-breadcrumb-item span,
salla-breadcrumb a,
salla-breadcrumb span {
    display: inline-flex !important;
    align-items: center !important;

    width: auto !important;
    max-width: none !important;

    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    color: var(--color-primary) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.breadcrumb a:hover,
.breadcrumb-item a:hover,
.breadcrumbs a:hover,
.s-breadcrumb-item a:hover,
salla-breadcrumb a:hover {
    color: var(--color-secondary) !important;
}

.breadcrumb li + li::before,
.breadcrumb-item + .breadcrumb-item::before,
.breadcrumbs li + li::before,
.s-breadcrumb-item + .s-breadcrumb-item::before {
    content: "‹" !important;
    display: inline-flex !important;
    align-items: center !important;

    padding: 0 8px !important;
    margin: 0 !important;
    color: #000 !important;
    opacity: 0.75 !important;
    float: none !important;
}

/* ========================================================= */
/* 2) تقليل المسافة بين المسار وعنوان التصنيف */
/* ========================================================= */

.page--category main,
.page--category .main-content,
.page--category .page-content,
.page--category .app-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.page--category .category-title,
.page--category .category-title-wrapper,
.page--category .products-title,
.page--category .section-title,
.page--category .title-wrapper,
.page--category .page-title,
.page--category h1.title,
.page--category h1.title--primary,
.page--category .title.title--primary.title--has-dash {
    margin-top: 4px !important;
    margin-bottom: 16px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: auto !important;
}

.page--category .category-title .title,
.page--category h1.title,
.page--category h1.title--primary,
.page--category .title.title--primary.title--has-dash {
    line-height: 1.35 !important;
    font-size: 1.45rem !important;
    color: var(--color-primary) !important;
}

/* ========================================================= */
/* 3) ترتيب قسم المميزات في الصفحة الرئيسية */
/* ========================================================= */

.home-block.home-block--store-features {
    padding: 25px 0 !important;
    margin: 0 !important;
}

.home-block.home-block--store-features .container {
    max-width: 1180px !important;
}

.home-block.home-block--store-features .row {
    position: relative !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;

    padding-top: 55px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;

    align-items: stretch !important;
}

.home-block.home-block--store-features .row::before {
    content: "مميزاتنا";
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    display: block !important;
    text-align: center !important;

    font-size: 1.7rem !important;
    font-weight: 700 !important;
    color: var(--color-primary) !important;
    height: auto !important;
    line-height: 1.4 !important;

    font-family: "BalooBhaijaan-Regular", sans-serif !important;
}

.home-block--store-features .col-md-4,
.home-block--store-features .col-sm-12,
.home-block--store-features .store-feature {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    margin: 0 !important;
}

.home-block--store-features .col-md-4,
.home-block--store-features .col-sm-12 {
    display: flex !important;
    justify-content: center !important;
    align-items: stretch !important;

    border: 2px solid rgba(115, 76, 122, 0.85) !important;
    border-radius: 14px !important;
    padding: 18px 14px !important;

    background: #fff !important;
    box-shadow: 0 4px 14px rgba(67, 61, 105, 0.12) !important;

    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
    overflow: hidden !important;
}

.home-block--store-features .col-md-4:hover,
.home-block--store-features .col-sm-12:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 24px rgba(67, 61, 105, 0.18) !important;
}

.home-block--store-features .store-feature {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;

    text-align: center !important;
    min-height: 185px !important;
    margin-bottom: 0 !important;
}

.home-block--store-features .store-feature__icon {
    width: 90px !important;
    height: 85px !important;

    margin: 0 auto 12px !important;

    background-position: center !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;

    border-radius: 0 !important;
    opacity: 1 !important;
}

.home-block--store-features .store-feature__icon::after {
    background: none !important;
    display: none !important;
}

.home-block--store-features .store-feature__icon i,
.home-block--store-features .store-feature__icon i::before {
    opacity: 0 !important;
    visibility: hidden !important;
}

.home-block--store-features .store-feature__title,
.home-block--store-features .store-feature h3,
.home-block--store-features .store-feature .title {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: var(--color-primary) !important;

    margin: 6px 0 8px !important;
    line-height: 1.4 !important;
}

.home-block--store-features .store-feature__text,
.home-block--store-features .store-feature p {
    font-size: 0.95rem !important;
    color: #555 !important;

    line-height: 1.7 !important;
    margin: 0 !important;
}

/* صور المميزات الحالية */
.home-block--store-features .col-md-4:nth-child(1) .store-feature__icon,
.home-block--store-features .col-sm-12:nth-child(1) .store-feature__icon {
    background-image: url("https://cdn.salla.sa/Xovzq/JpLNCIe83AgRjhEVdkJTVlpkQfAADuj86lw8yPJJ.gif") !important;
}

.home-block--store-features .col-md-4:nth-child(2) .store-feature__icon,
.home-block--store-features .col-sm-12:nth-child(2) .store-feature__icon {
    background-image: url("https://cdn.salla.sa/Xovzq/4VrDzsO94qocDERmuayO0AjOmUXfVj2NNk2Lor6l.gif") !important;
}

.home-block--store-features .col-md-4:nth-child(3) .store-feature__icon,
.home-block--store-features .col-sm-12:nth-child(3) .store-feature__icon {
    background-image: url("https://cdn.salla.sa/Xovzq/JOSwau1ffHcq3appy6UZ5LaNKsp7DYw2dciaZZVn.gif") !important;
}

/* ========================================================= */
/* 4) تحسينات للجوال والتابلت */
/* ========================================================= */

@media (max-width: 991px) {
    .home-block.home-block--store-features {
        padding: 22px 0 !important;
    }

    .home-block.home-block--store-features .row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
        padding-top: 50px !important;
    }

    .home-block--store-features .col-md-4,
    .home-block--store-features .col-sm-12 {
        padding: 16px 12px !important;
    }
}

@media (max-width: 576px) {
    .breadcrumb,
    nav.breadcrumb,
    ol.breadcrumb,
    ul.breadcrumb,
    .breadcrumbs,
    .breadcrumb-wrapper,
    .breadcrumbs-wrapper,
    salla-breadcrumb,
    .s-breadcrumb,
    .s-breadcrumb-wrapper,
    .s-breadcrumb-list {
        margin-top: 10px !important;
        margin-bottom: 6px !important;
        font-size: 13px !important;
    }

    .page--category .category-title,
    .page--category .category-title-wrapper,
    .page--category .products-title,
    .page--category .section-title,
    .page--category .title-wrapper,
    .page--category .page-title,
    .page--category h1.title,
    .page--category h1.title--primary,
    .page--category .title.title--primary.title--has-dash {
        margin-top: 2px !important;
        margin-bottom: 12px !important;
    }

    .page--category .category-title .title,
    .page--category h1.title,
    .page--category h1.title--primary,
    .page--category .title.title--primary.title--has-dash {
        font-size: 1.3rem !important;
    }

    .home-block.home-block--store-features {
        padding: 18px 0 !important;
    }

    .home-block.home-block--store-features .row {
        grid-template-columns: 1fr !important;
        gap: 12px !important;

        padding-top: 45px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .home-block.home-block--store-features .row::before {
        font-size: 1.45rem !important;
    }

    .home-block--store-features .col-md-4,
    .home-block--store-features .col-sm-12 {
        padding: 16px 12px !important;
        border-radius: 12px !important;
    }

    .home-block--store-features .store-feature {
        min-height: auto !important;
    }

    .home-block--store-features .store-feature__icon {
        width: 80px !important;
        height: 75px !important;
        margin-bottom: 10px !important;
    }

    .home-block--store-features .store-feature__title,
    .home-block--store-features .store-feature h3,
    .home-block--store-features .store-feature .title {
        font-size: 1rem !important;
    }

    .home-block--store-features .store-feature__text,
    .home-block--store-features .store-feature p {
        font-size: 0.9rem !important;
    }
}

/* ========================================================= */
/* 10) Splash Screen - شعار بداية الموقع */
/* يظهر شعار الموقع عند فتح الصفحة لمدة قصيرة بشكل احترافي */
/* ========================================================= */

body.index::before,
body.sdt-js-ready.index::before,
body.sdt-site-ready.index::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 100% !important;

    background-color: #fafafa !important;
    background-image: url("https://cdn.salla.sa/VxPBb/YJro2W7JDlSbMxIMG2FA2suqlUqsp7Wx27SXWpHJ.png") !important;
    background-size: 240px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;

    z-index: 99999 !important;
    pointer-events: none !important;

    animation: sdtSplashLogo 0.9s ease forwards !important;
}

@keyframes sdtSplashLogo {
    0% {
        opacity: 1;
        transform: scale(1);
        visibility: visible;
    }

    65% {
        opacity: 1;
        transform: scale(1);
        visibility: visible;
    }

    100% {
        opacity: 0;
        transform: scale(1.08);
        visibility: hidden;
    }
}