/* =========================================================
   تمور ديرتي | PREMIUM SALLA UI
   MOBILE FIRST PREMIUM EDITION
   ========================================================= */


/* =========================================================
   1. الهوية
========================================================= */

:root {

    --date-green: #536f52;
    --date-green-dark: #3f583f;
    --date-green-soft: #edf2eb;

    --date-gold: #b99552;
    --date-gold-light: #d7bd82;

    --date-cream: #f8f5ed;
    --date-bg: #fbfaf7;
    --date-white: #ffffff;

    --date-text: #292820;
    --date-muted: #77746a;

    --date-border: rgba(83,111,82,.10);
    --date-gold-border: rgba(185,149,82,.16);

    --radius-xl: 20px;
    --radius-lg: 16px;
    --radius-md: 12px;
    --radius-sm: 9px;

    --shadow-soft:
        0 5px 22px rgba(54,48,33,.055);

    --shadow-card:
        0 5px 18px rgba(54,48,33,.065);

    --shadow-hover:
        0 12px 30px rgba(54,48,33,.11);

    --smooth:
        cubic-bezier(.22,.61,.36,1);
}


/* =========================================================
   2. الصفحة
========================================================= */

html {
    scroll-behavior: smooth;
    max-width: 100%;
    overflow-x: hidden !important;
}

body {
    margin: 0;
    padding: 0;

    max-width: 100%;
    overflow-x: hidden !important;

    background: var(--date-bg) !important;
    color: var(--date-text) !important;
}

#main-content {
    width: 100%;
    max-width: 100%;

    overflow-x: hidden !important;

    background:
        linear-gradient(
            180deg,
            #fbfaf7 0%,
            #f8f5ed 100%
        ) !important;
}

.container {
    max-width: 1380px !important;
}


/* =========================================================
   3. TOP NAV
========================================================= */

.top-navbar {
    background: #f5f1e7 !important;

    border-bottom:
        1px solid rgba(185,149,82,.12) !important;
}

.top-navbar .container {
    min-height: 36px;
}

.s-menu-topnav-item {
    color: #625f55 !important;

    font-size: 13px !important;
    font-weight: 500 !important;

    transition: .25s ease;
}

.s-menu-topnav-item:hover {
    color: var(--date-green) !important;
}


/* =========================================================
   4. HEADER
========================================================= */

.store-header {
    position: relative;
    z-index: 1000;

    background: #fff !important;
}

#mainnav {

    height: 84px !important;

    background:
        rgba(255,255,255,.98) !important;

    border-bottom:
        1px solid rgba(83,111,82,.10) !important;

    box-shadow:
        0 4px 25px rgba(43,38,25,.05) !important;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

#mainnav .container,
#mainnav .inner {
    height: 100%;
}


/* =========================================================
   5. LOGO
========================================================= */

.navbar-brand {
    display: flex !important;

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

    transition:
        transform .3s var(--smooth),
        opacity .25s ease !important;
}

.navbar-brand img {

    max-height: 72px !important;

    width: auto !important;

    object-fit: contain !important;
}

.navbar-brand:hover {
    opacity: .92;
}


/* =========================================================
   6. MAIN MENU
========================================================= */

#mainnav .main-menu {

    display: flex;

    align-items: center;

    gap: 6px;
}

#mainnav .main-menu > li {
    position: relative;
}

#mainnav .main-menu > li > a {

    display: flex !important;

    align-items: center;

    min-height: 44px;

    padding:
        8px 14px !important;

    color: #3d3b34 !important;

    font-size: 15px !important;

    font-weight: 600 !important;

    border-radius: 10px;

    transition:
        color .25s ease,
        background .25s ease,
        transform .25s ease !important;
}

#mainnav .main-menu > li > a:hover {

    color: var(--date-green) !important;

    background:
        rgba(83,111,82,.07) !important;
}

#mainnav .main-menu > li > a::after {

    content: "";

    position: absolute;

    right: 14px;
    left: 14px;

    bottom: 3px;

    height: 2px;

    background:
        var(--date-gold);

    transform:
        scaleX(0);

    transform-origin:
        center;

    transition:
        transform .3s var(--smooth);
}

#mainnav .main-menu > li > a:hover::after {
    transform: scaleX(1);
}


/* =========================================================
   7. إخفاء BRANDS
========================================================= */

#brands,
#brands-link,
a[href*="/brands"] {
    display: none !important;
}


/* =========================================================
   8. القوائم الفرعية
========================================================= */

#mainnav .sub-menu {

    background: #fff !important;

    border:
        1px solid rgba(83,111,82,.10) !important;

    border-radius:
        14px !important;

    box-shadow:
        0 18px 45px rgba(40,35,24,.12) !important;

    padding: 8px !important;
}

#mainnav .sub-menu a {

    display: block;

    padding:
        10px 13px !important;

    color: #444238 !important;

    font-size: 14px !important;

    border-radius: 9px;

    transition: .25s ease;
}

#mainnav .sub-menu a:hover {

    color:
        var(--date-green) !important;

    background:
        #f5f2e9 !important;
}


/* =========================================================
   9. SEARCH
========================================================= */

.header-search {
    max-width: 100%;
}

.s-search-input-wrapper {

    border-radius: 25px !important;

    background:
        #f7f5ef !important;

    border:
        1px solid rgba(83,111,82,.10) !important;

    transition: .3s ease;
}

.s-search-input-wrapper:hover,
.s-search-input-wrapper:focus-within {

    background: #fff !important;

    border-color:
        rgba(83,111,82,.30) !important;

    box-shadow:
        0 5px 18px rgba(83,111,82,.08);
}

.s-search-input {
    background: transparent !important;
    color: var(--date-text) !important;
}


/* =========================================================
   10. USER + CART
========================================================= */

.s-user-menu-login-btn,
.s-cart-summary-wrapper {

    transition:
        transform .25s ease,
        color .25s ease !important;
}

.s-user-menu-login-btn:hover,
.s-cart-summary-wrapper:hover {

    color:
        var(--date-green) !important;

    transform:
        translateY(-2px);
}


/* =========================================================
   11. BANNERS DESKTOP
========================================================= */

.s-block--fixed-banner {

    margin-top: 22px !important;
    margin-bottom: 30px !important;

    width: 100vw !important;

    position: relative !important;

    left: 50% !important;
    right: 50% !important;

    margin-left: -50vw !important;
    margin-right: -50vw !important;

    padding: 0 !important;
}

.s-block--fixed-banner .container {

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

    padding: 0 !important;
    margin: 0 !important;
}

.s-block--fixed-banner .banner--fixed {

    display: block;

    overflow: hidden !important;

    border-radius: 0 !important;

    background: #fff;

    border: none !important;

    box-shadow:
        0 8px 28px rgba(53,45,27,.07) !important;
}

.s-block--fixed-banner img {

    display: block !important;

    width: 100% !important;

    height: auto !important;

    object-fit: cover !important;

    border-radius: 0 !important;

    transition:
        transform .7s var(--smooth);
}

.s-block--fixed-banner .banner--fixed:hover img {
    transform: scale(1.012);
}


/* =========================================================
   12. PRODUCT SECTIONS
========================================================= */

.s-block--bundle-products-slider {

    margin:
        18px auto 30px !important;

    padding: 0 !important;
}

salla-products-slider-p92q7b,
salla-products-slider-phzo40 {

    display: block !important;

    background: #fff !important;

    border:
        1px solid rgba(83,111,82,.08) !important;

    border-radius:
        var(--radius-xl) !important;

    padding:
        22px !important;

    box-shadow:
        var(--shadow-card) !important;

    overflow: hidden;
}


/* =========================================================
   13. PRODUCT SECTION TITLES
========================================================= */

salla-products-slider-p92q7b::part(title),
salla-products-slider-phzo40::part(title),
.salla-products-slider__title {

    color:
        var(--date-green) !important;

    font-size:
        23px !important;

    font-weight:
        800 !important;

    line-height:
        1.4 !important;
}

salla-products-slider-p92q7b::part(subtitle),
salla-products-slider-phzo40::part(subtitle),
.salla-products-slider__subtitle {

    color:
        var(--date-muted) !important;

    font-size:
        14px !important;

    line-height:
        1.8 !important;
}


/* =========================================================
   14. PRODUCT CARDS
========================================================= */

salla-products-slider-p92q7b .product-entry,
salla-products-slider-phzo40 .product-entry,
salla-products-slider-p92q7b .s-product-card,
salla-products-slider-phzo40 .s-product-card,
.s-product-card,
.product-entry {

    background:
        #fff !important;

    border:
        1px solid #eeeae1 !important;

    border-radius:
        15px !important;

    overflow:
        hidden !important;

    transition:
        transform .3s var(--smooth),
        box-shadow .3s ease !important;
}

salla-products-slider-p92q7b .product-entry:hover,
salla-products-slider-phzo40 .product-entry:hover,
.s-product-card:hover {

    transform:
        translateY(-4px);

    box-shadow:
        var(--shadow-hover);
}


/* =========================================================
   15. PRODUCT IMAGES DESKTOP
========================================================= */

.s-product-card img,
.product-entry img {

    width: 100% !important;

    object-fit:
        cover !important;

    display:
        block !important;

    transition:
        transform .4s var(--smooth);
}

.s-product-card:hover img,
.product-entry:hover img {
    transform:
        scale(1.025);
}


/* =========================================================
   16. PRODUCT PRICE
========================================================= */

.s-product-card-price,
.product-price,
.price {

    color:
        var(--date-green) !important;

    font-weight:
        800 !important;
}


/* =========================================================
   17. BUTTONS
========================================================= */

.s-button-element,
.btn,
button {

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease !important;
}

.s-button-element:hover,
.btn:hover {

    transform:
        translateY(-2px);
}


/* =========================================================
   18. GRID BANNERS
========================================================= */

.s-block--banners {

    margin-top: 28px !important;
    margin-bottom: 35px !important;

    width: 100vw !important;

    position: relative !important;

    left: 50% !important;
    right: 50% !important;

    margin-left: -50vw !important;
    margin-right: -50vw !important;

    padding: 0 !important;
}

.s-block--banners .grid {
    gap: 0 !important;
}

.s-block--banners .banner-entry {

    overflow: hidden !important;

    border-radius: 0 !important;

    border: none !important;

    background-position:
        center !important;

    background-size:
        cover !important;

    transition:
        transform .35s var(--smooth);
}

.s-block--banners .banner-entry:hover {
    transform:
        translateY(-4px);
}


/* =========================================================
   19. TESTIMONIALS
========================================================= */

.s-block--bundle-testimonials-slider {

    margin:
        35px auto !important;

    padding:
        30px 20px !important;

    background:
        linear-gradient(
            135deg,
            #fff 0%,
            #f7f3e9 100%
        ) !important;

    border-radius:
        var(--radius-xl) !important;

    border:
        1px solid var(--date-gold-border) !important;

    box-shadow:
        var(--shadow-card) !important;
}


/* =========================================================
   20. MOBILE
========================================================= */

@media (max-width: 767px) {


    /* -----------------------------------------------------
       GENERAL
    ----------------------------------------------------- */

    html,
    body {

        width: 100% !important;

        max-width: 100% !important;

        overflow-x: hidden !important;
    }

    #main-content {

        width: 100% !important;

        max-width: 100% !important;

        padding:
            0 !important;
    }

    .container {

        width: 100% !important;

        max-width: 100% !important;

        padding-left:
            10px !important;

        padding-right:
            10px !important;
    }


    /* -----------------------------------------------------
       MOBILE HEADER
    ----------------------------------------------------- */

    #mainnav {

        height:
            66px !important;

        min-height:
            66px !important;

        box-shadow:
            0 3px 15px rgba(43,38,25,.045) !important;
    }

    #mainnav .container {

        padding-left:
            9px !important;

        padding-right:
            9px !important;
    }

    .navbar-brand img {

        max-height:
            53px !important;

        max-width:
            145px !important;
    }

    .header-search {

        display:
            none !important;
    }

    .s-user-menu-login-btn,
    .s-cart-summary-wrapper {

        transform:
            scale(.86);
    }


    /* -----------------------------------------------------
       TOP NAV
    ----------------------------------------------------- */

    .top-navbar {

        display:
            none !important;
    }


    /* =====================================================
       MAIN BANNER
       
       مهم جدًا:
       البنر أطول بصريًا من صور المنتجات
    ===================================================== */

    .s-block--fixed-banner {

        width:
            100vw !important;

        margin-top:
            9px !important;

        margin-bottom:
            19px !important;

        margin-left:
            -0px !important;

        position:
            relative !important;

        left:
            auto !important;

        right:
            auto !important;
    }

    .s-block--fixed-banner .container {

        width:
            100% !important;

        max-width:
            100% !important;

        padding:
            0 !important;
    }

    .s-block--fixed-banner .banner--fixed {

        width:
            100% !important;

        height:
            auto !important;

        min-height:
            0 !important;

        border-radius:
            0 !important;

        overflow:
            hidden !important;

        box-shadow:
            0 5px 18px rgba(45,40,27,.07) !important;
    }


    /*
       النسبة الأساسية للبنر:
       2.15 : 1

       مثال عرض 390px
       الارتفاع ≈ 181px
    */

    .s-block--fixed-banner img {

        width:
            100% !important;

        height:
            auto !important;

        aspect-ratio:
            2.15 / 1 !important;

        object-fit:
            cover !important;

        object-position:
            center !important;

        display:
            block !important;
    }


    /* =====================================================
       PRODUCT SECTION
    ===================================================== */

    .s-block--bundle-products-slider {

        width:
            calc(100% - 20px) !important;

        margin:
            12px 10px 22px !important;

        padding:
            0 !important;
    }

    salla-products-slider-p92q7b,
    salla-products-slider-phzo40 {

        width:
            100% !important;

        box-sizing:
            border-box !important;

        padding:
            12px 8px 14px !important;

        border-radius:
            16px !important;

        background:
            #fff !important;

        border:
            1px solid rgba(83,111,82,.08) !important;

        box-shadow:
            0 5px 18px rgba(45,40,27,.055) !important;
    }


    /* =====================================================
       PRODUCT SECTION TITLE
    ===================================================== */

    salla-products-slider-p92q7b::part(title),
    salla-products-slider-phzo40::part(title),
    .salla-products-slider__title {

        font-size:
            18px !important;

        line-height:
            1.45 !important;

        font-weight:
            800 !important;

        margin-bottom:
            3px !important;

        color:
            var(--date-green) !important;
    }

    salla-products-slider-p92q7b::part(subtitle),
    salla-products-slider-phzo40::part(subtitle),
    .salla-products-slider__subtitle {

        font-size:
            11px !important;

        line-height:
            1.65 !important;

        color:
            var(--date-muted) !important;
    }


    /* =====================================================
       PRODUCT IMAGE
       
       البنر:
       2.15 / 1

       المنتج:
       1.30 / 1

       لذلك البنر يظهر أطول وأبرز.
    ===================================================== */

    salla-products-slider-p92q7b img,
    salla-products-slider-phzo40 img,
    .s-product-card img,
    .product-entry img {

        width:
            100% !important;

        aspect-ratio:
            1.30 / 1 !important;

        height:
            auto !important;

        min-height:
            0 !important;

        max-height:
            none !important;

        object-fit:
            cover !important;

        object-position:
            center !important;

        border-radius:
            10px !important;

        display:
            block !important;
    }


    /* =====================================================
       PRODUCT CARD
    ===================================================== */

    salla-products-slider-p92q7b .product-entry,
    salla-products-slider-phzo40 .product-entry,
    salla-products-slider-p92q7b .s-product-card,
    salla-products-slider-phzo40 .s-product-card,
    .s-product-card,
    .product-entry {

        width:
            100% !important;

        background:
            #fff !important;

        border:
            1px solid #eeeae2 !important;

        border-radius:
            13px !important;

        overflow:
            hidden !important;

        box-shadow:
            0 3px 13px rgba(45,40,27,.045) !important;
    }


    /* =====================================================
       PRODUCT CONTENT
    ===================================================== */

    .s-product-card-content {

        padding:
            8px 8px 10px !important;
    }


    /* =====================================================
       PRODUCT TITLE
    ===================================================== */

    .s-product-card-title,
    .product-title {

        display:
            -webkit-box !important;

        -webkit-line-clamp:
            2;

        -webkit-box-orient:
            vertical;

        overflow:
            hidden !important;

        color:
            #35342e !important;

        font-size:
            12.5px !important;

        line-height:
            1.55 !important;

        font-weight:
            700 !important;

        min-height:
            39px;

        margin:
            5px 0 3px !important;
    }


    /* =====================================================
       PRICE
    ===================================================== */

    .s-product-card-price,
    .product-price,
    .price {

        color:
            var(--date-green) !important;

        font-size:
            13px !important;

        line-height:
            1.4 !important;

        font-weight:
            800 !important;
    }


    /* =====================================================
       OLD PRICE
    ===================================================== */

    .old-price,
    .s-product-card-price .old-price {

        color:
            #a19e95 !important;

        font-size:
            11px !important;
    }


    /* =====================================================
       PRODUCT BUTTON
    ===================================================== */

    .s-button-element {

        min-height:
            34px !important;

        padding:
            5px 10px !important;

        border-radius:
            9px !important;

        font-size:
            11px !important;

        font-weight:
            700 !important;
    }


    /* =====================================================
       GRID BANNERS
    ===================================================== */

    .s-block--banners {

        width:
            100vw !important;

        margin-top:
            18px !important;

        margin-bottom:
            22px !important;

        margin-left:
            0 !important;

        margin-right:
            0 !important;

        left:
            auto !important;

        right:
            auto !important;

        padding:
            0 !important;
    }

    .s-block--banners .grid {

        width:
            100% !important;

        gap:
            0 !important;
    }

    .s-block--banners .banner-entry {

        width:
            100% !important;

        min-height:
            0 !important;

        border-radius:
            0 !important;

        overflow:
            hidden !important;
    }

    .s-block--banners img {

        width:
            100% !important;

        height:
            auto !important;

        aspect-ratio:
            2.15 / 1 !important;

        object-fit:
            cover !important;

        display:
            block !important;
    }


    /* =====================================================
       TESTIMONIALS
    ===================================================== */

    .s-block--bundle-testimonials-slider {

        width:
            calc(100% - 20px) !important;

        margin:
            24px 10px !important;

        padding:
            20px 10px !important;

        border-radius:
            16px !important;
    }


    /* =====================================================
       TOUCH
    ===================================================== */

    a,
    button,
    img {

        -webkit-tap-highlight-color:
            transparent;
    }

}


/* =========================================================
   21. SMALL MOBILE
   390px وأقل
========================================================= */

@media (max-width: 390px) {


    /* الهيدر */

    #mainnav {

        height:
            63px !important;

        min-height:
            63px !important;
    }

    .navbar-brand img {

        max-height:
            49px !important;

        max-width:
            132px !important;
    }


    /* -----------------------------------------------------
       البنر
    ----------------------------------------------------- */

    .s-block--fixed-banner img {

        /*
           أطول قليلًا من الأجهزة الأكبر
        */

        aspect-ratio:
            2.05 / 1 !important;
    }


    /* -----------------------------------------------------
       المنتج
    ----------------------------------------------------- */

    salla-products-slider-p92q7b img,
    salla-products-slider-phzo40 img,
    .s-product-card img,
    .product-entry img {

        /*
           أقصر بوضوح من البنر
        */

        aspect-ratio:
            1.34 / 1 !important;

        border-radius:
            9px !important;
    }


    /* -----------------------------------------------------
       القسم
    ----------------------------------------------------- */

    salla-products-slider-p92q7b,
    salla-products-slider-phzo40 {

        padding:
            10px 6px 12px !important;

        border-radius:
            14px !important;
    }


    /* -----------------------------------------------------
       اسم المنتج
    ----------------------------------------------------- */

    .s-product-card-title,
    .product-title {

        font-size:
            12px !important;

        line-height:
            1.5 !important;
    }


    /* السعر */

    .s-product-card-price,
    .product-price,
    .price {

        font-size:
            12.5px !important;
    }
}


/* =========================================================
   22. VERY SMALL MOBILE
   340px وأقل
========================================================= */

@media (max-width: 340px) {


    .navbar-brand img {

        max-width:
            120px !important;

        max-height:
            46px !important;
    }


    /* البنر */

    .s-block--fixed-banner img {

        aspect-ratio:
            1.95 / 1 !important;
    }


    /* المنتج */

    salla-products-slider-p92q7b img,
    salla-products-slider-phzo40 img,
    .s-product-card img,
    .product-entry img {

        aspect-ratio:
            1.38 / 1 !important;
    }


    /* عنوان المنتج */

    .s-product-card-title,
    .product-title {

        font-size:
            11.5px !important;
    }
}


/* =========================================================
   23. TABLET
========================================================= */

@media (min-width: 768px) and (max-width: 1100px) {

    .container {

        max-width:
            94% !important;
    }

    #mainnav .main-menu > li > a {

        padding:
            8px 9px !important;

        font-size:
            13px !important;
    }

    .header-search {

        max-width:
            250px;
    }

    salla-products-slider-p92q7b,
    salla-products-slider-phzo40 {

        padding:
            18px !important;
    }
}


/* =========================================================
   24. EMPTY BLOCKS
========================================================= */

.s-block:empty {
    display:
        none !important;
}

.s-block--fixed-banner +
.s-block--fixed-banner {

    margin-top:
        12px !important;
}


/* =========================================================
   25. MOBILE HOVER RESET
========================================================= */

@media (hover: none) {

    .s-block--fixed-banner .banner--fixed:hover {

        transform:
            none !important;
    }

    .s-block--fixed-banner
    .banner--fixed:hover img {

        transform:
            none !important;
    }

    .s-block--banners .banner-entry:hover {

        transform:
            none !important;
    }

    .product-entry:hover,
    .s-product-card:hover {

        transform:
            none !important;
    }

    .product-entry:hover img,
    .s-product-card:hover img {

        transform:
            none !important;
    }
}


/* =========================================================
   26. TOP NAV RIGHT ITEM
========================================================= */

a.s-menu-topnav-item.topnav-link-item.right-side {

    display:
        none !important;
}

/* =========================================================
   TAMOR DIRTY
   PROFESSIONAL MOBILE RESPONSIVE FIX
   ضع هذا الكود في نهاية ملف CSS
========================================================= */


/* =========================================================
   GLOBAL MOBILE SAFETY
========================================================= */

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

img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    :root {
        --mobile-space: 12px;
        --mobile-radius: 14px;
    }


    /* =====================================================
       PAGE
    ===================================================== */

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow-x: hidden !important;
    }

    body {
        font-size: 14px !important;
        line-height: 1.65 !important;
    }

    #main-content,
    main {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow-x: hidden !important;
    }


    /* =====================================================
       STANDARD CONTAINER
    ===================================================== */

    .container {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: auto !important;
        margin-right: auto !important;

        padding-left: var(--mobile-space) !important;
        padding-right: var(--mobile-space) !important;
    }


    /* =====================================================
       HEADER
    ===================================================== */

    .store-header {
        width: 100% !important;
        max-width: 100% !important;

        position: relative;
        z-index: 1000;
    }

    #mainnav {
        width: 100% !important;

        height: 64px !important;
        min-height: 64px !important;

        padding: 0 !important;

        background: rgba(255, 255, 255, .98) !important;

        border-bottom:
            1px solid rgba(83, 111, 82, .08) !important;

        box-shadow:
            0 3px 14px rgba(40, 36, 25, .05) !important;
    }

    #mainnav .container {
        height: 64px !important;

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

    #mainnav .inner {
        width: 100% !important;
        height: 100% !important;

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

        gap: 5px !important;
    }


    /* =====================================================
       LOGO
    ===================================================== */

    .navbar-brand {
        flex: 0 0 auto !important;

        margin: 0 !important;
        padding: 0 !important;

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

    .navbar-brand img {
        width: auto !important;

        max-width: clamp(112px, 31vw, 138px) !important;
        max-height: 50px !important;

        height: auto !important;

        object-fit: contain !important;
    }


    /* =====================================================
       HEADER ICONS
    ===================================================== */

    .s-user-menu-login-btn,
    .s-cart-summary-wrapper {
        transform: none !important;

        min-width: 38px !important;
        min-height: 38px !important;

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

        padding: 4px !important;
        margin: 0 !important;
    }

    #mainnav button {
        min-width: 38px;
        min-height: 38px;
    }


    /* =====================================================
       TOP BAR
    ===================================================== */

    .top-navbar {
        display: none !important;
    }


    /* =====================================================
       FIXED / MAIN BANNERS
       
       مهم:
       لا نجبر الصورة على aspect ratio
       ونترك صورة الموبايل الأصلية تظهر كاملة.
    ===================================================== */

    .s-block--fixed-banner {
        width: 100% !important;
        max-width: 100% !important;

        position: relative !important;

        left: auto !important;
        right: auto !important;

        margin:
            8px 0 20px !important;

        padding: 0 !important;

        overflow: hidden !important;
    }

    .s-block--fixed-banner .container {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .s-block--fixed-banner .banner--fixed {
        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;

        border: 0 !important;
        border-radius: 0 !important;

        overflow: hidden !important;

        box-shadow:
            0 4px 16px rgba(43, 38, 25, .055) !important;
    }

    .s-block--fixed-banner picture {
        display: block !important;

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

    .s-block--fixed-banner img {
        display: block !important;

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

        height: auto !important;

        min-height: 0 !important;
        max-height: none !important;

        aspect-ratio: auto !important;

        object-fit: contain !important;
        object-position: center !important;

        border-radius: 0 !important;

        transform: none !important;
    }


    /* إزالة أي Hover/Zoom من البنر على الموبايل */

    .s-block--fixed-banner .banner--fixed:hover,
    .s-block--fixed-banner .banner--fixed:hover img {
        transform: none !important;
    }


    /* =====================================================
       FIRST MAIN BANNER
       بدون أي Effects إضافية
    ===================================================== */

    .s-block--fixed-banner:first-of-type .banner--fixed,
    .s-block--fixed-banner:first-of-type .banner--fixed img {
        transform: none !important;
        filter: none !important;
    }


    /* =====================================================
       GENERAL SECTIONS
    ===================================================== */

    .s-block {
        max-width: 100% !important;
    }

    .s-block + .s-block {
        position: relative;
    }


    /* =====================================================
       PRODUCT SLIDER SECTION
    ===================================================== */

    .s-block--bundle-products-slider,
    .s-block--best-offers {
        width: 100% !important;
        max-width: 100% !important;

        margin:
            16px 0 25px !important;

        padding-left:
            var(--mobile-space) !important;

        padding-right:
            var(--mobile-space) !important;
    }


    /* المكون الرسمي في سلة */

    salla-products-slider {
        display: block !important;

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

        margin: 0 !important;
    }

    .s-products-slider-wrapper {
        width: 100% !important;
        max-width: 100% !important;
    }

    .s-products-slider-slider {
        width: 100% !important;
        max-width: 100% !important;
    }

    .s-products-slider-card {
        min-width: 0 !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       PRODUCT CARD
    ===================================================== */

    custom-salla-product-card,
    salla-product-card {
        display: block !important;

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

    .s-product-card-entry,
    .s-product-card,
    .product-entry {
        width: 100% !important;
        max-width: 100% !important;

        height: 100% !important;

        background: #fff !important;

        border:
            1px solid rgba(83, 111, 82, .10) !important;

        border-radius:
            var(--mobile-radius) !important;

        overflow: hidden !important;

        box-shadow:
            0 3px 12px rgba(43, 38, 25, .045) !important;

        transform: none !important;
    }


    /* =====================================================
       PRODUCT IMAGE
       
       مربع احترافي للمتجر
       بدون قص المنتجات.
    ===================================================== */

    .s-product-card-image {
        width: 100% !important;

        aspect-ratio: 1 / 1 !important;

        overflow: hidden !important;

        background: #fff !important;
    }

    .s-product-card-image img {
        width: 100% !important;
        height: 100% !important;

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

        aspect-ratio: 1 / 1 !important;

        object-fit: contain !important;
        object-position: center !important;

        padding: 3px !important;

        transform: none !important;
    }


    /*
       إلغاء النسبة القديمة
       التي كانت تطبق على كل صور المنتجات
    */

    .s-product-card img,
    .product-entry img {
        max-width: 100% !important;
    }


    /* =====================================================
       PRODUCT CONTENT
    ===================================================== */

    .s-product-card-content {
        padding:
            9px 9px 11px !important;
    }


    /* =====================================================
       PRODUCT NAME
    ===================================================== */

    .s-product-card-title,
    .product-title {
        width: 100% !important;

        display: -webkit-box !important;

        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;

        overflow: hidden !important;

        min-height: 40px !important;

        margin:
            4px 0 5px !important;

        font-size:
            12.5px !important;

        line-height:
            1.55 !important;

        font-weight:
            700 !important;

        color:
            #35342e !important;
    }


    /* =====================================================
       PRICE
    ===================================================== */

    .s-product-card-price,
    .product-price,
    .price {
        font-size:
            13px !important;

        line-height:
            1.4 !important;

        font-weight:
            800 !important;

        color:
            var(--date-green) !important;
    }

    .old-price,
    .s-product-card-price .old-price {
        font-size:
            10.5px !important;

        color:
            #9d9a91 !important;
    }


    /* =====================================================
       PRODUCT BUTTONS
    ===================================================== */

    .s-product-card .s-button-element,
    .product-entry .s-button-element,
    custom-salla-product-card .s-button-element {
        width: 100% !important;

        min-height:
            38px !important;

        margin-top:
            7px !important;

        padding:
            6px 8px !important;

        border-radius:
            9px !important;

        font-size:
            11.5px !important;

        line-height:
            1.3 !important;

        font-weight:
            700 !important;

        transform:
            none !important;
    }


    /* =====================================================
       SECTION TITLES
    ===================================================== */

    .salla-products-slider__title,
    .s-block__title h2,
    .s-block__title h3 {
        font-size:
            clamp(17px, 4.7vw, 19px) !important;

        line-height:
            1.45 !important;

        font-weight:
            800 !important;

        margin-bottom:
            4px !important;

        color:
            var(--date-green) !important;
    }

    .salla-products-slider__subtitle {
        font-size:
            11.5px !important;

        line-height:
            1.6 !important;

        color:
            var(--date-muted) !important;
    }


    /* =====================================================
       CATEGORY / PRODUCTS PAGE
    ===================================================== */

    .container--products-list {
        width: 100% !important;
        max-width: 100% !important;

        padding-left:
            var(--mobile-space) !important;

        padding-right:
            var(--mobile-space) !important;
    }

    .container--products-list .main-content {
        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;
    }

    salla-products-list {
        display: block !important;

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

        overflow: visible !important;
    }

    #page-main-title {
        font-size:
            19px !important;

        line-height:
            1.45 !important;
    }


    /* =====================================================
       BANNER GRID
    ===================================================== */

    .s-block--banners {
        width: 100% !important;
        max-width: 100% !important;

        position: relative !important;

        left: auto !important;
        right: auto !important;

        margin:
            18px 0 24px !important;

        padding: 0 !important;

        overflow: hidden !important;
    }

    .s-block--banners .container {
        width: 100% !important;
        max-width: 100% !important;

        padding: 0 !important;
        margin: 0 !important;
    }

    .s-block--banners .grid {
        width: 100% !important;

        gap: 0 !important;

        margin: 0 !important;
    }

    .s-block--banners .banner-entry {
        width: 100% !important;

        margin: 0 !important;

        border-radius: 0 !important;

        transform: none !important;

        overflow: hidden !important;
    }

    .s-block--banners .banner-entry img {
        display: block !important;

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

        max-height: none !important;

        aspect-ratio: auto !important;

        object-fit: contain !important;

        transform: none !important;
    }


    /* =====================================================
       TESTIMONIALS
    ===================================================== */

    .s-block--bundle-testimonials-slider {
        width:
            calc(100% - 24px) !important;

        max-width:
            calc(100% - 24px) !important;

        margin:
            24px 12px !important;

        padding:
            18px 12px !important;

        border-radius:
            15px !important;
    }


    /* =====================================================
       BREADCRUMBS
    ===================================================== */

    .container--breadcrumbs {
        padding-left:
            var(--mobile-space) !important;

        padding-right:
            var(--mobile-space) !important;
    }

    .breadcrumbs {
        padding-top:
            12px !important;

        padding-bottom:
            12px !important;

        font-size:
            11px !important;
    }


    /* =====================================================
       PRODUCT PAGE
    ===================================================== */

    .product-single,
    .product-page,
    .product-details {
        max-width: 100% !important;

        overflow-x: hidden !important;
    }

    .product-single .container,
    .product-page .container {
        padding-left:
            var(--mobile-space) !important;

        padding-right:
            var(--mobile-space) !important;
    }


    /* =====================================================
       FORMS
    ===================================================== */

    input,
    select,
    textarea {
        max-width:
            100% !important;

        font-size:
            16px !important;
    }

    /*
       16px يمنع iPhone Safari
       من عمل Zoom تلقائي عند الضغط على input
    */


    /* =====================================================
       MODALS / DRAWERS
    ===================================================== */

    .s-modal-wrapper,
    .s-drawer-wrapper {
        max-width:
            100vw !important;
    }


    /* =====================================================
       FOOTER
    ===================================================== */

    footer,
    .store-footer {
        width:
            100% !important;

        max-width:
            100% !important;

        overflow-x:
            hidden !important;
    }

    footer .container,
    .store-footer .container {
        padding-left:
            14px !important;

        padding-right:
            14px !important;
    }


    /* =====================================================
       TOUCH DEVICES
    ===================================================== */

    a,
    button,
    .s-button-element {
        -webkit-tap-highlight-color:
            transparent;
    }

    .s-product-card:hover,
    .product-entry:hover,
    .s-product-card:hover img,
    .product-entry:hover img {
        transform:
            none !important;
    }

}


/* =========================================================
   SMALL MOBILE
   iPhone SE / Galaxy صغير
========================================================= */

@media (max-width: 390px) {

    :root {
        --mobile-space:
            10px;
    }

    #mainnav {
        height:
            61px !important;

        min-height:
            61px !important;
    }

    #mainnav .container {
        height:
            61px !important;
    }

    .navbar-brand img {
        max-width:
            124px !important;

        max-height:
            47px !important;
    }

    .s-product-card-title,
    .product-title {
        font-size:
            12px !important;

        min-height:
            38px !important;
    }

    .s-product-card-price,
    .product-price,
    .price {
        font-size:
            12.5px !important;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 340px) {

    :root {
        --mobile-space:
            8px;
    }

    .navbar-brand img {
        max-width:
            112px !important;

        max-height:
            44px !important;
    }

    .s-product-card-content {
        padding:
            7px 7px 9px !important;
    }

    .s-product-card-title,
    .product-title {
        font-size:
            11.5px !important;
    }

}



/* =========================================================
   تمور ديرتي | SEARCH UI FIX V4
   ضعه في نهاية كود CSS
========================================================= */

/* زر البحث يتم إنشاؤه بواسطة JavaScript */
.td-mobile-search-button {
    display: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    border: 0;
    outline: 0;
    font: inherit;
}

.td-mobile-search-button svg {
    display: block;
    flex: 0 0 auto;
}

.td-mobile-search-text {
    display: inline-block;
}


/* =========================================================
   مربع البحث الموجود أعلى الديسكتوب
========================================================= */

.header-search {
    width: 100%;
    max-width: 360px;
}

.header-search .s-search-input-wrapper,
.s-search-modal .s-search-input-wrapper {
    overflow: hidden !important;

    border:
        1px solid rgba(83, 111, 82, .18) !important;

    border-radius:
        999px !important;

    background:
        #f8f6f0 !important;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.header-search .s-search-input-wrapper:hover,
.header-search .s-search-input-wrapper:focus-within,
.s-search-modal .s-search-input-wrapper:focus-within {
    background:
        #ffffff !important;

    border-color:
        rgba(83, 111, 82, .42) !important;

    box-shadow:
        0 5px 18px rgba(83, 111, 82, .10) !important;
}

.s-search-input {
    min-width: 0 !important;
    background: transparent !important;
    color: #292820 !important;
}


/* =========================================================
   نافذة البحث أمام الهيدر والناف بار
========================================================= */

.s-search-modal.s-modal-container,
salla-modal.s-search-modal {
    z-index: 2147483600 !important;
}

.s-search-modal .s-modal-overlay {
    z-index: 0 !important;

    background:
        rgba(28, 30, 25, .45) !important;

    backdrop-filter:
        blur(3px);

    -webkit-backdrop-filter:
        blur(3px);
}

.s-search-modal .s-modal-wrapper {
    position: relative !important;
    z-index: 1 !important;
}

.s-search-modal .s-modal-body {
    width:
        min(720px, calc(100% - 24px)) !important;

    max-width:
        720px !important;

    margin:
        12px auto 0 !important;

    padding:
        18px !important;

    overflow:
        hidden !important;

    border:
        1px solid rgba(83, 111, 82, .12) !important;

    border-radius:
        18px !important;

    background:
        #ffffff !important;

    box-shadow:
        0 20px 60px rgba(35, 32, 24, .18) !important;
}

.s-search-modal .s-search-panel {
    position: relative !important;
    z-index: 2 !important;

    width: 100% !important;

    background:
        #ffffff !important;
}


/* صف الإدخال وزر الإغلاق */

.s-search-modal .s-search-input-row {
    display: flex !important;

    align-items: center !important;

    gap:
        9px !important;

    width:
        100% !important;
}

.s-search-modal .s-search-input-wrapper {
    flex:
        1 1 auto !important;

    min-width:
        0 !important;
}

.s-search-modal .s-search-input {
    width:
        100% !important;

    height:
        46px !important;

    padding-inline:
        16px 44px !important;

    font-size:
        16px !important;
}


/* زر رجوع سلة يتحول لزر إغلاق واضح */

.s-search-modal .s-search-back-btn {
    position:
        relative !important;

    display:
        inline-flex !important;

    flex:
        0 0 42px !important;

    width:
        42px !important;

    min-width:
        42px !important;

    height:
        42px !important;

    min-height:
        42px !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    opacity:
        1 !important;

    visibility:
        visible !important;

    pointer-events:
        auto !important;

    border:
        1px solid rgba(83, 111, 82, .18) !important;

    border-radius:
        50% !important;

    background:
        #edf2eb !important;

    color:
        #3f583f !important;

    cursor:
        pointer !important;

    transform:
        none !important;
}

.s-search-modal .s-search-back-btn:hover {
    background:
        #536f52 !important;

    color:
        #ffffff !important;
}

.s-search-modal .s-search-back-btn svg {
    width:
        21px !important;

    height:
        21px !important;
}


/* =========================================================
   نتائج البحث
========================================================= */

.s-search-modal .s-search-divider {
    margin:
        14px 0 !important;

    border-color:
        rgba(83, 111, 82, .10) !important;
}

.s-search-modal .s-search-results-body,
.s-search-modal .s-search-results-grid-wrap,
.s-search-modal .s-search-results-grid {
    width:
        100% !important;

    max-width:
        100% !important;
}

.s-search-modal .s-search-idle-section-title {
    margin:
        0 0 14px !important;

    color:
        #292820 !important;

    font-size:
        17px !important;

    line-height:
        1.5 !important;

    font-weight:
        800 !important;
}


/* حالة لا توجد نتائج */

.s-search-modal .s-search-no-results-placeholder {
    display:
        block !important;

    width:
        100% !important;

    margin:
        0 !important;

    padding:
        48px 16px !important;

    border:
        1px dashed rgba(83, 111, 82, .25) !important;

    border-radius:
        14px !important;

    background:
        #faf9f5 !important;

    color:
        #77746a !important;

    font-size:
        14px !important;

    line-height:
        1.7 !important;

    text-align:
        center !important;
}


/* =========================================================
   وضع الموبايل
========================================================= */

@media (max-width: 767px) {

    /* ضبط المساحة الموجود بها الحساب والسلة والبحث */

    #mainnav [data-testid="store-header-user-menu"] {
        margin:
            0 !important;
    }

    #mainnav [data-testid="store-header-cart"] {
        margin-inline:
            2px 0 !important;
    }

    #mainnav [data-testid="store-header-mobile-toggle"] {
        margin-inline:
            0 7px !important;
    }


    /* زر أيقونة وكلمة بحث */

    #mainnav .td-mobile-search-button {
        display:
            inline-flex !important;

        flex:
            0 0 auto !important;

        width:
            auto !important;

        min-width:
            62px !important;

        height:
            38px !important;

        min-height:
            38px !important;

        margin:
            0 2px !important;

        padding:
            6px 9px !important;

        gap:
            5px !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        opacity:
            1 !important;

        visibility:
            visible !important;

        pointer-events:
            auto !important;

        border:
            1px solid rgba(83, 111, 82, .18) !important;

        border-radius:
            999px !important;

        background:
            #edf2eb !important;

        color:
            #3f583f !important;

        box-shadow:
            none !important;

        cursor:
            pointer !important;

        transform:
            none !important;
    }

    #mainnav .td-mobile-search-button:active {
        background:
            #dfe8dc !important;

        transform:
            scale(.97) !important;
    }

    #mainnav .td-mobile-search-button svg {
        display:
            block !important;

        flex:
            0 0 auto !important;

        width:
            19px !important;

        height:
            19px !important;
    }

    #mainnav .td-mobile-search-text {
        display:
            inline-block !important;

        color:
            inherit !important;

        font-size:
            11.5px !important;

        line-height:
            1 !important;

        font-weight:
            800 !important;

        white-space:
            nowrap !important;
    }


    /* نافذة البحث تملأ شاشة الموبايل */

    .s-search-modal.s-modal-container {
        z-index:
            2147483600 !important;
    }

    .s-search-modal .s-modal-wrapper {
        width:
            100% !important;

        max-width:
            100% !important;
    }

    .s-search-modal .s-modal-body {
        width:
            100% !important;

        max-width:
            100% !important;

        min-height:
            100vh !important;

        min-height:
            100dvh !important;

        margin:
            0 !important;

        padding:
            12px !important;

        overflow-x:
            hidden !important;

        overflow-y:
            auto !important;

        border:
            0 !important;

        border-radius:
            0 !important;

        background:
            #ffffff !important;
    }


    /* البحث وزر الإغلاق يظلان ظاهرين */

    .s-search-modal .s-search-input-row {
        position:
            sticky !important;

        top:
            0 !important;

        z-index:
            10 !important;

        padding:
            4px 0 11px !important;

        background:
            #ffffff !important;
    }

    .s-search-modal .s-search-back-btn {
        display:
            inline-flex !important;

        flex:
            0 0 42px !important;

        width:
            42px !important;

        min-width:
            42px !important;

        height:
            42px !important;

        opacity:
            1 !important;

        visibility:
            visible !important;
    }

    .s-search-modal .s-search-results-body {
        padding:
            10px 0 28px !important;
    }

    .s-search-modal .s-search-no-results-placeholder {
        padding:
            58px 14px !important;
    }
}


/* =========================================================
   الشاشات الصغيرة
========================================================= */

@media (max-width: 390px) {

    #mainnav .td-mobile-search-button {
        min-width:
            57px !important;

        height:
            36px !important;

        min-height:
            36px !important;

        margin-inline:
            1px !important;

        padding-inline:
            7px !important;

        gap:
            4px !important;
    }

    #mainnav .td-mobile-search-button svg {
        width:
            18px !important;

        height:
            18px !important;
    }

    #mainnav .td-mobile-search-text {
        font-size:
            11px !important;
    }
}


@media (max-width: 340px) {

    #mainnav .td-mobile-search-button {
        min-width:
            54px !important;

        padding-inline:
            6px !important;
    }

    #mainnav .td-mobile-search-text {
        font-size:
            10.5px !important;
    }
}


/* ================================================================
   HOME MOSAIC BANNERS — FINAL RESPONSIVE LAYOUT
   Section: component-id="417010573"

   Desktop:
   [ side 1 ] [ banner 2 ] [ side 4 ]
   [ side 1 ] [ banner 3 ] [ side 4 ]
================================================================ */

section[component-id="417010573"][data-testid="store-home-square-banners"] {
    --td-mosaic-gap: clamp(12px, 1.35vw, 18px);

    position: relative !important;
    inset: auto !important;

    width: min(calc(100% - 32px), 1320px) !important;
    max-width: 1320px !important;

    margin: 28px auto 34px !important;
    padding: 0 !important;

    overflow: visible !important;
    transform: none !important;
    box-sizing: border-box !important;
}


/* ===================== GRID ===================== */

section[component-id="417010573"] > .grid {
    display: grid !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    grid-template-rows:
        repeat(2, minmax(0, 1fr)) !important;

    grid-template-areas:
        "side-one middle-top side-two"
        "side-one middle-bottom side-two" !important;

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

    height: auto !important;
    min-height: 0 !important;

    /*
       يحافظ على تناسب البنرين الأوسطين 2:1
       ويجعل البنرين الجانبيين بنفس الأبعاد.
    */
    aspect-ratio: 3 / 1 !important;

    margin: 0 !important;
    padding: 0 !important;

    gap: var(--td-mosaic-gap) !important;

    /*
       يمنع اتجاه RTL من عكس أماكن Grid Areas.
       يتم إرجاع RTL داخل كل بنر.
    */
    direction: ltr !important;

    overflow: visible !important;
}


/* ===================== ALL BANNERS ===================== */

section[component-id="417010573"]
> .grid
> .banner-entry {
    display: block !important;
    position: relative !important;

    inset: auto !important;

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

    height: 100% !important;

    min-width: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    align-self: stretch !important;
    justify-self: stretch !important;

    aspect-ratio: auto !important;

    overflow: hidden !important;

    border: 0 !important;
    border-radius:
        clamp(12px, 1.2vw, 17px) !important;

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

    direction: rtl !important;

    box-sizing: border-box !important;

    transform: none !important;

    box-shadow:
        0 6px 20px rgba(40, 35, 25, 0.08) !important;

    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease !important;
}


/* ===================== EXPLICIT ORDER ===================== */

/* البنر الجانبي الأول */

section[component-id="417010573"]
> .grid
> .banner-entry:nth-child(1) {
    grid-area: side-one !important;
}


/* البنر الأوسط العلوي */

section[component-id="417010573"]
> .grid
> .banner-entry:nth-child(2) {
    grid-area: middle-top !important;
}


/* البنر الأوسط السفلي */

section[component-id="417010573"]
> .grid
> .banner-entry:nth-child(3) {
    grid-area: middle-bottom !important;
}


/* البنر الجانبي الثاني */

section[component-id="417010573"]
> .grid
> .banner-entry:nth-child(4) {
    grid-area: side-two !important;
}


/* إخفاء صناديق النصوص الفارغة */

section[component-id="417010573"]
.banner-entry__text:has(.banner__title:empty) {
    display: none !important;
}


/* ===================== DESKTOP HOVER ===================== */

@media (hover: hover) and (pointer: fine) {

    section[component-id="417010573"]
    > .grid
    > .banner-entry:hover {
        transform: translateY(-3px) !important;

        box-shadow:
            0 11px 28px rgba(40, 35, 25, 0.12) !important;
    }
}


/* ================================================================
   TABLET
================================================================ */

@media (min-width: 768px) and (max-width: 1023px) {

    section[component-id="417010573"]
    [data-testid="store-home-square-banners"],
    section[component-id="417010573"][data-testid="store-home-square-banners"] {
        --td-mosaic-gap: 12px;

        width: calc(100% - 24px) !important;

        margin-top: 22px !important;
        margin-bottom: 28px !important;
    }
}


/* ================================================================
   MOBILE
================================================================ */

@media (max-width: 767px) {

    section[component-id="417010573"]
    [data-testid="store-home-square-banners"],
    section[component-id="417010573"][data-testid="store-home-square-banners"] {
        --td-mosaic-gap: 10px;

        width: calc(100% - 24px) !important;
        max-width: 560px !important;

        margin:
            18px auto 24px !important;

        padding: 0 !important;
    }


    /* البنرات تحت بعضها */

    section[component-id="417010573"] > .grid {
        grid-template-columns:
            minmax(0, 1fr) !important;

        grid-template-rows:
            none !important;

        grid-template-areas:
            none !important;

        aspect-ratio:
            auto !important;

        gap:
            var(--td-mosaic-gap) !important;
    }


    section[component-id="417010573"]
    > .grid
    > .banner-entry {
        grid-area: auto !important;

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

        min-height: 0 !important;

        border-radius: 13px !important;

        background-position:
            center !important;

        background-size:
            cover !important;

        transform:
            none !important;
    }


    /*
       البنر الأول أبعاده الأصلية 834 × 900
       لذلك نحافظ على صورته كاملة.
    */

    section[component-id="417010573"]
    > .grid
    > .banner-entry:nth-child(1) {
        aspect-ratio:
            834 / 900 !important;
    }


    /*
       باقي الصور أبعادها الأصلية 2:1
    */

    section[component-id="417010573"]
    > .grid
    > .banner-entry:nth-child(2),

    section[component-id="417010573"]
    > .grid
    > .banner-entry:nth-child(3),

    section[component-id="417010573"]
    > .grid
    > .banner-entry:nth-child(4) {
        aspect-ratio:
            2 / 1 !important;
    }
}


/* ================================================================
   SMALL MOBILE
================================================================ */

@media (max-width: 390px) {

    section[component-id="417010573"]
    [data-testid="store-home-square-banners"],
    section[component-id="417010573"][data-testid="store-home-square-banners"] {
        width:
            calc(100% - 20px) !important;
    }
}


/* إزالة حركة اللمس على الموبايل */

@media (hover: none), (pointer: coarse) {

    section[component-id="417010573"]
    > .grid
    > .banner-entry,

    section[component-id="417010573"]
    > .grid
    > .banner-entry:hover {
        transform:
            none !important;
    }
}


/* =========================================================
   إظهار بنر السكري كاملًا بدون قص
   البنر الرابع داخل قسم البنرات
========================================================= */

@media (min-width: 768px) {

    section[component-id="417010573"]
    > .grid
    > .banner-entry:nth-child(4) {
        isolation: isolate !important;

        background-color:
            #ead8c1 !important;

        background-position:
            center !important;

        background-size:
            cover !important;
    }


    /* خلفية ناعمة تملأ المساحة الطولية */

    section[component-id="417010573"]
    > .grid
    > .banner-entry:nth-child(4)::before {
        content: "" !important;

        position: absolute !important;
        z-index: 0 !important;

        inset: -5% !important;

        pointer-events: none !important;

        background:
            rgba(238, 220, 199, 0.86) !important;

        -webkit-backdrop-filter:
            blur(15px) !important;

        backdrop-filter:
            blur(15px) !important;
    }


    /* نسخة كاملة وواضحة من بنر السكري */

    section[component-id="417010573"]
    > .grid
    > .banner-entry:nth-child(4)::after {
        content: "" !important;

        position: absolute !important;
        z-index: 1 !important;

        inset: 0 !important;

        pointer-events: none !important;

        background-image:
            inherit !important;

        background-repeat:
            no-repeat !important;

        background-position:
            center !important;

        background-size:
            contain !important;
    }


    section[component-id="417010573"]
    > .grid
    > .banner-entry:nth-child(4)
    .banner-entry__text {
        position: relative !important;
        z-index: 2 !important;
    }
}


/* الموبايل: الصورة أفقية بالفعل ولا تحتاج التأثير */

@media (max-width: 767px) {

    section[component-id="417010573"]
    > .grid
    > .banner-entry:nth-child(4)::before,

    section[component-id="417010573"]
    > .grid
    > .banner-entry:nth-child(4)::after {
        content: none !important;
        display: none !important;
    }

    section[component-id="417010573"]
    > .grid
    > .banner-entry:nth-child(4) {
        aspect-ratio:
            2 / 1 !important;

        background-size:
            cover !important;

        background-position:
            center !important;
    }
}


/* ================================================================
   TAMOR DIRTY — PREMIUM RESPONSIVE FOOTER
   Salla Raed footer / CSS only
================================================================ */

footer.store-footer {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-top: clamp(36px, 5vw, 64px) !important;
  overflow: hidden !important;
  color: #fff !important;
  background:
    linear-gradient(145deg, #536f52 0%, #496449 48%, #354b36 100%) !important;
  border-top: 1px solid rgba(215, 189, 130, 0.34) !important;
}

footer.store-footer::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0 0 auto;
  height: 3px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--td-gold) 28%,
    var(--td-gold-light) 50%,
    var(--td-gold) 72%,
    transparent 100%
  );
}

footer.store-footer,
footer.store-footer * {
  box-sizing: border-box;
}

footer.store-footer .store-footer__inner {
  position: relative !important;
  padding: 52px 0 38px !important;
  color: #fff !important;
  background: transparent !important;
  border: 0 !important;
}

footer.store-footer .container {
  width: 100% !important;
  max-width: 1320px !important;
  margin-inline: auto !important;
  padding-inline: 16px !important;
}

footer.store-footer .store-footer__inner > .container {
  align-items: start !important;
}

@media (min-width: 1024px) {
  footer.store-footer .store-footer__inner > .container {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 24px !important;
  }

  footer.store-footer .store-footer__inner > .container > div:first-child {
    grid-column: span 2 / span 2 !important;
    padding-inline-end: clamp(28px, 4vw, 70px) !important;
  }

  footer.store-footer .store-footer__inner > .container > div:nth-child(2),
  footer.store-footer .store-footer__inner > .container > div:nth-child(3) {
    grid-column: span 1 / span 1 !important;
  }

  footer.store-footer .store-footer__inner > .container > salla-apps-icons {
    grid-column: span 2 / span 2 !important;
    padding-inline-start: clamp(28px, 4vw, 70px) !important;
  }
}

footer.store-footer h3,
footer.store-footer .s-contacts-title {
  position: relative !important;
  display: inline-block !important;
  margin: 0 0 20px !important;
  color: #fff !important;
  font-size: 17px !important;
  line-height: 1.45 !important;
  font-weight: 800 !important;
}

footer.store-footer h3::after,
footer.store-footer .s-contacts-title::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: -9px;
  width: 31px;
  height: 2px;
  border-radius: 999px;
  background: var(--td-gold-light);
}

footer.store-footer
.store-footer__inner
> .container
> div:first-child h3 {
  font-size: 21px !important;
}

footer.store-footer
.store-footer__inner
> .container
> div:first-child h3::after {
  width: 45px;
}

footer.store-footer
.store-footer__inner
> .container
> div:first-child .max-w-sm {
  max-width: 390px !important;
  margin: 0 0 20px !important;
}

footer.store-footer
.store-footer__inner
> .container
> div:first-child .max-w-sm p {
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 13px !important;
  line-height: 1.95 !important;
  font-weight: 400 !important;
}

footer.store-footer a {
  color: rgba(255, 255, 255, 0.82) !important;
  text-decoration: none !important;
}

footer.store-footer .s-menu-footer-list {
  display: grid !important;
  gap: 3px !important;
  margin: 0 !important;
  padding: 0 !important;
}

footer.store-footer .s-menu-footer-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: fit-content !important;
  min-height: 34px !important;
  padding: 5px 0 !important;
  color: rgba(255, 255, 255, 0.76) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  transition: color 0.22s ease, transform 0.22s ease !important;
}

footer.store-footer .s-menu-footer-item::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  border-radius: 1px;
  background: var(--td-gold-light);
  transform: rotate(45deg);
  opacity: 0.8;
}

footer.store-footer .s-contacts-list {
  display: grid !important;
  gap: 9px !important;
}

footer.store-footer .s-contacts-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 250px !important;
  min-height: 46px !important;
  padding: 6px 9px !important;
  color: rgba(255, 255, 255, 0.86) !important;
  font-size: 12.5px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.055) !important;
  transition:
    color 0.22s ease,
    background 0.22s ease,
    border-color 0.22s ease,
    transform 0.22s ease !important;
}

footer.store-footer .s-contacts-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px !important;
  border: 1px solid rgba(215, 189, 130, 0.24) !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.09) !important;
}

footer.store-footer .s-contacts-icon svg {
  width: 17px !important;
  height: 17px !important;
  fill: var(--td-gold-light) !important;
}

footer.store-footer .unicode {
  direction: ltr !important;
  unicode-bidi: plaintext !important;
  font-size: 12.5px !important;
  letter-spacing: 0.15px !important;
}

footer.store-footer .contact-social {
  margin-top: 15px !important;
}

footer.store-footer .s-social-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}

footer.store-footer .s-social-list:empty,
footer.store-footer salla-social:has(.s-social-list:empty) {
  display: none !important;
}

footer.store-footer .s-social-list a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 50% !important;
  color: #fff !important;
  background: rgba(255, 255, 255, 0.08) !important;
  transition:
    transform 0.22s ease,
    background 0.22s ease,
    border-color 0.22s ease !important;
}

footer.store-footer salla-trust-badges {
  display: block !important;
  margin-top: 12px !important;
}

footer.store-footer salla-apps-icons {
  display: block !important;
  min-width: 0 !important;
  color: #fff !important;
  opacity: 0.96 !important;
}

footer.store-footer > .container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  padding-top: 18px !important;
  padding-bottom: 18px !important;
  color: rgba(255, 255, 255, 0.64) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

footer.store-footer .copyright-text,
footer.store-footer .copyright-text p {
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.62) !important;
  font-size: 11.5px !important;
  line-height: 1.7 !important;
}

footer.store-footer .copyright-text a {
  color: var(--td-gold-light) !important;
  font-weight: 700 !important;
}

footer.store-footer .s-payments-list {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
}

footer.store-footer .s-payments-list-item {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 42px !important;
  height: 30px !important;
  padding: 3px 5px !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 7px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  transition: transform 0.2s ease !important;
}

footer.store-footer .s-payments-list-item img {
  display: block !important;
  width: auto !important;
  max-width: 38px !important;
  height: auto !important;
  max-height: 22px !important;
  object-fit: contain !important;
}

@media (hover: hover) and (pointer: fine) {
  footer.store-footer .s-menu-footer-item:hover {
    color: #fff !important;
    transform: translateX(-3px) !important;
  }

  footer.store-footer .s-contacts-item:hover {
    color: #fff !important;
    background: rgba(185, 149, 82, 0.16) !important;
    border-color: rgba(215, 189, 130, 0.32) !important;
    transform: translateX(-3px) !important;
  }

  footer.store-footer .s-social-list a:hover {
    background: rgba(185, 149, 82, 0.2) !important;
    border-color: rgba(215, 189, 130, 0.45) !important;
    transform: translateY(-3px) !important;
  }

  footer.store-footer .s-payments-list-item:hover {
    transform: translateY(-2px) !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  footer.store-footer .store-footer__inner > .container {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 30px 24px !important;
  }

  footer.store-footer .store-footer__inner > .container > div:first-child,
  footer.store-footer .store-footer__inner > .container > salla-apps-icons {
    grid-column: 1 / -1 !important;
    padding-inline: 0 !important;
  }

  footer.store-footer .s-contacts-item {
    max-width: 290px !important;
  }
}

@media (max-width: 767px) {
  footer.store-footer {
    margin-top: 34px !important;
    border-radius: 20px 20px 0 0 !important;
  }

  footer.store-footer .store-footer__inner {
    padding: 36px 0 26px !important;
  }

  footer.store-footer .container {
    padding-inline: 16px !important;
  }

  footer.store-footer .store-footer__inner > .container {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 27px !important;
  }

  footer.store-footer
  .store-footer__inner
  > .container
  > div:first-child,
  footer.store-footer .store-footer__inner > .container > div,
  footer.store-footer .store-footer__inner > .container > salla-apps-icons {
    width: 100% !important;
    min-width: 0 !important;
    padding-inline: 0 !important;
    grid-column: 1 !important;
  }

  footer.store-footer h3,
  footer.store-footer .s-contacts-title {
    margin-bottom: 18px !important;
    font-size: 16px !important;
  }

  footer.store-footer
  .store-footer__inner
  > .container
  > div:first-child h3 {
    font-size: 19px !important;
  }

  footer.store-footer
  .store-footer__inner
  > .container
  > div:first-child .max-w-sm {
    max-width: 100% !important;
    margin-bottom: 14px !important;
  }

  footer.store-footer
  .store-footer__inner
  > .container
  > div:first-child .max-w-sm p {
    font-size: 12.5px !important;
    line-height: 1.85 !important;
  }

  footer.store-footer .s-menu-footer-list {
    gap: 7px !important;
  }

  footer.store-footer .s-menu-footer-item {
    width: 100% !important;
    min-height: 44px !important;
    padding: 9px 11px !important;
    font-size: 12.5px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.045) !important;
  }

  footer.store-footer .s-contacts-item {
    max-width: none !important;
    min-height: 48px !important;
  }

  footer.store-footer .contact-social {
    display: block !important;
  }

  footer.store-footer > .container {
    flex-direction: column !important;
    justify-content: center !important;
    gap: 13px !important;
    padding: 17px 14px 20px !important;
    text-align: center !important;
  }

  footer.store-footer .s-payments-list {
    justify-content: center !important;
    gap: 5px !important;
  }

  footer.store-footer .s-payments-list-item {
    min-width: 39px !important;
    height: 28px !important;
    padding: 3px 4px !important;
  }

  footer.store-footer .s-payments-list-item img {
    max-width: 35px !important;
    max-height: 20px !important;
  }

  footer.store-footer .copyright-text,
  footer.store-footer .copyright-text p {
    font-size: 10.5px !important;
  }
}

@media (max-width: 390px) {
  footer.store-footer {
    border-radius: 17px 17px 0 0 !important;
  }

  footer.store-footer .store-footer__inner {
    padding: 31px 0 22px !important;
  }

  footer.store-footer .container {
    padding-inline: 14px !important;
  }

  footer.store-footer .store-footer__inner > .container {
    gap: 23px !important;
  }

  footer.store-footer
  .store-footer__inner
  > .container
  > div:first-child h3 {
    font-size: 18px !important;
  }
}

 /* إخفاء فريق العمل وتواصل معنا من روابط مهمة فقط */

.store-footer .s-menu-footer-item[href="https://tomordirty.com/#"] {
    display: none !important;
}